/* ─────────────────────────────────────────────
   DESIGN TOKENS
   ─────────────────────────────────────────────
   Every colour in the Hub, named once. Change one value here and it
   changes everywhere it is used — which is the point: there were 1,021
   colour literals in this file and 63 distinct colours, so altering the
   green used to mean finding 124 of them.

   Names marked DRIFT are near-duplicates of the token above them: the
   same intention, typed slightly differently on a different day. They
   are kept separate here rather than merged, because merging them
   changes what the app looks like, and that is a decision to make while
   looking at it — see design/theme-lab.html — not a side effect of
   tidying up.

   --surface and --on-brand are both white today. They are separate
   because one is the colour of a card and the other is the colour of
   text on a green button, and tinting a card should not touch the text.
   ───────────────────────────────────────────── */
:root{
  --brand:               #2CA01C;  /* the Hub green: buttons, active nav, links, the owl */
  --brand-hover:         #249018;  /* button hover */
  --brand-deep:          #1F7A14;  /* dark green text on a green tint */
  --brand-light:         #38B529;  /* lighter green accent */
  --brand-sage:          #38A169;  /* muted green, used once */
  --brand-sage-soft:     #4A9668;  /* muted green, used once */
  --brand-ink:           #276749;  /* deep green for text */
  --brand-tint:          #EAF7EA;  /* green wash behind an active or good state */
  --brand-tint-soft:     #F0FBF0;  /* lighter green wash, nav hover */
  --brand-tint-faint:    #F7FCF7;  /* faintest green wash */
  --brand-line:          #C6F6D5;  /* green border */
  --brand-line-strong:   #9AE6B4;  /* stronger green border */
  --ink-strong:          #1A202C;  /* headings at their darkest */
  --ink:                 #2D3748;  /* ordinary body text */
  --ink-slate:           #3E4C5E;  /* used once */
  --ink-soft:            #4A5568;  /* secondary text, nav labels */
  --muted:               #718096;  /* captions, column headings, hints */
  --muted-soft:          #A0AEC0;  /* placeholders and disabled text */
  --line:                #E2E8F0;  /* the standard border everywhere */
  --line-soft:           #EDF2F7;  /* lighter divider, table rows */
  --line-strong:         #CBD5E0;  /* stronger border, form fields */
  --line-strong-soft:    #DDE5EE;  /* DRIFT: between --line and --line-strong */
  --bg-body:             #F5F6FA;  /* the page behind everything */
  --bg:                  #F0F4F8;  /* panel and toolbar background */
  --bg-soft:             #F7FAFC;  /* table headings, zebra stripe */
  --bg-softer:           #FAFBFC;  /* the faintest grey */
  --danger:              #E53E3E;  /* overdue, delete, off track */
  --danger-deep:         #C53030;  /* darker red for text */
  --danger-tint:         #FFF5F5;  /* red wash */
  --danger-line:         #FED7D7;  /* red border */
  /* ORANGE, not amber. Amber sitting beside green read as "slightly off";
     orange reads as "look at this", which is what every use of it means.
     Changed at the token, so it lands on every page at once.

     The four near-duplicate siblings below now hold the SAME value on purpose.
     They were one intention typed on different days, and leaving them amber
     while this went orange would look half-migrated. The names stay so no rule
     has to change, and the theme lab stops reporting them as drift. */
  --warn:                #E8710A;  /* at risk, medium, watch this */
  --warn-ink:            #8A4008;  /* dark amber text */
  --warn-tint:           #FDF1E5;  /* amber wash */
  --warn-line:           #F6C89A;  /* amber border */
  --info:                #3B82F6;  /* informational accent */
  --info-ink:            #2B6CB0;  /* dark blue text */
  --info-tint:           #EBF4FF;  /* blue wash */
  --info-line:           #BFDBFE;  /* blue border */
  --surface:             #fff;   /* cards, panels, the sidebar */
  /* Chart slices. Read at runtime by js/tools/widgets.js, because these become
     SVG fill attributes and var() does not resolve in an attribute value. */
  /* ── QuickBooks-style accents, used on the Dashboard ──
     Read off the QBO screenshot. Green stays the brand; these are the
     SECONDARY colours it was missing.

     --action is the big one. In QBO every "Review all", "Go to registers",
     "Show all" is BLUE, not green — green is reserved for the brand and for
     "this number is good", so a green link competes with both. Splitting the
     two is most of why that interface reads as colourful rather than busy.

     Tune any of these in design/theme-lab.html; the Dashboard picks them up. */
  --action:            #0077C5;  /* links and calls to action */
  --action-hover:      #005B96;
  --action-tint:       #EBF4FF;
  --accent-teal:       #0E6E5C;  /* the darker second series in a bar pair */
  --accent-teal-tint:  #E4F0EE;
  --accent-purple:     #6B2FA0;  /* a fourth chart slice */
  --accent-purple-tint:#F0E9F7;
  --hover-dark:        #14304A;  /* the dark that arrives on hover */

  /* The dashboard banner, corner to corner. --hero-from is the Hub green
     itself; --hero-to is where it lands in the opposite corner. Two stops, not
     three: a mid stop put the brightest green in the middle of the box, which
     reads as a band across it rather than a sweep between two corners. */
  --hero-from:         #2CA01C;
  --hero-to:           #1A6B10;
  /* Four DISTINCT hues rather than four shades of green. A green-only ramp
     makes a pie chart legible only by size; the QBO donut is blue/orange/
     teal/purple precisely so each slice is identifiable at a glance. */
  --chart-1:           #2CA01C;
  --chart-2:           #1D6FD0;
  --chart-3:           #E8710A;
  --chart-4:           #0E6E5C;
  --chart-5:           #6B2FA0;
  --chart-rest:        #A0AEC0;
  --brand-darkest:     #1A6B10;  /* darkest green, inline styles only */
  --brand-forest:      #2E7D32;  /* forest green, used once inline */
  --brand-tint-lime:   #E6F9E3;  /* lime wash, used once inline */
  --on-brand:            #fff;   /* text and icons on a coloured background */
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg-body);color:var(--ink);display:flex;height:100vh;overflow:hidden;}

/* ── SIDEBAR ── */
#sidebar{width:244px;min-width:244px;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;transition:width .25s ease,min-width .25s ease;overflow:hidden;z-index:100;flex-shrink:0;}
#sidebar.collapsed{width:56px;min-width:56px;}

.sb-header{display:flex;align-items:center;padding:0 14px;height:60px;border-bottom:1px solid var(--line);flex-shrink:0;gap:10px;}
.hamburger{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:4px;flex-shrink:0;}
.hamburger span{display:block;width:20px;height:2px;background:var(--ink-soft);border-radius:1px;transition:background .15s;}
.hamburger:hover span{background:var(--brand);}
.logo-wrap{display:flex;align-items:center;gap:8px;overflow:hidden;white-space:nowrap;transition:opacity .2s;}
/* The owl. Colour comes from here rather than from pixels, which is the whole
   point of it being a vector now: one value, not a re-render. */
.logo-mark{width:38px;height:auto;flex-shrink:0;color:var(--brand);display:block;}
#sidebar.collapsed .logo-wrap{opacity:0;width:0;overflow:hidden;}
.logo-text{font-size:12px;font-weight:800;color:var(--ink-strong);line-height:1.3;letter-spacing:.8px;}
.logo-text span{color:var(--brand);font-size:15px;font-weight:900;letter-spacing:1px;}

.sb-nav{flex:1;overflow-y:auto;padding:8px 0;display:flex;flex-direction:column;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:2px;}

.nav-item{display:flex;align-items:center;padding:9px 14px;cursor:pointer;color:var(--ink-soft);font-size:13.5px;font-weight:500;white-space:nowrap;border-right:3px solid transparent;transition:background .15s,color .15s,border-color .15s;user-select:none;}
.nav-item:hover{background:var(--brand-tint-soft);color:var(--brand);}
.nav-item.active{background:var(--brand-tint);color:var(--brand);border-right-color:var(--brand);}
.nav-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.nav-label{margin-left:10px;overflow:hidden;white-space:nowrap;transition:opacity .2s;}
#sidebar.collapsed .nav-label{opacity:0;width:0;margin-left:0;}

.grp-hdr{display:flex;align-items:center;padding:9px 14px;cursor:pointer;color:var(--ink-soft);font-size:13.5px;font-weight:600;white-space:nowrap;user-select:none;transition:background .15s,color .15s;}
.grp-hdr:hover{background:var(--brand-tint-soft);color:var(--brand);}
.grp-hdr .nav-label{margin-left:10px;}
.chevron{margin-left:auto;width:16px;height:16px;display:flex;align-items:center;justify-content:center;transition:transform .22s,opacity .2s;flex-shrink:0;}
.chevron.open{transform:rotate(90deg);}
#sidebar.collapsed .chevron{opacity:0;width:0;}

.grp-children{overflow:hidden;max-height:0;transition:max-height .28s ease;}
.grp-children.open{max-height:600px;}
.nav-sub{padding-left:40px;}
.nav-sub2{padding-left:54px;font-size:13px;}
.p4p-hdr{padding-left:40px;font-size:13px;font-weight:600;}

/* ── MAIN ── */
#main{flex:1;overflow-y:auto;display:flex;flex-direction:column;}
.topbar{background:var(--surface);border-bottom:1px solid var(--line);height:60px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;flex-shrink:0;}
.topbar-title{font-size:17px;font-weight:600;color:var(--ink);}
.topbar-right{display:flex;align-items:center;gap:12px;}
.biz-name{font-size:13px;color:var(--muted);}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}

/* Was 28/32. Outer padding is the cheapest space to reclaim — it separates
   the page from a border nobody is looking at. */
.content{padding:18px 24px;}
.view{display:none;}
.view.active{display:block;}

/* ── SHARED COMPONENTS ── */
/* The title and its one-line description, on every page. 67px including its
   margin, and the description is read once and then read past for months. */
.sec-hdr{margin-bottom:12px;}
.sec-hdr h1{font-size:19px;font-weight:700;color:var(--ink);line-height:1.2;}
.sec-hdr p{color:var(--muted);font-size:12.5px;margin-top:2px;line-height:1.4;}

/* Summary cards */
.cards-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;}
@media(max-width:960px){.cards-row{grid-template-columns:repeat(2,1fr);}}
.sum-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.sc-icon{width:38px;height:38px;border-radius:8px;background:var(--brand-tint);display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--brand);}
.sc-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);}
.sc-val{font-size:26px;font-weight:800;color:var(--ink);margin-top:6px;line-height:1;}
.sc-sub{font-size:12px;color:var(--muted);margin-top:5px;}

/* Tone on the sub line. Previously "6 overdue" and "none overdue" were the
   same grey, so the alarm and the all-clear looked identical. */
.sc-sub.good{color:var(--brand);}
.sc-sub.warn{color:var(--warn);}
.sc-sub.urgent{color:var(--danger);font-weight:600;}

/* A clickable card. It is an <a>, so it needs the text colours resetting and
   room on the right for the arrow. */
.sum-card.sc-link{display:block;position:relative;text-decoration:none;color:inherit;
  padding-right:34px;cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .12s;}
/* Towards dark navy, not green: a hover should say "this is interactive",
   not "this is good news". */
.sum-card.sc-link:hover{border-color:var(--hover-dark);box-shadow:0 4px 14px rgba(20,48,74,.13);transform:translateY(-1px);}
.sum-card.sc-link:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.sc-arrow{position:absolute;top:20px;right:14px;color:var(--line-strong);display:flex;transition:color .12s,transform .12s;}
.sum-card.sc-link:hover .sc-arrow{color:var(--hover-dark);transform:translateX(2px);}

