/* OldCamp Pricing: only what the shared kit (kit/oldcamp.css) does not cover. Kit tokens, header,
   KPIs, findings, timeline and bar lists come from the kit unchanged. Pricing accent: teal. */
:root{
  --accent:#2fc0c0; --accent-soft:rgba(47,192,192,.12);
  --hover:#242423; --text-faint:#5b5a55;
  --warn:#e8a33d; --info:#9cc9f3; --bad-text:#f06a7d;
  --wf-terms:#77766f; --wf-promo:#e8a33d; --wf-contract:#1d8a8a;
}
button,input,select{font:inherit}
a{color:var(--accent)}
.mono{font-family:var(--mono);font-size:12px}

/* header: the hub header plus role switch and demo controls */
.dh .wrap{flex-wrap:wrap;height:auto;min-height:62px;padding-block:8px;gap:8px 14px}
.dh .hr{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.dh .hr .back{margin-left:4px}
.role{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
.role select{font-family:var(--display);text-transform:none;letter-spacing:0;font-size:13.5px;padding:6px 8px;border-radius:6px;border:1px solid var(--hairline);background:var(--surface-1);color:var(--text-primary)}
.tabs button{background:none;border:0;color:var(--text-muted);padding:11px 0;white-space:nowrap;cursor:pointer;font-size:14px}
.tabs button:hover{color:var(--text-primary)}
.tabs button[aria-current="page"]{color:var(--text-primary);box-shadow:inset 0 -2px 0 var(--accent)}
.body{padding-bottom:140px}
.view-in{animation:vin .3s cubic-bezier(.2,.7,.2,1)}

/* buttons */
.btn{font-size:13px;padding:7px 13px;border-radius:6px;border:1px solid var(--hairline);background:transparent;color:var(--text-secondary);cursor:pointer;white-space:nowrap}
.btn:hover:not(:disabled){color:var(--text-primary);border-color:var(--text-muted)}
.btn:disabled{color:var(--text-faint);border-color:var(--surface-2);cursor:not-allowed}
.btnp{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.btnp:hover:not(:disabled){background:var(--brand-bright);border-color:var(--brand-bright);color:#fff}
.btnp:disabled{background:var(--surface-2);border-color:var(--surface-2);color:var(--text-faint)}
.btna{border-color:var(--accent);color:var(--accent)}
.sep{width:1px;height:26px;background:var(--hairline);margin:0 4px}
.lnk{background:none;border:0;padding:0;color:var(--accent);cursor:pointer;font-family:var(--mono);font-size:12px}
.x{background:none;border:0;color:var(--text-muted);cursor:pointer;font-size:16px;line-height:1;padding:2px 6px}
.x:hover{color:var(--bad-text)}

/* page head and cards */
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:20px}
.crumb{font-size:13px;margin-bottom:10px;color:var(--text-muted)}
.crumb button{background:none;border:0;padding:0;color:var(--accent);cursor:pointer;font-size:13px}
.card.flat{padding:0}
.ch{padding:12px 14px;border-bottom:1px solid var(--hairline);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.card .ch h2{margin:0;gap:8px}
.pad{padding:14px}
.scroll{overflow-x:auto}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* tables */
.t{border-collapse:collapse;width:100%;font-size:13px}
.t th{text-align:left;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);padding:10px 10px 8px;border-bottom:1px solid var(--hairline);white-space:nowrap;vertical-align:bottom}
.t td{padding:7px 10px;border-bottom:1px solid var(--surface-2);white-space:nowrap;color:var(--text-secondary)}
.t tbody tr:hover td{background:var(--hover)}
.t .num{text-align:right}
.t tr.err td{background:rgba(208,52,74,.09)}
.t tr.hl td{background:var(--accent-soft)}
.t td.strong,.t .strong{color:var(--text-primary);font-weight:600}
.cell{width:62px;padding:4px 6px;border:1px solid var(--hairline);border-radius:4px;text-align:right;background:var(--surface-2);color:var(--text-primary);font-family:var(--mono);font-size:12px}
.cell:disabled{background:transparent;border-color:transparent;color:var(--text-secondary)}

/* status pills and messages */
.pill{display:inline-block;padding:2px 9px;border-radius:4px;font-size:12px;font-weight:500;white-space:nowrap;font-stretch:100%;text-transform:none;letter-spacing:0}
.s-draft{background:var(--surface-2);color:var(--text-secondary)}
.s-planned{background:rgba(76,155,232,.18);color:var(--info)}
.s-req{background:rgba(232,163,61,.18);color:#f0c27d}
.s-appr{background:rgba(92,191,138,.18);color:#94dbb3}
.s-sent{background:rgba(47,192,192,.18);color:#8fe0e0}
.s-loaded{background:var(--text-secondary);color:#161616}
.s-rej{background:rgba(208,52,74,.2);color:#f39aa6}
.ok{color:var(--good)} .warn{color:var(--warn)} .bad{color:var(--bad-text)}
.banner{border-radius:8px;padding:10px 14px;font-size:13.5px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.b-bad{background:rgba(208,52,74,.12);border:1px solid rgba(208,52,74,.45);color:#f39aa6}
.b-warn{background:rgba(232,163,61,.10);border:1px solid rgba(232,163,61,.4);color:#f0c27d}
.b-ok{background:rgba(92,191,138,.10);border:1px solid rgba(92,191,138,.4);color:#94dbb3}
.b-info{background:var(--accent-soft);border:1px solid rgba(47,192,192,.45);color:#bdeeee}

/* forms, workflow, history */
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.fld{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--text-muted);min-width:0}
.fld input,.fld select{font-family:var(--display);letter-spacing:0;font-size:13.5px;padding:7px 10px;border:1px solid var(--hairline);border-radius:6px;background:var(--surface-1);color:var(--text-primary);min-width:0}
.fld input:disabled,.fld select:disabled{background:transparent;color:var(--text-secondary)}
.fld b{font-family:var(--display);font-size:15px;font-weight:600;color:var(--text-primary);letter-spacing:0}
.steps{list-style:none;display:flex;flex-wrap:wrap;gap:6px 4px;margin:0;padding:0;font-family:var(--mono);font-size:11px;color:var(--text-faint)}
.steps li.on{color:var(--accent)} .steps li.done{color:var(--text-secondary)}
.grid-side{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.vstack{display:grid;gap:14px;min-width:0}
.hist{list-style:none;margin:0;padding:0;font-size:13px}
.hist li{padding:8px 14px;border-bottom:1px solid var(--surface-2);color:var(--text-secondary)}
.hist li b{color:var(--text-primary);font-weight:600}
.hist li span{display:block;font-family:var(--mono);font-size:11px;color:var(--text-muted)}
.kv{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:13px;margin:0}
.kv dt{color:var(--text-muted)} .kv dd{margin:0;text-align:right;font-family:var(--mono);font-size:12.5px;color:var(--text-primary)}
.big{font-size:40px;font-weight:800;font-stretch:76%;line-height:1}

/* monitor: kit timeline, KPIs and findings; the waterfall is Pricing's own */
.mfilter{margin-top:14px;max-width:260px}
.wf{display:grid;grid-template-columns:repeat(8,minmax(56px,1fr));gap:10px;min-width:560px}
.wf .col{position:relative;height:230px;border-bottom:1px solid var(--text-faint)}
.wf .b{position:absolute;left:14%;right:14%;border-radius:2px;transition:bottom .5s cubic-bezier(.2,.7,.2,1),height .5s cubic-bezier(.2,.7,.2,1),background-color .3s}
.wf .lab{position:absolute;left:0;right:0;text-align:center;font-family:var(--mono);font-size:11.5px;color:var(--text-primary);transition:bottom .5s cubic-bezier(.2,.7,.2,1)}
.wf .nm{font-size:11.5px;color:var(--text-muted);text-align:center;line-height:1.3;padding-top:6px}

/* assortment drawer, toasts, demo guide */
.drawer{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.55);display:flex;justify-content:flex-end}
.drawer .pane{width:min(520px,100%);height:100%;background:var(--bg-deep);border-left:1px solid var(--hairline);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}
.drawer .list{overflow:auto;flex:1;padding:6px 14px}
.drawer label{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 4px;border-bottom:1px solid var(--surface-2);font-size:13.5px;color:var(--text-secondary);cursor:pointer}
.drawer label b{font-weight:600;color:var(--text-primary)}
.drawer label small{display:block;font-family:var(--mono);font-size:11px;color:var(--text-muted)}
.drawer .tag{color:var(--accent);border-color:rgba(47,192,192,.5)}
#toasts{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;display:grid;gap:8px;max-width:min(380px,calc(100% - 32px))}
.toast{background:var(--surface-2);border:1px solid var(--hairline);border-left:3px solid var(--accent);border-radius:6px;padding:9px 12px;font-size:13.5px;color:var(--text-primary);box-shadow:0 8px 24px rgba(0,0,0,.45);animation:vin .25s ease-out}
#guide{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:45;width:min(400px,calc(100% - 32px));background:var(--bg-deep);border:1px solid var(--hairline);border-top:3px solid var(--accent);border-radius:8px;box-shadow:0 16px 40px rgba(0,0,0,.55)}
#guide .gh{display:flex;justify-content:space-between;align-items:center;padding:10px 14px 0;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
#guide .gp{height:3px;background:var(--surface-2);margin:8px 14px 0;border-radius:2px;overflow:hidden}
#guide .gp i{display:block;height:100%;background:var(--accent);transition:width .3s}
#guide h3{margin:10px 14px 4px;font-size:19px;font-weight:800;font-stretch:78%;text-transform:uppercase;line-height:1.1}
#guide p{margin:0 14px;font-size:13.5px;color:var(--text-secondary)}
#guide .tp{margin:10px 14px 0;font-size:12.5px;color:var(--text-muted);border-left:2px solid var(--hairline);padding-left:10px}
#guide .gb{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px 14px;align-items:center}
#guide .gb .sp{flex:1}
.spot{outline:2px solid var(--accent)!important;outline-offset:3px;box-shadow:0 0 0 8px rgba(47,192,192,.16)!important;border-radius:6px}
.tip{z-index:60}

@media (max-width:1000px){.grid-side{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}