/* Styles pages as an editing room (styles-room.js). The room now wears the site's own paper
   (boss, 12 Nov 2026: "ไม่มีโทนสีขาว ทั้งที่หน้าแรกทำไว้ดีมาก"): light theme = white sheet with hairlines,
   dark theme = the old dark room. Picture boxes stay dark because they hold video.
   Fonts (boss, 9 Nov 2026): big headings Silkscreen for English, Athiti for Thai; all other text Athiti.
   Motion: transform and opacity only, eased; steps() only inside the pixel sprites (pixel.css). */
.sroom {
  --room: var(--paper); --deck: var(--card);
  --tr: color-mix(in srgb, var(--ink) 5%, var(--paper));
  --tr2: color-mix(in srgb, var(--ink) 2.5%, var(--paper));
  --line: var(--rule);
  --txt: var(--ink); --dim: var(--ink-2);
  --acc: var(--b700); --acc-fill: var(--b600);
  --glow: rgba(47, 91, 255, .12);
  --f-px: "Silkscreen", "Athiti", monospace;
  --f-th: "Athiti", "Noto Sans Thai", "Leelawadee UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --labelw: 84px;
  color: var(--txt); font-family: var(--f-th);
  background: radial-gradient(60% 320px at 50% 0, color-mix(in srgb, var(--b500) 8%, transparent), transparent 70%) no-repeat, var(--room);
}
:root[data-theme="dark"] .sroom {
  --acc: var(--b300); --glow: rgba(47, 91, 255, .35);
  background: radial-gradient(60% 320px at 50% 0, rgba(47, 91, 255, .18), transparent 70%) no-repeat, var(--room);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sroom {
    --acc: var(--b300); --glow: rgba(47, 91, 255, .35);
    background: radial-gradient(60% 320px at 50% 0, rgba(47, 91, 255, .18), transparent 70%) no-repeat, var(--room);
  }
}
@media (min-width: 700px) { .sroom { --labelw: 132px; } }
.sroom *, .sroom *::before, .sroom *::after { box-sizing: border-box; }
.sroom button { font: inherit; cursor: pointer; }   /* not color: inherit — it beat .sr-btn's white and put ink text on a blue button */
.sroom [data-pxi] img, .sroom .pxi { image-rendering: pixelated; }
.sroom :focus-visible { outline: 2px solid var(--b500); outline-offset: 2px; }
.sr-wrap { max-width: var(--frame, 1280px); margin-inline: auto; padding-block: 22px 56px; padding-left: var(--gut, 16px); padding-right: var(--gut-r, 16px); }

.sr-bar { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; flex-wrap: wrap; }
.sr-bar h1 { margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-weight: 400; }
.sr-bar h1 .en { font: 700 clamp(30px, 7vw, 56px)/1 var(--f-px); letter-spacing: .02em; color: var(--ink); }
:root[data-theme="dark"] .sr-bar h1 .en { text-shadow: 0 0 18px var(--glow), 0 0 2px var(--b300); }
.sr-bar h1 .th { font: 600 clamp(18px, 3.4vw, 24px)/1.2 var(--f-th); color: var(--acc); }
.sr-n { margin-left: auto; font: 500 12px/1 var(--f-mono); color: var(--dim); }
.sr-crumb { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font: 400 12px/1 var(--f-px); color: var(--acc); text-decoration: none; padding: 8px 10px; background: var(--deck); box-shadow: inset 0 0 0 1px var(--line); }
.sr-crumb:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--b500), 0 0 16px var(--glow); }

