/*
  Team Dashboard demo (Texo Advisors).
  Type and colour follow the Texo brand kit: Source Serif 4 for text, JetBrains
  Mono for labels, ink on paper, white panels with a Rule hairline, status
  colours on data only, one shadow for raised overlays. Fonts are the kit's own
  files in fonts/ (SIL Open Font License 1.1).
*/
@font-face{font-family:"Source Serif 4";src:url("fonts/SourceSerif4-Regular.ttf") format("truetype");font-weight:100 500;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/SourceSerif4-SemiBold.ttf") format("truetype");font-weight:501 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/SourceSerif4-Italic.ttf") format("truetype");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono-Medium.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  color-scheme:light;
  --font:"Source Serif 4",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --ink:#0E1A2E;
  --grey-1:#4A5568;
  --grey-2:#4A5568;
  --line:#E5E7EB;
  --page:#FFFFFF;
  --panel:#FAFAF8;
  --elev:#ffffff;
  --zebra:#FAFAF8;
  --st-green:#22643F;  --st-green-bg:#FAFAF8;
  --st-amber:#92400E;  --st-amber-bg:#FAFAF8;
  --st-red:#9B2C2C;    --st-red-bg:#FAFAF8;
  --st-ink:#4A5568;
  --accent:#0E1A2E;
  --accent-deep:#4A5568;
  --accent-bg:#E5E7EB;
  --contracted:#4A5568;
  --white:#ffffff;
  --shadow-1:0 1px 2px rgba(14,26,46,.06),0 10px 28px -8px rgba(14,26,46,.16);
  --gutter:clamp(16px,3vw,48px);
  --max:1360px;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --t-h1:clamp(2rem,3.4vw,3rem);
  --t-h2:1.1875rem;
  --t-body:1rem;
  --t-body-sm:0.9375rem;
  --t-small:0.875rem;
  --t-meta:0.8125rem;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.locked{overflow:hidden}
body{
  background:var(--page);
  color:var(--ink);
  font:300 var(--t-body)/1.55 var(--font);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  min-height:100vh;
  touch-action:manipulation;
  padding-bottom:48px;
}
[hidden]{display:none !important}
img{display:block;max-width:100%}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;border-radius:0;padding:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{
  position:absolute;left:12px;top:-64px;z-index:3000;padding:10px 16px;background:var(--accent);
  color:var(--white);font-size:var(--t-small);font-weight:400;text-decoration:none;border-radius:4px;
}
.skip-link:focus{top:12px}
.wrap{width:min(var(--max),100% - 2 * var(--gutter));margin-inline:auto}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* ============================ TOP BAR ============================= */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(140%) blur(8px);backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:10px 0}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand img{height:32px;width:auto}
.brand-sep{width:1px;height:22px;background:var(--line)}
.brand-title{font-size:var(--t-small);font-weight:400;white-space:nowrap}
.proto-badge{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:6px 12px;border:1px solid var(--line);border-radius:3px;
  background:var(--white);color:var(--grey-1);
  font:500 0.6875rem/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
}

/* ============================ PAGE HEAD =========================== */
.page-head{padding:clamp(28px,4vw,48px) 0 20px}
h1{font-size:var(--t-h1);font-weight:200;letter-spacing:-0.02em;line-height:1.05}
.page-sub{margin-top:10px;color:var(--grey-1);font-size:var(--t-body-sm);max-width:72ch}

/* ============================ BUTTONS ============================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;padding:10px 16px;
  font-family:var(--font);font-size:var(--t-small);font-weight:400;line-height:1.2;color:var(--ink);
  background:var(--elev);border:1px solid var(--line);border-radius:4px;text-decoration:none;white-space:nowrap;
  transition:color .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease),transform .12s var(--ease);
}
@media (hover:hover){.btn:hover{border-color:var(--grey-2);background:var(--panel)}}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--white)}
@media (hover:hover){.btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn-close{flex:none;color:var(--grey-1)}
.btn-sm{min-height:40px;padding:8px 12px;font-size:var(--t-meta)}
.btn-count{
  display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  background:var(--panel);border:1px solid var(--line);color:var(--ink);font-size:var(--t-meta);font-weight:400;
}
.btn-count:empty{display:none}
.link-btn{
  display:inline-flex;align-items:center;min-height:40px;
  color:var(--accent);font-size:var(--t-small);font-weight:400;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
@media (hover:hover){.link-btn:hover{color:var(--accent-deep)}}

/* Toggle chips: bordered, accent fill when on (the portal's filter chips). */
.seg{display:inline-flex;gap:6px;flex-wrap:wrap}
.seg-btn{
  min-height:40px;min-width:44px;padding:8px 12px;
  font-size:var(--t-small);font-weight:400;color:var(--grey-1);
  background:var(--elev);border:1px solid var(--line);border-radius:4px;
  transition:color .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease);
}
@media (hover:hover){.seg-btn:hover{color:var(--ink);border-color:var(--grey-2);background:var(--panel)}}
.seg-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--white)}
@media (hover:hover){.seg-btn[aria-pressed="true"]:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--white)}}

/* Status chips. */
.chip{
  display:inline-block;padding:3px 9px;border:1px solid transparent;border-radius:3px;
  background:var(--panel);color:var(--st-ink);
  font-size:var(--t-meta);font-weight:400;line-height:1.35;white-space:nowrap;vertical-align:baseline;
}
.chip.green{background:var(--st-green-bg);border-color:rgba(34,100,63,.22);color:var(--st-green)}
.chip.amber{background:var(--st-amber-bg);border-color:rgba(146,64,14,.22);color:var(--st-amber)}
.chip.red{background:var(--st-red-bg);border-color:rgba(155,44,44,.24);color:var(--st-red)}
.chip.accent{background:var(--accent-bg);border-color:rgba(14,26,46,.22);color:var(--accent)}

