/* Funnel Lab — LearnCraft Atelier 2026 tokens (shared with the Content Dashboard) */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Source+Sans+3:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --ink: #1F1B16; --porcelain: #F0EDE6; --paper: #F7F4EC; --slate: #6B6357; --steel: #B8B0A0;
  --rule: #E0D9C8; --rule-strong: #C9C0AC; --cobalt: #449AC2; --cobalt-deep: #2E7FA6; --teal: #B0A96F; --brass: #C8623F;
  --ok: #4A7C59; --ok-bg: #E9F0E9; --warn: #A87B24; --warn-bg: #F6EEDA; --risk: #B5502F; --risk-bg: #F6E4DC; --info-bg: #E4EEF4;
  --font-serif: 'EB Garamond', Georgia, serif; --font-sans: 'Source Sans 3', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15px/1.5 var(--font-sans); }
h1 { font: 400 30px/1.1 var(--font-serif); letter-spacing: -0.01em; margin: 0 0 4px; }
h2 { font: 600 16px/1.3 var(--font-sans); margin: 0 0 14px; }
h3 { font: 600 14px/1.3 var(--font-sans); margin: 18px 0 8px; }
a { color: var(--cobalt-deep); text-decoration: none; } a:hover { text-decoration: underline; }
code { font-family: var(--font-mono); font-size: .85em; background: var(--porcelain); padding: 0 .3em; border-radius: 3px; }
.sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 184px; background: var(--ink); color: var(--porcelain); display: flex; flex-direction: column; padding: 24px 12px; }
.sidebar .brand { font: 400 19px/1.2 var(--font-serif); color: var(--paper); margin-bottom: 4px; }
.sidebar .brand-eyebrow { font: 500 9px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--steel); margin-bottom: 24px; }
.sidebar a { color: var(--steel); padding: 6px 10px; border-radius: 6px; margin-bottom: 2px; font-weight: 500; }
.sidebar a:hover { color: var(--paper); text-decoration: none; }
.sidebar a.on { background: rgba(247,244,236,.12); color: var(--paper); }
.sidebar .spacer { flex: 1; } .sidebar .whoami { font-size: 13px; color: var(--steel); } .sidebar .whoami a { padding: 0; }
main { padding: 32px 48px; max-width: 1340px; } main.with-sidebar { margin-left: 184px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
.page-type { font: 500 10px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--slate); margin-bottom: 4px; }
.card { background: var(--porcelain); border: 1px solid var(--rule); border-radius: 10px; padding: 16px 22px; margin-bottom: 22px; }
.muted { color: var(--slate); } .small { font-size: 13px; } .mono { font-family: var(--font-mono); font-size: 12px; }
.flash { background: var(--warn-bg); border: 1px solid var(--warn); border-radius: 8px; padding: 8px 16px; margin-bottom: 16px; }
.note { background: var(--info-bg); border-radius: 8px; padding: 8px 14px; font-size: 13px; margin-bottom: 14px; }
.warn { background: var(--warn-bg); border-radius: 8px; padding: 8px 14px; font-size: 13px; margin-bottom: 14px; }