/* program monitor */
.sr-monitor { position: relative; background: var(--deck); border: 2px solid color-mix(in srgb, var(--b500) 32%, var(--line)); contain: layout paint;
  box-shadow: 0 0 0 4px var(--room), 0 0 0 5px var(--line), 0 22px 44px -30px rgba(13, 18, 32, .35), 0 0 32px var(--glow);
  padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
/* page 1: the monitor stays on screen under the site's bar, so one press always shows the clip (boss's card:
   "กด 1 ครั้งดูบนจอ"); on a phone it shrinks to a strip: picture, name and the two buttons */
[data-sr="timeline"] .sr-monitor { position: sticky; top: calc(var(--nav-h, 56px) + 8px); z-index: 6; }
@media (max-width: 759px) {
  [data-sr="timeline"] .sr-monitor { grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 8px; }
  [data-sr="timeline"] .sr-tc, [data-sr="timeline"] .sr-meta, [data-sr="timeline"] .sr-rec, [data-sr="timeline"] .sr-tag { display: none; }
  [data-sr="timeline"] .sr-mon-name { margin: 0; font-size: 17px; }
  [data-sr="timeline"] .sr-side { gap: 6px; }
  [data-sr="timeline"] .sr-btn, [data-sr="timeline"] .sr-ghost { font-size: 14px; padding: 9px 12px; }
}
@media (min-width: 760px) { [data-sr="timeline"] .sr-monitor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 760px) { .sr-monitor { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); padding: 16px; } }
.sr-pic { position: relative; aspect-ratio: 16 / 9; background: #03050B; overflow: hidden; }
.sr-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.sr-pic img.on { opacity: 1; }
.sr-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s linear; pointer-events: none; z-index: 1; }
.sr-film.on { opacity: 1; }
.sr-th .style-media { position: absolute; inset: 0; aspect-ratio: auto; background: #03050B; }
.sr-pic::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); }
.sr-tag { position: absolute; left: 10px; top: 10px; z-index: 3; font: 400 11px/1 var(--f-px); color: #DCE4FF; background: rgba(3, 5, 11, .8); padding: 5px 7px; border: 1px solid var(--b500); }
.sr-tag:empty { display: none; }
.sr-rec { position: absolute; right: 10px; top: 10px; z-index: 3; display: flex; gap: 6px; align-items: center; font: 400 11px/1 var(--f-px); color: #fff; }
.sr-rec i { width: 8px; height: 8px; background: #FF3B3B; box-shadow: 0 0 6px #FF3B3B; }
.sr-side { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; contain: layout paint; }
.sr-tc { font: 500 clamp(22px, 4vw, 34px)/1 var(--f-mono); color: var(--tc, var(--b600)); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .sr-tc { color: var(--b300); }
.sr-mon-name { margin: 6px 0 0; font: 700 clamp(26px, 4.4vw, 40px)/1.15 var(--f-th); color: var(--txt); text-wrap: balance; overflow-wrap: anywhere; }
.sr-meta { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.sr-chip { font: 400 11px/1 var(--f-px); padding: 6px 8px; color: var(--acc); background: color-mix(in srgb, var(--b500) 8%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--b500) 24%, var(--line)); }
.sr-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.sr-btn { display: inline-block; border: 0; background: var(--acc-fill); color: #fff; text-decoration: none; font: 600 18px/1 var(--f-th); padding: 14px 22px;
  box-shadow: 0 -4px 0 0 var(--b700) inset, 0 0 0 3px color-mix(in srgb, var(--acc-fill) 22%, var(--card)); transition: box-shadow .25s ease, transform .1s ease; }
.sr-btn:hover, .sr-btn:focus-visible { box-shadow: 0 -4px 0 0 var(--b700) inset, 0 0 0 3px var(--acc-fill), 0 0 24px var(--glow); outline: none; }
.sr-btn:active { transform: translateY(2px); }
.sr-ghost { display: inline-block; border: 0; background: none; font: 600 16px/1 var(--f-th); color: var(--acc); text-decoration: none; padding: 14px 16px;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--b500) 34%, var(--line)); transition: box-shadow .25s ease, color .25s ease; }
.sr-ghost:hover, .sr-ghost:focus-visible { color: var(--ink); box-shadow: inset 0 0 0 2px var(--b500), 0 0 18px var(--glow); outline: none; }
.sr-takes { display: flex; gap: 6px; flex-wrap: wrap; }
.sr-takes button { border: 0; padding: 8px 10px; font: 400 11px/1 var(--f-px); color: var(--acc); background: var(--tr); box-shadow: inset 0 0 0 1px var(--line); }
.sr-takes button[aria-pressed="true"] { color: #fff; background: var(--acc-fill); box-shadow: inset 0 0 0 1px var(--b400), 0 0 14px var(--glow); }
.sr-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.sr-tags span { font: 500 13px/1 var(--f-th); color: var(--dim); padding: 6px 8px; background: var(--tr); }
/* page 3's own copy (index.json `points` / `model`): three short lines and two labels, never a paragraph (PAGE-RULES) */
.sr-points { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.sr-points li { position: relative; padding-left: 14px; font: 400 13px/1.45 var(--f-th); color: var(--txt); }
.sr-points li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; background: var(--acc-fill); }
.sr-need { margin: 0; display: flex; gap: 8px; align-items: baseline; font: 400 13px/1.4 var(--f-th); color: var(--dim); }
.sr-need .sr-chip { flex: 0 0 auto; }
.sr-sample-btn { background: var(--card); color: var(--acc); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--b500) 40%, var(--line)); }
.sr-sample-btn[aria-pressed="true"] { background: var(--tr); color: var(--txt); }
/* the full sample behind a press: contained on the style's dark ground, so a 9:16 clip is never cut or squashed */
.sr-pic video.sr-sample { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; object-fit: contain; background: #03050B; }
.sr-pic.sampling > img, .sr-pic.sampling > .sr-film { opacity: 0 !important; }
/* which model made the sample: one small muted line of its own, never inside the chip rows (boss, 13 Nov 2026) */
.sr-by { margin: 8px 0 0; font: 400 11px/1.3 var(--f-th); color: color-mix(in srgb, var(--dim) 72%, transparent); }
/* "สไตล์ที่น่าสนใจ" at the foot of every style page: three cards, the same language as the group bin */
.sr-more { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); }
.sr-more-h { margin: 0 0 10px; font: 700 15px/1.2 var(--f-th); color: var(--txt); }
.sr-more-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sr-more-cards a { display: block; text-decoration: none; color: inherit; }
/* its own name class: the phone rule hides .sr-nm for the timeline's clip labels, and these three names are the point */
.sr-more-nm { display: block; margin-top: 6px; font: 500 13px/1.25 var(--f-th); color: var(--dim); }
@media (max-width: 520px) { .sr-more-cards { gap: 6px; } .sr-more-nm { font-size: 11px; } }
.sr-nav3 { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.sr-nav3 a { font: 500 14px/1.2 var(--f-th); color: var(--acc); text-decoration: none; padding: 10px 12px; background: var(--deck); box-shadow: inset 0 0 0 1px var(--line); max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-nav3 a:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--b500); }

/* the licence line, as a quiet band inside the page frame (not a 12px afterthought out at the edge) */
.sroom .style-credit { margin: 28px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font: 400 13px/1.6 var(--f-mono); color: var(--ink-2); }
.sroom .style-credit a { color: var(--ink); white-space: nowrap; }

/* timeline */
/* on a phone the longest track (8 clips) would leave clips a few pixels wide: the whole timeline scrolls sideways
   inside its own box, like an editing app, with the track names pinned on the left */
.sr-scroll { margin-top: 22px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.sr-timeline { min-width: calc(var(--labelw) + 8 * 60px); }
.sr-timeline:focus-visible { outline: 2px solid var(--b500); outline-offset: 2px; }
.sr-label, .sr-corner { position: sticky; left: 0; z-index: 5; }
.sr-timeline { position: relative; margin-top: 0; background: var(--tr2); box-shadow: inset 0 0 0 2px var(--line); }
.sr-ruler { display: grid; grid-template-columns: var(--labelw) minmax(0, 1fr); height: 64px; border-bottom: 2px solid var(--line); }
.sr-corner { display: flex; align-items: flex-end; padding: 0 8px 8px; font: 400 10px/1 var(--f-px); color: var(--dim); background: var(--deck); }
.sr-ticks { position: relative; overflow: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 22%, transparent) 0 2px, transparent 2px) 0 100% / 12.5% 20px repeat-x,
              linear-gradient(90deg, color-mix(in srgb, var(--ink) 10%, transparent) 0 1px, transparent 1px) 0 100% / 2.5% 9px repeat-x; }
