/* Retro-OS UI kit. Every value is a token so a theme change is a token edit,
   never a component edit. Scope with .retro on any ancestor. */
.retro{
  --ro-gray:#a0a0a0;
  --ro-white:#f0f0f0;
  --ro-blue:#0078d7;
  --ro-red:#e81123;

  --ro-surface:#f0f0f0;
  --ro-surface-sunken:#e4e4e4;
  --ro-ink:#1b1b1b;
  --ro-ink-muted:#5a5a5a;
  --ro-ink-on-accent:#ffffff;
  --ro-accent:var(--ro-blue);
  --ro-accent-ink:#ffffff;
  --ro-danger:var(--ro-red);

  --ro-border-width:1px;
  --ro-border:var(--ro-border-width) solid var(--ro-ink);
  --ro-border-accent:var(--ro-border-width) solid var(--ro-blue);
  --ro-radius:0px;
  --ro-radius-soft:4px;

  --ro-space-1:4px;
  --ro-space-2:8px;
  --ro-space-3:12px;
  --ro-space-4:16px;
  --ro-space-5:24px;

  --ro-icon-sm:16px;
  --ro-icon-md:24px;

  --ro-font-bitmap:"Space Mono","Courier New",ui-monospace,monospace;
  --ro-font-ui:Oxanium,"Segoe UI",system-ui,-apple-system,sans-serif;
  --ro-size-h1:34px;
  --ro-size-h2:24px;
  --ro-size-h3:18px;
  --ro-size-body:14px;
  --ro-size-caption:12px;

  /* Retro chrome is a hard 1px offset, not a blur. */
  --ro-shadow:2px 2px 0 rgba(0,0,0,.25);

  font-family:var(--ro-font-ui);
  font-size:var(--ro-size-body);
  color:var(--ro-ink);
}

/* ---------- type scale ---------- */
.ro-h1{font-family:var(--ro-font-bitmap);font-size:var(--ro-size-h1);font-weight:700;letter-spacing:.02em;margin:0}
.ro-h2{font-size:var(--ro-size-h2);font-weight:600;margin:0}
.ro-h3{font-size:var(--ro-size-h3);font-weight:600;margin:0}
.ro-body{font-size:var(--ro-size-body);margin:0}
.ro-caption{font-size:var(--ro-size-caption);color:var(--ro-ink-muted);margin:0}
.ro-label{font-family:var(--ro-font-bitmap);font-size:var(--ro-size-caption);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ro-ink)}

/* ---------- swatch ---------- */
.ro-swatch{border:var(--ro-border);background:var(--ro-swatch-fill,var(--ro-gray));
  color:var(--ro-swatch-ink,var(--ro-ink));padding:var(--ro-space-2);min-width:120px}
.ro-swatch--blue{--ro-swatch-fill:var(--ro-blue);--ro-swatch-ink:#fff}
.ro-swatch--red{--ro-swatch-fill:var(--ro-red);--ro-swatch-ink:#fff}
.ro-swatch--white{--ro-swatch-fill:var(--ro-white)}
.ro-swatch__name{font-family:var(--ro-font-bitmap);font-weight:700;font-size:var(--ro-size-caption);
  letter-spacing:.06em;text-transform:uppercase;display:block}
.ro-swatch__hex{font-family:var(--ro-font-bitmap);font-size:var(--ro-size-caption);display:block}
.ro-swatch__ramp{display:flex;height:18px;margin-top:var(--ro-space-2)}
.ro-swatch__ramp span{flex:1}

/* ---------- surface + window ---------- */
.ro-surface{background:var(--ro-surface);border:var(--ro-border);border-radius:var(--ro-radius)}
.ro-surface--soft{border-radius:var(--ro-radius-soft)}
.ro-surface--raised{box-shadow:var(--ro-shadow)}

.ro-window{background:var(--ro-surface);border:var(--ro-border);border-radius:var(--ro-radius);
  display:flex;flex-direction:column;min-width:0}
.ro-window__bar{display:flex;align-items:center;gap:var(--ro-space-2);
  height:22px;padding:0 var(--ro-space-1) 0 var(--ro-space-2);
  background:var(--ro-accent);color:var(--ro-accent-ink);
  font-family:var(--ro-font-bitmap);font-size:var(--ro-size-caption);font-weight:700}
.ro-window__title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ro-window__controls{flex:0 0 auto;display:flex;gap:2px}
.ro-window__btn{width:16px;height:14px;padding:0;display:grid;place-items:center;
  border:var(--ro-border);border-radius:0;background:var(--ro-surface);color:var(--ro-ink);
  font-family:var(--ro-font-bitmap);font-size:10px;line-height:1;cursor:pointer}
.ro-window__body{flex:1 1 auto;min-height:0;padding:var(--ro-space-3);background:var(--ro-surface)}

/* ---------- button ---------- */
.ro-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ro-space-1);
  min-height:28px;padding:var(--ro-space-1) var(--ro-space-3);
  border:var(--ro-border-accent);border-radius:var(--ro-radius);
  background:var(--ro-surface);color:var(--ro-accent);
  font:inherit;font-size:var(--ro-size-body);cursor:pointer;white-space:nowrap}
