/* Tokens, layout shell, typography, and shared primitives (buttons, fields, tables, tags). */

:root{
  /* every color is a token, so dark.css can swap them; ink and shadows as rgb triples so alpha variants follow */
  --ink-rgb:55,53,47; --shadow-rgb:15,15,15;
  --bg:#fff; --side:#f7f7f5; --surface:#fff; --field:rgba(242,241,238,.7);
  --ink:rgb(var(--ink-rgb)); --muted:rgba(var(--ink-rgb),.65); --faint:rgba(var(--ink-rgb),.42);
  --line:rgba(var(--ink-rgb),.09); --soft:#f7f6f3; --hover:rgba(var(--ink-rgb),.06);
  --accent:#2383e2; --accent-soft:rgba(35,131,226,.12);
  --fact:#e03e3e; --fact-soft:#fbe4e4; --fact-line:#f5c4c4;
  --dim:#2383e2;
  --bridge:#9065b0; --bridge-line:#d6c8e6;
  --warn-soft:#fbf3db; --ok:#0f7b6c; --amber:#b7791f;
  --tag-red:#ffe2dd;    --tag-red-ink:#5d1715;
  --tag-blue:#d3e5ef;   --tag-blue-ink:#183347;
  --tag-yellow:#fdecc8; --tag-yellow-ink:#402c1b;
  --tag-purple:#e8deee; --tag-purple-ink:#412454;
  --tag-gray:#e3e2e0;   --tag-gray-ink:#32302c;
  --tag-green:#dbeddb;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius:6px;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.55 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none !important}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:240px 1fr;grid-template-rows:45px 1fr;height:100vh}

aside{grid-row:1/3;background:var(--side);box-shadow:inset -1px 0 0 rgba(var(--ink-rgb),.06);padding:8px 6px;overflow:auto}
.ws{display:flex;align-items:center;gap:8px;padding:8px 10px 14px;font-weight:600}
.ws-icon{width:22px;height:22px;flex:none;border-radius:4px;background:var(--ink);display:grid;place-items:center}   /* the K mark on a rounded tile */
.ws-icon img{width:12px;height:12px;pointer-events:none}
.side-label{font-size:12px;font-weight:500;color:var(--faint);padding:6px 10px 4px}
.step-link{display:flex;align-items:center;gap:9px;width:100%;min-height:30px;text-align:left;border:0;background:none;padding:4px 10px;border-radius:5px;cursor:pointer;color:rgba(var(--ink-rgb),.85)}
.step-link:hover{background:var(--hover)}
.step-link.active{background:rgba(var(--ink-rgb),.08);color:var(--ink);font-weight:500}
.step-link .num{width:18px;height:18px;flex:none;border-radius:4px;display:grid;place-items:center;font-size:11px;font-weight:500;background:rgba(var(--ink-rgb),.08);color:var(--muted)}
.step-link.partial .num{background:var(--accent-soft);color:var(--accent)}
.step-link.done .num{background:var(--tag-green);color:var(--ok)}
.side-foot{padding:14px 10px;font-size:12px;color:var(--faint)}

header{grid-column:2;display:flex;align-items:center;gap:4px;padding:0 14px}
.crumbs{display:flex;align-items:center;gap:6px;min-width:0}
.crumbs span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.crumbs .sep{flex:none}
.crumbs .sep{color:var(--faint)}
#crumbStep{color:var(--muted)}
.spacer{flex:1}
.saved{color:var(--faint);font-size:13px;margin-right:8px}

main{overflow:auto;padding:28px 64px 80px}
.wrap{max-width:1120px;margin:0 auto}
.wrap.wide{max-width:none}
.content{max-width:980px}
.eyebrow{font-size:13px;font-weight:500;color:var(--faint)}
h1{font-size:40px;line-height:1.2;font-weight:700;letter-spacing:-.01em;margin:6px 0 8px}
.lede{font-size:16px;color:var(--muted);margin:0 0 30px;max-width:760px}
h2{font-size:20px;font-weight:600;margin:34px 0 10px}
.content > h2:first-child{margin-top:0}
.nav{display:flex;justify-content:space-between;margin-top:28px}

/* ---------- buttons ---------- */
.btn{border:1px solid rgba(var(--ink-rgb),.16);border-radius:4px;padding:4px 10px;background:var(--surface);color:var(--ink);line-height:1.4;cursor:pointer}
.btn:hover{background:var(--hover)}
.btn.small{padding:2px 8px;font-size:13px}
.btn.ghost{border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:#0b6bcb}
.btn.primary[disabled]{background:rgba(var(--ink-rgb),.12);border-color:transparent;color:var(--faint);cursor:not-allowed}
.x{border:0;background:none;color:var(--faint);cursor:pointer;font-size:16px;line-height:1;padding:4px 8px;border-radius:4px}
.x:hover{background:rgba(var(--ink-rgb),.08);color:var(--ink)}
.x.trash{display:inline-grid;place-items:center;padding:5px;opacity:.55}
.x.trash:hover{opacity:1;color:var(--fact);background:var(--tag-red)}
tr:hover .x.trash,.sys-hd:hover .x.trash,.x.trash:focus-visible{opacity:1}
.linkbtn{border:0;background:none;padding:0;color:var(--muted);font-size:11px;cursor:pointer}
.linkbtn:hover{color:var(--ink)}
.addbtn{border:0;background:transparent;color:var(--faint);font-size:13px;padding:2px 6px;border-radius:4px;cursor:pointer;margin-top:4px}
.addbtn:hover{background:var(--hover);color:var(--ink)}
.below{display:flex;gap:8px;align-items:center;margin-top:6px}
.below .btn.small{border-color:transparent;color:var(--faint);background:transparent;padding:4px 8px}
.below .btn.small:hover{background:var(--hover);color:var(--ink)}

/* ---------- form fields ---------- */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:5px}
.field input,.field textarea{width:100%;border:0;border-radius:4px;background:var(--field);padding:8px 10px;font-size:15px}
.field textarea{min-height:70px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;background:var(--surface);box-shadow:0 0 0 2px var(--accent-soft),0 0 0 1px var(--accent)}

/* ---------- database tables ---------- */
.sheet-wrap{overflow:auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sheet{width:100%;border-collapse:separate;border-spacing:0}
.sheet th{text-align:left;font-weight:500;font-size:13px;color:var(--faint);padding:7px 10px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);white-space:nowrap}
.sheet td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:0;vertical-align:middle}
.sheet th:last-child,.sheet td:last-child{border-right:0}
.sheet tr:last-child td{border-bottom:0}
.sheet tr:hover td{background:rgba(var(--ink-rgb),.025)}
.sheet td.ro{padding:6px 10px}
.sheet td.rn{width:38px;text-align:center;color:var(--faint);font-size:12px}
.sheet td.act{width:36px;text-align:center}
.sheet input[type=text]{width:100%;min-width:80px;border:0;background:transparent;padding:7px 10px}
.sheet input[type=text]:focus{outline:none;background:var(--surface);box-shadow:inset 0 0 0 2px var(--accent-soft)}