.sr-ticks span { position: absolute; bottom: 24px; font: 500 10px/1 var(--f-mono); color: var(--dim); transform: translateX(5px); }
.sr-playhead { position: absolute; left: 0; top: 0; bottom: 0; width: 0; z-index: 4; will-change: transform; transition: transform .6s cubic-bezier(.2, .7, .1, 1); pointer-events: none; }
.sr-line { position: absolute; left: -1px; top: 54px; bottom: 0; width: 2px; background: var(--b500); box-shadow: 0 0 10px 1px var(--glow); }
.sr-cap { position: absolute; left: -7px; top: 46px; width: 14px; height: 10px; background: var(--b500); clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%); }
.sr-peng { position: absolute; left: 0; top: 2px; transform: translateX(-50%); transition: opacity .12s linear; }
.sr-slide { opacity: 0; }
.sr-playhead.moving .sr-slide { opacity: 1; }
.sr-playhead.moving .sr-sit { opacity: 0; }

/* NB: no content-visibility here. Safari sizes skipped rows from contain-intrinsic-size (120px against a real
   74px) and never paints their pictures, so the timeline showed a column of empty bands on an iPhone
   (boss, 12 Nov 2026: "หน้าสไตล์แบบโทรศัพท์ไม่เห็นจะมีให้ดูเลย"). 19 rows and 93 lazy images need no shortcut. */
