/* board-kit: the one look for the run sheet, the job board and the Claude and Iris board.
   Base: the run sheet's tokens (site/public/app.css, from the 23 Oct 2026 mockup), which the job board already
   shares. The Claude and Iris board moves onto them. Every class is prefixed k-, so a site's own rules never
   collide; a site keeps its own stylesheet for what only it has. Fonts are served by each site (fonts/), never a
   third party: the run sheet's CSP allows self only. Colour meaning, fixed across the three sites:
     green = approved or live, blue = candidate or strong, amber = weak, purple = target,
     orange text = closes soon, red = blocked or failed, the orange count on a dark pill = needs you. */

@font-face{font-family:"Hanken Grotesk";font-style:normal;font-display:swap;font-weight:100 900;
src:url(fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:500 700;
src:url(fonts/jetbrains-mono-latin.woff2) format("woff2")}

:root{
  --bg:#f6f5f1;--raise:#fff;--ink:#141416;--ink-2:#55545a;--ink-3:#68676d;--rule:#e4e1da;--soft:#eeebe4;
  --accent:#2b59ff;--accent-ink:#fff;--accent-soft:#e6ecff;
  --ok:#167a4b;--ok-soft:#e2f3ea;--warn:#a86a00;--warn-soft:#fbf0d9;--violet:#6a3fd1;--violet-soft:#eee8fb;
  --urgent:#b8430b;--urgent-soft:#fbe9df;--danger:#b3261e;--danger-soft:#fbe4e2;
  --count:#f2a65a;--count-ink:#1b1a17;
  --r:14px;--r-sm:10px;--ease:cubic-bezier(.16,1,.3,1);--t-fast:.24s;--t:.32s;
  --font:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --shadow:0 1px 2px rgba(20,20,22,.05),0 4px 14px rgba(20,20,22,.05);
  --tap:44px;color-scheme:light}
@media (prefers-color-scheme:dark){:root{
  --bg:#0e0e10;--raise:#17171a;--ink:#f3f2ee;--ink-2:#b2b1ab;--ink-3:#8d8c88;--rule:#26262a;--soft:#1f1f23;
  --accent:#7c9bff;--accent-ink:#0b0c10;--accent-soft:#1c2440;
  --ok:#5fd394;--ok-soft:#173025;--warn:#f0b63c;--warn-soft:#33270f;--violet:#b49cff;--violet-soft:#261d3d;
  --urgent:#ff9a5c;--urgent-soft:#3a2216;--danger:#ff8a80;--danger-soft:#3a1c1a;
  --count:#f2a65a;--count-ink:#1b1a17;--shadow:none;color-scheme:dark}}

*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 var(--font);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
button:disabled{cursor:default;opacity:.55}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
::selection{background:var(--accent);color:var(--accent-ink)}
svg.k-i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.k-shell{max-width:1160px;margin:0 auto;padding:max(12px,env(safe-area-inset-top)) 16px 120px}

/* --- 1. Top bar: site name left, identity or status right, the other two sites as small links ------------------- */
.k-top{display:flex;align-items:center;gap:12px;min-height:52px}
.k-top .k-name{font-weight:700;letter-spacing:-.02em;font-size:16px;text-decoration:none;white-space:nowrap}
/* the board switcher (BK7): the three sites as one segmented control, the current one raised; a link outside the
   switch (the Iris board's Dead routes) stays a quiet link */
.k-top .k-sites{display:flex;align-items:center;gap:6px;margin-left:4px;overflow-x:auto;scrollbar-width:none}
.k-top .k-sites::-webkit-scrollbar{display:none}
.k-top .k-switch{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background:var(--soft);flex:none}
.k-top .k-switch a{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.k-top .k-switch a[aria-current=page]{background:var(--raise);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.05)}
.k-top .k-switch a:hover:not([aria-current=page]){color:var(--ink)}
.k-top .k-sites>a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 9px;border-radius:10px;font-size:13px;font-weight:600;color:var(--ink-3);text-decoration:none;white-space:nowrap}
.k-top .k-sites>a:hover{background:var(--soft);color:var(--ink)}
/* breadcrumbs (BK7): on every page below a board's home, the way back and where you are */
.k-crumbs{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:13px;color:var(--ink-3);min-height:32px;flex-wrap:wrap}
.k-crumbs a{display:inline-flex;align-items:center;min-height:32px;padding:0 2px;font-weight:600;color:var(--ink-2);text-decoration:none}
.k-crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.k-crumbs a::before{content:"\2039";margin-right:6px;font-size:16px;line-height:1}
.k-crumbs span[aria-current=page]{font-weight:600;color:var(--ink)}
.k-crumbs .sep{color:var(--rule)}
.k-top .k-ident{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3);white-space:nowrap;min-width:0}
.k-top .k-ident>span{overflow:hidden;text-overflow:ellipsis}
.k-top .k-ident button,.k-top .k-ident a{min-height:var(--tap);padding:0 10px;border-radius:10px;font-weight:600;color:var(--ink-2);text-decoration:none}
/* on a phone the identity takes its own line under the name and the site links, right-aligned, so neither is cut */
@media (max-width:559px){
 .k-top{flex-wrap:wrap;row-gap:0}
 .k-top .k-ident{flex-basis:100%;justify-content:flex-end;margin-left:0;min-height:30px;margin-top:-6px}
}
.k-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--ink-3);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink-3) 18%,transparent)}
.k-dot[data-status=green]{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%,transparent)}
.k-dot[data-status=amber]{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 22%,transparent)}
.k-dot[data-status=red]{background:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 20%,transparent)}