/* Tables */
.table-scroll { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.list th { text-align: left; font: 500 10px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--slate); padding: 6px 8px; border-bottom: 1px solid var(--rule-strong); white-space: nowrap; }
table.list td { padding: 7px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.list td.r, table.list th.r { text-align: right; }
table.list tr:hover td { background: rgba(68,154,194,.06); }

/* Forms */
form.inline { display: inline; }
label { display: block; font-size: 13px; color: var(--slate); margin: 8px 0 2px; }
input, select, textarea { font: inherit; padding: 6px 8px; border: 1px solid var(--rule-strong); border-radius: 6px; background: #fff; color: var(--ink); }
input[type=date] { width: 150px; }
button, .btn { font: 500 14px var(--font-sans); padding: 7px 14px; border-radius: 6px; border: 1px solid var(--cobalt-deep); background: var(--cobalt-deep); color: #fff; cursor: pointer; }
button.ghost, .btn.ghost { background: transparent; color: var(--cobalt-deep); }
button.danger { background: var(--risk); border-color: var(--risk); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.filters label { margin: 0; } .filters .f { display: flex; flex-direction: column; }
.login-box { max-width: 360px; margin: 80px auto; } .login-box input { width: 100%; }

/* Chain funnel */
.funnel { display: flex; gap: 6px; align-items: stretch; overflow-x: auto; padding: 4px 0 10px; }
.step { flex: 1 0 104px; background: #fff; border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; min-width: 104px; position: relative; }
.step .lbl { font: 500 10px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--slate); }
.step .n { font: 500 22px/1.2 var(--font-serif); margin: 2px 0; }
.step .rate { font-size: 13px; } .step .ci { font-size: 11px; color: var(--slate); font-family: var(--font-mono); }
.step .bar { height: 4px; background: var(--rule); border-radius: 2px; margin-top: 6px; position: relative; }
.step .bar i { position: absolute; top: 0; bottom: 0; background: var(--cobalt); border-radius: 2px; }
.step.money { background: var(--ok-bg); } .step.money.neg { background: var(--risk-bg); }
.money-strip { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; margin-top: 6px; }
.money-strip b { font-family: var(--font-mono); font-weight: 500; }

/* Ladder */
.ladder { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.phase { background: var(--porcelain); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; }
.phase .ph { font: 500 10px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--slate); }
.phase h2 { margin: 2px 0 10px; }
.test-card { background: #fff; border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; display: block; color: inherit; }
.test-card:hover { text-decoration: none; border-color: var(--cobalt); }
.test-card .code { font-family: var(--font-mono); font-size: 11px; color: var(--slate); }
.test-card .name { font-weight: 600; font-size: 14px; }
.status { display: inline-block; font: 500 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; padding: 3px 7px; border-radius: 10px; }
.status.planned { background: var(--porcelain); color: var(--slate); } .status.running { background: var(--info-bg); color: var(--cobalt-deep); }
.status.decided { background: var(--ok-bg); color: var(--ok); } .status.draw { background: var(--warn-bg); color: var(--warn); } .status.stopped { background: var(--risk-bg); color: var(--risk); }
.progress { height: 6px; background: var(--rule); border-radius: 3px; overflow: hidden; margin: 4px 0; }
.progress i { display: block; height: 100%; background: var(--cobalt); } .progress i.full { background: var(--ok); }
.arm-row { display: flex; justify-content: space-between; font-size: 12px; gap: 8px; }
.verdict { font: 500 11px var(--font-mono); padding: 2px 6px; border-radius: 4px; }
.verdict.better { background: var(--ok-bg); color: var(--ok); } .verdict.worse { background: var(--risk-bg); color: var(--risk); } .verdict.draw { background: var(--warn-bg); color: var(--warn); }
.sealed { background: var(--porcelain); border: 1px dashed var(--rule-strong); border-radius: 8px; padding: 14px 18px; }
.chip { display: inline-block; background: var(--porcelain); border: 1px solid var(--rule); border-radius: 10px; padding: 1px 8px; font-size: 12px; margin: 1px 2px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; font-size: 13px; }
.kv dt { color: var(--slate); } .kv dd { margin: 0; }

/* Combination matrix */
table.matrix td { text-align: right; font-family: var(--font-mono); font-size: 12px; min-width: 86px; }
table.matrix td.none { color: var(--steel); } table.matrix td.thin { color: var(--slate); }
table.matrix td.best { background: var(--ok-bg); } table.matrix td.worst { background: var(--risk-bg); }
table.matrix td small { display: block; font-size: 10px; color: var(--slate); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 1000px) { .grid2 { grid-template-columns: 1fr; } }
.assume { color: var(--warn); font-size: 12px; }

/* Meta integration */
.nav-sep { font: 500 9px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: #8A8270; margin: 16px 10px 6px; }
.badge { display: inline-block; background: var(--brass); color: #fff; border-radius: 9px; font: 600 10px/16px var(--font-sans); padding: 0 6px; margin-left: 4px; }
.demo-banner { background: var(--warn-bg); border: 1px dashed var(--warn); color: var(--warn); border-radius: 8px; padding: 6px 14px; font-size: 13px; margin-bottom: 16px; }
.tree td.l1 { padding-left: 26px; } .tree td.l2 { padding-left: 50px; }
.st { font: 500 10px/1 var(--font-mono); padding: 3px 6px; border-radius: 4px; background: var(--porcelain); color: var(--slate); white-space: nowrap; }
.st.ACTIVE { background: var(--ok-bg); color: var(--ok); } .st.PAUSED { background: var(--porcelain); color: var(--slate); }
.st.WITH_ISSUES, .st.DISAPPROVED { background: var(--risk-bg); color: var(--risk); }
.risk { font: 500 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; padding: 3px 7px; border-radius: 4px; }
.risk.low { background: var(--ok-bg); color: var(--ok); } .risk.medium { background: var(--warn-bg); color: var(--warn); }
.risk.high { background: var(--risk-bg); color: var(--risk); } .risk.blocked { background: var(--ink); color: var(--paper); }
.lvl { font: 500 10px/1 var(--font-mono); padding: 3px 6px; border-radius: 4px; }
.lvl.high { background: var(--risk-bg); color: var(--risk); } .lvl.warn { background: var(--warn-bg); color: var(--warn); } .lvl.info { background: var(--info-bg); color: var(--cobalt-deep); }
.diff { display: grid; grid-template-columns: max-content 1fr max-content 1fr; gap: 4px 12px; font-size: 14px; align-items: baseline; }
.diff .old { color: var(--risk); text-decoration: line-through; font-family: var(--font-mono); font-size: 13px; }
.diff .new { color: var(--ok); font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.answer { white-space: pre-wrap; font-size: 15px; line-height: 1.6; }
.trace { font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; word-break: break-all; background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: 8px 10px; margin: 4px 0; max-height: 220px; overflow: auto; }
details summary { cursor: pointer; color: var(--cobalt-deep); font-size: 13px; }
textarea.q { width: 100%; font-size: 15px; }
.check-ok { color: var(--ok); font-weight: 600; } .check-bad { color: var(--risk); font-weight: 600; }
.formgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 16px; }
.formgrid input, .formgrid select, .formgrid textarea { width: 100%; }
fieldset { border: 1px solid var(--rule); border-radius: 8px; padding: 6px 16px 14px; margin: 0 0 14px; background: #fff; }
legend { font-weight: 600; padding: 0 6px; }
.answer-md { font-size: 15px; line-height: 1.6; max-width: 820px; } .answer-md p { margin: 0 0 10px; } .answer-md ul { margin: 0 0 10px; padding-left: 22px; }
.formgrid input[type=checkbox] { width: auto; } .formgrid label.small { display: inline-flex; gap: 4px; align-items: center; }

.chip.warn { padding: 1px 8px; margin: 1px 2px; border-color: var(--warn); font-size: 12px; }
.lineage { border-left: 2px solid var(--rule-strong); margin-left: 6px; padding-left: 12px; }