/* Shown instead of the sub line when the figure is unknown: the next action
   rather than a restatement that there is no figure. */
.sc-cta{font-size:12px;color:var(--action);font-weight:600;margin-top:5px;
  display:inline-flex;align-items:center;gap:3px;}
.sum-card.sc-link:hover .sc-cta{text-decoration:underline;}

/* KPI cards */
.kpi-section-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:10px;margin-top:24px;padding-left:2px;}
.kpi-section-lbl:first-child{margin-top:0;}
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:8px;}
.kpi-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:8px;}
@media(max-width:1100px){.kpi-grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:900px){.kpi-grid{grid-template-columns:repeat(2,1fr);}}
.kpi-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px 20px;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.kpi-lbl{font-size:12.5px;color:var(--muted);font-weight:500;}
.kpi-val{font-size:21px;font-weight:700;color:var(--ink);margin-top:6px;}
.kpi-sub{font-size:11.5px;color:var(--muted-soft);margin-top:6px;}
.badge-status{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;margin-top:8px;}
.on-target{background:var(--brand-tint);color:var(--brand);}
.below-target{background:var(--danger-tint);color:var(--danger);}
.near-target{background:var(--warn-tint);color:var(--warn);}

/* Dynamic KPI toolbar */
.kpi-toolbar{display:flex;align-items:center;gap:8px 18px;margin-bottom:12px;
  flex-wrap:wrap;justify-content:space-between;}
.kpi-tb-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.period-tabs{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg-soft);}
.period-tab{padding:8px 20px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;border:none;background:none;transition:background .15s,color .15s;}
.period-tab.active{background:var(--brand);color:var(--on-brand);font-weight:600;}
.cat-pills{display:flex;gap:6px;flex-wrap:wrap;}
.cat-pill{padding:5px 14px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--muted);transition:all .15s;}
.cat-pill.active{background:var(--brand);color:var(--on-brand);border-color:var(--brand);}
/* No margin-left:auto — the group places it, so a wrap no longer strands it
   alone on a right-aligned line of its own. */
.kpi-add-btn{padding:8px 18px;background:var(--brand);color:var(--on-brand);border:none;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;}
.kpi-add-btn:hover{background:var(--brand-hover);}
/* KPI data table */
/* ── the Scorecard grid: frozen header and metric column ─────
   The monthly view is seventeen columns wide and the weekly view has a row per
   metric, so both axes scroll — and a cell in the middle of either is
   meaningless without knowing which month and which metric it belongs to.

   The wrap needs a BOUNDED HEIGHT for any of this to work. position:sticky
   resolves against the nearest scrolling ancestor; with overflow-x:auto and no
   height, this element scrolls horizontally but never vertically, so top:0 had
   nothing to stick to and the page scrolled the header away instead. */
/* 330 was measured against the old chrome. Leaving it would have kept the
   box the same size and spent the reclaimed space on white margin. */
.kpi-wrap{overflow:auto;max-height:calc(100vh - 250px);min-height:280px;}

/* border-collapse:collapse drops borders on sticky cells — the border belongs
   to the collapsed grid, not the cell, so it does not travel. Hence box-shadow
   for every separating line on anything that sticks. */
.kpi-tbl thead th{position:sticky;top:0;z-index:4;
  box-shadow:inset 0 -1px 0 var(--line);}

/* The metric name, frozen left. Opaque, or the cells it passes over show
   through it. */
.kpi-tbl th:first-child,
.kpi-tbl td:first-child{position:sticky;left:0;z-index:2;background:var(--surface);
  box-shadow:inset -1px 0 0 var(--line);}
.kpi-tbl thead th:first-child{z-index:5;background:var(--bg-soft);
  box-shadow:inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line);}

/* The category heading follows you down, so which group a row belongs to is
   never off screen. Several of them share one top offset, so each covers the
   last as it arrives — which is the behaviour wanted.

   28px is the header row's height, and that coupling is the fragile part: change
   the th padding or font-size above and this offset has to move with it, or the
   heading will float over the header or leave a gap under it. There is no way to
   say "below the sticky thing above me" in CSS.

   It has already happened once: the density pass took th padding from 9px to
   7px, the header from 32px to 28px, and left a 5px slot of table showing
   through between the two frozen bands. */
.kpi-tbl tr.cat-row td{position:sticky;top:28px;z-index:3;
  box-shadow:inset 0 -1px 0 var(--line);}

/* The label inside it sticks LEFT as well.
   The cell spans every column, so its text sat at the far left and scrolled
   clean out of view — leaving grey bands with no category on them, which is
   worse than not freezing the heading at all. The cell keeps its full width;
   only the label slides. */
.cat-label{position:sticky;left:14px;display:inline-block;}

/* Alternating rows, so the eye can carry a value back to its metric name
   across seventeen columns.

   EVERY BACKGROUND HERE IS SET PER CELL, not per row, because the first column
   is sticky and needs an opaque background of its own — a transparent sticky
   cell shows the cells it passes over straight through itself. So each state
   has to name the stripe as well, and the four combinations are spelled out
   rather than left to specificity ties between rules that look unrelated. */
.kpi-tbl tbody tr.kpi-alt td,
.kpi-tbl tbody tr.kpi-alt td:first-child{background:var(--bg-body);}

/* The live quarter's tint has to survive the stripe, so it gets its own pair. */
.kpi-tbl tbody tr td.q-live{background:var(--brand-tint-faint);}
.kpi-tbl tbody tr.kpi-alt td.q-live{background:var(--brand-tint);}

/* A row under the cursor, since a frozen name and a distant cell need tying
   together across seventeen columns. Wins over both of the above. */
.kpi-tbl tbody tr:not(.cat-row):hover td,
.kpi-tbl tbody tr:not(.cat-row):hover td.q-live{background:var(--info-tint);}
.kpi-tbl tbody tr:not(.cat-row):hover td:first-child{background:var(--info-tint);}
.kpi-tbl{width:100%;border-collapse:collapse;font-size:13px;}
.kpi-tbl th{padding:7px 12px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);background:var(--bg-soft);border-bottom:1px solid var(--line);white-space:nowrap;}
.kpi-tbl th.num{text-align:right;}
.kpi-tbl td{padding:6px 12px;border-bottom:1px solid var(--bg);color:var(--ink);white-space:nowrap;vertical-align:middle;}
.kpi-tbl td.num{text-align:right;}
.kpi-tbl tr:last-child td{border-bottom:none;}
/* Three levels that must each be tellable from the other two: white rows,
   striped rows, and these. At var(--line-soft) the band sat too close to the stripe and
   the grouping stopped reading as a grouping. */
.kpi-tbl tr.cat-row td{background:var(--line-strong-soft);font-size:10px;font-weight:700;text-transform:uppercase;color:var(--ink-slate);letter-spacing:.6px;padding:4px 12px;}
.ki{width:88px;border:1px solid var(--line);border-radius:5px;padding:4px 7px;font-size:12.5px;text-align:right;background:var(--surface);color:var(--ink);font-family:inherit;}
/* Number inputs reserve room for their spinners, which clipped digits off the
   right of the debt tracker's cells (12400 showing as 1240). These are narrower
   still and about to give up room to a currency symbol, so the same fix. */
.ki::-webkit-outer-spin-button,.ki::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.ki{-moz-appearance:textfield;appearance:textfield;}

/* A cell wearing its unit. The symbol is drawn beside the field, not inside
   its value, because a number input cannot contain a '$'. */
.knum{position:relative;display:inline-block;}
.knum-sym{position:absolute;top:50%;transform:translateY(-50%);font-size:12px;
  color:var(--muted-soft);pointer-events:none;}