/* --- 2. Type ramp: verdict headline, status line, body, meta ---------------------------------------------------- */
.k-h1{font-size:clamp(26px,7.2vw,40px);line-height:1.06;letter-spacing:-.035em;font-weight:700;margin:18px 0 6px;text-wrap:balance;max-width:20ch}
.k-h1 em{font-style:normal;color:var(--accent);white-space:nowrap}
.k-status{color:var(--ink-2);margin:0 0 18px;max-width:52ch}
.k-h2{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;font-weight:650;margin:22px 0 4px;letter-spacing:-.005em}
.k-h2 span{color:var(--ink-3);font-weight:500;font-size:12.5px}
.k-meta{font-size:12.5px;color:var(--ink-3)}
.k-id{font:600 12px/1.6 var(--mono);color:var(--ink-3);letter-spacing:.02em;text-decoration:none}

/* --- 3. Pills: outlined = filter, soft colour = status, dark = the main action ----------------------------------- */
.k-filters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:8px -16px 0;padding:5px 16px 9px}
.k-filters::-webkit-scrollbar{display:none}
.k-pill{position:relative;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;padding:7px 12px;border-radius:999px;border:1px solid var(--rule);font-size:13px;font-weight:550;color:var(--ink-2);min-height:34px;text-decoration:none}
.k-pill::after{content:"";position:absolute;inset:-5px 0} /* 44 pt tap height on a 34 pt pill */
.k-pill[aria-pressed=true],.k-pill[aria-current]{border-color:var(--ink);color:var(--ink);background:var(--raise)}
.k-pill b{font-weight:600;color:var(--ink-3);margin-left:2px}
.k-tag{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--soft);color:var(--ink-2);white-space:nowrap}
.k-tag.ok{background:var(--ok-soft);color:var(--ok)}          /* approved, live, proven */
.k-tag.strong{background:var(--accent-soft);color:var(--accent)} /* candidate, strong, tier 2 */
.k-tag.weak{background:var(--warn-soft);color:var(--warn)}     /* weak, tier 3, at risk */
.k-tag.target{background:var(--violet-soft);color:var(--violet)} /* a target company, a target prize */
.k-tag.soon{background:var(--urgent-soft);color:var(--urgent)}  /* closes soon, overdue */
.k-tag.bad{background:var(--danger-soft);color:var(--danger)}   /* blocked, failed, locked */
.k-act{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:var(--tap);padding:0 16px;border-radius:12px;background:var(--ink);color:var(--bg);font-weight:650;font-size:14px;text-decoration:none;white-space:nowrap}
.k-act .k-count{margin-left:2px}
.k-act.quiet{background:var(--raise);color:var(--ink);border:1px solid var(--rule)}
.k-act.danger{background:var(--raise);color:var(--danger);border:1px solid var(--rule)}
.k-act.off{background:var(--soft);color:var(--ink-3)}
.k-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--count);color:var(--count-ink);font-size:12px;font-weight:700;line-height:20px}
.k-count.tick{animation:k-tick var(--t-fast) var(--ease)}
@keyframes k-tick{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.k-kbd{display:none;margin-left:6px;font-size:11px;color:var(--ink-3);border:1px solid var(--rule);border-radius:5px;padding:0 5px;font-family:var(--mono)}
.k-act .k-kbd{color:inherit;border-color:currentColor;opacity:.6}
@media (min-width:920px) and (hover:hover){.k-kbd{display:inline}}

/* --- 4. Needs you: one to three items under the headline, one action each ---------------------------------------- */
.k-needs{background:var(--raise);border:1px solid var(--rule);border-radius:16px;padding:4px 16px 6px;margin-bottom:8px}
.k-needs .k-nhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 2px}
.k-needs .k-nhead .k-act{min-height:36px;padding:0 12px 0 14px}
.k-needs ul{list-style:none;margin:0;padding:0}
.k-needs li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:10px 0;border-top:1px solid var(--rule)}
.k-needs li:first-child{border-top:0}
.k-needs .k-ntxt{min-width:0}
.k-needs .k-ntxt strong{display:block;font-weight:620;line-height:1.3;overflow-wrap:anywhere}
.k-needs .k-ntxt small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:2px}
.k-needs .k-more{display:block;padding:10px 0 6px;font-size:13px;font-weight:600;color:var(--ink-2);border-top:1px solid var(--rule)}

