/* GENERATED — do not edit by hand.
   Source of truth: design/rebrand-handoff/assets/ultron-finish.css
   Regenerate: python3 design/rebrand-handoff/assets/sync_tokens.py */
/* ULTRON — "Gunmetal" finish (own-finish BUILD.md §11.3, board U-Home)
   + the §13 page-template system ("every ULTRON page → template C, Command
   → template B"). Night-only — no day toggle exists in this app (§5). The
   reactor light itself stays arc `#8FDCFF` (Brian, 19 Sep) — this finish
   recolours the room and chrome around it, not the mark's own light. */
[data-app="ultron"] {
  --room:        #0B0C0D;
  --room-wash:   radial-gradient(900px 400px at 50% -10%, rgba(143,220,255,.07), transparent 70%);
  --light:       #8FDCFF;
  --ink:         #E6E9EC;
  --ink-2:       #B4BBC3;
  --ink-3:       #8A939C;
  --ink-dim:     #5A636B;
  /* The board's own brushed-metal repeating-gradient stripe read as visible
     "gridlines" on panels with open space (Collection/Episode Gaps, Explore)
     — Brian, 28 Sep. Plain panel shading instead. */
  --panel:       linear-gradient(180deg, #16181B, #101214);
  --panel-side:  #0E1012;
  --panel-edge:  rgba(255,255,255,.09);
  --panel-edge-hero: rgba(143,220,255,.35);
  --r-card:      2px;   /* "cuts" — finish override of the suite 10px, same flag as JARVIS/EDITH's 6px */
  --f-display:   'Big Shoulders Display';
  --motion:      120ms linear;   /* hover, chip, row highlight — no ease */
  --sidebar-w:   224px;

  /* Mark plate (§11.1) — the reactor SVG reads these as CSS vars at render
     time, so the housing plate follows the room/panel instead of the shared
     brown-black default in tokens.css. Values match the board's own plate
     gradient (the `upg` linear gradient on boards/ultron/*.html). */
  --h-plate:   #16181B;
  --h-plate-l: #2A2E33;
  --h-plate-d: #0B0C0D;

  /* Re-skin the existing chassis CSS immediately — see the identical note
     in jarvis-finish.css / edith-finish.css / barf-finish.css. */
  --bg:         var(--room);
  --border:     var(--panel-edge);
  --t-hi:       var(--ink);
  --t-mid:      var(--ink-2);
  --t-lo:       var(--ink-dim);
  --arc:        var(--light);
  --f-disp:     var(--f-display);

  /* Nav active-state flick (components.css §"ONE grammar for the suite") is
     gold by default suite-wide — wrong here, this finish's own rule is gold
     survives only as the seal ring. Light instead, everywhere --flick is
     read (.mk-navitem.active::before, .mk-secflick). */
  --flick: linear-gradient(90deg, var(--light), transparent);
  /* Active sidebar row background — suite default is a gold tint
     (index.css §7); the board's own active state (U-Home's `.ni.on`) is a
     light-tinted row + a 2px left bar, no underline at all. */
  --item-active-bg: color-mix(in srgb, var(--light) 8%, transparent);
}

/* Brian, 28 Sep: the bottom flick read as "a tick" next to the board's own
   highlighted-row treatment — drop it here and use a left bar instead,
   matching the board (`.ni.on{background;border-left-color}`) directly. */
.ultron-app .mk-navitem::before { display: none; }
.ultron-app .mk-navitem.active,
.ultron-app .mk-navitem[aria-current="page"] {
  border-left: 2px solid var(--light);
}

/* ── §13 page-template system ─────────────────────────────────────────────
   Command = template B (hero focal band + KPI + table + two stacked insight
   cards, board U-Home, hand-built in Command.jsx). Every other screen =
   template C: this vocabulary, named directly off the boards in
   design/own-finish-2026-09/boards/ultron/*.html so the markup there can be
   lifted with the classnames translated 1:1. Scoped to .ultron-app so these
   short names never leak into another app. */

.ultron-app .main-col { padding: 0; display: flex; flex-direction: column; min-height: 0; }

/* Sidebar identity — centred mark/wordmark/tagline (Brian, 28 Sep: match
   JARVIS's real sidebar convention, not the board's own "Plex librarian"
   line — bigger mark, plain ink wordmark, "Stark Operations Suite" tagline).
   Overrides the suite-wide horizontal .sidebar-logo and the gold→red
   .sidebar-title wordmark gradient (index.css §7) for this app only. */
.ultron-app .sidebar-logo {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding-top: 38px;
}
.ultron-app .sidebar-title {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .3em;
  padding-left: .3em;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: var(--ink);
  color: var(--ink);
  text-shadow: 0 0 12px color-mix(in srgb, var(--light) 55%, transparent);
}
.ultron-app .sidebar-tagline {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: -2px;
}

/* Window drag region — the StatusBar identity strip that used to carry this
   (§1 "no topbar") is gone; the frameless window (main.js, hiddenInset +
   inset traffic lights) still needs a draggable area, so the header itself
   takes over. Traffic lights sit inside the 224px sidebar column, clear of
   this. `.main-content`'s own top padding (index.css, shared suite-wide)
   left a 28px strip above `.ul-header` with no drag region at all — that's
   why only the sidebar corner worked. Zeroed here so the header sits flush
   at y:0 and its drag region actually covers the full top edge, matching
   the board's own "header is the top of the content area" spec anyway. */
.ultron-app .main-content { padding-top: 0; }
.ultron-app .ul-header { -webkit-app-region: drag; }
.ultron-app .ul-header button,
.ultron-app .ul-header input { -webkit-app-region: no-drag; }
.ultron-app .sidebar-logo { -webkit-app-region: drag; }
.ultron-app .sidebar-logo .mark-btn { -webkit-app-region: no-drag; }

.ul-header {
  height: 68px; flex: none; display: flex; align-items: center; gap: 18px;
  padding: 0 20px; border-bottom: 1px solid var(--panel-edge);
}
.ul-header h1 {
  margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 28px;
  letter-spacing: .12em; line-height: 1; color: var(--ink); white-space: nowrap;
}
.ul-kick {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  color: var(--ink-dim); text-transform: uppercase; white-space: nowrap;
}
.ul-header-spacer { flex-grow: 1; }

.ul-chip {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: 6px 9px;
  border-radius: 2px; line-height: 1; white-space: nowrap; display: inline-block;
  font-family: var(--f-display); font-weight: 700;
}
.ul-chip--caution { color: var(--watch); border: 1px solid color-mix(in srgb, var(--watch) 45%, transparent); background: color-mix(in srgb, var(--watch) 8%, transparent); }
.ul-chip--alert   { color: var(--alert); border: 1px solid color-mix(in srgb, var(--alert) 45%, transparent); background: color-mix(in srgb, var(--alert) 12%, transparent); }
.ul-chip--neutral { color: var(--ink-3); border: 1px solid rgba(255,255,255,.12); }
.ul-chip--gain    { color: var(--gain); border: 1px solid color-mix(in srgb, var(--gain) 40%, transparent); background: color-mix(in srgb, var(--gain) 6%, transparent); }
.ul-chip--light   { color: var(--light); border: 1px solid color-mix(in srgb, var(--light) 45%, transparent); background: color-mix(in srgb, var(--light) 8%, transparent); }

.ul-btn {
  font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; padding: 9px 14px; border-radius: 2px; background: var(--light);
  color: #07141C; border: 0; line-height: 1; cursor: pointer; white-space: nowrap;
}
.ul-btn--ghost  { background: transparent; color: var(--light); border: 1px solid color-mix(in srgb, var(--light) 45%, transparent); }
.ul-btn--danger { background: transparent; color: var(--alert); border: 1px solid color-mix(in srgb, var(--alert) 50%, transparent); }
.ul-btn:disabled { opacity: .5; cursor: default; }

.ul-grid {
  flex-grow: 1; padding: 16px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px; min-height: 0; overflow-y: auto; align-content: start;
}
/* Command only — U-Home's fixed 224/104/1fr row template (template B). */
.ul-grid--command { grid-template-rows: 224px 104px minmax(0, 1fr); overflow: hidden; align-content: stretch; }

.ul-panel {
  background: var(--panel); border: 1px solid var(--panel-edge); border-radius: var(--r-card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06); padding: 14px 16px; display: flex;
  flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
}
.ul-panel--hero {
  border-color: var(--panel-edge-hero);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--light) 55%, transparent), inset 0 0 40px color-mix(in srgb, var(--light) 4%, transparent);
}
.ul-panel-head { display: flex; justify-content: space-between; align-items: center; height: 26px; }

