/* v6 consumer layer for the desktop mock. Canonical values live in tokens.css. */

:root {
  --f-ui: var(--rvls-font-interface);
  --f-disp: var(--rvls-font-interface);
  --f-read: var(--rvls-font-reading);
  --chrome: var(--rvls-color-chrome);
  --hi: var(--rvls-color-chrome-high);
  --lo: var(--rvls-color-chrome-edge);
  --mid: var(--rvls-color-chrome-shadow);
  --paper: var(--rvls-color-paper);
  --ink: var(--rvls-color-paper-text);
}

html, body {
  background: var(--rvls-color-canvas);
  color: var(--rvls-color-text-on-dark);
}

#os {
  background-color: var(--rvls-color-field);
  color: var(--rvls-color-text-on-dark);
  font-family: var(--rvls-font-interface);
}

.bevel {
  border: var(--rvls-window-border);
  border-radius: var(--rvls-radius);
  background: var(--rvls-color-chrome);
  box-shadow: var(--rvls-bevel-raised);
}

.sunk {
  border: var(--rvls-window-border);
  border-radius: var(--rvls-radius);
  background: var(--rvls-color-chrome-low);
  box-shadow: var(--rvls-bevel-sunken);
}

.win {
  min-width: var(--rvls-window-min-width);
  min-height: var(--rvls-window-min-height);
  padding: var(--rvls-window-padding);
  border: var(--rvls-window-border);
  border-radius: var(--rvls-radius);
  background: var(--rvls-color-chrome);
  box-shadow: var(--rvls-window-shadow);
}

.win .tb {
  min-height: var(--rvls-titlebar-height);
  gap: var(--rvls-titlebar-gap);
  padding: 0 var(--rvls-titlebar-end-padding) 0 var(--rvls-titlebar-start-padding);
  border-bottom: var(--rvls-chrome-strip-rule);
  background: var(--rvls-titlebar-bg-inactive);
  color: var(--rvls-color-titlebar-inactive-text);
}

.win.active .tb {
  background: var(--rvls-titlebar-bg);
  color: var(--rvls-color-titlebar-text);
  box-shadow: inset 0 -2px 0 var(--acc, var(--rvls-color-fire-violet));
}

.win .tb .t,
.win .tb .rate {
  font-family: var(--rvls-font-interface);
  font-size: var(--rvls-type-size-chrome);
  font-weight: var(--rvls-font-weight-regular);
  line-height: var(--rvls-type-leading-chrome);
  letter-spacing: var(--rvls-type-tracking);
}

.win .tb img,
.win .taskbar img,
.win .startmenu img,
.icon .glyph img {
  width: 16px;
  height: 16px;
  filter: none;
  image-rendering: auto;
}

.win .ctl {
  width: var(--rvls-control-size);
  height: var(--rvls-control-size);
  border: var(--rvls-window-border);
  border-radius: var(--rvls-radius);
  background: var(--rvls-color-chrome) !important;
  color: var(--rvls-color-chrome-edge);
  box-shadow: var(--rvls-bevel-raised);
}

.win .body {
  margin: var(--rvls-space-1) 0 0;
  background: var(--rvls-color-paper);
  color: var(--rvls-color-paper-text);
  font-family: var(--rvls-font-reading);
  font-size: var(--rvls-type-size-body-dense);
  line-height: var(--rvls-type-leading-ui);
}

.win .body .paper {
  background: transparent;
  color: inherit;
}

.win .body :is(h1, h2, h3) {
  font-family: var(--rvls-font-reading);
  color: var(--rvls-color-paper-text);
}

.win .body h1 {
  font-size: var(--rvls-type-size-heading-small);
  line-height: var(--rvls-type-leading-chrome);
}

.win .body :is(h2, h3) {
  font-size: var(--rvls-type-size-body-large);
  line-height: var(--rvls-type-leading-chrome);
}

.tabs {
  padding: var(--rvls-space-1) var(--rvls-space-1) 0;
  border-bottom: var(--rvls-chrome-strip-rule);
  background: var(--rvls-color-chrome);
}

.tabs button {
  padding: var(--rvls-space-1) var(--rvls-space-3);
  border: var(--rvls-window-border);
  border-bottom: 0;
  border-radius: var(--rvls-radius);
  background: var(--rvls-color-chrome-low);
  color: var(--rvls-color-chrome-text);
  font-family: var(--rvls-font-interface);
  font-size: var(--rvls-type-size-chrome);
  line-height: var(--rvls-type-leading-chrome);
  letter-spacing: var(--rvls-type-tracking);
}

