/* patches.css — CSS added after the prototype's own prototype.css (PATCHES.md C1–C4). Every rule applies only where
   the prototype draws nothing different: a focused skip link, a visitor who asked for reduced motion, invisible hit
   areas, a CMS-uploaded founder photo. The prototype look is unchanged. */

/* C1 skip link (AC-176): the prototype keeps it clipped (.sr) even when focused; shown only while focused */
a.sr[href="#main"]:focus{position:fixed;left:16px;top:12px;z-index:10000;width:auto;height:auto;overflow:visible;clip:auto;white-space:nowrap;padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:600;text-decoration:none}
/* the content the skip link focuses (tabindex -1) gets no focus frame */
#main[tabindex="-1"]:focus,#view[tabindex="-1"]:focus{outline:none}

/* C2 reduced motion (AC-041/AC-183): final states at once — no transition, no running or repeating animation */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
}

/* C3 founder letter (AC-139): a CMS-uploaded photo is shown as the prototype cut-out is drawn — grayscale (the
   prototype photo is already monochrome; its own drop shadow kept) */
.fl-hero img[src^="/api/v1/public/pages/files/"]{filter:grayscale(1) drop-shadow(0 30px 40px rgba(0,0,0,.12))}

/* C4 hit areas of at least 44×44 CSS px (AC-043/AC-182). Each control keeps its drawn shape: the box grows by a
   transparent border (or padding) that the background does not paint (background-clip:padding-box) and a negative
   margin of the same size gives the layout back; a visible 1 px border becomes an inset ring of the same colour (summary is content-box: 42 px content + 2 px borders); the
   focus ring offset is moved in by the same amount. A closed filter panel is not laid out (it is never drawn). */
.fgroup:not([open]) > .fpanel{display:none}
.case-open .row a{border:10px solid transparent;margin:-10px;background-clip:padding-box!important;outline-offset:-7px}
.lang button{height:44px;min-width:52px;border:6px solid transparent;margin:-6px;background-clip:padding-box!important;outline-offset:-3px}
.qchip{height:44px;border:5px solid transparent;margin:-5px;background-clip:padding-box!important;outline-offset:-2px}
.searchbox input{padding-block:9px;margin-block:-9px}
.fgroup summary{height:42px;padding:0 17px;border:2px solid transparent;margin:-2px;background-clip:padding-box!important;box-shadow:inset 0 0 0 1px var(--line);outline-offset:1px}
.fgroup[open] summary{border-color:transparent;box-shadow:inset 0 0 0 1px var(--fg)}

/* C5 Home case image size (D-105): the width / height attributes A4 adds for AC-173 (720×300) are a CSS height hint that
   beats the prototype's `aspect-ratio:760/320` — the image grew to ~196 px and pushed the "อ่านเรื่องนี้" link and the
   description down. height:auto lets the prototype ratio draw it again (131 px at 1440, as the prototype). */
.case-open img{height:auto}

/* C8 article images (CMS article page): the A4 width / height attributes (e.g. 1600×900) are a CSS height hint; with only
   `img{max-width:100%}` the width shrank to the column (~728 px) while the height stayed 900 px — the hero was stretched
   tall. The hero takes the prototype's art-fig frame (.ph-img: 16/9, card radius); body images keep their own ratio. */
.art-fig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-card)}
.prose img{height:auto}

/* C7 Home open story card with few cards (CMS-SPEC-01 fix cycle 2, BUG-FE-05 / AC-037): the prototype sizes the open
   card for 4 stories (~360 px wide at 1440 → image 131 px). Real mode shows only the CMS Home stories; with 2 the open
   card is ~770 px wide, the 760/320 image grows to ~304 px and, as a flex item that may not shrink below its content
   (min-height:auto), it took the whole card — the description shrank to 0 px. The image may now give up height (it is
   object-fit:cover, so it crops) and the description keeps its lines. When everything fits (4 cards) nothing shrinks, so
   no prototype pixel changes. */
.case-open img{min-height:0}
.case-open p{flex-shrink:0}

/* C6 reviewer preview (CMS-SPEC-01 W8, PR-46/48 · E-05-F3 UI Draft): only on /preview/{token} pages (html.cube-pv, set by
   adapter.js __CUBE_PV__ / patch P31). A fixed bar "ตัวอย่าง · ยังไม่เผยแพร่ · สถานะ … · ผ่าน x/y" above the prototype nav
   (nav and page pushed down by the bar height, nothing else moves); the failed readiness checks open under it. Links to
   an item that is not live carry a small "ยังไม่เผยแพร่" marker. Colours = the prototype's inverse-surface tokens
   (--inv-bg / --inv-fg, the ones .adv / .formula use) + --orange: #111 / #FAF8F5 in light; in the OS / site dark scheme
   #1A1A19 / #FAF8F5 — the bar used --ink / --bg, and --bg turns #111 in dark: #111 text on #111 (BUG-FE-01). */
html.cube-pv{--pv-h:40px}
html.cube-pv body{padding-top:var(--pv-h)}
html.cube-pv .nav{top:var(--pv-h)}
.pv-bar{position:fixed;inset:0 0 auto 0;z-index:95;height:var(--pv-h);display:flex;align-items:center;padding:0 var(--pad);background:var(--inv-bg);color:var(--inv-fg);font:600 13px/1.3 var(--font)}
.pv-bar .pv-in{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}
.pv-bar .pv-t{color:var(--orange);font-weight:700}
.pv-bar i{font-style:normal;opacity:.55}
.pv-more{position:relative;margin-left:4px}
.pv-more summary{cursor:pointer;list-style:none;text-decoration:underline;text-underline-offset:3px}
.pv-more summary::-webkit-details-marker{display:none}
.pv-more summary:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
.pv-more ul{position:absolute;top:calc(100% + 12px);left:0;min-width:260px;max-width:min(420px,calc(100vw - 32px));margin:0;padding:12px 16px 12px 30px;border-radius:10px;background:var(--inv-bg);color:var(--inv-fg);font-weight:500;line-height:1.55;white-space:normal;box-shadow:0 12px 30px rgba(0,0,0,.22)}
.pv-draft{display:inline-block;margin-left:6px;padding:1px 8px;border:1px solid var(--orange);border-radius:999px;color:var(--orange);font-size:11px;font-weight:600;line-height:1.5;vertical-align:middle;white-space:nowrap}
@media (max-width:640px){
  html.cube-pv{--pv-h:56px}
  .pv-bar{font-size:12px}
  .pv-bar .pv-in{flex-wrap:wrap;row-gap:2px;white-space:normal}
  .pv-more ul{left:auto;right:0}
}