/* Command's hero triptych — three columns in one hero panel, U-Home's own
   layout (`flex-direction:row; gap:0; padding:0`, columns divided by a
   right border, last column flexes to fill). */
.ul-hero-tri { flex-direction: row; gap: 0; padding: 0; }
.ul-hero-col { flex: 0 0 33.3%; padding: 14px 20px; display: flex; flex-direction: column; border-right: 1px solid var(--panel-edge); min-width: 0; min-height: 0; overflow: hidden; }
.ul-hero-col:last-child { border-right: none; flex: 1 1 auto; }

.ul-label { font-family: var(--f-display); font-weight: 700; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ul-label--warn { color: var(--watch); }
.ul-fig { font-family: var(--f-display); font-weight: 700; font-size: 46px; line-height: 1; letter-spacing: .02em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ul-fig--s { font-size: 24px; }
.ul-fig--caution { color: var(--watch); }
.ul-fig--dim { color: var(--ink-3); }
.ul-sub { font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.ul-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ul-sub--push { margin-top: auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.ul-kpi { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; height: 104px; }
.ul-kpi .ul-panel { padding: 14px 16px; }

.ul-toolbar { grid-column: 1 / 13; height: 36px; display: flex; align-items: center; gap: 8px; flex: none; }
.ul-pill {
  font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; height: 30px; padding: 0 12px; display: inline-flex; align-items: center;
  gap: 8px; border-radius: 2px; border: 1px solid rgba(255,255,255,.12); color: var(--ink-3);
  white-space: nowrap; text-decoration: none; background: none; cursor: pointer;
}
.ul-pill em { font-style: normal; font-family: var(--f-mono); font-size: 11px; color: var(--ink-dim); }
.ul-pill.is-on { background: color-mix(in srgb, var(--light) 10%, transparent); border-color: color-mix(in srgb, var(--light) 45%, transparent); color: var(--ink); }
.ul-pill.is-on em { color: var(--light); }
.ul-search {
  height: 30px; flex-grow: 1; max-width: 240px; border: 1px solid rgba(255,255,255,.12);
  border-radius: 2px; background: var(--panel-side); display: flex; align-items: center; padding: 0 10px;
  gap: 8px; color: var(--ink-dim); font-size: 12.5px;
}
.ul-search input { background: none; border: none; color: var(--ink); font-size: 12.5px; font-family: var(--f-body); width: 100%; outline: none; }
.ul-search input::placeholder { color: var(--ink-dim); }

.ul-row {
  display: grid; gap: 12px; align-items: center; height: 40px;
  border-top: 1px solid rgba(255,255,255,.06); font-size: 13px; color: var(--ink);
}
.ul-row--head { height: 30px; border-top: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); font-family: var(--f-mono); }
.ul-row .ul-m { font-size: 12px; color: var(--ink-2); text-align: center; font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ul-row .ul-t { font-family: var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ul-row .ul-r { justify-self: end; display: flex; gap: 6px; }
.ul-year-head { padding: 8px 0 2px; display: flex; gap: 10px; align-items: center; border-top: 1px solid rgba(255,255,255,.06); }

.ul-action {
  font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--light); border: 1px solid color-mix(in srgb, var(--light) 35%, transparent); border-radius: 2px;
  padding: 5px 8px; background: transparent; line-height: 1; white-space: nowrap; cursor: pointer;
}
.ul-action--quiet { color: var(--ink-2); border-color: rgba(255,255,255,.14); }
.ul-action:disabled { opacity: .5; cursor: default; }

.ul-foot {
  margin-top: auto; padding: 10px 0 0; border-top: 1px solid rgba(255,255,255,.09);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--light);
  display: flex; justify-content: space-between; font-family: var(--f-display); font-weight: 700;
  background: none; border-left: none; border-right: none; border-bottom: none; width: 100%; cursor: pointer;
  text-align: left; -webkit-appearance: none; appearance: none;
}
.ul-foot:hover { color: color-mix(in srgb, var(--light) 80%, white); }
.ul-foot .ul-foot-note { color: var(--ink-dim); font-family: var(--f-mono); font-weight: 400; text-transform: none; letter-spacing: .02em; font-size: 11px; }

.ul-legend { font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.ul-legend b { color: var(--ink-2); font-weight: 500; }

.ul-bar { display: grid; grid-template-columns: 92px minmax(0, 1fr) 118px; gap: 10px; align-items: center; height: 22px; font-size: 12px; color: var(--ink-2); }
.ul-bar i { display: block; height: 6px; background: rgba(255,255,255,.06); border-radius: 1px; overflow: hidden; }
.ul-bar i b { display: block; height: 100%; background: var(--light); }
.ul-bar i b.ul-bar-caution { background: var(--watch); }
.ul-bar i b.ul-bar-gain { background: var(--gain); }
.ul-bar .ul-m { font-size: 11px; white-space: nowrap; color: var(--ink-2); text-align: right; font-family: var(--f-mono); }

/* Command's compact stacked-list rows (`.li` on U-Home: Quarantine/Upgrade
   mini-lists in the two right-hand insight cards). */
.ul-li { display: grid; grid-template-columns: minmax(0, 1fr) 44px 60px; gap: 10px; align-items: center; height: 30px; font-size: 12.5px; border-top: 1px solid rgba(255,255,255,.06); }
.ul-li .ul-t { font-family: var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.ul-li .ul-m { font-size: 11.5px; color: var(--ink-2); text-align: right; font-family: var(--f-mono); }

.ul-step { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; height: 34px; border-top: 1px solid rgba(255,255,255,.06); font-size: 13px; }

/* Tiles — Explore's people grid (§13.5, "the §11.4 BARF rule": fixed column
   count, capped 4x2, never auto-fill). */
.ul-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; min-height: 0; }
.ul-tile { border: 1px solid rgba(255,255,255,.09); border-radius: 2px; overflow: hidden; background: rgba(0,0,0,.22); display: flex; flex-direction: column; min-height: 0; position: relative; }
.ul-tile-im { flex-grow: 1; position: relative; min-height: 90px; background: linear-gradient(165deg, #22262A, #16181B 65%, #101214); }
.ul-tile-tx { padding: 7px 10px 8px; flex: none; }
.ul-tile-tx b { display: block; font-weight: 700; font-family: var(--f-display); font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ul-tile-tx span { display: block; font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Sidebar — LIBRARY / INTEL / SYSTEM groups + live counts (§13.1). */
.ultron-app .sb-scroll { padding: 6px 0; }
.ultron-app .mk-navitem { padding: 0 20px 0 18px; height: 32px; }
.ultron-app .mk-navitem > span:first-child { flex: 1; text-align: left; }
.ul-navcount { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); }
.mk-navitem.active .ul-navcount { color: var(--light); }
.ul-sidebar-foot {
  margin-top: auto; padding: 14px 20px 0; border-top: 1px solid var(--panel-edge);
  display: flex; flex-direction: column; gap: 6px;
}
.ul-sidebar-foot .ul-m1 { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--watch); }

/* Settings — "forms on the chassis" (§13.5): the generic .input/.btn-primary
   still carried the suite's warm ember track colour (--ink-mid), which reads
   as a stray leftover next to Gunmetal's cool room. Recoloured only, same
   markup/behaviour. */
.ultron-app .input { background: var(--panel-side); border-color: var(--panel-edge); color: var(--ink); font-family: var(--f-mono); }
.ultron-app .input:focus { border-color: color-mix(in srgb, var(--light) 55%, transparent); }
.ultron-app .input::placeholder { color: var(--ink-dim); }
.ultron-app .btn-primary { background: var(--light); color: #07141C; border-color: transparent; }
.ultron-app .field-label { color: var(--ink-3); }