.tabs button[aria-selected="true"] {
  background: var(--rvls-color-paper);
  color: var(--rvls-color-paper-text);
}

.taskbar {
  height: var(--rvls-taskbar-height);
  gap: var(--rvls-space-1);
  padding: var(--rvls-space-1);
  border-top: var(--rvls-window-border);
  background: var(--rvls-color-chrome);
}

.taskbar :is(.start, .task, .tray, .tray button, .quick a) {
  font-family: var(--rvls-font-interface);
  font-size: var(--rvls-type-size-chrome);
  line-height: var(--rvls-type-leading-chrome);
  letter-spacing: var(--rvls-type-tracking);
}

.task.on {
  background: var(--rvls-color-field-raised);
  color: var(--rvls-color-text-on-dark);
}

.startmenu {
  border: var(--rvls-window-border);
  background: var(--rvls-color-chrome);
  color: var(--rvls-color-chrome-text);
}

.startmenu .side {
  background: var(--rvls-titlebar-bg);
  color: var(--rvls-color-titlebar-text);
  font-family: var(--rvls-font-interface);
  font-size: var(--rvls-type-size-chrome);
}

.startmenu li button,
.startmenu li a {
  font-family: var(--rvls-font-interface);
  font-size: var(--rvls-type-size-chrome);
  letter-spacing: var(--rvls-type-tracking);
}

.icon .lbl {
  padding: var(--rvls-space-1) var(--rvls-space-2);
  background: var(--rvls-color-field-raised);
  color: var(--rvls-color-text-on-dark);
  font-family: var(--rvls-font-interface);
  font-size: var(--rvls-type-size-chrome);
  line-height: var(--rvls-type-leading-chrome);
  letter-spacing: var(--rvls-type-tracking);
}

.icon:is(.sel, :focus-visible) .lbl {
  background: var(--rvls-color-titlebar-start);
  color: var(--rvls-color-titlebar-text);
}

:focus-visible {
  outline: var(--rvls-focus-ring-dark);
  outline-offset: var(--rvls-focus-offset);
  box-shadow: none;
}

/* ---------- shared surface grammar and final skin enforcement ----------
   The consumer layer loads after every era skin. These selectors deliberately
   carry [data-skin] + #os so a later legacy rule cannot win on specificity. */
html[data-skin] .chrome-frame {
  border: var(--rvls-window-border);
  padding: var(--rvls-window-padding);
  background: var(--rvls-color-chrome);
  color: var(--rvls-color-chrome-text);
  box-shadow: var(--rvls-window-shadow);
}

html[data-skin] .paper-body {
  background: var(--rvls-color-paper);
  color: var(--rvls-color-paper-text);
  font-family: var(--rvls-font-reading);
  font-size: var(--rvls-type-size-body-dense);
  line-height: var(--rvls-type-leading-ui);
}

html[data-skin] #os .win .body.paper-body {
  padding: 0;
}

/* No position here: .win is already absolute (os.css), which is the containing block the ::after needs.
   `position: relative` on this selector dropped every window into normal flow, stacked down the page. */
html[data-skin] .art-window {
  isolation: isolate;
}

html[data-skin] .art-window > .body {
  position: relative;
}

html[data-skin] .art-window > .body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow:
    inset 1px 1px 0 var(--rvls-relief-light),
    inset -1px -1px 0 var(--rvls-relief-shadow);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--rvls-relief-glow) 28%, transparent));
  opacity: var(--rvls-relief-opacity);
}

html[data-skin] #os .viewer .stage {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rvls-relief-light) 35%, transparent);
}

html[data-skin] #os .win {
  --acc: var(--rvls-color-fire-violet);
}

html[data-skin] #os .win[data-accent="cyan"] { --acc: var(--rvls-color-accent-cyan); }
html[data-skin] #os .win[data-accent="magenta"] { --acc: var(--rvls-color-accent-magenta); }
html[data-skin] #os .win[data-accent="yellow"] { --acc: var(--rvls-color-accent-yellow); }
html[data-skin] #os .win[data-accent="violet"] { --acc: var(--rvls-color-fire-violet); }
html[data-skin] #os .win[data-accent="neutral"] { --acc: var(--rvls-color-chrome-shadow); }

