/* Hi-Amp Leads — every colour and typeface here comes from /OS/brand/.
   colours.md v2.0: navy ground, white and amber on it, body text #1D2733 on white,
   the gradient only ever as a rule or inside the bolt. Amber and coral never set
   text on light; where the amber family must, it is Amber ink #8A5A00.
   typography.md v2.0: Archivo announces, Inter is read. Static weights only.
   The brand system covers A4 documents and 1080 social cards and deliberately
   specifies no web or app components, so the screen scale below is derived from
   the document scale rather than quoted from it. Single theme by choice: the
   system has one, built on a white page with navy chrome. */

:root{
  --navy:#041528;
  --amber:#F9AE3F;
  --coral:#F47056;
  --pink:#E8476A;
  --body:#1D2733;
  --muted:#6B7683;
  --muted3:#C9D2DC;
  --rules:#E3E7EC;
  --paper:#F6F8FA;
  --amber-ink:#8A5A00;
  --grad:linear-gradient(90deg,#F9AE3F 0%,#F47056 50%,#E8476A 100%);
  --archivo:'Archivo','Arial Narrow',Arial,sans-serif;
  --inter:'Inter','Segoe UI',Arial,sans-serif;
  --topbar:56px;
  --tabbar:58px;
  color-scheme:light;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* class rules below set display, so [hidden] needs to outrank them */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:#fff;color:var(--body);
  font-family:var(--inter);font-size:15px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
h1,h2,h3{margin:0;font-family:var(--archivo);font-weight:700;color:var(--navy);text-wrap:balance}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font:inherit;color:var(--body)}
.num{font-feature-settings:"tnum" 1}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* ---------- shared bits ---------- */
.kicker{font-family:var(--archivo);font-weight:600;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber);margin:0}
.meta-label{font-family:var(--archivo);font-weight:600;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin:0}

.btn-amber,.btn-navy,.btn-ghost,.btn-ghost-light,.btn-danger{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 18px;border-radius:4px;
  font-family:var(--archivo);font-weight:600;font-size:15px;letter-spacing:.02em;width:100%}