/* ============================ BLOCKS ============================== */
.block{margin-bottom:28px}
.block-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;margin-bottom:14px}
h2{font-size:var(--t-h2);font-weight:400;line-height:1.3;letter-spacing:-0.005em}
.block-meta{color:var(--grey-2);font-size:var(--t-small)}

.actions{display:flex;flex-wrap:wrap;gap:10px}
/* Wide screens: the actions sit top right, beside the title, as drawn. */
@media (min-width:1180px){
  .top{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;align-items:end;padding-top:clamp(28px,4vw,48px);margin-bottom:28px}
  .top .page-head{padding:0 0 4px}
  .top .block{margin-bottom:0}
  .top .actions{justify-content:flex-end}
  .top .actions .btn{min-width:0}
  .top .actions-note{text-align:right}
}
.actions .btn{min-width:132px}
.actions-note{margin-top:10px;color:var(--grey-2);font-size:var(--t-meta)}

/* ========================= PROJECTS TABLE ========================= */
.table-wrap{background:var(--elev);border:1px solid var(--line)}
.ptable{width:100%;border-collapse:collapse}
.ptable thead th{
  text-align:left;padding:11px 16px;font-size:var(--t-small);font-weight:400;color:var(--grey-1);
  background:var(--panel);border-bottom:1px solid var(--line);white-space:nowrap;
}
.ptable thead th.num{text-align:right}
.ptable td{padding:14px 16px;font-size:var(--t-body-sm);border-bottom:1px solid var(--line);vertical-align:middle;font-variant-numeric:tabular-nums}
.ptable tbody tr{cursor:pointer;transition:background-color .2s var(--ease)}
.ptable tbody tr:nth-child(even){background:var(--zebra)}
.ptable tbody tr:last-child td{border-bottom:0}
@media (hover:hover){.ptable tbody tr:hover{background:var(--panel)}}
.ptable tbody tr:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.p-name{font-weight:400;display:block}
.p-owner{display:block;color:var(--grey-2);font-size:var(--t-small)}
.p-sub{display:block;color:var(--grey-2);font-size:var(--t-meta)}
.p-open{display:none}
.pct-paid{font-weight:400}
.sched{display:grid;grid-template-columns:44px minmax(90px,140px);gap:2px 12px;align-items:center}
.sched-pct{font-weight:400;text-align:right}
.sched-pct.behind{color:var(--st-amber)}
.sched-plan{grid-column:2;color:var(--grey-2);font-size:var(--t-meta);text-align:right}
.track{position:relative;height:6px;background:var(--line);border-radius:0}
.track .fill{position:absolute;left:0;top:0;bottom:0;background:var(--st-green)}
.track .fill.behind{background:var(--st-amber)}
.track .mark{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--ink)}
.ms-title{display:block}
.ms-date{display:block;color:var(--grey-2);font-size:var(--t-meta)}


/* ============================ GRID ================================ */
.grid{
  display:grid;gap:20px;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-areas:
    "bud bud bud bud bud bud eml eml eml eml eml eml"
    "rev rev rev rev rev rev mtg mtg mtg mtg mtg mtg"
    "chk chk chk chk tdo tdo tdo tdo fx fx fx fx"
    "biz biz biz biz biz biz biz biz biz biz biz biz";
}
.area-budget{grid-area:bud}
.area-emails{grid-area:eml}
.area-fx{grid-area:fx}
.area-review{grid-area:rev}
.area-check{grid-area:chk}
.area-biz{grid-area:biz}
.area-todo{grid-area:tdo}
.area-meetings{grid-area:mtg}

.card{display:flex;flex-direction:column;background:var(--elev);border:1px solid var(--line);border-top:2px solid var(--ink);min-width:0}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;padding:16px 20px 12px}
.card-count{color:var(--grey-2);font-size:var(--t-small)}
.card-body{padding:0 20px 20px}
.sample-note{margin-top:10px;color:var(--grey-2);font-size:var(--t-meta)}
.field-label{display:block;margin-bottom:6px;color:var(--grey-1);font-size:var(--t-small)}
.input{
  font:inherit;font-size:16px;font-weight:300;color:var(--ink);
  min-height:42px;padding:8px 12px;border:1px solid var(--line);border-radius:4px;background:var(--elev);
  width:100%;min-width:0;
}
select.input{appearance:auto;-webkit-appearance:menulist;cursor:pointer}
textarea.input{line-height:1.45}
.input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}

/* Row lists: one white block, hairlines between rows. */
.rows>li{border-top:1px solid var(--line)}
.rows>li:first-child{border-top:0}
.row-btn{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;align-items:baseline;
  width:100%;min-height:44px;padding:11px 8px;margin:0 -8px;width:calc(100% + 16px);text-align:left;
  transition:background-color .2s var(--ease);
}
@media (hover:hover){.row-btn:hover{background:var(--zebra)}}
.row-btn:focus-visible{outline-offset:-2px}
.row-main{font-size:var(--t-body-sm);font-weight:400}
.row-sub{grid-column:1;color:var(--grey-2);font-size:var(--t-small)}
.row-side{grid-row:1 / span 2;grid-column:2;align-self:center;text-align:right;font-size:var(--t-small);color:var(--grey-1);white-space:nowrap}