/* --- 5. Card: mono id on top, bold title, grey meta row, the action on the right ---------------------------------- */
.k-list{list-style:none;margin:0;padding:0}
.k-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"id id" "ttl ttl" "meta meta" "tags act";gap:3px 12px;padding:14px 0;border-top:1px solid var(--rule);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),background var(--t-fast) var(--ease)}
.k-card>.k-id{grid-area:id}
.k-card>.k-ttl{grid-area:ttl;font-weight:620;line-height:1.3;margin:0;font-size:15.5px;text-wrap:pretty;overflow-wrap:anywhere}
.k-card>.k-ttl a{text-decoration:none}
.k-card>.k-ttl a::after{content:"";position:absolute;inset:0} /* the whole card opens it */
.k-card>.k-meta{grid-area:meta;display:flex;flex-wrap:wrap;gap:3px 10px}
.k-card>.k-tags{grid-area:tags;display:flex;flex-wrap:wrap;gap:5px;align-self:center;margin-top:6px}
.k-card>.k-acts{grid-area:act;display:flex;gap:8px;align-items:center;margin-top:6px;position:relative;z-index:1}
.k-card.leaving{opacity:0;transform:translateX(24px)}
.k-card.sel{background:var(--raise);box-shadow:0 0 0 1.5px var(--accent);border-radius:12px;border-top-color:transparent;padding-inline:12px;margin-inline:-12px}
.k-card.picked{background:var(--accent-soft);box-shadow:0 0 0 1.5px var(--accent);border-radius:12px;border-top-color:transparent;padding-inline:12px;margin-inline:-12px}
.k-card .k-pick{position:relative;z-index:1;width:22px;height:22px;accent-color:var(--ink);margin:0}
.k-picking .k-card{grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"pick id id" "pick ttl ttl" "pick meta meta" "pick tags act"}
.k-picking .k-card>.k-pick{grid-area:pick;align-self:start;margin-top:2px}
.k-picking .k-card>.k-acts{opacity:.35;pointer-events:none}
@media (min-width:720px){
 .k-card{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"id act" "ttl act" "meta act" "tags act";align-items:start}
 .k-card>.k-acts{align-self:center;margin:0}
 .k-picking .k-card{grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"pick id act" "pick ttl act" "pick meta act" "pick tags act"}
}
@media (min-width:920px){.k-card{cursor:pointer;padding:14px 12px;margin:0 -12px;border-radius:12px;border-top-color:transparent;box-shadow:0 -1px 0 var(--rule)}.k-card:hover{background:var(--raise)}}

