/* ============================================================
   BRAND
   ------------------------------------------------------------
   The CLEAR palette, sampled straight out of the brand artwork
   rather than eyeballed. The four accent colours are the four
   dots of the logo mark, and they are used here as the four
   delivery-team colours - one dot each.
   ============================================================ */
:root{
  --brand:   #3D2B96;   /* CLEAR indigo - the brand */
  --ink:     #241A5C;   /* deepened indigo, for text */
  --brand-2: #4F3BB8;   /* lifted indigo, hovers and fills */
  --crimson: #C03D73;   /* logo dot - comms, and warnings */
  --mint:    #73DCB2;   /* logo dot - engagement */
  --teal:    #4294AF;   /* logo dot - research */
  --gold:    #EFBB57;   /* logo dot - I&G, money, the full stop */
  --paper:   #F3F4F7;   /* page ground */
  --card:    #FFFFFF;

  --accent: var(--gold);
  --warn:   var(--crimson);
  --good:   #2E9E70;

  --line: rgba(36,26,92,.14);
  --muted: rgba(36,26,92,.62);
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  font-family:var(--font); background:var(--paper); color:var(--ink);
  font-size:15px; line-height:1.45;
  padding-bottom:env(safe-area-inset-bottom);
}
button{font-family:inherit; font-size:inherit; cursor:pointer;
  transition:transform .09s ease, background .16s ease, border-color .16s ease;
  -webkit-user-select:none; user-select:none;}
button:active{transform:scale(.975);}
button:disabled:active{transform:none;}
h1,h2,h3{margin:0; line-height:1.2;}

.app{max-width:760px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column;}

.topbar{
  background:var(--brand); color:#fff; padding:12px 16px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  position:sticky; top:0; z-index:20;
  padding-top:calc(12px + env(safe-area-inset-top));
}
.logo{font-weight:800; letter-spacing:2px; font-size:19px; display:flex; align-items:center;}
.logo .sq{width:9px; height:9px; background:var(--gold); display:inline-block; margin-left:3px;}
.dots{display:inline-grid; grid-template-columns:repeat(2,10px); gap:2px; margin-right:9px; flex:0 0 auto;}
.dots i{width:10px; height:10px; border-radius:50%; display:block;}
.dots i:nth-child(1){background:var(--crimson);}
.dots i:nth-child(2){background:var(--mint);}
.dots i:nth-child(3){background:var(--teal);}
.dots i:nth-child(4){background:var(--gold);}
.period{margin-left:auto; font-size:13px; opacity:.9; font-variant-numeric:tabular-nums; text-align:right; line-height:1.2;}
.ver{display:block; margin-left:auto; margin-top:2px; border:0; background:transparent;
  color:rgba(255,255,255,.6); font-size:10px; font-weight:800; letter-spacing:.7px; padding:1px 0;}
.ver:hover{color:var(--gold);}
.gear{font-size:16px; line-height:1; margin-top:0; color:rgba(255,255,255,.85);}
.gear:hover{color:var(--gold);}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-bottom:1px solid var(--line);}
.stat{background:var(--card); padding:9px 6px; text-align:center;}
.stat .k{font-size:10px; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); font-weight:700;}
.stat .v{font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:1px;}
.stat .v.money{color:var(--brand);}
.stat .v.low{color:var(--warn);}
@keyframes pop{0%{transform:scale(1)} 35%{transform:scale(1.18)} 100%{transform:scale(1)}}
.stat .v.pop{animation:pop .5s ease;}

/* three years, twelve quarters, and where you are in them */
.timeline{background:var(--card); border-bottom:1px solid var(--line); padding:10px 14px 11px;}
.tl-years{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:5px;}
.tl-years span{font-size:9.5px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--muted); text-align:center;}
.tl-bar{display:grid; grid-template-columns:repeat(12,1fr); gap:3px;}
.tl-bar i{
  height:9px; border-radius:3px; background:var(--line); display:block; position:relative;
  transition:background .25s ease;
}
.tl-bar i.past{background:var(--brand-2);}
.tl-bar i.now{background:var(--gold); box-shadow:0 0 0 2px rgba(239,187,87,.32);}
.tl-bar i.yr{margin-right:5px;}
.tl-note{font-size:10.5px; color:var(--muted); margin-top:6px; text-align:center; font-weight:700; letter-spacing:.4px;}

main{flex:1; padding:14px; display:flex; flex-direction:column; gap:14px;}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px;}
.card h2{font-size:12px; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; font-weight:800;}