/* Budget, schedule and critical path summary */
.totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line);margin-bottom:16px}
.total{padding:12px 14px;border-left:1px solid var(--line)}
.total:first-child{border-left:0}
.total-v{font-size:1.375rem;font-weight:200;letter-spacing:-0.01em;font-variant-numeric:tabular-nums;line-height:1.15}
.total-l{color:var(--grey-2);font-size:var(--t-meta);margin-top:4px}
/* RU4: plain amounts in Ink; status colors only on labelled states and real variances. */
.total-v.green,.total-v.amber{color:var(--ink)}
.bs-head{display:flex;justify-content:space-between;gap:12px;color:var(--grey-1);font-size:var(--t-small);margin:4px 0 2px}
.bs-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:12px 8px;margin:0 -8px;width:calc(100% + 16px);text-align:left}
@media (hover:hover){.bs-row:hover{background:var(--zebra)}}
.bs-proj{font-weight:400;font-size:var(--t-body-sm)}
.bs-fig{text-align:right;font-size:var(--t-small);color:var(--grey-1);white-space:nowrap;font-variant-numeric:tabular-nums}
.bs-crit{grid-column:1 / -1;display:grid;gap:6px;font-size:var(--t-small);color:var(--grey-1)}
.bs-ci{display:grid;grid-template-columns:68px minmax(0,1fr);gap:10px;align-items:baseline}
.bs-ci .chip{justify-self:start}

/* Emails */
.email-done .row-main{color:var(--grey-2);text-decoration:line-through;text-decoration-thickness:1px}
.done-head{margin-top:14px;padding-top:10px;border-top:1px solid var(--line);color:var(--grey-2);font-size:var(--t-small)}

/* Review notes */
.meet>li{border-top:1px solid var(--line)}
.meet>li:first-child{border-top:0}
.meet-btn{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;
  width:calc(100% + 16px);margin:0 -8px;padding:11px 8px;min-height:44px;text-align:left;
}
@media (hover:hover){.meet-btn:hover{background:var(--zebra)}}
.meet-title{font-weight:400;font-size:var(--t-body-sm)}
.meet-meta{grid-column:1;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;color:var(--grey-2);font-size:var(--t-small)}
.meet-side{grid-row:1 / span 2;grid-column:2;display:flex;align-items:center;gap:10px;font-size:var(--t-small);color:var(--grey-1);white-space:nowrap}
.caret{width:9px;height:9px;border-right:1.5px solid var(--grey-1);border-bottom:1.5px solid var(--grey-1);transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s var(--ease)}
[aria-expanded="true"] .caret{transform:rotate(225deg) translate(-2px,-2px)}
.meet-detail{padding:0 0 14px}
.meet-detail p{color:var(--grey-1);font-size:var(--t-small);margin-bottom:8px}

/* Checklists (project checklist, review actions, to do) */
.checklist li{border-top:1px solid var(--line)}
.checklist li:first-child{border-top:0}
.check{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 0;cursor:pointer;font-size:var(--t-body-sm)}
.check input{
  appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin-top:1px;
  border:1px solid var(--grey-2);border-radius:3px;background:var(--elev);cursor:pointer;display:grid;place-items:center;
}
.check input::after{content:"";width:6px;height:11px;border-right:2px solid var(--white);border-bottom:2px solid var(--white);transform:rotate(45deg) translate(-1px,-1px);opacity:0}
.check input:checked{background:var(--ink);border-color:var(--ink)}
.check input:checked::after{opacity:1}
.check input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.check-text{flex:1;min-width:0}
.check-sub{display:block;color:var(--grey-2);font-size:var(--t-meta)}
.check input:checked+.check-text>.check-main{color:var(--grey-2);text-decoration:line-through;text-decoration-thickness:1px}
.check-when{flex:none;color:var(--grey-2);font-size:var(--t-small);padding-top:1px}
.todo-row{display:flex;align-items:center;gap:6px}
.todo-row .check{flex:1;min-width:0}
.todo-del{min-width:40px;min-height:40px;color:var(--grey-2);font-size:var(--t-meta)}
@media (hover:hover){.todo-del:hover{color:var(--st-red)}}
.check-progress{display:flex;align-items:center;gap:12px;margin:14px 0 6px;font-size:var(--t-small);color:var(--grey-1)}
.check-progress .track{flex:1}
.todo-add{display:flex;gap:8px;margin-bottom:8px}
.todo-add .input{flex:1}

/* Business */
.tabs{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin-bottom:16px}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:none;min-height:44px;padding:12px 0 10px;font-size:var(--t-small);font-weight:300;color:var(--grey-1);
  border-bottom:1px solid transparent;margin-bottom:-1px;white-space:nowrap;
}
@media (hover:hover){.tab:hover{color:var(--ink)}}
.tab[aria-selected="true"]{color:var(--ink);font-weight:400;border-bottom-color:var(--ink)}
.tab:focus-visible{outline-offset:-3px}
.biz{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px 28px;align-items:start}
.biz-title{font-size:var(--t-small);color:var(--grey-1);margin-bottom:8px}
.biz-chart svg{display:block;width:100%;height:auto;overflow:visible}
.biz-figs>div{padding:10px 0;border-top:1px solid var(--line)}
.biz-figs>div:first-child{border-top:0;padding-top:0}
.biz-v{font-size:1.5rem;font-weight:200;letter-spacing:-0.01em;font-variant-numeric:tabular-nums;line-height:1.2}
.biz-l{color:var(--grey-2);font-size:var(--t-meta)}
#biz-panel:focus-visible{outline-offset:4px}