/* --- 6. Empty state: the run sheet's warm one ---------------------------------------------------------------------- */
.k-empty{padding:48px 0;text-align:left;border-top:1px solid var(--rule)}
.k-empty strong{display:block;font-size:24px;letter-spacing:-.03em;margin-bottom:6px}
.k-empty p{margin:0;color:var(--ink-2);max-width:52ch}

/* --- 7. Side panel on a wide screen, a bottom sheet on a phone; the list keeps its place -------------------------- */
.k-layout{display:grid;gap:28px;margin-top:18px}
.k-panel{position:fixed;left:0;right:0;bottom:0;z-index:40;max-height:88vh;overflow-y:auto;overscroll-behavior:contain;background:var(--raise);color:var(--ink);border:1px solid var(--rule);border-radius:22px 22px 0 0;padding:10px 18px max(18px,env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(0,0,0,.18);transform:translateY(104%);visibility:hidden;transition:transform var(--t) var(--ease),visibility 0s linear var(--t)}
.k-panel.open{transform:none;visibility:visible;transition:transform var(--t) var(--ease)}
.k-panel::before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--rule);margin:0 auto 12px}
.k-scrim{position:fixed;inset:0;z-index:39;background:color-mix(in srgb,#000 38%,transparent);opacity:0;visibility:hidden;transition:opacity var(--t) var(--ease),visibility 0s linear var(--t)}
.k-scrim.open{opacity:1;visibility:visible;transition:opacity var(--t) var(--ease)}
.k-panel .k-phead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.k-panel .k-phead h3{margin:4px 0 6px;font-size:19px;line-height:1.28;letter-spacing:-.015em;overflow-wrap:anywhere;text-wrap:balance}
.k-panel .k-close{min-width:var(--tap);min-height:var(--tap);display:grid;place-items:center;border-radius:12px;background:var(--soft);flex:none}
.k-panel .k-big{font-size:40px;font-weight:750;letter-spacing:-.04em;line-height:1;margin:2px 0 10px}
.k-rail{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;margin:14px 0}
.k-rail dt{color:var(--ink-3)}.k-rail dd{margin:0;overflow-wrap:anywhere}
.k-q{margin:10px 0;padding:11px 13px;background:var(--soft);border-radius:11px;font-size:13.5px;overflow-wrap:anywhere}
.k-q b{display:block;font-size:12px;color:var(--ink-3);font-weight:600;margin-bottom:2px}
@media (min-width:920px){
 .k-layout{grid-template-columns:minmax(0,1fr) 380px;align-items:start}
 .k-panel{position:sticky;top:24px;left:auto;right:auto;bottom:auto;max-height:calc(100vh - 48px);border-radius:18px;padding:22px;box-shadow:none;transform:none;visibility:visible;transition:opacity var(--t-fast) var(--ease)}
 .k-panel::before{display:none}
 .k-panel:not(.open){opacity:0;pointer-events:none}
 .k-scrim{display:none}
}

/* --- 8. Proof timeline: what Claude or Iris did, when, with the evidence; only data the site holds ---------------- */
.k-timeline{list-style:none;margin:12px 0 0;padding:0 0 0 18px;border-left:2px solid var(--rule)}
.k-timeline li{position:relative;padding:0 0 12px;font-size:13px;color:var(--ink-2)}
.k-timeline li::before{content:"";position:absolute;left:-23px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.k-timeline li[data-who=claude]::before{background:var(--accent)}
.k-timeline li[data-who=iris]::before{background:var(--violet)}
.k-timeline li[data-who=dimitri]::before{background:var(--ink)}
.k-timeline li.ok::before{background:var(--ok)}
.k-timeline time{display:block;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.k-timeline b{font-weight:620;color:var(--ink)}
.k-timeline a{color:var(--accent);font-weight:600;text-decoration-thickness:1px;text-underline-offset:2px;overflow-wrap:anywhere}

/* --- 9. Sticky action bar on a phone; the bulk bar ----------------------------------------------------------------- */
.k-bar{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:30;display:flex;gap:8px;align-items:center;padding:8px;background:var(--ink);color:var(--bg);border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.22)}
.k-bar .k-bn{font-weight:650;margin:0 6px;flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-bar button,.k-bar a{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--tap);padding:0 14px;border-radius:10px;font-weight:650;background:color-mix(in srgb,var(--bg) 14%,transparent);color:inherit;text-decoration:none;white-space:nowrap}
.k-bar .pri{background:var(--count);color:var(--count-ink)}
.k-bar .danger{background:var(--danger);color:#fff}
body.k-has-bar .k-shell{padding-bottom:150px}
@media (min-width:920px){.k-bar{left:50%;right:auto;transform:translateX(-50%);max-width:calc(100vw - 32px);padding-left:16px}body.k-has-bar .k-shell{padding-bottom:120px}}

/* --- 10. Toast, banners -------------------------------------------------------------------------------------------- */
.k-toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translate(-50%,160%);background:var(--ink);color:var(--bg);border-radius:14px;padding:6px 6px 6px 16px;min-height:56px;display:flex;align-items:center;gap:12px;font-weight:600;z-index:60;visibility:hidden;transition:transform .36s var(--ease),visibility 0s linear .36s;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:calc(100% - 32px)}
.k-toast.show{transform:translate(-50%,0);visibility:visible;transition:transform .36s var(--ease)}
.k-toast button{min-height:var(--tap);padding:0 14px;border-radius:9px;background:color-mix(in srgb,var(--bg) 14%,transparent);font-weight:700}
body.k-has-bar .k-toast{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 72px)}
.k-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 0;padding:12px 14px;border-radius:12px;font-size:13.5px;font-weight:550}
.k-banner.warn{background:var(--urgent-soft);color:var(--urgent)}
.k-banner.bad{background:var(--danger-soft);color:var(--danger)}
.k-banner.ok{background:var(--ok-soft);color:var(--ok)}
.k-banner p{margin:0;flex:1;min-width:200px}
.k-banner a,.k-banner button{min-height:var(--tap);display:inline-flex;align-items:center;padding:0 14px;border-radius:10px;border:1px solid currentColor;font-weight:650;text-decoration:none}

/* --- 11. Forms the boards keep ------------------------------------------------------------------------------------- */
.k-field{display:block;margin:0 0 12px;font-size:13px;font-weight:600;color:var(--ink-2)}
.k-field input:not([type=checkbox]),.k-field textarea,.k-field select{display:block;width:100%;min-height:var(--tap);margin-top:4px;padding:0 12px;border-radius:10px;border:1px solid var(--rule);background:var(--raise);color:var(--ink);font:inherit;font-size:16px}
.k-field textarea{min-height:5rem;padding:10px 12px;resize:vertical}

/* --- 12. Motion: one curve, short, and none at all when the device asks -------------------------------------------- */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* --- 13. Hooks for kit.js --------------------------------------------------------------------------------------- */
body.k-locked{overflow:hidden}

/* --- 14. Phone targets: at least 44 px tall (design spec, "iPhone first: 44 pt targets"; BK28 screenshots) ------- */
/* Last in the file so it wins over the desktop sizes above. The site links wrap rather than run off the edge, and the
   bulk bar puts its count on its own line so "2 selected" is never cut to "2 select..." */
@media (max-width:559px){
 .k-top .k-name{display:inline-flex;align-items:center;min-height:var(--tap)}
 .k-top .k-sites{flex-wrap:wrap;overflow:visible;row-gap:4px}
 .k-top .k-switch a,.k-crumbs a,.k-needs .k-nhead .k-act{min-height:var(--tap)}
 .k-bar{flex-wrap:wrap}
 .k-bar .k-bn{flex-basis:100%;margin:2px 6px 0}
 .k-bar button,.k-bar a{flex:1 1 auto}
}