/* Chrome carries no glow. The active edge is a two-pixel accent rule and the
   only relief/glow lives on the art body above. */
html[data-skin] #os :is(.win .tb, .taskbar, .startmenu, .status, .tabs, .icon .lbl) {
  text-shadow: none;
}

html[data-skin] #os :is(.win .tb, .taskbar, .startmenu, .status) {
  box-shadow: none;
}

html[data-skin] #os .win.active .tb {
  box-shadow: inset 0 -2px 0 var(--acc);
}

html[data-skin] #os .icon .glyph img,
html[data-skin] #os .win .tb img,
html[data-skin] #os .taskbar img,
html[data-skin] #os .startmenu img {
  filter: none;
  image-rendering: auto;
  animation: none;
}

html[data-skin] #os .win .tb img,
html[data-skin] #os .taskbar img {
  width: var(--rvls-icon-size-chrome);
  height: var(--rvls-icon-size-chrome);
}

html[data-skin] #os .startmenu img {
  width: var(--rvls-icon-size-menu);
  height: var(--rvls-icon-size-menu);
}

html[data-skin] #os .icon .glyph img {
  width: var(--rvls-icon-size-desktop);
  height: var(--rvls-icon-size-desktop);
}

html[data-skin] #os :is(.win .tb, .tabs, .taskbar) {
  gap: var(--rvls-space-strip-gap);
}

html[data-skin] #os .win .tb {
  min-height: var(--rvls-titlebar-height);
  padding:
    0
    var(--rvls-titlebar-end-padding)
    0
    var(--rvls-titlebar-start-padding);
}

html[data-skin] #os .tabs {
  padding: var(--rvls-space-strip-block) var(--rvls-space-strip-block) 0;
}

html[data-skin] #os .tabs button {
  padding: var(--rvls-space-strip-block) var(--rvls-space-strip-inline);
  border-radius: var(--rvls-radius);
}

html[data-skin] #os .taskbar {
  height: var(--rvls-taskbar-height);
  padding: var(--rvls-space-strip-block);
}

html[data-skin] #os .win .ctl {
  width: var(--rvls-control-size);
  height: var(--rvls-control-size);
}

html[data-skin] #os .quick {
  gap: var(--rvls-space-strip-block);
}

html[data-skin] #os .quick a {
  height: var(--rvls-control-size);
  padding: 0 var(--rvls-space-control-inline);
}

html[data-skin] #os .startmenu li :is(button, a) {
  padding: var(--rvls-space-strip-block) var(--rvls-space-strip-inline);
}

/* One focus grammar for field and paper surfaces. */
html[data-skin] #os :focus-visible {
  outline: var(--rvls-focus-ring-dark) !important;
  outline-offset: var(--rvls-focus-offset);
  box-shadow: none !important;
}

html[data-skin] #os .win :focus-visible {
  outline: var(--rvls-focus-ring-paper) !important;
}

/* Flash-era loader: 13px Thorn chrome, the meter is the only moving part. */
html[data-skin] #os .pre {
  gap: var(--rvls-space-strip-inline);
  font-family: var(--rvls-font-interface);
  font-size: var(--rvls-type-size-chrome);
  line-height: var(--rvls-type-leading-chrome);
  letter-spacing: var(--rvls-type-tracking);
  text-transform: none;
}

html[data-skin] #os .pre-bar {
  height: var(--rvls-space-2);
  border: var(--rvls-window-border);
}

@media (pointer: coarse) {
  .win .tb {
    min-height: var(--rvls-touch-target);
  }

  .win .ctl {
    width: var(--rvls-control-size);
    height: var(--rvls-control-size);
  }
}