/* Currency chart */
.fx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.fx-value{font-size:2rem;font-weight:200;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;line-height:1}
.fx-unit{margin-left:8px;color:var(--grey-2);font-size:var(--t-small)}
.fx-change{font-size:var(--t-small);color:var(--grey-1)}
.fx-chart{position:relative;touch-action:pan-y}
.fx-chart svg{display:block;width:100%;height:auto;overflow:visible;cursor:crosshair}
.fx-chart svg:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.fx-tip{
  position:absolute;top:0;transform:translateX(-50%);pointer-events:none;
  padding:5px 9px;background:var(--ink);color:var(--white);border-radius:3px;
  font-size:var(--t-meta);font-weight:400;white-space:nowrap;font-variant-numeric:tabular-nums;
  opacity:0;transition:opacity .15s var(--ease);
}
.fx-tip.on{opacity:1}

/* ============================ FOOTER ============================== */
.foot{margin-top:40px;padding:20px 0 8px;border-top:1px solid var(--line);color:var(--grey-2);font-size:var(--t-small);display:flex;flex-wrap:wrap;gap:6px 24px;align-items:center;justify-content:space-between}
.foot p{max-width:80ch}


/* ============================ DIALOGS ============================= */
.dlg{
  border:1px solid var(--line);border-radius:0;padding:0;color:var(--ink);background:var(--elev);
  box-shadow:var(--shadow-1);
  width:min(720px,100% - 32px);max-width:none;max-height:min(90vh,900px);
  margin:auto;overflow:hidden;
}
.dlg[open]{display:flex;flex-direction:column}
.dlg-wide{width:min(980px,100% - 32px)}
.dlg::backdrop{background:rgba(14,26,46,.6)}
.dlg[open]{animation:dlg-in .3s var(--ease) both}
.dlg-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding:22px 28px 16px;border-bottom:1px solid var(--line);background:var(--elev);flex:none;
}
.dlg-head h2{font-size:1.375rem;font-weight:300;line-height:1.25}
.dlg-kicker{color:var(--grey-2);font:500 0.6875rem/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;margin-bottom:4px}
.dlg-body{flex:1 1 auto;min-height:0;padding:20px 28px 28px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.dlg-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.lede-sm{color:var(--grey-1);font-size:var(--t-body-sm);margin-bottom:10px}
.confirm{flex-basis:100%;font-size:var(--t-small);color:var(--ink)}
.confirm:empty{display:none}

/* Drawer: right side sheet on desktop */
.drawer{
  margin:0 0 0 auto;height:100%;max-height:none;width:min(580px,100%);
  border-top:0;border-bottom:0;border-right:0;
}
.drawer[open]{animation:drawer-in .35s var(--ease) both}
.sec-h{font-size:var(--t-small);font-weight:400;color:var(--grey-1);margin:22px 0 10px}
.sec-h:first-child{margin-top:0}
.kv{border-top:1px solid var(--line)}
.kv>div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:var(--t-body-sm)}
.kv dt{color:var(--grey-1);font-size:var(--t-small)}
.kv dd{font-weight:400;text-align:right;font-variant-numeric:tabular-nums}
.kv dd small{display:block;font-weight:300;color:var(--grey-2);font-size:var(--t-meta)}
.kv dd.green,.kv dd.amber{color:var(--ink)}
.bbar{display:flex;height:12px;background:var(--line);margin:6px 0 8px}
.bbar span{display:block;height:100%}
.bbar .b-spent{background:var(--ink)}
.bbar .b-con{background:var(--contracted);border-left:1px solid var(--white)}
.bkey{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:var(--t-small);font-variant-numeric:tabular-nums}
.bkey .k-spent,.bkey .k-con{color:var(--ink)}
.bkey span::before{content:"";display:inline-block;width:9px;height:9px;margin-right:6px;vertical-align:-1px}
.bkey .k-spent::before{background:var(--ink)}
.bkey .k-con::before{background:var(--contracted)}
.bkey .k-bal::before{background:var(--line)}
.bkey .k-bal{color:var(--grey-1)}
.big-sched{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;align-items:center}
.big-sched .sched-pct{font-size:1.75rem;font-weight:200;text-align:left}
.big-sched .track{height:10px}
.big-sched .note{grid-column:1 / -1;color:var(--grey-1);font-size:var(--t-small)}
.crit-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 0;border-top:1px solid var(--line)}
.crit-list li:first-child{border-top:0}
.crit-item{font-weight:400;font-size:var(--t-body-sm)}
.crit-note{grid-column:1;color:var(--grey-2);font-size:var(--t-small)}
.crit-side{grid-row:1 / span 2;grid-column:2;text-align:right;font-size:var(--t-small);color:var(--grey-1);display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.ms-box{padding:14px 16px;background:var(--panel);border-left:2px solid var(--accent)}
.ms-box strong{display:block;font-weight:400}
.ms-box span{color:var(--grey-1);font-size:var(--t-small)}
.co-table{width:100%;border-collapse:collapse;font-size:var(--t-small)}
.co-table th{text-align:left;font-weight:400;color:var(--grey-1);padding:8px 8px;background:var(--panel);border-bottom:1px solid var(--line)}
.co-table td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top;font-variant-numeric:tabular-nums}
.co-table .num{text-align:right;white-space:nowrap}
.co-table .neg{color:var(--st-green)}
.co-table tfoot td{border-top:1px solid var(--ink);border-bottom:0;font-weight:400;background:var(--zebra)}
.co-table tfoot tr+tr td{border-top:1px solid var(--line)}
.co-no{display:block;color:var(--grey-2);font-size:var(--t-meta)}
.co-st-m{display:none}
.drawer-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}