.ro-btn:hover:not(:disabled),
.ro-btn.is-hover{background:var(--ro-accent);color:var(--ro-accent-ink)}
.ro-btn:active:not(:disabled){box-shadow:inset 1px 1px 0 rgba(0,0,0,.3)}
.ro-btn:disabled,.ro-btn.is-disabled{border-color:var(--ro-gray);background:var(--ro-gray);
  color:var(--ro-white);cursor:not-allowed}
.ro-btn--plain{border-color:var(--ro-ink);color:var(--ro-ink)}
.ro-btn--plain:hover:not(:disabled){background:var(--ro-surface-sunken);color:var(--ro-ink)}
.ro-btn--danger{border-color:var(--ro-danger);color:var(--ro-danger)}
.ro-btn--danger:hover:not(:disabled){background:var(--ro-danger);color:var(--ro-ink-on-accent)}

/* ---------- input ---------- */
.ro-input{width:100%;min-height:28px;padding:var(--ro-space-1) var(--ro-space-2);
  border:var(--ro-border);border-radius:var(--ro-radius);
  background:var(--ro-surface-sunken);color:var(--ro-ink);font:inherit}
.ro-input::placeholder{color:var(--ro-ink-muted)}
.ro-input:focus{outline:none;border-color:var(--ro-accent)}
.ro-field{display:flex;flex-direction:column;gap:var(--ro-space-1)}

/* ---------- progress ---------- */
.ro-progress{height:16px;border:var(--ro-border);border-radius:var(--ro-radius-soft);
  background:var(--ro-surface-sunken);overflow:hidden}
.ro-progress__fill{height:100%;width:var(--ro-progress,50%);background:var(--ro-accent)}

/* ---------- tabs ---------- */
.ro-tabs{display:flex;align-items:flex-end;gap:2px;border-bottom:var(--ro-border)}
.ro-tab{padding:var(--ro-space-1) var(--ro-space-4);margin-bottom:calc(var(--ro-border-width) * -1);
  border:var(--ro-border);border-bottom-color:transparent;border-radius:0;
  background:var(--ro-gray);color:var(--ro-white);font:inherit;cursor:pointer}
.ro-tab[aria-selected="true"],.ro-tab.is-active{background:var(--ro-surface);color:var(--ro-ink);font-weight:600}

/* ---------- checkbox ---------- */
.ro-check{display:inline-flex;align-items:center;gap:var(--ro-space-2);cursor:pointer}
.ro-check input{appearance:none;-webkit-appearance:none;margin:0;
  width:var(--ro-icon-sm);height:var(--ro-icon-sm);flex:0 0 var(--ro-icon-sm);
  border:var(--ro-border);border-radius:var(--ro-radius);background:var(--ro-surface);
  display:grid;place-items:center;cursor:pointer}
.ro-check input:checked{border-color:var(--ro-accent)}
.ro-check input:checked::after{content:"";width:9px;height:5px;
  border-left:2px solid var(--ro-accent);border-bottom:2px solid var(--ro-accent);
  transform:translateY(-1px) rotate(-45deg)}
.ro-check input:disabled{border-color:var(--ro-gray);background:var(--ro-surface-sunken);cursor:not-allowed}
.ro-check input:disabled:checked::after{border-color:var(--ro-gray)}

/* ---------- toast ---------- */
.ro-toast{display:inline-flex;align-items:center;gap:var(--ro-space-2);
  padding:var(--ro-space-2) var(--ro-space-3);
  border:var(--ro-border);border-radius:var(--ro-radius-soft);
  background:var(--ro-accent);color:var(--ro-accent-ink);box-shadow:var(--ro-shadow)}
.ro-toast--danger{background:var(--ro-danger)}
.ro-toast--quiet{background:var(--ro-surface);color:var(--ro-ink)}

/* ---------- modal ---------- */
.ro-modal{width:min(320px,100%);box-shadow:var(--ro-shadow)}
.ro-modal__message{margin:0 0 var(--ro-space-4)}
.ro-modal__actions{display:flex;gap:var(--ro-space-2);justify-content:flex-start}

