/* Ported from cleardmarc-design/redesign/canvas/project/shell.css by
   scripts/port-design-css.py. Do not edit above the "site" marker: change the design file
   and run the script again. Site-only rules go below the marker. */

/* ClearDMARC shell: the sidebar and the top bar, drawn as one frame. Loads after cd.css and defines the shell completely.
   Every class here starts with side-, brand-, ws-, nav-, acct-, topbar- or shell- so a page stylesheet cannot collide with it
   (a page-level .meter rule landing on the sidebar's usage meter is what broke the plan card before). */
.cd{--shell-h:64px;--side-w:248px;--rail-w:64px;--nav-h:36px}
/* The sidebar is a dark island in both themes. Content tokens are re-pointed inside it so the shared .pill and .btn
   classes render correctly on it. --side-text-2 passes contrast on the bare sidebar only; on cards and menus use --text-3.
   Meter fills get their own brighter tokens: the page's --ok and --bad are too dark to read on the island. */
.cd .side,.cd .on-side{--text:oklch(0.97 0.006 210);--text-2:var(--side-text);--text-3:oklch(0.72 0.02 212);--surface:oklch(0.285 0.03 212);--surface-sunken:oklch(1 0 0 / 0.12);--border:var(--side-border);--border-strong:oklch(1 0 0 / 0.18);--border-control:oklch(0.58 0.02 212);--primary-ink:oklch(0.80 0.075 215);--primary-tint:var(--side-active-bg);--ok-tint:oklch(0.62 0.14 156 / 0.22);--ok-ink:oklch(0.80 0.11 156);--warn-tint:oklch(0.74 0.13 76 / 0.20);--warn-ink:oklch(0.85 0.10 80);--bad-tint:oklch(0.58 0.185 27 / 0.28);--bad-ink:oklch(0.82 0.10 27);--side-card:oklch(1 0 0 / 0.05);--side-hover:oklch(1 0 0 / 0.06);--side-accent:oklch(0.78 0.10 215);--side-track:oklch(1 0 0 / 0.14);--side-fill-ok:oklch(0.78 0.14 156);--side-fill-warn:oklch(0.80 0.13 80);--side-fill-bad:oklch(0.72 0.16 27);--side-fill-off:oklch(0.70 0.02 212);--shadow-sm:0 1px 2px rgba(0,0,0,.3);--shadow-lg:0 18px 40px -12px rgba(0,0,0,.6),0 4px 10px -4px rgba(0,0,0,.4)}
.cd .on-side{background:var(--side-bg);color:var(--side-text)}
/* frame: the sidebar stretches to the page height; its own column is at least one screen tall so the foot sits near the fold.
   No viewport units, nothing sticky: if the content is taller the column simply grows. */
