/* AZP Financial — shared component + token layer.
   Loaded AFTER styles.css (which carries stray null bytes and must not be edited),
   so this is the safe home for cross-page tokens, small overrides, and components
   that were previously copy-pasted into individual template <style> blocks. */

/* masthead logo */
.masthead .brand img{ height:48px; width:auto; display:block; }

/* Status colour tokens — single source of truth for pos/neg signalling.
   Base --pos/--neg live in styles.css; these soft backgrounds and the hours-bank
   heat scale derive from them so nothing drifts to a second palette. */
:root{
  --pos-soft:#E3EDE7; --neg-soft:#F2E6E3;   /* pill / % chip fills */
  --pos-tint:#F0F5F2; --neg-tint:#F8F1F0;   /* result-cell wash */
  --pos-line:#C5D8CF; --neg-line:#E4CBC5;   /* chip borders */
  --heat-o1:#E6EEEA; --heat-o1t:#3F7D5E; --heat-o2:#D2E0D8; --heat-o2t:#2E5E45;
  --heat-u1:#F4E9E6; --heat-u1t:#A4503F; --heat-u2:#E7D1CB; --heat-u2t:#7E3D2F;
}

/* only sortable table headers get a pointer cursor */
.data th{ cursor:default; }
.data th[data-sort]{ cursor:pointer; }

/* Info hover-tip — one definition for every page (was pasted into 4 template blocks).
   Colours reference the global tokens; tooltip width is uniform across pages. */
.info-tip{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; margin-left:7px; border:1px solid var(--muted); border-radius:50%;
  color:var(--muted); font:600 9px/1 Georgia,'Times New Roman',serif; font-style:italic;
  cursor:help; vertical-align:middle; text-transform:none; letter-spacing:0;
  transition:color .12s, border-color .12s; }
.info-tip:hover, .info-tip:focus{ color:var(--ink); border-color:var(--ink); outline:none; }
.info-tip::after{ content:attr(data-tip); position:absolute; left:0; top:calc(100% + 8px); z-index:40;
  width:340px; max-width:80vw; padding:11px 13px; background:var(--bg); color:var(--ink);
  border:1px solid var(--line); font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:.76rem; font-weight:400; font-style:normal; line-height:1.55; letter-spacing:0;
  text-align:left; opacity:0; visibility:hidden; transform:translateY(-2px);
  transition:opacity .12s ease, transform .12s ease; pointer-events:none; }
.info-tip:hover::after, .info-tip:focus::after{ opacity:1; visibility:visible; transform:translateY(0); }

/* Horizontal rate bars (percentages, one row per teammate). Shared layer because the Overview's
   owner capacity block and the Performance chart draw the same object; the Performance template
   still carries its own copy of these rules for its money/toggle variants. */
