/* ============================================================
   FEND SHARED LOOK (fend.css) — loaded by every page in Fend Home. v2, 20 Oct 2026 (Clarity Read cues, light by default).
   Change colours, the header, the light/dark switch, the Live dot or
   the refresh button HERE and every tool updates. Pages may add their
   own extra tokens or small overrides in their own <style>.
   ============================================================ */
/* Fend's own typefaces (Fend Design System), served from Fend Home's fonts/ folder: no outside font service needed.
   Stylebender = headings and big numbers (sentence case, one weight), Inter Variable = everything else,
   Origin Black Display = the one hero number on a page, used sparingly (e.g. a Clarity Score). */
@font-face{font-family:"Stylebender";src:url("fonts/Stylebender.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter Variable";src:url("fonts/InterVariable.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Origin Black Display";src:url("fonts/Origin-BlackDisplay.woff2") format("woff2");font-weight:400;font-display:swap}
/* brand tokens (v2, 20 Oct 2026: cues from the Clarity Read): LIGHT is the default look, dark when picked with the switch.
   fend.js sets data-theme="light" or "dark" on <html>; the light values below win whenever data-theme="light". */
:root{
  --black:#000000; --white:#FFFFFF; --yellow:#F4FF4B;
  --bg:#000000; --surface:#0E0E0E; --raised:#151515; --sunk:#1C1C1C; --tint:#121212; --panel:#161616;
  --ink:#FFFFFF; --muted:#93A0A0; --faint:#6B7676; --line:#242424; --line-strong:#383838;
  --accent:#F4FF4B; --accent-ink:#000000; --accent-line:#F4FF4B;
  --late:#FF7B6B; --late-soft:rgba(255,123,107,.12); --due:#F2C14E; --due-soft:rgba(242,193,78,.12); --ok:#7DD99B; --ok-soft:rgba(125,217,155,.12);
  --overlay:rgba(0,0,0,.72); --focus:#F4FF4B; --shadow:0 12px 40px rgba(0,0,0,.6);
  --head:"Stylebender","Times New Roman",Georgia,serif;
  --ui:"Inter Variable","Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --num:"Origin Black Display","Arial Black",sans-serif;
  --r:14px; --pill:999px;
  color-scheme:dark;
}
:root[data-theme="light"]{
  /* the Clarity Read palette: warm off-white page, white cards, soft rules, slate secondary text, light grey action panels */
  --bg:#F6F6F3; --surface:#FFFFFF; --raised:#FFFFFF; --sunk:#EDEDE9; --tint:#F6F6F3; --panel:#E9E9E4;
  --ink:#000000; --muted:#525D5D; --faint:#7D8787; --line:#E6E6E1; --line-strong:#D9D9D3;
  --accent-line:#000000;
  --late:#B3362A; --late-soft:#F8E4E1; --due:#8A6200; --due-soft:#F6EED3; --ok:#23704A; --ok-soft:#DFF0E6;
  --overlay:rgba(10,10,10,.42); --focus:#000000; --shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px rgba(0,0,0,.10);
  color-scheme:light;
}
html{-webkit-text-size-adjust:100%}
/* headings in Stylebender never get faked bold */
h1,h2,h3,h4{font-synthesis:none}
/* Live / Offline indicator */
.sync{font:500 11px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);display:inline-flex;align-items:center;gap:7px}
.sync::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--faint)}
.sync.live::before{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
/* light/dark switch */
.themebtn{position:relative;flex:none;width:46px;height:24px;padding:0;border:0;border-radius:var(--pill);cursor:pointer;background:#141414;box-shadow:inset 0 1px 3px rgba(0,0,0,.85),inset 0 -1px 1px rgba(255,255,255,.06),0 0 0 1px #262626;transition:background .3s,box-shadow .3s}
.themebtn .knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;transform:translateX(22px);background:linear-gradient(160deg,#3A3A3A,#262626);color:var(--yellow);box-shadow:0 2px 5px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .3s cubic-bezier(.3,.7,.2,1),background .3s,color .3s}
.themebtn .i-sun{display:none}
.themebtn svg{width:11px;height:11px}
:root[data-theme="light"] .themebtn{background:#E4E4DF;box-shadow:inset 0 1px 3px rgba(0,0,0,.16),inset 0 -1px 1px rgba(255,255,255,.9),0 0 0 1px #D6D6D0}
:root[data-theme="light"] .themebtn .knob{transform:none;background:linear-gradient(160deg,#FFFFFF,#F1F1EC);color:#6B6B66;box-shadow:0 2px 5px rgba(0,0,0,.18),inset 0 1px 0 #FFFFFF}
:root[data-theme="light"] .themebtn .i-sun{display:block}
:root[data-theme="light"] .themebtn .i-moon{display:none}
/* header kit v2: Fend Home bar, date, refresh */
.appbar{border-bottom:1px solid var(--line);background:var(--bg)}
.appbar-in{max-width:1180px;margin:0 auto;padding:9px 24px;display:flex;align-items:center;gap:10px;min-height:34px}
@media (max-width:640px){.appbar-in{padding:9px 16px}}
.homenav{display:inline-flex;align-items:center;gap:8px;font:600 10.5px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .15s}
a.homenav:hover{color:var(--ink)}
.homenav.here{color:var(--ink)}
.homenav svg{flex:none}
.today{font:500 11px/1 var(--ui);color:var(--faint);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.hctl .today{margin-right:6px}
@media (max-width:1080px){.hctl .today{display:none}}
.rfbtn{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:color .15s,border-color .15s}
.rfbtn:hover,.rfbtn:focus-visible{color:var(--ink);border-color:var(--ink)}
.rfbtn svg{width:14px;height:14px}
.rfbtn.spin svg{animation:rfspin .6s linear infinite}
@keyframes rfspin{to{transform:rotate(360deg)}}
/* header on a phone (same on every tool, 20 Oct 2026): the wordmark never gets squashed, the tool name trims with "…",
   and the controls stay on the same row as the wordmark */
@media (max-width:640px){
  header.top .wrap{flex-wrap:nowrap;gap:10px}
  header.top .brand{flex:1 1 auto;min-width:0;gap:10px;overflow:visible}
  header.top h1{min-width:0;gap:10px}
  header.top h1 .mark{height:20px;flex:none}
  header.top h1 .name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
  header.top .tag{display:none}
  header.top .hctl{gap:8px;flex:none}
  header.top .rfbtn{width:28px;height:28px}
  header.top .themebtn{width:42px}
  header.top .themebtn .knob{transform:translateX(18px)}
  :root[data-theme="light"] header.top .themebtn .knob{transform:none}
  header.top .sync .st{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  header.top .seg button{padding:6px 10px}
}
@media (max-width:420px){header.top h1 .mark{height:18px}}
@media (max-width:640px){header.top .sync{font-size:0;gap:0}}
/* Typesetting (Chris, 20 Oct 2026): no runts, widows or orphans anywhere in Fend Home.
   Body text never ends a paragraph on one lonely word; headings break into balanced lines;
   when anything is printed or saved as a PDF, a paragraph never leaves one line stranded at the top or bottom of a page. */
body{text-wrap:pretty}
h1,h2,h3,h4,h5,h6,.tname,.title,.headline{text-wrap:balance}
p,li,blockquote,dd{orphans:3;widows:3}
h1,h2,h3,h4,h5,h6{break-after:avoid}

/* ============================================================
   FEND UI v3 "Studio index" (3 Nov 2026): the fendstudio.com/links standard for Fend Home.
   Opt-in per page with <html data-ui="3">, so pages move across one at a time without breaking.
   Rules: Stylebender once per page (.u-hero). Inter for everything else. Sizes: hero 44 (phone 36), title 16,
   body 14, label 11 caps, small 12. Square corners, hairlines, no shadows. Yellow only for the main action,
   numbers and one live dot. State = a dot + a word. One rhythm: 56px between sections, rows 20px + 1px rule.
   Full write-up: project doc "claude/Fend Home redesign review.md".
   ============================================================ */
:root[data-ui="3"]{
  --u-col:1080px; --u-side:24px; --u-gap:56px; --u-row:20px;
  --u-hero:44px; --u-title:16px; --u-body:14px; --u-label:11px; --u-small:12px;
  --u-ease:cubic-bezier(.22,1,.36,1);
  --line:#242929; --line-strong:#333838; --muted:#93A0A0; --faint:#7D8888;
  --r:0px;
}
:root[data-ui="3"][data-theme="light"]{--line:#E3E3DD; --line-strong:#D2D2CB; --muted:#525D5D; --faint:#6E7979}
@media (max-width:640px){:root[data-ui="3"]{--u-side:16px; --u-gap:44px; --u-hero:36px}}
:root[data-ui="3"] body{font:var(--u-body)/1.5 var(--ui);font-feature-settings:"cv11","ss01";background:var(--bg);color:var(--ink)}
[data-ui="3"] .u-wrap{max-width:var(--u-col);margin:0 auto;padding-inline:var(--u-side)}

/* one header bar: wordmark (links Home) · tool name · status and controls */
[data-ui="3"] header.u-top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
[data-ui="3"] .u-top .u-wrap{display:flex;align-items:center;gap:14px;height:60px}
[data-ui="3"] .u-mark{display:inline-flex;color:var(--ink);flex:none;border-radius:2px}
[data-ui="3"] .u-mark svg{display:block;height:20px;width:auto;aspect-ratio:319/80}
[data-ui="3"] .u-tool{font:500 var(--u-title)/1 var(--ui);letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;padding-left:14px;border-left:1px solid var(--line-strong)}
[data-ui="3"] .u-ctl{margin-left:auto;display:flex;align-items:center;gap:14px;flex:none}
[data-ui="3"] .u-top .rfbtn{width:32px;height:32px;border-radius:0;border-color:var(--line-strong)}
[data-ui="3"] .u-top .sync{font-size:var(--u-label)}
[data-ui="3"] .u-top .sync::before{animation:u-pulse 2.4s var(--u-ease) infinite}
@media (max-width:640px){[data-ui="3"] .u-top .sync .st,[data-ui="3"] .u-top .bkup .bt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}[data-ui="3"] .u-ctl{gap:10px}}

/* text styles (general names, reusable on every page) */
[data-ui="3"] .u-hero{font:400 var(--u-hero)/1.02 var(--head);letter-spacing:-.015em;margin:0;text-wrap:balance}
[data-ui="3"] .u-label{font:600 var(--u-label)/1.2 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0}
[data-ui="3"] .u-label b{color:var(--ink);font-weight:600}
[data-ui="3"] .u-title{font:500 var(--u-title)/1.3 var(--ui);letter-spacing:-.01em;margin:0}
[data-ui="3"] .u-note{font-size:var(--u-body);color:var(--muted);margin:0;text-wrap:pretty}
[data-ui="3"] .u-small{font-size:var(--u-small);color:var(--faint)}
[data-ui="3"] .u-num{font-variant-numeric:tabular-nums;color:var(--accent-num,var(--ink))}

/* eyebrow with the live dot */
[data-ui="3"] .u-eyebrow{display:flex;align-items:center;gap:10px}
[data-ui="3"] .u-dot{width:7px;height:7px;border-radius:50%;background:var(--yellow);flex:none;box-shadow:0 0 0 0 rgba(244,255,75,.5);animation:u-beat 2.6s var(--u-ease) infinite}
:root[data-ui="3"][data-theme="light"] .u-dot{background:#000;box-shadow:0 0 0 0 rgba(0,0,0,.25)}
/* 8 Nov 2026 (Chris): the pulsing dot before page labels meant nothing there (the header has its own Live light), so it is hidden everywhere. Status dots (.u-state) stay. */
[data-ui="3"] .u-dot{display:none!important}
@keyframes u-beat{0%{box-shadow:0 0 0 0 rgba(244,255,75,.45)}70%,100%{box-shadow:0 0 0 7px rgba(244,255,75,0)}}
@keyframes u-pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* sections */
[data-ui="3"] .u-sec{display:flex;flex-direction:column}
[data-ui="3"] .u-sechead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}

/* the row (one component for every list) */
[data-ui="3"] .u-rows{list-style:none;margin:0;padding:0}
[data-ui="3"] .u-row{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 16px;padding:var(--u-row) 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
[data-ui="3"] a.u-row,[data-ui="3"] button.u-row,[data-ui="3"] .u-row[role="button"]{cursor:pointer;transition:opacity .2s var(--u-ease)}
[data-ui="3"] .u-row .n{font:600 var(--u-label)/1 var(--ui);letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--num-ink,var(--muted));min-width:22px}
[data-ui="3"] .u-row .t{display:flex;flex-direction:column;gap:3px;min-width:0}
[data-ui="3"] .u-row .t > .u-note{overflow:hidden;text-overflow:ellipsis}
[data-ui="3"] .u-row .end{display:flex;align-items:center;gap:14px;justify-content:flex-end}
[data-ui="3"] .u-arrow{display:inline-flex;color:var(--faint);transition:color .25s var(--u-ease),transform .35s var(--u-ease)}
[data-ui="3"] .u-arrow svg{width:11px;height:11px}
[data-ui="3"] a.u-row:hover .u-arrow,[data-ui="3"] a.u-row:focus-visible .u-arrow,[data-ui="3"] .u-row[role="button"]:hover .u-arrow{color:var(--ink);transform:translate(2px,-2px)}
[data-ui="3"] a.u-row:active,[data-ui="3"] .u-row[role="button"]:active{opacity:.55}
@media (hover:hover){[data-ui="3"] a.u-row:hover .u-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--line-strong)}}

/* state: a dot and a word */
[data-ui="3"] .u-state{display:inline-flex;align-items:center;gap:7px;font:500 var(--u-small)/1 var(--ui);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
[data-ui="3"] .u-label b,[data-ui="3"] .u-row .n{font-variant-numeric:tabular-nums}
[data-ui="3"] .u-state::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
[data-ui="3"] .u-state.late{color:var(--late)} [data-ui="3"] .u-state.due{color:var(--due)} [data-ui="3"] .u-state.ok{color:var(--ok)}
[data-ui="3"] .u-state.ink{color:var(--ink)} [data-ui="3"] .u-state.ink::before{background:var(--late)}

/* buttons and fields */
[data-ui="3"] .u-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border:1px solid var(--line-strong);border-radius:0;background:transparent;color:var(--ink);font:600 var(--u-label)/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:border-color .2s,background .2s,transform .15s var(--u-ease)}
[data-ui="3"] .u-btn:hover{border-color:var(--ink)}
[data-ui="3"] .u-btn:active{transform:scale(.98)}
[data-ui="3"] .u-btn.primary{background:var(--yellow);border-color:var(--yellow);color:#000}
[data-ui="3"] .u-btn.primary:hover{filter:brightness(1.05)}
[data-ui="3"] .u-btn:disabled{opacity:.35;cursor:not-allowed}
[data-ui="3"] .u-quiet{border:0;background:none;padding:0;color:var(--muted);font:600 var(--u-label)/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;transition:color .2s}
[data-ui="3"] .u-quiet:hover,[data-ui="3"] .u-quiet:focus-visible{color:var(--ink)}
[data-ui="3"] .u-field{height:44px;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;background:transparent;padding:0 2px;font:16px/1.2 var(--ui);color:var(--ink);min-width:0;transition:border-color .2s}
[data-ui="3"] .u-field::placeholder{color:var(--faint)}
[data-ui="3"] .u-field:focus{outline:none;border-bottom-color:var(--ink)}
[data-ui="3"] select.u-field{padding-right:22px;appearance:none;-webkit-appearance:none;background:linear-gradient(45deg,transparent 50%,var(--muted) 50%) right 7px center/5px 5px no-repeat,linear-gradient(-45deg,transparent 50%,var(--muted) 50%) right 2px center/5px 5px no-repeat;cursor:pointer;font-size:14px}
@media (max-width:640px){[data-ui="3"] select.u-field{font-size:16px}}
[data-ui="3"] .u-tabs{display:flex;gap:20px}
[data-ui="3"] .u-tabs button{border:0;background:none;padding:0;min-height:32px;font:600 var(--u-label)/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);cursor:pointer;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
[data-ui="3"] .u-tabs button:hover{color:var(--ink)}
[data-ui="3"] .u-tabs button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
[data-ui="3"] .toast{border-radius:0;font:600 var(--u-label)/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;padding:14px 18px}
[data-ui="3"] :focus-visible{outline:1px solid var(--ink);outline-offset:3px}

/* motion: a short load sequence, then rows fade up once as they come into view (fend.js adds .in) */
[data-ui="3"] .u-in{opacity:0;transform:translateY(16px)}
[data-ui="3"] .u-in.in{opacity:1;transform:none;transition:opacity .85s var(--u-ease),transform .85s var(--u-ease);transition-delay:var(--d,0s)}
[data-ui="3"] .u-in.u-now{transition:none}
@media (prefers-reduced-motion:reduce){[data-ui="3"] .u-in{opacity:1;transform:none}[data-ui="3"] *{animation:none!important;transition:none!important}}

/* v3 data parts (4 Nov 2026, first used by Finance; reuse on the Rate Card, Tracker and Dashboard).
   .u-panel  = the one panel for a main thing on a page (white on the warm page in light, a hairline in dark). No panels inside panels.
   .u-proof  = the proof strip: two to four big figures in a row (.u-fig, Inter, tabular) with a label and one quiet line.
   .u-term   = the proper financial or technical term beside a plain label, dotted underline, meaning in .u-tip on hover, focus or tap.
   .u-lead   = the one line under a page's hero. */
:root[data-ui="3"]{--u-fig:40px; --u-lead:18px}
@media (max-width:640px){:root[data-ui="3"]{--u-fig:32px; --u-lead:16px}}
[data-ui="3"] .u-panel{background:var(--surface);border:1px solid var(--line);padding:24px;min-width:0}
:root[data-ui="3"][data-theme="light"] .u-panel{border-color:transparent}
@media (max-width:640px){[data-ui="3"] .u-panel{padding:18px 16px}}
[data-ui="3"] .u-lead{font:400 var(--u-lead)/1.45 var(--ui);color:var(--muted);margin:0;max-width:52ch;text-wrap:pretty}
[data-ui="3"] .u-lead b{font-weight:500;color:var(--ink)}
[data-ui="3"] .u-proof{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:12px}
@media (max-width:760px){[data-ui="3"] .u-proof{grid-template-columns:1fr;gap:8px}}
[data-ui="3"] .u-proof .u-panel{display:flex;flex-direction:column;gap:12px}
[data-ui="3"] .u-fig{font:500 var(--u-fig)/1 var(--ui);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;margin:6px 0 0}
[data-ui="3"] .u-term{font:400 var(--u-small)/1.2 var(--ui);letter-spacing:0;text-transform:none;color:var(--faint);text-decoration:underline dotted;text-decoration-color:var(--line-strong);text-underline-offset:3px;cursor:help;white-space:nowrap;-webkit-tap-highlight-color:transparent}
[data-ui="3"] .u-term:hover,[data-ui="3"] .u-term:focus-visible{color:var(--ink);text-decoration-color:currentColor}
[data-ui="3"] .u-label:has(.u-term){display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
[data-ui="3"] .u-lead .u-term{font-size:inherit;color:inherit}
[data-ui="3"] .u-tip{position:fixed;z-index:30;pointer-events:none;max-width:280px;background:var(--ink);color:var(--bg);padding:10px 12px;font:400 var(--u-small)/1.45 var(--ui);font-variant-numeric:tabular-nums;opacity:0;transform:translateY(4px);transition:opacity .2s var(--u-ease),transform .2s var(--u-ease)}
[data-ui="3"] .u-tip.on{opacity:1;transform:none}
[data-ui="3"] .u-tip b{font-weight:600}

/* v3 area tabs (4 Nov 2026): pages that work as one area share a tab row at the top of the page, e.g. Finance · Estimates · Rate Card.
   Same look as .u-tabs, but links, 44px tall to tap, sitting on a hairline. A <b> inside shows a quiet count. */
[data-ui="3"] .u-area{display:flex;gap:28px;border-bottom:1px solid var(--line);margin-bottom:-20px;overflow-x:auto;scrollbar-width:none}
[data-ui="3"] .u-area::-webkit-scrollbar{display:none}
[data-ui="3"] .u-area a{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-bottom:-1px;font:600 var(--u-label)/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);text-decoration:none;border-bottom:1px solid transparent;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:color .2s,border-color .2s}
[data-ui="3"] .u-area a:hover{color:var(--ink)}
[data-ui="3"] .u-area a:active{opacity:.55}
[data-ui="3"] .u-area a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
[data-ui="3"] .u-area a b{font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
[data-ui="3"] .u-area a b:empty{display:none}
@media (max-width:640px){[data-ui="3"] .u-area{gap:22px;margin-bottom:-12px}}
/* a row that links somewhere (div/a lists inside panels) */
[data-ui="3"] div.u-rows{display:block}
[data-ui="3"] .u-gloss{font:400 var(--u-small)/1.2 var(--ui);letter-spacing:0;text-transform:none;color:var(--faint)}
[data-ui="3"] .u-term.is-head{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;white-space:normal;text-underline-offset:4px}

/* ============================================================
   SHARED CARD + ICON TILE (moved from Home, Projects plan step 1, 6 Nov 2026). .u-card is the square card for a main
   thing (icon tile, number, name, description, footer signal + arrow); .u-card.mini the one-line small card; .u-ico the
   icon tile (Material Symbols, Outlined 300, inlined SVG). Scoped with :where() so a page's own layout rules still win.
   ============================================================ */
:where([data-ui="3"]) .u-card{position:relative;display:flex;flex-direction:column;min-height:168px;padding:18px 18px 16px;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;min-width:0;-webkit-tap-highlight-color:transparent;transition:border-color .25s var(--u-ease),background .25s var(--u-ease),transform .15s var(--u-ease)}
:where([data-ui="3"][data-theme="light"]) .u-card{border-color:transparent}
:where([data-ui="3"]) .u-card .hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
:where([data-ui="3"]) .u-card .n{font:600 var(--u-label)/1 var(--ui);letter-spacing:.08em;color:var(--faint);font-variant-numeric:tabular-nums;padding-top:2px}
:where([data-ui="3"]) .u-ico{width:36px;height:36px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--sunk);color:var(--ink);transition:background .3s var(--u-ease),color .3s var(--u-ease)}
:where([data-ui="3"][data-theme="dark"]) .u-ico{background:#1A1D1D}
:where([data-ui="3"]) .u-ico svg{width:20px;height:20px}
:where([data-ui="3"]) .u-card .nm{font:500 var(--u-title)/1.3 var(--ui);letter-spacing:-.01em;margin-top:18px;text-wrap:balance}
:where([data-ui="3"]) .u-card .ds{font-size:var(--u-body);line-height:1.45;color:var(--muted);margin:4px 0 0;text-wrap:pretty}
:where([data-ui="3"]) .u-card .ft{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px;min-height:30px}
:where([data-ui="3"]) .u-card .ft .u-arrow{margin-left:auto}
@media (hover:hover){:where([data-ui="3"]) .u-card:hover{border-color:var(--line-strong)}:where([data-ui="3"]) .u-card:hover .u-ico{background:var(--yellow);color:#000}:where([data-ui="3"]) .u-card:hover .u-arrow{color:var(--ink);transform:translate(2px,-2px)}}
:where([data-ui="3"][data-theme="light"]) .u-card:hover{border-color:transparent;background:#FBFBF8}
:where([data-ui="3"]) .u-card:active{transform:scale(.985)}
:where([data-ui="3"]) .u-card:focus-visible .u-ico{background:var(--yellow);color:#000}
/* small cards for minor tools: one line, stacked in the last column */
:where([data-ui="3"]) .u-card.mini{min-height:0;flex-direction:row;align-items:center;gap:12px;padding:12px 14px}
:where([data-ui="3"]) .u-card.mini .u-ico{width:30px;height:30px}
:where([data-ui="3"]) .u-card.mini .u-ico svg{width:17px;height:17px}
:where([data-ui="3"]) .u-card.mini .mt{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
:where([data-ui="3"]) .u-card.mini .nm{margin:0;font-size:var(--u-body);line-height:1.3;overflow-wrap:anywhere}
:where([data-ui="3"]) .u-card.mini .u-arrow{flex:none;align-self:center}
:where([data-ui="3"]) .u-card.skel{pointer-events:none}
:where([data-ui="3"]) .u-card.skel .bar{display:block;height:14px;width:55%;background:var(--sunk);margin-top:auto;animation:u-pulse 1.6s infinite}

/* ============================================================
   "WE'RE IN CHARGE" CONTROLS (Projects plan step 1, 6 Nov 2026), drawn by fendUI in fend.js:
   .u-tap (a dot-and-word state you tap to change), .u-menu (the small menu under it), .u-dlg (the Log contact sheet),
   .u-seg (a row of choices, e.g. Email / Call / In person / LinkedIn). Square, hairline, no shadows; yellow only on Save.
   ============================================================ */
[data-ui="3"] .u-tap{background:none;border:0;padding:8px 6px;margin:-8px -6px;cursor:pointer;font:inherit;font:500 var(--u-small)/1 var(--ui);border-radius:0;-webkit-tap-highlight-color:transparent}
[data-ui="3"] .u-tap::after{content:"";width:0;height:0;border:3px solid transparent;border-top-color:currentColor;margin:3px 0 0 -2px;opacity:0;transition:opacity .2s}
@media (hover:hover){[data-ui="3"] .u-tap:hover::after{opacity:.7}}
[data-ui="3"] .u-tap[aria-expanded="true"]::after,[data-ui="3"] .u-tap:focus-visible::after{opacity:.7}
[data-ui="3"] .u-tap:focus-visible{outline:1px solid var(--line-strong);outline-offset:0}
.u-menu{position:fixed;z-index:60;min-width:200px;max-width:calc(100vw - 16px);padding:6px 0;background:var(--surface);border:1px solid var(--line-strong);color:var(--ink);animation:u-menu .22s var(--u-ease)}
@keyframes u-menu{from{opacity:0;transform:translateY(-4px)}}
.u-menu button,.u-menu .pick{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:44px;padding:0 16px;background:none;border:0;color:var(--ink);font:400 var(--u-body)/1.2 var(--ui);text-align:left;cursor:pointer;box-sizing:border-box}
.u-menu button .s{color:var(--muted);font-size:var(--u-small);font-variant-numeric:tabular-nums;white-space:nowrap}
.u-menu button:hover,.u-menu button:focus-visible{background:var(--sunk);outline:none}
.u-menu button[aria-checked="true"] .l{font-weight:600}
.u-menu button.sep{border-top:1px solid var(--line);margin-top:6px}
.u-menu button.st .l{display:inline-flex;align-items:center;gap:9px}
.u-menu button.st .l::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted)}
.u-menu button.st.late .l::before{background:var(--late)}.u-menu button.st.due .l::before{background:var(--due)}.u-menu button.st.ok .l::before{background:var(--ok)}.u-menu button.st.ink .l::before{background:var(--ink)}
.u-menu .pick{cursor:default}.u-menu .pick .u-field{height:36px;font-size:16px;width:150px}
@media (prefers-reduced-motion:reduce){.u-menu{animation:none}}
dialog.u-dlg{width:min(460px,calc(100vw - 32px));padding:28px;border:1px solid var(--line-strong);border-radius:0;background:var(--bg);color:var(--ink);box-sizing:border-box}
dialog.u-dlg[open]{animation:u-menu .35s var(--u-ease)}
dialog.u-dlg::backdrop{background:var(--overlay,rgba(0,0,0,.45));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
dialog.u-dlg form{display:flex;flex-direction:column;gap:18px;margin:0}
dialog.u-dlg .u-label,dialog.u-dlg .u-title{margin:0}
dialog.u-dlg .u-title{margin-top:-10px}
dialog.u-dlg .row{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}
dialog.u-dlg .row .u-field{flex:0 0 150px}
dialog.u-dlg .acts{display:flex;justify-content:flex-end;align-items:center;gap:16px;margin-top:4px}
dialog.u-dlg .err{color:var(--late);margin:-8px 0 0;min-height:0}
dialog.u-dlg .err:empty{display:none}
.u-seg{display:flex;flex-wrap:wrap;border:1px solid var(--line-strong)}
.u-seg button{flex:1 1 auto;height:36px;padding:0 12px;background:none;border:0;border-left:1px solid var(--line-strong);color:var(--muted);font:500 var(--u-small)/1 var(--ui);cursor:pointer;white-space:nowrap}
.u-seg button:first-child{border-left:0}
.u-seg button[aria-checked="true"]{background:var(--ink);color:var(--bg)}
@media (max-width:560px){dialog.u-dlg{padding:22px 16px;margin:auto auto 0;width:100vw;max-width:100vw}dialog.u-dlg .row .u-field{flex:1 1 100%}.u-seg{width:100%}.u-seg button{height:44px}}
/* ============================================================
   BUSYNESS (step 3, 6 Nov 2026): heat-strip colours, the slim strip (.u-heat) and the job colours for the Timeline.
   Heat = one blue scale, calm → over capacity (h1–h5; h0 = nothing booked). Dark mode has its own steps, lighter = busier.
   Job colours = one calm colour per job in play, in a fixed, colour-blind-checked order (aqua, orange, violet, magenta, green). */
:root[data-ui="3"]{--heat-0:transparent;--heat-1:#104281;--heat-2:#1c5cab;--heat-3:#3987e5;--heat-4:#86b6ef;--heat-5:#cde2fb;
  --job-0:#199e70;--job-1:#d95926;--job-2:#9085e9;--job-3:#d55181;--job-4:#008300;--job-x:#C9D0D0;--quoted:#4E5858;--pencil:#6B7676}
:root[data-ui="3"][data-theme="light"]{--heat-1:#cde2fb;--heat-2:#9ec5f4;--heat-3:#5598e7;--heat-4:#256abf;--heat-5:#0d366b;
  --job-0:#1baf7a;--job-1:#eb6834;--job-2:#6250d6;--job-3:#e87ba4;--job-4:#008300;--job-x:#1E2424;--quoted:#AEB6B6;--pencil:#8C9696}
.u-heat{display:grid;grid-template-columns:repeat(var(--n,12),minmax(0,1fr));gap:2px;height:10px;min-width:0}
.u-heat i{display:block;background:var(--heat-0);box-shadow:inset 0 0 0 1px var(--line);transition:transform .2s var(--u-ease,ease)}
.u-heat i.h1{background:var(--heat-1);box-shadow:none}.u-heat i.h2{background:var(--heat-2);box-shadow:none}.u-heat i.h3{background:var(--heat-3);box-shadow:none}
.u-heat i.h4{background:var(--heat-4);box-shadow:none}.u-heat i.h5{background:var(--heat-5);box-shadow:none}
@media (hover:hover){.u-heat i:hover{transform:scaleY(1.6)}}
.u-heat.tall{height:28px}
.u-heatkey{display:flex;align-items:center;gap:6px;font:500 var(--u-small)/1 var(--ui);color:var(--muted)}
.u-heatkey .u-heat{width:72px;height:8px;--n:5}
@media (forced-colors:active){.u-heat i{forced-color-adjust:none}}

/* ============================================================
   FEND SIDEBAR (6 Nov 2026): the one menu on every page, drawn by fendNav in fend.js.
   Pinned at 1180px and wider (232px, same page colour, hairline edge, top row lines up with the 60px header);
   a drawer below that, or when hidden. Square, quiet, Inter; current place = a sunk fill, its tool's views open beneath.
   Not scoped to data-ui="3": v2 pages (Trends, Pitch Room) get it too.
   ============================================================ */
:root{--fn-w:232px;--fn-ease:cubic-bezier(.22,1,.36,1)}
/* space is held before the script runs, so pages don't jump sideways on load */
@media (min-width:1180px){html:not([data-nav="off"]):not(.fn-nopin) body:not(:has(> main.app)){padding-left:var(--fn-w)}}
html.fn-anim body{transition:padding-left .32s var(--fn-ease)}
.fn-side{position:fixed;z-index:6;top:0;bottom:0;left:0;width:var(--fn-w);background:var(--bg);border-right:1px solid var(--line);color:var(--ink);font-family:var(--ui)}
.fn-side[hidden]{display:block;transform:translateX(-100%);visibility:hidden}
html.fn-anim .fn-side{transition:transform .32s var(--fn-ease),visibility .32s}
.fn-side,.fn-in{display:flex;flex-direction:column}
.fn-in{height:100%}
.fn-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;height:60px;padding:0 10px 0 20px;border-bottom:1px solid var(--line);box-sizing:border-box}
.fn-mark{display:inline-flex;color:var(--ink);text-decoration:none;font:600 13px/1 var(--ui);letter-spacing:.14em}
.fn-mark svg{display:block;height:20px;width:auto;aspect-ratio:319/80}
.fn-x,.fn-menu,.fn-chev{all:unset;box-sizing:border-box;display:inline-grid;place-items:center;flex:none;cursor:pointer;color:var(--faint);transition:color .15s,background .15s}
.fn-x{width:32px;height:32px}
.fn-x svg,.fn-menu svg{width:20px;height:20px}
.fn-x:hover,.fn-menu:hover,.fn-chev:hover{color:var(--ink)}
.fn-menu{width:40px;height:40px;margin-left:-10px;margin-right:-6px;color:var(--ink)}
html[data-nav="pin"] .fn-menu{display:none}
.fn-x:focus-visible,.fn-menu:focus-visible,.fn-chev:focus-visible,.fn-in a:focus-visible,.fn-side a:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.fn-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 10px 32px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.fn-label{margin:24px 0 6px;padding:0 10px;font:600 11px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.fn-list,.fn-sub{list-style:none;margin:0;padding:0}
.fn-row{position:relative;display:flex;align-items:center}
.fn-a{flex:1;min-width:0;display:flex;align-items:center;gap:12px;height:34px;padding:0 10px;color:var(--ink);text-decoration:none;font:400 14px/1 var(--ui);letter-spacing:-.005em;transition:background .15s}
.fn-a:hover{background:color-mix(in srgb,var(--sunk) 60%,transparent)}
.fn-a:active{opacity:.7}
.fn-ic{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;color:var(--faint);transition:color .15s}
.fn-ic svg{width:20px;height:20px}
.fn-a:hover .fn-ic{color:var(--ink)}
.fn-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fn-a[aria-current="page"]{background:var(--sunk);font-weight:500}
.fn-a[aria-current="page"] .fn-ic,.fn-li.here>.fn-row .fn-ic{color:var(--ink)}
.fn-li.here>.fn-row .fn-a{font-weight:500}
.fn-li.has .fn-a{padding-right:34px}
.fn-chev{position:absolute;right:3px;top:3px;width:28px;height:28px}
.fn-chev svg{width:18px;height:18px;transition:transform .25s var(--fn-ease)}
.fn-li.open .fn-chev svg{transform:rotate(90deg)}
.fn-li.has .fn-n{margin-right:-2px}
/* counts: only when there's something to do; Today's is red like Home's card */
.fn-n{flex:none;font:500 12px/1 var(--ui);font-variant-numeric:tabular-nums;color:var(--muted)}
.fn-n.late{display:inline-flex;align-items:center;gap:6px;color:var(--late)}
.fn-n.late::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.fn-st{flex:none;width:6px;height:6px;border-radius:50%;background:var(--due)}
.fn-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* a tool's views: a hairline guide under the icon, the current one marked on it */
.fn-subw{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--fn-ease)}
.fn-li.open>.fn-subw{grid-template-rows:1fr}
.fn-sub{position:relative;overflow:hidden;min-height:0}
.fn-sub::before{content:"";position:absolute;left:20px;top:2px;bottom:6px;width:1px;background:var(--line-strong)}
.fn-sub li:first-child{padding-top:2px}.fn-sub li:last-child{padding-bottom:6px}
.fn-sub a{position:relative;display:flex;align-items:center;height:32px;padding:0 10px 0 42px;color:var(--muted);text-decoration:none;font:400 14px/1 var(--ui);transition:color .15s}
.fn-sub a:hover{color:var(--ink)}
.fn-sub a[aria-current="page"]{color:var(--ink);font-weight:500}
.fn-sub a[aria-current="page"]::before{content:"";position:absolute;left:20px;top:6px;bottom:6px;width:1px;background:var(--ink)}
/* headers: with the sidebar pinned, its wordmark leads, so the header's own steps aside */
html[data-nav="pin"] header.u-top .u-mark{display:none}
html[data-nav="pin"] header.u-top .u-tool{padding-left:0;border-left:0}
html[data-nav="pin"] header .appbar .homenav{display:none}
html[data-nav="pin"] header .appbar.fn-only-home{display:none}
header .appbar-in .fn-menu{width:32px;height:32px;margin-left:-6px;margin-right:2px}
header .appbar-in .fn-menu svg{width:18px;height:18px}
/* the drawer (narrow screens, or when hidden) */
dialog.fn-dlg{position:fixed;inset:0 auto 0 0;margin:0;padding:0;width:min(300px,86vw);height:100%;max-height:none;max-width:none;border:0;border-right:1px solid var(--line);background:var(--bg);color:var(--ink);font-family:var(--ui);animation:fn-in .32s var(--fn-ease)}
dialog.fn-dlg::backdrop{background:var(--overlay);animation:fn-fade .32s var(--fn-ease)}
dialog.fn-dlg.out{animation:fn-out .22s var(--fn-ease) forwards}
dialog.fn-dlg.out::backdrop{animation:fn-fade .22s var(--fn-ease) reverse forwards}
dialog.fn-dlg .fn-head{padding-top:env(safe-area-inset-top,0px);height:calc(60px + env(safe-area-inset-top,0px))}
dialog.fn-dlg .fn-scroll{padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}
@keyframes fn-in{from{transform:translateX(-100%)}to{transform:none}}
@keyframes fn-out{to{transform:translateX(-100%)}}
@keyframes fn-fade{from{opacity:0}to{opacity:1}}
/* touch: 44px rows */
@media (pointer:coarse),(max-width:640px){
  .fn-a{height:44px}.fn-sub a{height:44px}.fn-chev{width:44px;height:44px;top:0;right:0}.fn-li.has .fn-a{padding-right:48px}
  .fn-x{width:44px;height:44px;margin-right:-6px}
  .fn-menu{width:44px;height:44px;margin-left:-12px;margin-right:-8px}
  header .appbar-in .fn-menu{width:36px;height:36px;margin-left:-8px}
}
dialog.fn-dlg{border-radius:0}
html[data-nav="pin"] header .brand svg.mark{display:none}
/* phones: Outreach's header also holds the Chris/Noel switch, so the menu button takes the wordmark's place (the menu carries it) */
@media (max-width:480px){header.u-top:has(.seg.who) .u-mark{display:none}[data-ui="3"] header.u-top:has(.seg.who) .u-tool{display:block;flex:none;padding-left:0;border-left:0}[data-ui="3"] header.u-top:has(.seg.who) .u-wrap{gap:10px}[data-ui="3"] header.u-top:has(.seg.who) .u-ctl{gap:8px}}
@media (max-width:379px){[data-ui="3"] header.u-top:has(.seg.who) .u-tool{display:none}}
@media (prefers-reduced-motion:reduce){dialog.fn-dlg,dialog.fn-dlg::backdrop,dialog.fn-dlg.out{animation:none}.fn-subw,.fn-chev svg,html.fn-anim body,html.fn-anim .fn-side{transition:none}}
@media print{.fn-side,.fn-menu,dialog.fn-dlg{display:none!important}html body{padding-left:0!important}}
/* the sidebar's Search row (opens fendFind, also ⌘K / Ctrl K) */
.fn-find{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;height:34px;padding:0 10px;margin:0 0 6px;cursor:pointer;color:var(--muted);font:400 14px/1 var(--ui);transition:background .15s,color .15s}
.fn-find:hover{background:color-mix(in srgb,var(--sunk) 60%,transparent);color:var(--ink)}
.fn-find:hover .fn-ic{color:var(--ink)}
.fn-find:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.fn-kbd{flex:none;font:500 11px/1 var(--ui);letter-spacing:.04em;color:var(--faint);padding:4px 5px;border:1px solid var(--line-strong)}
@media (pointer:coarse),(max-width:640px){.fn-find{height:44px}.fn-kbd{display:none}}
/* search (fendFind): one quiet box near the top, results grouped, the current one a sunk fill */
dialog.ff{position:fixed;inset:12vh 0 auto;margin:0 auto;padding:0;width:min(640px,calc(100vw - 32px));max-height:min(76vh,640px);border:1px solid var(--line-strong);border-radius:0;background:var(--surface);color:var(--ink);font-family:var(--ui);overflow:hidden;animation:ff-in .26s var(--fn-ease)}
dialog.ff[open]{display:flex;flex-direction:column}
dialog.ff::backdrop{background:var(--overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fn-fade .26s var(--fn-ease)}
dialog.ff.out{animation:ff-out .16s var(--fn-ease) forwards}
@keyframes ff-in{from{opacity:0;transform:translateY(-8px) scale(.99)}}
@keyframes ff-out{to{opacity:0;transform:translateY(-4px)}}
.ff-top{flex:none;display:flex;align-items:center;gap:12px;height:60px;padding:0 12px 0 20px;border-bottom:1px solid var(--line)}
.ff-si{display:inline-grid;color:var(--faint)}.ff-si svg{width:20px;height:20px}
.ff-in{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--ink);font:400 17px/1.2 var(--ui);letter-spacing:-.01em;padding:0}
.ff-in::placeholder{color:var(--faint)}
dialog.ff .ff-in:focus,dialog.ff .ff-in:focus-visible{outline:0;box-shadow:none;border:0}
.ff-c{display:none}
@media (pointer:coarse){.ff-k{display:none}.ff-c{display:inline}.ff-close{height:36px;line-height:36px;padding:0 12px}}
.ff-close{all:unset;box-sizing:border-box;flex:none;cursor:pointer;height:28px;padding:0 8px;font:600 11px/28px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line-strong);transition:color .15s,border-color .15s}
.ff-close:hover{color:var(--ink);border-color:var(--ink)}
.ff-close:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ff-list{list-style:none;margin:0;padding:6px 8px 12px;overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0;scrollbar-width:thin}
.ff-g{padding:16px 12px 6px;font:600 11px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.ff-r{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 12px;cursor:pointer}
.ff-r[aria-selected="true"]{background:var(--sunk)}
.ff-r:active{opacity:.7}
.ff-ic{flex:none;display:inline-grid;color:var(--faint)}.ff-ic svg{width:20px;height:20px}
.ff-r[aria-selected="true"] .ff-ic{color:var(--ink)}
.ff-t{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px}
.ff-ti{flex:none;max-width:60%;font:500 14px/1.3 var(--ui);letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ff-ti mark{background:none;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ff-s{flex:1;min-width:0;font:400 12px/1.3 var(--ui);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ff-x{flex:none;display:inline-grid;color:var(--faint)}.ff-x svg{width:9px;height:9px}
.ff-r[aria-selected="true"] .ff-x{color:var(--ink);transform:translate(2px,-2px)}
.ff-x{transition:transform .2s var(--fn-ease),color .15s}
.ff-none{padding:20px 12px;color:var(--muted);font-size:14px}
:root[data-theme="dark"] dialog.ff{background:var(--bg)}
@media (max-width:640px){
  dialog.ff{inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:0}
  .ff-top{padding:env(safe-area-inset-top,0px) 12px 0 16px;height:calc(60px + env(safe-area-inset-top,0px))}
  .ff-in{font-size:16px}
  .ff-t{flex-direction:column;align-items:stretch;gap:2px}.ff-ti{max-width:none}
  .ff-list{padding:4px 4px calc(16px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){dialog.ff,dialog.ff::backdrop,dialog.ff.out{animation:none}}
@media print{dialog.ff{display:none!important}}
/* Outreach: with the sidebar pinned it already lists Today, Pipeline, Results and the rest, so Outreach's own tab row
   keeps only its search and New company, set to the left on the column */
html[data-nav="pin"] .onav .tabs{display:none}
html[data-nav="pin"] .onav .navact{margin-left:0;top:0;flex:1;justify-content:space-between}
html[data-nav="pin"] .onav .navact .qs{flex:0 1 360px}
html[data-nav="pin"] .onav .navact .qs input{width:100%}

/* "Make the invoice" sheet (fendInv, 6 Nov 2026): the Log contact sheet, a little wider, with labelled fields */
dialog.u-dlg.inv{width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto}
dialog.u-dlg.inv .two{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
dialog.u-dlg.inv .f{display:flex;flex-direction:column;gap:2px;min-width:0}
dialog.u-dlg.inv .f.wide{grid-column:1/-1}
dialog.u-dlg.inv .f .u-field{width:100%;box-sizing:border-box}
dialog.u-dlg.inv textarea.u-field{height:auto;min-height:60px;padding:10px 2px;resize:vertical;line-height:1.4}
dialog.u-dlg.inv .u-seg{margin-top:4px}
dialog.u-dlg.inv .sum{color:var(--ink);margin:-4px 0 0}
dialog.u-dlg.inv .warn{color:var(--due);margin:-8px 0 0}
dialog.u-dlg.inv .warn:empty{display:none}
dialog.u-dlg.inv .acts .u-btn{text-decoration:none}
@media (max-width:520px){dialog.u-dlg.inv{padding:22px 18px}dialog.u-dlg.inv .two{grid-template-columns:1fr}}