/* MediHarbor Ops — the app shell. Loads AFTER ops.css and only does shell things: sidebar tree, topbar, workspace, home. Every colour, radius and type size comes from ops.css tokens; nothing here invents its own. WHAT WAS REMOVED, so it does not creep back in: · an animated two-stop radial gradient on — decoration, and it drifted under a table · backdrop-filter on the topbar, cards and sidebar — frosted glass over dense data costs contrast and buys nothing · box-shadow on every card — shadow now means "floats above the page", and a card does not · an 18px radius on everything from a pill to a panel · emoji as navigation icons The sidebar is 216px (was 236) and the whole layout sits on a 4px baseline. */ .app{display:flex;min-height:100vh;position:relative;z-index:1} /* ═══ sidebar ═══════════════════════════════════════════════════════════════════════ */ .side{ width:240px; flex:none; background:var(--nav-bg); color:var(--nav-item); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; overflow-x:hidden; } /* Camo, not a grid. The blueprint rule was legible as graph paper and read like a wireframe; this is the same asset the rail carried before the restyle, dialled down and desaturated so it gives the surface material rather than pattern. soft-light keeps it inside the ink instead of sitting on top as texture. */ .side::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:url(camo-blue.svg); background-size:300px 300px; opacity:.30; mix-blend-mode:soft-light; } /* A solid rail: one continuous surface, edged rather than ruled. */ .side{box-shadow:inset -1px 0 0 oklch(100% 0 0 / .07)} .side>*{position:relative;z-index:1} .side .brand{ display:flex;align-items:center;gap:9px; padding:16px 20px 14px; border-bottom:1px solid oklch(100% 0 0 / .09); } .side .brand svg{flex:none;color:#fff} .side .brand img{display:none} /* the wordmark is drawn, not a raster logo */ .side .brand svg{color:var(--nav-active)} .side .brand .bt{font-weight:600;font-size:13px;color:var(--nav-active);letter-spacing:-.01em;line-height:1.2} .side .brand .bs{font-size:11px;color:var(--nav-section);letter-spacing:.05em;text-transform:uppercase;line-height:1.4} .side .navlabel{ font-size:11px;text-transform:uppercase;letter-spacing:.06em; color:var(--nav-section);padding:16px 20px 6px;font-weight:600; } .side nav{padding:0;display:flex;flex-direction:column} /* One vertical axis: every nav row, the brand and the footer share the same 20px gutter as the workspace beside them. The active marker is a 2px rule inside that gutter, not an inset pill, so nothing shifts horizontally when a row becomes active. */ .side a{ display:flex;align-items:center;gap:9px; padding:5px 20px; min-height:30px; color:var(--nav-item); text-decoration:none; font-size:13px; font-weight:400; line-height:20px; transition:background-color .1s,color .1s; } /* 16px line icons, 1.5px, currentColor — so they ride the lightness ladder automatically instead of needing their own colour rules. A rail with no icons is markedly slower to scan; the previous pass removed the emoji and put nothing back, which was half a job. */ .side a svg{flex:none;width:16px;height:16px;opacity:.85;margin-top:1px;align-self:flex-start} /* NO TRUNCATION. Measured 2026-08-13: 17 of 70 labels were clipped at 216px, worst "Transmission Dashboard" needing 236px once its 44px indent is counted. A nav label that reads "Transmission Dashbo…" costs more than the pixels it saves. The rail is wider, the deep indent is tighter, and anything still too long wraps instead of being cut. */ .side a .lbl{flex:1;min-width:0;white-space:normal;overflow-wrap:break-word;hyphens:none} .side a:hover{background:oklch(100% 0 0 / .04);color:var(--nav-item-hover)} .side a:hover svg{opacity:1} /* inset shadow, NOT border-left: a border changes the box and shifts the label 2px on state change, which reads as a twitch every time you navigate. */ .side a.on{background:var(--nav-active-bg);color:var(--nav-active);font-weight:500;box-shadow:inset 2px 0 0 var(--accent)} .side a.on svg{opacity:1} .side .ext{color:var(--nav-section);font-size:12px} .side .spacer{flex:1} .side .foot{ padding:12px 20px;font-size:11px;line-height:1.55; color:var(--nav-section); border-top:1px solid oklch(100% 0 0 / .09); } /* ── collapsible tree ─────────────────────────────────────────────────────────────── Structure is unchanged (the router and MHNav both depend on .navgroup/.navtoggle/.navkids and on grid-template-rows for the open animation) — only the skin moved onto the tokens. */ .side .navtoggle{ display:flex;align-items:center;gap:8px;width:100%; padding:7px 20px;border:0;background:transparent; color:var(--nav-section); font:inherit;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; text-align:left;cursor:pointer; border-left:2px solid transparent; transition:background .1s,color .1s; } .side .navtoggle:hover{background:oklch(100% 0 0 / .04);color:var(--nav-item-hover)} .side .navtoggle:focus-visible{outline:2px solid var(--accent-hi);outline-offset:-2px} .side .navtoggle .ic{display:none} .side .navtoggle .gt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .side .navtoggle .cnt{ flex:none;font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:11px;font-weight:400;color:var(--nav-section);letter-spacing:0; } /* A count is a size by default. It only earns colour when it represents work waiting. */ .side .navtoggle .cnt.due{ color:var(--nav-active);background:var(--nav-active-bg); padding:0 5px;border-radius:var(--r-badge); } .side .navtoggle .chev{flex:none;font-size:9px;opacity:.4;transition:transform .16s ease} .side .navgroup.open>.navtoggle .chev{transform:rotate(90deg)} .side .navgroup.trail>.navtoggle{color:var(--nav-item-hover)} .side .navgroup.trail>.navtoggle .cnt{color:var(--nav-item)} .side .navkids{display:grid;grid-template-rows:0fr;transition:grid-template-rows .16s ease} .side .navgroup.open>.navkids{grid-template-rows:1fr} .side .navkids>*{overflow:hidden;min-height:0;padding-top:0;padding-bottom:0;transition:padding .16s ease} .side .navgroup.open>.navkids>*{padding-top:2px;padding-bottom:6px} /* Children indent by text, not by a moved gutter — the left rule stays on one axis. */ .side .navkids nav a{padding-left:28px} .side .navgroup.sub>.navtoggle{padding-left:28px;font-size:11px;color:rgba(255,255,255,.42)} .side .navgroup.sub>.navtoggle:hover{color:#fff} .side .navgroup.sub .navkids nav a{padding-left:38px} @media (prefers-reduced-motion:reduce){ .side .navkids,.side .navtoggle .chev{transition:none} } /* ═══ workspace ═════════════════════════════════════════════════════════════════════ */ .appmain{flex:1;min-width:0;display:flex;flex-direction:column} .apptop{ position:sticky;top:0;z-index:20; background:var(--paper);color:var(--ink-1,var(--ink)); border-bottom:1px solid var(--line); display:flex;align-items:center;gap:12px; padding:0 20px; height:52px;flex:0 0 52px; } .apptop .menu{display:none;background:none;border:0;font-size:18px;color:var(--ink-2);cursor:pointer;padding:4px} .apptop h1{font-size:15px;margin:0;font-weight:600;letter-spacing:-.01em} .apptop .sub{font-size:11px;color:var(--ink-3)} .apptop .right{margin-left:auto;display:flex;align-items:center;gap:12px} .apptop .clock{ text-align:right;font-size:11px;color:var(--ink-3);line-height:1.3; font-family:var(--mono);font-variant-numeric:tabular-nums; } .apptop .clock b{display:block;font-size:12px;font-weight:500;color:var(--ink-2)} .apptop .who{ width:26px;height:26px;border-radius:var(--r-control); background:var(--accent-12);color:var(--accent); display:flex;align-items:center;justify-content:center; font-weight:600;font-size:11px;letter-spacing:.02em; } .appbody{padding:20px 20px 64px;max-width:1180px;width:100%} .app-body .appbody{padding-bottom:72px} /* ═══ home ══════════════════════════════════════════════════════════════════════════ */ /* The stat row has a subject. One figure carries the 28px mono treatment because it is the number somebody opened this page to check; the others are a compact strip. Six equal boxes is the shape that says nobody decided. */ .kpis{ display:flex;align-items:flex-start;gap:32px;flex-wrap:wrap; padding:4px 0 20px;margin-bottom:20px; border-bottom:1px solid var(--line); } .kpi{padding:0;background:none;border:0;box-shadow:none;border-radius:0} .kpi .ic{display:none} .kpi .v{ font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:15px;font-weight:600;color:var(--ink-1);line-height:1.3;letter-spacing:-.01em; } .kpi .l{font-size:11px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;margin-top:1px} .kpi .n{font-size:11px;color:var(--ink-4);margin-top:1px} .kpi.hero{margin-right:4px} .kpi.hero .v{font-size:28px;line-height:1.12;letter-spacing:-.02em} .kpi.hero .n{font-size:12px;color:var(--ink-3)} .kpi.alert .v{color:var(--bad)} .card2{ background:var(--panel);color:var(--ink-1,var(--ink)); border:1px solid var(--line); border-radius:var(--r-control); padding:16px; margin-bottom:16px; box-shadow:none; } .card2 h2,.sec-h{font-size:15px;font-weight:600;color:var(--ink-1);margin:0 0 12px;letter-spacing:-.008em} .launch{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:1px;background:var(--line);color:var(--ink-1,var(--ink));border:1px solid var(--line);border-radius:var(--r-control);overflow:hidden} .launch a{ display:block;background:var(--panel);padding:14px 16px; text-decoration:none;color:var(--ink-1); transition:background .1s; } .launch a:hover{background:var(--tint);color:var(--ink-1,var(--ink));text-decoration:none} .launch .t{font-weight:600;font-size:13px;display:flex;align-items:center;gap:8px;letter-spacing:-.005em} .launch .d{font-size:12px;color:var(--ink-3);margin-top:4px;line-height:1.5} /* .btn and .pill live in ops.css; these keep the old class names working on this page. */ .pill{font-size:11px;font-weight:600;padding:1px 6px;border-radius:var(--r-badge);border:1px solid transparent} .pill.g{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)} .pill.a{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)} .pill.r{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)} .appfoot{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px; margin-top:24px;padding-top:14px;border-top:1px solid var(--line); font-size:11px;color:var(--ink-4); } .appfoot .fl{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .appfoot a{color:var(--ink-3);text-decoration:none} .appfoot a:hover{color:var(--accent)} .appfoot .sep{color:var(--line-strong)} .appfoot .stamp{font-family:var(--mono);font-variant-numeric:tabular-nums} @media(max-width:900px){ .side{position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);transition:transform .18s;box-shadow:var(--lift)} body.navopen .side{transform:none} body.navopen::after{content:"";position:fixed;inset:0;background:rgba(15,27,45,.4);z-index:55} .apptop .menu{display:block} .appbody{padding:16px} .kpis{gap:20px} } /* ═══ PINNED MODULES + QUICK COLLAPSE ══════════════════════════════════════════════ A 70-item tree is only navigable if you can flatten it in one gesture or skip it entirely. Five is the cap on purpose: a pin rail that holds everything is just the nav again. */ .pinbar{border-bottom:1px solid oklch(100% 0 0 / .09);padding:8px 0 10px} .pinbar[hidden]{display:none} .pinhd{ font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--nav-section);padding:6px 20px 4px; } .pinbar nav a.pinned{padding-left:20px} /* Says why the click did nothing, instead of the click doing nothing. */ .pinbar.full .pinhd::after{ content:" — five is the limit"; color:var(--warn);letter-spacing:0;text-transform:none;font-weight:400; } .navctl{display:flex;gap:6px;padding:8px 20px 4px} .navctl:has(.denswitch){padding-bottom:2px} .navctl button{ flex:1; background:transparent;border:1px solid oklch(100% 0 0 / .14); color:var(--nav-section); font:inherit;font-size:11px;font-weight:500; padding:4px 6px;border-radius:var(--r-control);cursor:pointer; min-height:24px; transition:background-color .1s,color .1s,border-color .1s; } .navctl button:hover{background:oklch(100% 0 0 / .05);color:var(--nav-item-hover);border-color:oklch(100% 0 0 / .24)} .navctl button:focus-visible{outline:2px solid var(--accent-hi);outline-offset:1px} /* The pin control rests invisible and arrives on hover or keyboard focus — the same rule the table's row actions follow, so the rail reads calm at rest. An already-pinned item keeps it visible, because that is state rather than an affordance. */ .side nav a{position:relative} .pintog{ margin-left:auto;flex:none; background:transparent;border:0;color:var(--nav-section); font-size:11px;line-height:1;cursor:pointer; padding:3px 4px;border-radius:var(--r-badge); min-width:24px;min-height:24px; opacity:0;transition:opacity .12s,color .1s,background-color .1s; } .side nav a:hover .pintog, .side nav a:focus-within .pintog, .pintog:focus-visible{opacity:1} .pintog.on{opacity:1;color:var(--accent-hi)} .pintog:hover{background:oklch(100% 0 0 / .08);color:var(--nav-active)} @media (prefers-reduced-motion:reduce){.pintog{transition:none}} /* ═══ RECENTS DOCK ════════════════════════════════════════════════════════════════ Low-key by construction: a 26px strip on the page edge, muted, no shadow, collapsed to a single row until you reach for it. It answers "where was I" — which the nav does not. If it ever competes with the content for attention it has failed. */ /* FIXED, not sticky. Sticky needs a scroll container to stick within; in tool mode .app is height:100vh with overflow:hidden and the iframe takes the remaining space, so there is no scroll context and the dock landed wherever flow put it — which read as it jumping to the top. Pinned to the viewport it is in the same place on every page, which is the entire point of a dock. */ .dock{ position:fixed;left:240px;right:0;bottom:0;z-index:30; display:flex;align-items:center;gap:var(--space-3); height:26px; padding:0 var(--space-4) 0 var(--space-3); border-top:1px solid var(--line); background:var(--paper); color:var(--ink-2); font-size:11px; transition:height .14s var(--ease-out); } .dock.open{height:auto;min-height:26px;padding-top:6px;padding-bottom:6px;align-items:flex-start} .dock-tab{ flex:none;background:none;border:0;cursor:pointer; font:inherit;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--ink-3);padding:4px 2px;min-height:24px; } .dock-tab:hover{color:var(--ink-1)} .dock-tab::after{content:" ▸";font-size:9px;opacity:.6} .dock.open .dock-tab::after{content:" ▾"} /* Collapsed: one line, clipped. Open: wraps to as many rows as it needs. */ /* Chips keep their natural width. Letting them shrink turned "Outreach CRM" into "Outreac" and the whole point of a recents list is reading it at a glance — a stub is worse than not showing the item. Collapsed, the strip scrolls; open, it wraps. */ .dock-strip{ flex:1;min-width:0;display:flex;gap:var(--space-2); overflow-x:auto;overflow-y:hidden;white-space:nowrap;align-items:center; scrollbar-width:none; } .dock-strip::-webkit-scrollbar{display:none} .dock-item{flex:0 0 auto} .dock.open .dock-strip{flex-wrap:wrap;white-space:normal;overflow:visible} .dock-item{ display:inline-flex;align-items:center;gap:5px;flex:0 0 auto; padding:2px 7px;border-radius:var(--r-badge); border:1px solid var(--line); background:var(--panel);color:var(--ink-2); text-decoration:none;font-size:11px;line-height:18px; max-width:none; transition:background-color var(--exit),border-color var(--exit),color var(--exit); } .dock-item:hover{background:var(--tint);border-color:var(--line-strong);color:var(--ink-1);text-decoration:none} .dock-item .dk{ font-family:var(--mono);font-size:9px;letter-spacing:.04em; color:var(--ink-4); } /* A record is a thing you were working ON, so it reads slightly warmer than a module. */ .dock-item.rec{border-color:var(--accent-20);color:var(--accent)} .dock-item.rec .dk{color:var(--accent)} .dock-clear{ flex:none;background:none;border:0;cursor:pointer; font:inherit;font-size:11px;color:var(--ink-4);padding:4px 2px;min-height:24px; } .dock-clear:hover{color:var(--bad)} .dock-empty{color:var(--ink-4);font-size:11px} @media (prefers-reduced-motion:reduce){.dock{transition:none}} @media(max-width:700px){.dock-item{max-width:130px}} /* ═══ NAV GROUP HUES ══════════════════════════════════════════════════════════════ A deliberate exception to this system's "no decorative gradients" rule, because here the gradient is not decoration — it gives each top-level section its own quiet identity, so a 70-item rail reads as SECTIONS rather than one undifferentiated list. It fades to transparent well before the label ends, so text never sits on colour and contrast is unchanged. Hues come from the same validated categorical scale as the lead sources, in fixed order — not invented per group. */ .side .navgroup > .navtoggle{ background-image:linear-gradient(90deg, var(--g, transparent) 0%, transparent 62%); background-repeat:no-repeat; } .side .navgroup[data-g="pipeline"] > .navtoggle{--g:oklch(72% .085 265 / .20)} .side .navgroup[data-g="intake"] > .navtoggle{--g:oklch(72% .085 184 / .22)} .side .navgroup[data-g="marketing"] > .navtoggle{--g:oklch(72% .085 85 / .20)} .side .navgroup[data-g="reference"] > .navtoggle{--g:oklch(72% .085 155 / .18)} .side .navgroup[data-g="bflow"] > .navtoggle{--g:oklch(72% .085 320 / .18)} .side .navgroup[data-g="phone"] > .navtoggle{--g:oklch(72% .085 205 / .20)} .side .navgroup[data-g="content"] > .navtoggle{--g:oklch(72% .085 25 / .18)} .side .navgroup[data-g="ops"] > .navtoggle{--g:oklch(72% .085 145 / .20)} /* Open or on the active trail the wash strengthens and gains a matching edge, so the hue carries STATE rather than only decorating a heading. */ .side .navgroup.open > .navtoggle, .side .navgroup.trail > .navtoggle{ background-image:linear-gradient(90deg, var(--g, transparent) 0%, transparent 72%); box-shadow:inset 2px 0 0 var(--gedge, oklch(100% 0 0 / .22)); color:var(--nav-active); } .side .navgroup[data-g="pipeline"] {--gedge:oklch(72% .085 265)} .side .navgroup[data-g="intake"] {--gedge:oklch(72% .085 184)} .side .navgroup[data-g="marketing"] {--gedge:oklch(72% .085 85)} .side .navgroup[data-g="reference"] {--gedge:oklch(72% .085 155)} .side .navgroup[data-g="bflow"] {--gedge:oklch(72% .085 320)} .side .navgroup[data-g="phone"] {--gedge:oklch(72% .085 205)} .side .navgroup[data-g="content"] {--gedge:oklch(72% .085 25)} .side .navgroup[data-g="ops"] {--gedge:oklch(72% .085 145)} /* Second-level BFlow headings stay neutral — hue at both levels is noise. */ .side .navgroup.sub > .navtoggle{background-image:none;box-shadow:none} @media (forced-colors:active){ .side .navgroup > .navtoggle{background-image:none} } /* Room for the dock so it never covers the last row of anything. */ .appbody{padding-bottom:64px} body.toolmode .toolframe{margin-bottom:26px} body.toolmode .dock.open ~ .toolframe{margin-bottom:0} @media(max-width:900px){ .dock{left:0} } /* ── pin reordering ──────────────────────────────────────────────────────────────── */ .pinbar nav a.pinned{cursor:grab} .pinbar nav a.pinned:active{cursor:grabbing} .pinbar nav a.dragging{opacity:.4} .pinbar nav a.over{box-shadow:inset 0 2px 0 var(--accent)} /* ── recents bar: colour that means something ──────────────────────────────────── The dock was uniformly grey, which made a record you were working ON look identical to a page you glanced at. Records take the accent; modules take the hue of the section they live in, so the strip reads as a map of where you have been rather than a list of words. */ .dock{background:linear-gradient(to top, var(--panel), var(--paper) 70%);color:var(--ink-2)} .dock-tab{color:var(--accent)} .dock-item{border-color:var(--line-strong)} .dock-item[data-sec="pipeline"] {border-left:2px solid oklch(72% .085 265); color:var(--ink-1)} .dock-item[data-sec="intake"] {border-left:2px solid oklch(72% .085 184); color:var(--ink-1)} .dock-item[data-sec="marketing"]{border-left:2px solid oklch(72% .085 85); color:var(--ink-1)} .dock-item[data-sec="reference"]{border-left:2px solid oklch(72% .085 155); color:var(--ink-1)} .dock-item[data-sec="bflow"] {border-left:2px solid oklch(72% .085 320); color:var(--ink-1)} .dock-item[data-sec="phone"] {border-left:2px solid oklch(72% .085 205); color:var(--ink-1)} .dock-item[data-sec="content"] {border-left:2px solid oklch(72% .085 25); color:var(--ink-1)} .dock-item[data-sec="ops"] {border-left:2px solid oklch(72% .085 145); color:var(--ink-1)} /* A record is a thing you were working ON — it gets the accent fill, not just an edge. */ .dock-item.rec{background:var(--accent-08);border-color:var(--accent-20);color:var(--accent)} .dock-item.rec:hover{background:var(--accent-12);border-color:var(--accent);color:var(--accent)} .dock-item.rec .dk{color:var(--accent);font-weight:600} /* ── "Needs you" work rows ──────────────────────────────────────────────────────── Each row is a link to the place the work happens, so the count and the action are the same click. A count that cannot be acted on is a statistic, and statistics belong in the strip above, not in a to-do list. */ .todo{ display:grid;grid-template-columns:44px 1fr auto;gap:var(--space-3);align-items:center; padding:10px 12px;margin:0 -12px; border-bottom:1px solid var(--line); text-decoration:none;color:var(--ink-1); border-left:2px solid transparent; transition:background-color var(--exit),border-color var(--exit); } .todo:last-of-type{border-bottom:0} .todo:hover{background:var(--tint);color:var(--ink-1);text-decoration:none;border-left-color:var(--accent)} .todo-n{ font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:20px;font-weight:600;text-align:right;color:var(--ink-1);line-height:1.1; } .todo.hot .todo-n{color:var(--bad)} .todo-t{font-size:13px;font-weight:500;display:flex;flex-direction:column;gap:1px;min-width:0} .todo-d{font-size:11.5px;font-weight:400;color:var(--ink-3)} .todo-go{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);white-space:nowrap} .todo-empty{font-size:13px;color:var(--ink-3);padding:6px 0} .denlbl{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--nav-section);align-self:center;flex:none} .dock-item[data-sec="home"]{border-left:2px solid var(--ink-3)}