:root{ --ground:#F2F4F8; --panel:#FFFFFF; --panel-2:#F7F9FC; --ink:#161A21; --muted:#586170; --faint:#8791A0; --line:#E5E9F0; --line-2:#EEF1F6; --accent:#5A57D8; --accent-soft:#ECECFB; --accent-ink:#4744C6; --warm:#C2761F; --warm-soft:#FAEFDD; --good:#1E9B57; --good-soft:#E4F4EB; --info:#3A78D0; --info-soft:#E5EFFB; --warn:#BC760D; --warn-soft:#F9EFDB; --crit:#D44343; --crit-soft:#FAE7E7; --bb:#7A8593; --bb-soft:#EDF0F4; --staff:#9A6232; /* a colleague's name — the brown underline (.mail-staff) */ --shadow:0 1px 2px rgba(16,22,40,.04),0 3px 14px rgba(16,22,40,.05); --shadow-lg:0 16px 50px rgba(16,22,40,.16); --r:13px; --r-sm:9px; --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-num:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,monospace; /* Handwriting faces. BOTH stay loaded (index.html) even though only one is in use: Birthstone is kept deliberately, for other surfaces later, and so that swapping the signature back to it is two lines here rather than a round trip through the font request. Every fallback is a real cursive face shipping with Windows or macOS, so the effect survives the web font not arriving — a signature that fails to a sans-serif stops reading as a signature at all. */ --font-sig-fallback:"Segoe Script","Brush Script MT","Snell Roundhand",cursive; --font-sig-alexbrush:"Alex Brush",var(--font-sig-fallback); --font-sig-birthstone:"Birthstone",var(--font-sig-fallback); /* Size travels WITH the face, because the two are not interchangeable at one value: Alex Brush is heavier and slanted and settles at 18px, Birthstone is lighter and more upright and needs 22px to carry the same weight beside the pill. Switching faces means switching both lines. */ --font-sig:var(--font-sig-alexbrush); --font-sig-size:18px; /* 22px if switching to --font-sig-birthstone */ } @media (prefers-color-scheme:dark){:root{ --ground:#0D1016; --panel:#151922; --panel-2:#1A1F29; --ink:#E6EAF2; --muted:#96A0AF; --faint:#68717F; --line:#242A36; --line-2:#1E232E; --accent:#8A8BF2; --accent-soft:#1D2038; --accent-ink:#B3B3F8; --warm:#DA9A4B; --warm-soft:#2A2012; --good:#3EC079; --good-soft:#11271A; --info:#5D9AE7; --info-soft:#131E2D; --warn:#D89A3B; --warn-soft:#2A2012; --crit:#E96D6D; --crit-soft:#2C1717; --bb:#808A98; --bb-soft:#1C212B; --staff:#C8925F; --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.3); --shadow-lg:0 20px 60px rgba(0,0,0,.55); }} :root[data-theme="light"]{--ground:#F2F4F8;--panel:#FFFFFF;--panel-2:#F7F9FC;--ink:#161A21;--muted:#586170;--faint:#8791A0;--line:#E5E9F0;--line-2:#EEF1F6;--accent:#5A57D8;--accent-soft:#ECECFB;--accent-ink:#4744C6;--warm:#C2761F;--warm-soft:#FAEFDD;--good:#1E9B57;--good-soft:#E4F4EB;--info:#3A78D0;--info-soft:#E5EFFB;--warn:#BC760D;--warn-soft:#F9EFDB;--crit:#D44343;--crit-soft:#FAE7E7;--bb:#7A8593;--bb-soft:#EDF0F4;--staff:#9A6232;--shadow:0 1px 2px rgba(16,22,40,.04),0 3px 14px rgba(16,22,40,.05);--shadow-lg:0 16px 50px rgba(16,22,40,.16);} :root[data-theme="dark"]{--ground:#0D1016;--panel:#151922;--panel-2:#1A1F29;--ink:#E6EAF2;--muted:#96A0AF;--faint:#68717F;--line:#242A36;--line-2:#1E232E;--accent:#8A8BF2;--accent-soft:#1D2038;--accent-ink:#B3B3F8;--warm:#DA9A4B;--warm-soft:#2A2012;--good:#3EC079;--good-soft:#11271A;--info:#5D9AE7;--info-soft:#131E2D;--warn:#D89A3B;--warn-soft:#2A2012;--crit:#E96D6D;--crit-soft:#2C1717;--bb:#808A98;--bb-soft:#1C212B;--staff:#C8925F;--shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.3);--shadow-lg:0 20px 60px rgba(0,0,0,.55);} *{box-sizing:border-box} /* ---- Count badges (.badge) — one primitive, see DESIGN-SYSTEM.md §Count badges ---- Two rules, both learned the hard way: 1. A badge NEVER relies on space outside its host box. Every rail and bar in this app is a scroll container (#nav and #main are overflow:auto), so anything hanging outside a button or a nav item gets sliced by the nearest one. Corner badges are pinned inside the host. 2. The ring that separates a badge from the icon beneath it is a box-shadow, NOT a border. `*{box-sizing:border-box}` means a 2px border eats 4px of a 16px pill, leaving 12px of interior for a taller line box — the digits then paint onto the ring and read as cut off. Glyphs are centred by grid + line-height:1 so the text box can never exceed the pill. */ .badge{--badge-h:16px;display:inline-grid;place-items:center;min-width:var(--badge-h);height:var(--badge-h);padding:0 5px; background:var(--crit);color:#fff;border-radius:999px;font-size:10.5px;font-weight:700;line-height:1; font-variant-numeric:tabular-nums;white-space:nowrap} body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-ui);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased} .num{font-family:var(--font-num);font-variant-numeric:tabular-nums} .eyebrow{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} h1,h2,h3{margin:0;text-wrap:balance} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} .app{display:grid;grid-template-columns:228px 1fr;min-height:100vh} .app.collapsed{grid-template-columns:62px 1fr} .sidebar{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:14px 12px} .brand{display:flex;align-items:center;gap:9px;padding:6px 8px 12px;font-weight:700;font-size:18px} .brand .mark{width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#847fee);color:#fff;font-weight:800} .brand .word{font-style:italic} .app.collapsed .brand .word,.app.collapsed .nav-label,.app.collapsed .nav-group-label,.app.collapsed .u-meta{display:none} .nav{display:flex;flex-direction:column;gap:1px;margin-top:2px;overflow-y:auto} .nav-group-label{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);padding:12px 10px 5px} .nav a{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:var(--r-sm);color:var(--muted);font-weight:500;position:relative} .nav a .ic{width:18px;height:18px;flex:none;stroke:currentColor;stroke-width:1.8;fill:none;opacity:.9} .nav a:hover{background:var(--line-2);color:var(--ink)} .nav a.active{background:var(--accent-soft);color:var(--accent-ink);font-weight:600} .nav a .badge{margin-left:auto;flex:none} /* The label yields before the badge does — a long nav label must ellipsis, never push the count out past the rail's edge (.nav is a scroll container, so anything pushed out is sliced off). */ .nav a .nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .app.collapsed .nav a{justify-content:center;padding:9px} /* Collapsed rail: there is no room beside the icon (37px item), so the count stops being a flow item and becomes a corner marker pinned INSIDE the item — see §Count badges. */ .app.collapsed .nav a .badge{position:absolute;top:1px;right:1px;margin:0;--badge-h:15px;font-size:9px;padding:0 4px;box-shadow:0 0 0 2px var(--panel)} .app.collapsed .nav a.active .badge{box-shadow:0 0 0 2px var(--accent-soft)} .side-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:10px;display:flex;align-items:center;gap:9px;padding-left:6px} /* position/overflow so a borrowed headshot can sit OVER the initials (js/engine.js uAv, phase 3): the letters show while the image loads, and stay if it fails — onerror removes the img, so a bridge outage degrades to the plain coloured circle rather than an empty disc. */ .avatar{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;position:relative;overflow:hidden} .avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block} .u-meta{min-width:0;line-height:1.25}.u-meta .n{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.u-meta .r{font-size:11px;color:var(--faint)} .um-item{padding:8px 10px;border-radius:7px;font-size:13px;color:var(--ink)}.um-item:hover{background:var(--panel-2)} .main{min-width:0;display:flex;flex-direction:column;max-height:100vh;overflow-y:auto} .topbar{position:sticky;top:var(--banner-h,0px);z-index:20;background:color-mix(in srgb,var(--ground) 84%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:10px 22px} .icon-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;color:var(--muted)} .icon-btn:hover{color:var(--ink);border-color:var(--faint)}.icon-btn .ic{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;fill:none} /* Compact variant for repeated per-row actions in table cells (see DESIGN-SYSTEM.md §Icon actions) — a common, self-explanatory action (refresh, cancel, copy…) repeated down a column should be a small icon + tooltip, not a text button re-reading the same word N times down the page. */ .icon-btn.sm{width:26px;height:26px;border-radius:7px;display:inline-grid} .icon-btn.sm .ic{width:14px;height:14px} .icon-btn.crit{color:var(--crit)}.icon-btn.crit:hover{border-color:var(--crit)} .search{flex:1;max-width:380px;display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:7px 12px;color:var(--faint)} .search .ic{width:16px;height:16px;stroke:currentColor;stroke-width:1.9;fill:none} .search input{border:0;background:transparent;color:var(--ink);flex:1;outline:none;font-size:13px} .spacer{flex:1} .scope{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:3px} .scope button{border:0;background:transparent;color:var(--muted);font-weight:600;font-size:12.5px;padding:5px 13px;border-radius:7px;display:flex;align-items:center;gap:6px} .scope button.on{background:var(--accent);color:#fff} .scope .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75} /* ── Nav scope toggle (sidebar) ── */ .nav-scope{padding:2px 2px 6px} /* inline-flex keeps the pill at natural width — not stretched to the full sidebar */ .nav-scope .scope{display:inline-flex} .nav-scope .scope button{flex:1;justify-content:center;padding:5px 10px;font-size:12px} /* single-letter abbreviations (M/F) only shown in the collapsed rail */ .scope-short{display:none} /* Section separators — between Practice/Personal and Personal/Admin */ .nav-sep{height:1px;background:var(--line);margin:8px 4px 4px} /* Collapsed rail: scope toggle hidden — it's a setting, change it when expanded */ .app.collapsed .nav-scope{display:none} /* Separators visible in collapsed rail with slightly tighter horizontal margin */ .app.collapsed .nav-sep{margin:6px 8px 4px} select.viewas{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:9px;padding:7px 9px;font-size:12.5px;font-weight:600;max-width:150px} .sync{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);padding:6px 10px;border-radius:9px;border:1px solid var(--line);background:var(--panel);white-space:nowrap} .sync .live{width:7px;height:7px;border-radius:50%;background:var(--good)} .btn{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:7px 12px;font-weight:600;font-size:12.5px;display:inline-flex;align-items:center;gap:7px} .btn:hover{border-color:var(--faint)}.btn .ic{width:15px;height:15px;stroke:currentColor;stroke-width:1.9;fill:none} .btn.accent{background:var(--accent);color:#fff;border-color:transparent} /* Full available width — the surface fills the viewport beside the sidebar (see DESIGN-SYSTEM.md §Surface panes). Wide tables get the room; no artificial column of dead space on the right. */ .page{padding:20px 22px 70px;width:100%} .page-head{display:flex;align-items:flex-end;gap:14px;margin-bottom:18px;flex-wrap:wrap} .page-head h1{font-size:24px;letter-spacing:-.02em}.page-head .sub{color:var(--muted);font-size:13.5px;margin-top:3px} .surface{display:none}.surface.active{display:block;animation:fade .22s ease} @keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ---- HOME's four bands ------------------------------------------------------------------- The page is a stack of labelled sections rather than a grid of cards, because the labels are what stop it reading as a control panel: each band says what it is and who it is for before it shows a single number. Generous vertical rhythm for the same reason — the old page's problem was density, not content. */ .hband{margin:0 0 26px} .hband-h{display:flex;align-items:baseline;gap:10px;margin:0 0 11px} .hband-h h3{font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--ink)} .hband-s{font-size:11.5px;color:var(--faint);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hband-h .link{margin-left:auto;font-size:12px;color:var(--accent-ink);font-weight:600;flex:none} .hband .tiles{margin-bottom:0} /* "On you" — bigger type than the KPI tiles below it, because this band is the answer to the question the reader actually arrived with, and it should win the first glance. */ .hb-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:13px} .hb-fig{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left; background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px; box-shadow:var(--shadow);cursor:pointer;color:var(--ink);font-family:var(--font-ui)} .hb-fig:hover{border-color:var(--accent)} .hb-fig .n{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:30px;font-weight:700;line-height:1;letter-spacing:-.02em} .hb-fig .l{font-size:12.5px;font-weight:600;margin-top:5px} .hb-fig .h{font-size:11px;color:var(--faint)} /* A zero is still shown — "nothing is on you" is worth knowing — but it stops inviting a click. */ .hb-fig.zero{cursor:default;box-shadow:none;background:var(--panel-2)} .hb-fig.zero:hover{border-color:var(--line)} .hb-fig.zero .n{color:var(--faint)} .hb-warn{margin-left:auto;flex:none;font-size:11.5px;font-weight:700;color:var(--crit); background:var(--crit-soft);border:1px solid color-mix(in srgb,var(--crit) 25%,transparent); border-radius:999px;padding:4px 11px;cursor:pointer} .hb-warn:hover{border-color:var(--crit)} /* The practice calendar and the book, side by side. The calendar is the wider of the two: it is a bucket rail plus rows, where the book is four compact cards. */ .hsplit{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:start} .hsplit .dlc{margin-bottom:0} /* Pulse's charts, at half the page width — a 2x2 rather than the full-width row they had. */ .hbook{display:grid;grid-template-columns:repeat(2,1fr);gap:13px} .hbook .card{margin:0} @media (max-width:1080px){.hsplit{grid-template-columns:1fr}.hbook{grid-template-columns:repeat(2,1fr)}} @media (max-width:700px){.hbook{grid-template-columns:1fr}} .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:18px} .tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;box-shadow:var(--shadow)} .tile .lab{font-size:12px;color:var(--muted);font-weight:500} .tile .big{font-size:28px;font-weight:700;letter-spacing:-.02em;margin-top:7px;line-height:1} .tile .foot{font-size:11.5px;color:var(--faint);margin-top:6px} .tile.crit .big{color:var(--crit)}.tile.warm .big{color:var(--warm)}.tile.good .big{color:var(--good)} .split{display:grid;grid-template-columns:1fr 330px;gap:16px;align-items:start} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden} /* Me-scope indicator: subtle dashed border on cards/tiles in Me-scope-aware surfaces (Practice section only) */ #app.scope-is-me [data-me-scope] .card, #app.scope-is-me [data-me-scope] .tile{border:1px dashed color-mix(in srgb,var(--accent) 40%,var(--line))} .void-pending-row:hover td{background:var(--panel-2)} /* Warming-up state (a surface withholding figures until its data has landed). Reuses the rbspin keyframes the refresh buttons already use — one spin animation for the whole app. */ .warm-spin{width:26px;height:26px;border:2.5px solid var(--line-2);border-top-color:var(--accent);border-radius:50%;display:inline-block;animation:rbspin .85s linear infinite} .warm-pulse{animation:dtPulse 1.6s ease-in-out infinite} .card-h{display:flex;align-items:center;gap:10px;padding:13px 15px 10px} .card-h h3{font-size:14px}.card-h .count{font-family:var(--font-num);font-size:12px;color:var(--faint);background:var(--line-2);border-radius:20px;padding:1px 8px} .card-h .link{margin-left:auto;font-size:12.5px;color:var(--accent-ink);font-weight:600} .grp-lab{display:flex;align-items:center;gap:8px;padding:11px 15px 5px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} .grp-lab.over{color:var(--crit)}.grp-lab .n{font-family:var(--font-num);color:var(--faint)} /* A truncated work group says how much it is hiding and opens the rest (openHomeDrill) — the cockpit lists a readable head of each bucket, it never silently swallows the tail. */ .grp-lab .link{margin-left:auto;text-transform:none;letter-spacing:0;font-size:11.5px;color:var(--accent-ink);cursor:pointer} .grp-more{border-top:1px solid var(--line-2);padding:9px 15px;font-size:12px;color:var(--accent-ink);font-weight:600;cursor:pointer} .grp-more:hover{background:var(--panel-2)} .wrow{display:grid;grid-template-columns:4px 1fr auto;align-items:stretch;border-top:1px solid var(--line-2)} .wrow:hover{background:var(--panel-2);cursor:pointer} .wrow .stripe{border-radius:2px;margin:11px 0} .wrow .body{padding:10px 8px 10px 13px;min-width:0} /* No fixed character cap — the title uses the whole 1fr column and ellipsises only when it genuinely runs out of room (.wrow .body is min-width:0, so the grid track does the clamping). */ .wrow .title{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wrow .metaline{display:flex;align-items:center;gap:7px;margin-top:4px;flex-wrap:wrap} /* Inside a client's own drawer the title WRAPS instead of ellipsising. The drawer is narrow and the firm's job titles are long and front-loaded with the client name, so every row clipped at "Fineas Nedelea - Relevant Contracts T…" — the period, which is the only thing distinguishing one row from the next, was always the part cut off. Nothing else competes for the width there now (jobRow's inClient drops the duplicated client name and the owner avatars), so two lines of title costs nothing. Vertically centred against the taller row so the right-hand column still lines up. */ .wrow-full .title{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35} .wrow-full .right{align-items:center} .tag{font-size:10.5px;font-weight:600;color:var(--muted);background:var(--line-2);border-radius:6px;padding:1px 7px;white-space:nowrap} .tag.draft-pending{color:var(--accent-ink);background:var(--accent-soft)} .client{font-size:11.5px;color:var(--faint)} .wrow .right{padding:10px 15px;display:flex;align-items:center;gap:11px;justify-content:flex-end} .owners{display:flex}.owners .avatar{width:22px;height:22px;font-size:9px;border:2px solid var(--panel);margin-left:-6px}.owners .avatar:first-child{margin-left:0} .due{font-family:var(--font-num);font-size:11.5px;color:var(--muted);text-align:right;min-width:74px} .due.over{color:var(--crit);font-weight:600}.due small{display:block;color:var(--faint);font-weight:400;font-size:10px} .pill{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:20px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px} .pill .d{width:6px;height:6px;border-radius:50%;background:currentColor} .pill.good{color:var(--good);background:var(--good-soft)}.pill.info{color:var(--info);background:var(--info-soft)} .pill.warn{color:var(--warn);background:var(--warn-soft)}.pill.crit{color:var(--crit);background:var(--crit-soft)} .pill.bb{color:var(--bb);background:var(--bb-soft)}.pill.accent{color:var(--accent-ink);background:var(--accent-soft)} .rail{display:flex;flex-direction:column;gap:14px} .att{padding:10px 15px;border-top:1px solid var(--line-2);display:flex;gap:10px;align-items:flex-start} .att:hover{background:var(--panel-2)}.att .t{font-weight:600;font-size:12.5px}.att .s{font-size:11px;color:var(--faint);margin-top:2px} .att .when{margin-left:auto;font-family:var(--font-num);font-size:10px;color:var(--faint);white-space:nowrap} .presence{padding:6px}.pr{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:8px}.pr:hover{background:var(--panel-2)} .pr .live{width:7px;height:7px;border-radius:50%;flex:none}.pr .nm{font-size:12.5px}.pr .fo{margin-left:auto;font-size:11px;color:var(--faint)} /* What someone is clocked on to (presenceRows, js/engine.js). Accent so it reads as live activity rather than another line of metadata; the job name is allowed to ellipsis — the row is narrow and the person's name must never be squeezed for it. */ .pr .pr-clk{display:flex;align-items:center;gap:4px;margin-top:2px;font-size:10.5px;color:var(--accent-ink);min-width:0} .pr .pr-clk.paused{color:var(--bb)} .pr .pr-clk svg{width:11px;height:11px;flex:none;stroke:currentColor;stroke-width:2;fill:none} .pr .pr-clk span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .subtabs{display:inline-flex;gap:2px;background:var(--line-2);border-radius:10px;padding:3px} .subtabs button{border:0;background:transparent;color:var(--muted);font-weight:600;font-size:12.5px;padding:6px 13px;border-radius:7px} .subtabs button.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)} /* Triage's tab bar (js/mail.js renderMail) — several .subtabs pills side by side, ONE functional data-tabgroup on this wrapper (see the comment at the call site for why: the app's hash-routing walk only ever looks at the first [data-tabgroup] on a surface). Purely visual grouping — a gap wide enough to read as separate clusters (Emails/Triage/Insights vs. App Notifications vs. Follow-ups), not one long bar. Deliberately NO flex-wrap: inline-flex + wrap is a real Chromium sizing trap — the shrink-to-fit width collapses to just the WIDEST single child (verified live: three ~100-200px pills stacked vertically instead of sitting in a row, each starting flush left) because a wrap-enabled container's intrinsic width is computed as if only one item needs to fit per line. Three short pill groups never need to wrap in this header at any real window width. */ .mail-tabgroups{display:inline-flex;gap:14px} /* The email-related cluster (Emails/Triage/Email Insights) tinted apart from the plain-grey App Notifications / Follow-ups pills beside it — asked for directly once the three groups had a gap between them, so the one that's actually "the email area" reads as visually distinct, not just spaced apart. Accent tokens, same family the rest of the app already uses for "this is the active/primary thing" (nav .active, .btn.accent) — not a new one-off colour. */ .subtabs.mail-group{background:var(--accent-soft)} .subtabs.mail-group button{color:var(--accent-ink)} .subtabs.mail-group button.on{background:var(--panel);color:var(--accent-ink)} /* Full-page (client/job) tab bar: icon + label, matching the drawer rail. Scoped to .pg-iconbar so every other .subtabs control is unchanged. Icons follow the button colour (currentColor). */ .subtabs.pg-iconbar{flex-wrap:wrap} .subtabs.pg-iconbar button{display:inline-flex;align-items:center;gap:6px} .subtabs.pg-iconbar button svg{width:15px;height:15px;flex:none;display:block} .tabpane{display:none}.tabpane.on{display:block} .toolbar{display:flex;align-items:center;gap:9px;margin-bottom:14px;flex-wrap:wrap} /* display:inline-flex, NOT the inline it was for years — and this was a real rendering bug, not tidying. Vertical padding on an INLINE element does not contribute to the line box: a .chip is 30px tall while its line advances about 20px, so the moment a row of chips WRAPS, the second line cuts 10px into the first. Measured: -10px overlap before, +3.6px gap after. Single-line rows of chips never showed it, which is why it survived so long. inline-flex alone only gets the lines flush — borders touching, still ugly — because a line box then advances by exactly the chip's height. The 2px vertical margin is what supplies the gap (4px between wrapped lines). It adds 4px to a single row of chips too, which reads as slightly better spacing rather than as a regression. `align-items:center` also centres the one chip that has a child — dataTable's toggle filter, a checkbox plus a label — which previously sat on the text baseline. */ .chip{display:inline-flex;align-items:center;vertical-align:middle;margin:2px 0; border:1px solid var(--line);background:var(--panel);color:var(--muted);font-weight:600; font-size:12px;padding:6px 11px;border-radius:20px} .chip.on{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink)} select.f,input.f{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:9px;padding:7px 10px;font-size:12.5px;outline:none} input.f{min-width:200px} /* Client drawer → Jobs / Deadlines tab control bars. Sticky so they stay put while the (possibly long) list scrolls under. Full-bleed via negative margins that cancel .dwr-body's 16px/20px padding — otherwise a row scrolls into the padding gap ABOVE a top:0 sticky bar. */ /* top:-16px (not 0) intentionally: the sticky anchor is .dwr-body's content-box top, which sits 16px below the visual top because of .dwr-body's padding-top:16px. A -16px offset pulls the bar back up flush; the matching 16px padding-top keeps its controls clear of the clip edge. */ .cjobs-tb,.cdls-tb,.mail-docs-tb{position:sticky;top:-16px;z-index:3;display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:-16px -20px 8px;padding:16px 20px 12px;background:var(--panel);border-bottom:1px solid var(--line-2)} .cjobs-tb input.f,.cdls-tb input.f,.mail-docs-tb input.f{flex:1 1 180px;min-width:150px} .cjobs-tb select.f,.cdls-tb select.f,.mail-docs-tb select.f{padding:7px 9px;font-size:12px} .cjobs-tb label,.cdls-tb label,.mail-docs-tb label{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--muted)} .cjobs-tb .lnk,.cdls-tb .lnk{margin-left:auto;display:flex;gap:2px} .cjobs-tb .lnk button,.cdls-tb .lnk button{border:0;background:transparent;color:var(--accent-ink);font-weight:600;font-size:11.5px;cursor:pointer;padding:4px 6px;border-radius:6px} .cjobs-tb .lnk button:hover,.cdls-tb .lnk button:hover{background:var(--accent-soft)} /* The Deadlines tab carries BOTH Expand/Collapse and Regenerate; the first takes the auto margin, so the second needs its own gap rather than fighting it for the right-hand edge. */ .cdls-tb .lnk+#cdls-regen{margin-left:8px!important} /* Collapsible group headers in the grouped jobs list. */ /* The "Showing 15 of 150" row both client tabs put under their toolbar (cFilterNote, engine.js). Subtle on purpose: it is orientation, not a finding, and it sits between a toolbar and a list that are both busier than it is. */ .cfilter-note{padding:7px 15px;font-size:11.5px;color:var(--muted);border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:4px;flex-wrap:wrap} .cfilter-note b{color:var(--ink);font-family:var(--font-num)} .cfilter-lnk{background:none;border:0;padding:0;margin-left:4px;color:var(--accent-ink);cursor:pointer;font:inherit;text-decoration:underline} .cfilter-note .cfilter-lnk:last-child{margin-left:auto;text-decoration:none} .cfilter-note .cfilter-lnk:hover{text-decoration:underline} .cjobs-grp,.cdls-grp{cursor:pointer;user-select:none} .cjobs-grp .chev,.cdls-grp .chev{width:11px;height:11px;stroke:currentColor;stroke-width:2.4;fill:none;flex:none;transition:transform .15s;color:var(--faint)} .cjobs-grp.collapsed .chev,.cdls-grp.collapsed .chev{transform:rotate(-90deg)} /* A collapsible .dl-sec is still a section heading, but it now has a chevron to line up with. */ .dl-sec.cdls-grp{display:flex;align-items:center;gap:8px} .mini{display:flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:6px 10px;color:var(--faint)} .mini .ic{width:15px;height:15px;stroke:currentColor;stroke-width:1.9;fill:none}.mini input{border:0;background:transparent;color:var(--ink);outline:none;font-size:12.5px;min-width:180px} .pulse-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.pulse-grid.three{grid-template-columns:repeat(3,1fr)}.pulse-grid.four{grid-template-columns:repeat(4,1fr)}.pulse-grid.five{grid-template-columns:repeat(5,1fr)} .stat{padding:13px 15px}.stat .lab{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);font-weight:600} .stat .v{font-size:25px;font-weight:700;margin-top:5px;letter-spacing:-.02em}.stat .h{font-size:11.5px;color:var(--muted);margin-top:4px} .bars{padding:5px 15px 13px}.bar{display:flex;align-items:center;gap:9px;padding:6px 0;border-top:1px solid var(--line-2)}.bar:first-child{border-top:0} .bar .bl{font-size:12px;min-width:120px;display:flex;align-items:center;gap:7px;text-align:left} .bar .track{flex:1;height:7px;border-radius:4px;background:var(--line-2);overflow:hidden;display:block} /* display:block is load-bearing. .fill is a , so without it the element is INLINE and both width and height are ignored — which is why these bars have never drawn a fill, on Pulse or anywhere else. All anyone ever saw was the empty grey track. */ .bar .fill{display:block;height:100%;border-radius:4px;min-width:2px} /* A drillable row is a button: same layout, but it says so on hover and takes focus. */ .bar.clickable{border:0;background:none;font-family:var(--font-ui);color:var(--ink);cursor:pointer;border-radius:6px;padding:6px;margin:0 -6px;width:calc(100% + 12px)} .bar.clickable:hover{background:var(--panel-2)} .bar.clickable:hover .bv{color:var(--accent-ink)} .bar .bv{font-family:var(--font-num);font-size:12px;font-weight:600;min-width:38px;text-align:right} .swatch{width:9px;height:9px;border-radius:3px;flex:none} .tbl{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)} .tbl thead th{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:600;text-align:left;padding:10px 13px;border-bottom:1px solid var(--line);background:var(--panel-2);cursor:pointer;white-space:nowrap} .tbl td{padding:10px 13px;border-bottom:1px solid var(--line-2);font-size:12.5px;vertical-align:middle} .tbl tbody tr:last-child td{border-bottom:0}.tbl tbody tr:hover{background:var(--panel-2);cursor:pointer} .tbl .jn{font-weight:600}.tbl .cl{font-size:11px;color:var(--faint)}.tbl .fee{font-family:var(--font-num);font-weight:600;text-align:right} .table-wrap{overflow-x:auto}.pagi{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0;font-size:12px;color:var(--muted)} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:13px} .ccard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:14px;cursor:pointer} .ccard:hover{border-color:var(--accent)} .ccard .top{display:flex;align-items:center;gap:10px}.ccard .nm{font-weight:700;font-size:14px;line-height:1.2}.ccard .ty{font-size:11px;color:var(--faint);font-weight:600} .ccard .svcs{display:flex;gap:5px;flex-wrap:wrap;margin:11px 0 12px}.ccard .foot{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line-2);padding-top:10px} .hdot{width:8px;height:8px;border-radius:50%;flex:none} .cal{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden} .cal-h{display:flex;align-items:center;gap:12px;padding:12px 15px;border-bottom:1px solid var(--line)}.cal-h .mo{font-weight:700;font-size:15px} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr)} .cal-dow{font-size:10.5px;font-weight:600;color:var(--faint);text-transform:uppercase;padding:8px 11px;border-bottom:1px solid var(--line)} .cal-cell{min-height:96px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:6px 7px;cursor:pointer}.cal-cell:nth-child(7n){border-right:0} .cal-cell:hover{background:var(--panel-2)}.cal-cell.out{background:var(--panel-2);opacity:.5;cursor:default}.cal-cell.out:hover{background:var(--panel-2)} .cal-cell.dim{background:var(--panel-2)}.cal-cell.today{outline:2px solid var(--accent);outline-offset:-2px} .cal-cell .dn{font-family:var(--font-num);font-size:11.5px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:5px} .cal-cell .dn .td{font-family:var(--font-sans);font-size:9px;font-weight:700;color:var(--accent-ink);text-transform:uppercase;letter-spacing:.04em} .cal-cell .dn .cnt{margin-left:auto;font-size:9.5px;background:var(--line);color:var(--muted);border-radius:8px;padding:0 5px;font-weight:700} .ev{font-size:10px;font-weight:600;padding:2px 5px;border-radius:4px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer} .ev .xtag{font-size:8px;text-transform:uppercase;opacity:.8;font-weight:700} .ev.g{color:var(--good);background:var(--good-soft)}.ev.r{color:var(--crit);background:var(--crit-soft)}.ev.b{color:var(--info);background:var(--info-soft)}.ev.a{color:var(--warn);background:var(--warn-soft)} .more{font-size:10px;color:var(--faint);margin-top:2px} /* calendar chrome — month nav + view toggle */ .cal-nav{display:flex;align-items:center;gap:8px}.cal-nav .mo{font-weight:700;font-size:15px;min-width:130px;text-align:center} .cal-od{font-size:11px;font-weight:700;color:var(--crit);background:var(--crit-soft);border-radius:20px;padding:2px 9px;margin-left:6px} .calseg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden} .calseg button{border:0;background:var(--panel);color:var(--muted);font-size:12px;font-weight:600;padding:5px 13px;cursor:pointer} .calseg button.on{background:var(--ink);color:var(--panel)} .cal-empty{margin:12px;border-color:var(--warn);color:var(--ink)} /* Calendar → meetings & personal events (js/calendar-personal.js). A meeting is the person's own time, so it takes the one accent; a personal item is neutral with a dashed edge — "yours alone" — because a status colour has to mean a status and a dentist appointment is not one. Tasks read as to-dos, not as places to be. */ .cpl-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 15px;border-bottom:1px solid var(--line)}.cpl-bar .spacer{flex:1}.cpl-bar .btn,.cpl-tog{white-space:nowrap} .cpl-tog{border:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:12px;font-weight:600;padding:4px 11px;border-radius:999px;cursor:pointer} .cpl-tog.on{background:var(--accent-soft);color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 35%,transparent)} .cpl-note{padding:8px 15px;font-size:12px;color:var(--muted);background:var(--panel-2);border-bottom:1px solid var(--line)}.cpl-note .btn{margin-left:6px} .ev.m{color:var(--accent-ink);background:var(--accent-soft)} .ev.p,.ev.t{color:var(--ink);background:var(--bb-soft);border:1px dashed var(--line)} .ev.p.done,.ev.t.done{text-decoration:line-through;opacity:.6} .swatch.cpl-sw-m{background:var(--accent-soft);border:1px solid var(--accent)}.swatch.cpl-sw-p{background:var(--bb-soft);border:1px dashed var(--faint)}.swatch.cpl-sw-t{background:var(--panel);border:1px solid var(--faint)} .cpl-dayhead{display:flex;align-items:center;gap:8px;padding:9px 16px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);background:var(--panel-2);border-top:1px solid var(--line-2)}.cpl-dayhead:first-child{border-top:0} .cpl-dayhead .spacer{flex:1}.cpl-dayhead .btn{text-transform:none;letter-spacing:0} .cpl-dot{width:8px;height:8px;border-radius:50%;flex:none;margin-top:5px}.cpl-dot.m{background:var(--accent)}.cpl-dot.p{background:var(--bb-soft);border:1px dashed var(--faint)} .cpl-tick{margin-top:3px;flex:none;cursor:pointer}.cpl-row.done .nm{text-decoration:line-through;color:var(--muted)} /* Bank holidays / firm closures tint the day and name it; the person's own leave is green — "away" is a good state, not a warning. */ .cal-cell.cpl-off{background:var(--bb-soft)}.cal-cell.cpl-off:hover{background:var(--panel-2)} .cpl-bh{font-family:var(--font-sans);font-size:9.5px;font-weight:700;color:var(--muted);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .ev.h{color:var(--good);background:var(--good-soft)} .swatch.cpl-sw-h{background:var(--good-soft);border:1px solid var(--good)}.swatch.cpl-sw-b{background:var(--bb-soft);border:1px solid var(--faint)} .cpl-dot.h{background:var(--good)} /* Calendar → reviews & meet requests (js/calendar-reviews.js). OUTLINED, with a mark, where deadlines and Outlook meetings are filled: the shape says "a request between colleagues", the mark says which. Meet request = the accent (a meeting is the person's own time, as an Outlook one is) with a two-people mark; review = amber, the Reviews page's "To review" colour, with a tick-box mark; an overdue review turns red, the app's one overdue colour, and says "Overdue" in its text too. */ .ev.crq{background:var(--panel);border:1px solid;display:flex;align-items:center;gap:3px;padding:1px 5px} .ev.crq .crq-ic{width:10px;height:10px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .ev.crq.mq{color:var(--accent-ink);border-color:var(--accent)} .ev.crq.rq{color:var(--warn);border-color:var(--warn)} .ev.crq.rq.over{color:var(--crit);border-color:var(--crit);background:var(--crit-soft)} .ev.crq .xtag{margin-left:auto} .swatch.crq-sw-mq{background:var(--panel);border:1.5px solid var(--accent)}.swatch.crq-sw-rq{background:var(--panel);border:1.5px solid var(--warn)}.swatch.crq-sw-over{background:var(--crit-soft);border:1.5px solid var(--crit)} .crq-dot{width:18px;height:18px;border-radius:5px;border:1px solid;display:grid;place-items:center;flex:none;background:var(--panel)} .crq-dot .crq-ic{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .crq-dot.mq{color:var(--accent-ink);border-color:var(--accent)}.crq-dot.rq{color:var(--warn);border-color:var(--warn)}.crq-dot.rq.over{color:var(--crit);border-color:var(--crit);background:var(--crit-soft)} /* The date/time on a request row, drawer and form (js/reviews.js). */ .rv-when{font-family:var(--font-num);font-variant-numeric:tabular-nums}.rv-when.over{color:var(--crit);font-weight:600} .rv-when-f{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}.rv-when-f[hidden]{display:none}.rv-when-f label{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--muted)} .rv-when-warn{font-size:11.5px;color:var(--warn);margin-top:5px;min-height:0}.rv-when-warn:empty{display:none} .rv-teams{display:inline-flex;align-items:center;gap:4px}.rv-teams a{color:var(--accent-ink);font-weight:600} .cpl-bhbar{padding:9px 16px;font-size:12.5px;background:var(--bb-soft);color:var(--ink);border-bottom:1px solid var(--line-2)} .cpl-priv{color:var(--faint)}.cpl-empty{padding:14px 16px;color:var(--faint);font-size:12.5px} .cpl-form{display:flex;flex-direction:column;gap:11px}.cpl-form .cpl-kind{align-self:flex-start}.cpl-form .rs-f>.f[style*="width:100%"]{max-width:none}.cpl-grid{display:flex;gap:10px;flex-wrap:wrap}.cpl-grid .rs-f .f{min-width:0} .cpl-privnote{font-size:12px;color:var(--muted);background:var(--bb-soft);border-radius:8px;padding:8px 10px}.cpl-err{color:var(--crit);font-size:12px;min-height:16px} /* spans view — execution windows as laned bars per week */ .cal-spans{display:flex;flex-direction:column} .cal-dowrow{display:grid;grid-template-columns:repeat(7,1fr)} .sp-week{border-bottom:1px solid var(--line-2)}.sp-week:last-child{border-bottom:0} .sp-hdr{display:grid;grid-template-columns:repeat(7,1fr)} .sp-dn{font-family:var(--font-num);font-size:10.5px;color:var(--muted);padding:4px 8px;border-right:1px solid var(--line-2)}.sp-dn:nth-child(7n){border-right:0} .sp-dn.out{opacity:.4}.sp-dn.today{color:var(--accent-ink);font-weight:700} .sp-lanes{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:2px 0 7px;position:relative} .sp-bar{border-radius:5px;font-size:10px;font-weight:600;padding:2px 7px;overflow:hidden;display:flex;align-items:center;cursor:pointer;min-width:0} .sp-bar .sp-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sp-bar.info{background:var(--info-soft);color:var(--info)}.sp-bar.warn{background:var(--warn-soft);color:var(--warn)}.sp-bar.crit{background:var(--crit-soft);color:var(--crit)}.sp-bar.good{background:var(--good-soft);color:var(--good)} .sp-bar.temp{outline:1.5px solid currentColor;outline-offset:-1.5px} .sp-bar.breach{background:var(--crit);color:#fff;font-weight:700} .sp-bar.ghost{background:transparent;border:1px dashed var(--line);color:var(--faint);opacity:.75;cursor:default;font-style:italic} .sp-wall{align-self:stretch;border-left:2px dashed var(--crit);justify-self:end;width:0;pointer-events:none} /* reschedule dialog */ .rs-job .nm{font-weight:700;font-size:14px}.rs-job .rs-meta{font-size:11.5px;color:var(--muted);margin-top:3px} .rs-quick{display:flex;gap:7px;flex-wrap:wrap} .rs-f{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--muted)}.rs-f .f{max-width:200px} .rs-preview{font-size:12.5px;color:var(--ink)} .rs-ok{font-size:12px;color:var(--good);background:var(--good-soft);border-radius:8px;padding:8px 11px} .rs-breach{font-size:12px;color:var(--crit);background:var(--crit-soft);border:1px solid var(--crit);border-radius:8px;padding:9px 11px;line-height:1.45} .sp-none{grid-column:1 / 8;font-size:10px;color:var(--faint);padding:0 8px} .swatch.wall{width:0;height:12px;border-left:2px dashed var(--crit);background:none} .legend{display:flex;gap:15px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--muted)}.legend span{display:flex;align-items:center;gap:6px} .dl-sec{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);padding:11px 15px 4px}.dl-sec.over{color:var(--crit)} .dl{display:flex;align-items:center;gap:11px;padding:10px 15px;border-top:1px solid var(--line-2)}.dl:hover{background:var(--panel-2);cursor:pointer} .dl .dt{font-family:var(--font-num);font-size:11.5px;color:var(--muted);min-width:64px}.dl .nm{font-weight:600;font-size:13px}.dl .clx{font-size:11px;color:var(--faint)} .dl .due{font-family:var(--font-num);font-size:11px;color:var(--muted)}.dl .due.over{color:var(--crit);font-weight:700} /* Calendar → Deadlines (js/calendar-deadlines.js): explicit scope bar, bucket tabs, capped block */ .cdl-scope{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden} .cdl-scope button{border:0;background:var(--panel);color:var(--muted);font-size:12px;font-weight:600;padding:5px 12px;cursor:pointer} .cdl-scope button b{font-family:var(--font-num);font-variant-numeric:tabular-nums;margin-left:4px} .cdl-scope button.on{background:var(--ink);color:var(--panel)} .cdl-scope button:disabled{opacity:.45;cursor:default} .cdl-say{padding:10px 15px 0;font-size:11.5px;color:var(--muted);line-height:1.5} /* Calendar -> ROS. dataTable brings no outer padding of its own (.dt-scroll is a self-contained panel with its own border), so a table dropped straight into a .card runs to the card edge — which is exactly how the ROS tabs first shipped. The sides match .cdl-say/.cdl-tabs above so the prose, the tabs and the table share one left edge. */ .ros-tablewrap{padding:4px 15px 15px} .ros-empty{padding:14px 15px 18px} /* Tax-head chips in a table cell. The display fix that stops wrapped rows overlapping is on `.chip` itself now (see above); what is left here is the flex parent that supplies the row gap, and a tighter size — five of these sit in one cell, where the standalone padding is too much. */ /* Row gap 0: `.chip` carries its own 2px vertical margin now, and setting both here doubled the spacing to 8.5px between wrapped lines. One source of truth for it. */ .ros-heads{display:flex;flex-wrap:wrap;gap:0 5px;align-items:center;min-width:0} /* The coverage report — what Revenue says we act on, against what Insight is set up to do. */ .ros-cov{display:flex;flex-direction:column;gap:8px} .ros-cov-row{border:1px solid var(--line);border-radius:8px;padding:9px 11px;background:var(--panel-2)} .ros-cov-h{display:flex;align-items:center;gap:8px;font-size:13px} .ros-cov-need{margin-top:6px;padding-left:10px;border-left:2px solid var(--line)} .ros-cov-name{display:block;font-size:12.5px;font-weight:600} .ros-cov-why{display:block;font-size:11px;color:var(--muted);line-height:1.45;margin-top:2px} .ros-cov-off{margin-top:7px;font-size:11px;color:var(--faint)} .ros-cov-note{margin-top:10px;font-size:11.5px;color:var(--muted);line-height:1.5; border-top:1px solid var(--line-2);padding-top:9px} /* De-linking and deregistering. */ /* The surface header: counts, an explanation behind an icon, and the action at the end. One row instead of the six lines of prose it replaced — the reasoning all still exists, in rosRegsInfo/rosInboxInfo; it just stopped charging rent above the table. */ .ros-hdr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:10px} .ros-hdr-counts{font-size:12.5px;color:var(--muted)} .ros-hdr-counts b{color:var(--ink)} .ros-hdr-gap{flex:1 1 auto} .ros-hdr-info{flex-shrink:0} .ros-info-legend{margin-top:10px} .ros-info-list{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:5px; font-size:12.5px;line-height:1.5} .ros-standing-strip{padding:9px 15px 0} /* ---- the client and job REVENUE tabs (js/client-revenue.js) -------------------------------- The measurement, lifted off the Record tab so the matters there are visible again. The whole layout is built to answer "how is this client's filing running" before anybody scrolls. */ .crv-sec{padding:14px 15px 4px;border-top:1px solid var(--line-2)} .crv-sec:first-child{border-top:0} .crv-sec h4{margin:0 0 4px;font-size:13px;display:flex;align-items:center;gap:8px} .crv-n{font-size:11px;color:var(--muted);font-weight:400} /* The headline figures. Same shape as the .cov cards elsewhere, deliberately: a reader who has seen Coverage or Grading already knows how to read a row of these. */ .crv-head{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px} .crv-stat{flex:1 1 120px;min-width:120px;border:1px solid var(--line);border-radius:10px; padding:9px 11px;background:var(--panel-2)} .crv-stat-n{font-size:16px;font-weight:650;line-height:1.25} .crv-stat-l{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.4} .crv-stat.good .crv-stat-n{color:var(--good)} .crv-stat.warn .crv-stat-n{color:var(--warn)} .crv-stat.crit .crv-stat-n{color:var(--crit)} /* One service. A LEFT STRIPE rather than a fill for the late ones: these rows carry a lot of text and a tinted block behind all of it reads as an error state for the service as a whole, which over-states what one late period means. */ .crv-svcs{display:flex;flex-direction:column;gap:8px;margin-bottom:12px} .crv-svc,.crv-jobper{border:1px solid var(--line);border-left:3px solid var(--line); border-radius:9px;padding:9px 11px;background:var(--panel)} .crv-svc.late,.crv-jobper.late{border-left-color:var(--crit)} .crv-jobper.early{border-left-color:var(--good)} .crv-svc-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px} .crv-svc-n{font-size:11px;color:var(--muted);margin-left:auto} .crv-svc-b{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5} .crv-svc-b b{color:var(--ink)} /* A one-off service lists its periods instead of averaging them -- see fpByService. */ .crv-svc-list{margin-top:8px;border-top:1px dashed var(--line-2);padding-top:6px; display:flex;flex-direction:column;gap:5px} .crv-per{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px} .crv-per-l{font-weight:600} .crv-per-d{color:var(--muted);font-size:11px} .crv-job{cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px;font-size:11px} /* The job tab's one period, laid out as facts rather than prose. */ .crv-grid{display:flex;flex-direction:column;gap:4px;margin-top:8px} .crv-kv{display:flex;gap:10px;font-size:12px;align-items:baseline} .crv-kv-k{width:74px;flex:0 0 74px;color:var(--muted)} .crv-kv-v{min-width:0} /* The explanation, or the fact that one is owed. Never silence on a late filing. */ /* Obligation by obligation, under the period line. Indented and quiet: it is a breakdown of the statement above it, not a second statement. */ .crv-obs{margin:6px 0 0 10px;padding-left:9px;border-left:2px solid var(--line-2); display:flex;flex-direction:column;gap:4px} .crv-ob{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11.5px} .crv-ob-n{font-weight:600;min-width:132px} .crv-ob-d{color:var(--muted)} .crv-late-note{margin-top:9px;padding:8px 10px;border-radius:8px;background:var(--panel-2); border:1px solid var(--line);font-size:12px;line-height:1.5} .crv-late-note div{color:var(--muted);margin-top:3px} .crv-late-ask{margin-top:9px;padding:8px 10px;border-radius:8px;background:var(--crit-soft); border:1px solid var(--crit);color:var(--crit);font-size:12px;display:flex;align-items:center; gap:10px;flex-wrap:wrap} .crv-late-ask .btn{margin-left:auto} /* What Revenue actually sent, per client or per job. */ .crv-docs{display:flex;flex-direction:column;gap:0;margin:8px 0 12px} .crv-doc{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12px; padding:6px 0;border-top:1px solid var(--line-2)} .crv-doc-d{width:86px;flex:0 0 86px;color:var(--muted);font-size:11px} .crv-doc-t{min-width:0;flex:1 1 auto} .crv-doc-nojob{color:var(--faint);font-size:11px} .ros-sync-row{margin-top:7px} .ros-sync-line{font-size:11px;color:var(--faint);line-height:1.5} .ros-sync-line .bad,.ros-sync-line.bad{color:var(--crit)} .ros-standing-chip{display:inline-flex;align-items:center;gap:5px;margin-right:4px} .ros-standing-chip b{font-family:var(--font-num);font-variant-numeric:tabular-nums;color:var(--muted)} /* A head under a deregistration instruction: struck through on the row, never hidden — the instruction is a standing one and has to be legible from the table. */ /* THE THREE COVERAGE STATES on a tax head. Colour carries the meaning, so each one also gets a tooltip and the legend above the table spells them out — colour alone is not an interface. `unchecked` is deliberately absent: it keeps the plain chip, because a head Insight has no service for is not a gap and must not look like one. */ .ros-heads .chip.cov-ok{color:var(--good);border-color:var(--good-soft);background:var(--good-soft)} .ros-heads .chip.cov-gap{color:var(--warn);border-color:var(--warn);background:var(--warn-soft);font-weight:700} /* CEASED — a service that exists and has stopped. Its own colour, not the gap yellow: both need an answer but they are different questions, and one buried in the other is how this one spent months looking green. Struck through because the cover is over rather than absent. */ /* The ceased-head count on the registrations header — the same red as the pills it counts, so the number and the thing it points at are obviously the same subject. */ .ros-hdr-ceased{color:var(--crit)} .ros-heads .chip.cov-ceased{color:var(--crit);border-color:var(--crit);background:var(--crit-soft); font-weight:700;text-decoration:line-through;text-decoration-thickness:1px} .ros-heads .chip.cov-waived{color:var(--info);border-color:var(--info-soft);background:var(--info-soft)} /* Only the two actionable states invite a click, and they say so. */ .ros-heads .chip.clickable{cursor:pointer} /* The mirror finding, under a rule: services we run that Revenue has no registration for. Filled the same yellow as a gap above, because it is the same order of problem -- with no registration there is no route to file or pay the head at all (see rosExtraHeadPills). The DASHED border is what tells the two apart at a glance without ranking one below the other, and the separator does the rest. */ .ros-heads-sep{flex:0 0 100%;height:0;margin:3px 0;border-top:1px dashed var(--line)} .ros-heads .chip.ros-head-extra{color:var(--warn);border-color:var(--warn); border-style:dashed;background:var(--warn-soft)} .ros-heads .chip.clickable:hover{filter:brightness(0.94)} /* A head WE are stepping back from, as distinct from one Revenue is ending. Dereg strikes the head through, because the obligation itself goes; a de-link does not -- the tax still exists and still has to be filed, just not by us. So this one is dashed and dimmed rather than struck: the head is still real, we are simply no longer on it. */ .ros-heads .chip.hdelink-proposed{border-style:dashed;border-color:var(--info);color:var(--info)} .ros-heads .chip.hdelink-done{border-style:dashed;border-color:var(--bb);color:var(--bb); background:var(--bb-soft);opacity:.85} .ros-heads .chip.dereg-proposed{color:var(--warn);border-color:var(--warn); text-decoration:line-through;text-decoration-thickness:1px} .ros-heads .chip.dereg-done{color:var(--faint);text-decoration:line-through; text-decoration-thickness:1px;opacity:.75} /* ---- A HEAD THAT IS BOTH: covered, AND on its way out --------------------------------------- Asked for exactly this way: "half green, half yellow or orange ... maybe half and half sort of a coloring where each part is unique and distinct, and a tooltip which explains what is happening." The left half is the COVERAGE answer, the right half is the EXIT instruction, and they are genuinely two independent facts about one head (js/ros-coverage.js rosHeadPillParts). Built from two custom properties rather than one rule per combination: four coverage states times four exit states is sixteen rules to keep in step, and the fifteenth is the one that would be wrong. Each class sets its own tint; the split rule is written once. SOFT TINTS ON BOTH SIDES, with the text in --ink. Two saturated halves under one line of text is unreadable on whichever half the descender happens to fall. The existing dereg/hdelink rules still apply on TOP of this and are what tell the two exits apart in a way colour alone cannot: a deregistration strikes the head through because the obligation itself ends, a de-link only dashes the border because the tax still has to be filed, just not by us. */ .ros-heads .chip.cov-ok{--cov-tint:var(--good-soft)} .ros-heads .chip.cov-ceased{--cov-tint:var(--crit-soft)} .ros-heads .chip.cov-gap{--cov-tint:var(--warn-soft)} .ros-heads .chip.cov-waived{--cov-tint:var(--info-soft)} .ros-heads .chip.exit-delink-proposed,.ros-heads .chip.exit-delink-done{ --exit-tint:var(--info-soft);--exit-line:var(--info)} .ros-heads .chip.exit-dereg-proposed,.ros-heads .chip.exit-dereg-done{ --exit-tint:var(--warn-soft);--exit-line:var(--warn)} /* A finished instruction is the same two facts, quieter: it is history rather than a decision waiting on somebody. */ .ros-heads .chip.exit-delink-done,.ros-heads .chip.exit-dereg-done{opacity:.8} .ros-heads .chip.head-split{ background:linear-gradient(90deg,var(--cov-tint) 0 50%,var(--exit-tint) 50% 100%); border-color:var(--exit-line);color:var(--ink);font-weight:700} /* The seam, so the two halves read as two halves rather than as a gradient. */ .ros-heads .chip.head-split{position:relative} .ros-heads .chip.head-split::before{content:"";position:absolute;left:50%;top:0;bottom:0; width:1px;background:var(--exit-line);opacity:.45} /* A head carrying the CLIENTS decision rather than one of its own (rosHeadInstruction, inherited:true). Dotted rather than dashed, so at a glance it reads as the same kind of thing one step removed — and the tooltip says whose decision it is. */ .ros-heads .chip.exit-inherited{border-style:dotted} .ros-st-body{display:flex;flex-direction:column;gap:12px} .ros-st-sec{border:1px solid var(--line);border-radius:9px;padding:11px 12px} .ros-st-h{font-weight:650;font-size:13px} .ros-st-hint{font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:3px} .ros-st-note{font-size:11.5px;color:var(--muted);line-height:1.5;border:1px solid var(--line); border-left:3px solid var(--bb);border-radius:7px;padding:8px 10px;background:var(--panel-2)} .ros-st-note.bad{border-left-color:var(--crit)} .ros-st-note.good{border-left-color:var(--good)} .ros-st-state{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:12.5px} .ros-st-trail{font-size:11px;color:var(--faint);line-height:1.45;margin-top:5px} .ros-st-act{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .ros-st-heads{display:flex;flex-direction:column;gap:2px;margin:9px 0 4px} .ros-st-head{display:flex;align-items:center;gap:7px;font-size:12.5px;padding:4px 2px;cursor:pointer} .ros-st-head-n{font-weight:600} .ros-st-head.done .ros-st-head-n,.ros-st-head.proposed .ros-st-head-n{text-decoration:line-through} .ros-st-head-w{margin-left:auto;font-size:10.5px;color:var(--faint)} .ros-heads .chip{padding:2px 8px;font-size:11px;line-height:1.5;white-space:nowrap} /* ---- filing a Revenue document away ------------------------------------------------------- The dialog is wider than a normal appModal because its middle is a table: one line per client, tax head and period, since a single Revenue letter can be about several of each. */ .ros-fa-body{display:flex;flex-direction:column;gap:11px} .ros-fa-doc{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--panel-2)} .ros-fa-doc-t{font-weight:650;font-size:13.5px} .ros-fa-doc-m{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:5px;font-size:11.5px;color:var(--muted)} .ros-fa-why{font-size:11.5px;color:var(--muted);line-height:1.5} .ros-fa-hint{font-size:11px;color:var(--faint);line-height:1.45} .ros-fa-none{font-size:12px;color:var(--faint);padding:12px;border:1px dashed var(--line);border-radius:8px;line-height:1.5} /* The table scrolls sideways inside its own box rather than widening the dialog: a client name column that pushes the Remove button off the edge is how a row becomes unremovable. */ /* NO OVERFLOW HERE. It used to be `overflow-x:auto` to stop a long client name pushing the Remove button off the edge — but CSS forces the other axis to `auto` the moment one axis is not `visible`, so the box clipped VERTICALLY too and ate the job dropdown. Measured: the wrapper ended at 516px while the open list reached 681px. The columns are narrow enough not to need it in an 880px dialog, and a clipped picker is a far worse failure than a cramped column. */ .ros-fa-tw{border:1px solid var(--line);border-radius:8px} .ros-fa-t{width:100%;border-collapse:collapse;font-size:12px} .ros-fa-t th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:var(--faint);padding:7px 9px;border-bottom:1px solid var(--line);white-space:nowrap} .ros-fa-t td{padding:6px 9px;border-bottom:1px solid var(--line-2);vertical-align:middle} .ros-fa-t tr:last-child td{border-bottom:0} .ros-fa-t td:first-child{min-width:200px} .ros-fa-t td:last-child{width:1%;text-align:right} .ros-fa-t .f{width:100%;min-width:110px} .ros-fa-t .ss-wrap{min-width:190px} /* The notice issue date (js/ros-file-away.js). Narrow and tabular: it is the one control in this table with a fixed width, and the four-working-day clock runs from what it says. */ .ros-fa-t .ros-fa-date{min-width:140px;width:140px;font-family:var(--font-num);font-variant-numeric:tabular-nums} .cdl-tabs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 15px 2px} /* The service chips, directly under the bucket tabs — same control as the Future year picker (.cdl-years), because they are the same kind of question. Twenty of them wrap, so they get their own band rather than a place inside the tab row. */ .cdl-svcs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:9px 15px 2px} .cdl-svcs .lab{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)} .cdl-svcs button{border:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;cursor:pointer} .cdl-svcs button b{font-family:var(--font-num);font-variant-numeric:tabular-nums;margin-left:3px;color:var(--faint)} .cdl-svcs button.on{background:var(--ink);color:var(--panel);border-color:var(--ink)} .cdl-svcs button.on b{color:var(--panel)} /* Nothing in the alert window for it — still offered (it may have rows on Future), just quieter. */ .cdl-svcs button.empty{opacity:.55} .cdl-svcs button.empty.on{opacity:1} .cdl-svchint{flex:1 1 240px;min-width:180px;font-size:11px;color:var(--faint)} /* All tab — the running total under its two controls, and the quieter look of a closed row. */ .cdl-allsum{padding:9px 15px 0;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums} .cdl-years button:disabled{opacity:1;cursor:default} .dl .due.done{color:var(--good);font-weight:600} .cdl-tabs .subtabs button b{font-family:var(--font-num);font-variant-numeric:tabular-nums;margin-left:4px} .cdl-sech{font-weight:600;letter-spacing:0;text-transform:none;color:var(--faint)} .cdl-more{display:flex;align-items:center;gap:9px;padding:10px 15px;font-size:11.5px;color:var(--muted);border-top:1px solid var(--line-2)} .cdl-none{padding:16px 15px;font-size:12.5px;color:var(--faint)} /* The Calendar's head control: the scope strip over the two tabs. One column so the strip reads as governing everything under it, right-aligned to sit under the page title's own right edge. */ .cal-head-ctl{display:flex;flex-direction:column;align-items:flex-end;gap:8px} /* WHO IS WATCHING THIS SURFACE — the designation strip (js/designations.js, surfaceDesignationStrip). Sits above the scope bar because it is a statement about the surface, not a control on it: it never changes what you see, so it must not look like the buttons underneath. Hence a label plus initials, no button affordance, and the quieter ground. */ .desig-strip{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--faint)} .desig-strip + .desig-strip{margin-left:12px} .desig-lab{text-transform:uppercase;letter-spacing:.04em;font-weight:600} .desig-chip{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px; padding:0 4px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line-2); color:var(--ink);font-size:10.5px;font-weight:700;letter-spacing:.02em} .cdl-scope{flex-wrap:wrap} /* Two halves, shaded apart: what is yours reads on the panel, the firm's on the quieter ground — the same pairing Home's matrix uses for its bands, so the grouping means one thing app-wide. */ .cdl-scope button.yours{font-weight:700;background:var(--panel);color:var(--ink)} .cdl-scope button.firm{background:var(--panel-2);color:var(--muted)} .cdl-scope button.edge{border-left:2px solid var(--line)} .cdl-scope button.on,.cdl-scope button.firm.on{background:var(--ink);color:var(--panel)} /* Future tab: the year multi-select. Chips rather than a