/* Monthly report preview */
.report{margin-top:18px;border:1px solid var(--line)}
.report-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--zebra)}
.report-head img{height:18px;width:auto}
.report-head span{color:var(--grey-2);font-size:var(--t-meta)}
.report-sec{padding:16px 18px;border-top:1px solid var(--line)}
.report-sec:first-of-type{border-top:0}
.report-sec h3{font-size:var(--t-small);font-weight:400;color:var(--grey-1);margin-bottom:8px}
.report-sec p{font-size:var(--t-body-sm)}
.report-photo{
  display:grid;place-items:center;aspect-ratio:16 / 7;margin-top:12px;background:var(--panel);border:1px solid var(--line);
  color:var(--grey-2);font-size:var(--t-small);text-align:center;padding:12px;
}

/* Portal update list */
.upd-tools{display:flex;gap:18px;margin-bottom:4px}
.upd-list>li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 20px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.upd-list>li:first-child{border-top:0}
.upd-meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:var(--t-small);color:var(--grey-1);margin-bottom:6px}
.upd-meta strong{font-weight:400;color:var(--ink)}
.upd-change{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;font-size:var(--t-small)}
.upd-change dt{color:var(--grey-2)}
.upd-change dd.now{color:var(--grey-1);text-decoration:line-through;text-decoration-thickness:1px}
.upd-change dd.new{font-weight:400}
.upd-src{margin-top:4px;color:var(--grey-2);font-size:var(--t-meta)}
.upd-list .seg-btn[data-v="approve"][aria-pressed="true"]{background:var(--st-green);border-color:var(--st-green)}
.upd-list .seg-btn[data-v="skip"][aria-pressed="true"]{background:var(--grey-1);border-color:var(--grey-1)}
.upd-list>li.is-approved{box-shadow:inset 2px 0 0 var(--st-green);padding-left:12px}

/* Sheet modal */
.sheet-tabs{margin-top:10px;border:1px solid var(--line)}
.sheet-tabs-bar{display:flex;gap:0;overflow-x:auto;background:var(--panel);border-bottom:1px solid var(--line);scrollbar-width:none}
.sheet-tabs-bar span{flex:none;padding:8px 14px;font-size:var(--t-meta);color:var(--grey-1);border-right:1px solid var(--line);white-space:nowrap}
.sheet-tabs-bar span:first-child{background:var(--elev);color:var(--ink);font-weight:400}
.sheet-tabs ul li{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:4px 16px;padding:10px 14px;border-top:1px solid var(--line);font-size:var(--t-small)}
.sheet-tabs ul li:first-child{border-top:0}
.sheet-tabs ul li strong{font-weight:400}
.sheet-tabs ul li span{color:var(--grey-1)}
.sheet-h{font-size:var(--t-body-sm);font-weight:400;margin-top:20px}

/* Email modal */
.mail-meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;font-size:var(--t-small);padding-bottom:14px;border-bottom:1px solid var(--line)}
.mail-meta dt{color:var(--grey-2)}
.mail-body{padding:16px 0;font-size:var(--t-body-sm);max-width:64ch}
.reply-box{margin-top:6px}
.reply-box textarea{min-height:140px}
.reply-tools{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}

/* Feedback summary */

/* Toast */
.toast{
  position:fixed;left:50%;bottom:84px;z-index:3000;transform:translate(-50%,8px);
  padding:10px 16px;background:var(--ink);color:var(--white);border-radius:4px;font-size:var(--t-small);
  opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);max-width:calc(100% - 32px);
}
.toast.on{opacity:1;transform:translate(-50%,0)}

@keyframes dlg-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes drawer-in{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ========================== BREAKPOINTS =========================== */
@media (max-width:1180px){
  .grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:
      "bud eml"
      "rev mtg"
      "chk tdo"
      "biz biz"
      "fx fx";
  }
  .ptable td,.ptable thead th{padding-left:12px;padding-right:12px}
}

/* Tablet and phone: the projects table becomes stacked cards. */
@media (max-width:860px){
  .ptable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ptable,.ptable tbody,.ptable tr,.ptable td{display:block;width:100%}
  .table-wrap{background:none;border:0}
  .ptable tbody{display:grid;gap:12px}
  .ptable tbody tr,.ptable tbody tr:nth-child(even){background:var(--elev);border:1px solid var(--line);padding:4px 16px 8px}
  .ptable td{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);text-align:left}
  .ptable td.num{text-align:left}
  .ptable td::before{content:attr(data-label);color:var(--grey-2);font-size:var(--t-small)}
  .ptable td.td-proj{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 0}
  .ptable td.td-proj::before{content:none}
  .ptable tbody tr td:last-child{border-bottom:0}
  .p-name{font-size:1.0625rem}
  .p-open{display:inline-flex;align-items:center;color:var(--accent);font-size:var(--t-small);font-weight:400;white-space:nowrap}
  .sched{grid-template-columns:40px minmax(0,1fr)}
}

@media (min-width:600px) and (max-width:860px){
  .ptable tbody{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ptable td{grid-template-columns:minmax(0,7.5em) minmax(0,1fr)}
}

@media (max-width:760px){
  .grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"bud" "eml" "fx" "rev" "mtg" "chk" "biz" "tdo";gap:16px}
  .brand-sep,.brand-title{display:none}
  .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .actions .btn{min-width:0;width:100%}
  .actions .btn:last-child{grid-column:1 / -1}
  .biz{grid-template-columns:minmax(0,1fr)}
  .tabs{flex-wrap:wrap;gap:6px;overflow:visible;border-bottom:0}
  .tab{margin:0;min-height:40px;padding:8px 12px;border:1px solid var(--line);border-radius:4px;background:var(--elev);color:var(--grey-1)}
  .tab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--white)}
  .totals{grid-template-columns:minmax(0,1fr)}
  .total{border-left:0;border-top:1px solid var(--line)}
  .total:first-child{border-top:0}
  .card-head{padding:14px 16px 10px}
  .card-body{padding:0 16px 16px}
  .upd-list>li{grid-template-columns:minmax(0,1fr)}
  .co-table .co-st{display:none}
  .co-st-m{display:block;margin-top:6px}
  .sheet-tabs ul li{grid-template-columns:minmax(0,1fr)}

  /* Modals and the drawer become full-screen sheets. */
  .dlg,.dlg-wide,.drawer{
    width:100%;max-width:100%;height:100%;max-height:100%;margin:0;border:0;
  }
  .dlg-head{padding:14px 16px 12px;padding-top:max(14px,env(safe-area-inset-top))}
  .dlg-head h2{font-size:1.1875rem}
  .dlg-body{padding:16px 16px calc(28px + env(safe-area-inset-bottom))}
  .dlg[open]{animation:sheet-in .3s var(--ease) both}
}
@keyframes sheet-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

