/* Holdfast app styles. Tokens and components are copied from web/index.html so the app and the site match;
   change them there first, then here. App-only rules are at the end. */
:root{
  --bg:#EEF1F4; --panel:#FFFFFF; --ink:#0E1621; --muted:#566170; --line:#D6DCE3; --steel:#22405E; --brass:#846215; --soft:#E3E8ED;
  --go:#2C754D; --amber:#8D5E15;
  --board:#0D1015; --flap:#181C23; --flap-line:#05070A; --flap-ink:#F1E9D2; --flap-dim:#8B8574; --flap-brass:#E0B04A; --flap-go:#7BD39B; --flap-amber:#F0B556;
  --f-display:"Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --f-body:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0A0E14;--panel:#111821;--ink:#E7EBF0;--muted:#98A3B0;--line:#222B37;--steel:#8FB3D6;--brass:#D9AE4F;--soft:#18212C;--go:#69C690;--amber:#E7AE52;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0A0E14;--panel:#111821;--ink:#E7EBF0;--muted:#98A3B0;--line:#222B37;--steel:#8FB3D6;--brass:#D9AE4F;--soft:#18212C;--go:#69C690;--amber:#E7AE52;color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:17px/1.6 var(--f-body);padding-inline:16px}
.wrap{max-width:1200px;margin:0 auto}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;text-transform:uppercase;letter-spacing:.005em}
h2{font-size:clamp(38px,5.6vw,68px);font-weight:900;line-height:.92}
h3{font-size:28px;font-weight:800;line-height:1}
p{margin:0}
.kicker{font:500 12px/1.2 var(--f-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--brass)}
.lede{color:var(--muted);max-width:60ch;font-size:19px;line-height:1.55}
section{padding-block:96px;display:grid;gap:40px}
.rule{border-top:1px solid var(--line)}
.head{display:grid;gap:16px;max-width:820px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;border-radius:4px;padding:14px 22px;font:600 15px var(--f-body);letter-spacing:.01em;cursor:pointer;text-decoration:none;transition:transform .15s ease, background .15s ease}
.btn.primary{background:var(--ink);color:var(--bg)}
.btn.primary:hover{transform:translateY(-1px)}
.btn.line{border-color:var(--line);color:var(--ink);background:transparent}
.btn.brass{background:var(--flap-brass);color:#0D1015}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* nav */
nav.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;margin-inline:-16px;padding:14px 16px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav.top .wrap{display:flex;align-items:center;gap:28px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;font:900 26px/1 var(--f-display);letter-spacing:.08em}
.mark svg{width:22px;height:26px}
nav.top .links{display:flex;gap:24px;margin-left:auto;font-size:14px}
nav.top .links a{text-decoration:none;color:var(--muted)}
nav.top .links a:hover{color:var(--ink)}
@media (max-width:820px){nav.top .links{display:none}nav.top .wrap .btn{margin-left:auto}}

/* stat strip */
.strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip div{padding:22px 20px;display:grid;gap:4px;border-right:1px solid var(--line)}
.strip div:last-child{border-right:0}
.strip b{font:900 44px/1 var(--f-display)}
.strip span{font-size:14px;color:var(--muted)}
@media (max-width:760px){.strip{grid-template-columns:repeat(2,1fr)}.strip div:nth-child(2){border-right:0}.strip div:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* open tenders */
.openlist{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px;border-top:2px solid var(--ink)}
.ot{display:grid;grid-template-columns:86px 1fr auto;gap:4px 16px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start;text-decoration:none;min-width:0}
.ot:hover .ob{color:var(--brass)}
.ot .dl{display:grid;gap:2px}
.ot .dl b{font:900 30px/1 var(--f-display)}
.ot .dl span{font:11px var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.ot .dl.hot b{color:var(--brass)}
.ot .ob{font-weight:600;min-width:0}
.ot .tt{grid-column:2;font-size:14px;color:var(--muted);min-width:0;overflow-wrap:anywhere}
.ot .ov{font:600 14px var(--f-mono);white-space:nowrap;grid-row:1;grid-column:3}
.ot .nc{grid-column:3;font:11px var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--brass);text-align:right}
@media (max-width:860px){.openlist{grid-template-columns:1fr}}

/* founder + trial */
form{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:28px;display:grid;gap:16px;min-width:0}
form h3{font-size:34px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:grid;gap:6px;font:500 12px var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
input,select{font:16px var(--f-body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:12px;width:100%;min-width:0;text-transform:none;letter-spacing:0}
.msg{font-size:15px;padding:12px 14px;border-radius:6px;background:color-mix(in srgb,var(--amber) 15%,transparent)}
.msg.ok{background:color-mix(in srgb,var(--go) 15%,transparent)}
.fine{font-size:13px;color:var(--muted)}

footer.site{border-top:2px solid var(--ink);padding-block:28px 48px;display:grid;grid-template-columns:auto 1fr;gap:24px;font-size:13px;color:var(--muted)}
footer.site .mark{font-size:22px;color:var(--ink)}
@media (max-width:700px){footer.site{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.btn{transition:none}}
@media (max-width:900px){.fields{grid-template-columns:1fr}}

/* ---- app only */
main.app{padding-block:48px 72px;display:grid;gap:56px}
main.app section{padding-block:0;gap:24px}
.narrow{max-width:560px;margin-inline:auto;width:100%}
.head h1{font-size:clamp(44px,7vw,84px);font-weight:900;line-height:.88}
.head h1 em{font-style:normal;color:var(--brass)}
form.plain{background:transparent;border:0;padding:0}
nav.top form{background:transparent;border:0;padding:0;display:inline}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--muted);cursor:pointer;text-decoration:none}
.linkbtn:hover{color:var(--ink)}
.banner{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--line);border-left:4px solid var(--brass);border-radius:6px;background:var(--panel);font-size:15px}
.banner b{font-family:var(--f-mono);font-weight:600}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--muted)}
.chip{display:inline-block;padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font:500 12px var(--f-mono);letter-spacing:.04em}
.chip.go{border-color:color-mix(in srgb,var(--go) 50%,var(--line));color:var(--go)}
.chip.amber{border-color:color-mix(in srgb,var(--amber) 50%,var(--line));color:var(--amber)}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.checks label{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:var(--bg);font:500 14px var(--f-body);text-transform:none;letter-spacing:0;color:var(--ink);cursor:pointer}
.checks label:has(input:checked){border-color:var(--brass);background:color-mix(in srgb,var(--brass) 10%,var(--bg))}
.checks input{width:auto;margin:0;accent-color:var(--brass);flex:none}
fieldset{border:0;padding:0;margin:0;display:grid;gap:10px;min-width:0}
legend{font:500 12px var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px;padding:0}
.hint{font-size:14px;color:var(--muted)}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.empty{padding:28px;border:1px dashed var(--line);border-radius:8px;color:var(--muted)}
.tablewrap{overflow-x:auto;border-top:2px solid var(--ink)}
table.pipe{width:100%;border-collapse:collapse;min-width:860px;font-size:15px}
table.pipe th{font:500 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
table.pipe td{padding:14px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.pipe td.num{font:600 14px var(--f-mono);white-space:nowrap}
table.pipe .when b{display:block;font:900 22px/1 var(--f-display);text-transform:uppercase}
table.pipe .when span{font:11px var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
table.pipe .who b{display:block;font-weight:600}
table.pipe .who a{text-decoration:none}
table.pipe .who a:hover b{color:var(--brass)}
table.pipe .who span{display:block;font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.na{color:var(--muted);font-style:italic;font-family:var(--f-body);font-weight:400}
.est{font:500 10px var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--amber);display:block}
.notes{font-size:13px;color:var(--muted);display:grid;gap:6px;max-width:90ch}

body{margin:0}
@media (max-width:820px){nav.top .links{display:flex;gap:14px;font-size:13px}}
nav.top .links a,.linkbtn{white-space:nowrap}
@media (max-width:640px){
  .mark{font-size:22px}
  .ot{grid-template-columns:72px 1fr}
  .ot .ov{grid-row:auto;grid-column:2}
  .ot .nc{grid-column:2;text-align:left}
  .tablewrap{overflow-x:visible}
  table.pipe{min-width:0}
  table.pipe thead{display:none}
  table.pipe tr{display:grid;grid-template-columns:72px 1fr;gap:6px 14px;padding:16px 0;border-bottom:1px solid var(--line)}
  table.pipe td{border:0;padding:0;grid-column:2}
  table.pipe td.when{grid-column:1;grid-row:1 / span 5}
  table.pipe td[data-label]::before{content:attr(data-label);display:inline-block;min-width:64px;margin-right:8px;font:500 11px var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
  table.pipe .est{display:inline;margin-left:6px}
  /* owner pages (/admin): tables keep their headers and scroll sideways inside their frame on a phone (build queue
     item 77); the stacked cards above are for the customer pipeline, whose cells carry their own labels */
  main.owner .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  main.owner table.pipe{min-width:560px}
  main.owner table.pipe thead{display:table-header-group}
  main.owner table.pipe tr{display:table-row;padding:0;border-bottom:0}
  main.owner table.pipe td{display:table-cell;padding:12px 10px;border-bottom:1px solid var(--line)}
  main.owner li{overflow-wrap:anywhere}
  main.owner td{overflow-wrap:break-word}
}
.filterbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:14px;align-items:end;background:var(--panel)}
.filterbar .actions{grid-column:1 / -1}
.filterbar label.tick{flex-direction:row;display:flex;align-items:center;gap:8px;padding-bottom:12px;white-space:nowrap}
.filterbar label.tick input{width:auto;accent-color:var(--brass)}
.count{font-size:15px;color:var(--muted)}
.count b{font:600 15px var(--f-mono);color:var(--ink)}
@media (max-width:900px){.filterbar{grid-template-columns:1fr 1fr}.filterbar label.tick{padding-bottom:0}}
@media (max-width:520px){.filterbar{grid-template-columns:1fr}}
@media (max-width:520px){nav.top .mark .word{display:none}nav.top .wrap{gap:12px}nav.top .links{gap:12px;margin-left:auto}}
.review-item{display:grid;gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}
.review-item .who b{display:block;font-weight:600}
.review-item .who span{display:block;font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.review-item .who a{text-decoration:none}
.review-form{display:grid;gap:10px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:700px){.pair{grid-template-columns:1fr}}
a.chip{text-decoration:none}

/* billing: the site's plan cards, four across */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.plans.plans4{grid-template-columns:repeat(4,1fr)}
.plan{padding:26px 22px;display:grid;gap:14px;align-content:start;border-right:1px solid var(--line);min-width:0}
.plan:last-child{border-right:0}
.plan.best{background:var(--ink);color:var(--bg)}
.plan.best li{color:color-mix(in srgb,var(--bg) 72%,var(--ink))}
.plan .tag{font:500 12px var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--brass)}
.plan.best .tag{color:var(--flap-brass)}
.plan .name{font:900 40px/.9 var(--f-display);text-transform:uppercase}
.plan .price{font:700 30px var(--f-mono)}
.plan .price small{font:400 14px var(--f-body);opacity:.7}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:var(--muted);font-size:15px}
.plan li::before{content:"— ";color:var(--brass)}
.plan.best .btn{background:var(--flap-brass);color:#0D1015}
.plan .btn[disabled]{opacity:.45;cursor:not-allowed}
@media (max-width:1000px){.plans.plans4{grid-template-columns:1fr 1fr}.plan{border-bottom:1px solid var(--line)}}
@media (max-width:600px){.plans,.plans.plans4{grid-template-columns:1fr}.plan{border-right:0}}
.paybtns{display:grid;gap:8px}
.pricenote{margin:18px 0 0;text-align:center;font-weight:600;font-size:17px}
.plan.best .btn.line{background:transparent;color:var(--bg);border-color:color-mix(in srgb,var(--bg) 40%,transparent)}
.plan.best .hint{color:color-mix(in srgb,var(--bg) 72%,var(--ink))}
.promise{font-size:16px;padding:14px 16px;border:1px solid var(--line);border-left:4px solid var(--go);border-radius:6px;background:var(--panel)}
/* Renewal Defence */
.contract{display:grid;gap:16px;padding:22px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.contract header{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.contract .cname{font-size:clamp(26px,3.2vw,38px)}
.cfacts{display:flex;gap:18px;flex-wrap:wrap;font-size:15px;color:var(--muted);align-items:flex-end}
.cfacts b{color:var(--ink);font-family:var(--f-mono)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.steps li{display:grid;gap:6px;padding:12px;border-radius:8px;border:1px solid var(--line);font-size:14px;color:var(--muted)}
.steps .when{font:600 11px var(--f-mono);text-transform:uppercase;letter-spacing:.06em}
.steps li.done{opacity:.6}
.steps li.due{border-color:var(--brass);background:color-mix(in srgb,var(--brass) 10%,var(--panel));color:var(--ink)}
.steps li.due .when{color:var(--brass)}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.small-h{font-size:20px;margin-bottom:8px}
.rivals{margin:0;padding-left:18px;display:grid;gap:6px;font-size:15px}
.review{display:grid;gap:10px}
.suggest{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--line)}
form.add{display:grid;gap:14px}
@media (max-width:800px){.steps{grid-template-columns:1fr 1fr}.cgrid{grid-template-columns:1fr}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}
/* price check */
.findings{display:grid;gap:8px}
.finding{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:12px 14px;border-radius:6px;border:1px solid var(--line);border-left-width:4px;background:var(--panel)}
.finding b{font:600 12px var(--f-mono);text-transform:uppercase;letter-spacing:.06em}
.finding.stop{border-left-color:var(--stop)}.finding.stop b{color:var(--stop)}
.finding.warn{border-left-color:var(--amber)}.finding.warn b{color:var(--amber)}
.finding.ok{border-left-color:var(--go)}.finding.ok b{color:var(--go)}
.range{display:grid;gap:10px}
.bar{position:relative;height:28px;border-radius:14px;background:var(--soft);margin:18px 6px 0}
.bar i{position:absolute;top:0;height:100%}
.bar .mid{background:color-mix(in srgb,var(--steel) 35%,transparent);border-radius:14px}
.bar .med{width:3px;background:var(--steel);margin-left:-1px}
.bar .you{width:4px;background:var(--brass);margin-left:-2px;top:-8px;height:44px;border-radius:2px}
.bar .you span{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font:600 11px var(--f-mono);color:var(--brass);text-transform:uppercase}
.scale{display:flex;justify-content:space-between;gap:10px;font:12px var(--f-mono);color:var(--muted);flex-wrap:wrap}
@media (max-width:560px){.finding{grid-template-columns:1fr}}

:root{--stop:#B33A2B}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--stop:#EC7B6B}}
:root[data-theme="dark"]{--stop:#EC7B6B}
@media (max-width:820px){nav.top .links{overflow-x:auto;max-width:calc(100vw - 80px);scrollbar-width:none}}
.terms{display:grid;gap:10px;padding-top:18px;border-top:1px solid var(--line)}
.terms h2{font-size:clamp(26px,3vw,34px)}
.terms ul{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--muted)}
/* Explain This Tender and bid drafts */
.explain{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px}
.explain>div{min-width:0}
.explain ul,.explain ol{margin:0;padding-left:18px;display:grid;gap:6px;font-size:15px}
.answer{display:grid;gap:8px;padding:16px 0;border-bottom:1px solid var(--line)}
.answer-text{white-space:pre-wrap;font-size:15px;line-height:1.6}
textarea{font:15px/1.5 var(--f-body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:12px;width:100%;min-width:0;text-transform:none;letter-spacing:0;resize:vertical}
@media (max-width:800px){.explain{grid-template-columns:1fr}}
/* the 100-trade picker */
.tradepick{display:grid;gap:10px}
.tradesearch{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.tradesearch input{flex:1 1 260px}
.family{border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:0 14px}
.family[open]{padding-bottom:14px}
.family summary{cursor:pointer;padding:12px 0;font:600 15px var(--f-body);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.family .checks{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.tradepick [hidden]{display:none!important}
/* member extras */
.extras-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.extras-list .extra-item{display:grid;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.extras-list .extra-item span:not(.chip){color:var(--muted);font-size:14px}
.extras-list.compact{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.extras-list.compact .extra-item{padding:10px 12px}
/* 0-10 score */
.scorepick{display:grid;grid-template-columns:repeat(11,1fr);gap:6px;margin:8px 0 18px}
.scorepick label{display:block;cursor:pointer}
.scorepick input{position:absolute;opacity:0;width:1px;height:1px}
.scorepick span{display:block;text-align:center;padding:12px 0;border:1px solid var(--line);border-radius:4px;background:var(--panel);font:700 16px var(--f-mono)}
.scorepick input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.scorepick input:focus-visible+span{outline:2px solid var(--brass);outline-offset:2px}
@media (max-width:520px){.scorepick{grid-template-columns:repeat(6,1fr)}}
.flagged{border:2px solid var(--amber);border-radius:8px;padding:16px 18px;margin:0 0 20px;display:grid;gap:12px;background:color-mix(in srgb,var(--amber) 6%,var(--bg))}
.flagged h3{margin:0}
.strip.strip5{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
/* tender calendar */
.calrow{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;margin:8px 0 24px}
.calcell{display:grid;gap:2px;text-align:center;padding:10px 4px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.calcell span{font:500 11px var(--f-mono);color:var(--muted);text-transform:uppercase}
.calcell b{font:700 18px var(--f-mono)}
.calcell.on{border-color:var(--brass);background:color-mix(in srgb,var(--brass) 10%,var(--panel))}
table.cal td.on{background:color-mix(in srgb,var(--brass) 16%,transparent);font-weight:700}
@media (max-width:700px){.calrow{grid-template-columns:repeat(4,1fr)}}

.chip.warn{color:var(--amber);border-color:var(--amber)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:6px;font-weight:600}.skip:focus{left:16px}