.knum-l{left:8px;}
.knum-r{right:8px;}
.knum-in-l{padding-left:19px;}
.knum-in-r{padding-right:19px;}
.ki:focus{outline:2px solid var(--brand);border-color:var(--brand);}
.kv-total{font-weight:700;color:var(--ink);}
.kv-above{color:var(--brand);font-weight:600;}
.kv-below{color:var(--danger);font-weight:600;}
.kv-near{color:var(--warn);font-weight:600;}
.kpi-del{background:none;border:none;cursor:pointer;color:var(--line-strong);padding:2px 7px;border-radius:4px;font-size:18px;line-height:1;transition:color .15s;}
.kpi-del:hover{color:var(--danger);}
/* Annual cards */
.kpi-annual-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media(max-width:900px){.kpi-annual-grid{grid-template-columns:repeat(2,1fr);}}
.kan{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px 20px;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.kan-cat{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted-soft);margin-bottom:4px;}
.kan-name{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:12px;}
.kan-bar-wrap{background:var(--line-soft);border-radius:20px;height:7px;margin-bottom:8px;}
.kan-bar{height:7px;border-radius:20px;transition:width .4s;}
.kan-stats{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);}
.kan-pct{font-size:20px;font-weight:800;color:var(--ink);margin-bottom:4px;}
/* Month nav (weekly view) */
.month-nav{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.month-btn{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:5px 12px;cursor:pointer;font-size:14px;color:var(--ink-soft);}
.month-btn:hover{background:var(--brand-tint-soft);color:var(--brand);}
.month-label{font-size:14px;font-weight:600;color:var(--ink);min-width:120px;text-align:center;}
/* Quarterly Projects */
.prj-qtabs{display:flex;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg-soft);margin-bottom:24px;width:fit-content;}
.prj-qtab{padding:9px 22px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;border:none;background:none;border-right:1px solid var(--line);transition:background .15s,color .15s;}
.prj-qtab:last-child{border-right:none;}
.prj-qtab.active{background:var(--brand);color:var(--on-brand);font-weight:700;}
.prj-qtab.done{background:var(--brand-tint);color:var(--brand);}
.prj-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
@media(max-width:960px){.prj-grid-2{grid-template-columns:1fr;}}
/* Project card */
.prj-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);overflow:hidden;transition:box-shadow .2s;}
.prj-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);}
.prj-card-top{height:4px;width:100%;}
.prj-card-top.status-not-started{background:var(--line-strong);}
.prj-card-top.status-in-progress{background:var(--info);}
.prj-card-top.status-complete{background:var(--brand);}
.prj-card-top.status-at-risk{background:var(--danger);}
.prj-card-hdr{padding:16px 18px 12px;cursor:pointer;user-select:none;}
.prj-card-hdr:hover{background:var(--bg-softer);}
.prj-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px;}
.prj-title{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.35;flex:1;}
.prj-chev{color:var(--muted-soft);font-size:12px;transition:transform .22s;flex-shrink:0;margin-top:2px;}
.prj-chev.open{transform:rotate(90deg);}
.prj-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.prj-assignee{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink-soft);background:var(--bg-soft);border:1px solid var(--line);border-radius:20px;padding:3px 10px;}
.prj-avatar{width:20px;height:20px;border-radius:50%;background:var(--brand);color:var(--on-brand);font-size:9px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.prj-system{font-size:11px;color:var(--muted-soft);font-weight:500;}
/* Progress bar */
.prj-prog-row{display:flex;align-items:center;gap:10px;}
.prj-prog-bar{flex:1;background:var(--line-soft);border-radius:20px;height:6px;}
.prj-prog-fill{height:6px;border-radius:20px;background:var(--brand);transition:width .3s;}
.prj-prog-pct{font-size:11px;font-weight:700;color:var(--muted);min-width:30px;text-align:right;}
/* Collapsible body */
.prj-body{border-top:1px solid var(--bg);overflow:hidden;max-height:0;transition:max-height .3s ease;}
.prj-body.open{max-height:900px;}
/* Criteria */
.prj-criteria-sec{padding:14px 18px 0;}
.prj-criteria-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted-soft);margin-bottom:8px;}
.prj-criterion{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;cursor:pointer;}
.prj-criterion:hover .crit-text{color:var(--ink);}
.crit-icon{width:20px;height:20px;border-radius:50%;border:2px solid var(--line-strong);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:10px;transition:all .15s;}
.crit-icon.complete{background:var(--brand);border-color:var(--brand);color:var(--on-brand);}
.crit-icon.in-progress{background:var(--info);border-color:var(--info);color:var(--on-brand);}
.crit-text{font-size:12.5px;color:var(--ink-soft);line-height:1.4;flex:1;}
.crit-text.complete{text-decoration:line-through;color:var(--muted-soft);}
/* Task table */
.prj-tasks-sec{padding:14px 18px 16px;}
.prj-tasks-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted-soft);margin-bottom:8px;}
.prj-tbl{width:100%;border-collapse:collapse;font-size:12.5px;}
.prj-tbl th{padding:6px 10px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted-soft);background:var(--bg-soft);border-bottom:1px solid var(--line);}
.prj-tbl td{padding:9px 10px;border-bottom:1px solid var(--bg);color:var(--ink);vertical-align:middle;}
.prj-tbl tr:last-child td{border-bottom:none;}
.prj-tbl tr:hover td{background:var(--bg-softer);}
.task-num{color:var(--muted-soft);font-size:11px;font-weight:700;width:22px;}
.task-desc{font-weight:500;min-width:160px;}
.task-comment{color:var(--muted-soft);font-size:11.5px;font-style:italic;}
.task-due{font-size:12px;color:var(--muted);white-space:nowrap;}
.task-due.overdue{color:var(--danger);font-weight:600;}
.ts-sel{border:1px solid var(--line);border-radius:5px;padding:4px 6px;font-size:11.5px;font-family:inherit;color:var(--ink);background:var(--surface);cursor:pointer;}
.ts-sel:focus{outline:2px solid var(--brand);}
.ts-sel.s-complete{background:var(--brand-tint);color:var(--brand);border-color:var(--brand-line);font-weight:600;}
.ts-sel.s-in-progress{background:var(--info-tint);color:var(--info);border-color:var(--info-line);font-weight:600;}
.ts-sel.s-blocked{background:var(--danger-tint);color:var(--danger);border-color:var(--danger-line);font-weight:600;}
.ts-sel.s-not-started{background:var(--bg-soft);color:var(--muted);}
.prj-assignee-sm{font-size:11.5px;color:var(--ink-soft);white-space:nowrap;}
/* Step cards (BEP + Baby Steps) */
.step-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);padding:24px 28px;margin-bottom:20px;}
.step-card-hdr{display:flex;align-items:center;gap:14px;margin-bottom:20px;cursor:pointer;}
.step-badge{width:32px;height:32px;border-radius:50%;background:var(--brand);color:var(--on-brand);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.step-badge.gray{background:var(--line-strong);color:var(--ink-soft);}
.step-card-title{font-size:15px;font-weight:700;color:var(--ink);flex:1;}
.calc-section{margin-bottom:20px;}
.calc-lbl{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted-soft);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--bg);}
.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.fg label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:4px;display:block;}
.fg input,.fg select,.fg textarea{width:100%;border:1px solid var(--line);border-radius:7px;padding:9px 12px;font-size:13.5px;color:var(--ink);font-family:inherit;}
.fg input:focus,.fg select:focus{outline:2px solid var(--brand);border-color:var(--brand);}
.auto-field{background:var(--brand-tint-soft);border:1px solid var(--brand-line);border-radius:7px;padding:9px 12px;font-size:13.5px;color:var(--brand-ink);font-weight:600;font-family:inherit;}
.result-card{border-left:4px solid var(--brand);background:var(--brand-tint-soft);padding:14px 18px;border-radius:0 8px 8px 0;margin-top:12px;}
.result-card .rc-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--brand-ink);margin-bottom:4px;}
.result-card .rc-val{font-size:26px;font-weight:800;color:var(--brand);line-height:1;}
.result-card .rc-sub{font-size:12px;color:var(--brand-sage-soft);margin-top:4px;}
.result-card.hero .rc-val{font-size:36px;}
.result-card.warn .rc-val{color:var(--danger);}
.sens-tbl{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px;}
.sens-tbl th{padding:8px 14px;background:var(--bg-soft);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:1px solid var(--line);}
.sens-tbl td{padding:10px 14px;border-bottom:1px solid var(--bg);}
.sens-tbl tr:last-child td{border-bottom:none;}
.sens-tbl .base-row td{font-weight:700;background:var(--bg-soft);}
/* Progress tracker */
.prog-tracker{display:flex;align-items:center;margin-bottom:28px;}
.prog-step{display:flex;flex-direction:column;align-items:center;gap:4px;}
.prog-dot{width:34px;height:34px;border-radius:50%;background:var(--line);color:var(--muted-soft);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;}
.prog-dot.done{background:var(--brand);color:var(--on-brand);}
.prog-dot.active{background:var(--surface);border:2px solid var(--brand);color:var(--brand);}
.prog-line{flex:1;height:2px;background:var(--line);margin:0 4px;margin-bottom:18px;}
.prog-line.done{background:var(--brand);}
.prog-step-lbl{font-size:9px;color:var(--muted-soft);font-weight:600;text-align:center;white-space:nowrap;}
/* Baby step accordion */
.bs-step{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);overflow:hidden;margin-bottom:12px;}
.bs-hdr{display:flex;align-items:center;gap:14px;padding:16px 20px;cursor:pointer;user-select:none;}
.bs-hdr:hover{background:var(--bg-softer);}
.bs-hdr-badge{width:28px;height:28px;border-radius:50%;background:var(--brand);color:var(--on-brand);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.bs-hdr-badge.gray{background:var(--line-strong);color:var(--muted);}
.bs-hdr-title{flex:1;font-size:14px;font-weight:700;color:var(--ink);}
.bs-done-toggle{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft);}
/* A collapsed step must occupy NO space. max-height:0 alone left the 20px
   padding and the border in place, so every closed step leaked a clipped
   line of its own body text under the header. */
.bs-body{border-top:1px solid transparent;padding:0 20px;max-height:0;overflow:hidden;
  transition:max-height .3s ease,padding .3s ease,border-color .3s ease;}
.bs-body.open{max-height:2000px;padding:20px;border-top-color:var(--bg);}
.bs-desc{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:16px;padding:12px 14px;background:var(--bg-soft);border-radius:8px;border-left:3px solid var(--line);}
.debt-tbl{width:100%;border-collapse:collapse;font-size:13px;}
.debt-tbl th{padding:8px 10px;background:var(--bg-soft);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap;}
.debt-tbl td{padding:8px 10px;border-bottom:1px solid var(--bg);vertical-align:middle;}
.debt-tbl tr:last-child td{border-bottom:none;}
.debt-inp{width:100%;border:1px solid var(--line);border-radius:5px;padding:5px 7px;font-size:12.5px;font-family:inherit;}
.debt-inp:focus{outline:2px solid var(--brand);}
.debt-auto{background:var(--brand-tint-soft);border:1px solid var(--brand-line);border-radius:5px;padding:5px 7px;font-size:12.5px;color:var(--brand-ink);font-weight:600;}
/* Retention summary cards */
.ret-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px;}
@media(max-width:900px){.ret-stat-grid{grid-template-columns:repeat(2,1fr);}}
/* P4P */
.p4p-result-hero{background:linear-gradient(135deg,var(--brand),var(--brand-sage));color:var(--on-brand);border-radius:12px;padding:24px 28px;margin:20px 0;text-align:center;}
.p4p-result-hero .ph-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;opacity:.8;margin-bottom:6px;}
.p4p-result-hero .ph-val{font-size:48px;font-weight:900;line-height:1;}
.p4p-result-hero .ph-sub{font-size:13px;opacity:.85;margin-top:8px;}
.p4p-tbl{width:100%;border-collapse:collapse;font-size:13px;}
.p4p-tbl th{padding:9px 14px;background:var(--bg-soft);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:1px solid var(--line);}
.p4p-tbl td{padding:10px 14px;border-bottom:1px solid var(--bg);color:var(--ink);}
.p4p-tbl tr:last-child td{border-bottom:none;}
.p4p-tbl .auto-td{background:var(--brand-tint-soft);color:var(--brand-ink);font-weight:600;}
.p4p-inp{border:1px solid var(--line);border-radius:5px;padding:5px 8px;font-size:13px;font-family:inherit;width:80px;text-align:right;}
/* Punch List inline selects */
.punch-stat-sel{border:none;border-radius:5px;padding:4px 8px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;}
.punch-stat-open{background:var(--bg-soft);color:var(--muted);}
.punch-stat-in-progress{background:var(--info-tint);color:var(--info);}
.punch-stat-done{background:var(--brand-tint);color:var(--brand);}
.punch-stat-overdue{background:var(--danger-tint);color:var(--danger);}
/* Summary bar */
.tool-stat-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap;}
.tool-stat{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px 18px;min-width:120px;}
.tool-stat .ts-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted-soft);}
.tool-stat .ts-val{font-size:20px;font-weight:800;color:var(--ink);margin-top:2px;}
/* Inline table inputs */
.tbl-inp{border:1px solid var(--line);border-radius:5px;padding:5px 7px;font-size:12.5px;font-family:inherit;width:70px;text-align:right;}
.tbl-inp:focus{outline:2px solid var(--brand);}
.tbl-inp.wide{width:90px;}
/* Debt table extra payment editable */
.debt-extra-inp{border:1px solid var(--line);border-radius:5px;padding:5px 7px;font-size:13px;font-family:inherit;width:80px;text-align:right;}
.debt-extra-inp:focus{outline:2px solid var(--brand);}
/* Big 3 styles */
.b3-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:24px;}
@media(max-width:900px){.b3-grid{grid-template-columns:1fr;}}
.b3-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);overflow:hidden;}
.b3-card-hdr{padding:14px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;}
.b3-pos{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted-soft);}
.b3-name{font-size:14.5px;font-weight:700;color:var(--ink);}
.b3-edit-btn{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:4px 12px;font-size:12px;cursor:pointer;color:var(--ink-soft);}
.b3-edit-btn:hover{border-color:var(--action);color:var(--action);}
/* Add KPI Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:999;display:none;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--surface);border-radius:14px;padding:28px 32px;width:480px;max-width:95vw;box-shadow:0 20px 60px rgba(0,0,0,.18);}
.modal-title{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:20px;}
.modal-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.modal-row.full{grid-template-columns:1fr;margin-bottom:14px;}
.modal-box .fg label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:5px;display:block;}
.modal-box .fg input,.modal-box .fg select{width:100%;border:1px solid var(--line);border-radius:7px;padding:9px 12px;font-size:13.5px;color:var(--ink);font-family:inherit;}
.modal-box .fg input:focus,.modal-box .fg select:focus{outline:2px solid var(--brand);border-color:var(--brand);}
.modal-toggle{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-soft);margin-bottom:14px;}
.modal-toggle input[type=checkbox]{width:16px;height:16px;accent-color:var(--brand);}
.modal-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;}
.modal-cancel{padding:9px 20px;border:1px solid var(--line);border-radius:7px;background:var(--surface);font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;}
.modal-save{padding:9px 20px;border:none;border-radius:7px;background:var(--brand);color:var(--on-brand);font-size:13px;font-weight:600;cursor:pointer;}

/* Table card */
.tcard{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);overflow:hidden;}
.tcard-hdr{padding:14px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;}
.tcard-hdr h2{font-size:14.5px;font-weight:600;color:var(--ink);}
table{width:100%;border-collapse:collapse;}
thead th{padding:10px 18px;text-align:left;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;background:var(--bg-soft);border-bottom:1px solid var(--line);}
tbody td{padding:12px 18px;font-size:13.5px;color:var(--ink);border-bottom:1px solid var(--bg);}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--bg-softer);}
.tcard-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:28px;flex-wrap:wrap;}
.foot-stat .fs-lbl{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);}
.foot-stat .fs-val{font-size:19px;font-weight:700;color:var(--ink);margin-top:4px;}
.foot-stat .fs-val.green{color:var(--brand);}
.foot-stat .fs-val.red{color:var(--danger);}
.foot-stat .fs-val.amber{color:var(--warn);}

