/* GENERATED — do not edit by hand.
   Source of truth: design/rebrand-handoff/assets/barf-finish.css
   Regenerate: python3 design/rebrand-handoff/assets/sync_tokens.py */
/* B.A.R.F. — "Projection" finish (own-finish BUILD.md §11.4, board B-Home)
   + the §14 page-template system ("every B.A.R.F. page → the Review card
   or template C"). Night-only — no day toggle exists in this app. */
[data-app="barf"] {
  --room:        #0B0B12;
  --room-wash:   radial-gradient(820px 520px at 22% 0%, rgba(185,172,255,.10), transparent 65%),
                 radial-gradient(900px 500px at 88% 100%, rgba(70,60,120,.14), transparent 70%);
  --light:       #B9ACFF;
  --ink:         #EFEDF8;
  --ink-2:       #C6C2D8;
  --ink-3:       #9A95B0;
  --ink-dim:     #66627A;
  --panel:       linear-gradient(180deg, rgba(24,22,34,.78), rgba(16,15,24,.78));
  --panel-edge:  rgba(185,172,255,.14);
  --panel-edge-hero: rgba(185,172,255,.30);
  --r-card:      10px;   /* tiles use 8px directly, see .bf-tile */
  --f-display:   'Bricolage Grotesque';
  --sidebar-w:   224px;
  --bf-btn-ink:  #16123A;   /* primary button text — light on this, not the room */
  --bf-new:      #DCD8EE;   /* "new" tier / new-folder chip */

  /* Mark plate (§11.1) — the reactor SVGs read these as CSS vars at render
     time, so the housing follows the room instead of the shared brown-black
     default in tokens.css. */
  --h-plate:   #181626;
  --h-plate-d: #0B0B12;

  /* Re-skin the existing chassis CSS immediately — see the identical note
     in jarvis-finish.css / edith-finish.css. */
  --bg:         var(--room);
  --panel-side: #08080E;
  --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);
}

/* ── §14 page-template system ─────────────────────────────────────────────
   Desk = template B (hero focal band + KPI + tiles, existing chassis
   classes). Review = its own third grammar (§14.2, hand-built in
   ReviewView.jsx). Every other screen = template C: this vocabulary,
   named directly off the board boards/barf/*.html so the markup below can
   be lifted from them with the classnames translated 1:1. Scoped to
   .barf-app so these short names never leak into another app. */

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

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

.bf-chip {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 9px;
  border-radius: 3px; line-height: 1; white-space: nowrap; display: inline-block;
  font-family: var(--f-display); font-weight: 600;
}
.bf-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); }
.bf-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); }
.bf-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); }
.bf-chip--neutral { color: var(--ink-3); border: 1px solid color-mix(in srgb, var(--light) 16%, transparent); }
.bf-chip--new     { color: var(--bf-new); border: 1px solid color-mix(in srgb, var(--bf-new) 35%, transparent); }
.bf-chip--alert   { color: var(--alert); border: 1px solid color-mix(in srgb, var(--alert) 45%, transparent); background: color-mix(in srgb, var(--alert) 10%, transparent); }

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

.bf-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;
}

.bf-panel {
  position: relative; background: var(--panel); border: 1px solid var(--panel-edge);
  border-radius: var(--r-card); padding: 14px 16px; display: flex; flex-direction: column;
  min-width: 0; min-height: 0; overflow: hidden;
}
.bf-panel--hero {
  border-color: var(--panel-edge-hero);
  box-shadow: inset 0 0 40px color-mix(in srgb, var(--light) 5%, transparent), 0 0 26px color-mix(in srgb, var(--light) 6%, transparent);
}
.bf-panel--amber { border-color: color-mix(in srgb, var(--watch) 35%, transparent); }
.bf-panel-head { display: flex; justify-content: space-between; align-items: center; height: 26px; }

.bf-label { font-family: var(--f-display); font-weight: 600; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); line-height: 1; white-space: nowrap; }
.bf-label--warn { color: var(--watch); }
.bf-fig { font-family: var(--f-display); font-weight: 600; font-size: 46px; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.bf-fig--s { font-size: 24px; letter-spacing: -.01em; }
.bf-fig--caution { color: var(--watch); }
.bf-sub { font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.bf-sub--push { margin-top: auto; }

/* Desk's "moments by tier" segmented bar + legend (board B-Home). */
.bf-stack { display: flex; height: 14px; border-radius: 3px; overflow: hidden; gap: 2px; }
.bf-leg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; font-size: 12px; color: var(--ink-2); }
.bf-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 8px; vertical-align: 0; }
.bf-leg em { font-style: normal; float: right; font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); }
.bf-hero-col { padding: 16px 20px; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--panel-edge); }
.bf-hero-col:last-child { border-right: none; flex: 1 1 auto; }

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

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

.bf-row {
  display: grid; gap: 12px; align-items: center; height: 40px;
  border-top: 1px solid color-mix(in srgb, var(--light) 8%, transparent); font-size: 13px; color: var(--ink);
}
.bf-row--head { height: 30px; border-top: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); font-family: var(--f-mono); }
.bf-row .bf-m { font-size: 12px; color: var(--ink-2); text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bf-row .bf-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; background: none; border: none; color: inherit; font: inherit; padding: 0; cursor: pointer; }
button.bf-row { width: 100%; background: none; border: none; border-top: 1px solid color-mix(in srgb, var(--light) 8%, transparent); font-family: inherit; cursor: pointer; text-align: left; }
.bf-row .bf-r { justify-self: end; display: flex; gap: 6px; }
.bf-year-head { padding: 8px 0 2px; display: flex; gap: 10px; align-items: center; border-top: 1px solid color-mix(in srgb, var(--light) 8%, transparent); }
.bf-year-head b { font-family: var(--f-display); font-weight: 600; font-size: 13px; color: var(--light); }

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