@media (max-width:420px){
  .proto-badge{font-size:var(--t-meta);padding:5px 10px}
  .brand img{height:26px}
  .ptable td{grid-template-columns:minmax(0,7.5em) minmax(0,1fr)}
}

@media print{
  .topbar,.toast,.actions,.actions-note{display:none !important}
  body{background:#fff;padding:0}
}

/* ============================ V2 ADDITIONS ========================= */
.v2-slot{min-height:40px}
.v2-loading{margin:0}
.sec-sub{font-size:var(--t-meta);color:var(--grey-1);margin:16px 0 8px}
.sec-h .chip{margin-left:8px;vertical-align:middle}
.nowrap{white-space:nowrap}
.tbl-cap{caption-side:top;text-align:left;font-size:var(--t-meta);color:var(--grey-1);padding:12px 0 6px}

/* Decision flags on the project row */
.dd-flags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.dd-flags .chip{font-size:var(--t-meta)}

/* Payment status strip */
.pay-all{margin-top:14px}
.ps-head{font-size:var(--t-meta);color:var(--grey-1);margin:0 0 6px}
.pay-strip{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);background:var(--elev)}
.pay-strip li{padding:10px 12px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:2px;border-top:3px solid var(--line)}
.pay-strip li:first-child{border-left:0}
.pay-strip .ps-tosend{border-top-color:var(--accent)}
.pay-strip .ps-sent{border-top-color:var(--st-amber)}
.pay-strip .ps-paid{border-top-color:var(--contracted)}
.pay-strip .ps-confirmed{border-top-color:var(--st-green)}
.ps-l{font-size:var(--t-meta);color:var(--grey-1)}
.ps-v{font-size:var(--t-small);font-variant-numeric:tabular-nums}
.ps-v strong{font-weight:400;font-size:var(--t-body)}
.pay-table{margin-bottom:6px}
.pay-tag{white-space:normal}

/* Critical path chain */
.cp-chain{list-style:none;margin:0;padding:0}
.cp-item{position:relative;padding:10px 0 12px 22px;border-left:2px solid var(--line);margin-left:6px}
.cp-item::before{content:"";position:absolute;left:-7px;top:14px;width:12px;height:12px;border-radius:50%;background:var(--elev);border:2px solid var(--grey-2)}
.cp-done::before{background:var(--st-green);border-color:var(--st-green)}
.cp-progress::before{background:var(--accent);border-color:var(--accent)}
.cp-late::before{background:var(--st-red);border-color:var(--st-red)}
.cp-late{border-left-color:var(--st-red)}
.cp-risk{border-left-color:var(--st-amber)}
.cp-risk::before{border-color:var(--st-amber)}
.cp-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;align-items:baseline}
.cp-name{font-weight:400}
.cp-side{display:flex;flex-wrap:wrap;gap:6px}
.cp-dates{margin:4px 0 4px;font-size:var(--t-small);color:var(--grey-1);font-variant-numeric:tabular-nums}
.cp-links{margin:0;font-size:var(--t-small);display:grid;gap:2px}
.cp-links>div{display:grid;grid-template-columns:4.5em minmax(0,1fr);gap:8px}
.cp-links dt{color:var(--grey-1)}
.cp-links dd{margin:0}

/* Decision deadlines */
.dd-list{list-style:none;margin:0;padding:0}
.dd-list>li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) auto;gap:6px 16px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.dd-list>li:first-child{border-top:0}
.dd-main{display:flex;flex-direction:column}
.dd-item{font-weight:400}
.dd-kind{font-size:var(--t-meta);color:var(--grey-1)}
.dd-figs{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 12px;font-size:var(--t-small);font-variant-numeric:tabular-nums}
.dd-figs dt{font-size:var(--t-meta);color:var(--grey-1)}
.dd-figs dd{margin:0}
.dd-figs strong{font-weight:400}
.dd-st{justify-self:end}

/* Change order history */
.co-open{display:block;width:100%;text-align:left;min-height:40px;padding:2px 0;color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(14,26,46,.35)}
.co-open .co-no{color:var(--ink)}
.co-open[aria-expanded="true"]{text-decoration-color:var(--accent)}
.co-by{display:block;font-size:var(--t-meta);color:var(--grey-1);text-decoration:none}
@media (hover:hover){.co-open:hover{color:var(--accent-deep);text-decoration-color:var(--accent-deep)}}
.co-hist td{background:var(--zebra)}
.tl-head{margin:0 0 8px;font-size:var(--t-small);color:var(--grey-1)}
.tl{list-style:none;margin:0;padding:0}
.tl li{position:relative;padding:0 0 12px 22px;margin-left:6px;border-left:2px solid var(--accent)}
.tl li:last-child{border-left-color:transparent;padding-bottom:0}
.tl-dot{position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--accent)}
.tl-pending{border-left-style:dashed;border-left-color:var(--line)}
.tl-pending .tl-dot{background:var(--elev);border:2px solid var(--grey-2)}
.tl-pending .tl-step,.tl-pending .tl-date{color:var(--grey-2)}
.tl-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px}
.tl-step{font-weight:400}
.tl-date{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--grey-1)}
.tl-amt{grid-column:1/-1;font-variant-numeric:tabular-nums;color:var(--accent)}
.tl-note{grid-column:1/-1;font-size:var(--t-meta);color:var(--grey-1)}