/* Badges */
.badge{display:inline-block;padding:3px 9px;border-radius:12px;font-size:11px;font-weight:600;}
.bg{background:var(--brand-tint);color:var(--brand);}
.by{background:var(--warn-tint);color:var(--warn);}
.bb{background:var(--info-tint);color:var(--info-ink);}
.bgr{background:var(--line-soft);color:var(--muted);}
.br{background:var(--danger-tint);color:var(--danger);}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:opacity .15s,background .15s;}
.btn-p{background:var(--brand);color:var(--on-brand);}
.btn-p:hover{background:var(--brand-hover);}
.btn-o{background:var(--surface);border:1px solid var(--line-strong);color:var(--ink-soft);}
.btn-o:hover{background:var(--bg-soft);}

/* Forms */
.fg{display:flex;flex-direction:column;gap:5px;}
.fg label{font-size:12.5px;font-weight:600;color:var(--ink-soft);}
.fg input{padding:9px 11px;border:1px solid var(--line-strong);border-radius:6px;font-size:13.5px;color:var(--ink);font-family:inherit;background:var(--surface);transition:border-color .15s,box-shadow .15s;}
.fg input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(44,160,28,.12);}

/* Result & breakdown */
.result-box{background:var(--brand-tint-soft);border:1px solid var(--brand-line-strong);border-radius:10px;padding:20px 24px;}
.rb-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--brand);}
.rb-val{font-size:30px;font-weight:800;color:var(--brand);margin-top:6px;}
.rb-sub{font-size:12.5px;color:var(--ink-soft);margin-top:5px;}
.breakdown{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px 20px;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.breakdown h3{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:12px;}
.bd-row{display:flex;justify-content:space-between;font-size:13px;padding:4px 0;}
.bd-row span:first-child{color:var(--muted);}
.bd-row span:last-child{font-weight:600;color:var(--ink);}
.bd-total{border-top:1px solid var(--line);padding-top:10px;margin-top:6px;display:flex;justify-content:space-between;font-size:14px;font-weight:700;color:var(--ink);}

/* Baby steps */
.step-list{display:flex;flex-direction:column;gap:10px;max-width:700px;}
.step-item{background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:14px 18px;display:flex;align-items:center;gap:14px;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:border-color .2s,background .2s;}
.step-item.done{border-color:var(--brand-line-strong);background:var(--brand-tint-soft);}
.step-num{width:30px;height:30px;border-radius:50%;background:var(--line);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;flex-shrink:0;transition:background .2s,color .2s;}
.step-item.done .step-num{background:var(--brand);color:var(--on-brand);}
.step-info{flex:1;}
.step-title{font-size:14px;font-weight:600;color:var(--ink);}
.step-desc{font-size:12px;color:var(--muted);margin-top:2px;}

/* Toggle */
.toggle{position:relative;width:40px;height:22px;flex-shrink:0;}
.toggle input{opacity:0;width:0;height:0;}
.toggle-track{position:absolute;inset:0;background:var(--line-strong);border-radius:11px;cursor:pointer;transition:background .2s;}
.toggle-track::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:var(--surface);border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.toggle input:checked+.toggle-track{background:var(--brand);}
.toggle input:checked+.toggle-track::before{transform:translateX(18px);}

/* Punch checkboxes */
.p-check{width:18px;height:18px;border:2px solid var(--line-strong);border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;flex-shrink:0;}
.p-check.done{background:var(--brand);border-color:var(--brand);}
.p-check.done::after{content:'✓';color:var(--on-brand);font-size:11px;font-weight:700;}

/* Mini input */
.mini-input{width:82px;padding:4px 8px;border:1px solid var(--line-strong);border-radius:4px;font-size:13px;font-family:inherit;color:var(--ink);}
.mini-input:focus{outline:none;border-color:var(--brand);}

/* Layout helpers */
.note{font-size:12px;color:var(--muted-soft);font-style:italic;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:880px;}
@media(max-width:700px){.two-col{grid-template-columns:1fr;}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:22px;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.panel h2{font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:16px;}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* ── DASHBOARD SPECIFIC ── */
/* 90px of gradient for a greeting and a date. Slimmer, and the greeting and
   the context now sit on one line rather than stacked. */
/* `to bottom right` rather than 135deg: an angle is fixed, so on a wide banner
   it stops reaching the corners. `to bottom right` is defined to run corner to
   corner whatever the box's shape. */
.welcome-banner{background:linear-gradient(to bottom right,var(--hero-from) 0%,var(--hero-to) 100%);border-radius:10px;padding:14px 20px;margin-bottom:14px;color:var(--on-brand);display:flex;align-items:center;justify-content:space-between;gap:18px;}
.wb-left{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.wb-left h2{font-size:16px;font-weight:700;}
.wb-left p{font-size:12.5px;opacity:.85;margin-top:0;}
.wb-badge{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:7px;padding:5px 11px;font-size:12px;font-weight:600;white-space:nowrap;}

/* Foundation grid */
.foundation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px;}
@media(max-width:960px){.foundation-grid{grid-template-columns:1fr;}}
.fc-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.fc-header{display:flex;align-items:center;gap:9px;margin-bottom:9px;}
.fc-icon{width:28px;height:28px;border-radius:8px;background:var(--brand-tint);color:var(--brand);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.fc-label{font-size:13px;font-weight:700;color:var(--ink);}
.fc-body{font-size:12.5px;color:var(--ink-soft);line-height:1.5;}
.values-list{list-style:none;display:flex;flex-direction:column;gap:4px;}
.values-list li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);}
.values-list li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--brand);flex-shrink:0;}

/* Goals section */
.goals-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.goals-header h2{font-size:15px;font-weight:700;color:var(--ink);}
.goal-item{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:14px;margin-bottom:7px;box-shadow:0 1px 3px rgba(0,0,0,.05);}
.goal-icon{width:34px;height:34px;border-radius:8px;background:var(--brand-tint);color:var(--brand);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.goal-info{flex:1;min-width:0;}
.goal-title{font-size:13.5px;font-weight:600;color:var(--ink);}
.goal-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.goal-right{text-align:right;flex-shrink:0;}
.goal-pct{font-size:14px;font-weight:700;color:var(--brand);}
.goal-bar-wrap{width:100px;height:6px;background:var(--line);border-radius:3px;margin-top:4px;}
.goal-bar{height:6px;border-radius:3px;background:var(--brand);transition:width .3s;}
.goal-bar.amber{background:var(--warn);}
.goal-bar.red{background:var(--danger);}

/* Icon sizes via SVG use */
.icon{display:inline-block;}

/* ── Login overlay ───────────────────────────────────────────
   Only visible when CONFIG.STORE_BACKEND === 'supabase'.
   Uses the existing palette: var(--brand) primary, var(--line) borders,
   var(--ink) text, var(--muted) muted, var(--danger) error. */
.login-overlay{position:fixed;inset:0;z-index:9999;background:var(--bg-soft);
  display:flex;align-items:center;justify-content:center;padding:24px;}
.login-box{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:32px 28px;text-align:center;
  box-shadow:0 4px 20px rgba(45,55,72,.07);}
.login-brand{font-weight:800;font-size:15px;letter-spacing:.06em;color:var(--ink);
  line-height:1.25;margin-bottom:20px;}
.login-brand span{display:block;color:var(--brand);}
.login-sub{font-size:13.5px;color:var(--muted);line-height:1.5;margin:0 0 16px;}
.login-box input[type=email]{width:100%;box-sizing:border-box;border:1px solid var(--line);
  border-radius:8px;padding:11px 13px;font-size:14px;font-family:inherit;color:var(--ink);
  margin-bottom:10px;}
.login-box input[type=email]:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(44,160,28,.12);}
.login-box button{width:100%;border:none;border-radius:8px;background:var(--brand);color:var(--on-brand);
  font-size:14px;font-weight:600;font-family:inherit;padding:11px 14px;cursor:pointer;}
.login-box button:hover:not(:disabled){background:var(--brand-hover);}
.login-box button:disabled{background:var(--muted-soft);cursor:default;}
.login-msg{font-size:12.5px;color:var(--brand);margin:12px 0 0;line-height:1.45;min-height:1em;}
.login-msg.err{color:var(--danger);}
.login-spinner{width:26px;height:26px;margin:6px auto 14px;border-radius:50%;
  border:2.5px solid var(--line);border-top-color:var(--brand);animation:login-spin .7s linear infinite;}
@keyframes login-spin{to{transform:rotate(360deg)}}

/* Company switcher + sign out in the topbar */
.company-switch{border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:13px;
  font-family:inherit;color:var(--ink);background:var(--surface);max-width:220px;cursor:pointer;}
.company-switch:focus{outline:none;border-color:var(--brand);}
.sign-out{border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--muted);
  font-size:12.5px;font-family:inherit;padding:6px 11px;cursor:pointer;}
.sign-out:hover{color:var(--danger);border-color:var(--danger);}

/* ── Save state indicator ────────────────────────────────────
   Shows what Store reports. 'error' has to be impossible to miss:
   a silently failed save is the worst bug this app can have. */
.save-state{font-size:12px;font-weight:600;padding:4px 9px;border-radius:20px;
  white-space:nowrap;border:1px solid transparent;}
.save-state.pending{color:var(--warn);background:var(--warn-tint);border-color:var(--warn-line);}
.save-state.saving {color:var(--muted);background:var(--bg-soft);border-color:var(--line);}
.save-state.saved  {color:var(--brand);background:var(--brand-tint-soft);border-color:var(--brand-line);}
.save-state.error  {color:var(--on-brand);background:var(--danger);border-color:var(--danger);cursor:pointer;}
.save-state.error:hover{background:var(--danger-deep);}

/* ── Business Foundation editing ─────────────────────────────── */
.fc-input{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;
  padding:9px 12px;font-size:13.5px;font-family:inherit;color:var(--ink);resize:vertical;line-height:1.5;}
.fc-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(44,160,28,.12);}
.fc-hint{font-size:11.5px;color:var(--muted-soft);margin-top:5px;}
/* Prompt shown in place of content a client hasn't written yet — visibly
   a question, never mistakable for their own words. */
.fc-empty{color:var(--muted-soft);font-style:italic;}

/* ── Mission Goals editing ───────────────────────────────────── */
.goal-empty{font-size:13.5px;color:var(--muted-soft);font-style:italic;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:18px 20px;line-height:1.5;}
.goal-edit{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;margin-bottom:10px;}
.ge-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;}
.ge-row:last-child{margin-bottom:0;}
.ge-in{border:1px solid var(--line);border-radius:7px;padding:7px 10px;font-size:13px;
  font-family:inherit;color:var(--ink);background:var(--surface);min-width:0;}
.ge-in:focus{outline:none;border-color:var(--brand);}
.ge-title{flex:1;}
.ge-icon{width:104px;}
.ge-mode{width:170px;}
.ge-chk{font-size:12px;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:5px;}
.ge-del{border:1px solid var(--line);background:var(--surface);color:var(--muted-soft);border-radius:7px;
  width:30px;height:30px;font-size:17px;line-height:1;cursor:pointer;flex-shrink:0;}
