/* device.css: "the device" skins. Chrome is stock, period, neutral: a contrast that says this is a machine and the backdrop is art.
   dev-photon is the default (stock grey: art vs OS separation); dev-graphite is the opaque dark alternative.
   Dial (display › chrome): --ca = alpha of chrome FILLS only (taskbar, title bars, frames), 0.6-1. Text, icons, borders, focus,
   window bodies, menus and term are always opaque. Set on :root by device.js. */
html[data-skin^="dev-"] {
  --ca:1;
  --c:214 214 214; --c2:190 190 190; --hl:255 255 255; --sh:110 110 110; --dk:40 40 40;          /* panel, panel-low, highlight, shadow, edge */
  --p:250 250 248; --ink:#111; --ui:"DejaVu Sans", "Verdana", sans-serif;
  --t1:#365680; --t2:#466995; --tt:#fff; --ti1:#bcbcbc; --ti2:#bcbcbc; --tti:#303030;              /* title active / inactive */
  --chrome:rgb(var(--c) / var(--ca)); --hi:rgb(var(--hl)); --lo:rgb(var(--dk)); --mid:rgb(var(--sh)); --paper:rgb(var(--p));
  --bar:30px;
}
html[data-skin="dev-graphite"] {
  --c:62 64 68; --c2:48 50 54; --hl:112 115 122; --sh:30 31 34; --dk:10 10 11;
  --p:26 27 29; --ink:#e4e2dc; --t1:#5b5f68; --t2:#3b3e44; --tt:#f2f0ea; --ti1:#2c2e32; --ti2:#3a3c41; --tti:#9a9890;
}
html[data-skin^="dev-"] #os { font:12px var(--ui); color:var(--ink); }
html[data-skin^="dev-"] #os :is(.bevel, .sunk) { background:var(--chrome); border:1px solid; }
html[data-skin^="dev-"] #os .bevel { border-color:rgb(var(--hl)) rgb(var(--dk)) rgb(var(--dk)) rgb(var(--hl)); box-shadow:inset -1px -1px 0 rgb(var(--sh) / var(--ca)); }
html[data-skin^="dev-"] #os .sunk { border-color:rgb(var(--sh)) rgb(var(--hl)) rgb(var(--hl)) rgb(var(--sh)); }
html[data-skin^="dev-"] #os :focus-visible { outline:var(--rvls-focus-ring-dark); outline-offset:var(--rvls-focus-offset); box-shadow:none; }

/* windows */
html[data-skin^="dev-"] .win { padding:2px; }
html[data-skin^="dev-"] .win .tb { height:26px; gap:4px; padding:0 1px 0 6px; color:var(--tti);
  background:linear-gradient(90deg, color-mix(in srgb, var(--ti1) calc(var(--ca) * 100%), transparent), color-mix(in srgb, var(--ti2) calc(var(--ca) * 100%), transparent)); }
html[data-skin^="dev-"] .win.active .tb { color:var(--tt);
  background:linear-gradient(90deg, color-mix(in srgb, var(--t1) calc(var(--ca) * 100%), transparent), color-mix(in srgb, var(--t2) calc(var(--ca) * 100%), transparent)); }