/* project hero plates (chorus.exe, hive.exe): real data in a window, full paper width */
.paper .hero { margin:14px 0 18px; }
.paper .hero img { display:block; width:100%; height:auto; border:1px solid #1c1828; box-shadow:3px 3px 0 rgba(0,0,0,.35); }
.paper .hero figcaption { margin-top:6px; font-size:12px; opacity:.75; }
.paper .listen { display:flex; align-items:center; gap:10px; margin:-6px 0 18px; font-size:13px; }
.paper .listen button { padding:3px 12px; font:inherit; cursor:pointer; }
.paper .listen-time { font-variant-numeric:tabular-nums; opacity:.75; }
.win .body.prism-body { display:flex; flex-direction:column; padding:0; overflow:hidden; }
.prism-strip { display:flex; gap:var(--rvls-space-strip-gap); padding:var(--rvls-space-strip-block) var(--rvls-space-strip-inline);
  font:var(--rvls-type-size-chrome) var(--rvls-font-interface); background:var(--rvls-color-chrome); color:var(--rvls-color-chrome-text); border-bottom:var(--rvls-window-border); }
.prism-strip a { color:inherit; }
.prism-frame { flex:1; width:100%; min-height:0; border:0; display:block; background:var(--rvls-color-field); }
.paper .prism-programs { list-style:none; padding:0; margin:14px 0 18px; display:grid; gap:6px; }
.paper .prism-programs li { display:flex; align-items:center; gap:10px; }
.paper .prism-programs small { opacity:.7; }

/* a popup closes on click */
.popup-img { cursor:pointer; }

/* sigil wireframe cursor (vectorcraft, CRAFT-STUDIO/vector/cursor-sigil.*); mice only, touch keeps the system pointer */
@media (pointer:fine) {
  html { cursor:url(/assets/cursor/cursor-sigil.png) 3 3, auto;
    cursor:image-set(url(/assets/cursor/cursor-sigil.png) 1x, url(/assets/cursor/cursor-sigil@2x.png) 2x) 3 3, auto; }
  a[href], button:not(:disabled), [role="button"], summary, select, label[for], .win .ctl, [data-open], .popup-img {
    cursor:url(/assets/cursor/cursor-sigil-hover.png) 3 3, pointer;
    cursor:image-set(url(/assets/cursor/cursor-sigil-hover.png) 1x, url(/assets/cursor/cursor-sigil-hover@2x.png) 2x) 3 3, pointer; }
  input:not([type="button"]):not([type="submit"]), textarea, .win .body.term { cursor:text; }
}

/* ---------- launch UX fixes (2026-10-29) ---------- */
/* active task: dark ink on the device grey (was pale on pale, 1.19:1) */
html[data-skin^="dev-"] #os .taskbar .task.on { color:var(--ink); }
/* keeper close glyph: same pairing */
html[data-skin^="dev-"] .guide-x { color:var(--ink); }

/* larger text settings also scale chrome labels, tabs and options */
html[data-skin^="dev-"][data-text="l"] #os :is(.icon .lbl, .tabs button, .display .opt, .chromedial) { font-size:15px; }
html[data-skin^="dev-"][data-text="xl"] #os :is(.icon .lbl, .tabs button, .display .opt, .chromedial) { font-size:17px; }

/* phone desk: four columns that fit the viewport */
html[data-mode="phone"] #os .icons { grid-template-columns:repeat(4, minmax(0, 1fr)); column-gap:4px; }
html[data-mode="phone"] #os .icon { width:100%; max-width:88px; min-width:0; }
html[data-mode="phone"] #os .icon .lbl { max-width:100%; }

/* touch: 44 px hit areas for settings, sound panel and keeper */
@media (pointer:coarse) {
  html[data-skin^="dev-"] #os .tabs { flex-wrap:wrap; }
  html[data-skin^="dev-"] #os :is(.tabs button, .chromedial button, .display .opt) { min-height:44px; padding-block:10px; }
  html[data-skin^="dev-"] #os .chromedial label { min-height:44px; }
  .sndpanel .sp-row button { min-height:44px; }
  .sndpanel .sp-foot a { display:inline-block; padding:13px 0; }
  .guide-opt { min-height:44px; box-sizing:border-box; display:flex; align-items:center; }
  .guide-x { width:44px; height:44px; top:2px; right:2px; }
  .guide { max-height:calc(100dvh - 24px); overflow-y:auto; }
}

/* project prose: a readable line length; figures keep the full width */
.win .body .paper > :is(p, ul, ol, blockquote, h2, h3, dl) { max-width:72ch; }

/* terminal accents readable on the black (6.1:1) */
.term-k, .term-ps { color:#ff4d5e; }

/* about: instagram icon link */
.ig-link img { vertical-align:-4px; }

/* gallery showcase: the live particle field */
.field { position:relative; height:100%; min-height:260px; background:#07060b; }
.field canvas { display:block; width:100%; height:100%; cursor:pointer; }
.field-cap { position:absolute; left:10px; bottom:8px; margin:0; font:12px "RVLS Thorn", var(--ui, monospace); text-transform:lowercase; color:#cfc9bb; pointer-events:none; }