/* ---------- rules card ---------- */
.ro-card{padding:var(--ro-space-3) var(--ro-space-4);background:var(--ro-surface);
  border:var(--ro-border);border-radius:var(--ro-radius-soft);box-shadow:var(--ro-shadow)}
.ro-card__list{margin:0;padding-left:var(--ro-space-4);display:grid;gap:var(--ro-space-1)}

/* ---------- icon ---------- */
.ro-icon{display:grid;place-items:center;overflow:hidden;
  width:var(--ro-icon-sm);height:var(--ro-icon-sm)}
.ro-icon--sm{width:var(--ro-icon-sm);height:var(--ro-icon-sm)}
.ro-icon--md{width:var(--ro-icon-md);height:var(--ro-icon-md)}
.ro-icon img,.ro-icon svg{width:100%;height:100%;display:block;object-fit:contain}

/* ---------- bevel system ----------
   The bevel is two nested boxes, not one border. The outer box supplies the dark
   frame and reserves bottom/right space; the inner face supplies the light
   top/left edge and a hard shadow that fills that reserved space. Raised and
   recessed differ only in whether the inner shadow is darker or lighter than
   the face. */
.retro{
  --ro-orange:#cb6e00;
  --ro-page-bg:#fafafa;
  --ro-panel-bg:#eeeeee;
  --ro-panel-frame:#313131;
  --ro-bevel-light:#fbfbf9;
  --ro-bevel-dark:#9a9995;
  --ro-btn-face:#a0a0a0;
  --ro-btn-shade:#686868;
  --ro-btn-face-light:#f1f1f1;
  /* The button is theme-invariant: the Figma dark kit uses the same frame,
     face, edge and label colours as light mode. These therefore must not
     borrow --ro-ink or --ro-surface-sunken, which do flip with the theme. */
  --ro-btn-frame:#1b1b1b;
  --ro-btn-edge:#e4e4e4;
  --ro-btn-ink:#1b1b1b;
  --ro-btn-shell:#e4e4e4;
  --ro-input-frame:#4b4b4b;
  --ro-input-edge:rgba(138,137,134,.5);
  --ro-input-glow:#fcfbf9;

  --ro-bevel-thick:3px;
  --ro-bevel-thin:2px;
  /* Inner face height. Controls total control height: 26 + 2 padding + 4 frame = 32. */
  --ro-face-height:26px;
  --ro-shadow-panel:8px 8px 0 rgba(0,117,207,.25);

  --ro-grid-line:rgba(125,125,125,.2);
  --ro-grid-size:45.06px;

  /* The raised "box" bevel, shared by the drop zone, the number stepper and the
     dropdown — in Figma all three are an outer frame plus an inner Body whose
     top/left is white and bottom/right grey. Sampled from node 164:658. */
  --ro-box-frame:#313131;
  --ro-box-face:#f5f5f5;
  --ro-box-top:#ffffff;
  --ro-box-bottom:#9a9995;
}

/* Faint blueprint grid. Apply to the page-level element. */
.ro-grid-bg{position:relative;background:var(--ro-page-bg)}
.ro-grid-bg::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--ro-grid-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--ro-grid-line) 1px,transparent 1px);
  background-size:var(--ro-grid-size) var(--ro-grid-size);
}
.ro-grid-bg > *{position:relative;z-index:1}

/* Panel — the thick 3px bevel used for page sections. */
.ro-panel{
  display:flex;flex-direction:column;
  background:var(--ro-panel-bg);
  border:var(--ro-bevel-thick) solid var(--ro-panel-frame);
  padding:0 var(--ro-bevel-thick) var(--ro-bevel-thick) 0;
  box-shadow:var(--ro-shadow-panel);
}
.ro-panel__body{
  flex:1 1 auto;min-height:0;overflow:hidden;
  background:var(--ro-panel-bg);
  border-top:var(--ro-bevel-thick) solid var(--ro-bevel-light);
  border-left:var(--ro-bevel-thick) solid var(--ro-bevel-light);
  box-shadow:var(--ro-bevel-thick) var(--ro-bevel-thick) 0 var(--ro-bevel-dark);
  padding:var(--ro-space-5) var(--ro-space-4);
}
.ro-panel--flat{box-shadow:none}

/* Bevel button — raised. The inner face carries the label.
   Figma strokes these shells with strokeAlign OUTSIDE, so height is driven by
   the inner face (26px) and the frame adds on top of it. Setting a height on
   the shell instead would make the border eat inward and squash the face. */