.ratebar{ max-width:100%; }
.ratebar .name{ font-size:11px; fill:#000; }
.ratebar .name .fl{ fill:var(--muted); font-size:9px; }
.ratebar .val{ font-size:10.5px; fill:#000; font-variant-numeric:tabular-nums; }
.ratebar .tgt-line{ stroke:var(--neg); stroke-width:1.5; stroke-dasharray:3 2; }
.ratebar .rolecap{ font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  fill:var(--muted); }
.ratebar .rolecap-t{ fill:var(--neg); letter-spacing:.06em; }

/* Small currency label appended to a native-currency figure whose "$" would otherwise be
   ambiguous — a USD space's billable rate, the per-currency Retainers-held figures, the
   Spaces-by-PM billable-rate column. Reusable anywhere (KPI figure, table cell, card). */
.ccy{ font-size:8px; font-weight:600; color:#9A9A9A; letter-spacing:.1em; margin-left:3px; }

/* Project areas — the repeatable Size rows in Edit Space, and the header breakdown. */
.area-head{ display:grid; grid-template-columns:1fr 130px 58px 30px; gap:10px; margin-bottom:5px; }
.area-head span{ font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.area-head .r{ text-align:right; }
.area-head .c{ text-align:center; }
.area-row{ display:grid; grid-template-columns:1fr 130px 58px 30px; gap:10px; align-items:center; margin-bottom:8px; }
.area-row .r{ text-align:right; font-variant-numeric:tabular-nums; }
/* Outdoor flag. accent-color keeps the native checkbox from painting itself the browser's
   blue — the one colour this design system does not have. */
.area-ext{ display:flex; justify-content:center; align-items:center; cursor:pointer; }
.area-ext input[type=checkbox]{ accent-color:var(--ink); width:15px; height:15px; cursor:pointer; }
.area-rm{ border:none; background:none; color:var(--muted); font-size:18px; line-height:1; cursor:pointer; padding:6px; border-radius:2px; }
.area-rm:hover{ color:var(--ink); }
.area-add{ display:inline-flex; align-items:center; gap:6px; margin-top:2px; padding:6px 0; font-size:13px; color:var(--ink); background:none; border:none; cursor:pointer; }
.area-add:hover{ text-decoration:underline; }
.area-total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.area-total .l{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.area-total .v{ font-size:18px; font-variant-numeric:tabular-nums; }
.area-total .v .u{ font-size:12px; color:var(--muted); margin-left:3px; }
/* Header breakdown under the Size figure (project page) */
.proj-info .it .v .area-brk{ display:block; margin-top:3px; font-size:11px; color:var(--muted); line-height:1.4; }
/* An outdoor area names itself rather than relying on the label being French for terrace —
   "cour", "toit" and "5e étage" are all outdoor here and none of them says so (mig 054). */
.proj-info .it .v .area-brk .ext:after{ content:' ext.'; font-size:9px; letter-spacing:.06em; }

/* Soft green/red chip for a single inline value — e.g. the avg payment-time figure on the
   Receivables ageing line. Same soft palette as the .pctchip / Over-Under pills. */
.chip{ display:inline-block; font-size:11px; font-weight:600; padding:1px 7px; border-radius:3px; font-variant-numeric:tabular-nums; }
.chip.g{ background:var(--pos-soft); color:var(--pos); }
.chip.r{ background:var(--neg-soft); color:var(--neg); }
.chip.w{ background:#F5EFE0; color:#8A6D3B; }   /* space health: Watch (amber) */
/* neutral — hourly "Over est." (still billable), and "Not yet invoiced" on the Spaces table.
   --panel, NOT --fill: there is no --fill in this project, so this declaration was falling
   through to the literal every time. Harmless while the fallback happened to match; load-bearing
   now that the modifier carries a state on 85 rows. The regression test_css_vars.py exists for. */
.chip.n{ background:var(--panel, #F5F5F5); color:var(--muted); }

/* Quiet second line under a KPI figure — the "subtle delta" of the design system. Was defined
   only inside overview.html's style block (scoped to .kpis-personal); promoted here when the
   Spaces page needed the same thing. That scoped rule still wins on the teammate row, which
   sets its own size and spacing. */
.kpi-sub{ margin-top:6px; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.kpi-sub.pos{ color:var(--pos); }
.kpi-sub.neg{ color:var(--neg); }

/* Break-even verdict under the Cost multiplier KPI (project page). Deliberately no colours of
   its own — it reuses .chip above, so there is exactly one status palette in the app. */
.verdict{ margin-top:6px; }

/* Collapsible section: a .section-title button toggles .open on the .collapse wrapper.
   Body hidden by default; the chevron rotates to point down when open. */
.sec-toggle{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer;
  display:inline-flex; align-items:baseline; gap:8px; }
.sec-toggle .chev{ display:inline-block; color:var(--muted); font-size:.85em; transition:transform .15s ease; }
.collapse.open .sec-toggle .chev{ transform:rotate(90deg); }
.collapse > .collapse-body{ display:none; }
.collapse.open > .collapse-body{ display:block; margin-top:14px; }

/* Grey-bar disclosure (shared): a native <details>/<summary> with a filled summary bar,
   a rotating chevron and an optional right-aligned summary. Used on the teammate profile
   and the Space page so every collapsible section reads the same. The profile keeps its
   own variants (.to-summary.comp / .actpanel) and spacing in its template.

   The background was var(--fill) from the day this rule was written, so the "filled summary bar"
   was never filled: no such variable exists, the declaration was dropped, and every disclosure in
   the app -- profile, Space, and now Overview -- rendered as bare text on white. Nobody reported
   it because a missing background looks like a design decision. Same typo as the roster share
   pill; test_css_vars.py caught that one and not this one, because it only read templates.
   It reads the stylesheets too now. */
.to-summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:11px;
  background:var(--panel); border-radius:8px; padding:13px 16px; transition:background .12s; }
.to-summary:hover{ background:#EFEFEF; }
.to-summary::-webkit-details-marker{ display:none; }
.to-chev{ color:var(--muted); font-size:.72rem; transition:transform .15s; display:inline-block; }
.to-details[open] .to-chev{ transform:rotate(90deg); }
.to-lbl{ font-size:14px; font-weight:600; }
.to-right{ margin-left:auto; color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
.to-body{ margin-top:12px; }

/* Soft warning note (e.g. the invoice form's wrong-currency-column nudge). */
.form-warn{ margin:8px 0 0; font-size:12.5px; color:var(--neg); background:var(--neg-soft);
  padding:8px 11px; border-radius:3px; }

/* USD-face / FX-gain breakdown under a Billing-table amount that merges both. */
.data td .amt-brk{ display:block; font-size:11px; color:var(--muted); margin-top:2px;
  font-variant-numeric:tabular-nums; }

/* --- Privacy toggle: hide dollar figures behind a one-click blur ------------------
   Shoulder-surfing privacy, not security — values stay in the page source, just masked.
   A page opts in by passing `privacy` (route ctx) so base.html sets body.figs-hidden and
   renders the toggle; figures to mask carry class="priv". Default = hidden every load. */
.privtoggle{ display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  border:1px solid var(--line); border-radius:7px; background:var(--bg); padding:6px 11px;
  font:inherit; font-size:12.5px; color:var(--ink); transition:background .12s, border-color .12s; }
.privtoggle:hover{ background:var(--fill, #F5F5F5); border-color:var(--ink); }
.privtoggle svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.privtoggle .eye-off{ display:none; }
body.figs-hidden .privtoggle .eye-on{ display:none; }
body.figs-hidden .privtoggle .eye-off{ display:inline-flex; }

/* Masking style: asterisks — hide the value (and any child, e.g. the currency tag) and
   overlay a fixed run of four centred asterisks (U+2217) in its place. Fixed count, so the
   value's length/magnitude isn't leaked; alignment follows the figure (text-align:inherit).
   A peeked figure ( .peek ) falls out of the :not() rules and renders normally — no colour
   override to undo, so per-figure colours (neg red, muted currency) come back intact. */
.priv{ position:relative; }
body.figs-hidden .priv{ cursor:pointer; user-select:none; }
body.figs-hidden .priv.peek{ cursor:default; user-select:auto; }
body.figs-hidden .priv:not(.peek), body.figs-hidden .priv:not(.peek) *{ color:transparent; }
body.figs-hidden .priv:not(.peek)::after{ content:"\2217\2217\2217\2217"; position:absolute;
  left:0; right:0; top:0; color:var(--muted); text-align:inherit; letter-spacing:.14em; pointer-events:none; }

/* overview page-head: title block left, privacy toggle right */
.ph-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }

/* Segmented control — small monochrome scope/metric switch (e.g. Overview My/All spaces).
   Links, so it works without JS and reflects state via ?param. */
.segbar{ display:inline-flex; border:1px solid var(--line); border-radius:7px; overflow:hidden; flex:0 0 auto; }
.segbar a{ padding:6px 13px; font-size:12px; color:var(--muted); text-decoration:none;
  border-right:1px solid var(--line); background:var(--bg); transition:background .12s, color .12s; white-space:nowrap; }
.segbar a:last-child{ border-right:0; }
.segbar a:hover{ background:var(--fill, #F5F5F5); color:var(--ink); }
.segbar a.active{ background:#111; color:#fff; }