/* ---------- tags (Notion-style select values) ---------- */
.tag{display:inline-flex;align-items:center;max-width:100%;border:0;border-radius:3px;padding:1px 8px;font-size:13px;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-measure,.t-event{background:var(--tag-red);color:var(--tag-red-ink)}
.k-attribute,.t-entity{background:var(--tag-blue);color:var(--tag-blue-ink)}
.k-boolean{background:var(--tag-yellow);color:var(--tag-yellow-ink)}
.k-date,.t-bridge{background:var(--tag-purple);color:var(--tag-purple-ink)}
.k-unknown{background:var(--tag-gray);color:var(--tag-gray-ink)}
.tag.empty{background:transparent;color:var(--faint);padding-left:2px}
.pill{margin:5px 8px;font-family:inherit;cursor:pointer}
.pill:hover{filter:brightness(.96)}
.pill.empty:hover{background:var(--hover);filter:none}
.pill:focus{outline:none;box-shadow:0 0 0 2px var(--accent-soft),0 0 0 1px var(--accent)}

/* column-type badges: #, $, %, Aa, T/F, Dt, ? */
.kicon{display:inline-grid;place-items:center;flex:none;width:34px;height:19px;border-radius:3px;font:500 10.5px var(--mono)}
.kicon.m{background:var(--tag-red);color:var(--tag-red-ink)}
.kicon.a{background:var(--tag-blue);color:var(--tag-blue-ink)}
.kicon.b{background:var(--tag-yellow);color:var(--tag-yellow-ink)}
.kicon.d{background:var(--tag-purple);color:var(--tag-purple-ink)}
.kicon.u,.kicon.k{background:var(--tag-gray);color:var(--tag-gray-ink)}

/* ---------- helpers ---------- */
.muted{color:var(--muted)}
.hint{font-size:13px;color:var(--faint)}
.mono{font-family:var(--mono);font-size:12.5px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.empty-note{padding:16px 0;color:var(--muted)}

@media (max-width:720px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr}
  aside{grid-row:auto;padding:8px}
  .side-foot{display:none}
  header{grid-column:1;padding:10px 16px;gap:8px}   /* one row: the breadcrumbs shorten instead */
  main{padding:20px 16px 40px}
  .row2{grid-template-columns:1fr}
}

/* ---------- client name + tool switcher (sidebar) ---------- */
.ws-name{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-weight:600;color:var(--ink);padding:2px 4px;margin-left:-4px;border-radius:4px}
.ws-name:hover{background:var(--hover)}
.ws-name:focus{outline:none;background:var(--surface);box-shadow:0 0 0 2px var(--accent-soft)}
.ws-name::placeholder{color:var(--faint)}
/* signed in, the name is a link to Home (admins rename clients on the Clients page) */
.ws-link{display:none;text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.cloud .ws-link{display:block}
body.cloud #clientName,body.cloud .side-foot{display:none}
.apps{display:grid;gap:2px;margin:0 0 14px}
/* tool = a phase of the engagement: bigger, with an icon tile */
.app-link{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;border-radius:6px;padding:6px 8px;font:inherit;font-size:14.5px;font-weight:500;color:var(--muted);cursor:pointer;text-align:left}
.app-link:hover{background:var(--hover);color:var(--ink)}
.app-ic{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:6px;background:rgba(var(--ink-rgb),.08);color:var(--muted);font-size:13px}
.tool.on .app-link{color:var(--ink);font-weight:600}
.tool.on .app-ic{background:var(--accent);color:#fff}
.app-ic.ic-workflow{font-size:19px;line-height:1;padding-bottom:3px;box-sizing:border-box}   /* the ⟳ glyph draws much smaller than the other icons */
.app-prog{margin-left:auto;font-size:11.5px;font-weight:400;color:var(--faint);padding:1px 6px;border-radius:10px}
.app-link.done .app-prog{color:var(--ok);background:var(--tag-green)}
.app-prog{margin-left:auto}
.app-chev{width:12px;color:var(--faint);font-size:15px;line-height:1;transition:transform .15s;opacity:0}
.app-link:hover .app-chev,.tool.on .app-chev{opacity:1}
.app-chev.open{transform:rotate(90deg)}
/* its steps: nested under the active tool, smaller, on a guide line */
.app-steps{margin:2px 0 8px 19px;padding-left:10px;border-left:1.5px solid rgba(var(--ink-rgb),.12)}
.app-steps .step-link{min-height:27px;font-size:13px;padding:3px 8px}
.app-steps .step-link .num{width:16px;height:16px;font-size:10px}
.tool.on{background:rgba(255,255,255,.55);border-radius:8px;padding-bottom:2px;box-shadow:0 0 0 1px rgba(var(--ink-rgb),.06)}

/* top bar: buttons never wrap; the breadcrumb gives way instead */
header .btn,header .nbtn{white-space:nowrap;flex:none}
header .crumbs{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* collapsible sidebar */
.side-btn{flex:none;display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:5px;background:transparent;color:var(--faint);cursor:pointer;opacity:0;transition:opacity .12s}
.side-btn:hover{background:var(--hover);color:var(--ink)}
.sidebar:hover .side-btn,.side-btn:focus-visible{opacity:1}
.side-open{display:none;opacity:1;margin:0 6px 0 -6px}
body.side-collapsed .app{grid-template-columns:minmax(0,1fr)}
body.side-collapsed .sidebar{display:none}
body.side-collapsed header,body.side-collapsed main{grid-column:1}
@media (max-width:720px){ body.side-collapsed .app{grid-template-rows:auto 1fr} }
body.side-collapsed .side-open{display:grid}

/* Modeling: which deliverable the steps are for (deliverable.js) */
.deliverable-switch{display:flex;align-items:center;gap:2px;margin:2px 0 2px 19px;padding-left:10px;border-left:1.5px solid rgba(var(--ink-rgb),.12)}
.deliverable-pick{flex:1;min-width:0;display:flex;align-items:center;gap:6px;border:0;background:transparent;border-radius:5px;padding:4px 8px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left}
.deliverable-pick span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deliverable-chev{font-size:10px;color:var(--faint)}
.deliverable-new{flex:none;width:22px;height:22px;border:0;background:transparent;border-radius:5px;color:var(--faint);font-size:15px;line-height:1;cursor:pointer}
.deliverable-pick:hover,.deliverable-new:hover{background:var(--hover);color:var(--ink)}
.deliverable-switch + .app-steps{margin-top:0}
.page-sub{margin:0 0 12px;font-size:18px;font-weight:500;color:var(--faint)}

/* locked steps and tools (locks.js): the lock in place of the number, the label faded */
.step-link.locked,.app-link.locked .app-name,.home-step.locked{color:var(--faint)}
.step-link.locked .num svg,.home-step.locked .num svg,.app-prog svg{width:11px;height:11px;display:block}
.lock-page{max-width:440px;margin:8vh auto 0;text-align:center}
.lock-ic{width:44px;height:44px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:rgba(var(--ink-rgb),.06);color:var(--muted)}
.lock-ic svg{width:20px;height:20px}
.lock-page h2{font-size:18px;margin:0 0 6px}
.lock-page .hint{margin:0 0 18px}