.ge-del:hover{color:var(--danger);border-color:var(--danger);}

/* ── Empty states ────────────────────────────────────────────
   A table of headers with nothing beneath reads as a failure to load.
   Applied by applyEmptyState() from the registry declaration. */
.table-empty{padding:26px 16px;text-align:center;font-size:13.5px;color:var(--muted-soft);
  font-style:italic;}
.table-empty.block{background:var(--surface);border:1px solid var(--line);border-radius:10px;}

/* ── Projects: toolbar, inline editing, empty sections ───────── */
.prj-toolbar{display:flex;justify-content:flex-end;margin-bottom:12px;}
.btn-sm{font-size:12px;padding:5px 12px;}
.prj-none{font-size:12.5px;color:var(--muted-soft);font-style:italic;padding:6px 0 10px;}
.prj-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;}
.prj-card.editing{outline:2px solid var(--brand);outline-offset:-2px;}
.prj-edit-body{padding:14px 16px;}
.prj-edit-lbl{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin:14px 0 8px;}

/* ── Pricing tool ────────────────────────────────────────────
   Four pages sharing one assumptions model. Matrices are dense by
   design — they replace a spreadsheet, and a client scanning for a
   square-footage band wants rows, not cards. */
.pr-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;margin-bottom:16px;overflow:hidden;}
.pr-card-hdr{font-size:13px;font-weight:700;color:var(--ink);padding:10px 14px;
  border-bottom:1px solid var(--bg);background:var(--bg-soft);}
.pr-tier{font-weight:400;color:var(--muted);font-size:12px;}

.pr-field{display:flex;align-items:center;gap:16px;padding:11px 16px;border-bottom:1px solid var(--bg-soft);}
.pr-field:last-child{border-bottom:none;}
.pr-label{flex:1;font-size:13.5px;color:var(--ink);line-height:1.4;}
.pr-hint{display:block;font-size:11.5px;color:var(--muted-soft);margin-top:2px;}
.pr-control{flex-shrink:0;font-size:13px;color:var(--muted);}
.pr-in{border:1px solid var(--line);border-radius:7px;padding:7px 10px;font-size:13.5px;
  font-family:inherit;color:var(--ink);background:var(--surface);}
.pr-in:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(44,160,28,.10);}

/* Derived figures — the "here's why your rate is what it is" panel */
.pr-derived{display:flex;gap:1px;background:var(--bg);}
.pr-d{flex:1;background:var(--surface);padding:16px;text-align:center;}
.pr-d-lbl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
.pr-d-val{font-size:24px;font-weight:800;color:var(--ink);margin:6px 0 3px;}
.pr-d.hero .pr-d-val{color:var(--brand);}
.pr-d-sub{font-size:11.5px;color:var(--muted-soft);line-height:1.35;}
.pr-note{font-size:12.5px;color:var(--muted);padding:12px 16px;line-height:1.5;background:var(--bg-soft);
  border-top:1px solid var(--bg);}

/* COGS benchmark scale from the sheet's support tab */
.pr-bench{display:flex;gap:1px;background:var(--bg);}
.pr-b{flex:1;background:var(--surface);padding:13px 10px;text-align:center;}
.pr-b-pct{display:block;font-size:17px;font-weight:800;}
.pr-b-lbl{display:block;font-size:11px;color:var(--muted);margin-top:3px;line-height:1.3;}
.pr-b.ok .pr-b-pct{color:var(--brand);}
.pr-b.warn .pr-b-pct{color:var(--warn);}
.pr-b.bad .pr-b-pct{color:var(--danger);}

.pr-tbl{width:100%;border-collapse:collapse;font-size:12.5px;}
.pr-tbl th{text-align:left;padding:9px 12px;font-size:11px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--muted);background:var(--bg-soft);border-bottom:1px solid var(--line);
  white-space:nowrap;}
.pr-tbl td{padding:8px 12px;border-bottom:1px solid var(--bg-soft);color:var(--ink-soft);white-space:nowrap;}
.pr-tbl tr:last-child td{border-bottom:none;}
.pr-price{font-weight:700;color:var(--ink);}
.pr-custom td{color:var(--muted-soft);font-style:italic;}
.pr-badge{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:20px;white-space:nowrap;}
.pr-badge.ok{background:var(--brand-tint-soft);color:var(--brand);}
.pr-badge.warn{background:var(--warn-tint);color:var(--warn);}
.pr-badge.bad{background:var(--danger-tint);color:var(--danger);}

/* Square-footage lookup */
.pr-lookup .pr-quote{display:flex;gap:1px;background:var(--bg);}
.pr-q{flex:1;background:var(--surface);padding:16px;text-align:center;}
.pr-q-lbl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
.pr-q-val{font-size:26px;font-weight:800;color:var(--brand);margin:5px 0 3px;}
.pr-q-sub{font-size:11.5px;color:var(--muted-soft);}

/* ── Tool error banner ───────────────────────────────────────
   A render that throws used to leave a blank page, which a client cannot
   report usefully. Now it says so, and says why. */
.tool-error{background:var(--danger-tint);border:1px solid var(--danger);border-radius:10px;
  padding:14px 16px;margin:16px 0;}
.tool-error strong{display:block;font-size:13.5px;color:var(--danger);margin-bottom:5px;}
.tool-error span{display:block;font-size:12.5px;color:var(--ink-soft);line-height:1.5;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-word;}

/* Secondary action under the login form (magic-link fallback, cancel) */
.login-alt{font-size:12px;color:var(--muted-soft);margin:12px 0 0;line-height:1.5;}
.login-alt a{color:var(--brand);text-decoration:none;font-weight:600;}
.login-alt a:hover{text-decoration:underline;}
.login-box input[type=password]{width:100%;box-sizing:border-box;border:1px solid var(--line);
  border-radius:8px;padding:11px 13px;font-size:14px;font-family:inherit;color:var(--ink);
  margin-bottom:10px;}
.login-box input[type=password]:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(44,160,28,.12);}

/* ── Project Pricing quote builder ───────────────────────────── */
.pr-hdr-note{float:right;font-weight:400;font-size:11.5px;color:var(--muted-soft);}
.pr-bench-pick .pr-b{cursor:pointer;}
.pr-bench-pick .pr-b:hover{background:var(--bg-soft);}
.pr-bench-pick .pr-b.picked{background:var(--brand-tint-soft);box-shadow:inset 0 0 0 2px var(--brand);}
.pr-tbl tr.pr-total td{border-top:2px solid var(--line);font-weight:700;color:var(--ink);
  background:var(--bg-soft);padding-top:10px;}
.pr-detail{color:var(--muted-soft);font-size:11.5px;}

/* ── Currency adornment inside editable cells ────────────────
   The '$' sits in the field's padding rather than in its value, so the
   input stays type=number: stepper arrows keep working, mobile shows a
   numeric keypad, and nothing has to parse currency text back to a number. */
.pr-in{box-sizing:border-box;}
.pr-money{position:relative;display:inline-block;}
.pr-money-sym{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  font-size:13.5px;color:var(--muted);pointer-events:none;}
.pr-in-money{padding-left:23px;}

/* A context line above an output-only page, pointing back at Set Up */
.pr-standalone{font-size:12.5px;color:var(--muted);line-height:1.55;margin-bottom:16px;
  padding:12px 16px;background:var(--bg);border-radius:10px;}
.pr-standalone a{color:var(--brand);font-weight:600;text-decoration:none;}
.pr-standalone a:hover{text-decoration:underline;}

/* Menu entries that perform an action rather than opening a page */
.nav-item.nav-action:hover .nav-label{color:var(--danger);}

/* Pinned menu groups sit against the bottom edge of the sidebar, separated
   from the tools above so account actions read as their own area. */
.sb-bottom{margin-top:auto;border-top:1px solid var(--line);padding-top:6px;flex-shrink:0;}

/* Rule above a top-level menu group. Deliberately identical to .sb-bottom's
   so the two separators in the sidebar match. */
.grp-hdr.grp-divided{margin-top:6px;border-top:1px solid var(--line);padding-top:15px;}

/* Debt Paydown: inline-editable cells and the computed plan note */
.debt-td{padding:9px 8px;border-bottom:1px solid var(--bg);vertical-align:middle;font-size:13px;
  color:var(--ink-soft);white-space:nowrap;}
.debt-in{border:1px solid var(--line);border-radius:7px;padding:6px 9px;font-size:13px;
  font-family:inherit;color:var(--ink);background:var(--surface);box-sizing:border-box;}
.debt-in:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(44,160,28,.10);}
.debt-in-name{width:152px;font-weight:600;}
.debt-in-num{width:76px;text-align:right;}
.debt-money,.debt-pct{position:relative;display:inline-block;}
.debt-money .debt-sym{position:absolute;left:9px;top:50%;transform:translateY(-50%);
  font-size:13px;color:var(--muted);pointer-events:none;}
.debt-money .debt-in-num{padding-left:20px;}
/* nowrap keeps the % beside its field instead of dropping below it */
.debt-pct{white-space:nowrap;}
.debt-pct .debt-in-num{width:64px;}
.debt-pct .debt-sym-r{margin-left:3px;font-size:12.5px;color:var(--muted);}
.debt-note{font-size:12.5px;color:var(--muted);line-height:1.55;padding:14px 16px;
  background:var(--bg-soft);border-top:1px solid var(--bg);}
.debt-note strong{color:var(--ink);}
.tool-stat .ts-sub{font-size:11px;color:var(--muted-soft);margin-top:3px;line-height:1.35;}

/* Number inputs reserve room for stepper arrows. In a dense table that space
   costs a digit — balances were rendering as "1240" instead of "12400". The
   arrows are no use for a balance anyway, so reclaim the space. */
.debt-in-num::-webkit-outer-spin-button,
.debt-in-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.debt-in-num{-moz-appearance:textfield;appearance:textfield;width:82px;}
.debt-pct .debt-in-num{width:66px;}

/* Debt Paydown: type column and attack-order control */
.debt-in-type{width:132px;font-size:12.5px;}
.debt-order{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:1px solid var(--bg);background:var(--bg-soft);}
.debt-order-lbl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
.debt-order-note{font-size:11.5px;color:var(--muted-soft);}

/* Baby Steps rows that are really tracker records, shown here as a view */
.bs-linked{font-size:12px;color:var(--muted);background:var(--bg);border-radius:8px;
  padding:9px 12px;margin-bottom:10px;line-height:1.5;}
.bs-linked a{color:var(--action);font-weight:600;text-decoration:none;}
.bs-linked a:hover{text-decoration:underline;}
.bs-linked-row{background:var(--bg-soft);}
.bs-linked-name{font-size:13px;color:var(--ink);font-weight:600;}
.bs-linked-tag{display:block;font-size:10.5px;color:var(--muted-soft);margin-top:1px;}

/* Settings → Users */
.users-role{width:118px;font-size:12.5px;}
.users-you{font-size:10.5px;font-weight:700;color:var(--brand);background:var(--brand-tint-soft);
  border-radius:20px;padding:1px 7px;margin-left:5px;}
.users-add{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding:14px 16px;border-top:1px solid var(--bg);}

/* A credential shown exactly once — must not look like ordinary copy */
.users-cred{border-color:var(--brand);}
.users-cred .pr-card-hdr{background:var(--brand-tint-soft);color:var(--brand);border-bottom-color:var(--brand-line);}
.users-cred-row{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--bg-soft);}
.users-cred-lbl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);width:70px;flex-shrink:0;}
.users-cred code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;
  color:var(--ink);background:var(--bg-soft);border:1px solid var(--line);border-radius:6px;padding:4px 9px;
  user-select:all;}
