/* ============================================================================
   Realm UI — component layer for the Clip → 3D Studio
   Built ENTIRELY in Realm design-system primitives (tokens, fonts, radii from
   @realm/design-system). IBM Carbon and eBay were used only as REFERENCE for
   component anatomy / interaction / a11y patterns — none of their brand
   primitives (colors, radii, type) are used here.
   Component map: see DESIGN_SPEC.md
   ========================================================================== */

@font-face { font-family:"KH Interference"; src:url("fonts/KHInterference-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Suisse International"; src:url("fonts/Suisse-Regular.otf") format("opentype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Suisse International"; src:url("fonts/Suisse-Medium.otf") format("opentype"); font-weight:500; font-display:swap; }
@font-face { font-family:"Suisse International"; src:url("fonts/Suisse-Bold.otf") format("opentype"); font-weight:700; font-display:swap; }

:root{
  /* surfaces */
  --base:#0A0A0B; --s1:#111113; --s2:#1A1A1D; --s3:#232328; --hover:#252530;
  /* borders */
  --bd-sub:#2A2A30; --bd:#363640; --bd-strong:#4A4A55;
  /* brand + text */
  --primary:#FF4F00; --primary-hi:#ff6a26;
  --tp:#F5F5F7; --ts:#A0A0AB; --tt:#6B6B78;
  /* status */
  --success:#22C55E; --warning:#F59E0B; --error:#EF4444; --info:#3B82F6;
  /* radii (DS: lg 8 / md 6 / sm 4) */
  --r-lg:8px; --r-md:6px; --r-sm:4px;
  /* type */
  --display:"KH Interference","Inter",sans-serif;
  --sans:"Suisse International","Inter",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --focus:0 0 0 2px var(--base), 0 0 0 4px var(--primary);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{background:var(--base);color:var(--tp);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:none;box-shadow:var(--focus);}

/* ---- typography helpers ------------------------------------------------- */
.rds-eyebrow{font-family:var(--display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--primary);}
.rds-h1{font-family:var(--display);font-size:26px;letter-spacing:.01em;line-height:1.1;}
.rds-h2{font-family:var(--display);font-size:15px;letter-spacing:.08em;text-transform:uppercase;}
.rds-eyebrow-muted{font-family:var(--display);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tt);}
.rds-mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.rds-muted{color:var(--ts);} .rds-dim{color:var(--tt);}

/* ---- Button (DS Button.tsx: rounded-md, KH uppercase tracking-widest) --- */
.rds-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-weight:600;
  transition:filter .15s,background .15s,color .15s,border-color .15s;white-space:nowrap;}
.rds-btn:disabled{opacity:.45;cursor:not-allowed;}
.rds-btn--sm{padding:0 12px;height:30px;font-size:11px;} .rds-btn--md{padding:0 16px;height:36px;font-size:12px;} .rds-btn--lg{padding:0 22px;height:40px;font-size:13px;}
.rds-btn--primary{background:var(--primary);color:#fff;}
.rds-btn--primary:hover{filter:brightness(1.1);} .rds-btn--primary:active{filter:brightness(.95);}
.rds-btn--secondary{border-color:var(--bd);color:var(--ts);background:transparent;}
.rds-btn--secondary:hover{background:var(--s3);color:var(--tp);}
.rds-btn--danger{background:var(--error);color:#fff;}
.rds-btn--ghost{font-family:var(--sans);text-transform:none;letter-spacing:0;font-weight:500;
  color:var(--ts);background:transparent;padding:8px 10px;}
.rds-btn--ghost:hover{color:var(--tp);background:var(--s2);}

/* icon button (toolbar/dock) — square, rounded-md, Realm surfaces */
.rds-icbtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:var(--r-md);border:1px solid var(--bd-sub);background:var(--s2);color:var(--ts);cursor:pointer;
  transition:.15s;}
.rds-icbtn:hover{background:var(--s3);color:var(--tp);border-color:var(--bd);}
.rds-icbtn[aria-pressed="true"],.rds-icbtn.is-active{background:var(--primary);border-color:var(--primary);color:#fff;}
.rds-icbtn svg{width:18px;height:18px;}

/* ---- Card / Tile (DS Card.tsx) ----------------------------------------- */
.rds-card{border-radius:var(--r-lg);border:1px solid var(--bd-sub);background:var(--s1);overflow:hidden;}
.rds-card--interactive{transition:transform .15s,border-color .15s;display:block;}
.rds-card--interactive:hover{border-color:var(--bd-strong);transform:translateY(-2px);}
.rds-card__header{background:var(--s3);padding:10px 16px;border-bottom:1px solid var(--bd-sub);
  font-family:var(--display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ts);}
.rds-card__body{padding:16px;}

/* ---- Status pill (DS StatusPill.tsx) ----------------------------------- */
.rds-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 10px;
  font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  border:1px solid var(--bd);color:var(--ts);background:transparent;}
.rds-pill--safe{border-color:transparent;background:color-mix(in srgb,var(--success) 15%,transparent);color:#4ade80;}
.rds-pill--breach{border-color:transparent;background:color-mix(in srgb,var(--error) 18%,transparent);color:#ff6a58;}
.rds-pill--warn{border-color:transparent;background:color-mix(in srgb,var(--warning) 16%,transparent);color:#fbbf24;}
.rds-pill--info{border-color:transparent;background:color-mix(in srgb,var(--info) 16%,transparent);color:#60a5fa;}

/* tag — neutral metadata chip */
.rds-tag{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 9px;
  font-family:var(--display);font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  background:var(--s3);color:var(--ts);}

/* ---- Status dot (DS StatusDot.tsx) ------------------------------------- */
.rds-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--tt);flex:none;}
.rds-dot--safe{background:var(--success);} .rds-dot--breach{background:var(--error);}
.rds-dot--warn{background:var(--warning);} .rds-dot--live{background:var(--primary);}

/* ---- Toggle switch (ref: Carbon Toggle anatomy; Realm primitives) ------ */
.rds-toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;}
.rds-toggle__track{position:relative;width:38px;height:20px;border-radius:999px;background:var(--s3);
  border:1px solid var(--bd);transition:background .15s,border-color .15s;flex:none;}
.rds-toggle__knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--ts);transition:transform .16s cubic-bezier(.4,0,.2,1),background .15s;}
.rds-toggle[aria-checked="true"] .rds-toggle__track{background:var(--primary);border-color:var(--primary);}
.rds-toggle[aria-checked="true"] .rds-toggle__knob{transform:translateX(18px);background:#fff;}
.rds-toggle__label{font-size:13px;color:var(--tp);}
.rds-toggle__label small{display:block;color:var(--tt);font-size:11px;}

/* ---- Segmented / content switcher (ref: Carbon ContentSwitcher, eBay segmented) */
.rds-seg{display:inline-flex;background:var(--s2);border:1px solid var(--bd);border-radius:var(--r-md);padding:3px;gap:2px;flex:none;}
.rds-seg__item{appearance:none;border:none;background:transparent;color:var(--ts);cursor:pointer;
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  line-height:1;padding:0 14px;height:32px;
  border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s,color .15s;white-space:nowrap;}
.rds-seg__item:hover{color:var(--tp);background:color-mix(in srgb,var(--tp) 7%,transparent);}
.rds-seg__item[aria-selected="true"]{background:var(--primary);color:#fff;font-weight:600;}
.rds-seg__item[aria-selected="true"]:hover{background:var(--primary);}
.rds-seg--subtle .rds-seg__item{color:var(--ts);}
.rds-seg--subtle .rds-seg__item[aria-selected="true"]{background:var(--hover);color:var(--tp);
  box-shadow:inset 0 0 0 1px var(--bd-strong);font-weight:600;}

/* ---- Tabs (ref: Carbon Tabs) ------------------------------------------- */
.rds-tabs{display:flex;border-bottom:1px solid var(--bd-sub);}
.rds-tab{flex:1;appearance:none;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;
  font-family:var(--display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ts);
  padding:14px 18px;transition:.15s;}
.rds-tab:hover{color:var(--tp);}
.rds-tab[aria-selected="true"]{color:var(--tp);border-bottom-color:var(--primary);background:var(--s2);}

/* ---- Inputs (ref: Carbon TextInput/NumberInput) ------------------------ */
.rds-label{display:block;font-family:var(--display);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--tt);margin-bottom:7px;}
.rds-input{width:100%;background:var(--s2);border:1px solid var(--bd);border-radius:var(--r-md);color:var(--tp);
  font-family:var(--mono);font-size:13px;height:40px;padding:0 12px;outline:none;transition:border-color .15s;}
.rds-input:focus{border-color:var(--bd-strong);box-shadow:var(--focus);}
.rds-num{width:92px;text-align:center;}

/* drop zone */
.rds-drop{display:flex;flex-direction:column;align-items:center;gap:4px;border:1.5px dashed var(--bd);
  border-radius:var(--r-lg);padding:40px;text-align:center;color:var(--ts);background:var(--s2);transition:.15s;cursor:pointer;}
.rds-drop:hover,.rds-drop.is-drag{border-color:var(--primary);color:var(--tp);background:color-mix(in srgb,var(--primary) 6%,var(--s2));}

/* ---- Panel (readout / toggle pane) ------------------------------------- */
.rds-panel{background:color-mix(in srgb,var(--s1) 82%,transparent);border:1px solid var(--bd-sub);border-radius:var(--r-lg);
  backdrop-filter:blur(10px);}
.rds-panel__hd{padding:14px 16px 10px;border-bottom:1px solid var(--bd-sub);}
.rds-panel__bd{padding:14px 16px;}

/* ---- Overflow menu (ref: Carbon OverflowMenu; DS RowMenu) --------------
   POPOVER-IN-A-CARD CHECKLIST (learned the hard way — a menu inside a bordered
   card/tile hits three clipping/stacking traps; handle all three):
     1. ESCAPE the host's clip — a card with rounded corners usually sets
        `overflow:hidden`, which crops the popover. Give the host `overflow:visible`
        and round the inner media itself (`.thumb{border-radius..;overflow:hidden}`)
        instead of relying on the card to clip it.
     2. RAISE the open host above its siblings — a positioned host with z-index:auto
        lets later sibling cards paint over the escaped popover. Raise only the
        open one:  `.host:has(.rds-menu__pop:not([hidden])){z-index:50;}`
     3. FLIP when it would spill past the viewport — on open, measure and add
        `--up` if `rect.bottom > innerHeight - 8` so it opens upward instead. */
.rds-menu{position:relative;}
.rds-menu__pop{position:absolute;right:0;top:calc(100% + 6px);min-width:180px;background:var(--s2);
  border:1px solid var(--bd);border-radius:var(--r-md);padding:5px;z-index:60;box-shadow:0 12px 32px rgba(0,0,0,.5);
  display:none;}
.rds-menu.is-open .rds-menu__pop{display:block;}
.rds-menu__pop--up{top:auto;bottom:calc(100% + 6px);}     /* trap #3: viewport-spill flip */
.rds-menu__item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;appearance:none;background:none;border:none;
  color:var(--ts);font-family:var(--sans);font-size:13px;padding:9px 10px;border-radius:var(--r-sm);cursor:pointer;}
.rds-menu__item:hover{background:var(--s3);color:var(--tp);}
.rds-menu__item svg{width:15px;height:15px;flex:none;}    /* always size inline icons (unsized SVG fills the row) */
.rds-menu__item.danger{color:#ff6a4d;}

/* ---- Link (inherits the surrounding type; underline carries the affordance) */
.rds-link{color:var(--tp);text-decoration:underline;text-decoration-color:var(--bd-strong);
  text-underline-offset:2px;transition:text-decoration-color .15s;}
.rds-link:hover{text-decoration-color:var(--primary);}

/* ---- Callout (ref: Claude Code CLI notices; Carbon InlineNotification) --
   Icon sits in its own rail; ALL text (title, body, sub, cli) shares one left
   edge inside __body, so nothing hangs under the icon. */
/* box hugs its content measure — a full-bleed callout leaves dead space right */
.rds-callout{display:flex;gap:13px;padding:16px 18px;border:1px solid var(--bd);
  border-radius:var(--r-md);background:var(--s1);max-width:72ch;}
/* icon optically aligned to the title's cap-height, never floating above it */
.rds-callout__icon{flex:none;width:16px;height:16px;margin-top:2px;color:var(--ts);}
.rds-callout__icon svg{width:16px;height:16px;display:block;}
.rds-callout__body{flex:1;min-width:0;}
/* ONE type size + family for all prose in a callout (13px/1.6 sans). Hierarchy
   comes from weight and color only — no size or family shifts inside the block. */
.rds-callout__body>*{font-size:13px;line-height:1.6;}
/* the command block fills the body so its right edge lines up with the box */
.rds-callout__body>.rds-cli{max-width:none;}
/* title owns its own line — running it into the body made one flat wall of text */
.rds-callout__title{display:block;color:var(--tp);font-weight:600;}
.rds-callout__text{color:var(--ts);margin-top:2px;}
.rds-callout__text b{color:var(--tp);font-weight:600;}
.rds-callout__sub{color:var(--tt);margin-top:12px;}
.rds-callout__sub+.rds-cli{margin-top:6px;}
.rds-cli+.rds-callout__sub{margin-top:8px;}
.rds-callout--warn{border-color:var(--warning);} .rds-callout--warn .rds-callout__icon{color:var(--warning);}
.rds-callout--danger{border-color:#ff5033;} .rds-callout--danger .rds-callout__icon{color:#ff5033;}

/* ---- CLI command (copy-pasteable; ref: Claude Code command blocks) ------
   <div class="rds-cli" data-cli="the command"> … copy button is auto-wired. */
.rds-cli{display:flex;align-items:center;gap:8px;margin-top:9px;padding:8px 8px 8px 11px;
  background:#08080A;border:1px solid var(--bd-sub);border-radius:var(--r-sm);}
.rds-cli__prompt{flex:none;color:var(--tt);font-family:var(--mono);font-size:12px;user-select:none;}
.rds-cli__cmd{flex:1;min-width:0;overflow-x:auto;white-space:pre;color:#d6dde6;
  font-family:var(--mono);font-size:12px;line-height:1.6;}
.rds-cli__cmd::-webkit-scrollbar{height:0;}
.rds-cli__copy{flex:none;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;
  border:1px solid var(--bd);border-radius:var(--r-sm);background:var(--s2);color:var(--ts);
  font-family:var(--display);font-size:10px;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s;}
.rds-cli__copy:hover{color:var(--tp);border-color:var(--bd-strong);}
.rds-cli__copy svg{width:12px;height:12px;}
.rds-cli__copy.is-copied{color:var(--success,#33d678);border-color:var(--success,#33d678);}

/* ---- Tooltip (ref: Carbon Tooltip) ------------------------------------- */
.rds-tip{position:relative;}
.rds-tip__bub{position:absolute;pointer-events:none;opacity:0;transition:opacity .12s;z-index:70;
  background:var(--s3);border:1px solid var(--bd);color:var(--tp);font-size:11px;font-family:var(--sans);
  padding:5px 9px;border-radius:var(--r-sm);white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.5);}
.rds-tip:hover .rds-tip__bub,.rds-tip:focus-within .rds-tip__bub{opacity:1;}
.rds-tip--right .rds-tip__bub{left:calc(100% + 8px);top:50%;transform:translateY(-50%);}
.rds-tip--left .rds-tip__bub{right:calc(100% + 8px);top:50%;transform:translateY(-50%);}
.rds-tip--top .rds-tip__bub{bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);}

/* ---- App shell (ref: Carbon UI Shell) ---------------------------------- */
.rds-shell__hd{display:flex;align-items:center;gap:14px;height:56px;padding:0 22px;
  border-bottom:1px solid var(--bd-sub);background:color-mix(in srgb,var(--base) 86%,transparent);
  backdrop-filter:blur(10px);position:sticky;top:0;z-index:50;}
.rds-wm{font-family:var(--display);letter-spacing:.16em;font-size:15px;}
.rds-logo{display:block;height:18px;width:auto;flex:none;}
:root[data-theme="light"] .rds-logo{filter:invert(1);}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .rds-logo{filter:invert(1);}}
.rds-shell__div{width:1px;height:20px;background:var(--bd);}
.rds-crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ts);white-space:nowrap;
  min-width:0;flex:0 1 auto;overflow:hidden;}
.rds-crumb a:hover{color:var(--tp);} .rds-crumb .sep{color:var(--tt);flex:none;}
.rds-crumb a{flex:none;}
.rds-crumb .cur{color:var(--tp);overflow:hidden;text-overflow:ellipsis;min-width:60px;}
.rds-spacer{margin-left:auto;}

/* ---- dock (Apple-Motion-style 3D tool cluster) ------------------------- */
.rds-dock{display:flex;gap:4px;background:color-mix(in srgb,var(--s1) 82%,transparent);
  border:1px solid var(--bd-sub);border-radius:var(--r-lg);padding:5px;backdrop-filter:blur(10px);}
.rds-dock--v{flex-direction:column;}
.rds-dock__sep{background:var(--bd-sub);} .rds-dock--v .rds-dock__sep{height:1px;margin:3px 4px;}
.rds-dock:not(.rds-dock--v) .rds-dock__sep{width:1px;margin:4px 3px;}

/* ---- Layers list (ref: Figma / Photoshop layer visibility; Realm primitives) */
.rds-layerrow{display:flex;align-items:center;gap:10px;min-height:34px;padding:5px 8px;margin:0 -8px;
  border-radius:var(--r-sm);cursor:pointer;user-select:none;transition:background .12s;}
.rds-layerrow:hover{background:var(--s2);}
.rds-layerrow .rds-eye{width:24px;height:24px;flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--ts);}
.rds-layerrow:hover .rds-eye{color:var(--tp);}
.rds-layerrow .eye-off{display:none;}
.rds-layerrow[aria-checked="false"] .eye-on{display:none;}
.rds-layerrow[aria-checked="false"] .eye-off{display:inline;}
.rds-layerrow .sw{width:10px;height:10px;border-radius:3px;flex:none;}
.rds-layerrow .lbl{flex:1;min-width:0;font-size:13px;color:var(--tp);line-height:1.3;}
.rds-layerrow .lbl small{display:block;color:var(--tt);font-size:11px;}
.rds-layerrow[aria-checked="false"] .lbl,.rds-layerrow[aria-checked="false"] .sw{opacity:.4;}