html[data-skin^="dev-"] .win .tb img { width:var(--rvls-icon-size-chrome); height:var(--rvls-icon-size-chrome); filter:none; }
html[data-skin="dev-graphite"] .win .tb img { filter:invert(.85); }
html[data-skin^="dev-"] .win .tb .t { font:bold 13px var(--ui); }
html[data-skin^="dev-"] .win .ctl { width:24px; height:22px; color:#111; background:rgb(var(--c)) !important; }
@media (pointer:coarse) { html[data-skin^="dev-"] .win .tb { height:44px; } html[data-skin^="dev-"] .win .ctl { width:44px; height:40px; } }
html[data-skin="dev-graphite"] .win .ctl { color:#ddd; }
html[data-skin^="dev-"] .win .ctl svg { width:11px; height:11px; }
html[data-skin^="dev-"] .win .body { margin:2px 0 0; background:var(--paper); color:var(--ink); font:13px/1.55 var(--f-read); }
html[data-skin^="dev-"] .win.max { inset:0 0 var(--bar) 0 !important; }
html[data-skin^="dev-"] .paper { background:transparent; color:var(--ink); }
html[data-skin^="dev-"] .paper h1 { font:bold 22px/1.2 var(--ui); }
html[data-skin^="dev-"] .paper :is(h2, h3) { font:bold 14px var(--ui); }
/* one type scale for every document window: thorn for the header and labels, mono for reading, all lowercase */
html[data-skin^="dev-"] .win .body { font-size:14px; }
html[data-skin^="dev-"] .paper h1 { font:26px/1.1 var(--f-ui); text-transform:lowercase; }
html[data-skin^="dev-"] .paper :is(h2, h3) { font:18px/1.2 var(--f-ui); text-transform:lowercase; }
html[data-skin^="dev-"] .paper :is(.crumb, .tags) { font:14px/1.4 var(--f-ui); text-transform:lowercase; }
html[data-skin^="dev-"] .paper .synopsis { font:15px/1.55 var(--f-read); }
html[data-skin^="dev-"] .tabs { background:var(--chrome); border-bottom:1px solid rgb(var(--sh)); padding:4px 4px 0; }
html[data-skin^="dev-"] .tabs button { font:12px var(--ui); border:1px solid rgb(var(--sh)); border-bottom:0; border-radius:var(--rvls-radius); background:rgb(var(--c2)); color:var(--ink); padding:var(--rvls-space-strip-block) var(--rvls-space-strip-inline); }
html[data-skin^="dev-"] .tabs button[aria-selected="true"] { background:rgb(var(--p)); }
html[data-skin^="dev-"] .display button { font:12px var(--ui); color:var(--ink); }
html[data-skin^="dev-"] .loading, html[data-skin^="dev-"] .pre-t { font:12px var(--ui); color:var(--ink); }

/* taskbar: a shelf, not a strip of art */
html[data-skin^="dev-"] .taskbar { height:var(--bar); padding:2px; gap:2px; }
html[data-skin^="dev-"] .start { height:24px; font:bold 12px var(--ui); padding:0 8px; }
html[data-skin^="dev-"] .start img { width:16px; height:16px; }
html[data-skin="dev-graphite"] .start img, html[data-skin="dev-graphite"] .task img, html[data-skin="dev-graphite"] .startmenu img { filter:invert(.85); }
html[data-skin^="dev-"] .task { height:24px; max-width:170px; font:12px var(--ui); }
html[data-skin^="dev-"] .task img { width:var(--rvls-icon-size-chrome); height:var(--rvls-icon-size-chrome); }
html[data-skin^="dev-"] .task.on { background:rgb(var(--c2) / var(--ca)); border-color:rgb(var(--sh)) rgb(var(--hl)) rgb(var(--hl)) rgb(var(--sh)); font-weight:bold; }
html[data-skin^="dev-"] .tray { height:24px; font:12px var(--ui); gap:8px; }
html[data-skin^="dev-"] .tray button { font:12px var(--ui); }
html[data-skin^="dev-"] #os .startmenu { bottom:calc(var(--bar) + 1px); width:230px; background:rgb(var(--c)); }
html[data-skin^="dev-"] #os .tabs { background:rgb(var(--c)); }
html[data-skin^="dev-"] .startmenu .side { width:22px; background:linear-gradient(var(--t2), var(--t1)); color:#fff; font:bold 13px var(--ui); }
html[data-skin^="dev-"] .startmenu li button, html[data-skin^="dev-"] .startmenu li a { font:12px var(--ui); padding:7px 8px; min-height:32px; color:var(--ink); }
html[data-skin^="dev-"] .startmenu li button:hover, html[data-skin^="dev-"] .startmenu li a:hover { background:var(--t1); color:#fff; }
html[data-skin^="dev-"] .startmenu .grp { font:bold 10px var(--ui); color:rgb(var(--sh)); }
html[data-skin="dev-graphite"] .startmenu .grp { color:#8a8880; }

/* desktop icons: stock labels on a small plate that follows the chrome dial */
html[data-skin^="dev-"] .icon .glyph img { filter:none; }
html[data-skin^="dev-"] .icon .lbl { font:12px var(--ui); color:#fff; background:#202020; padding:2px 4px; }
html[data-skin^="dev-"] .icon:is(.sel, :focus-visible) .lbl { background:var(--t1); }


/* rice furniture stays off on device skins */
html[data-skin^="dev-"] #os-bd { --bd-tint:#3a3a3e; --bd-wblend:multiply; }
html[data-skin^="dev-"] .display input[type="range"] { width:100%; }
.chromedial { padding:12px; display:grid; gap:10px; font:12px var(--ui, sans-serif); }
.chromedial label { display:grid; grid-template-columns:130px 1fr 40px; gap:8px; align-items:center; }
.chromedial .reset { justify-self:start; font:12px var(--ui, sans-serif); padding:4px 12px; }
.chromedial[hidden] { display:none; }

/* Desktop marks stay monochrome chrome. Art relief belongs to the window body. */
html[data-skin^="dev-"] #os .icon .glyph img,
html[data-skin^="dev-"][data-motion] #os .icon:is(:hover, :focus-visible, .sel) .glyph img {
  filter:none;
}
html[data-skin="dev-graphite"] #os .icon .glyph img { filter:invert(.9); }

/* reading surfaces are always solid, whatever the chrome dial says */
html[data-skin^="dev-"] #os .win .body { background:rgb(var(--p)); }

/* ---------- welcome terminal (any skin: a terminal is always dark) ---------- */
.win .body.welcome { display:flex; flex-direction:column; gap:10px; }
.wl-panel { display:grid; gap:6px; border:1px solid #2a2a2c; padding:10px; }
.wl-row { display:grid; grid-template-columns:110px 1fr; align-items:center; gap:10px; }
.wl-k { color:var(--rvls-color-accent-magenta); }
.wl-opts { display:flex; flex-wrap:wrap; gap:6px; }
.wl-b { font:13px var(--f-read); color:#cfc9bb; background:#141416; border:1px solid #3a3a3e; padding:6px 12px; min-height:32px; cursor:pointer; }
.wl-b:hover { border-color:var(--rvls-color-accent-magenta); color:#f2efe6; }
.wl-b[aria-pressed="true"] { background:var(--rvls-color-accent-magenta); border-color:var(--rvls-color-accent-magenta); color:var(--rvls-color-fire-white); }
.wl-b:focus-visible { outline:2px solid #f2efe6; outline-offset:2px; }
.wl-go { grid-template-columns:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.wl-main { border-color:var(--rvls-color-accent-magenta); color:#f2efe6; }
.wl-note { margin:0; color:#9a948a; }
@media (pointer:coarse) { .wl-b { min-height:44px; } }
html[data-mode="phone"] .wl-row { grid-template-columns:1fr; gap:4px; }

/* ---------- reading size (settings › reading › text size): window bodies only, the chrome keeps its system size ---------- */
html[data-text="l"] #os .win .body { font-size:16px; } html[data-text="l"] #os .win .body :is(p, li, pre) { font-size:16px; line-height:1.6; }
html[data-text="xl"] #os .win .body { font-size:19px; } html[data-text="xl"] #os .win .body :is(p, li, pre) { font-size:19px; line-height:1.6; }
html[data-text="l"] #os .icon .lbl { font-size:14px; } html[data-text="xl"] #os .icon .lbl { font-size:16px; }

/* ---------- high contrast: solid chrome, the art steps back, stronger lines ---------- */
html[data-contrast="high"] { --ca:1 !important; }
html[data-contrast="high"] #os-bd { filter:brightness(.45) saturate(.6); }
html[data-contrast="high"] #os .win { outline:2px solid #000; }
html[data-contrast="high"] #os .win.active { outline:3px solid #ffd400; }
html[data-contrast="high"] #os .icon .lbl { background:#000; color:#fff; outline:1px solid #fff; }
html[data-contrast="high"] #os .win .body { color:#000; }
html[data-contrast="high"] #os .win .body.term { color:#fff; background:#000; }
html[data-contrast="high"] #os :focus-visible { outline:3px solid #ffd400 !important; outline-offset:2px; }
html[data-skin^="dev-"] #os .win .body.term { background:#0b0b0c; color:#cfc9bb; }

/* ---------- settled voice & type: chrome all lowercase in RVLS Thorn at 13px; wordmark rv†s ----------
   The device grey stays; only the face changes. Reading text in window bodies keeps its own face. */
html[data-skin^="dev-"] #os :is(.tb .t, .task, .tray, .tray *, .quick a, .startmenu li button, .startmenu li a, .startmenu .grp, .icon .lbl, .tabs button, .status, .status *, .display .opt, .chromedial) {
  font-family:"RVLS Thorn", var(--ui); font-size:13px; font-weight:400; text-transform:lowercase; letter-spacing:0; -webkit-font-smoothing:none; }
html[data-skin^="dev-"] #os .startmenu .side { font:13px "RVLS Thorn", var(--ui); text-transform:lowercase; }
html[data-skin^="dev-"] #os .start { font-size:0; gap:6px; }
html[data-skin^="dev-"] #os .start::after { content:"rv†s"; font:13px "RVLS Thorn", var(--ui); }

/* ---------- quick links (E55.14): two plain links, always on screen ---------- */
.quick { display:flex; align-items:center; gap:2px; }
.quick a { display:flex; align-items:center; height:24px; padding:0 10px; color:var(--ink); text-decoration:none; border:1px solid transparent; }
.quick a:hover { border-color:rgb(var(--sh, 110 110 110)); background:rgb(var(--hl, 255 255 255) / .4); }
.quick a:first-child { font-weight:bold; }
.pquick { display:none; }
html[data-mode="phone"] .pquick { display:flex; position:absolute; top:36px; left:0; right:0; height:40px; z-index:8990; justify-content:center; gap:8px;
  background:rgb(var(--c, 214 214 214)); border-bottom:1px solid #000; }
html[data-mode="phone"] .pquick a { height:40px; padding:0 16px; }
html[data-mode="phone"] .icons { top:92px; }
html[data-mode="phone"] .win { inset:76px 0 0 0 !important; }

/* ---------- work index: pitch + master index ---------- */
.workindex .pitch { font-size:1.15em; line-height:1.5; }
.workindex .plainlinks { font-weight:bold; }
.workindex .mindex { padding-left:1.4em; } .workindex .mindex li { margin:.5em 0; }
.workindex .mindex .soon { color:#6b6760; }
/* work map + scan table */
.workindex .wmap { position:relative; aspect-ratio:16/9; max-height:340px; margin:.6em 0 1.4em; border:1px solid currentColor; }
.workindex .wmap::before { content:""; position:absolute; inset:0; opacity:.25; pointer-events:none; background:
  linear-gradient(currentColor,currentColor) center/1px 100% no-repeat, linear-gradient(currentColor,currentColor) center/100% 1px no-repeat; }
.workindex .ax { position:absolute; font-size:.72em; letter-spacing:.08em; opacity:.6; }
.workindex .ax-l { left:.5em; top:50%; transform:translateY(-130%); } .workindex .ax-r { right:.5em; top:50%; transform:translateY(-130%); }
.workindex .ax-t { top:.4em; left:50%; padding-left:.5em; } .workindex .ax-b { bottom:.4em; left:50%; padding-left:.5em; }
.workindex .wpin { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:2px; font-weight:bold; font-size:.85em; text-decoration:none; padding:2px; }
.workindex .wpin:hover, .workindex .wpin:focus-visible { text-decoration:underline; }
.workindex .wpin img { width:32px; height:32px; }
.workindex .wtable { width:100%; border-collapse:collapse; font-size:.92em; }
.workindex .wtable th, .workindex .wtable td { text-align:left; vertical-align:top; padding:.45em .5em; border-bottom:1px solid color-mix(in srgb, currentColor 25%, transparent); }
.workindex .wtable thead th { font-size:.8em; letter-spacing:.08em; opacity:.7; }
.workindex .wtable tbody th a { font-weight:bold; } .workindex .wtable .syn { display:block; font-weight:normal; margin-top:.2em; }
.workindex .wtable .tags { font-size:.85em; }
@media (max-width:560px) { .workindex .wtable thead { display:none; } .workindex .wtable tr { display:grid; grid-template-columns:auto 1fr; padding-bottom:.4em; border-bottom:1px solid color-mix(in srgb, currentColor 25%, transparent); }
  .workindex .wtable tbody th { border:0; }
  .workindex .wtable tbody th { grid-column:1/-1; } .workindex .wtable td { border:0; padding-top:0; } .workindex .wtable .tags { grid-column:1/-1; } }

/* ---------- music.exe ---------- */
.player .lcd { display:grid; gap:4px; }
.player .lcd-viz { width:100%; height:28px; display:block; image-rendering:pixelated; }
.player .sync { display:grid; grid-template-columns:auto 1fr 40px; gap:8px; align-items:center; margin-top:10px; font:13px var(--f-read); }
.player ol { list-style:decimal; } .player .trk { background:none; border:0; padding:2px 0; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.player .trk[aria-current="true"] { font-weight:bold; text-decoration:underline; }
.player .note { font:12px var(--f-read); color:#6b6760; margin:6px 0 0; }
/* lite tier: a soft pulse on kicks (no canvas, no strobe: one 140 ms brightness lift, ≤ 3/s) */
html[data-motion="lite"] #os-bd .bd-still { transition:filter var(--rvls-motion-duration-fast) var(--rvls-motion-ease-standard); }
html[data-motion="lite"] #os-bd.bd-kick .bd-still { filter:brightness(1.08); }

/* ---------- QA 2026-10-19 fixes ---------- */
/* F-02 quick links under any skin: own colours, not the device tokens */
html[data-skin="rice"] .pquick, html[data-skin="noir"] .pquick, html[data-skin="blog"] .pquick { background:#0b0b0c; border-bottom-color:#2a2a2c; }
html[data-skin="rice"] .quick a, html[data-skin="noir"] .quick a, html[data-skin="blog"] .quick a { color:#f2efe6; }
/* F-03 rice keeps the stock taskbar on tablet/phone (the lemonbar is desktop-only) */
html[data-skin="rice"]:not([data-mode="desktop"]) { --bar:44px; }
/* F-04 rice icon labels get a plate */
html[data-skin="rice"] .icon .lbl { background:rgba(11, 11, 12, .88); padding:1px 4px; }
html[data-skin="rice"] .icon .glyph img { filter:invert(.82) drop-shadow(0 0 2px #000) drop-shadow(0 0 2px #000); }
/* F-05 graphite reading surfaces: secondary text that was hard-coded for light paper */
html[data-skin="dev-graphite"] #os .win .body :is(.tags, .crumb, .pno, .green, .synopsis) { color:#b9b5ab; }
html[data-skin="dev-graphite"] #os .win .body .fline a, html[data-skin="dev-graphite"] #os .win .body a { color:#9cc0ff; }
html[data-skin="dev-graphite"] .workindex .mindex .soon { color:#9a948a; }
/* F-06 iOS zooms inputs under 16px */
@media (pointer:coarse) { .term-in, #rice-dmenu input { font-size:16px; } }
/* F-09/F-10 targets: ≥24px everywhere, ≥44px on touch */
html[data-skin^="dev-"] .win .ctl { height:24px; }
#os .tray button { min-width:24px; min-height:24px; }
html[data-mode="phone"] .status .back { min-height:44px; height:auto; }
@media (pointer:coarse) { #os .tray button { min-width:44px; min-height:44px; } }
/* F-11 phone icon labels stay inside their cell */
html[data-mode="phone"] .icon { width:88px; }
html[data-mode="phone"] .icon .lbl { max-width:88px; white-space:normal; overflow-wrap:normal; line-height:1.15; }
html[data-mode="phone"] .icon .lbl .ext { display:none; }
/* F-22 a maximized window has nothing to resize */
.win.max .grip { display:none; }