.users-del-acct{border:1px solid var(--line);background:var(--surface);color:var(--muted-soft);border-radius:7px;
  font-size:11px;font-family:inherit;padding:4px 8px;cursor:pointer;}
.users-del-acct:hover{color:var(--danger);border-color:var(--danger);}

/* Settings → Accounts (platform admin) */
.comp-sel{width:150px;font-size:12.5px;}
.comp-name{font-weight:600;color:var(--ink);}
.comp-slug{display:block;font-size:10.5px;color:var(--muted-soft);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.comp-current{background:var(--bg-soft);}
.comp-warn{font-size:10.5px;font-weight:700;color:var(--warn);background:var(--warn-tint);
  border-radius:20px;padding:1px 7px;margin-left:4px;}
.comp-new{padding:14px 16px;border-top:1px solid var(--bg);background:var(--bg-soft);}

/* Archived accounts stay listed here but read as set aside */
.comp-archived{background:var(--bg-soft);}
.comp-archived .comp-name{color:var(--muted-soft);}
.comp-archived .comp-sel{opacity:.6;}
.comp-arch-tag{font-size:10.5px;font-weight:700;color:var(--muted);background:var(--line);
  border-radius:20px;padding:1px 7px;margin-left:5px;}

/* Settings → Coaches */
.coach-count{display:inline-block;min-width:20px;font-weight:700;color:var(--ink);}
.coach-names{display:block;font-size:11px;color:var(--muted-soft);line-height:1.35;max-width:280px;
  white-space:normal;}
.coach-none{font-size:12px;color:var(--muted-soft);font-style:italic;}

/* ── Info tooltip ────────────────────────────────────────────
   For read-once explanation. A permanent card becomes furniture; this stays
   out of the way until asked for. Opens on hover AND focus so it is reachable
   by keyboard and by tap, not just by mouse. */
.info{position:relative;display:inline-flex;align-items:center;vertical-align:middle;
  margin-left:6px;cursor:help;outline:none;}
.info-mark{display:flex;align-items:center;justify-content:center;width:15px;height:15px;
  border-radius:50%;background:var(--line);color:var(--muted);font-size:10.5px;font-weight:700;
  line-height:1;transition:background .15s,color .15s;}
.info:hover .info-mark,.info:focus .info-mark{background:var(--brand);color:var(--on-brand);}
.info-pop{position:absolute;top:calc(100% + 8px);left:-8px;z-index:60;width:290px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;padding:12px 14px;
  box-shadow:0 6px 20px rgba(45,55,72,.16);opacity:0;visibility:hidden;
  transform:translateY(-3px);transition:opacity .13s,transform .13s,visibility .13s;
  text-align:left;font-weight:400;text-transform:none;letter-spacing:0;}
.info:hover .info-pop,.info:focus .info-pop{opacity:1;visibility:visible;transform:translateY(0);}
.info-title{display:block;font-size:11.5px;font-weight:700;color:var(--ink);margin-bottom:7px;}
.info-text{font-size:12px;color:var(--ink-soft);line-height:1.5;}
.info-row{display:flex;gap:8px;margin-bottom:7px;}
.info-row:last-child{margin-bottom:0;}
.info-lbl{flex-shrink:0;width:74px;font-size:11.5px;font-weight:700;color:var(--ink);}
.info-txt{font-size:11.5px;color:var(--muted);line-height:1.45;}
/* Cards clip their contents for the rounded corners, which would cut the
   popout off. Only relax that on cards that actually contain one. */
.pr-card:has(.info){overflow:visible;}

/* ── Dashboard card editor (js/tools/widgets.js) ─────────────── */
.ws-editor{margin-top:4px;}
.ws-rows{padding:6px 0;}
.ws-row{display:flex;align-items:center;gap:10px;padding:8px 16px;border-bottom:1px solid var(--bg);}
.ws-row:last-child{border-bottom:none;}
.ws-row-bad{background:var(--danger-tint);}
.ws-ord{width:20px;flex:none;font-size:11px;font-weight:700;color:var(--muted-soft);text-align:center;}
.ws-name{flex:1;min-width:120px;max-width:280px;}
.ws-note{flex:1;font-size:11.5px;color:var(--muted-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ws-row-bad .ws-note{color:var(--danger);}
.ws-acts{display:flex;gap:4px;flex:none;}
.ws-btn{width:26px;height:26px;border:1px solid var(--line);background:var(--surface);border-radius:6px;
  color:var(--muted);font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:border-color .12s,color .12s;}
.ws-btn:hover:not(:disabled){border-color:var(--brand);color:var(--brand);}
.ws-btn:disabled{opacity:.35;cursor:default;}
.ws-del:hover:not(:disabled){border-color:var(--danger);color:var(--danger);}

.ws-sources{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 16px;
  border-top:1px solid var(--bg);}
.ws-sources-lbl{font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;color:var(--muted-soft);}

.ws-add{padding:12px 16px;border-top:1px solid var(--bg);background:var(--bg-softer);}
.ws-add-hdr{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:10px;}
.ws-add .ge-row{flex-wrap:wrap;align-items:flex-end;}
.ws-field{display:flex;flex-direction:column;gap:4px;}
.ws-field > span{font-size:11px;font-weight:600;color:var(--muted);}
.ws-field select,.ws-field input{min-width:150px;}
.ws-field-wide input{min-width:210px;}
.ws-none{font-size:12px;color:var(--muted-soft);padding:7px 0;}

.ws-foot{display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--line);
  background:var(--bg-softer);}
.ws-icon-prev{width:26px;height:26px;flex:none;border-radius:6px;background:var(--brand-tint);color:var(--brand);
  display:flex;align-items:center;justify-content:center;}
.ws-icon{flex:none;width:96px;padding:6px 8px;font-size:12px;}

/* ── Dashboard card views (js/tools/widgets.js) ───────────────
   The card shell and its icon/label are drawn by the dashboard; everything
   below is a view. Charts are full-bleed to the card's edges, so they use
   negative margins to escape the 20px padding. */
.sum-card.sc-wide{grid-column:span 2;}
@media(max-width:960px){.sum-card.sc-wide{grid-column:span 2;}}

.sc-chart{display:block;margin:12px -20px -18px;}
.sc-chart-in{display:block;margin:12px 0 0;max-width:100%;}
.sum-card.sc-link .sc-chart{margin-right:-34px;}   /* the link variant pads right for its arrow */

/* number + change chip */
.sc-valrow{display:flex;align-items:baseline;gap:9px;}
.sc-chip{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:700;
  padding:2px 7px;border-radius:20px;background:var(--brand-tint);color:var(--brand-deep);white-space:nowrap;}
.sc-chip.dn{background:var(--danger-tint);color:var(--danger);}

/* target bar */
.sc-tb{margin-top:12px;}
.sc-tb-track{height:8px;border-radius:5px;background:var(--bg);position:relative;}
.sc-tb-fill{height:8px;border-radius:5px;background:var(--brand);transition:width .25s;}
.sc-tb-fill.good{background:var(--brand);}
.sc-tb-fill.warn{background:var(--warn);}
.sc-tb-fill.urgent{background:var(--danger);}
.sc-tb-tick{position:absolute;top:-4px;width:2px;height:16px;background:var(--ink);border-radius:1px;}
.sc-tb-leg{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;
  color:var(--muted-soft);margin-top:6px;}

/* stacked share */
.sc-st{display:flex;height:10px;border-radius:5px;overflow:hidden;margin-top:14px;}
.sc-st span{display:block;}
.sc-leg{margin-top:11px;display:grid;gap:5px;}
.sc-leg-row{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);}
.sc-dot{width:8px;height:8px;border-radius:2px;flex:none;}
.sc-leg-val{margin-left:auto;font-weight:700;color:var(--ink);}

/* donut */
.sc-dn{display:flex;align-items:center;gap:14px;margin-top:10px;}
.sc-dn-txt{min-width:0;}
.sc-dn-txt .sc-val{font-size:21px;}

/* progress ring */
.sc-ring{display:flex;align-items:center;gap:15px;margin-top:8px;}
.sc-ring-txt{min-width:0;}
.sc-ring-txt .sc-sub{margin-top:0;}
.ws-view{flex:none;width:132px;padding:6px 8px;font-size:12px;}
.ws-cols{flex:none;width:70px;padding:6px 8px;font-size:12px;}
.ws-oneview{flex:none;width:132px;font-size:11px;color:var(--muted-soft);font-style:italic;}

/* ── KPI Scorecard year picker ────────────────────────────── */
/* Inline in the toolbar beside the period tabs, not a bar of its own. */
.kpi-yearbar{display:flex;align-items:center;gap:8px;}
.kpi-yearsel{width:104px;padding:6px 9px;font-size:12.5px;}
.kpi-yearbar-note{font-size:11.5px;color:var(--warn);white-space:nowrap;}

/* ── KPI add/edit modal notices and row controls ───────────── */
.kf-note{font-size:11.5px;color:var(--muted);background:var(--bg-soft);border:1px solid var(--line);
  border-radius:7px;padding:8px 10px;margin-bottom:10px;line-height:1.45;}
.kf-note.kf-warn{background:var(--warn-tint);border-color:var(--warn-line);color:var(--warn-ink);}
.kpi-edit{background:none;border:none;color:var(--muted-soft);cursor:pointer;font-size:13px;
  padding:2px 5px;border-radius:5px;line-height:1;}
.kpi-edit:hover{color:var(--action);background:var(--action-tint);}
.kan-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;}

/* ── KPI import panel (js/tools/kpi-import.js) ─────────────── */
.kpi-import-btn{background:var(--surface);color:var(--brand);border:1px solid var(--brand);}
.kpi-import-btn:hover{background:var(--brand-tint);}
.ki-card{margin-bottom:16px;}
.ki-body{padding:14px 16px;}
.ki-lead,.ki-found{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:12px;}
.ki-found strong{color:var(--ink);}

.ki-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:2px dashed var(--line-strong);border-radius:10px;padding:22px;cursor:pointer;
  transition:border-color .12s,background .12s;text-align:center;}
.ki-drop:hover,.ki-drop.over{border-color:var(--brand);background:var(--brand-tint-faint);}
.ki-drop strong{font-size:13px;color:var(--brand);}
.ki-drop span{font-size:11.5px;color:var(--muted-soft);}
.ki-or{text-align:center;font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted-soft);margin:12px 0 8px;}
.ki-paste{width:100%;font-family:ui-monospace,Menlo,monospace;font-size:12px;resize:vertical;}

.ki-year{font-size:12.5px;padding:8px 11px;border-radius:7px;background:var(--brand-tint);
  color:var(--brand-deep);margin-bottom:12px;line-height:1.5;}
.ki-year-warn{background:var(--warn-tint);color:var(--warn-ink);}

.ki-tbl{width:100%;border-collapse:collapse;font-size:12.5px;}
.ki-tbl th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted-soft);padding:0 8px 7px;border-bottom:1px solid var(--line);font-weight:700;}
.ki-tbl td{padding:7px 8px;border-bottom:1px solid var(--bg);vertical-align:middle;}
.ki-tbl tr:last-child td{border-bottom:none;}
.ki-row-skip{opacity:.5;}
.ki-vals{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--muted);}
.ki-sel{width:100%;max-width:230px;padding:5px 8px;font-size:12px;}
.ki-eff-skip{color:var(--muted-soft);}
.ki-eff-new{color:var(--brand);font-weight:600;}
.ki-eff-add{color:var(--muted);}
.ki-eff-over{color:var(--warn);font-weight:600;}