.cd .side{flex:0 0 var(--side-w);min-width:0;background:var(--side-bg);color:var(--side-text);border-right:1px solid var(--side-border);font-size:14px}
.cd[data-theme="dark"] .side{border-right-color:oklch(1 0 0 / 0.16)}
.cd .side-in{display:flex;flex-direction:column;min-height:960px}
.cd .side :focus-visible,.cd .on-side :focus-visible{outline:2px solid var(--side-accent);outline-offset:2px}
/* brand row: same height and bottom hairline as the top bar */
.cd .brand{flex:none;display:flex;align-items:center;gap:12px;height:var(--shell-h);padding:0 12px 0 16px;border-bottom:1px solid var(--side-border);font-size:16px;font-weight:500;color:#fff}
/* the logo keeps its original colours (Oct 19, the user: "restore those logo colors to the original ones"): the #0BB4D4 tile with its
   glow, the #0892AC check badge, white strokes, and the wordmark "Clear" (500) with "DMARC" (600) in #4DD9EE on dark.
   Its own tokens (--brand*), the same in both themes, so the UI teal (--primary, darker for contrast) never repaints it. */
.cd .brand b{font-weight:600;color:var(--brand-on-dark)}
.cd .brand-mark{flex:none;width:32px;height:32px;border-radius:var(--radius-lg);background:var(--brand);box-shadow:0 2px 8px color-mix(in oklch,var(--brand) 45%,transparent);display:grid;place-items:center;color:#fff}
.cd .brand-mark-dot{fill:var(--brand-strong)}
.cd .brand-mark svg{display:block;width:22px;height:22px}
.cd .brand-name{flex:1;min-width:0;white-space:nowrap}
.cd .side-btn{flex:none;width:32px;height:32px;padding:0;display:grid;place-items:center;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--side-text-2);cursor:pointer}
.cd .side-btn:hover{background:var(--side-hover);color:var(--text)}
.cd .side-menu{display:none}
/* workspace: scope sits under the brand */
.cd .side-top{flex:none;padding:12px 12px 4px}
.cd .ws{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--control-h);padding:4px 8px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--side-card);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.cd .ws:hover{background:var(--side-hover)}
.cd .ws-tile{flex:none;width:24px;height:24px;border-radius:var(--radius-sm);background:var(--primary-tint);color:var(--primary-ink);display:grid;place-items:center;font-size:12px;font-weight:700}
.cd .ws-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.cd .ws-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd .ws-meta{font-size:11px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd .ws-caret{color:var(--text-3)}
.cd .ws.is-static{border-color:transparent;background:transparent;cursor:default}
.cd .ws.is-static .ws-caret{display:none}
.cd .ws.is-away{border-color:oklch(0.80 0.13 80 / 0.55)}
.cd .ws.is-away .ws-meta{color:var(--warn-ink)}
/* navigation: natural height, never scrolls */
.cd .side-nav{flex:1 0 auto;display:flex;flex-direction:column;gap:2px;padding:8px 12px 12px}
.cd .nav-label{padding:16px 8px 6px;font-size:11px;font-weight:700;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--side-text-2)}
.cd .nav-item{flex:none;display:flex;align-items:center;gap:12px;min-height:var(--nav-h);padding:0 8px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;color:var(--side-text)}
.cd .nav-item .i{color:var(--side-text-2)}
.cd .nav-item:hover{background:var(--side-hover);color:var(--text)}
.cd .nav-item.is-active{background:var(--side-active-bg);color:#fff;box-shadow:inset 3px 0 0 var(--side-accent)}
.cd .nav-item.is-active .i{color:var(--side-accent)}
.cd .nav-item:focus-visible{outline-offset:-2px}
.cd .nav-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd .side-div{display:none;flex:none;height:1px;margin:8px;background:var(--side-border)}
/* count badge: one style for the sidebar and the top bar */
.cd .shell-count{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-pill);background:var(--bad);color:#fff;font-size:12px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.cd .side-dot{display:none;width:8px;height:8px;border-radius:50%;background:var(--side-fill-ok)}
.cd .side-dot.is-warn{background:var(--side-fill-warn)}
.cd .side-dot.is-bad{background:var(--side-fill-bad)}
/* foot: plan and usage, then the account, then the standards line */
.cd .side-foot{flex:none;display:flex;flex-direction:column;gap:8px;padding:12px;border-top:1px solid var(--side-border)}
.cd .side-plan{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--side-card)}
.cd .side-plan.is-warn{border-color:oklch(0.80 0.13 80 / 0.55)}
.cd .side-plan.is-bad{border-color:oklch(0.72 0.16 27 / 0.8)}
.cd .side-plan-hd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-height:24px}
.cd .side-plan-name{flex:1 1 auto;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;line-height:1.25;color:var(--text);white-space:nowrap}
.cd .side-plan-name .i{color:var(--side-accent)}
/* one usage meter = a label row, then a separate track with a fill */
.cd .side-meter{display:flex;flex-direction:column;gap:6px}
.cd .side-meter-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:8px;font-size:12px;line-height:16px;color:var(--text-3)}
.cd .side-meter-top span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd .side-meter-top b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.cd .side-track{display:block;height:6px;border-radius:var(--radius-pill);background:var(--side-track);overflow:hidden}
.cd .side-fill{display:block;height:6px;border-radius:var(--radius-pill);background:var(--side-fill-ok)}
.cd .side-fill.is-warn{background:var(--side-fill-warn)}
.cd .side-fill.is-bad{background:var(--side-fill-bad)}
.cd .side-fill.is-off{background:var(--side-fill-off)}
.cd .side-plan-note{font-size:12px;line-height:1.4;color:var(--text-3)}
.cd .side-plan-note.is-warn{color:var(--warn-ink)}
.cd .side-plan-note.is-bad{color:var(--bad-ink)}
.cd .side-plan-ft{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;font-size:12px;line-height:16px;color:var(--text-3)}
.cd .btn-block{width:100%}
.cd .side-plan.is-compact{gap:8px}
.cd .side-plan.is-compact .side-meter-top,.cd .side-plan.is-compact .side-plan-note,.cd .side-plan.is-compact .side-plan-ft{display:none}
/* account row: the trigger of the account menu */
.cd .acct-wrap{position:relative}
.cd .acct{display:flex;align-items:center;gap:10px;width:100%;min-height:54px;padding:8px;border:1px solid transparent;border-radius:var(--radius);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.cd .acct:hover,.cd .acct[aria-expanded="true"]{background:var(--side-hover);border-color:var(--border)}
.cd .acct-avatar{flex:none;width:36px;height:36px;border-radius:50%;background:var(--primary-strong);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}
.cd .acct-info{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.cd .acct-info>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd .acct-name{font-size:13px;font-weight:600;color:var(--text)}
.cd .acct-role{font-size:12px;font-weight:600;color:var(--primary-ink)}
.cd .acct-mail{display:none;font-size:12px;color:var(--text-3)}
.cd .acct-caret{color:var(--text-3)}
/* account menu: opens upward over the plan card on desktop, sits in the flow under the account row on mobile */
.cd .acct-menu{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:5;display:flex;flex-direction:column;gap:2px;padding:6px;border:1px solid var(--border-strong);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-lg)}
.cd .acct-id{display:flex;flex-direction:column;gap:2px;min-width:0;margin-bottom:4px;padding:8px 8px 12px;border-bottom:1px solid var(--border);font-size:12px;line-height:1.5;color:var(--text-3)}
.cd .acct-id b{font-size:13px;font-weight:600;color:var(--text);overflow-wrap:anywhere}
.cd .acct-item{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--nav-h);padding:0 8px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-2);font:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer}
.cd .acct-item .i,.cd .acct-row .i{color:var(--text-3)}
.cd .acct-item:hover{background:var(--side-hover);color:var(--text)}
.cd .acct-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--control-h);padding:0 2px 0 8px;font-size:14px;font-weight:600;color:var(--text-2)}
.cd .acct-row-label{display:flex;align-items:center;gap:10px}
.cd .acct-sep{flex:none;height:1px;margin:4px 0;background:var(--border)}
/* theme switch: the pressed option follows the artboard theme, no per-button bindings */
.cd .acct-theme{flex:none;display:flex;gap:2px;padding:3px;border-radius:var(--radius-sm);background:oklch(0 0 0 / 0.24)}
.cd .acct-theme button{height:28px;padding:0 8px;border:0;border-radius:var(--radius-xs);background:transparent;color:var(--text-3);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.cd[data-theme="light"] .acct-theme button[data-opt="light"],.cd[data-theme="dark"] .acct-theme button[data-opt="dark"]{background:oklch(1 0 0 / 0.16);color:var(--text)}
/* standards line: two short lines, so it never has to be cut off */
.cd .side-std{display:flex;align-items:center;gap:8px;padding:4px 8px 0;font-size:11px;line-height:1.4;color:var(--side-text-2)}
.cd .side-std .i{width:16px;height:16px;color:var(--ok-ink)}
.cd .side-std-txt{display:flex;flex-direction:column;min-width:0}
.cd .side-std-txt b{font-weight:700;color:var(--side-text)}
/* collapsed rail: one class on .side. Text is hidden with display:none; the group label becomes a divider
   and the alert count and plan status become dots, all as their own elements. */
.cd .side.is-rail{flex:0 0 var(--rail-w);width:var(--rail-w)}
.cd .side.is-rail .side-in{min-height:0}
.cd .side.is-rail .brand{padding:0;justify-content:center}
.cd .side.is-rail .brand-name,.cd .side.is-rail .side-collapse,.cd .side.is-rail .nav-txt,.cd .side.is-rail .nav-label,.cd .side.is-rail .shell-count,.cd .side.is-rail .ws-text,.cd .side.is-rail .ws-caret,.cd .side.is-rail .acct-info,.cd .side.is-rail .acct-caret,.cd .side.is-rail .side-std-txt,.cd .side.is-rail .side-meter,.cd .side.is-rail .side-plan-note,.cd .side.is-rail .side-plan-ft,.cd .side.is-rail .side-plan-name span,.cd .side.is-rail .side-plan .pill{display:none}
.cd .side.is-rail .side-top{display:flex;flex-direction:column;align-items:center;gap:8px}
.cd .side.is-rail .ws{justify-content:center;padding:0;border-color:transparent;background:transparent}
.cd .side.is-rail .nav-item{position:relative;justify-content:center;padding:0}
.cd .side.is-rail .side-div{display:block}
.cd .side.is-rail .side-dot{display:block;position:absolute;top:6px;right:6px}
.cd .side.is-rail .side-plan{position:relative;align-items:center;justify-content:center;min-height:var(--control-h);padding:0}
.cd .side.is-rail .side-plan-hd{justify-content:center}
.cd .side.is-rail .side-plan-name{flex:none}
.cd .side.is-rail .acct{justify-content:center;min-height:0;padding:2px 0;border:0}
.cd .side.is-rail .side-std{justify-content:center;padding:4px 0 0}
/* top bar: page context on the left, then notifications and the page's one primary action */
.cd .topbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;min-height:var(--shell-h);padding:8px 32px;border-bottom:1px solid var(--border);background:var(--surface)}
.cd .topbar-ctx{flex:1 1 240px;min-width:0}
.cd .topbar-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cd .topbar .icon-btn{position:relative}
.cd .topbar .icon-btn:hover{color:var(--text)}
.cd .topbar .icon-btn .shell-count{position:absolute;top:-6px;right:-6px;box-shadow:0 0 0 2px var(--surface)}
/* mobile shell: keyed off data-device="mobile" on the artboard root (base rules for page content are in cd.css).
   The sidebar becomes a full-width app bar with the drawer closed; add .is-open on .side to open the drawer,
   which then sits in the flow under the app bar and pushes the page down. */