.sr-track { display: grid; grid-template-columns: var(--labelw) minmax(0, 1fr); border-top: 2px solid var(--room); }
.sr-label { background: var(--deck); padding: 8px; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; text-decoration: none; color: inherit; }
.sr-label .en { font: 400 11px/1.1 var(--f-px); color: var(--acc); overflow-wrap: anywhere; }
.sr-label .th { font: 500 12px/1.2 var(--f-th); color: var(--dim); }
.sr-label:hover .en, .sr-track.on .sr-label .en { color: var(--ink); }
.sr-track.on .sr-label { background: color-mix(in srgb, var(--b500) 10%, var(--card)); box-shadow: inset 3px 0 0 var(--b500); }
.sr-clips { position: relative; display: flex; gap: 2px; padding: 4px 2px; background: var(--tr); }
.sr-clip { position: relative; flex: 0 0 calc((100% - 14px) / 8); min-width: 0; min-height: 44px; border: 0; background: var(--tr2); padding: 4px; display: grid; gap: 4px; align-content: start; text-align: left; color: var(--txt); box-shadow: inset 0 0 0 1px var(--line); contain: layout paint; }
/* dimming and the selection ring are layers that only fade, so a click repaints nothing */
.sr-clip::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: color-mix(in srgb, var(--paper) 52%, transparent); transition: opacity .25s ease; }
.sr-clip::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 2px var(--b500), inset 0 0 0 4px var(--card); transition: opacity .25s ease; }
.sr-clip:hover::before, .sr-clip.sel::before { opacity: 0; }
.sr-clip.sel::after { opacity: 1; }
.sr-clip:hover::after { opacity: .5; }
.sr-th { position: relative; display: block; aspect-ratio: 16 / 10; background: #03050B; overflow: hidden; }
.sr-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sr-nm { font: 500 12px/1.2 var(--f-th); color: var(--dim); min-height: 2.4em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sr-clip.sel .sr-nm { color: var(--txt); }
.sr-open { position: absolute; z-index: 3; left: 50%; top: 34%; transform: translate(-50%, -50%); opacity: 0; transition: opacity .2s ease;
  font: 400 10px/1 var(--f-px); color: #fff; background: var(--acc-fill); padding: 6px 8px; box-shadow: 0 0 14px var(--glow); pointer-events: none; }
.sr-clip.sel .sr-open { opacity: 1; }
@media (max-width: 560px) {
  .sr-nm { display: none; } .sr-clip { padding: 2px; } .sr-clips { align-items: center; }
  .sr-ticks span:nth-child(even) { display: none; } .sr-corner { font-size: 0; }
  .sr-open { font-size: 8px; padding: 4px 5px; }
}

/* page 2: media bin */
.sr-gpeng { flex: none; }
.sr-bin { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.sr-bin a { position: relative; display: grid; gap: 8px; padding: 8px; background: var(--deck); color: var(--txt); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); contain: layout paint; }
.sr-bin a::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 2px var(--b500), inset 0 0 0 4px var(--card); transition: opacity .2s ease; }
.sr-bin a:hover::after, .sr-bin a:focus-visible::after { opacity: 1; }
.sr-bin .sr-nm { font: 600 16px/1.25 var(--f-th); color: var(--txt); min-height: 0; display: block; }
.sr-en { font: 400 10px/1.2 var(--f-px); color: var(--dim); }
.sr-dur { position: absolute; right: 6px; bottom: 6px; font: 500 10px/1 var(--f-mono); color: #fff; background: rgba(3, 5, 11, .8); padding: 3px 5px; }

.sr-off .px, .sr-off .px * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .sr-pic img, .sr-playhead, .sr-clip::before, .sr-clip::after, .sr-btn, .sr-ghost, .sr-open, .sr-peng { transition: none; }
}