.ki-summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;
  color:var(--muted);padding:12px 0 0;border-top:1px solid var(--line);margin-top:12px;}
.ki-summary strong{color:var(--ink);}
.ki-over-warn{margin-left:auto;font-weight:700;color:var(--warn);background:var(--warn-tint);
  padding:3px 9px;border-radius:20px;font-size:11.5px;}

.ki-done{font-size:13px;color:var(--ink);line-height:1.55;}
.ki-note{font-size:12px;color:var(--muted);background:var(--bg-soft);border:1px solid var(--line);
  border-radius:7px;padding:9px 11px;margin-top:10px;line-height:1.5;}
.ki-undo{margin-bottom:16px;}
.ki-undo-row{display:flex;align-items:center;gap:12px;padding:12px 16px;font-size:12.5px;color:var(--muted);}
.ki-undo-row button{margin-left:auto;}
.kf-hint{font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:5px;}
.ki-name{width:100%;max-width:230px;padding:5px 8px;font-size:12px;margin-bottom:4px;}

/* ── KPI category manager ─────────────────────────────────── */
.kpi-cats-btn{background:var(--surface);color:var(--muted);border:1px solid var(--line);}
.kpi-cats-btn:hover{border-color:var(--brand);color:var(--brand);}
.kc-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--bg);}
.kc-row:last-child{border-bottom:none;}
.kc-acts{display:flex;gap:4px;flex:none;}
.kc-name{flex:1;min-width:0;}
.kc-count{flex:none;width:74px;text-align:right;font-size:11.5px;color:var(--muted-soft);}
.cat-pill-n{display:inline-block;margin-left:4px;font-size:10px;font-weight:700;opacity:.6;}
.ki-cat{width:100%;max-width:150px;padding:5px 8px;font-size:12px;}
.ki-setall{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px;
  color:var(--muted);background:var(--bg-soft);border:1px solid var(--line);border-radius:7px;
  padding:9px 11px;margin-bottom:12px;}
.ki-setall-note{font-size:11.5px;color:var(--muted-soft);}


/* ── KPI annual cards: actual, projection, and a pace mark ─── */
.kan-lead{font-size:12.5px;color:var(--muted);margin-bottom:12px;line-height:1.5;}
.kan-lead strong{color:var(--ink);}
.kan-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;}
.kan-cat{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted-soft);}
.kan-name{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.3;}
.kan-val{font-size:25px;font-weight:800;color:var(--ink);line-height:1;margin-top:8px;}
.kan-pace{font-size:12px;font-weight:600;margin-top:5px;line-height:1.4;min-height:34px;}
.kan-bar-wrap{position:relative;height:8px;border-radius:5px;background:var(--bg);margin-top:4px;}
.kan-bar{height:8px;border-radius:5px;transition:width .25s;}
/* Where the calendar says you should be. Deliberately a hard dark line rather
   than a tint — it is a threshold, not a gradient. */
.kan-mark{position:absolute;top:-4px;width:2px;height:16px;background:var(--ink);border-radius:1px;}
.kan-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;}
.kan-tgt{font-size:11px;color:var(--muted-soft);line-height:1.4;}
/* the live quarter, so "where am I now" needs no counting */
.kpi-tbl th.q-live{background:var(--brand-tint);color:var(--brand-deep);}
.q-pace{font-weight:700;}
.q-pace-sub{display:block;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;opacity:.75;}
.q-pace.on-target{color:var(--brand);} .q-pace.near-target{color:var(--warn);}
.q-pace.below-target{color:var(--danger);}

/* ── Page Setup ───────────────────────────────────────────── */
/* Two panes: the pages on the left, the selected one's setup on the right. */
.setup-layout{display:grid;grid-template-columns:268px 1fr;gap:18px;align-items:start;}
@media(max-width:900px){.setup-layout{grid-template-columns:1fr;}}
.setup-nav{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px;}
.setup-nav-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:var(--muted-soft);padding:6px 8px 8px;}
.setup-nav-item{display:flex;gap:9px;align-items:flex-start;padding:9px 10px;border-radius:8px;
  text-decoration:none;color:var(--ink);transition:background .12s;}
.setup-nav-item:hover{background:var(--bg-soft);}
.setup-nav-item.active{background:var(--brand-tint);}
.setup-nav-icon{flex:none;color:var(--muted-soft);display:flex;padding-top:1px;}
.setup-nav-item.active .setup-nav-icon{color:var(--brand);}
.setup-nav-text{min-width:0;}
.setup-nav-name{display:block;font-size:13px;font-weight:600;}
.setup-nav-item.active .setup-nav-name{color:var(--brand-deep);}
.setup-nav-hint{display:block;font-size:11px;color:var(--muted-soft);line-height:1.35;margin-top:2px;}
.setup-sec{margin-bottom:18px;}
.setup-open{margin-left:auto;float:right;font-weight:400;font-size:11.5px;color:var(--action);
  text-decoration:none;display:inline-flex;align-items:center;gap:2px;}
.setup-open:hover{text-decoration:underline;}
.setup-body{padding:0;}
.setup-block{padding:12px 14px;border-bottom:1px solid var(--bg);}
.setup-block:last-child{border-bottom:none;}
.setup-h{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:4px;}
.setup-note{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:10px;}
.setup-preview{margin-bottom:12px;}
.dash-setup-link{font-size:11.5px;color:var(--muted-soft);text-decoration:none;
  display:inline-flex;align-items:center;gap:2px;}
.dash-setup-link:hover{color:var(--action-hover);}
.debt-order-cur{font-weight:700;color:var(--ink);}
.debt-order-edit{font-size:11.5px;color:var(--action);text-decoration:none;margin-left:auto;}
.debt-order-edit:hover{text-decoration:underline;}
/* Destructive, and placed away from the confirming action. */
.modal-del{margin-right:auto;background:none;border:1px solid var(--danger-line);color:var(--danger);
  padding:8px 14px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;}
.modal-del:hover{background:var(--danger-tint);border-color:var(--danger);}
.kpi-undo{display:flex;align-items:center;gap:12px;background:var(--warn-tint);
  border:1px solid var(--warn-line);border-radius:8px;padding:10px 13px;margin-bottom:12px;
  font-size:12.5px;color:var(--warn-ink);}
.kpi-undo button{margin-left:auto;}

/* The month stepper, inline in the toolbar beside the year. */
.kpi-yearbar .month-nav{display:inline-flex;align-items:center;gap:2px;margin-left:2px;}
.kpi-yearbar .month-btn{width:24px;height:26px;border:1px solid var(--line);background:var(--surface);
  border-radius:6px;color:var(--muted);cursor:pointer;font-size:12px;line-height:1;}
.kpi-yearbar .month-btn:hover{border-color:var(--brand);color:var(--brand);}
.kpi-yearbar .month-label{min-width:34px;text-align:center;font-size:12.5px;
  font-weight:700;color:var(--ink);}
/* The week number above its dates — a bare range does not say which week. */
.wk-n{color:var(--brand);font-weight:800;letter-spacing:.3px;}

/* The monthly target beside the metric rather than under it. A <br> here forced
   every row to two lines and set the row height at 51px — more than the padding
   above and below it put together. */
.kpi-tbl .k-sub{font-size:11px;color:var(--muted-soft);margin-left:8px;font-weight:400;white-space:nowrap;}

/* ── My Tasks ─────────────────────────────────────────────── */
.mt-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:10px;}
.mt-stats{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);}
.mt-stat strong{color:var(--ink);font-size:14px;}
.mt-stat.bad strong{color:var(--danger);}
.mt-controls{display:flex;gap:8px;}
.mt-sel{padding:5px 9px;font-size:12.5px;width:auto;}

.mt-list{display:flex;flex-direction:column;}
.mt-row{display:flex;align-items:center;gap:11px;padding:8px 14px;
  border-bottom:1px solid var(--bg);font-size:13px;}
.mt-row:last-child{border-bottom:none;}
.mt-row:hover{background:var(--bg-soft);}
.mt-row.overdue{background:var(--danger-tint);}
.mt-row.overdue:hover{background:var(--danger-tint);}
.mt-row.done .mt-title{text-decoration:line-through;color:var(--muted-soft);}

/* A real button, so it is reachable by keyboard — a styled div here would be
   the one control on the page that only a mouse can use. */
.mt-check{width:19px;height:19px;flex:none;border:1.5px solid var(--line-strong);border-radius:5px;
  background:var(--surface);cursor:pointer;color:var(--on-brand);font-size:12px;line-height:1;padding:0;
  display:flex;align-items:center;justify-content:center;transition:all .12s;}
.mt-check:hover{border-color:var(--brand);}
.mt-check.on{background:var(--brand);border-color:var(--brand);}

.mt-title{flex:1;min-width:0;color:var(--ink);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;}
.mt-src{flex:none;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:11px;color:var(--muted);background:var(--line-soft);padding:2px 8px;border-radius:20px;cursor:pointer;}
.mt-src:hover{background:var(--line-strong-soft);color:var(--ink);}
.mt-src.punch{background:var(--brand-tint);color:var(--brand-deep);}
.mt-src.punch:hover{background:var(--brand-line);}
.mt-when{flex:none;width:78px;text-align:right;font-size:11.5px;color:var(--muted);}
.mt-when.bad{color:var(--danger);font-weight:700;}
.mt-when.warn{color:var(--warn);font-weight:600;}
.mt-when.none{color:var(--line-strong);}

.mt-empty{padding:26px;text-align:center;color:var(--muted);font-size:13px;}
.mt-empty strong{display:block;color:var(--ink);font-size:14px;margin-bottom:6px;}
.mt-empty p{max-width:460px;margin:0 auto 14px;line-height:1.55;}

.mt-names{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px;}
.mt-name{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);
  border-radius:7px;font-size:12.5px;cursor:pointer;}
.mt-name:hover{border-color:var(--brand);background:var(--brand-tint-faint);}
.mt-name span:first-of-type{flex:1;}
.mt-name-n{font-size:11px;color:var(--muted-soft);}

/* ── assignee picker ─────────────────────────────────────── */
.ppl{display:inline-flex;flex-direction:column;gap:4px;}
.ppl-sel{padding:5px 8px;font-size:12.5px;}
.ppl-other{padding:5px 8px;font-size:12.5px;}

/* ── Backups & History ─────────────────────── */
.bk-p{font-size:13px;color:var(--ink-soft);line-height:1.55;margin:0 0 12px;max-width:70ch;}
.bk-warn{background:var(--warn-tint);border:1px solid var(--warn-line);color:var(--warn-ink);border-radius:7px;
         padding:10px 12px;font-size:12.5px;line-height:1.5;margin:0 0 12px;}
.bk-plan{border:1px solid var(--line);border-radius:7px;overflow:hidden;margin:0 0 12px;}
.bk-plan-row{display:flex;justify-content:space-between;gap:12px;padding:7px 12px;
             font-size:12.5px;border-bottom:1px solid var(--line-soft);}
.bk-plan-row:last-child{border-bottom:none;}
.bk-plan-name{font-weight:600;color:var(--ink);}
.bk-plan-what{color:var(--muted);}
.bk-changed .bk-plan-what{color:var(--warn);font-weight:600;}
.bk-new .bk-plan-what{color:var(--brand);font-weight:600;}
.bk-untouched{background:var(--bg-softer);}
.bk-group{border:1px solid var(--line);border-radius:7px;margin:0 0 10px;overflow:hidden;}
.bk-group-hdr{display:flex;justify-content:space-between;align-items:center;
              padding:8px 12px;background:var(--bg-soft);border-bottom:1px solid var(--line);}