@media (max-width: 900px){
.cd.cd{--shell-h:56px;--nav-h:44px}
.cd.cd .side{flex:1 1 100%;border-right:0}
.cd.cd .side-in{min-height:0}
.cd.cd .brand{padding:0 6px 0 16px}
.cd.cd .side-collapse{display:none}
.cd.cd .side-menu{display:grid;width:44px;height:44px;color:var(--side-text)}
.cd.cd .side-top,.cd.cd .side-nav,.cd.cd .side-foot{display:none}
.cd.cd .side.is-open .side-top{display:block;padding:12px 16px 4px}
.cd.cd .side.is-open .side-nav{display:flex;padding:8px 16px 12px}
.cd.cd .side.is-open .side-foot{display:flex;padding:12px 16px 16px}
.cd.cd .acct-mail{display:block}
.cd.cd .acct-wrap{display:flex;flex-direction:column;gap:8px}
.cd.cd .acct-menu{position:static;order:2;box-shadow:none}
.cd.cd .acct-theme button{height:36px;padding:0 14px}
.cd.cd .topbar{padding:8px 16px;gap:8px 12px}
.cd.cd .topbar-ctx{flex:1 1 0}
.cd.cd .topbar-actions{flex:none;flex-wrap:nowrap}
.cd.cd .topbar [data-topbar-add]{width:var(--control-h);padding:0}
.cd.cd .topbar [data-topbar-add] .btn-label{display:none}
}

/* ==== site: written by hand. scripts/port-design-css.py keeps everything below ==== */