.btn{border:0; border-radius:10px; padding:11px 16px; font-weight:700; background:var(--brand); color:#fff; min-height:44px;}
.btn:hover{background:var(--brand-2);}
.btn:disabled{background:var(--line); color:var(--muted); cursor:not-allowed;}
.btn.wide{width:100%; font-size:16px;}
.btn.ghost{background:transparent; color:var(--brand); border:1.5px solid var(--brand);}
.btn.ghost:hover{background:rgba(61,43,150,.08);}
.btn.ghost:disabled{border-color:var(--line);}
.btn.danger{background:transparent; color:var(--warn); border:1.5px solid var(--warn);}
.btn.danger:hover{background:rgba(192,61,115,.1);}
.btn.sm{padding:7px 10px; min-height:38px; font-size:12.5px; border-radius:8px;}

/* the recruiting line: what a post costs, and what is already out to advert */
.vac{font-size:11.5px; color:var(--muted); margin-top:12px; line-height:1.45;}
.vac b{color:var(--ink);}
.vac.open{color:var(--ink); background:rgba(115,220,178,.18); border-left:3px solid var(--mint);
  padding:7px 9px; border-radius:0 8px 8px 0; font-weight:600;}

.nav{
  display:grid; grid-template-columns:repeat(4,1fr); gap:5px;
  position:sticky; bottom:0; background:var(--paper);
  padding:8px 14px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); z-index:20;
}
.nav button{
  border:0; background:transparent; color:var(--muted);
  font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  padding:8px 2px; border-radius:9px; min-height:44px;
}
.nav button.on{background:var(--brand); color:#fff;}
.nav button .badge{display:inline-block; background:var(--warn); color:#fff; border-radius:9px; padding:0 5px; font-size:10px; margin-left:3px;}

/* ---------- team cards ---------- */
.team{border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:10px;}
.team:last-child{margin-bottom:0;}
.team .row1{display:flex; align-items:center; gap:8px;}
.team .swatch{width:12px; height:12px; border-radius:50%; flex:0 0 12px;}
.team.t-engagement .swatch{background:var(--mint);}
.team.t-research .swatch{background:var(--teal);}
.team.t-iag .swatch{background:var(--gold);}
.team.t-comms .swatch{background:var(--crimson);}
.team.t-core .swatch{background:var(--brand);}
.team .name{font-weight:800; font-size:15px;}
.team .count{font-size:12px; color:var(--muted); margin-left:auto; font-variant-numeric:tabular-nums; text-align:right;}
.team .does{font-size:12.5px; color:var(--muted); margin:5px 0 8px;}
.team .out{font-size:13px; font-weight:700;}
.team .out em{font-style:normal; color:var(--brand);}
.bar{height:7px; background:var(--line); border-radius:4px; overflow:hidden; margin-top:7px;}
.bar i{display:block; height:100%; background:var(--brand-2); border-radius:4px;}
.bar i.over{background:var(--warn);}

/* the directive you give a team */
.chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:9px;}
.chip{
  border:1.5px solid var(--line); background:transparent; color:var(--ink);
  border-radius:9px; padding:7px 10px; font-size:12.5px; text-align:left; flex:1 1 auto; min-width:46%;
}
.chip b{display:block; font-weight:800; font-size:12.5px;}
.chip small{color:var(--muted); font-size:11.5px; line-height:1.3; display:block;}
.chip.on{border-color:var(--brand); background:rgba(61,43,150,.08);}
.chip.on b{color:var(--brand);}
/* what this order is worth, before you give it */
.chip .pv{display:block; margin-top:5px; font-size:11.5px; font-weight:800; color:var(--brand); line-height:1.3;}

.nudge{border-color:var(--brand); background:linear-gradient(180deg, rgba(61,43,150,.06), rgba(61,43,150,0));}
.nudge h2{color:var(--brand);}
.tctl{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap;}
.tctl .btn{flex:1 1 auto;}

.tag{display:inline-block; font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
     padding:1px 6px; border-radius:6px; background:rgba(61,43,150,.12); color:var(--brand); margin-right:4px;}
.tag.warn{background:rgba(192,61,115,.14); color:var(--warn);}

.log{margin:0; padding:0; list-style:none; font-size:13.5px;}
.log li{padding:7px 0 7px 14px; border-bottom:1px solid var(--line); position:relative;}
.log li:last-child{border-bottom:0;}
.log li:before{content:""; position:absolute; left:0; top:14px; width:6px; height:6px; border-radius:50%; background:var(--brand-2);}
.log li.bad:before{background:var(--warn);}
.log li.good:before{background:var(--good);}

.modal-host{
  position:fixed; inset:0; background:rgba(36,26,92,.55); z-index:60;
  display:flex; align-items:flex-end; justify-content:center;
  animation:fade .16s ease-out; backdrop-filter:saturate(140%) blur(2px);
}
@keyframes fade{from{opacity:0} to{opacity:1}}
.modal{
  background:var(--card); border-radius:22px 22px 0 0; width:100%; max-width:520px;
  padding:8px 18px calc(18px + env(safe-area-inset-bottom));
  max-height:88vh; overflow:auto; overscroll-behavior:contain;
  animation:rise .26s cubic-bezier(.2,.85,.3,1);
}
@keyframes rise{from{transform:translateY(30px); opacity:.5} to{transform:none; opacity:1}}
/* the grabber, so a sheet reads as a sheet */
.modal:before{content:""; display:block; width:38px; height:4px; border-radius:3px; background:var(--line); margin:2px auto 14px;}
@media (min-width:600px){
  .modal-host{align-items:center; padding:18px;}
  .modal{border-radius:20px; padding-bottom:18px;}
}

/* what an action will actually do, before you do it */
.imp{margin:2px 0 14px;}
.imp .r{display:flex; align-items:flex-start; gap:12px; padding:9px 0; border-top:1px solid var(--line); font-size:13.5px;}
.imp .r:last-child{border-bottom:1px solid var(--line);}
.imp .r .k{flex:1 1 auto; color:var(--muted); font-weight:600;}
.imp .r .k small{display:block; font-size:11.5px; opacity:.85; font-weight:600;}
.imp .r .v{font-weight:800; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
.imp .r .v.good{color:var(--good);}
.imp .r .v.bad{color:var(--warn);}
.imp .was{color:var(--muted); font-weight:700;}
.imp .ar{color:var(--muted); padding:0 3px; font-weight:700;}
.imp .hd{font-size:10.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  color:var(--muted); padding:12px 0 2px; border:0;}

/* the numbers a closed quarter moved */
.deltas{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 14px;}
.delta{border:1px solid var(--line); border-radius:12px; padding:8px 10px;}
.delta .k{font-size:9.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); font-weight:800;}
.delta .v{font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.25;}
.delta .v.up{color:var(--good);}
.delta .v.down{color:var(--warn);}

/* the record: what you did and how it went */
.chart{display:flex; align-items:flex-end; gap:4px; height:132px; margin-top:4px;}
.chart .col{flex:1 1 0; display:flex; flex-direction:column; justify-content:flex-end; height:100%;}
.chart .stack{display:flex; flex-direction:column; justify-content:flex-end; flex:1 1 auto;}
.chart .s{background:var(--teal); border-radius:4px 4px 0 0; transition:height .3s ease;}
.chart .d{background:var(--gold); transition:height .3s ease;}
.chart .col.now .d{background:var(--gold);}
.chart .lab{font-size:9px; text-align:center; color:var(--muted); font-weight:800; padding-top:4px;}
.key{display:flex; gap:14px; font-size:11.5px; color:var(--muted); margin-top:9px; font-weight:700;}
.key i{width:9px; height:9px; border-radius:3px; display:inline-block; margin-right:5px;}
.hist{width:100%; border-collapse:collapse; font-size:12.5px; font-variant-numeric:tabular-nums;}
.hist th{text-align:right; font-size:9.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); padding:0 0 6px; font-weight:800;}
.hist td{text-align:right; padding:7px 0; border-top:1px solid var(--line);}
.hist th:first-child, .hist td:first-child{text-align:left; font-weight:800;}
.hist tr.now td{color:var(--brand);}
.qhead{font-size:10.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--brand);
  padding:14px 0 4px;}