.bk-group-name{font-size:12.5px;font-weight:700;color:var(--ink);}
.bk-group-count{font-size:11px;color:var(--muted);}
.bk-ver{display:flex;align-items:center;gap:12px;padding:7px 12px;font-size:12.5px;
        border-bottom:1px solid var(--line-soft);}
.bk-ver:last-child{border-bottom:none;}
.bk-ver-when{font-weight:600;color:var(--ink);min-width:130px;}
.bk-ver-op{color:var(--muted);flex:1;}
.bk-ver-op.bk-del{color:var(--danger);}
.bk-ver-act{color:var(--action);font-weight:600;text-decoration:none;font-size:12px;}
.bk-ver-act:hover{text-decoration:underline;}
.bk-ver-act.bk-ro{color:var(--muted-soft);font-weight:400;}
.bk-more{display:block;padding:7px 12px;font-size:12px;color:var(--ink-soft);text-decoration:none;
         background:var(--bg-softer);border-top:1px solid var(--line-soft);}
.bk-more:hover{color:var(--action);}

/* ── Pricing: calculator-first layout ──────── */
.pr-hero{background:var(--surface);border:1px solid var(--line);border-radius:10px;
         padding:20px 22px 16px;margin:0 0 12px;}
.pr-hero-h{font-size:21px;font-weight:800;color:var(--ink);margin:0 0 14px;letter-spacing:-.2px;}
.pr-hero-in{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:0 0 16px;}
.pr-hero-in label{font-size:12px;font-weight:700;text-transform:uppercase;
                  letter-spacing:.5px;color:var(--muted);}
.pr-hero-field{position:relative;display:inline-flex;align-items:center;}
.pr-hero-field input{width:170px;font-size:22px;font-weight:700;color:var(--ink);
                     padding:8px 52px 8px 12px;border:2px solid var(--line-strong);
                     border-radius:8px;font-family:inherit;}
.pr-hero-field input:focus{outline:none;border-color:var(--brand);}
.pr-hero-unit{position:absolute;right:12px;font-size:12.5px;color:var(--muted-soft);
              font-weight:600;pointer-events:none;}
.pr-hero-band{font-size:12px;color:var(--muted);}
.pr-hero-empty{background:var(--bg-soft);border:1px dashed var(--line-strong);border-radius:8px;
               padding:18px;text-align:center;font-size:13px;color:var(--muted);}

/* Capped rather than filling the window: two cards stretched across 1,400px put
   the two numbers you are comparing a foot apart. */
.pr-res{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:11px;max-width:790px;}
.pr-res-card{border:1px solid var(--line);border-radius:9px;padding:14px;background:var(--surface);}
.pr-res-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
            color:var(--muted);display:flex;justify-content:space-between;align-items:baseline;gap:6px;}
.pr-res-tier{font-size:9.5px;font-weight:700;color:var(--brand);background:var(--brand-tint);
             padding:2px 6px;border-radius:8px;letter-spacing:.3px;}
.pr-res-price{font-size:31px;font-weight:800;color:var(--ink);margin:5px 0 1px;letter-spacing:-.6px;}
.pr-res-extra{font-size:11.5px;color:var(--muted);margin:0 0 8px;}
.pr-res-meta{display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:var(--ink-soft);
             padding-top:8px;border-top:1px solid var(--line-soft);}
.pr-res-badge{margin-top:9px;font-size:10.5px;font-weight:700;padding:4px 8px;border-radius:6px;
              text-align:center;}
.pr-res-badge.ok{background:var(--brand-tint);color:var(--brand-deep);}
.pr-res-badge.warn{background:var(--warn-tint);color:var(--warn);}
.pr-res-badge.bad{background:var(--danger-tint);color:var(--danger);}
.pr-disc{font-size:11.5px;color:var(--muted-soft);line-height:1.5;margin:14px 0 0;
         padding-top:12px;border-top:1px solid var(--line-soft);}
/* The rule spans the card; the TEXT is what gets a measure. Capping the whole
   element made the border stop halfway and read as a rendering fault. */
.pr-disc span{display:block;max-width:78ch;}

.pr-bar-wrap{background:var(--surface);border:1px solid var(--line);border-radius:9px;
             margin:0 0 10px;overflow:hidden;}
.pr-bar{display:flex;align-items:center;gap:11px;padding:12px 15px;text-decoration:none;
        transition:background .12s;}
.pr-bar:hover{background:var(--bg-soft);}
.pr-bar:hover .pr-bar-title{color:var(--hover-dark);}
.pr-bar-wrap.open .pr-bar{border-bottom:1px solid var(--line);background:var(--bg-soft);}
.pr-bar-ico{font-size:15px;color:var(--muted);line-height:1;flex-shrink:0;}
.pr-bar-txt{flex:1;min-width:0;}
.pr-bar-title{display:block;font-size:13.5px;font-weight:700;color:var(--ink);}
.pr-bar-hint{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;
             overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pr-bar-chev{color:var(--muted-soft);font-size:11px;flex-shrink:0;}
.pr-bar-body{padding:14px 15px;}
.pr-bar-body > .pr-card{border:none;margin:0;box-shadow:none;}

.pr-sub-hdr{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
            color:var(--muted);margin:16px 0 8px;padding-top:12px;border-top:1px solid var(--line-soft);}
.pr-differs{background:var(--warn-tint);border:1px solid var(--warn-line);color:var(--warn-ink);
            border-radius:7px;padding:9px 11px;font-size:12px;line-height:1.55;margin:0 0 12px;}
.pr-differs a{color:var(--warn-ink);font-weight:700;}
.pr-derived{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px;padding-top:12px;
            border-top:1px solid var(--line-soft);}
.pr-derived > div{flex:1;min-width:130px;background:var(--bg-soft);border-radius:7px;padding:9px 11px;}
.pr-derived span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;
                 color:var(--muted);font-weight:700;}
.pr-derived strong{display:block;font-size:16px;color:var(--ink);margin-top:3px;}

/* ── "you may be on the wrong company" notice ── */
.wrong-co{background:var(--warn-tint);border-bottom:1px solid var(--warn-line);
          padding:12px 20px;}
.wrong-co-t{font-size:13.5px;font-weight:700;color:var(--warn-ink);}
.wrong-co-b{font-size:12.5px;color:var(--warn-ink);line-height:1.55;margin-top:3px;max-width:90ch;}
.wrong-co-a{display:flex;align-items:center;gap:12px;margin-top:9px;}
.wrong-co-more{font-size:11.5px;color:var(--warn-ink);opacity:.85;}

/* ── "where your data is" ──────────────────── */
.bk-cos{border:1px solid var(--line);border-radius:7px;overflow:hidden;}
.bk-co{display:flex;align-items:center;gap:12px;padding:9px 12px;font-size:12.5px;
       border-bottom:1px solid var(--line-soft);}
.bk-co:last-child{border-bottom:none;}
.bk-co.here{background:var(--brand-tint-soft);}
.bk-co-n{font-weight:700;color:var(--ink);min-width:190px;display:flex;align-items:center;gap:7px;}
.bk-co-tag{font-size:9.5px;font-weight:700;color:var(--brand);background:var(--brand-tint);
           padding:2px 6px;border-radius:8px;text-transform:uppercase;letter-spacing:.4px;}
.bk-co-d{flex:1;color:var(--muted);}
.bk-co-a{color:var(--action);font-weight:700;font-size:12px;text-decoration:none;}
.bk-co-a:hover{text-decoration:underline;}

/* ── banner: purpose line and weather ──────── */
.wb-left{flex:1;min-width:0;}
.wb-purpose{font-size:12px;opacity:.92;margin-top:5px;font-style:italic;
            /* Two lines at most, then an ellipsis. The full text is the title
               attribute and the Business Foundation card below. */
            display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
            overflow:hidden;max-width:74ch;line-height:1.45;}
.wb-right{flex-shrink:0;}
.wb-wx{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;}
.wb-wx-ico{font-size:19px;line-height:1;}
.wb-wx-temp{font-size:19px;font-weight:800;letter-spacing:-.4px;}
.wb-wx-meta{font-size:10.5px;line-height:1.3;opacity:.9;font-weight:600;text-align:left;}
.wb-wx-wait{opacity:.7;font-weight:600;}
.wb-wx-set{color:var(--on-brand);text-decoration:none;font-weight:600;}
.wb-wx-set:hover{background:rgba(255,255,255,.28);}
.ds-place{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ds-place-msg{font-size:11.5px;color:var(--muted);}
.ds-place-msg.err{color:var(--danger);}

/* ── the data receipt under the banner ─────── */
.dash-receipt{font-size:11.5px;color:var(--muted-soft);margin:-6px 0 12px;}
.dash-receipt.warn{background:var(--warn-tint);border:1px solid var(--warn-line);
                   color:var(--warn-ink);border-radius:7px;padding:8px 11px;
                   font-size:12.5px;margin:0 0 12px;}
.dash-receipt.warn a{color:var(--warn-ink);font-weight:700;}

/* ── Dashboard: QuickBooks-style accents ─────
   Scoped to #v-dashboard on purpose. The rest of the Hub keeps green as its
   single accent; this page is the one being restyled. */

/* These rules used to be scoped to the Dashboard. Blue actions, orange
   attention and dark hover are now site-wide, so the overrides are gone rather
   than duplicated. Only the icon tiles below stay dashboard-only, because only
   the Dashboard has summary cards. */
.dash-setup-link{color:var(--action);}
.sum-card{transition:border-color .14s,box-shadow .14s,transform .14s;}
.sc-link:hover .sc-lbl{color:var(--hover-dark);}

/* Rotating icon tiles. Position-based, five hues. */
#v-dashboard .sc-icon.sc-a1{background:var(--brand-tint);color:var(--brand);}
#v-dashboard .sc-icon.sc-a2{background:var(--action-tint);color:var(--action);}
/* Uses --warn: an orange icon tile and an orange "at risk" are the same
   orange, and giving it two names is how they drift apart. */
#v-dashboard .sc-icon.sc-a3{background:var(--warn-tint);color:var(--warn);}
#v-dashboard .sc-icon.sc-a4{background:var(--accent-teal-tint);color:var(--accent-teal);}
#v-dashboard .sc-icon.sc-a5{background:var(--accent-purple-tint);color:var(--accent-purple);}

/* ── Dashboard: the banner becomes the top bar ── */
body.dash-top .topbar{display:none;}
/* Full-bleed to the window edges, since it is now the top of the page rather
   than a card inside it. The negative margins cancel .content's padding. */
body.dash-top .welcome-banner{border-radius:0;margin:-18px -24px 16px;
  padding:16px 28px;min-height:60px;}
body.dash-top .welcome-banner .wb-right{display:flex;align-items:center;gap:14px;}
/* The controls sat on white; they now sit on green. */
body.dash-top #topbar-right{display:flex;align-items:center;gap:12px;}
/* HIDDEN, not restyled. The banner's own context line already says the company
   name — showing it twice in one strip is the duplication that moving the banner
   up here was meant to remove. It comes back on every other page, where the
   banner does not exist to say it. */
body.dash-top #topbar-right .biz-name{display:none;}
body.dash-top #topbar-right .avatar{background:rgba(255,255,255,.22);
  color:var(--on-brand);border:1px solid rgba(255,255,255,.35);}
body.dash-top #topbar-right .company-switch{background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.34);color:var(--on-brand);}
body.dash-top #topbar-right .company-switch option{color:var(--ink);}
body.dash-top #topbar-right .save-state{color:var(--on-brand);}
.bk-warn{background:var(--danger-tint);border:1px solid var(--danger-line);color:var(--danger-deep);
         border-radius:7px;padding:10px 12px;font-size:12.5px;line-height:1.55;}