/* ---- scrollbars (dark, unobtrusive) ------------------------------------ */
*{scrollbar-width:thin;scrollbar-color:var(--bd) transparent;}
*::-webkit-scrollbar{width:8px;height:8px;}
*::-webkit-scrollbar-thumb{background:var(--bd);border-radius:4px;}
*::-webkit-scrollbar-thumb:hover{background:var(--bd-strong);}
*::-webkit-scrollbar-track{background:transparent;}

/* worker readout rows (viewer panels) — aligned columns: dot | name | value | verdict */
.rds-readrow{display:grid;grid-template-columns:14px minmax(0,1fr) auto 62px;align-items:center;
  gap:0 10px;padding:6px 0;font-size:13px;}
.rds-readrow .rds-dot{justify-self:center;}
.rds-readrow .nm{color:var(--tp);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;}
.rds-readrow .ds{font-family:var(--mono);color:var(--tp);font-size:12.5px;justify-self:end;}
.rds-readrow .rds-pill{justify-self:stretch;justify-content:center;}
.rds-subjoint{display:grid;grid-template-columns:14px minmax(0,1fr) auto 62px;gap:0 10px;
  margin:-4px 0 4px;font-size:11.5px;color:var(--tt);align-items:center;}
.rds-subjoint .lbl{grid-column:2;min-width:0;line-height:1.45;}
.rds-subjoint b{color:var(--ts);font-weight:600;}
.rds-subjoint .m{grid-column:3;justify-self:end;font-family:var(--mono);color:var(--ts);font-size:11.5px;}