.ro-bevel-btn{
  display:inline-flex;align-items:stretch;
  padding:0 var(--ro-bevel-thin) var(--ro-bevel-thin) 0;
  border:var(--ro-bevel-thin) solid var(--ro-btn-frame);
  background:var(--ro-btn-shell);
  font:inherit;cursor:pointer;overflow:hidden}
.ro-bevel-btn__face{
  display:flex;align-items:center;justify-content:center;
  flex:1 1 auto;min-height:var(--ro-face-height);padding:0 6px 1px;white-space:nowrap;
  background:var(--ro-btn-face);
  border-top:var(--ro-bevel-thin) solid var(--ro-btn-edge);
  border-left:var(--ro-bevel-thin) solid var(--ro-btn-edge);
  box-shadow:var(--ro-bevel-thin) var(--ro-bevel-thin) 0 var(--ro-btn-shade);
  font-family:var(--ro-font-bitmap);font-size:14px;font-weight:700;color:var(--ro-btn-ink)}
.ro-bevel-btn:active .ro-bevel-btn__face{
  box-shadow:inset var(--ro-bevel-thin) var(--ro-bevel-thin) 0 var(--ro-btn-shade)}
.ro-bevel-btn:disabled{cursor:not-allowed;opacity:.6}

/* Bevel button — light face, used for the bracketed navigation controls. */
.ro-bevel-btn--light .ro-bevel-btn__face{
  background:var(--ro-btn-face-light);
  border-top-color:#ffffff;border-left-color:#ffffff;
  box-shadow:var(--ro-bevel-thin) var(--ro-bevel-thin) 0 #9a9995;
  font-family:var(--ro-font-ui);font-size:12px;font-weight:500;color:var(--ro-orange)}
.ro-bevel-btn--light .ro-bracket{color:var(--ro-accent)}

/* Bevel input — recessed. Same anatomy, lighter inner shadow. */
.ro-bevel-input{
  display:flex;align-items:stretch;
  padding:0 var(--ro-bevel-thin) var(--ro-bevel-thin) 0;
  border:var(--ro-bevel-thin) solid var(--ro-input-frame);
  background:var(--ro-surface-sunken);overflow:hidden}
.ro-bevel-input__field{
  flex:1 1 auto;min-width:0;min-height:var(--ro-face-height);padding:0 3px 1px;
  background:var(--ro-surface-sunken);
  border:0;border-top:var(--ro-bevel-thin) solid var(--ro-input-edge);
  border-left:var(--ro-bevel-thin) solid var(--ro-input-edge);
  box-shadow:var(--ro-bevel-thin) var(--ro-bevel-thin) 0 var(--ro-input-glow);
  font-family:var(--ro-font-bitmap);font-size:14px;color:var(--ro-ink);outline:none}
.ro-bevel-input__field::placeholder{color:var(--ro-ink-muted)}
.ro-bevel-input:focus-within{border-color:var(--ro-accent)}

/* Role colours from the new style: blue labels structure, orange marks values. */
.ro-section-label{font-family:var(--ro-font-ui);font-size:14px;font-weight:600;color:var(--ro-accent)}
.ro-value{color:var(--ro-orange)}

/* ---------- layout helpers ---------- */
.ro-stack{display:flex;flex-direction:column;gap:var(--ro-space-2)}
.ro-row{display:flex;align-items:center;gap:var(--ro-space-2);flex-wrap:wrap}
.ro-grid{display:grid;gap:var(--ro-space-3)}

/* ---------- dark mode ----------
   Sampled from the Figma dark kit (node 205:2942). The two theme mechanisms in
   the app disagree — the landing page toggles html.dark, the creator pages set
   data-theme — so both spellings are listed.

   The button is deliberately absent: in the Figma dark kit its frame, face and
   shade are the same values as light mode, so overriding them here is what made
   the landing-page buttons look wrong. */
html.dark .retro,[data-theme="dark"] .retro{
  --ro-page-bg:#22252a;
  --ro-panel-bg:#343740;
  --ro-panel-frame:#101010;
  --ro-bevel-light:#656871;
  --ro-bevel-dark:#202227;
  --ro-surface:#343740;
  --ro-surface-sunken:#2b2e35;
  --ro-blue:#0063b1;
  --ro-red:#91000c;
  --ro-input-frame:#7c7f86;
  --ro-input-edge:#5b5f66;
  --ro-input-glow:#6b6d75;
  --ro-box-frame:#101010;
  --ro-box-face:#343740;
  --ro-box-top:#656871;
  --ro-box-bottom:#202227;
  --ro-ink:#f2f3f5;
  --ro-ink-muted:#a0a7b5;
  --ro-grid-line:rgba(180,190,205,.12);
}