.bf-foot {
  margin-top: auto; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--light) 12%, transparent);
  font-size: 11.5px; letter-spacing: .06em; color: var(--light); display: flex; justify-content: space-between;
  font-family: var(--f-display); font-weight: 600; background: none; border-left: none; border-right: none; border-bottom: none; width: 100%; cursor: pointer;
}
.bf-foot .bf-foot-note { color: var(--ink-dim); font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

.bf-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; min-height: 0; }
.bf-tile { border: 1px solid color-mix(in srgb, var(--light) 12%, transparent); border-radius: 8px; overflow: hidden; background: rgba(0,0,0,.22); display: flex; flex-direction: column; min-height: 0; position: relative; }
.bf-tile-im { flex-grow: 1; position: relative; min-height: 0; background: linear-gradient(165deg, #2C2A3A, #18161F 65%, #0E0D12); }
.bf-tile-im::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 40%, color-mix(in srgb, var(--light) 10%, transparent), transparent 70%); }
.bf-tile-chip { position: absolute; right: 8px; top: 8px; font-size: 11px; padding: 4px 7px; }
.bf-tile-tx { padding: 7px 10px 8px; flex: none; }
.bf-tile-tx b { display: block; font-weight: 600; font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-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; }
.bf-tile--dashed { align-items: center; justify-content: center; border-style: dashed; background: none; }
.bf-tile--dashed span:first-child { font-family: var(--f-display); font-weight: 600; font-size: 18px; color: var(--light); }
.bf-grain { position: absolute; inset: 0; opacity: .05; pointer-events: none; mix-blend-mode: screen; }

.bf-key {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 5px; border: 1px solid color-mix(in srgb, var(--light) 45%, transparent); color: var(--light);
  font-family: var(--f-mono); font-size: 11.5px; background: color-mix(in srgb, var(--light) 8%, transparent);
}
.bf-legend { font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.bf-legend b { color: var(--ink-2); font-weight: 500; }

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

.bf-step { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; height: 34px; border-top: 1px solid color-mix(in srgb, var(--light) 8%, transparent); font-size: 13px; }
.bf-step .bf-m { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.bf-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--light) 40%, transparent); display: block; margin-left: 5px; }
.bf-dot--done { background: var(--gain); border-color: var(--gain); }
.bf-dot--live { background: var(--light); border-color: var(--light); box-shadow: 0 0 10px color-mix(in srgb, var(--light) 70%, transparent); }
.bf-dot--caution { border-color: var(--watch); }

/* Sidebar header — the board's own .wm treatment (boards/barf/*.html): a
   big centred mark with a glow in the app's light (not the suite-wide
   arc-blue drop-shadow), wordmark in plain ink (not the gold wordmark
   gradient — that's a JARVIS/suite-chrome idea that doesn't belong in
   BARF's own-light Projection room), a small caption underneath. */
.barf-app .sb-header {
  flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 16px 20px;
}
.barf-app .mark-btn svg {
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--light) 75%, transparent))
          drop-shadow(0 0 32px color-mix(in srgb, var(--light) 30%, transparent));
}
.barf-app .sb-wordmark {
  font-size: 22px; letter-spacing: .16em; padding-left: .16em;
  background: none; -webkit-background-clip: unset; background-clip: unset; color: var(--ink);
}
.bf-wm-caption {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-dim); margin-top: -4px; text-align: center;
  /* "Stark Operations Suite" wraps to two lines at this width — without an
     explicit centre the second line only centres as a block under the
     wordmark, not within its own wrapped text (the flex column centres the
     caption's box, not the text runs inside it). */
}

/* Sidebar — sections + live counts (§14.1). Boards/barf/*.html's own .ni /
   .ni.on: no dot bullet, no gold flick — a lilac left border + a light
   lilac background tint on the active row instead. Gold is not "current"
   in this finish, same rule JARVIS's own rail (§9.1) already applies. */
.barf-app .sb-scroll { padding: 6px 0; }
.barf-app .mk-navitem {
  padding: 0 20px 0 16px; height: 32px;
  border-left: 2px solid transparent;
  color: var(--ink-2);
}
.barf-app .mk-navitem::before { content: none; }
.barf-app .mk-navitem:hover { color: var(--ink); }
.barf-app .mk-navitem.active,
.barf-app .mk-navitem[aria-current="page"] {
  background: color-mix(in srgb, var(--light) 9%, transparent);
  border-left-color: var(--light);
  color: var(--ink);
}
.barf-app .mk-navitem > span:first-child { flex: 1; text-align: left; }
.bf-navcount { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); }
.mk-navitem.active .bf-navcount { color: var(--light); }
.bf-sidebar-foot {
  margin-top: auto; padding: 14px 20px 0; border-top: 1px solid var(--panel-edge);
  display: flex; flex-direction: column; gap: 6px;
}
.bf-sidebar-foot .bf-m1 { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-3); }
.bf-sidebar-foot .bf-m2 { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-dim); text-transform: uppercase; }