/* range slider (bounded numeric inputs) */
.rds-rangewrap{display:flex;align-items:center;gap:12px;height:40px;}
.rds-range{appearance:none;-webkit-appearance:none;width:170px;height:4px;border-radius:2px;
  background:linear-gradient(to right,var(--primary) 0%,var(--primary) var(--fill,50%),var(--bd) var(--fill,50%),var(--bd) 100%);
  outline:none;cursor:pointer;}
.rds-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--tp);border:2.5px solid var(--primary);transition:transform .12s;}
.rds-range::-webkit-slider-thumb:hover{transform:scale(1.15);}
.rds-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--tp);border:2.5px solid var(--primary);}
.rds-range:focus-visible{box-shadow:var(--focus);}
.rds-range__val{font-family:var(--mono);font-size:12.5px;color:var(--tp);min-width:44px;text-align:right;}
.rds-range__end{font-family:var(--display);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--tt);}

/* helper microcopy under controls */
.rds-help{display:block;margin-top:6px;font-size:11.5px;color:var(--tt);line-height:1.45;}

/* key-value row (panel headers) */
.rds-kv{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.rds-kv .k{font-family:var(--display);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--tt);}
.rds-kv .v{font-family:var(--mono);font-size:12.5px;color:var(--tp);}

.rds-hidden{display:none !important;}
.rds-fadein{animation:rdsfade .4s ease both;} @keyframes rdsfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}