.qhead:first-child{padding-top:0;}
.modal h3{font-size:19px; margin-bottom:8px;}
.modal .kicker{font-size:11px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--brand); margin-bottom:6px;}
.modal p{margin:0 0 14px; font-size:14.5px;}
.choices{display:flex; flex-direction:column; gap:8px;}
.choice{text-align:left; border:1.5px solid var(--line); background:transparent; border-radius:11px; padding:12px; color:var(--ink);}
.choice:hover{border-color:var(--brand); background:rgba(61,43,150,.05);}
.choice.on{border-color:var(--brand); background:rgba(61,43,150,.07);}
.choice b{display:block; font-size:14.5px;}
.choice small{color:var(--muted); font-size:12.5px;}

.hero{text-align:center; padding:26px 18px;}
.hero .mark{font-size:34px; font-weight:800; letter-spacing:4px; color:var(--ink); display:flex; align-items:center; justify-content:center;}
.hero .sub{color:var(--muted); font-size:13px; letter-spacing:2px; text-transform:uppercase; margin-top:4px;}
.hero p{text-align:left; font-size:14.5px;}

.final{font-size:44px; font-weight:800; color:var(--brand); font-variant-numeric:tabular-nums;}
.split{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.split .box{border:1px solid var(--line); border-radius:11px; padding:10px; text-align:center;}
.split .box .k{font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); font-weight:700;}
.split .box .v{font-size:20px; font-weight:800; font-variant-numeric:tabular-nums;}
.note{font-size:12px; color:var(--muted); margin-top:10px;}
@media (max-width:400px){ .stat .v{font-size:15px;} .hero .mark{font-size:28px;} .chip{min-width:100%;} }