.btn-amber{background:var(--amber);color:var(--navy)}            /* navy on amber 9.76:1 */
.btn-navy{background:var(--navy);color:#fff}                      /* white on navy 18.37:1 */
.btn-ghost{background:#fff;color:var(--body);border:1px solid var(--rules)}
.btn-ghost-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn-danger{background:#fff;color:var(--amber-ink);border:1px solid var(--rules)}
.btn-amber:active,.btn-navy:active{transform:translateY(1px)}

.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>span{font-family:var(--archivo);font-weight:600;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
.field>span i{font-style:normal;color:var(--amber-ink);letter-spacing:.04em;text-transform:none;font-weight:600}
.field input,.field select,.field textarea{
  width:100%;min-height:46px;padding:10px 12px;background:#fff;
  border:1px solid var(--rules);border-radius:4px;font-size:16px}
.field textarea{min-height:76px;resize:vertical;line-height:1.45}

/* ---------- sign in ---------- */
.login{position:fixed;inset:0;background:var(--navy);display:flex;align-items:center;justify-content:center;
  padding:max(24px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right))
          max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  overflow-y:auto;z-index:60}
.login-inner{width:100%;max-width:400px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
/* logo-rules.md: the lock-up holds Licence No. 91065, so it never runs below 320px on
   screen. Under a 360px viewport the lock-up is withdrawn and the bolt device stands in. */
.brand-lock{width:320px;max-width:100%;height:auto;margin-bottom:6px}
.brand-fallback{display:none}
@media (max-width:359px){
  .brand-lock{display:none}
  .brand-fallback{display:block;margin-bottom:6px}
}
.bolt-lg{height:68px;width:auto}
.brand-name{font-family:var(--archivo);font-weight:700;font-size:23px;color:#fff;margin:10px 0 0}
.login-h1{color:#fff;font-size:26px;line-height:1.15;margin:0 0 6px}
.login .field>span{color:var(--muted3)}
.login .field input{background:#0A1420;border-color:#1b2b3d;color:#fff}
.login form{width:100%;display:flex;flex-direction:column;gap:16px}
.login-note{color:var(--muted3);font-size:13.5px;margin:0}
.login-err{color:var(--amber);font-size:13.5px;margin:0;font-weight:600}
#denied .login-inner{gap:16px}

/* ---------- top bar ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:30;background:var(--navy);
  padding-top:env(safe-area-inset-top)}
.topbar-row{height:var(--topbar);display:flex;align-items:center;gap:10px;
  padding-left:max(14px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
.bolt-sm{height:30px;width:auto;flex:none}
.topbar-title{display:flex;flex-direction:column;line-height:1.05;margin-right:auto;min-width:0}
.kicker-amber{font-family:var(--archivo);font-weight:600;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber)}
.topbar-title strong{font-family:var(--archivo);font-weight:700;font-size:19px;color:#fff;letter-spacing:.01em}
.fy-pick select{background:#0A1420;color:#fff;border:1px solid #1b2b3d;border-radius:4px;
  font-family:var(--archivo);font-weight:600;font-size:13px;padding:7px 8px;min-height:38px}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;color:#fff;border-radius:4px}
.icon-btn.dark{color:var(--navy)}
.grad-rule{height:3px;background:var(--grad)}

.offline-bar{position:fixed;left:0;right:0;z-index:29;background:var(--paper);
  border-bottom:1px solid var(--rules);color:var(--amber-ink);
  font-size:12.5px;font-weight:600;padding:7px max(16px,env(safe-area-inset-left));
  top:calc(var(--topbar) + 3px + env(safe-area-inset-top))}

main{padding:calc(var(--topbar) + 3px + env(safe-area-inset-top) + 12px)
  max(16px,env(safe-area-inset-right))
  calc(var(--tabbar) + env(safe-area-inset-bottom) + 86px)
  max(16px,env(safe-area-inset-left));
  max-width:760px;margin:0 auto}
body.has-offline main{padding-top:calc(var(--topbar) + 36px + env(safe-area-inset-top))}
.tab{display:flex;flex-direction:column;gap:14px}

/* ---------- filters ---------- */
.filters{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.filters select,.filters input{min-height:42px;padding:8px 10px;background:#fff;
  border:1px solid var(--rules);border-radius:4px;font-size:14px;width:100%;min-width:0}
.filters input{grid-column:1/-1;font-size:16px}
.filters select:nth-child(3){grid-column:1/-1}
.count{font-family:var(--archivo);font-weight:600;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin:2px 0 0}

/* ---------- lead cards ---------- */
.lead-list{display:flex;flex-direction:column;gap:10px}
.lead{border:1px solid var(--rules);border-radius:4px;padding:13px 14px;background:#fff;
  display:flex;flex-direction:column;gap:7px;text-align:left;width:100%}
.lead:active{background:var(--paper)}
.lead-top{display:flex;gap:12px;align-items:baseline}
.lead-cust{font-family:var(--archivo);font-weight:700;font-size:17px;color:var(--navy);
  flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.lead-val{font-family:var(--archivo);font-weight:700;font-size:17px;color:var(--navy);
  white-space:nowrap;font-feature-settings:"tnum" 1}
.lead-meta{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:3px 8px}
.lead-meta .dotsep{color:var(--muted3)}
.lead-work{font-size:14px;color:var(--body);overflow-wrap:anywhere}
.lead-bottom{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lead-owner{font-family:var(--archivo);font-weight:600;font-size:12px;color:var(--navy);
  letter-spacing:.02em;margin-left:auto;text-align:right}

/* Status: the brand has no status palette yet (decisions.md, "error, warning and
   success colours"), so state is carried by an in-palette dot plus its own label,
   never by colour alone. Won takes the recommended-card treatment: navy with amber. */
.chip{display:inline-flex;align-items:center;gap:7px;padding:3px 10px;border-radius:999px;
  background:var(--paper);border:1px solid var(--rules);
  font-family:var(--archivo);font-weight:600;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--navy);white-space:nowrap}
.chip .dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--muted)}
.chip.new .dot{background:var(--amber)}
.chip.contacted .dot{background:var(--muted)}
.chip.quoted .dot{background:var(--coral)}
.chip.lost{color:var(--muted)}
.chip.lost .dot{background:var(--muted3)}
.chip.hold .dot{background:var(--amber-ink)}
.chip.won{background:var(--navy);border-color:var(--navy);color:#fff}
.chip.won .dot{background:var(--amber)}
.flag{font-family:var(--archivo);font-weight:600;font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.flag.due{color:var(--amber-ink)}

/* ---------- figures ---------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{border:1px solid var(--rules);border-radius:4px;padding:12px 13px 13px;background:#fff;min-width:0}
.tile .t-lbl{font-family:var(--archivo);font-weight:600;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
.tile .t-big{font-family:var(--archivo);font-weight:700;font-size:30px;line-height:1.05;
  color:var(--navy);margin-top:5px;font-feature-settings:"tnum" 1;overflow-wrap:anywhere}
.tile .t-foot{font-size:12px;color:var(--muted);margin-top:3px}

.panel{border:1px solid var(--rules);border-radius:4px;padding:14px 15px 16px;background:#fff}
.panel h2{font-size:15px;padding-bottom:7px;border-bottom:1px solid var(--rules)}
.panel-hint{font-size:12.5px;color:var(--muted);margin:7px 0 13px}

.bars{display:flex;flex-direction:column;gap:10px}
.bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:baseline}
.bar .b-name{font-size:13.5px;color:var(--body);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.bar .b-val{font-size:13px;color:var(--navy);white-space:nowrap;font-feature-settings:"tnum" 1}
.bar .b-val b{font-family:var(--archivo);font-weight:700}
.bar .b-val span{color:var(--muted)}
.bar .b-track{grid-column:1/-1;height:8px;background:var(--paper);
  border:1px solid var(--rules);border-radius:2px;overflow:hidden}
.bar .b-fill{height:100%;background:var(--navy);min-width:2px}
.bar .b-fill.amber{background:var(--amber)}
.bar .b-fill.coral{background:var(--coral)}
.bar .b-fill.muted{background:var(--muted)}
.bar .b-fill.muted3{background:var(--muted3)}
.bar .b-fill.amberink{background:var(--amber-ink)}

.ptable{width:100%;border-collapse:collapse;font-size:13.5px}
.ptable th{text-align:left;font-family:var(--archivo);font-weight:600;font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
  padding:0 0 7px;border-bottom:1px solid var(--rules)}
.ptable td{padding:9px 0;border-bottom:1px solid var(--rules);
  color:var(--body);font-feature-settings:"tnum" 1}
.ptable th+th,.ptable td+td{text-align:right;padding-left:10px}
.ptable tr:last-child td{border-bottom:0}
.ptable td:first-child{color:var(--navy);font-weight:600}

.empty{border:1px dashed var(--muted3);border-radius:4px;padding:28px 18px;text-align:center}
.empty h2{font-size:18px;margin-bottom:6px}
.empty p{margin:0;color:var(--muted);font-size:13.5px}
.empty-small{font-size:13.5px;color:var(--muted);margin:0}

/* ---------- fab + tab bar ---------- */
.fab{position:fixed;right:max(18px,env(safe-area-inset-right));
  bottom:calc(var(--tabbar) + env(safe-area-inset-bottom) + 16px);
  width:58px;height:58px;border-radius:50%;background:var(--amber);color:var(--navy);
  display:grid;place-items:center;z-index:28;
  box-shadow:0 6px 18px -6px rgba(4,21,40,.55)}
.fab:active{transform:translateY(1px)}
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--navy);
  display:grid;grid-template-columns:1fr 1fr;
  padding-bottom:env(safe-area-inset-bottom);border-top:1px solid #0e2338}
.tab-btn{height:var(--tabbar);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;color:var(--muted3);
  font-family:var(--archivo);font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.tab-btn.is-on{color:var(--amber)}

/* ---------- sheets ---------- */
/* align-items:flex-end would make the top of a tall sheet unreachable, because a
   flex item overflowing above its container cannot be scrolled to. flex-start
   plus margin-top:auto sits it at the bottom and keeps the whole sheet scrollable. */
/* A bottom sheet that is taller than the screen must still scroll to its top.
   flex-end and auto margins both push the overflow out of reach, so this is a
   grid with "safe end": pinned to the bottom when it fits, top-aligned and
   scrollable when it does not. */
.scrim{position:fixed;inset:0;z-index:70;background:rgba(4,21,40,.55);
  display:grid;grid-template-columns:1fr;justify-items:center;overflow-y:auto;
  align-content:end;align-content:safe end;
  padding-top:max(24px,env(safe-area-inset-top))}
.sheet{background:#fff;width:100%;max-width:560px;border-radius:12px 12px 0 0;
  padding:0 max(16px,env(safe-area-inset-left)) calc(16px + env(safe-area-inset-bottom))
          max(16px,env(safe-area-inset-right))}
.sheet-sm{padding-top:20px;display:flex;flex-direction:column;gap:10px;align-items:stretch}
.sheet-head{display:flex;align-items:center;gap:12px;padding:16px 0 10px;
  position:sticky;top:0;background:#fff;border-bottom:1px solid var(--rules)}
.sheet-head h2{font-size:20px;margin-right:auto}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:14px 0 4px}
.form-grid .wide{grid-column:1/-1}
@media (max-width:420px){.form-grid{grid-template-columns:1fr}}
.form-err{color:var(--amber-ink);font-size:13.5px;font-weight:600;margin:4px 0 0}
.sheet-foot{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:14px 0 0;
  border-top:1px solid var(--rules);margin-top:14px}
.sheet-foot .btn-navy{grid-column:1/-1;order:-1}
.who{font-family:var(--archivo);font-weight:700;font-size:19px;color:var(--navy);margin:2px 0 0}
.who-sub{font-size:13.5px;color:var(--muted);margin:0 0 6px;overflow-wrap:anywhere}

.toast{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--tabbar) + env(safe-area-inset-bottom) + 86px);
  z-index:80;background:var(--navy);color:#fff;padding:10px 18px;border-radius:999px;
  font-family:var(--archivo);font-weight:600;font-size:13.5px;letter-spacing:.02em;
  box-shadow:0 8px 24px -10px rgba(4,21,40,.6);max-width:calc(100vw - 32px);text-align:center}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}