/* % paid by budget category (placeholder) */
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:var(--t-small)}
.cat-list li:first-child{border-top:0}
.cat-list .cat-key{font-weight:400;background:var(--accent-bg);margin:0 -8px;padding:7px 8px}
.cat-bar{height:10px;background:var(--line);position:relative}
.cat-bar span{position:absolute;left:0;top:0;bottom:0;background:var(--ink)}
.cat-v{font-variant-numeric:tabular-nums;white-space:nowrap}
.ph-chart{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;align-items:end;height:150px;padding-top:4px;border-bottom:1px solid var(--ink)}
.ph-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:2px}
.ph-v{font-size:var(--t-meta);font-variant-numeric:tabular-nums}
.ph-bar{flex:0 0 96px;width:min(28px,70%);position:relative;display:block}
.ph-bar span{position:absolute;left:0;right:0;bottom:0;background:var(--accent)}
.ph-m{font-size:var(--t-meta);color:var(--grey-1);margin-bottom:-22px}
.ph-chart+.sample-note{margin-top:28px}

/* Checklist sub-tabs */
.check-tabs{margin-top:12px;margin-bottom:10px;gap:0 14px;flex-wrap:wrap;overflow:visible}
.check-tabs .tab{min-height:40px}
.tab-n{font-size:var(--t-meta);color:var(--grey-2);font-variant-numeric:tabular-nums}

/* Monthly report download */
.dr-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:12px 0 4px}

@media (max-width:1180px){
  .dd-list>li{grid-template-columns:minmax(0,1fr) auto}
  .dd-figs{grid-column:1/-1;grid-row:2}
}
@media (max-width:760px){
  .pay-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pay-strip li:nth-child(3){border-left:0}
  .pay-strip li:nth-child(n+3){border-top-width:3px}
  .cat-list li{grid-template-columns:minmax(0,1fr) auto}
  .cat-list .cat-bar{grid-column:1/-1;grid-row:2}
  .check-tabs .tab-n{color:inherit}
  .pay-table th:nth-child(2),.pay-table td.nowrap{white-space:normal}
}
@media (max-width:420px){
  .dd-figs{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================ v3 (round 2) ============================ */
/* Substantial completion: the table cell opens the history. */
.sc-btn{display:flex;flex-direction:column;align-items:flex-start;min-height:40px;padding:2px 0;text-align:left;color:var(--accent)}
.sc-date{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(14,26,46,.4);white-space:nowrap}
.sc-sub{color:var(--grey-2);font-size:var(--t-meta)}
@media (hover:hover){.sc-btn:hover .sc-date{color:var(--accent-deep);text-decoration-color:var(--accent-deep)}}
.sc-tl .tl-body{gap:2px 12px}
.sc-reason{grid-column:1/-1;font-size:var(--t-small)}
.sc-driver{grid-column:1/-1;font-size:var(--t-meta);color:var(--grey-1)}
.sc-k{color:var(--grey-2)}
.sc-cur .tl-dot{background:var(--st-amber)}
.sc-tl .chip{margin-left:6px;vertical-align:1px}

/* Ball in court. */
.chip.court{background:var(--elev);border-color:var(--line);color:var(--ink);white-space:normal}
.chip.court::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--grey-2);vertical-align:0}
.chip.c-owner::before{background:var(--accent)}
.chip.c-gc::before{background:var(--contracted)}
.chip.c-arch::before{background:#0E1A2E}
.chip.c-sup::before{background:var(--grey-1)}
.court-k{color:var(--grey-1)}
.court-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:6px 0 0;font-size:var(--t-small)}
.court-why{color:var(--grey-1)}
.dd-court{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.dd-court .court-line{margin:0}
.agenda-btn{display:inline-flex;align-items:center;min-height:40px;padding:6px 12px;border:1px solid rgba(14,26,46,.35);border-radius:4px;background:var(--accent-bg);color:var(--accent);font-size:var(--t-small)}
@media (hover:hover){.agenda-btn:hover{border-color:var(--accent)}}
.court-h{margin-top:18px}
.court-filter{margin:0 0 6px}
.seg-n{font-variant-numeric:tabular-nums;opacity:.8}
.court-count{font-size:var(--t-meta);color:var(--grey-1);margin:2px 0 2px}
.court-list{margin-bottom:12px}
.ci-btn{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;align-items:baseline;width:calc(100% + 16px);min-height:44px;padding:11px 8px;margin:0 -8px;text-align:left;transition:background-color .2s var(--ease)}
@media (hover:hover){.ci-btn:hover{background:var(--zebra)}}
.ci-btn:focus-visible{outline-offset:-2px}
.ci-main{font-weight:400;font-size:var(--t-body-sm)}
.ci-st{grid-column:2;grid-row:1}
.ci-sub{grid-column:1/-1;color:var(--grey-2);font-size:var(--t-small)}
.ci-court{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:var(--t-small)}

/* Payment strip: each state lists its items. */
.pay-strip li{padding:0}
.ps-btn{display:flex;flex-direction:column;gap:2px;width:100%;height:100%;min-height:44px;padding:10px 12px;text-align:left;transition:background-color .2s var(--ease)}
@media (hover:hover){.ps-btn:not(:disabled):hover{background:var(--zebra)}}
.ps-btn:disabled{cursor:default}
.ps-btn:focus-visible{outline-offset:-2px}
.ps-go{font-size:var(--t-meta);color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.pay-back{margin:-6px 0 8px}
.pay-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pay-steps li{display:flex;flex-direction:column;gap:6px;padding-top:8px;border-top:3px solid var(--line);font-size:var(--t-small);color:var(--grey-2)}
.pay-steps li.done{border-top-color:var(--st-green);color:var(--grey-1)}
.pay-steps li.now{border-top-color:var(--accent);color:var(--ink);font-weight:400}
.ps-dot{display:none}
.pay-out li{padding:9px 0;border-top:1px solid var(--line);font-size:var(--t-body-sm)}
.pay-out li:first-child{border-top:0}
.pay-out strong{font-weight:400}
.att-list li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2px 12px;border-top:1px solid var(--line);font-size:var(--t-small)}
.att-list li:first-child{border-top:0}
.att-list a{display:inline-flex;align-items:center;min-height:40px;color:var(--accent);text-underline-offset:3px;word-break:break-word}
.att-size{color:var(--grey-2);font-size:var(--t-meta);font-variant-numeric:tabular-nums}
.note{color:var(--grey-1);font-size:var(--t-small)}

/* Cash flow by month: actual solid, forecast hatched. */
.cf{margin-top:4px}
.cf-key{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:var(--t-meta);color:var(--grey-1);margin-bottom:8px}
.cf-k::before{content:"";display:inline-block;width:14px;height:10px;margin-right:6px;vertical-align:-1px}
.cf-k-a::before{background:var(--accent)}
.cf-k-f::before{background:repeating-linear-gradient(135deg,rgba(14,26,46,.55) 0 2px,rgba(14,26,46,.12) 2px 5px);box-shadow:inset 0 0 0 1px rgba(14,26,46,.5)}
.cf-k-m::before{width:8px;height:8px;border-radius:50%;background:var(--contracted);vertical-align:0}
.cf-top{margin-left:auto}
.cf-plot{display:grid;gap:2px;align-items:end;height:150px;border-top:1px dashed var(--line);border-bottom:1px solid var(--ink);touch-action:manipulation}
.cf-col{position:relative;height:100%;display:flex;align-items:flex-end;min-width:0}
.cf-bar{position:relative;display:block;width:100%;min-height:1px}
.cf-a{background:var(--accent)}
.cf-f{background:repeating-linear-gradient(135deg,rgba(14,26,46,.55) 0 2px,rgba(14,26,46,.12) 2px 5px);box-shadow:inset 0 2px 0 var(--accent)}
.cf-split::before{content:"";position:absolute;left:-2px;top:-6px;bottom:0;border-left:1px dashed var(--grey-1)}
.cf-ms .cf-bar::after{content:"";position:absolute;top:-9px;left:50%;margin-left:-3px;width:6px;height:6px;border-radius:50%;background:var(--contracted)}
.cf-col.on .cf-bar{filter:brightness(.75)}
.cf-axis{display:grid;gap:2px;margin-top:4px;font-size:11px;line-height:1.25;color:var(--grey-1);white-space:nowrap}
.cf-axis span{overflow:visible}
.cf-read{min-height:1.45em;margin-top:8px;font-size:var(--t-small);font-variant-numeric:tabular-nums}
.cf-tbl summary{display:flex;align-items:center;min-height:40px;color:var(--accent);font-size:var(--t-small);cursor:pointer}
.cf-tbl table{margin-top:4px}
.cf-how{margin-top:12px;padding:12px 14px;background:var(--panel);border-left:2px solid var(--accent);font-size:var(--t-small);color:var(--grey-1)}
.cf-how-h{color:var(--ink);font-weight:400;margin-bottom:4px}
.cf-kv{margin-top:12px}
.cf-kv dt{max-width:65%}

/* % paid on the vertical contract: month-over-month increases and projection. */
.vp-plot{position:relative;display:grid;grid-template-rows:minmax(0,1fr);height:160px;padding-top:20px;border-bottom:1px solid var(--ink)}
.vp-col{position:relative;height:100%;min-width:0}
.vp-pj{background:var(--zebra)}
.vp-bar{position:absolute;left:18%;right:18%;bottom:0;background:var(--accent)}
.vp-val{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding-bottom:2px;font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums}
.vp-line{position:absolute;left:0;top:20px;width:100%;height:calc(100% - 20px);overflow:visible;pointer-events:none}
.vp-pl{position:absolute;right:4px;bottom:6px;font-size:11px;line-height:1.25;color:var(--accent);text-align:right}
.vp-axis,.vp-inc{display:grid;margin-top:4px;font-size:11px;line-height:1.25;text-align:center;color:var(--grey-1);font-variant-numeric:tabular-nums}
.vp-inc{color:var(--grey-1)}
.vp-pm{color:var(--grey-2)}
.vp-inc-key{margin-top:6px;font-size:var(--t-meta);color:var(--grey-2)}
.vp-key{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:var(--t-small);color:var(--grey-1)}
.vp-dash{flex:none;width:26px;border-top:2px dashed var(--accent)}

@media (max-width:860px){
  .sc-date{white-space:normal}
}
@media (max-width:760px){
  .pay-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cf-top{margin-left:0;flex-basis:100%}
  .cf-plot{height:130px}
  .cf-kv dt{max-width:60%}
}
.court-more{margin:-6px 0 12px}

/* v3: a decision opened from a meeting is briefly highlighted */
.dec-flash{background:var(--accent-bg,#E5E7EB);transition:background .4s ease;}