@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable.woff2") format("woff2");
}
:root {
  /* Colour VALUES follow DPT App Kit v5 dark (dpt-brand dpt.v5.css), same as Health, Portal, Club. The layout stays;
     names stay so every existing rule keeps working. --gold is the PRIMARY control (white in v5); amber is --warn. */
  --page: var(--ops-bg-canvas);
  --panel: var(--ops-bg-panel);
  --raised: var(--ops-bg-surface);
  --cardbg: var(--ops-bg-surface);
  --cardline: var(--ops-line-default);
  --line: var(--ops-line-default);
  --line2: var(--ops-line-strong);
  --t1: var(--ops-text-primary);
  --t2: var(--ops-text-secondary);
  --t3: var(--ops-text-tertiary);
  --green: var(--ops-status-good);
  --green-soft: var(--ops-status-good-wash);
  --gold: var(--ops-accent-primary);
  --gold-edge: var(--ops-accent-primary);
  --gold-ink: var(--ops-accent-on-primary);
  --warn: var(--ops-status-warn);
  --red: var(--ops-status-bad);

  /* App aliases: keep every existing var(--text)/var(--card) name, point at the current tokens. */
  --green-dark: var(--green);
  --ink: var(--ops-text-on-status);
  --ink-fg: var(--t1);
  --text: var(--t1);
  --sub: var(--t2);
  --muted: var(--t3);
  --surface: var(--page);
  --card: var(--panel);
  --well: var(--raised);
  --danger: var(--red);
  --danger-wash: var(--ops-status-bad-wash);
  --good-wash: var(--green-soft);
  --warn-wash: var(--ops-status-warn-wash);

  --metric-hero: var(--green);
  --info: var(--ops-status-info);
  --info-wash: var(--ops-status-info-wash);

  --radius: 8px;
  font-size: 13px;
}
/* Kit tokens are declared on .dpt-dark (html and body). Aliases must sit on that
   same element so they win over the kit's local values. Do not edit brand/. */
.dpt-dark {
  --dp3-r-pill: 6px;
  --dp2-r-pill: 6px;
  --dp3-font-display: Inter, system-ui, sans-serif;
  --dp3-font-ui: Inter, system-ui, sans-serif;
  --dp-font-heading: Inter, system-ui, sans-serif;
  --dp-font-body: Inter, system-ui, sans-serif;
  --dp3-t-body: 13px;
  --dp3-bg: var(--page);
  --dp3-card: var(--panel);
  --dp3-card-2: var(--raised);
  --dp3-text: var(--t1);
  --dp3-text-2: var(--t2);
  --dp3-text-3: var(--t3);
  --dp3-line: var(--line);
  --dp3-line-strong: var(--line2);
  --dp3-accent: var(--green);
  --dp3-ok: var(--green);
  --dp3-warn: var(--warn);
  --dp3-danger: var(--red);
  --dp3-link: var(--t1);
  --dp3-electric: var(--t1);
  --dp3-focus: var(--line2);
  --dp2-action: var(--gold);
  --dp2-action-ink: var(--gold-ink);
  --dp2-action-hover: var(--ops-accent-primary-hover);
  --dp2-gold: var(--gold);
  --dp2-gold-ink: var(--gold-ink);
  --dp2-nav-active: var(--t1);
  --dp2-label: var(--t3);
  --dp-text: var(--t1);
  --dp-text-muted: var(--t2);
  --dp-line: var(--line);
  --dp-surface: var(--page);
  --dp-surface-raised: var(--panel);
  --dp-surface-sunken: var(--raised);
  --dp-action-t: var(--green);
  --dp-green-text: var(--green);
  --dp-brand: var(--gold);
  --dp-crit-t: var(--red);
  --dp-warn-t: var(--warn);
  --dp3-field-h: 36px;
  --dp-btn-h-sm: 44px;   /* coarse / phone floor. Never use this for the mouse chassis. */
  --dp-btn-h-desk: 36px;
  --dp-btn-h: 36px;
}
* { box-sizing: border-box; margin: 0; }
/* Stable gutter: the centred column and the fixed nav jumped 7.5px when a list started scrolling. */
html { scrollbar-gutter: stable; }
/* --shadow is read on body, not :root: v1 wraps a whole box-shadow in light-dark() (colour-only), so from
   :root it goes invalid and every card loses its shadow. The role class is pinned on body. */
body { font-family: var(--dp3-font-ui); background: var(--surface); color: var(--text);
       --shadow: var(--dp-shadow-t); }
button { font: inherit; cursor: pointer; }
h2, .section-title, .cal-head h2 { font-family: var(--dp3-font-display); }

.topbar { display: flex; align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) 4px calc(20px + env(safe-area-inset-left)); max-width: 1220px; margin: 0 auto; color: var(--text); flex-wrap: wrap; }
.crest { display: block; height: 40px; width: auto; }
/* Always-dark app: a leftover data-theme must not hide the reversed crest. */
.crest-dark { display: block; }
.skip-link {
  position: absolute; left: 8px; top: 8px; z-index: 200;
  background: var(--dp2-action); color: var(--dp2-action-ink, var(--ops-accent-on-primary));
  padding: 8px 12px; border-radius: 6px; font-weight: 700; font-size: 13px;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
.screen-id { flex: 1; min-width: 0; }
/* margin:0 because it is an <h1> and the UA gives h1 a block margin. */
.screen-title { font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 500; letter-spacing: -.01em; text-transform: none; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.screen-sub { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--t2); margin-top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dp2-nav button.active { color: var(--dp2-nav-active); }
/* nowrap: a wrapped tab ("Win-Back") stood 48px tall against 32px. */
.dp2-nav a, .dp2-nav button { white-space: nowrap; }

/* Mask only while a fade class is present, so the pill's border stays crisp when every tab fits. */
.dp2-nav.fade-l { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px); mask-image: linear-gradient(to right, transparent 0, #000 22px); }
.dp2-nav.fade-r { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 22px); mask-image: linear-gradient(to left, transparent 0, #000 22px); }
.dp2-nav.fade-l.fade-r { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); }

.who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sub); }
.who select { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: var(--dp3-r-sm); padding: 7px 10px; font-weight: 600; }
.sync { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--sub); }
/* Sync, Sign out and notifications live only on the Account sheet; its Sync row spins with this. */
@keyframes dp-spin { to { transform: rotate(360deg); } }
/* display:inline-flex would otherwise beat the UA's [hidden] rule. */
#menu-btn[hidden] { display: none; }
/* The avatar opens the Account sheet at every width (initials via .avatar-btn below; three lines when nobody is signed in). */
#menu-btn { display: inline-flex; flex: none; width: 36px; height: 36px; background: var(--card); color: var(--sub); border: 1px solid var(--line); border-radius: 6px; padding: 0; align-items: center; justify-content: center; }
#menu-btn:hover { color: var(--text); border-color: var(--green); }
#menu-btn svg { display: block; }
.net-chip { background: var(--warn); color: var(--gold-ink); font-weight: 800; font-size: 11px; border-radius: var(--dp3-r-pill); padding: 3px 10px; }
.check.ro { cursor: default; border-style: dashed; }
.check.ro.on { border-style: solid; }
.skel { border-radius: var(--radius); background: linear-gradient(90deg, var(--well) 25%, var(--card) 50%, var(--well) 75%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.skel-line { display: inline-block; width: 160px; max-width: 100%; height: 11px; border-radius: var(--dp3-r-pill); vertical-align: -1px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Above <main>: every render() replaces the inside of it. */
.stale-strip { width: min(1180px, calc(100% - 40px)); margin: 10px auto 0; padding: 9px 14px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; border-radius: var(--radius); background: var(--warn-wash); color: var(--warn); border: 1px solid var(--warn); }
.stale-strip .stale-x { margin-left: auto; background: none; border: 0; color: inherit; font-size: 14px; line-height: 1; min-width: var(--dp-btn-h); min-height: var(--dp-btn-h); }

/* Bottom margin clears the fab and the phone's home indicator. */
main { max-width: 1180px; margin: 14px auto calc(96px + env(safe-area-inset-bottom)); padding: 0 20px; }
.section-title { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--t2); margin: 16px 16px 0; display: flex; align-items: center; gap: 8px; }
/* --text, not --sub: muted grey is 3.4:1 on --line in dark. */
.section-title .count { background: var(--line); color: var(--text); border-radius: var(--dp3-r-pill); padding: 1px 9px; font-size: 12px; }
.section-title .hint { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--muted); }
.empty { color: var(--muted); font-size: 14px; padding: 14px 4px; }

/* Task rows: one line, a 30px check, name over a muted
   meta line, a comment count on the right when there is one (no points). The whole row opens the task
   sheet; the check is the only other target. */
.task { display: flex; align-items: center; gap: 8px; background: transparent; border: 0; border-radius: 0; padding: 0 16px; margin-bottom: 0; min-height: 36px; height: 36px; cursor: pointer; transition: background .1s, opacity .35s; }
.task:hover { border-color: var(--dp3-link, var(--green)); }
.task.done { opacity: .6; }
.task.done .tname { text-decoration: line-through; color: var(--sub); }
.task.leaving { opacity: 0; transform: translateX(24px); }
/* 30px circle with a 44px tap target via ::after (no reflow). The edge clears 3:1 on the card. */
.check { position: relative; flex: none; width: 30px; height: 30px; min-width: 30px; padding: 0; border: 1.6px solid var(--dp3-line-strong, var(--ops-line-strong)); border-radius: 50%; background: transparent; display: grid; place-items: center; color: transparent; cursor: pointer; transition: background .15s, border-color .15s; }
.check svg { width: 15px; height: 15px; stroke-width: 3; opacity: 0; transform: scale(.4); transition: opacity .15s, transform .15s; }
.check:not(.ro)::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; }
.check:hover { border-color: var(--green); }
.task.done .check, .check.on { background: var(--dp2-action); border-color: var(--dp2-action); color: var(--dp2-action-ink); }
.task.done .check svg, .check.on svg { opacity: 1; transform: none; }
.tmain { flex: 1; min-width: 0; }
button.tmain { display: block; appearance: none; background: none; border: 0; padding: 4px 0; margin: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
button.tmain:focus-visible { outline: none; box-shadow: var(--dp5-focus); border-radius: 6px; }
.tname { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.tmeta { display: flex; column-gap: 6px; row-gap: 1px; align-items: center; margin-top: 3px; font-size: 12px; line-height: 1.35; color: var(--muted); flex-wrap: wrap; }
.tmeta .sep { color: var(--dp3-text-3, var(--muted)); }
.tc { position: relative; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--sub); }
.tc svg { width: 14px; height: 14px; }
.tc .tc-dot { position: absolute; top: -3px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); border: 1.5px solid var(--card); }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; padding: 0 6px; height: 18px; border-radius: 4px; color: var(--t2); }
/* Destructive ghost (Delete task, project, event): danger word on a faint danger edge, so it never reads as disabled. */
.btn.ghost.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.btn.ghost.danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-wash); }
.owner { color: var(--sub); font-weight: 600; }
.tacts { display: flex; gap: 6px; }
/* 44px targets 9px apart: Dismiss and Delete sat shoulder to shoulder with Comments. Scoped to task rows. */
.task .tacts { gap: 9px; }
.tacts .iconbtn { min-width: var(--dp-btn-h); min-height: var(--dp-btn-h); justify-content: center; }
.iconbtn { border: 1px solid var(--line); background: var(--card); border-radius: var(--dp3-r-sm); padding: 6px 9px; font-size: 14px; line-height: 1; color: var(--sub); display: inline-flex; align-items: center; gap: 3px; }
.iconbtn svg { display: block; }
.iconbtn:hover { border-color: var(--green); color: var(--green-dark); background: var(--good-wash); }
.iconbtn.danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-wash); }

.cal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.cal-head h2 { font-size: 20px; }
.cal-nav { border: 1px solid var(--line); background: var(--card); border-radius: var(--dp3-r-sm); padding: 6px 12px; font-weight: 700; }
.calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.dow { text-align: center; font-size: 11px; font-weight: 500; color: var(--t3); text-transform: uppercase; letter-spacing: .04em; padding: 4px 0; }
.day { background: var(--card); border: 1px solid var(--line); border-radius: 10px; min-height: 76px; padding: 7px 8px; font-size: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
/* Today is outlined, never filled; the selected day is the one with the faint electric well (a shape, not only a colour). */
.day.today { border-color: var(--dp3-accent, var(--green)); }
.day.sel { border-color: var(--dp3-accent, var(--green)); box-shadow: inset 0 0 0 1px var(--dp3-accent, var(--green));
  background: color-mix(in srgb, var(--dp3-electric, var(--green)) 10%, var(--card)); }
.day:hover:not(.sel):not(.pad) { border-color: var(--dp3-line-strong, var(--line)); }
.day:focus-visible { outline: none; box-shadow: var(--dp5-focus); }
.cal-dots { display: none; }
.cal-agenda-h { margin-top: 18px; }

.filters { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.filters select, .filters input { border: 1px solid var(--line); border-radius: var(--dp3-r-sm); padding: 8px 10px; background: var(--card); font: inherit; }
table.all { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
table.all th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--t3); background: transparent; padding: 0 16px; height: 28px; border-bottom: 1px solid var(--line); }
table.all td { padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: top; }
table.all tr:hover td { background: var(--well); }
table.all tr { cursor: pointer; }

.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.chartcard { min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); margin-bottom: 16px; }
.chartcard h3 { font-size: 14px; margin-bottom: 2px; }
.chartcard .sub { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .grid2 { grid-template-columns: 1fr; } }
.goals { align-items: start; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.goal { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; box-shadow: var(--shadow); }
.goal[data-how] { cursor: pointer; }

#fab { position: fixed; right: 24px; top: 18px; bottom: auto; width: 36px; height: 36px; border-radius: 6px; border: 1px solid var(--gold-edge); background: var(--gold); color: var(--gold-ink); font-size: 16px; font-weight: 500; box-shadow: inset 0 1px 0 transparent; z-index: 50; }
/* Brightens: the label is dark ink, so a darker fill kills the contrast. */
#fab:hover { background: var(--dp2-action-hover); }
.overlay { position: fixed; inset: 0; background: var(--ops-scrim); display: grid; place-items: start center; z-index: 60; padding: max(18px, 8vh) 18px 18px; }
/* --mpad-x/-y drive the padding and the sticky save bar's bleed together (a fixed -22px overhung the 16px phone padding). */
.modal { --mpad-x: 22px; --mpad-y: 20px; border: 1px solid var(--line); position: relative; background: var(--card); border-radius: var(--dp3-r-lg); width: min(560px, 100%); max-height: 88vh; overflow: auto; padding: var(--mpad-y) var(--mpad-x); box-shadow: 0 20px 60px var(--ops-shadow-over); }
.modal h2 { font-size: 17px; margin-bottom: 4px; padding-right: 38px; }
.modal h2.h-ic { display: flex; align-items: center; gap: 8px; }
.modal h2.h-ic svg { width: 17px; height: 17px; flex: none; color: var(--warn); }
.modal .msub { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.modal label { display: block; font-size: 13px; font-weight: 500; color: var(--sub); margin: 12px 0 4px; }
.modal input, .modal textarea, .modal select { background: var(--well); color: var(--text); width: 100%; border: 1px solid var(--line); border-radius: var(--dp3-r-sm); padding: 9px 10px; font: inherit; }
.modal textarea { min-height: 70px; resize: vertical; }
.mrow { display: flex; gap: 10px; }
.mrow > div { flex: 1; }
.mact { flex-wrap: wrap; display: flex; gap: 10px; margin-top: 18px; justify-content: flex-end; align-items: center; }
.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 6px; padding: 0 12px; height: 36px; min-height: 36px; font-weight: 500; font-size: 13px; box-shadow: inset 0 1px 0 transparent; }
.btn svg { display: block; }
.btn.primary { background: var(--gold); color: var(--gold-ink); border-color: var(--gold-edge); font-weight: 500; }
.btn.primary:hover { background: var(--ops-accent-primary-hover); }
.btn.ghost { background: var(--card); border: 1px solid var(--line); color: var(--sub); }
.btn.warn { background: var(--warn-wash); border: 1px solid var(--warn); color: var(--warn); }
.mclose { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 9px; background: none; font-size: 18px; line-height: 1; color: var(--muted); cursor: pointer; z-index: 2; }
.mclose:hover { background: var(--well); color: var(--text); }
.notes { background: var(--well); border-radius: var(--dp3-r-sm); padding: 10px 12px; font-size: 13px; color: var(--sub); margin-top: 8px; }
.comments { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.comment { background: var(--well); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; font-size: 13.5px; }
.comment .c-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
.c-form { display: flex; gap: 8px; margin-top: 10px; }
.c-form input { flex: 1; }
/* bottom clears the floating island (from 720px the tabs sit in the header and the toast drops to 24px). width:max-content
   because a fixed box at left:50% with auto width shrink-fits into half the viewport and wraps every toast. */
#toast-root { position: fixed; bottom: calc(96px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: center; width: max-content; max-width: calc(100vw - 24px); }
.toast { background: var(--raised); color: var(--t1); border-radius: 8px; border: 1px solid var(--line); padding: 8px 12px; font-weight: 500; font-size: 12px; box-shadow: 0 16px 48px var(--ops-shadow-over); animation: pop .25s ease; display: flex; align-items: center; gap: 12px; max-width: min(520px, calc(100vw - 32px)); }
.toast-undo { border: 1px solid var(--line); background: transparent; color: var(--t1); border-radius: 6px; padding: 0 12px; height: 36px; font-weight: 500; font-size: 13px; cursor: pointer; flex: none; box-shadow: inset 0 1px 0 transparent; }
.toast-undo:hover { background: var(--dp2-action); border-color: var(--dp2-action); color: var(--dp2-action-ink); }
/* Phones: card surface and r-lg, not the ink pill (a pill radius on wrapped text is a blob). */
@media (max-width: 719px) {
  .toast { background: var(--card); color: var(--text); border: 1px solid var(--line);
    border-radius: var(--dp3-r-lg); padding: 8px 12px; font-size: 12.5px; gap: 10px;
    box-shadow: 0 6px 18px var(--ops-shadow-over); max-width: calc(100vw - 24px); }
  .toast-undo { border: 1px solid var(--line); background: var(--surface); color: var(--text);
    padding: 4px 12px; font-size: 13px; }
}
@keyframes pop { from { transform: translateY(14px); opacity: 0; } }
svg text { font-family: inherit; }
/* Chart text follows the card; a label ON a coloured bar keeps its own fill in the markup. */
.chartcard svg text { fill: var(--text); }
.chartcard svg .sv-mut { fill: var(--muted); }
.chartcard svg .sv-grid { stroke: var(--line); }
.chartcard svg .sv-now { stroke: var(--text); }

.ms-row { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--dp2-card-border-c); border-left: var(--dp2-rail) solid transparent; border-radius: var(--dp2-r-card); padding: 10px 14px; margin-bottom: 8px; font-size: 13px; box-shadow: var(--shadow); }
.ms-row.late { border-left-color: var(--danger); }
.ms-row.soon { border-left-color: var(--warn); }
.ms-due { font-family: var(--dp3-font-display); font-size: 13.5px; font-weight: 700; letter-spacing: .03em; min-width: 52px; }
.ms-when { color: var(--muted); min-width: 76px; font-size: 11px; }
.ms-row.late .ms-when { color: var(--danger); font-weight: 700; }
.ms-phase { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--green); min-width: 150px; }
/* --text, not --ink: --ink is the chrome surface (1.24:1 on a dark card). */
.ms-ev { flex: 1; color: var(--text); font-size: 13.5px; font-weight: 600; }
.ms-sub { color: var(--muted); font-size: 11px; font-weight: 400; }
.ms-add { white-space: nowrap; font-size: 13px; border-radius: var(--dp2-r-inner); }
.ms-done { white-space: nowrap; font-size: 13px; border-radius: var(--dp2-r-inner); color: var(--green-dark); font-weight: 700; }
/* An outline button in text ink (not link green), the same size as the sheet and header buttons. */
.ms-clear { white-space: nowrap; font-size: 13px; letter-spacing: 0; text-transform: none; border-radius: var(--dp2-r-inner); border-color: var(--dp3-line-strong, var(--line)); padding: 8px 12px; margin-left: 10px; color: var(--text); font-weight: 700; vertical-align: middle; }

/* Season digest actions sit outside .tacts, so they need their own 44px floor on touch. */
@media (pointer: coarse) {
  .ms-add, .ms-done, .ms-clear { min-height: var(--dp-btn-h-sm); padding-inline: 12px; }
}

.season-card { border: 1px solid var(--dp2-card-border-c); border-radius: var(--dp2-r-card); }
.season-card .sub { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.season-card .sc-edit { margin-left: auto; min-height: 36px; }
@media (pointer: coarse) {
  /* The kit's 44px floor: Season card Edit and the project sheet's subitem Edit and Delete sit outside .tacts. */
  .season-card .sc-edit { min-height: var(--dp-btn-h-sm, 44px); }
  #pe-tasks .iconbtn { min-width: var(--dp-btn-h-sm, 44px); min-height: var(--dp-btn-h-sm, 44px); justify-content: center; }
}
#season-new { margin-bottom: 10px; }
.season-weeks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; }
.season-weeks label { margin-top: 6px; }
@media (max-width: 480px) { .season-weeks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sc-count { font-family: Inter, system-ui, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--green); background: var(--green-soft); border-radius: 4px; padding: 0 6px; height: 18px; white-space: nowrap; }

.rock { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 9px 13px; margin-bottom: 6px; box-shadow: var(--shadow); font-size: 13.5px; }
.rock.late { border-left: 4px solid var(--danger); }
.rock.soon { border-left: 4px solid var(--warn); }
/* Cadence rails. Must stay below the card base rules (source order); status rails (.task.overdue,
   .rock.late/.soon) win on specificity. */
.goal, .rock { border-left: 4px solid var(--cad, transparent); }

.pchips { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.mine-sub { color: var(--muted); font-size: 13px; font-weight: 600; }

/* One breakpoint for the whole layout: 719px and down is the phone (floating island), 720px and up the desktop header.
   Phone blocks were max-width 700, which left a 701-719 band with the island but desktop content. */
@media (max-width: 719px) {
  :root { font-size: 14px; }
  main { padding: 0 10px; margin-top: 12px; }
  /* Explicit grid so the row break does not depend on which chips are showing. */
  .topbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 8px;
    padding: calc(8px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 8px calc(10px + env(safe-area-inset-left));
  }
  .brand { grid-column: 1; grid-row: 1; }
  .crest { height: 34px; }
  .screen-id { grid-column: 2; grid-row: 1; }
  .screen-title { font-size: 16px; }
  .screen-sub { font-size: 11px; letter-spacing: .12em; white-space: normal; }
  .sync { grid-column: 3; grid-row: 1; justify-self: end; flex-wrap: nowrap; gap: 6px; margin-left: 0; }
  .sync button {
    min-width: var(--dp-btn-h-sm); min-height: var(--dp-btn-h-sm);
    justify-content: center;
  }
  .who { grid-column: 1 / -1; }
  .who label { display: none; }

  .task { gap: 10px; }

  .ms-row .ms-ev { flex: 1 1 100%; }
  /* Phones: the runway is 12 month cells (see "Season runway cells"); the Gantt scaled its labels to ~4px here. */
  .runway-card :is(.runway-scroll) { display: none; }
  table.all { display: block; overflow-x: auto; white-space: nowrap; }
  .filters { gap: 7px; }
  .filters input, .filters select { flex: 1; min-width: 42%; }
  /* Phones: dots, not truncated names; the agenda under the grid names the tasks. */
  .calendar { gap: 4px; }
  .day { min-height: 52px; padding: 5px 3px 4px; border-radius: 9px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .day.today { border-color: var(--green); }
  .cal-dots { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; justify-content: center; }
  .cal-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--dp3-text-2, var(--sub)); }
  .cal-dots i.late { background: var(--danger); }
  .cal-dots i.done { background: var(--green); }
  .cal-dots b { font-size: 9.5px; font-weight: 700; color: var(--sub); line-height: 1; }
  .cal-head { gap: 8px; }
  .cal-head h2 { font-size: 18px; flex: 1; text-align: center; }
  .ms-row { flex-wrap: wrap; row-gap: 4px; }
  .ms-phase { min-width: 0; }
  .rock { flex-wrap: wrap; row-gap: 5px; }
  .mrow { flex-direction: column; gap: 0; }
  /* Above the pill, not beside it. #fab carries no class, so the brand .dp2-fab rules never apply. */
  #fab { right: calc(16px + env(safe-area-inset-right)); bottom: calc(87px + env(safe-area-inset-bottom)); width: 52px; height: 52px; }
  .modal { --mpad-x: 16px; --mpad-y: 16px; }
}

.pin-gate { max-width: 360px; margin: 12vh auto; text-align: center; padding: 0 16px; }
.pin-gate input {
  display: block; width: 100%; box-sizing: border-box;
  min-height: 36px; height: 36px; padding: 0 14px;
  border-radius: 6px; border: 1px solid var(--line);
  background: var(--page); color: var(--text);
  text-align: center; font-size: 18px; letter-spacing: .3em;
}
.pin-err { color: var(--danger); font-size: 13px; font-weight: 700; margin: 0 0 12px; min-height: 1.2em; }
.pin-label { display: block; font-size: 11px; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; color: var(--t3); margin-bottom: 6px; }
.pin-gate .btn.primary {
  width: 100%; min-height: 36px; height: 36px; margin-top: 4px; border-radius: 6px;
  background: var(--gold); color: var(--gold-ink); border-color: var(--gold-edge);
}
.pin-gate .btn.primary:hover { background: var(--dp2-action-hover); }

.wb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
/* --line border: the dp2 card border is transparent on dark, and a field needs an edge. */
.wb-head input { border: 1px solid var(--line); border-radius: 6px; padding: 0 12px; height: 36px; background: var(--page); color: var(--text); font: inherit; min-width: 260px; }
/* Border on click; the focus ring stays for keyboard. */
.wb-head input:focus { border-color: transparent; box-shadow: var(--dp5-focus); }
.wb-head input:focus:not(:focus-visible) { outline: none; }
.wb-row .tname { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.wb-parent { color: var(--sub); font-weight: 500; font-size: 12.5px; }
.wb-next { color: var(--green-dark); font-weight: 700; }
.chip.prog { background: var(--dp2-action); color: var(--dp2-action-ink); }
.wb-link { font-size: 13px; font-weight: 500; color: var(--green-dark); text-decoration: none; border: 1px solid var(--line); border-radius: var(--dp2-r-inner); padding: 0 12px; background: var(--card); }
.wb-link:hover { border-color: var(--green); }
.wb-log { padding: 8px 14px; letter-spacing: .06em; }
.wb-more { display: block; margin: 10px auto 18px; background: var(--card); border: 1px solid var(--line); color: var(--text); font-family: Inter, system-ui, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; border-radius: 6px; padding: 0 12px; height: 36px; cursor: pointer; }
.wb-more:hover { border-color: var(--green); color: var(--green-dark); }
@media (max-width: 640px) { .wb-head input { min-width: 0; flex: 1; } }

.ui-empty { text-align: center; padding: 28px 16px; }
.ui-empty h3 { font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 500; letter-spacing: -.01em; text-transform: none; color: var(--text); }
.ui-empty p { font-size: 13.5px; color: var(--sub); margin-top: 6px; max-width: 46ch; margin-left: auto; margin-right: auto; }

.boot-fail { max-width: 460px; margin: 48px auto; text-align: center; padding: 0 16px; }
.boot-fail h2 { font-family: var(--dp3-font-display); font-size: 22px; margin-bottom: 8px; }
.boot-fail p { color: var(--sub); font-size: 14px; margin-bottom: 14px; }
.boot-fail-queued { color: var(--green); font-weight: 600; }
.boot-fail-hint { font-size: 12.5px; color: var(--muted); margin-top: 18px; }
.boot-fail-hint a { color: var(--green); }

.more-views { display: flex; gap: 8px; margin: 4px 0 14px; flex-wrap: wrap; }
.more-views button { border: 1px solid var(--line); background: transparent; color: var(--t2); border-radius: 6px; padding: 0 12px; height: 36px; font-weight: 500; font-size: 13px; cursor: pointer; }
.more-views button:hover { border-color: var(--green); color: var(--green-dark); }
.more-views button.is-here { background: var(--dp2-action); border-color: var(--dp2-action); color: var(--dp2-action-ink); cursor: default; }
.more-views button.is-here:hover { color: var(--dp2-action-ink); }

.install-wrap { max-width: 1180px; margin: 12px auto 0; padding: 0 20px; }
.install-card { position: relative; display: flex; align-items: flex-start; gap: 14px; background: var(--card); border: 1px solid var(--dp2-card-border-c); border-left: var(--dp2-rail) solid var(--dp2-action); border-radius: var(--dp2-r-card); padding: 14px 46px 14px 16px; box-shadow: var(--shadow); }
/* display:flex would otherwise beat the UA's [hidden] rule. */
.install-card[hidden], #install-android[hidden], #install-ios[hidden] { display: none; }
.install-crest { height: 36px; margin-top: 1px; }
.install-main { flex: 1; min-width: 0; }
.install-h { font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 500; letter-spacing: -.01em; text-transform: none; }
.install-p { font-size: 12.5px; color: var(--sub); margin-top: 3px; max-width: 62ch; }
.install-go { margin-top: 11px; }
.install-steps { list-style: none; padding: 0; margin: 11px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.install-steps li { display: flex; align-items: center; gap: 7px; background: var(--well); border-radius: var(--dp2-r-inner); padding: 8px 12px; font-size: 12.5px; color: var(--sub); }
.install-steps strong { color: var(--text); }
.install-ic { display: inline-flex; color: var(--green-dark); }
.install-ic svg { width: 17px; height: 17px; display: block; }
.install-close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--dp2-r-inner); background: none; font-size: 16px; line-height: 1; color: var(--muted); }
.install-close:hover { background: var(--well); color: var(--text); }
@media (max-width: 719px) {
  .install-wrap { padding: 0 10px; }
  .install-steps { flex-direction: column; }
}
.dg-opts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.dg-opt { background: transparent; border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 0 12px; height: 36px; font-family: Inter, system-ui, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0; cursor: pointer; }
.dg-opt:hover { border-color: var(--green); }
.dg-opt.on { background: var(--dp2-action); border-color: var(--dp2-action); color: var(--dp2-action-ink); }

.one-thing { border-left: var(--dp2-rail) solid var(--warn); }

/* Last in the file on purpose: these selectors are no more specific than the rules they cancel. */
@media (prefers-reduced-motion: reduce) {
  .skel, .toast { animation: none; }
}

/* Touch-target floor, coarse pointers only: heights and padding, never colour or font. */
@media (pointer: coarse) {
  .wb-link,
  .wb-row .dp2-btn,
  .pchip,
  .jumpview {
    min-height: var(--dp-btn-h-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .filters input,
  .filters select,
  .wb-head input { min-height: var(--dp-btn-h-sm); }
}

@media (pointer: coarse) {
  .cal-nav { min-height: var(--dp-btn-h-sm); padding-inline: 14px; }
  .more-fields > summary { min-height: var(--dp-btn-h-sm); }
}
.day[data-day] { cursor: pointer; }

/* Calendar split: from 1440px the month grid takes ~62% and the chosen day's agenda ~38% in a sticky
   column, 1080px at most. Below 1440 the agenda stays under the grid. */
.cal-page { max-width: 1080px; margin-inline: auto; }
@media (min-width: 1440px) {
  .cal-split { display: grid; grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); column-gap: 24px; align-items: start; }
  .cal-side { position: sticky; top: 92px; max-height: calc(100vh - 108px); overflow-y: auto; padding: 0 2px 8px; }
  .cal-side .cal-agenda-h { margin-top: 6px; }
}
.who select { min-height: 36px; }
:is(.modal) :is(input, select) { height: 44px; }
/* Inline role visibility must also yield to the sign-in screen. */
body.gated :is(.sync, #who-wrap, #tabs, #fab, .install-wrap) { display: none !important; }
.chart-scroll { overflow-x: auto; }
.chart-scroll svg { display: block; min-width: 480px; max-width: 720px; }
/* Phones: line charts (8-week execution, Trends) fit every week in the card instead of scrolling the first ones off;
   the labels are restated in viewBox units so they still read at about 10px once the chart scales down. */
@media (max-width: 719px) {
  .chart-scroll.chart-end svg { min-width: 0; width: 100%; }
  .chart-scroll.chart-end svg text { font-size: 18px; }
}
@media (max-width: 719px) {
  #toast-root { bottom: calc(150px + env(safe-area-inset-bottom)); }
}
@media (pointer: coarse) {
  .who select, .toast-undo, .dg-opt, .cal-nav, .ms-done, .wb-link {
    min-height: 44px; min-width: 44px;
  }
}
@supports (appearance: base-select) {
  select, select::picker(select) { appearance: base-select; }
  select::picker(select) { border-radius: var(--dp3-r-sm); background: var(--card); color: var(--text); border: 1px solid var(--line); overflow: auto; }
  select option { padding: 8px 10px; }
  select option:checked { background: var(--dp2-action); color: var(--dp2-action-ink); }
  select option:hover, select option:focus-visible { background: var(--well); color: var(--text); }
}

/* Native editor controls reuse task rows, modal fields and roster chips. */
#tabs button[hidden] { display: none; }
.editor-fields { border: 0; padding: 0; min-width: 0; }
/* No bottom margin: the next field's label brings the standard 12px gap (4px 12px doubled it under Owners). */
.editor-chips { flex-wrap: wrap; margin-block: 4px 0; }
.subitem-done .tname { text-decoration: line-through; color: var(--muted); }
.editor-fields:disabled, .modal button:disabled { cursor: default; opacity: .65; }
#pe-tasks .task { flex-wrap: wrap; }
#pe-tasks .tmain { min-width: 160px; }

/* Nav: five icon tabs in the Health Hub island . */
.dp2-nav { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); padding: 7px 6px; gap: 0;
  justify-content: space-around; border-radius: var(--dp3-r-xl, 22px); box-shadow: none;
  background: var(--card); background: color-mix(in srgb, var(--card) 94%, transparent); border: 1px solid var(--line); }
.dp2-nav.has-fab { right: 12px; }
.dp2-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 0; min-height: 32px; padding: 0 8px; font-family: Inter, system-ui, sans-serif; font-weight: 500; font-size: 13px;
  letter-spacing: -.01em; text-transform: none; color: var(--t2); transition: color .15s; }
.dp2-nav button:hover { color: var(--dp3-link, var(--green)); }
.dp2-nav button.active { color: var(--dp3-electric, var(--dp2-nav-active)); }
.tab-ic { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 720px) {
  .dp2-nav { left: 50%; right: auto; gap: 14px; padding: 7px 18px; }
  .dp2-nav button { min-width: 72px; }
}
/* The FAB sits above the island on phones (it used to squeeze the tabs); no green glow on persistent chrome. */
#fab { box-shadow: 0 6px 18px transparent; }
@media (max-width: 719px) {
  #fab { bottom: calc(84px + env(safe-area-inset-bottom)); right: calc(16px + env(safe-area-inset-right)); }
  main { margin-bottom: calc(160px + env(safe-area-inset-bottom)); }
}

/* Plan switch: the Health Hub segmented control (.lane-seg). */
.more-views.seg { display: flex; flex-wrap: nowrap; gap: 2px; max-width: 460px; background: var(--page); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px; margin: 2px 0 14px; }
.more-views.seg button { flex: 1; min-width: 0; border: 0; border-radius: 4px; background: none;
  color: var(--t2); min-height: 32px; height: 32px; padding: 0 12px; font-weight: 500; font-size: 13px; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.more-views.seg button:hover:not(.is-here) { color: var(--dp3-link, var(--green)); border-color: transparent; }
.more-views.seg button.is-here { background: var(--dp2-action); color: var(--dp2-action-ink); border-color: var(--dp2-action); cursor: default; }
@media (pointer: coarse) { .more-views.seg button { min-height: 44px; } }

/* ============================================================================================================
   Metrics sheets (targets, rocks, the weekly log). Status is the chip's dot + word; a hollow dot means "not graded".
   ============================================================================================================ */
.kpi-line { font-size: 12.5px; color: var(--dp3-text-2, var(--sub)); margin-top: 6px; }
.kpi-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; white-space: nowrap;
  border-radius: 4px; padding: 0 6px; height: 18px; color: var(--t2); background: color-mix(in srgb, currentColor 12%, transparent); border: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.kpi-chip i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.kpi-chip.g-on_pace, .kpi-chip.g-reached { color: var(--dp3-ok, var(--green)); }
.kpi-chip.g-close { color: var(--dp3-warn, var(--warn)); }
.kpi-chip.g-behind { color: var(--danger); }
.kpi-chip:is(.g-too_early, .g-no_target, .g-no_data, .g-stale, .g-none) i { background: transparent; border: 1.5px solid currentColor; }
.kpi-why { font-size: 13px; line-height: 1.45; color: var(--dp3-text-2, var(--sub)); margin: 10px 0 0; }

/* Targets sheet: rows grouped by metric; the owner's rows carry inputs, an admin's are read-only text. */
.modal.kt-sheet { width: min(640px, 100%); }
.kt-group { margin-top: 18px; }
.kt-h { font-family: Inter, system-ui, sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--text); margin: 0 0 4px; }
.kt-row { border-top: 1px solid var(--line); padding: 12px 0; }
.kt-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.kt-period { font-size: 15px; color: var(--text); }
.kt-kind { font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--t3); }
.kt-top .kpi-chip { margin-left: auto; }
.kt-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 10px; }
.modal .kt-fields label { margin: 10px 0 4px; }
.kt-acts { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kt-acts .btn { min-height: 36px; }
.kt-read { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 6px; }
.kt-val { font-family: var(--dp3-font-display); font-weight: 600; font-size: 20px; color: var(--text); }
.kt-note { font-size: 13px; color: var(--dp3-text-2, var(--sub)); }
.kt-hint { font-size: 12.5px; color: var(--dp3-text-3, var(--muted)); margin: 10px 0 0; }
@media (max-width: 480px) {
  .kt-fields { grid-template-columns: 1fr; }
  .kt-acts .btn { flex: 1 1 auto; }
}

/* Editor and due chips are form choices, not list filters, so they do not take the kit's green tint. */
.editor-chips .dp5-fchip.is-on,
.editor-chips .dp5-fchip[aria-pressed="true"],
.due-chips .dp5-fchip.is-on,
.due-chips .dp5-fchip[aria-pressed="true"] {
  background: var(--dp5-raised);
  color: var(--dp5-text);
  border-color: var(--dp5-line-strong);
}

/* Sheets: a scrim that owns the screen, a 44px close, 48px fields on the 3:1 edge, and a save bar that stays in view. */
.overlay { background: var(--ops-scrim); }
.mclose { width: 44px; height: 44px; top: 6px; right: 6px; font-size: 20px; }
.modal input:not([type="checkbox"]):not([type="radio"]), .modal select, .modal textarea { background: var(--card-2, var(--dp3-card-2, var(--well)));
  border: 1.5px solid var(--dp3-line-strong, var(--line)); border-radius: var(--dp3-r-field, 8px); font-size: 16px; }
.modal input:not([type="checkbox"]):not([type="radio"]), .modal select { min-height: 36px; height: 36px; }
.modal input:focus-visible, .modal select:focus-visible, .modal textarea:focus-visible { outline: none; box-shadow: var(--dp5-focus); border-color: transparent; }
:is(#te-form, #pe-fields, #se-fields) > .mact { position: sticky; bottom: calc(-1 * var(--mpad-y)); z-index: 2; background: var(--card);
  margin: 16px calc(-1 * var(--mpad-x)) calc(-1 * var(--mpad-y)); padding: 12px var(--mpad-x) max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.more-fields { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 4px; }
.more-fields > summary { list-style: none; cursor: pointer; min-height: 36px; display: flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--t2); }
.more-fields > summary::-webkit-details-marker { display: none; }
.more-fields > summary::after { content: "\25be"; margin-left: auto; transition: transform .15s; }
.more-fields[open] > summary::after { transform: rotate(180deg); }
.due-chips { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.due-chips .pchip { padding: 7px 14px; }

/* Empty is a designed card, not a stray paragraph. */
.section-title + .empty { background: var(--card); border: 1px solid var(--line); border-radius: var(--dp3-r-lg); padding: 16px 14px; text-align: center; color: var(--dp3-text-2, var(--sub)); }

/* Desktop: list views keep a phone-width column instead of stretching rows across 1180px. All tasks is capped only
   when it shows task rows (touch); its eight-column table keeps Calendar and Season's width, so the Plan switch holds still. */
@media (min-width: 720px) {
  #view:is([data-v="mine"], [data-v="today"], [data-v="projects"]) { width: 100%; max-width: 760px; margin-inline: auto; }
  /* width: 100%: auto margins with no width let the view shrink to its content, and on a touch iPad the
     All tasks cards collapsed into a 32px column. The 760 cap still holds. */
}

/* Header avatar: initials in the Health Hub avatar ring instead of a hamburger. */
#menu-btn.avatar-btn { width: 20px; height: 20px; border-radius: 10px; padding: 0; font-family: Inter, system-ui, sans-serif; font-weight: 500; font-size: 9px;
  letter-spacing: .04em; background: var(--ops-status-good-wash); background: color-mix(in srgb, var(--dp3-electric) 10%, transparent); border: 1.5px solid var(--dp3-accent, var(--green)); color: var(--dp3-link, var(--green)); }
/* A key with no name wears the Account sheet's person icon in the same ring. */
#menu-btn .acct-ic { width: 20px; height: 20px; stroke: currentColor; }
#menu-btn.avatar-btn:hover { border-color: var(--dp3-link, var(--green)); }

/* Season digest grouped by event. */
.ms-group { background: var(--card); border: 1px solid var(--line); border-left: var(--dp2-rail) solid transparent; border-radius: var(--dp3-r-lg); margin-bottom: 8px; }
.ms-group.late { border-left-color: var(--danger); }
.ms-group > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 52px; cursor: pointer; font-size: 13px; }
.ms-group > summary::-webkit-details-marker { display: none; }
.ms-group > summary::after { content: "\25be"; color: var(--sub); transition: transform .15s; }
.ms-group[open] > summary::after { transform: rotate(180deg); }
.ms-group > summary .ms-ev { display: flex; flex-direction: column; gap: 2px; }
.ms-group > .ms-row { margin: 0 8px 8px; box-shadow: none; }
.ms-group .ms-due-l { display: block; font-family: Inter, system-ui, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--t3); line-height: 1.2; }
.section-title .ms-clear { margin-left: auto; }

/* A scrim over a near-black page dims nothing; blur separates the sheet instead. The FAB never sits over a sheet. */
.overlay { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
body:has(#modal-root .overlay) #fab { display: none !important; }

/* ============================================================================================================
   Desktop header. From 720px, the island's own desktop breakpoint (brand v2 and the
   parity block above), the five tabs leave the floating island and sit in the top bar: crest, screen title, tabs,
   then the Offline chip (when offline) and the avatar. Sync, notifications and Sign out live on the Account sheet. Same <nav id="tabs">, so paintNav(), tabsFade() and .has-fab work unchanged; phones
   keep the island. The right column never shrinks below its content (minmax(max-content, 1fr)): the tabs stay
   centred while there is room and the title gives way first.
   ============================================================================================================ */
@media (min-width: 720px) {
  /* Pinned, so the tabs, Sync and the avatar stay in reach down a long Season or All tasks page (the island was fixed).
     Only from 720px: below it position + z-index here would wrap the fixed phone island in a stacking context. */
  .topbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(max-content, 1fr); align-items: center;
    column-gap: 16px; row-gap: 8px; padding-bottom: 8px; position: sticky; top: 0; z-index: 45; background: var(--surface); }
  html { scroll-padding-top: 96px; }
  .brand { grid-column: 1; grid-row: 1; }
  .screen-id { grid-column: 2; grid-row: 1; }
  .sync { grid-column: 4; grid-row: 1; justify-self: end; }
  .who { grid-column: 1 / -1; grid-row: 2; justify-self: end; }
  .dp2-nav { grid-column: 3; grid-row: 1; position: static; inset: auto; transform: none; z-index: auto; width: auto; max-width: none;
    gap: 2px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dp2-nav button { min-width: 66px; min-height: 52px; padding: 5px 8px; border-radius: var(--dp3-r-md); }
  /* Selected = the island's electric ink, plus a faint electric well so the state is a shape, not only a colour. */
  .dp2-nav button.active { background: color-mix(in srgb, var(--dp3-electric) 10%, transparent); }
  /* No island to clear. main (96px bottom) and #fab (24px from the corner) take their desktop values from their base rules. */
  #toast-root { bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* Account sheet. */
.modal.acct-sheet { width: min(440px, 100%); --mpad-x: 16px; }
.acct-id { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.acct-disc { flex: none; width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; font-family: Inter, system-ui, sans-serif;
  font-weight: 600; font-size: 15px; letter-spacing: .04em; background: var(--ops-status-good-wash); background: color-mix(in srgb, var(--dp3-electric) 10%, transparent); border: 1.5px solid var(--dp3-accent, var(--green)); color: var(--dp3-link, var(--green)); }
.acct-disc .acct-ic { width: 22px; height: 22px; stroke: currentColor; }
.acct-id .n { flex: 1; min-width: 0; }
.acct-id b { display: block; font-family: var(--dp3-font-display); font-weight: 600; font-size: 17px; letter-spacing: .04em; overflow-wrap: anywhere; }
.acct-id small { display: block; font-size: 12px; color: var(--dp3-text-2, var(--sub)); margin-top: 1px; }
.acct-out { flex: none; }
.acct-rows { margin-top: 2px; }
button.acct-row { appearance: none; width: 100%; display: flex; align-items: center; gap: 13px; min-height: 52px; padding: 12px; margin: 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
button.acct-row:last-child { border-bottom: 0; }
.acct-ic { width: 19px; height: 19px; flex: none; fill: none; stroke: var(--dp3-text-2, var(--sub)); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.acct-row .n { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.acct-row .n small { display: block; font-size: 12px; font-weight: 400; color: var(--dp3-text-2, var(--sub)); margin-top: 1px; }
.acct-row .chev { flex: none; color: var(--dp3-text-3, var(--muted)); }
.acct-act { flex: none; font-size: 13px; font-weight: 500; color: var(--dp3-link, var(--green)); }
button.acct-row:not([disabled]):not([aria-disabled="true"]):hover :is(.n, .chev) { color: var(--dp3-link, var(--green)); }
button.acct-row:not([disabled]):not([aria-disabled="true"]):hover .acct-ic { stroke: var(--dp3-link, var(--green)); }
button.acct-row:focus-visible { outline: none; border-radius: 8px; box-shadow: var(--dp5-focus); }
/* Unsupported: plain words at text-3, not the sheet's 65% disabled fade (that would drop it under AA). */
.modal button.acct-row[disabled] { opacity: 1; cursor: default; }
button.acct-row[disabled] .n { color: var(--dp3-text-3, var(--muted)); }
button.acct-row[aria-disabled="true"] { cursor: progress; }
button.acct-row[data-syncing] .acct-ic { animation: dp-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { button.acct-row[data-syncing] .acct-ic { animation: none; } }

/* Today week strip.
   Status, not a control: list items with no hover or pointer. Today wears the accent ring, days to come fade. */
.wd { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 64px; padding: 6px 0 7px;
  background: var(--card); border: 1.5px solid transparent; border-radius: var(--dp3-r-md); }
.wd .l { font-weight: 700; font-size: 11px; letter-spacing: .08em; line-height: 1.2; color: var(--dp3-text-2, var(--sub)); }
.wd .n { font-family: var(--dp3-font-display); font-weight: 600; font-size: 16px; line-height: 1.1; color: var(--text); }
.wd .p { font-size: 12px; font-weight: 700; line-height: 1.2; min-height: 1.2em; color: var(--text); white-space: nowrap; }
.wd .p small { font-size: 9px; font-weight: 600; margin-left: 2px; color: var(--dp3-text-2, var(--sub)); }
.wd.zero .p, .wd.zero .p small { color: var(--dp3-text-3, var(--muted)); font-weight: 600; }
/* Days to come recede with tokens, not opacity (45% dropped the letters to ~2.5:1): text-3 ink on a half-card well. */
.wd.future { background: color-mix(in srgb, var(--card) 50%, transparent); }
.wd.future :is(.l, .n) { color: var(--dp3-text-3, var(--muted)); }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 720px) {
  .wd { min-height: 72px; padding: 8px 0 9px; }
  .wd .n { font-size: 18px; }
  .wd .p { font-size: 13px; }
  .wd .p small { font-size: 10px; }
}

/* ============================================================================================================
   Plan + sheets: Season head, runway cells and phase rows on phones,
   44px sheet chips on touch, the due chips' hidden date field.
   ============================================================================================================ */
/* Season head: one late number (the same one Clear late acts on), upcoming as a mute hint; wraps rather than squeezes. */
.section-title.ms-head { flex-wrap: wrap; row-gap: 6px; }
.rw-cell-note, .rw-cells { display: none; }
@media (max-width: 719px) {
  /* Title, late count and Clear late share the first line; the upcoming hint takes the second. */
  .ms-head .ms-clear { order: 2; }
  .ms-head .hint { order: 3; flex-basis: 100%; }
  .runway-card .rw-cell-note { display: block; }
  .rw-cells { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .rw-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 72px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--dp3-r-md); }
  .rw-m { font-family: Inter, system-ui, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: -.01em; text-transform: none; color: var(--text); }
  .rw-n { font-size: 12px; color: var(--dp3-text-2, var(--sub)); }
  .rw-st { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--dp3-text-2, var(--sub)); white-space: nowrap; }
  .rw-st::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--dp3-ok, var(--green)); }
  .rw-cell.late .rw-st { color: var(--danger); }
  .rw-cell.late .rw-st::before { background: var(--danger); }
  .rw-cell.open .rw-st::before { background: var(--warn); }
  .rw-cell.none .rw-m, .rw-cell.none .rw-n { color: var(--dp3-text-3, var(--muted)); }
}

/* Sheet chips (Who, Owners, Category, Due): the kit's 44px touch floor. Restated here because the parity block's
   40px .pchip floor comes later in the file than the coarse-pointer block. */
@media (pointer: coarse) {
  .pchip { min-height: var(--dp-btn-h-sm, 44px); }
}
#te-due[hidden] { display: none; }
.kpi-line.is-bad { color: var(--danger); font-weight: 600; }

/* ---- Rocks: one line per rock, a thin bar, the status as a word ---- */
.rk-wrap { margin-top: 20px; }
.rk-card .section-title { margin: 0 0 4px; }
.rk-card .section-title .rk-add { margin-left: auto; min-height: 32px; }
.rk-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) 74px minmax(0, 1.4fr) 82px;
  align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 4px; border: 0; border-bottom: 1px solid var(--line);
  background: none; border-radius: 4px; font-size: 13.5px; color: var(--text); }
.rk-row:last-child { border-bottom: 0; }
.rk-row:hover { background: var(--well, var(--raised)); }
.rk-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-owner, .rk-due { color: var(--dp3-text-2, var(--sub)); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-prog { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rk-frac { font-size: 12px; color: var(--dp3-text-2, var(--sub)); font-variant-numeric: tabular-nums; }
.rk-bar { position: relative; height: 4px; border-radius: 2px; background: var(--raised); overflow: hidden; }
.rk-bar i { display: block; height: 100%; border-radius: 2px; background: var(--t3); }
.rk-bar i.s-on_track, .rk-bar i.s-done { background: var(--dp3-ok, var(--green)); }
.rk-bar i.s-behind { background: var(--dp3-warn, var(--warn)); }
.rk-bar i.s-at_risk { background: var(--danger); }
@media (max-width: 899px) {
  .rk-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name word" "meta prog"; row-gap: 6px; }
  .rk-name { grid-area: name; white-space: normal; }
  .rk-owner { grid-area: meta; }
  .rk-due { display: none; }
  .rk-prog { grid-area: prog; }
}

/* ---- the log sheet and the rock editor ---- */
.lg-form, .rk-form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.lg-f, .rk-f { display: flex; flex-direction: column; gap: 5px; }
.lg-f label, .rk-f label { font-size: 12px; font-weight: 500; color: var(--dp3-text-2, var(--sub)); }
.lg-acts, .rk-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.rk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rk-hint { font-size: 12.5px; color: var(--dp3-text-3, var(--muted)); margin: 0; }
.lg-hist { display: flex; flex-direction: column; margin-top: 8px; }
.lg-row { display: grid; grid-template-columns: 150px 52px minmax(0, 1fr) 56px; align-items: baseline; gap: 10px;
  padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 13px; }
.lg-row:last-child { border-bottom: 0; }
.lg-row.is-now .lg-wk { font-weight: 600; color: var(--text); }
.lg-wk { color: var(--dp3-text-2, var(--sub)); }
.lg-v { font-size: 15px; font-weight: 600; color: var(--text); }
.lg-n { color: var(--dp3-text-2, var(--sub)); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-by { color: var(--dp3-text-3, var(--muted)); font-size: 12px; text-align: right; }
/* A history row is a button: click loads that week into the form. Selected row reads as the one being edited. */
button.lg-row { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); color: inherit; font: inherit; cursor: pointer; border-radius: 0; }
button.lg-row:last-child { border-bottom: 0; }
button.lg-row:hover { background: var(--well, var(--raised)); }
.lg-row.is-sel { box-shadow: inset 2px 0 0 var(--green); background: var(--well, var(--raised)); }
.lg-acts .btn { min-height: 36px; }
.lg-f select { min-height: 40px; }
/* Add-a-target form: metric, period kind, period key, value in one grid. */
.kt-add-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.kt-add-grid select, .kt-add-grid input { width: 100%; min-height: 40px; }
.kt-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.kt-fixed { min-height: 40px; display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--dp3-r-sm); color: var(--dp3-text-2, var(--sub)); font-size: 13.5px; }
@media (max-width: 719px) { .kt-add-grid { grid-template-columns: 1fr; } }
/* Comment remove: owner/admin only, sits at the end of the meta line. */
.comment .c-meta { display: flex; align-items: center; gap: 8px; }
.comment .c-del { margin-left: auto; padding: 4px 6px; }
.comment .c-del svg { width: 14px; height: 14px; }
@media (max-width: 719px) {
  .rk-grid { grid-template-columns: minmax(0, 1fr); }
  .lg-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "wk v" "n by"; row-gap: 3px; }
  .lg-wk { grid-area: wk; } .lg-v { grid-area: v; text-align: right; } .lg-n { grid-area: n; white-space: normal; } .lg-by { grid-area: by; }
}

/* Dark overlay. Loaded after style.css.
   Does not edit brand/. Kit variables are re-pointed in style.css :root. */

html.dpt-dark, body.dpt-dark, .dpt-dark {
  background: var(--page);
  color: var(--t1);
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -.01em;
}
body {
  font-family: Inter, system-ui, sans-serif;
  background: var(--page);
  color: var(--t1);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: stretch;
}
h2, .section-title, .cal-head h2 {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -.01em;
  text-transform: none;
}

/* ---- shell: 244px sidebar + inset panel ---- */
.topbar {
  width: 244px;
  flex: none;
  height: 100vh;
  height: 100dvh;
  position: sticky;
  top: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px;
  margin: 0;
  max-width: none;
  background: var(--page);
  color: var(--t1);
  flex-wrap: nowrap;
  overflow: hidden;
}
.brand {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  margin-bottom: 6px;
  flex: none;
}
.crest { height: 20px; width: 20px; object-fit: contain; border-radius: 4px; }
.ws-name { font-size: 13px; font-weight: 500; color: var(--t1); letter-spacing: -.01em; white-space: nowrap; }

.shell {
  flex: 1;
  min-width: 0;
  margin: 8px 8px 8px 0;
  background: var(--panel);
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hdr {
  height: 48px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}
.screen-id { flex: 1; min-width: 0; }
.screen-title {
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-transform: none;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.screen-sub {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--t2);
  margin-top: 0;
}
main {
  flex: 1;
  min-height: 0;
  overflow: auto;
  max-width: none;
  margin: 0;
  padding: 8px 16px 16px;
}
.install-wrap { max-width: none; margin: 0; padding: 8px 16px 0; }

/* ---- nav: sidebar items, never a bottom island ---- */
header.topbar nav.dp2-nav,
body > .topbar .dp2-nav {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  left: auto; right: auto; bottom: auto;
  width: auto;
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 1px;
  padding: 0 !important;
  margin: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  -webkit-mask-image: none;
  mask-image: none;
  overflow: visible;
}
header.topbar nav.dp2-nav.has-fab { right: auto; }
header.topbar nav.dp2-nav a,
header.topbar nav.dp2-nav button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: 32px;
  min-height: 32px;
  min-width: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--t2);
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-transform: none;
  white-space: nowrap;
}
header.topbar nav.dp2-nav button:hover {
  background: var(--panel);
  color: var(--t1);
  transform: none;
}
header.topbar nav.dp2-nav button.active {
  background: var(--panel);
  color: var(--t1);
}
.tab-ic { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; }

.sync {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  height: 32px;
  font-size: 12px;
  color: var(--t2);
}
.who {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  height: 32px;
  font-size: 12px;
  color: var(--t2);
}
.who label { font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--t3); }
.who select {
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--dp5-line-strong);
  background: var(--page);
  color: var(--t1);
  font: 500 13px/20px Inter, system-ui, sans-serif;
}

#menu-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--t2);
  box-shadow: inset 0 1px 0 var(--ops-hover-wash);
}
#menu-btn:hover { color: var(--t1); border-color: var(--line2); background: var(--raised); }
#menu-btn.avatar-btn {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border-radius: 10px;
  padding: 0;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0;
  background: var(--green-soft);
  border: 0;
  color: var(--green);
  box-shadow: none;
}
#menu-btn.avatar-btn:hover { border-color: transparent; }

.net-chip {
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  background: var(--warn-wash);
  color: var(--warn);
  border: 0;
}

/* 48px icon rail at 769–1439px. Labels stay clipped (not display:none) so the
   aria-hidden icon is not the button's accessible name. Phone (<=768) is a
   bottom tab bar further down; do not apply the rail there. */
@media (min-width: 769px) and (max-width: 1439px) {
  .topbar { width: 48px; padding: 8px 6px; }
  .brand { justify-content: center; padding: 0; }
  .ws-name { display: none; }
  /* Clip, don't display:none: the icon is aria-hidden, so the span is the button's name. */
  header.topbar nav.dp2-nav button span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .who { display: flex; width: 36px; padding: 0; overflow: hidden; }
  .who label { display: none; }
  .who select { width: 36px; padding: 0 2px; font-size: 10px; }
  header.topbar nav.dp2-nav button,
  .sync {
    justify-content: center;
    padding: 0;
  }
  header.topbar nav.dp2-nav button { position: relative; }
  .crest { margin: 0 auto; }
  .sync { padding: 0; height: 32px; justify-content: center; }
}

/* ---- type: overlines vs sentence case ---- */
.section-title,
.kt-h,
.ui-empty h3,
.boot-fail h2,
.install-h,
.cal-head h2,
.rw-m {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -.01em;
}
.section-title {
  font-size: 12px;
  line-height: 16px;
  color: var(--t2);
  letter-spacing: 0;
  margin: 16px 16px 0;
  height: 28px;
  font-weight: 500;
}
.screen-title, .ui-empty h3, .boot-fail h2 { font-size: 16px; line-height: 24px; }

/* 11px overlines — the only uppercase allowed */
.dow,
table.all th,
.pin-label,
.ms-group .ms-due-l,
.kt-kind,
.who label {
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--t3);
}

.ms-phase,
.more-fields > summary,
.kpi-chip,
.sc-count {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

/* ---- buttons: 36px mouse / 44px coarse, r 6, sentence case, inset highlight ---- */
.btn,
.dp2-btn,
.dp3-btn,
.iconbtn,
.cal-nav,
.dg-opt,
.wb-more,
.wb-link,
.toast-undo,
.ms-add,
.ms-done,
.ms-clear,
.install-go,
.more-views button,
.acct-out,
.acct-act,
.jumpview {
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--t1);
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 var(--ops-hover-wash);
}
.btn:hover,
.dp2-btn:hover,
.dp3-btn:hover,
.iconbtn:hover,
.cal-nav:hover,
.dg-opt:hover,
.wb-more:hover,
.wb-link:hover,
.more-views button:hover {
  transform: none;
  background: var(--ops-hover-wash);
  border-color: var(--line2);
  color: var(--t1);
}
.btn.primary,
.pin-gate .btn.primary,
.install-go,
.dp2-btn.install-go {
  background: var(--gold);
  border-color: var(--gold-edge);
  color: var(--gold-ink);
}
.btn.primary:hover,
.pin-gate .btn.primary:hover,
.install-go:hover {
  background: var(--ops-accent-primary-hover);
  color: var(--gold-ink);
  border-color: var(--gold-edge);
}
.btn.ghost,
.dp3-btn--ghost,
.dp2-btn {
  background: transparent;
  border-color: var(--line);
  color: var(--t1);
  box-shadow: inset 0 1px 0 var(--ops-hover-wash);
}
.btn.quiet,
.dp3-btn--ghost.acct-out {
  border-color: transparent;
  box-shadow: none;
  color: var(--t2);
}
.iconbtn {
  width: 36px;
  min-width: 36px;
  padding: 0;
}
.mclose {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  top: 6px;
  right: 8px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--t3);
}
.install-close {
  width: 36px;
  height: 36px;
  border-radius: 6px;
}

#fab {
  position: fixed;
  top: 18px;
  right: 24px;
  bottom: auto;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid var(--gold-edge);
  background: var(--gold);
  color: var(--gold-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  box-shadow: inset 0 1px 0 var(--ops-hover-wash);
  z-index: 50;
}
#fab:hover { background: var(--ops-accent-primary-hover); transform: none; }

/* Mouse chassis is 36px (32px on small / segments). Coarse and phone are a 44px
   floor: grow the control, and keep the 44px overlay for anything that cannot.
   Inputs/selects cannot host ::before, so they grow to 44px. Never size below 44
   inside this block. */
@media (pointer: coarse), (max-width: 768px) {
  .btn, .dp2-btn, .dp3-btn, .iconbtn, .cal-nav, .dg-opt, .wb-more,
  .wb-link, .toast-undo, .ms-add, .ms-done, .ms-clear, .more-views button, .kt-acts .btn,
  .season-card .sc-edit, #pe-tasks .iconbtn,
  .pin-gate .btn.primary,
  .install-go, .acct-out, .acct-act, .jumpview,
  .more-fields > summary, .stale-strip .stale-x {
    position: relative;
    height: 44px;
    min-height: 44px;
  }
  .iconbtn, .mclose, .install-close, #fab, #menu-btn:not(.avatar-btn),
  #pe-tasks .iconbtn, .stale-strip .stale-x {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
  .btn::before, .dp2-btn::before, .dp3-btn::before, .iconbtn::before, .cal-nav::before,
  .dg-opt::before, .wb-more::before,
  .wb-link::before, .toast-undo::before, .ms-add::before, .ms-done::before,
  .ms-clear::before, .more-views button::before, .kt-acts .btn::before,
  .season-card .sc-edit::before, #pe-tasks .iconbtn::before,
  .pin-gate .btn.primary::before,
  .mclose::before, #fab::before, #menu-btn:not(.avatar-btn)::before,
  .install-close::before, .install-go::before, .acct-out::before, .acct-act::before, .jumpview::before,
  .more-fields > summary::before, .stale-strip .stale-x::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
  .check:not(.ro)::after {
    width: 44px;
    height: 44px;
  }
}
@media (pointer: coarse), (max-width: 768px) {
  .who select, .filters input, .filters select, .wb-head input,
  .modal input:not([type="checkbox"]):not([type="radio"]), .modal select, .pin-gate input {
    min-height: 44px;
    height: 44px;
    min-width: 44px;
  }
}

/* ---- chips 18×4, segments 6/4 ---- */
.chip, .kpi-chip, .sc-count,
.section-title .count, .net-chip {
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dg-opt.on, .more-views button.is-here {
  background: var(--raised);
  border-color: var(--line2);
  color: var(--t1);
}
.more-views.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
  background: var(--page);
  max-width: none;
}
.more-views.seg button {
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 4px;
  border: 0;
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 13px;
  color: var(--t2);
}
.more-views.seg button.is-here {
  background: var(--raised);
  color: var(--t1);
  box-shadow: none;
  border: 0;
}
.more-views.seg button.is-here:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--t1);
}

/* ---- rows 36px, one line, hover = raised ---- */
.task, .ms-row, .rock, .wb-row.task {
  min-height: 36px;
  height: 36px;
  padding: 0 16px;
  margin: 0;
  gap: 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: background .1s;
}
.task:hover, .ms-row:hover, .rock:hover {
  background: var(--raised);
  border-color: transparent;
  transform: none;
}
.task.leaving { transform: none; opacity: 0; }
.tname, .ms-ev {
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -.01em;
}
button.tmain, .task .tmain {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  padding: 0;
}
.tname {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.tmeta {
  margin: 0 0 0 auto;
  font-size: 12px;
  line-height: 16px;
  color: var(--t2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.check {
  width: 16px;
  height: 16px;
  min-width: 16px;
  border-radius: 6px;
  border: 1px solid var(--line2);
}
.check:not(.ro)::after { width: 36px; height: 36px; border-radius: 6px; }
.check svg { width: 10px; height: 10px; transform: none; }
.task.done .check, .check.on {
  background: var(--green);
  border-color: var(--green);
  color: var(--page);
}

/* ---- fields ---- */
.filters select, .filters input, .modal input, .modal textarea, .modal select,
.wb-head input,
:is(.modal) :is(input, select) {
  height: 36px;
  min-height: 36px;
  border-radius: 6px;
  border: 1px solid var(--dp5-line-strong); /* the field's edge (was a #2A2A2A hairline) */
  background: var(--page);
  color: var(--t1);
  font: 400 13px/20px Inter, system-ui, sans-serif;
  padding: 0 12px;
  box-shadow: none;
}
.modal textarea { height: auto; min-height: 70px; padding: 8px; }
.pin-gate input {
  height: 36px;
  min-height: 36px;
  border-radius: 6px;
  border: 1px solid var(--dp5-line-strong);
  background: var(--page);
  font-size: 16px;
}
.modal input:focus-visible,
.modal select:focus-visible,
.modal textarea:focus-visible,
.filters input:focus-visible,
.filters select:focus-visible,
.who select:focus-visible,
.wb-head input:focus-visible,
.pin-gate input:focus-visible {
  outline: none;
  border-color: var(--line2);
  box-shadow: inset 0 0 0 1px var(--line2);
}
button:focus-visible,
.btn:focus-visible,
.dp2-btn:focus-visible,
.dp3-btn:focus-visible,
a:focus-visible,
summary:focus-visible,
#fab:focus-visible,
#menu-btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--line2);
}
.btn.primary:focus-visible,
#fab:focus-visible {
  box-shadow: inset 0 0 0 1px var(--gold-ink);
}

/* ---- dialogs ---- */
.overlay {
  background: var(--ops-scrim);
  padding: 96px 18px 18px;
  place-items: start center;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.modal {
  width: min(480px, 100%);
  background: var(--panel);
  border-radius: 8px;
  border: 0;
  box-shadow: 0 0 0 1px var(--line2), 0 16px 48px var(--ops-shadow-over);
}
.modal h2 {
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-transform: none;
}
.modal.kt-sheet { width: min(640px, 100%); }
.mact {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---- tables, calendar, cards ---- */
table.all {
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}
table.all th {
  height: 28px;
  padding: 0 16px;
  background: transparent;
  border-bottom: 1px solid var(--line);
}
table.all td { padding: 8px 16px; height: 36px; }
table.all tr:hover td { background: var(--raised); }
.day {
  border-radius: 6px;
  background: var(--page);
  border-color: var(--line);
}
.wd { border-radius: 6px; background: var(--page); }
.tile, .goal, .chartcard,
.install-card, .season-card, .ms-group {
  background: var(--cardbg);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: none;
}
.ms-due, .kt-val, .wd .n, .acct-id b {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.acct-disc {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 9px;
  font-weight: 500;
  background: var(--green-soft);
  border: 0;
  color: var(--green);
}
button.acct-row { min-height: 36px; padding: 8px; border-radius: 6px; }
button.acct-row:hover { background: var(--raised); }
button.acct-row:focus-visible { box-shadow: inset 0 0 0 1px var(--line2); }

.toast {
  background: var(--raised);
  color: var(--t1);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 16px 48px var(--ops-shadow-over);
}
#toast-root { bottom: 16px; }

.stale-strip { border-radius: 8px; width: auto; margin: 8px 16px 0; }

.pin-gate { color: var(--t1); }

/* Kit class overrides that still leak through */
.dp3-btn { min-height: 36px; border-radius: 6px; font-weight: 500; text-transform: none; }

@media (min-width: 769px) {
  .topbar {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    position: sticky;
    width: 244px;
    height: 100vh;
    height: 100dvh;
    padding: 8px;
    background: var(--page);
  }
  header.topbar nav.dp2-nav {
    grid-column: auto;
    grid-row: auto;
    position: static;
    width: auto;
    background: transparent;
    border: 0;
    gap: 1px;
    padding: 0;
  }
  header.topbar nav.dp2-nav button {
    min-width: 0;
    min-height: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 6px;
  }
}
@media (min-width: 769px) and (max-width: 1439px) {
  .topbar { width: 48px; padding: 8px 6px; }
}

body.gated .shell { margin: 8px; }
body.gated .topbar { display: flex; }

/* Phone tier (<=768): the rail leaves the layout. Content is full width. Nav is a
   bottom tab bar. Five destinations already, so no More sheet. */
@media (max-width: 768px) {
  body {
    flex-direction: column;
    align-items: stretch;
  }
  .topbar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    position: sticky;
    top: 0;
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
    overflow: visible;
    grid-template-columns: none;
  }
  .brand {
    justify-content: flex-start;
    padding: 0 8px;
    margin-bottom: 0;
    height: 32px;
  }
  .ws-name { display: block; }
  .crest { margin: 0; }
  .sync {
    width: auto;
    height: 32px;
    padding: 0 8px;
    justify-content: flex-end;
  }
  .who {
    width: auto;
    padding: 0 8px;
    overflow: visible;
  }
  .shell {
    flex: 1;
    width: 100%;
    min-width: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
  body.gated .shell { margin: 0; border-radius: 0; box-shadow: none; }
  .hdr { padding: 0 16px; }
  .install-wrap { padding: 8px 16px 0; }
  main {
    padding: 8px 16px calc(56px + env(safe-area-inset-bottom));
    margin: 0;
  }

  /* Pull the nav out of the header column and pin it as a tab bar. The base
     header.topbar nav.dp2-nav rule uses !important on position/inset/chrome. */
  header.topbar nav.dp2-nav,
  header.topbar nav.dp2-nav.has-fab,
  body > .topbar .dp2-nav {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: calc(48px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: stretch;
    gap: 0;
    padding: 0 0 env(safe-area-inset-bottom) !important;
    margin: 0;
    background: var(--dp4-tabbar, var(--ops-bg-canvas)) !important;
    border: 0 !important;
    border-top: 1px solid var(--line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 50;
    overflow: visible;
  }
  header.topbar nav.dp2-nav a,
  header.topbar nav.dp2-nav button {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 48px;
    padding: 6px 2px;
    border-radius: 0;
    background: transparent;
    color: var(--t2);
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
  }
  header.topbar nav.dp2-nav button:hover {
    background: transparent;
    color: var(--t1);
  }
  header.topbar nav.dp2-nav button.active {
    background: transparent;
    color: var(--t1);
  }
  header.topbar nav.dp2-nav button:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--line2);
  }
  /* Undo the rail clip so the 11px caps label is visible again. */
  header.topbar nav.dp2-nav button span {
    position: static;
    width: auto;
    height: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: auto;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  #fab { top: 18px; right: 16px; bottom: auto; }
  #toast-root { bottom: calc(56px + env(safe-area-inset-bottom)); }
}

.num, table.all td, .tmeta {
  font-variant-numeric: tabular-nums;
}

.pin-gate .btn.primary { min-height: 36px; height: 36px; border-radius: 6px; }
.ms-group > summary { min-height: 36px; padding: 0 16px; }
button.acct-row { min-height: 36px; }
.more-fields > summary { min-height: 36px; text-transform: none; letter-spacing: 0; font-size: 13px; }

/* Last word: 36px/32px restatements above must not beat the 44px coarse/phone floor. */
@media (pointer: coarse), (max-width: 768px) {
  .btn, .dp2-btn, .dp3-btn, .iconbtn, .cal-nav, .dg-opt, .wb-more,
  .wb-link, .toast-undo, .ms-add, .ms-done, .ms-clear, .more-views button, .more-views.seg button, .kt-acts .btn,
  .season-card .sc-edit, #pe-tasks .iconbtn, .pin-gate .btn.primary,
  .install-go, .acct-out, .acct-act, .jumpview,
  .more-fields > summary, .stale-strip .stale-x {
    height: 44px;
    min-height: 44px;
  }
  .iconbtn, .mclose, .install-close, #fab, #menu-btn:not(.avatar-btn),
  #pe-tasks .iconbtn, .stale-strip .stale-x {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
  .who select, .filters input, .filters select, .wb-head input,
  .modal input:not([type="checkbox"]):not([type="radio"]), .modal select, .pin-gate input,
  :is(.modal) :is(input, select) {
    min-height: 44px;
    height: 44px;
  }
}

/* ---- Desktop content contract. The 244 / 48 / tab-bar chassis above is unchanged.
   Content is START-ALIGNED to the panel and capped per view; nothing is centred as a phone column.
   Tiers: >=1440 the chassis plus a second column where a view earns one, >=1600 wider cap. ---- */
.net-chip[hidden] { display: none; }
@media (pointer: fine) and (min-width: 1024px) { .install-wrap { display: none; } }
@media (min-width: 1440px) {
  main { --shell-pad: var(--dp3-sp-4, 16px); padding: 12px var(--shell-pad) 24px; }
  .hdr { padding: 0 52px 0 var(--shell-pad, 16px); }
  #fab { top: 14px; right: 16px; }
  .topbar { overflow: visible; }
  #view, #view:is([data-v="mine"], [data-v="today"], [data-v="projects"]) { max-width: var(--content-max, none); margin-inline: 0; }
  #view[data-v="mine"], #view[data-v="today"], #view[data-v="review"] { --content-max: 960px; }
  #view[data-v="projects"] { --content-max: 880px; }
  #view[data-v="calendar"] { --content-max: 1200px; }
  #view[data-v="season"], #view[data-v="charts"] { --content-max: 1120px; }
  .section-title { margin-inline: 0; }
  .cal-page { max-width: none; margin-inline: 0; }
  .cal-split { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); }
  .cal-side { top: 0; max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); }
  .cal-side .tname { white-space: normal; }
}
/* 1100 was a one-off; the rail and the Metrics 4-up now arrive with the 1440 tier. */
@media (min-width: 1440px) {
  main { --shell-pad: var(--dp3-sp-5, 24px); }
  #view[data-v="today"], #view[data-v="projects"], #view[data-v="calendar"], #view[data-v="season"], #view[data-v="charts"] { --content-max: 1280px; }
  #view[data-v="review"] { --content-max: 1120px; }
}
@media (min-width: 1600px) {
  main { --shell-pad: var(--dp3-sp-6, 32px); }
  #view[data-v="mine"] { --content-max: 1120px; }
  #view[data-v="today"], #view[data-v="projects"], #view[data-v="season"], #view[data-v="charts"] { --content-max: 1440px; }
}

/* v5 surfaces: cards are #262626 on the panel, so their edge and their row hover step one tone up (Amendment 43). */
.tile, .goal, .chartcard, .install-card, .season-card, .ms-group { border-color: var(--cardline); }
:is(.ms-group, .season-card, .chartcard) :is(.task, button.acct-row):hover { background: var(--cardline); }

/* Wide monitors (a 2560-wide window left the right half empty under the 1280/1440 caps).
   From 1440 up every view FILLS the panel; the side columns scale with the window instead of a fixed cap. */
@media (min-width: 1440px) {
  #view[data-v] { --content-max: none; }
  .cal-split { grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 560px); }
  .day { min-height: clamp(76px, 12vh, 150px); }
}
/* Very wide: a 36px row stretched across 2000px is unreadable, so the list views flow in two columns. */
@media (min-width: 1800px) {
  #view[data-v="mine"] { columns: 2; column-gap: 48px; }
  #view[data-v="mine"] > :is(.pchips) { column-span: all; }
  :is(#view[data-v="mine"]) :is(.task, .empty) { break-inside: avoid; }
  :is(#view[data-v="mine"]) .section-title { break-after: avoid; }
}

/* ---- Colour + contrast pass: more contrast, more colour.
   Sidebar is the lifted surface, the work panel is the true canvas, cards sit two steps above it. ---- */
/* Project hues never reuse the accent green: a green rail read as a selected or active row.
   The six values and [data-hue] live in dpt.v5.components.css. */
.shell { box-shadow: 0 0 0 1px var(--cardline); }
.tile, .goal, .chartcard, .season-card, .ms-group, .day {
  background: var(--cardbg); border-color: var(--cardline); }
.task:hover, .ms-row:hover, .rock:hover { background: var(--ops-hover-wash); }

header.topbar nav.dp2-nav button.active { background: var(--ops-status-good-wash); color: var(--t1); }
header.topbar nav.dp2-nav button.active .tab-ic { stroke: currentColor; }

.who-chips { display: inline-flex; vertical-align: middle; margin-right: 6px; }
/* The owner cell is 36px. The kit pill does not fit, so the initial keeps the old 20px mark. */
.who-chips .dp5-who { height: 20px; padding: 0; gap: 0; background: transparent; }
.who-chips .dp5-who { flex: 0 1 auto; min-width: 0; }
/* Three owners must fit the 36px owner cell: the marks shrink and overlap harder. */
.who-chips .dp5-who__i { flex: 0 1 auto; width: 20px; height: 20px; min-width: 12px; font-size: 9.5px; box-shadow: 0 0 0 2px var(--panel); }
.who-chips .dp5-who + .dp5-who { margin-left: -7px; }
.cad::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--t3); }
.cad[data-cad="weekly"]::before { background: var(--dp5-hue-1); }
.cad[data-cad="monthly"]::before { background: var(--dp5-hue-2); }
.cad[data-cad="quarterly"]::before { background: var(--dp5-hue-3); }
.cad[data-cad="annual"]::before { background: var(--dp5-hue-4); }

/* ---------------------------------------------------------------------------
   DPT Ops desktop frame, App Kit v5.

   Loads after style.css and linear.css (other design files load after it), and
   owns the >=1440 chassis: 184px sidebar, a main column that fills the viewport,
   a sticky rail, and one 40px task-row grid shared by Mine, Today and every
   project card.

   Two rules this file keeps:
     1. Values come from --dp5-* (brand/dpt.v5.css). Hex values here are the
        canvas/sidebar steps the kit does not name, plus a few written out on purpose.
     2. Everything structural is inside @media (min-width: 1440px). The phone
        tier (<=768) must not move.

   Why 1280 and not 1024: the chassis is a fixed 232px menu and a
   372px side panel, so at 1024-1279 (every iPad in landscape: 1024, 1180, 1194)
   the page between them was 396-652px, narrower than the phone layout gets at
   820. Titles ran under the mast controls and Schedule's table scrolled sideways
   out of sight. Those widths now get the one-column tablet layout (the same one
   an iPad in portrait uses). Every width breakpoint in the CSS and every
   matchMedia in the JS moved together; keep them in step.

   Why 1440 and not 1280: the same squeeze at 1280-1439 (13in
   laptops, 13in iPad Pro in landscape at 1366): the page was 676-835px, titles
   still met the mast controls and Schedule's table still scrolled, so desktop
   starts at 1440. The vendored kit (brand/) keeps its own 1280 tier.
   --------------------------------------------------------------------------- */

/* ---- surfaces: the canvas leaves pure black, cards actually sit up ---- */
.dpt-dark {
  --page: var(--ops-bg-canvas);                       /* page and sidebar: one step under the canvas. Fields do not use this */
  --panel: var(--dp5-canvas);            /* the work canvas #171717 */
  --cardbg: var(--dp5-surface);          /* #232323 */
  --cardline: var(--dp5-line-card);      /* the card's own 30% white edge */
  --raised: var(--dp5-raised);
  --t1: var(--dp5-text);
  --t2: var(--dp5-text-2);
  --t3: var(--dp5-text-3);
  --green: var(--dp5-green);
  --gold: var(--dp5-primary);
  --gold-edge: var(--dp5-primary);
  --gold-ink: var(--dp5-primary-ink);
  --warn: var(--dp5-warn);
  --red: var(--dp5-bad);
}
html, body { background: var(--page); }

/* Every card is one treatment: v5 surface, 30% edge over the shadow, 6px, 16/20 padding. */
.fcard,
.tile, .goal, .chartcard,
.season-card, .ms-group, .install-card {
  background: var(--dp5-surface);
  border: 1px solid var(--dp5-line-card);
  border-radius: var(--dp5-r-card);
  box-shadow: var(--dp5-shadow-card);
}
.fcard { padding: 16px 20px; min-width: 0; }
/* Cadence: grey word with its cadence-coloured dot (linear.css sets the dot colour per cadence). */
.cad { color: var(--dp5-text-3); }

/* ---- type scale. Tabular numerals everywhere a number appears. ---- */
.dp-num, .tc-min, .tc-due, .wd .n, .wd .p, .count {
  font-variant-numeric: tabular-nums;
}
.section-title {
  font: 600 15px/22px var(--dp5-font);
  letter-spacing: -.01em;
  color: var(--dp5-text);
  height: auto;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title .count {
  background: none;
  padding: 0;
  height: auto;
  font: 400 13px/20px var(--dp5-font);
  font-variant-numeric: tabular-nums;
  color: var(--dp5-text-3);
}
.fcard .section-title:not(:first-child) { margin-top: 20px; }

/* An empty state is a surface with words on it, never missing pixels. */
.card-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  margin: 0;
  font: 400 13px/20px var(--dp5-font);
  color: var(--dp5-text-2);
}
.card-empty.sm { min-height: 40px; color: var(--dp5-text-3); }
.card-empty svg { flex: none; color: var(--dp5-green); }

/* ---- the one primary per screen: white, ink text, no glow.
   The labelled button is the desktop chassis; the phone keeps its 44px square +. ---- */
#fab {
  border: 0;
  background: var(--dp5-primary);
  color: var(--dp5-primary-ink);
  box-shadow: none;
}
#fab:hover { background: var(--dp5-primary-hover); transform: none; }
#fab:focus-visible { outline: none; box-shadow: var(--dp5-focus-ink); }
.fab-plus { font-size: 16px; line-height: 1; }
.fab-label, .menu-label { display: none; }
/* Secondary "Add task" inside a card: quiet, never a second primary and never green. */

/* Below the desktop tier there are no columns to line up in, so the row is two lines: the title
   gets the full width and the meta wraps underneath it. Five data points never fit beside a task
   name at 390px, and a title clipped to "W.." is worse than a second line. */
@media (max-width: 1439px) {
  .task:not(.add-sub):not(.nc-row):not(.task-head) {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    height: auto;
    min-height: 44px;
    padding: 8px;
    row-gap: 2px;
    column-gap: 8px;
  }
  .task .check { grid-column: 1; grid-row: 1; }
  .task .tmain { grid-column: 2; grid-row: 1; min-width: 0; }
}

/* ---- controls are 4px, checkboxes are 14px squares ---- */
.check, .check:not(.ro)::after { border-radius: var(--dp5-r-ctl); }
.chip, .kpi-chip, .sc-count, .net-chip,
.btn, .dp2-btn, .dp3-btn, .iconbtn, .pchip, .dg-opt, .more-views.seg,
.more-views.seg button, .cal-nav, .mclose, #menu-btn { border-radius: var(--dp5-r-ctl); }
.modal, .overlay > * { border-radius: var(--dp5-r-sheet); }
/* No outer ring anywhere: the kit's focus is a 1.5px inset line in the text colour. */
button:focus-visible, a:focus-visible, summary:focus-visible,
.btn:focus-visible, .dp2-btn:focus-visible, .dp3-btn:focus-visible,
#menu-btn:focus-visible, .check:focus-visible, .pchip:focus-visible {
  outline: none;
  box-shadow: var(--dp5-focus);
}

/* =======================================================================
   >=1440: the desktop chassis. Nothing below this line touches the phone.
   ======================================================================= */
@media (min-width: 1440px) {
  /* ---- shell: 184px sidebar + a main column that reaches the floor ---- */
  html, body { background: var(--page); min-height: 100vh; }
  .topbar {
    width: 184px;
    padding: 16px 12px 12px;
    gap: 4px;
    background: var(--page);
    border-right: 1px solid var(--dp5-line-card);
  }
  /* app.js moves #fab into .hdr on desktop, so it sits on the title row beside the content it adds to. */
  #fab {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    width: auto;
    flex: none;
    margin-left: 12px;   /* right beside the title, not at the far edge of a wide screen */
    margin-top: -2px;
    height: 32px;
    min-height: 32px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--dp5-r-ctl);
    font: 600 13px/20px var(--dp5-font);
  }
  .fab-label, .menu-label { display: inline; }
  .fab-plus { display: none; }
  .brand { height: 20px; margin-bottom: 20px; padding: 0 12px; }
  .ws-name { font: 600 13px/20px var(--dp5-font); }
  .shell {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--dp5-canvas);
    min-height: 100vh;
  }
  .hdr {
    display: flex;
    height: auto;
    min-height: 56px;
    padding: 16px 24px 0 24px;
    border-bottom: 0;
    align-items: flex-start;
    gap: 16px;
  }
  .hdr .screen-id { flex: none; }   /* the title takes its own width, so Add task sits right after it */
  .screen-id { display: flex; flex-direction: column; gap: 2px; }
  .screen-title { font: 600 22px/28px var(--dp5-font); letter-spacing: -.01em; color: var(--dp5-text); }
  .screen-sub { font: 400 13px/20px var(--dp5-font); color: var(--dp5-text-3); }
  .shell { overflow: visible; }
  main {
    --shell-pad: 24px;
    padding: 16px 24px 24px;
    max-width: none;
    margin: 0;
    background: var(--dp5-canvas);
  }
  /* The old per-view caps and the 1800 two-column flow are what left the black hole. */
  #view[data-v] { --content-max: none; max-width: none; margin-inline: 0; }
  #view[data-v="mine"] { columns: auto; column-gap: normal; }

  /* ---- sidebar items: 32px, 4px, green only on the active one ---- */
  header.topbar nav.dp2-nav { gap: 4px; }
  header.topbar nav.dp2-nav button {
    height: 32px;
    min-height: 32px;
    gap: 10px;
    padding: 0 12px;
    border-radius: var(--dp5-r-ctl);
    font: 400 13px/20px var(--dp5-font);
    color: var(--dp5-text-2);
  }
  header.topbar nav.dp2-nav button:hover { background: var(--dp5-secondary-wash); color: var(--dp5-text); }
  header.topbar nav.dp2-nav button.active {
    background: var(--dp5-green-tint);
    color: var(--dp5-green);
  }
  header.topbar nav.dp2-nav button.active .tab-ic { stroke: currentColor; }
  /* The unlabelled green dot at the foot of the rail becomes a named row. */
  .sync { width: 100%; padding: 0; }
  #menu-btn, #menu-btn.avatar-btn {
    width: 100%;
    min-width: 0;
    height: 32px;
    min-height: 32px;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--dp5-r-ctl);
    background: none;
    color: var(--dp5-text-2);
    font: 400 13px/20px var(--dp5-font);
    box-shadow: none;
  }
  #menu-btn:hover, #menu-btn.avatar-btn:hover { background: var(--dp5-secondary-wash); color: var(--dp5-text); }
  .menu-label { display: inline; }
  .who { width: 100%; padding: 0 12px; display: block; height: auto; }
  .who label {
    display: block;
    font: 400 11px/16px var(--dp5-font);
    text-transform: none;
    letter-spacing: 0;
    color: var(--dp5-text-3);
    margin-bottom: 4px;
  }
  .who select {
    width: 100%;
    height: 32px;
    min-height: 32px;
    padding: 0 8px;
    border-radius: var(--dp5-r-ctl);
    border: 1px solid var(--dp5-line-strong);
    background: var(--dp5-surface);
    color: var(--dp5-text-2);
    font: 400 13px/20px var(--dp5-font);
  }
  .acct-disc { width: 20px; height: 20px; flex: none; font-size: 9px; }

  /* ---- the 40px task row: one grid for Mine, Today and every project card ---- */
  .task, .wb-row.task {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 88px 36px 72px 88px;
    align-items: center;
    column-gap: 8px;
    height: 40px;
    min-height: 40px;
    padding: 0 8px;
    border-radius: var(--dp5-r-ctl);
    border-bottom: 1px solid var(--ops-line-default);
  }
  .task:last-child { border-bottom: 0; }
  .task .check { grid-column: 1; justify-self: start; }
  .check, .task .check {
    width: 14px;
    height: 14px;
    min-width: 14px;
    border-radius: var(--dp5-r-ctl);
    border: 1px solid var(--dp5-line-strong);
  }
  .check svg { width: 9px; height: 9px; }
  button.tmain, .task .tmain {
    grid-column: 2;
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    padding: 0;
    text-align: left;
  }
  .task .tname {
    font: 400 13px/20px var(--dp5-font);
    color: var(--dp5-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .tc-cell {
    font: 400 11px/16px var(--dp5-font);
    font-variant-numeric: tabular-nums;
    color: var(--dp5-text-3);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .tc-cad { grid-column: 3; }
  .tc-who { grid-column: 4; display: flex; align-items: center; }
  .tc-who .owner { display: none; }          /* the 20px avatar carries the name in its title */
  .tc-min { grid-column: 5; text-align: right; }
  .tc-due { grid-column: 6; text-align: right; }

  .task:hover { background: var(--ops-hover-wash); }
  .task .tc { font: 400 11px/16px var(--dp5-font); color: var(--dp5-text-3); }

  /* ---- Mine: header, status line, today card, Later card to the floor ---- */
  #view[data-v="mine"] {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 16px;
    min-height: calc(100vh - 116px);
  }
  .view-head { display: flex; align-items: center; gap: 16px; min-height: 32px; }
  /* Edit-project subitems: the six-column task grid has no place for the Edit/Delete buttons or the inline
     editor, so these rows flow instead (they overlapped the row text before). */
  #pe-tasks .task {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    height: auto;
    min-height: 40px;
    padding: 6px 8px;
  }
  #pe-tasks .task .tmain { display: block; flex: 1 1 200px; min-width: 0; }
  #pe-tasks .task .tmain:only-child { flex-basis: 100%; }
  #pe-tasks .task .iconbtn { height: 28px; min-height: 28px; padding: 0 8px; }
  #pe-tasks .task .tmain .mact { position: static; margin-top: 12px; }
  /* Real 56px cells, so days 21-26 stop being orphan numbers in the void. */
  .wd {
    height: 56px;
    border: 0;
    border-radius: var(--dp5-r-ctl);
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--dp5-text-3);
  }
  .wd .l { font: 400 11px/16px var(--dp5-font); color: var(--dp5-text-3); }
  .wd .n { font: 400 13px/20px var(--dp5-font); font-variant-numeric: tabular-nums; color: var(--dp5-text-2); }
  .wd .p { font: 400 11px/16px var(--dp5-font); color: var(--dp5-text-3); }
  .wd .p small { font-size: 11px; }
  .wd.zero .p, .wd.future .p { color: var(--dp5-text-3); }              /* the second "today" box */
  /* A board card is a third of the main column, not the whole of it. The check / title / owner /
     due cells stay on the shared template; cadence and time step out rather than crush the title
     to "Ca...". Finding 11 already allows a board card its own shorter row template. */
  .cal-side .task {
    grid-template-columns: 32px minmax(0, 1fr) 36px 88px;
  }
  .cal-side .tc-cad, .cal-side .tc-min { display: none; }
  .cal-side .tc-who { grid-column: 3; }
  .cal-side .tc-due { grid-column: 4; }
  .cal-side .tname { white-space: nowrap; }

  /* ---- Projects: equal cards, two up, no spine ---- */
  #view[data-v="projects"] { display: block; }

  /* ---- Plan and Metrics wear the same frame, with the content they already had ---- */
  .cal-page, .cal-split, .season-card, .chartcard, table.all { max-width: none; }
  .cal-head h2, .kt-h {
    font: 600 15px/22px var(--dp5-font);
    letter-spacing: -.01em;
    color: var(--dp5-text);
  }
  table.all th { font: 400 11px/16px var(--dp5-font); text-transform: none; letter-spacing: 0; color: var(--ops-text-tertiary); border-bottom-color: var(--dp5-line-card); }
  table.all td { font: 400 13px/20px var(--dp5-font); height: 40px; }
  .day { background: var(--dp5-surface); border-color: var(--dp5-line-card); border-radius: var(--dp5-r-ctl); }
  .day.today { background: var(--dp5-green-tint); }
}

/* ---- 1440: the KPI stack is 280px; Today's board is two up ---- */
@media (min-width: 1440px) {
  .hdr { padding-left: 24px; }
}

/* ---- >=1800: the rail grows to 320px and the board runs three up (section 3) ---- */
@media (min-width: 1800px) {
  /* Mine keeps two task columns at every width: a third would shrink the title below reading width. */
  #view[data-v="mine"] { columns: auto; }
}

/* ---- coarse pointers keep their 44px targets at every width ---- */
@media (pointer: coarse) {
  .task, .wb-row.task { height: 44px; min-height: 44px; }
  .task .check { width: 20px; height: 20px; min-width: 20px; }
  #fab, #menu-btn { height: 44px; min-height: 44px; }
}

/* =======================================================================
   Right side panel for every sheet (like DPT Hub), one Today list, compact
   project board, quieter nav. Desktop only; the phone tier is untouched.
   ======================================================================= */
@media (min-width: 1440px) {
  /* ---- every sheet docks right; the page stays up behind it ---- */
  .overlay { display: flex; justify-content: flex-end; align-items: stretch; padding: 0; background: var(--ops-scrim); }
  /* One panel width for every sheet, and the slot is ALWAYS reserved (so nothing jumps). The page lives in the left area whether or not a panel is open, so nothing shifts on open or close. */
  :root { --panel-w: 480px; }
  .shell { padding-right: var(--panel-w); }
  .modal, .overlay > * {
    width: var(--panel-w);
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border: 0;
    border-left: 1px solid var(--dp5-line-card);
    box-shadow: -24px 0 48px transparent;
    --mpad-x: 24px;
    --mpad-y: 20px;
  }
  .modal h2 { font: 600 16px/24px var(--dp5-font); color: var(--dp5-text); padding-right: 44px; margin-top: 2px; }
  .modal > .mact.sheet-foot {
    position: sticky;
    bottom: calc(-1 * var(--mpad-y));
    margin: 16px calc(-1 * var(--mpad-x)) calc(-1 * var(--mpad-y));
    padding: 12px var(--mpad-x);
    background: var(--dp5-surface);
    border-top: 1px solid var(--dp5-line-card);
    z-index: 2;
  }
  .pe-more { margin-top: 16px; }
  .pe-more > summary { cursor: pointer; list-style: none; font: 400 12px/16px var(--dp5-font); color: var(--dp5-text-3); min-height: 24px; }
  .pe-more > summary::-webkit-details-marker { display: none; }
  .pe-more[open] > summary { color: var(--dp5-text-2); }
  .pe-more #pe-delete { margin-top: 8px; }
  .pe-notes-label { display: block; margin-top: 16px; }

  /* ---- nav: the active item is green text with an inset bar, not a filled block ---- */
  header.topbar nav.dp2-nav button.active { background: none; color: var(--dp5-green); box-shadow: inset 3px 0 0 var(--dp5-green); }

  .view-head { flex-wrap: wrap; row-gap: 6px; }

  /* ---- row: 12px meta, square owner marks, the project named on the row ---- */
  .tc-cell { font-size: 12px; line-height: 16px; }
  .cad[data-cad="project"]::before { background: var(--dp5-text-3); }
}

/* =======================================================================
   Phase 3 (2026-09-20 pm): a calendar you can read. Titles in the cells, a
   full rectangle, a green date for today (no fill), and a rail that always
   holds Late, the selected day and No date. Desktop only.
   ======================================================================= */
@media (min-width: 1440px) {
  .cal-page, .cal-split { max-width: none; }
  .cal-split { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 16px; align-items: stretch; }
  .cal-main { display: flex; flex-direction: column; min-height: calc(100vh - 150px); }
  .cal-head { margin-bottom: 8px; }
  .cal-head h2 { min-width: 200px; }
  .calendar.cal-titled { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: 28px; grid-auto-rows: minmax(112px, 1fr); gap: 1px; background: var(--dp5-line-card); border: 1px solid var(--dp5-line-card); border-radius: var(--dp5-r-card); overflow: hidden; }
  .cal-titled .dow { background: var(--dp5-canvas); padding: 6px 8px 4px; font: 400 11px/16px var(--dp5-font); color: var(--dp5-text-3); text-align: left; text-transform: none; letter-spacing: 0; min-height: 0; }
  .cal-titled .day { background: var(--dp5-surface); border: 0; border-radius: 0; min-height: 0; padding: 6px; gap: 2px; display: flex; flex-direction: column; align-items: stretch; overflow: hidden; }
  .cal-titled .day.outside { background: var(--dp5-canvas); }
  .cal-titled .day.outside .cal-item { opacity: .5; }
  .cal-titled .day:hover:not(.pad) { background: var(--dp5-raised); border-color: transparent; }
  .cal-titled .day.today { background: var(--dp5-surface); }
  .cal-titled .day.sel { box-shadow: inset 0 0 0 1px var(--dp5-green); border-color: transparent; }
  .cal-titled .day:focus-visible { box-shadow: var(--dp5-focus); outline: none; }
  .cal-titled .cal-dots { display: none; }
  .cal-item {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 20px;
    min-height: 20px;
    padding: 0 6px 0 5px;
    border: 0;
    border-left: 3px solid var(--hue, transparent);
    border-radius: 2px;
    background: none;
    color: var(--dp5-text-2);
    font: 400 12px/16px var(--dp5-font);
    text-align: left;
    min-width: 0;
    cursor: pointer;
  }
  .cal-item:hover { background: var(--ops-hover-wash); color: var(--dp5-text); }
  .cal-item:focus-visible { outline: none; box-shadow: var(--dp5-focus); }
  .cal-item-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cal-item.done .cal-item-t { text-decoration: line-through; color: var(--dp5-text-3); }
  .cal-item .cal-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--dp5-text-3); }
  .cal-item .cal-dot.cad::before { display: none; }
  .cal-item .cal-dot.cad[data-cad="weekly"] { background: var(--dp5-hue-1); }
  .cal-item .cal-dot.cad[data-cad="monthly"] { background: var(--dp5-hue-2); }
  .cal-item .cal-dot.cad[data-cad="quarterly"] { background: var(--dp5-hue-3); }
  .cal-item .cal-dot.cad[data-cad="annual"] { background: var(--dp5-hue-4); }
  .cal-item.late .cal-item-t { color: var(--dp5-bad); }
  .cal-item.season { color: var(--dp5-text-3); border-left-color: transparent; cursor: default; }
  .cal-glyph { flex: none; display: inline-block; width: 8px; height: 8px; border: 1px solid var(--dp5-text-3); border-radius: 2px; box-sizing: border-box; }
  .cal-more { font: 400 11px/16px var(--dp5-font); color: var(--dp5-text-3); padding-left: 8px; }
  /* the rail */
  .cal-side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 0; background: var(--dp5-surface); border: 1px solid var(--dp5-line-card); border-radius: var(--dp5-r-card); }
  .cal-block { padding: 8px 8px 12px; }
  .cal-block + .cal-block { border-top: 1px solid var(--dp5-line-card); }
  .cal-side .section-title { margin: 4px 8px 6px; }
  .cal-side .cal-agenda-h { margin-top: 4px; }
  .cal-today-w { font: 400 11px/16px var(--dp5-font); color: var(--dp5-green); margin-left: 6px; }
  /* Rail rows at 340px: check, one-line title, due. Owner and project ride on the row as the hue rail and the
     panel, not as columns that wrap the title into six lines. */
  .cal-side .task { grid-template-columns: 24px minmax(0, 1fr) 72px; height: auto; min-height: 36px; padding: 4px 8px; column-gap: 6px; }
  .cal-side .task .check { grid-column: 1; }
  .cal-side .task .tmain { grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
  .cal-side .task .tname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .cal-side .tc-cad, .cal-side .tc-min, .cal-side .tc-who { display: none; }
  .cal-side .tc-due { grid-column: 3; text-align: right; white-space: nowrap; }
  .cal-side .task .tc { display: none; }
  .cal-side .card-empty.sm { padding: 0 8px; min-height: 36px; }
  .cal-side { overflow-x: hidden; }
  .cal-side .cal-season-row { color: var(--dp5-text-3); }
  .cal-side .cal-season-row .tname { color: var(--dp5-text-2); }
}
@media (max-width: 1439px) {
  .cal-item, .cal-more { display: none; }
}

/* ---- the side panel pushes the page instead of covering it ---- */
@media (min-width: 1440px) {
  .overlay { pointer-events: none; background: transparent; }
  .overlay > .modal { pointer-events: auto; }
  body:has(#modal-root .overlay) #fab { display: inline-flex !important; }
}

/* =======================================================================
   Phase 4: UI and UX blockers and highs.
   ======================================================================= */
@media (min-width: 1440px) {
  /* ---- with a panel open, the page gives up its weakest column, never its titles ---- */
  /* The slot is reserved permanently, so nothing has to collapse when a panel opens. */

  /* ---- Today: a morning list, not a stretched table ---- */
  /* Today fills the content area up to the panel slot (it was the wrong width when capped). */
  .cal-side .task:hover { background: var(--ops-hover-wash); }
  body:has(#modal-root .overlay) #fab[data-hidden] { display: none !important; }

  /* ---- project colour is a rail on every row, not a second dot ---- */
  .task[data-hue] { box-shadow: inset 3px 0 0 var(--hue); }
  .task[data-hue]:focus-visible { box-shadow: inset 3px 0 0 var(--hue), var(--dp5-focus); }

  /* ---- one control language: 4px, no stadium pills ---- */
  .chip, .kpi-chip, .sc-count, .pchip, .due-chips .pchip, .kpi-chip i { border-radius: var(--dp5-r-ctl); }
  .due-chips .dp5-fchip.is-on, .editor-chips .dp5-fchip.is-on,
  .due-chips .dp5-fchip[aria-pressed="true"], .editor-chips .dp5-fchip[aria-pressed="true"] {
    background: var(--dp5-raised); color: var(--dp5-text); border-color: var(--dp5-line-strong);
  }
  .modal input:focus-visible, .modal select:focus-visible, .modal textarea:focus-visible {
    outline: none;
    box-shadow: var(--dp5-focus);
    border-color: transparent;
  }
  .modal textarea { resize: vertical; }
  .pe-saved { font: 400 12px/16px var(--dp5-font); color: var(--dp5-text-3); margin-left: auto; }

  /* ---- calendar: late once, Move on rail rows ---- */
  /* Late on its origin day: muted, never struck through (a strike reads as done). The Late list is where it is worked. */
  .cal-item.past .cal-item-t { color: var(--dp5-text-3); }
  .cal-item.past .cal-dot { background: var(--dp5-bad) !important; opacity: .7; }
  .cal-item.past .cal-dot { opacity: .5; }
  .cal-item.season { cursor: pointer; }
  .cal-item.season:hover .cal-item-t { color: var(--dp5-text-2); }
  .cal-side .task { grid-template-columns: 24px minmax(0, 1fr) 72px 44px; }
  .cal-side .tc-move { grid-column: 4; display: flex; justify-content: flex-end; }
  .cal-side .cal-move { height: 24px; min-height: 24px; padding: 0 6px; font: 400 11px/16px var(--dp5-font); opacity: 0; }
  .cal-side .task:hover .cal-move, .cal-side .cal-move:focus-visible { opacity: 1; }
  .cal-side .cal-move-input { grid-column: 3 / span 2; height: 28px; min-height: 28px; padding: 0 6px; border-radius: var(--dp5-r-ctl); border: 1px solid var(--dp5-green); background: var(--dp5-surface); color: var(--dp5-text); font: 400 12px/16px var(--dp5-font); }
  .cal-side .cal-season-row .tmain { background: none; border: 0; padding: 0; color: inherit; text-align: left; cursor: pointer; }
  .cal-side .cal-season-row .tmain:hover .tname { color: var(--dp5-text); }
}

@media (min-width: 1600px) { :root { --panel-w: 520px; } }
/* Every named sheet (Targets, Rocks, log, account) takes the same slot: the two-class rules in style.css and
   linear.css gave Targets 640px, which is exactly the jump to avoid. */
@media (min-width: 1440px) {
  .modal.kt-sheet, .modal.rs-sheet, .modal.rk-sheet, .modal.lg-sheet, #modal-root .overlay > .modal[class] { width: var(--panel-w); max-width: 100vw; }
}

/* ---- Season (Plan): it was too dense, with too little contrast, a boxed hover on every ✓, and a full
   repaint on every ✓. Rows are now the 40px grid, the event name lives on the group only, the actions are ghost
   controls that only take a fill on hover, and marking handled edits the list in place.
   One current event, check handle, handled is a view toggle, one-line cards. ---- */
.season-page { container-type: inline-size; }
.ms-lead { display: none; }
.ms-done, .ms-add, .ms-restore, .ms-confirm .iconbtn { width: auto; min-width: 0; }
.season-page .ms-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
}
.season-page .ms-check .ms-circle {
  display: block;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 1.5px solid var(--dp5-line-strong, var(--ops-line-strong));
  border-radius: 50%;
  background: none;
}
.season-page .ms-check:hover { background: color-mix(in srgb, var(--dp5-raised, var(--ops-bg-surface-press)) 70%, transparent); }
.season-page .ms-check:hover .ms-circle { border-color: var(--ops-text-primary); }
.season-page .ms-check:focus-visible { outline: none; box-shadow: var(--dp5-focus, inset 0 0 0 1.5px var(--dp5-text)); }
.season-page .ms-check:active .ms-circle { border-color: var(--dp5-green, var(--ops-status-good)); }
.season-page .ms-check::before { content: none; }
.season-page .ms-tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--ops-status-good);
}
.season-page .ms-tick svg { display: block; }
.ms-clear { width: auto; min-width: 0; }
.ms-phase { color: var(--dp5-text, var(--ops-text-primary)); }
.ms-sub-late { color: var(--dp5-bad, var(--ops-status-bad)); }
.season-page [hidden] { display: none !important; }
/* padding-right keeps the wrapped line under the name (dates, label, next deadline) clear of the chevron on phones too. */
.season-page .ms-group > summary { position: relative; padding-right: 40px; }
.season-page .ms-group > summary::after { content: none; display: none; }
.season-page .ms-group > summary .ms-chev {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--ops-text-tertiary);
  pointer-events: none;
}
.season-page .ms-group[open] > summary .ms-chev { transform: translateY(-50%) rotate(180deg); }
.season-page .ms-group > summary .ms-chev svg { display: block; }
.season-page .ms-group > summary,
.season-page .ms-group > .ms-summary {
  height: 46px;
  min-height: 46px;
  max-height: 46px;
  margin: 0;
  box-sizing: border-box;
}
.season-page .ms-group > .ms-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  cursor: pointer;
}
.season-page .ms-group > .ms-summary .ms-ev {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ms-jump {
  margin-left: 8px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
  height: auto;
  min-height: 0;
  color: var(--ops-status-good);
  font: 500 13px/20px var(--dp5-font, Inter, system-ui, sans-serif);
}
.ms-jump:hover { color: var(--ops-status-good); background: none; text-decoration: underline; }
.ms-jump:focus-visible, .ms-handled-toggle:focus-visible, .season-page .ms-add-event:focus-visible {
  outline: none; box-shadow: var(--dp5-focus, inset 0 0 0 1.5px var(--dp5-text));
}
.ms-handled-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  height: 32px;
  min-height: 32px;
  padding: 0 8px 0 10px;
  border: 0;
  border-radius: 4px;
  background: var(--dp5-raised, var(--ops-bg-surface-press));
  box-shadow: none;
  cursor: pointer;
  color: var(--ops-text-primary);
  font: 500 13px/32px var(--dp5-font, Inter, system-ui, sans-serif);
}
.ms-handled-toggle:hover { color: var(--ops-text-primary); background: var(--dp5-raised-hover, var(--ops-bg-surface-press)); }
.ms-handled-toggle .ms-handled-n {
  font: 600 13px/32px var(--dp5-font, Inter, system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  color: var(--ops-text-primary);
}
.ms-handled-toggle .ms-chev { display: flex; color: var(--ops-text-primary); transition: transform .15s; }
.ms-handled-toggle .ms-chev svg { display: block; }
.ms-handled-toggle.is-on .ms-chev { transform: rotate(180deg); }
.season-page > .section-title.ms-head {
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin: 0 0 16px;
}
.season-page > .section-title.ms-head > * { order: 0; flex: none; }
@container (max-width: 639px) {
  .season-page > .section-title.ms-head { flex-wrap: wrap; }
}

.ms-confirm { display: inline-flex; align-items: center; gap: 8px; font: 400 13px/20px var(--dp5-font, Inter, system-ui, sans-serif); color: var(--dp5-text, var(--ops-text-primary)); }
.ms-confirm .ms-confirm-yes { color: var(--dp5-bad, var(--ops-status-bad)); }

.season-page .ms-list > .ms-handled {
  display: none;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  max-height: none;
  overflow: visible;
}
.season-page .ms-list.show-handled > .ms-group,
.season-page .ms-list.show-handled > .ms-empty { display: none; }
.season-page .ms-list.show-handled > .ms-handled:not([hidden]) { display: block; }

.season-page .ms-add-event { margin-left: auto; height: 32px; min-height: 32px; padding: 0 12px; }

.se-wk { display: flex; align-items: center; gap: 8px; }
.se-wk input { flex: 0 0 72px; }
.se-date { font: 400 12px/16px var(--dp5-font, Inter, system-ui, sans-serif); color: var(--dp5-text-3, var(--ops-text-tertiary)); white-space: nowrap; }
.se-date.past { color: var(--ops-text-tertiary); }
.se-soon-note { margin: 0 0 8px; }
.modal .pe-more { margin-top: 16px; }
.modal .pe-more > summary {
  cursor: pointer;
  list-style: none;
  font: 400 12px/16px var(--dp5-font, Inter, system-ui, sans-serif);
  color: var(--dp5-text-3, var(--ops-text-tertiary));
  min-height: 24px;
}
.modal .pe-more > summary::-webkit-details-marker { display: none; }
.modal .pe-more[open] > summary { color: var(--dp5-text-2, var(--ops-text-secondary)); }
.modal .pe-more #se-delete { margin-top: 8px; }

.rw-tip { position: absolute; transform: translate(-50%, -100%); background: var(--dp5-raised, var(--ops-bg-surface-press)); color: var(--dp5-text, var(--ops-text-primary)); font: 400 12px/16px var(--dp5-font, Inter, system-ui, sans-serif); padding: 6px 8px; border-radius: 4px; white-space: nowrap; pointer-events: none; box-shadow: 0 4px 16px var(--ops-shadow-over); z-index: 3; }
.runway-scroll { position: relative; }
.rw-row { cursor: pointer; }
.rw-row:hover .rw-hit, .rw-row:focus-visible .rw-hit { fill: var(--ops-hover-wash); }
.rw-row:focus-visible { outline: none; }
.rw-row:focus-visible .rw-hit { stroke: var(--dp5-text, var(--ops-text-primary)); stroke-width: 1.5; }
.rw-name { fill: var(--dp5-text-2, var(--ops-text-secondary)); }
.rw-row:hover .rw-name, .rw-row.is-selected .rw-name { fill: var(--ops-text-primary); }
.rw-row.is-selected .rw-hit { fill: var(--ops-hover-wash); }
.rw-bar { fill: var(--dp5-green, var(--ops-status-good)); opacity: .22; }
.rw-start { fill: var(--dp5-green, var(--ops-status-good)); }
.rw-dot { fill: var(--dp5-green, var(--ops-status-good)); }
.rw-dot.late { fill: var(--dp5-bad, var(--ops-status-bad)); }
.rw-dot.soon { fill: var(--dp5-warn, var(--ops-status-warn)); }
.rw-dot.past, .rw-dot.handled { fill: var(--dp5-text-3, var(--ops-text-tertiary)); }
.rw-dot.handled { opacity: .6; }

.sc-count.past { color: var(--dp5-text-3, var(--ops-text-tertiary)); background: none; border: 0; }
.sc-started { margin-top: 20px; }
.sc-started > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 36px; margin-bottom: 8px; }
.sc-started > summary::-webkit-details-marker { display: none; }
.sc-started > summary .section-title { margin: 0; }
.sc-started > summary .hint { font: 400 12px/16px var(--dp5-font, Inter, system-ui, sans-serif); color: var(--dp5-text-3, var(--ops-text-tertiary)); }
.sc-started > summary::after { content: "\25be"; color: var(--dp5-text-3, var(--ops-text-tertiary)); margin-left: auto; transition: transform .15s; }
.sc-started[open] > summary::after { transform: rotate(180deg); }
.sc-started .season-card { opacity: .85; }

.season-page .ms-group.is-selected,
.season-page .season-card.is-selected {
  background: var(--ops-bg-surface-press);
  box-shadow: none;
}
.season-page .ms-group.is-selected {
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}
.season-page .ms-group.is-selected:not(.late):not(.soon) { border-left-color: transparent; }
.season-page .season-card.is-selected {
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}
.season-page .season-card.is-selected:not(.late):not(.soon) { border-left-color: transparent; }

@media (min-width: 1440px) {
  .season-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
  .season-head .more-views { margin: 0; }
  .season-head .more-views.seg { padding: 0; border: 0; background: none; gap: 4px; height: 32px; }
  .season-head .more-views.seg button { height: 32px; min-height: 32px; }
  .season-head .more-views.seg button:not(.is-here) { border: 1px solid transparent; }

  .ms-head { margin-bottom: 16px; gap: 8px; }
  .ms-head .hint { font: 400 13px/20px var(--dp5-font); color: var(--dp5-text-3); }
  .ms-stat { font: 400 13px/20px var(--dp5-font); color: var(--ops-text-tertiary); font-variant-numeric: tabular-nums; }
  .ms-stat .ms-up-n { font: 600 13px/20px var(--dp5-font); color: var(--ops-text-primary); }
  .ms-stat .ms-late-n { font: 600 13px/20px var(--dp5-font); color: var(--ops-status-bad); }
  .ms-stat .ms-sep { color: var(--ops-text-tertiary); }
  .ms-bulk { display: inline-flex; align-items: center; gap: 8px; margin-left: 4px; }
  .season-page .ms-clear {
    margin-left: 0; width: auto; min-width: 0; height: 32px; min-height: 32px; padding: 0 10px;
    font: 400 12px/16px var(--dp5-font); color: var(--ops-text-secondary);
    border: 1px solid var(--dp5-line-strong); background: none; box-shadow: none;
    border-radius: var(--dp5-r-ctl);
  }
  .season-page .ms-clear:hover {
    background: var(--dp5-secondary-wash); color: var(--ops-text-primary); border-color: var(--dp5-line-strong); transform: none;
  }
  .ms-confirm { font-size: 13px; }
  .ms-confirm .iconbtn {
    height: 32px; min-height: 32px; padding: 0 10px; font: 500 12px/16px var(--dp5-font);
    border: 1px solid var(--dp5-line-strong); background: none; box-shadow: none; color: var(--dp5-text);
    border-radius: var(--dp5-r-ctl);
  }
  .ms-confirm .ms-confirm-yes { color: var(--dp5-bad); border-color: var(--dp5-line-strong); }
  .ms-confirm .ms-confirm-yes:hover { background: var(--dp5-secondary-wash); }
  .ms-confirm .ms-confirm-no:hover { background: var(--dp5-secondary-wash); color: var(--ops-text-primary); }

  .ms-list { margin-bottom: 28px; }
  .ms-list .ui-empty { background: var(--dp5-surface); border: 1px solid var(--dp5-line-card); border-radius: var(--dp5-r-card); }

  .season-page :is(.season-card, .runway-card) {
    border: 1px solid var(--ops-line-default);
    box-shadow: none;
    overflow: hidden;
  }
  .season-page .ms-group {
    margin-bottom: 8px;
    border: 1px solid var(--ops-line-default);
    border-radius: var(--dp5-r-card, 6px);
    box-shadow: none;
    overflow: hidden;
  }
  .season-page .ms-group.late,
  .season-page .ms-group.soon { border-left-width: 3px; }
  .season-page .ms-group.late { border-left-color: var(--ops-status-bad); }
  .season-page .ms-group.soon { border-left-color: var(--ops-status-warn); }

  .season-page .ms-group > summary,
  .season-page .ms-group > .ms-summary {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 8px;
    align-items: center;
    height: 46px;
    min-height: 46px;
    max-height: 46px;
    margin: 0;
    padding: 0 16px;
    gap: 0;
    border-radius: 0;
    overflow: hidden;
    box-sizing: border-box;
    list-style: none;
    cursor: pointer;
  }
  .season-page .ms-group > summary { padding-right: 40px; }
  .season-page .ms-group > summary:hover,
  .season-page .ms-group.quiet:hover { background: var(--ops-hover-wash); }
  .season-page .ms-group[open] > summary { border-radius: 0; }
  .season-page .ms-group.quiet > .ms-summary { cursor: pointer; }
  .season-page .ms-group > :is(summary, .ms-summary) .ms-due {
    min-width: 0;
    font: 600 13px/18px var(--dp5-font);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    color: var(--dp5-text);
  }
  .season-page .ms-group .ms-due-l {
    font: 400 11px/12px var(--dp5-font);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ops-text-tertiary);
  }
  .season-page .ms-group > :is(summary, .ms-summary) .ms-ev { gap: 1px; min-width: 0; }
  .season-page .ms-ev-name { font: 500 14px/20px var(--dp5-font); color: var(--ops-text-primary); }
  .season-page .ms-group > :is(summary, .ms-summary) .ms-sub { font: 400 12px/16px var(--dp5-font); color: var(--dp5-text-3); }
  .season-page .ms-group > summary .ms-chev {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--ops-text-tertiary);
    pointer-events: none;
  }
  .season-page .ms-group[open] > summary .ms-chev { transform: translateY(-50%) rotate(180deg); }
  .season-page .ms-group > summary .ms-chev svg { display: block; }

  .season-page .ms-rows { padding: 0 8px 8px; border-top: 1px solid var(--ops-line-default); }
  .season-page .ms-cols {
    display: grid;
    grid-template-columns: 32px 64px minmax(0, 1fr) 72px 72px 104px;
    align-items: center;
    column-gap: 8px;
    height: 28px;
    padding: 0 8px;
    font: 500 11px/28px var(--dp5-font);
    letter-spacing: .04em;
    color: var(--ops-text-tertiary);
    border-bottom: 1px solid var(--ops-line-default);
  }
  .season-page .ms-cols .ms-col-lead { text-align: left; }
  .season-page .ms-cols .ms-col-in { text-align: right; }

  .season-page .ms-group > .ms-rows .ms-row,
  .season-page .ms-row {
    display: grid;
    grid-template-columns: 32px 64px minmax(0, 1fr) 72px 72px 104px;
    align-items: center;
    column-gap: 8px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    margin: 0;
    padding: 0 8px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--ops-line-default);
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
  }
  .season-page .ms-rows .ms-row:last-child { border-bottom: 0; }
  .season-page .ms-row:hover { background: var(--ops-hover-wash); }
  .season-page .ms-row .ms-due {
    min-width: 0;
    font: 400 13px/20px var(--dp5-font);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    color: var(--dp5-text-2);
  }
  .season-page .ms-row .ms-phase {
    min-width: 0;
    display: block;
    font: 400 13px/20px var(--dp5-font);
    color: var(--dp5-text);
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .season-page .ms-row .ms-lead {
    display: block;
    min-width: 0;
    font: 400 12px/16px var(--dp5-font);
    font-variant-numeric: tabular-nums;
    color: var(--ops-text-tertiary);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .season-page .ms-row .ms-ev { display: none; }
  .season-page .ms-row .ms-when {
    min-width: 0;
    justify-self: end;
    text-align: right;
    font: 400 12px/16px var(--dp5-font);
    font-variant-numeric: tabular-nums;
    color: var(--dp5-text-3);
  }
  .season-page .ms-row.late .ms-when { color: var(--dp5-bad); font-weight: 500; }
  .season-page .ms-row.soon .ms-when { color: var(--dp5-warn); }
  .season-page .ms-row.handled .ms-when { color: var(--dp5-text-3, var(--ops-text-tertiary)); }

  .season-page .ms-row .ms-add,
  .season-page .ms-row .ms-restore {
    position: relative;
    height: 32px;
    min-height: 32px;
    width: auto;
    min-width: 0;
    padding: 0 8px;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--ops-text-secondary);
    font: 500 13px/32px var(--dp5-font);
    border-radius: var(--dp5-r-ctl);
    justify-self: end;
  }
  .season-page .ms-row .ms-add::after,
  .season-page .ms-row .ms-restore::after {
    content: "";
    position: absolute;
    inset: -4px 0;
  }
  .season-page .ms-row .ms-add:hover,
  .season-page .ms-row .ms-restore:hover {
    color: var(--ops-text-primary);
    background: none;
    border: 0;
    box-shadow: none;
    transform: none;
  }
  .season-page .ms-row .ms-add:focus-visible,
  .season-page .ms-row .ms-restore:focus-visible {
    outline: none;
    box-shadow: var(--dp5-focus, inset 0 0 0 1.5px var(--dp5-text));
  }
  .season-page .ms-row .ms-add.is-done { color: var(--dp5-green); }
  .season-page .ms-row .ms-add:disabled:not(.is-done) { opacity: .5; }
  .season-page .ms-check:disabled { opacity: .5; }

  .runway-card .sub, .season-card .sub { font: 400 12px/16px var(--dp5-font); color: var(--dp5-text-3); }
  .chartcard svg .sv-mut { fill: var(--dp5-text-3); }
  .season-card { margin-bottom: 8px; }
  .runway-card .runway-scroll { overflow: visible; }
  .runway-card .runway-scroll svg { min-width: 0; max-width: 100%; display: block; }
  .runway-card svg text { fill: var(--dp5-text-2); font-weight: 400; font-family: var(--dp5-font); }
  .modal .season-weeks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
}

.season-page .season-card {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  box-sizing: border-box;
  margin: 0 0 8px;
  padding: 0 8px 0 16px;
  overflow: hidden;
}
.season-page .season-card.late { border-left: 3px solid var(--ops-status-bad); }
.season-page .season-card.soon { border-left: 3px solid var(--ops-status-warn); }
.season-page .season-card h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font: 500 14px/20px var(--dp5-font, Inter, system-ui, sans-serif);
  letter-spacing: 0;
  color: var(--ops-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.season-page .season-card .sc-date,
.season-page .season-card .sc-count,
.season-page .season-card .sc-open {
  flex: none;
  background: none;
  border: 0;
  height: auto;
  padding: 0;
  font: 400 13px/20px var(--dp5-font, Inter, system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  color: var(--ops-text-secondary);
  white-space: nowrap;
}
.season-page .season-card .sc-open { color: var(--ops-text-tertiary); }
.season-page .season-card .sc-edit {
  flex: none;
  margin: 0;
  height: 28px;
  min-height: 28px;
  width: auto;
  min-width: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: none;
  box-shadow: none;
  color: var(--ops-text-secondary);
  font: 500 13px/28px var(--dp5-font, Inter, system-ui, sans-serif);
}
.season-page .season-card .sc-edit::before { content: none; }
.season-page .season-card .sc-edit:hover { color: var(--ops-text-primary); background: none; transform: none; }
.season-page .season-card .sc-edit:focus-visible { outline: none; box-shadow: var(--dp5-focus, inset 0 0 0 1.5px var(--dp5-text)); }
.season-page .season-card.is-selected.late { border-left-color: var(--ops-status-bad); }
.season-page .season-card.is-selected.soon { border-left-color: var(--ops-status-warn); }

@media (max-width: 768px) {
  .season-page { padding-bottom: 96px; }
  .season-page .ms-cols { display: none !important; }
  .season-page .ms-group .ms-row .ms-due,
  .season-page .ms-row .ms-ev,
  .season-page .ms-row .ms-lead,
  .season-page .ms-row .ms-add { display: none !important; }
  .season-page .ms-handled .ms-when,
  .season-page .ms-handled .ms-ev { display: none; }
  .season-page .ms-check,
  .season-page .ms-tick {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .season-page .ms-group .ms-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    margin: 0;
    padding: 0 8px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--ops-line-default);
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    flex-wrap: nowrap;
  }
  .season-page .ms-handled .ms-row {
    display: grid;
    grid-template-columns: 44px 56px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    margin: 0;
    padding: 0 8px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--ops-line-default);
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
  }
  .season-page .ms-rows { padding: 0 8px 8px; }
  .season-page .ms-rows .ms-row:last-child { border-bottom: 0; }
  .season-page .ms-row .ms-phase {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font: 400 14px/20px var(--dp5-font, Inter, system-ui, sans-serif);
    color: var(--ops-text-secondary);
  }
  .season-page .ms-group .ms-cols + .ms-row .ms-phase {
    font: 500 15px/20px var(--dp5-font, Inter, system-ui, sans-serif);
    color: var(--ops-text-primary);
  }
  .season-page .ms-row .ms-when {
    min-width: 0;
    justify-self: end;
    text-align: right;
  }
  .season-page .ms-row .ms-restore {
    height: 44px;
    min-height: 44px;
    width: auto;
    min-width: 0;
    padding: 0 8px;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--ops-text-secondary);
    font: 400 12px/16px var(--dp5-font, Inter, system-ui, sans-serif);
    justify-self: end;
    text-align: right;
  }
  .season-page .ms-row .ms-restore:hover {
    color: var(--ops-text-primary);
    background: none;
    border: 0;
  }
  .season-page .ms-group.late { border-left: 4px solid var(--ops-status-bad); }
  .season-page .ms-group.soon { border-left: 4px solid var(--ops-status-warn); }
}
/* Handled rows: check, due, phase, event name, Restore. The when cell stays out of the grid. */
@media (min-width: 1440px) {
  .season-page .ms-handled .ms-row {
    grid-template-columns: 32px 64px minmax(0, 1fr) minmax(0, 1fr) auto;
  }
  .season-page .ms-handled .ms-row .ms-when,
  .season-page .ms-handled .ms-row .ms-ev { display: none; }
  .season-page .ms-handled .ms-row .ms-lead { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .season-page .ms-check::before { content: none; }
}

/* A field's focus is the kit's 1.5px text-colour inset . The resting edge stays line-strong. */
.filters input:focus-visible, .filters select:focus-visible, .wb-head input:focus-visible,
.pin-gate input:focus-visible, .who select:focus-visible,
.modal :is(input, select, textarea):focus-visible {
  outline: none;
  border-color: transparent;
  box-shadow: var(--dp5-focus);
}
.cal-side .cal-move-input,
.who select,
.pin-gate input { box-shadow: none; }

/* =======================================================================
   Suite pass 2026-09-22. The hex values are the owner's, written out so a
   later token rename cannot drift them. Loaded last, so they win.
   ======================================================================= */

[hidden] { display: none !important; }

table.all th,
.dow { color: var(--ops-text-secondary); }
.tc-cell,
.tmeta,
.owner,
.screen-sub { color: var(--ops-text-secondary); }

.check,
.task .check {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--ops-line-strong);
  background: transparent;
}
.check:hover { border-color: var(--ops-text-primary); }
.task.done .check,
.check.on {
  background: var(--ops-selected-bg);
  border-color: var(--ops-selected-bg);
  color: var(--ops-selected-text);
}
.check:not(.ro)::after {
  width: 36px;
  height: 36px;
  border-radius: 4px;
}
@media (pointer: coarse) {
  .check:not(.ro)::after { width: 44px; height: 44px; }
}

.who-chips { display: inline-flex; align-items: center; gap: 4px; }
.who-chips .dp5-who {
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  gap: 0;
  border-radius: 4px;
  background: var(--hue, var(--ops-bg-surface-press));
}
.who-chips .dp5-who__i {
  width: 24px;
  height: 24px;
  border-radius: 0;
  background: transparent;
  color: var(--dp5-ink, var(--ops-text-on-category));
  font-size: 12px;
}

.btn.primary,
#fab {
  height: 40px;
  min-height: 40px;
}
.btn.primary:focus-visible,
#fab:focus-visible {
  outline: none;
  box-shadow: var(--dp5-focus-ink);
}
@media (pointer: coarse) {
  .btn.primary { height: 44px; min-height: 44px; }
}

#tabs button { color: var(--ops-text-secondary); }
#tabs button .tab-ic { stroke: currentColor; }
#tabs button.active { color: var(--ops-text-primary); }
#tabs button.active .tab-ic { stroke: currentColor; }

.day.today,
.cal-titled .day.today {
  background: var(--ops-bg-surface);
  border-color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ops-focus);
}
.day.sel:not(.today),
.cal-titled .day.sel:not(.today) {
  background: var(--ops-bg-surface);
  border-color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ops-focus);
}
.cal-dots { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.cal-dots i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hue, var(--ops-text-secondary));
}
.cal-item,
.cal-more { display: none; }
.cal-today-w { color: var(--ops-text-secondary); }
.kpi-chip {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  height: auto;
  min-height: 0;
  box-shadow: none;
  font: 600 13px/18px var(--dp5-font, Inter, system-ui, sans-serif);
  color: var(--ops-text-secondary);
}
.kpi-chip.g-on_pace,
.kpi-chip.g-reached { color: var(--dp5-good); }
.kpi-chip.g-close { color: var(--dp5-warn); }
.kpi-chip.g-behind { color: var(--dp5-bad); }
.rk-bar i.s-on_track,
.rk-bar i.s-done { background: var(--dp5-good); }
.rk-bar i.s-behind { background: var(--dp5-warn); }
.rk-bar i.s-at_risk { background: var(--dp5-bad); }

@media (min-width: 1440px) {
  .topbar { width: 220px; background: var(--ops-bg-canvas); }
  header.topbar nav.dp2-nav button.active {
    background: transparent;
    color: var(--ops-text-primary);
    box-shadow: inset 2px 0 0 var(--ops-nav-marker);
  }
  header.topbar nav.dp2-nav button.active .tab-ic { stroke: var(--ops-text-primary); }
  :root { --panel-w: 520px; }
  .hdr { min-height: 72px; }
  .cal-side .task { grid-template-columns: 24px minmax(0, 1fr) 88px; }
  .calendar.cal-titled { grid-auto-rows: 64px; flex: none; height: auto; align-self: start; overflow: visible; }
}
@media (min-width: 1440px) {
  #fab { width: auto; min-width: 104px; height: 40px; min-height: 40px; }
}
@media (min-width: 1440px) and (pointer: coarse) {
  #fab { height: 44px; min-height: 44px; }
}

@media (max-width: 768px) {
  header.topbar nav.dp2-nav,
  header.topbar nav.dp2-nav.has-fab,
  body > .topbar .dp2-nav {
    background: var(--ops-bg-canvas) !important;
    border: 0 !important;
    border-radius: 0 !important;
    min-height: 56px !important;
    height: calc(56px + env(safe-area-inset-bottom)) !important;
    padding: 0 0 env(safe-area-inset-bottom) !important;
    box-shadow: none !important;
  }
  header.topbar nav.dp2-nav button {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 12px !important;
    color: var(--ops-text-secondary) !important;
    background: transparent !important;
    min-height: 56px;
    height: auto;
    border-radius: 0;
    box-shadow: none;
  }
  header.topbar nav.dp2-nav button.active {
    color: var(--ops-text-primary) !important;
    background: transparent !important;
    box-shadow: inset 0 2px 0 var(--ops-nav-marker) !important;
  }
  header.topbar nav.dp2-nav button.active .tab-ic { stroke: var(--ops-text-primary) !important; }

  .task:not(.add-sub):not(.task-head) .tname { font-size: 16px; line-height: 22px; }
  .task .tmeta { font-size: 13px; line-height: 18px; color: var(--ops-text-secondary); }
  #view { padding-bottom: 72px; }
  .hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 56px; }
  #fab {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    width: auto;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0;
  }
  .fab-label { display: inline; }
  .fab-plus { display: none; }
  #modal-root .overlay {
    padding: 0;
    place-items: stretch;
    background: var(--ops-bg-panel);
    z-index: 80;
  }
  #modal-root .overlay > .modal {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .cal-split { display: flex; flex-direction: column; gap: 16px; }
  .cal-side {
    position: static;
    max-height: none;
    width: 100%;
  }
  .calendar.cal-titled,
  .calendar {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: 48px;
  }
  .day { min-height: 48px; background: var(--ops-bg-surface); }
}

/* The v3 focus alias in the kit is still a green 2px line. Point it at the text colour
   so any leftover inset that reads the alias is the 1.5px text line. */
.dpt-v5 {
  --dp3-focus: var(--dp5-text);
  --dp3-focus-w: 1.5px;
}
::placeholder { color: var(--ops-text-tertiary); opacity: 1; }
.pin-label { text-transform: none; letter-spacing: 0; color: var(--ops-text-secondary); font: 500 12px/16px var(--dp5-font, Inter, system-ui, sans-serif); }
.pin-gate input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--ops-status-bad); border-color: transparent; }
.btn.ghost {
  height: 40px;
  min-height: 40px;
  background: transparent;
  color: var(--ops-text-primary);
  border: 1.5px solid var(--ops-line-strong);
  border-radius: 4px;
}
.btn.ghost:hover { background: var(--ops-hover-wash); }

/* =======================================================================
   Round 2, 2026-09-22. Desktop composition. Phone rules above stay.
   ======================================================================= */
.screen-sub,
.card-empty,
.kpi-line,
.kpi-why,
.kpi-chip,
.empty,
.sub { color: var(--ops-text-secondary); }
.task.done { opacity: 1; }
.task.done .tname,
.task.done .tc-cell,
.task.done .owner { color: var(--ops-text-tertiary); }
.task.done .tname { text-decoration: line-through; }

.hdr-actions { display: flex; align-items: center; gap: 8px; }

.tile,
.chartcard,
.rk-card,
.cal-side {
  background: var(--ops-bg-surface);
  border: 1px solid var(--ops-line-default);
}
.kpi-line,
.kpi-why,
.kpi-chip { font-size: 13px; line-height: 18px; color: var(--ops-text-secondary); }
.kpi-chip.g-on_pace,
.kpi-chip.g-reached { color: var(--dp5-good); }
.kpi-chip.g-close { color: var(--dp5-warn); }
.kpi-chip.g-behind { color: var(--dp5-bad); }

.rk-card .section-title { display: flex; align-items: center; gap: 8px; }
.rk-card .rk-add { margin-left: auto; }
.rk-scroll { overflow-x: auto; max-width: 100%; }
.rk-table { width: 100%; border-collapse: collapse; min-width: 560px; table-layout: fixed; }
.rk-table tr.rk-row { display: table-row; }
.rk-table tr.rk-row > td { display: table-cell; }
.rk-table th:nth-child(1) { width: 40%; }
.rk-table th:nth-child(2) { width: 14%; }
.rk-table th:nth-child(3) { width: 12%; }
.rk-table th:nth-child(4) { width: 20%; }
.rk-table th:nth-child(5) { width: 14%; text-align: right; }
.rk-table td { overflow: hidden; }
.rk-table th {
  font: 400 13px/18px var(--dp5-font, Inter, system-ui, sans-serif);
  color: var(--ops-text-secondary);
  text-align: left;
  font-weight: 400;
  padding: 0 8px 8px 0;
}
.rk-table td {
  height: 48px;
  border-top: 1px solid var(--ops-line-default);
  padding: 6px 8px 6px 0;
  vertical-align: middle;
  color: var(--ops-text-primary);
  font-size: 14px;
}
.rk-table .rk-due,
.rk-table .rk-frac { text-align: right; font-variant-numeric: tabular-nums; color: var(--ops-text-secondary); }
.rk-table .rk-name {
  font: 400 16px/20px var(--dp5-font, Inter, system-ui, sans-serif);
  color: var(--ops-text-primary);
  white-space: normal;
}
.rk-who { display: flex; align-items: center; gap: 8px; color: var(--ops-text-secondary); white-space: nowrap; min-width: 0; }
.rk-who > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.rk-prog-in { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rk-table .rk-frac { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.rk-bar { display: block; height: 8px; border-radius: 2px; background: var(--ops-bg-sunken); overflow: hidden; flex: none; min-width: 0; }
.rk-bar i { display: block; height: 8px; border-radius: 2px; }
.rk-state { display: flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; color: var(--ops-text-primary); min-width: 0; }
.rk-state > span { overflow: hidden; text-overflow: ellipsis; }
.rk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ops-text-secondary); flex: none; }
.rk-dot.s-on_track,
.rk-dot.s-done,
.rk-bar i.s-on_track,
.rk-bar i.s-done { background: var(--dp5-good, var(--ops-status-good)); }
.rk-dot.s-behind,
.rk-bar i.s-behind { background: var(--dp5-warn, var(--ops-status-warn)); }
.rk-dot.s-at_risk,
.rk-bar i.s-at_risk { background: var(--dp5-bad, var(--ops-status-bad)); }
.rk-row { cursor: pointer; }
.rk-row:hover { background: var(--ops-hover-wash); }
.rk-row:focus-visible { outline: none; box-shadow: none; background: var(--ops-hover-wash); } /* no focus line on rows */

@media (min-width: 1440px) {
  .screen-title { font: 600 28px/34px var(--dp5-font, Inter, system-ui, sans-serif); color: var(--ops-text-primary); }
  .screen-sub { font-size: 14px; line-height: 20px; color: var(--ops-text-secondary); }
  .hdr { align-items: center; }
  .hdr-actions { margin-left: auto; }
  #fab { margin-left: 8px; }
  .cal-nav {
    height: 40px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ops-line-default);
    background: var(--ops-bg-surface);
    color: var(--ops-text-primary);
  }
  .cal-split { display: block; }
  .cal-page,
  .cal-main { width: 100%; max-width: none; }
  .calendar.cal-titled {
    width: 100%;
    align-self: stretch;
    flex: 1 1 auto;
    height: auto;
    min-height: calc(32px + 6 * 96px);
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: 32px repeat(6, minmax(96px, 1fr));
    overflow: hidden;
    background: var(--ops-line-default);
  }
  .cal-titled .day { min-height: 96px; align-items: stretch; background: var(--ops-bg-surface); }
  .cal-titled .day.outside { background: var(--ops-bg-panel); }
  .cal-titled .dow { color: var(--ops-text-secondary); font-size: 13px; }
  .cal-titled .cal-item,
  .cal-titled .cal-more { display: flex; }
  .cal-titled .cal-dots { display: none; }
  .cal-titled .cal-item {
    height: 22px;
    min-height: 22px;
    color: var(--ops-text-primary);
    font-size: 13px;
    background: color-mix(in srgb, var(--hue, var(--ops-bg-surface-press)) 32%, var(--ops-bg-surface));
    border-left: 3px solid var(--hue, var(--ops-text-secondary));
  }
  .cal-titled .cal-more { display: block; font: 500 13px/18px var(--dp5-font, Inter, system-ui, sans-serif); color: var(--ops-text-secondary); padding-left: 4px; }
  .cal-titled .day.today,
  .day.today {
    background: var(--ops-bg-surface);
    box-shadow: inset 0 0 0 1.5px var(--ops-focus);
  }
  .cal-titled .day.sel:not(.today) { box-shadow: inset 0 0 0 1.5px var(--ops-focus); }
  .cal-side {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--panel-w, 520px);
    height: 100vh;
    max-height: none;
    z-index: 30;
    margin: 0;
    border-radius: 0;
    border: 0;
    border-left: 1px solid var(--ops-line-default);
    background: var(--ops-bg-surface);
  }
  body:has(#modal-root .overlay) .cal-side { display: none; }
}

@media (min-width: 1440px) {
  .calendar.cal-titled {
    min-height: max(calc(32px + 6 * 120px), calc(100vh - 180px));
    grid-template-rows: 32px repeat(6, minmax(120px, 1fr));
  }
  .cal-titled .day { min-height: 120px; }
}

@media (pointer: coarse) {
  .cal-nav,
  .btn.primary,
  #fab { min-height: 44px; height: 44px; }
}

/* =======================================================================
   Later pass: coaches removed from Ops, Today formatting, a livelier kanban board,
   more contrast with cards, text, and data fields, button alignment and hover colour.

   frame.css is the last sheet index.html loads, so this block has the last word
   over style.css and linear.css. Item 1 is server-side (OWNER_CHOICES).
   ======================================================================= */

/* ---------------------------------------------------- buttons: hover ----
   Hover was green text while active was white, because two eras of CSS
   met: style.css still hovers to --dp3-link (green) while every selected state
   was moved to the white slab. One answer now - hover lifts the colour the
   control already has (text goes white, an outlined control gets a brighter
   edge and a faint white wash); green is left to mean the one accent, the
   active nav rail. Matches the standing ruling: hover is white, never green. */
.more-views button:hover,
.more-views.seg button:hover:not(.is-here),
.dp2-nav button:hover,
.ms-jump:hover,
.dg-opt:hover,
.wb-link:hover,
.wb-more:hover,
.iconbtn:hover,
button.acct-row:not([disabled]):not([aria-disabled="true"]):hover :is(.n, .chev) {
  color: var(--dp5-text);
}
.more-views.seg button:hover:not(.is-here) { background: var(--dp5-secondary-wash); }
/* And one selected state for every segmented control. The Plan switch painted its selected tab
   --dp5-raised while the Metrics Month/Year switch beside it used the white slab, which looked inconsistent. White slab wins: it is what every other selected control does. */
.more-views.seg button.is-here,
.more-views.seg button[aria-selected="true"] {
  background: var(--dp5-primary);
  color: var(--dp5-primary-ink);
  font-weight: 600;
}
/* The sidebar tab hovers to white text. It resolved to --dp5-text-2 before, so a hover did
   almost nothing, and the ruling is that a tab hover is white and never green. */
header.topbar nav.dp2-nav button:hover:not(.active) { color: var(--dp5-text); }
header.topbar nav.dp2-nav button:hover:not(.active) .tab-ic { stroke: var(--dp5-text); }
/* #tabs is an ID, so it outranks every selector above and the tab hovered to nothing.
   Matched at the same weight instead of reaching for !important. */
#tabs button:hover { color: var(--ops-text-primary); }
.iconbtn:hover,
.dg-opt:hover,
.wb-link:hover,
.wb-more:hover,
#menu-btn:hover,
#menu-btn.avatar-btn:hover { border-color: var(--dp5-line-strong); background: var(--dp5-secondary-wash); }
button.acct-row:not([disabled]):not([aria-disabled="true"]):hover .acct-ic { stroke: var(--dp5-text); }
.ms-jump:hover { text-decoration: underline; }
/* A row or a card hovers by lifting its fill, not by turning its edge green. */
.task:hover { border-color: var(--dp5-line-card); }
.check:hover { border-color: var(--dp5-text); }

/* ---------------------------------------------------- (4) contrast: cards ----
   Ops had walked the card edge back to #3A3A3A, which is 1.35:1 on the canvas -
   under the 3:1 WCAG 1.4.11 sets for a non-text boundary, and the reason the
   cards read as flat. The kit settled this: on a dark canvas the
   card FILL cannot carry the separation (any fill strong enough collides with
   --dp5-raised), so the edge is what draws the card. Put Ops back on the kit. */
.tile,
.chartcard,
.rk-card,
.cal-side {
  border: 1px solid var(--dp5-line-card);
  box-shadow: var(--dp5-shadow-card);
}

/* ---------------------------------------------------- (4) contrast: fields ----
   A field was painted in --page on a #232323 panel, i.e. DARKER than
   the surface it sits on, so it read as a hole rather than as a control. The kit
   already owns this (.dp5-field): fill is --dp5-raised, edge is
   --dp5-line-strong at 3.17:1 on a card. Adopt it instead of Ops' own recipe. */
.filters select, .filters input,
.modal input, .modal textarea, .modal select,
.wb-head input,
:is(.modal) :is(input, select),
.c-form input,
.cal-nav {
  background: var(--dp5-raised);
  color: var(--dp5-text);
  border: 1px solid var(--dp5-line-strong);
}
.modal input::placeholder,
.c-form input::placeholder,
.modal textarea::placeholder { color: var(--dp5-placeholder); opacity: 1; }
.cal-nav:hover { background: var(--dp5-raised-hover); }
/* Owner and category chips: an unselected chip is an outline, a selected one is
   the same white slab the selected tab uses. Both were grey on grey before. */
.editor-chips .pchip,
.due-chips .pchip {
  background: transparent;
  border: 1px solid var(--dp5-line-strong);
  color: var(--dp5-text-2);
}
.editor-chips .pchip:hover,
.due-chips .pchip:hover { background: var(--dp5-secondary-wash); color: var(--dp5-text); }
.due-chips .dp5-fchip.is-on, .editor-chips .dp5-fchip.is-on,
.due-chips .dp5-fchip[aria-pressed="true"], .editor-chips .dp5-fchip[aria-pressed="true"] {
  background: var(--dp5-primary);
  border-color: var(--dp5-primary);
  color: var(--dp5-primary-ink);
  font-weight: 600;
}

/* ---------------------------------------------------- (4) contrast: text ---- */
.card-empty,
.rk-hint { color: var(--dp5-text-2); }
.section-title .count { color: var(--dp5-text-2); }

/* public/navy.css
   Look C tokens, then Projects, Metrics, All tasks, Trends,
   Win-Back, empty states, skeletons, the screen title, the stale strip
   and the install card.
   Chassis, pv-*, Season and #modal-root sheets are other files. */

/* Set on html and on body. The kit redeclares --dp5-* on both, and a custom property on body beats one inherited from html. --dp5-primary stays white because it paints selected slabs and toasts. */
html.ops-navy.dpt-v5,
html.ops-navy body.dpt-dark,
body.ops-navy.dpt-dark {
  --dp5-canvas: var(--ops-bg-canvas);
  --dp5-surface: var(--ops-bg-panel);
  --dp5-raised: var(--ops-bg-surface);
  --dp5-raised-hover: var(--ops-bg-surface-hover);
  --dp5-raised-press: var(--ops-bg-surface-press);
  --dp5-line: var(--ops-line-default);
  --dp5-line-canvas: var(--ops-line-default);
  --dp5-line-strong: var(--ops-line-strong);
  --dp5-line-card: var(--ops-line-default);
  --dp5-skel: var(--ops-bg-surface-hover);
  --dp5-tabbar: var(--ops-bg-canvas);
  --dp5-text: var(--ops-text-primary);
  --dp5-text-2: var(--ops-text-secondary);
  --dp5-text-3: var(--ops-text-tertiary);
  --dp5-placeholder: var(--ops-text-placeholder);
  --dp5-text-off: var(--ops-text-tertiary);
  --dp5-ink: var(--ops-text-on-category);
  --dp5-primary-ink: var(--ops-selected-text);
  --dp5-focus: inset 0 0 0 1.5px var(--ops-focus);
  --dp5-focus-ink: inset 0 0 0 1.5px var(--ops-selected-text);
  /* Control edges stay at 30%. */
  --dp5-shadow-card: inset 0 0 0 1px var(--ops-line-default), 0 1px 0 transparent inset, 0 14px 34px transparent;
  --dp5-green: var(--ops-status-good);
  --dp5-green-hover: var(--ops-status-good-hover);
  --dp5-bad: var(--ops-status-bad);
  --dp5-r-ctl: 8px;
  --dp5-r-chip: 6px;
  --dp5-r-badge: 6px;
  --dp5-r-field: 8px;
  --dp5-r-card: 8px;
  --dp5-r-sheet: 8px;

  --page: var(--ops-bg-canvas);
  --panel: var(--ops-bg-panel);
  --raised: var(--ops-bg-surface);
  --cardbg: var(--ops-bg-surface);
  --card: var(--ops-bg-surface);
  --well: var(--ops-bg-sunken);
  --surface: var(--ops-bg-canvas);
  --line: var(--ops-line-default);
  --line2: var(--ops-line-strong);
  --cardline: var(--ops-line-default);
  --t1: var(--ops-text-primary);
  --t2: var(--ops-text-secondary);
  --t3: var(--ops-text-tertiary);
  --text: var(--ops-text-primary);
  --sub: var(--ops-text-secondary);
  --muted: var(--ops-text-tertiary);
  --ink: var(--ops-text-on-status);
  --ink-fg: var(--ops-text-primary);
  --gold: var(--ops-accent-primary);
  --gold-edge: var(--ops-accent-primary);
  --dp2-action: var(--ops-accent-primary);
  --dp2-action-hover: var(--ops-accent-primary-hover);
  --dp2-gold: var(--ops-accent-primary);
  --gold-ink: var(--ops-accent-on-primary);
  --green: var(--ops-status-good);
  --green-dark: var(--ops-status-good);
  --red: var(--ops-status-bad);
  --danger: var(--ops-status-bad);
  --warn-wash: var(--ops-status-warn-wash);
  --danger-wash: var(--ops-status-bad-wash);
  --good-wash: var(--ops-status-good-wash);
  --dp3-text: var(--ops-text-primary);
  --dp3-text-2: var(--ops-text-secondary);
  --dp3-text-3: var(--ops-text-tertiary);
  --dp3-bg: var(--ops-bg-canvas);
  --dp3-card: var(--ops-bg-panel);
  --dp3-card-2: var(--ops-bg-sunken);
  --dp3-line: var(--ops-line-default);
  --dp3-line-strong: var(--ops-line-strong);
  --dp3-link: var(--ops-status-good);
  --dp3-focus: var(--ops-focus);
  --dp2-action-ink: var(--ops-accent-on-primary);
  --dp-text: var(--ops-text-primary);
  --dp-text-muted: var(--ops-text-secondary);
  --dp-line: var(--ops-line-default);
  --dp-surface: var(--ops-bg-canvas);
  --dp-surface-raised: var(--ops-bg-panel);
  --dp-surface-sunken: var(--ops-bg-sunken);
  --dp-shadow-t: none;
  --dp2-action-glow: none;
  --dp2-card-border-c: transparent;
  --dp2-good: var(--ops-status-good);
  --dp2-hairline: var(--ops-line-default);
  --dp4-tabbar: var(--ops-bg-canvas);
  --dp5-chart: var(--ops-status-good);
  --dp5-good: var(--ops-status-good);
  --dp5-green-tint: var(--ops-status-good-wash);
  --dp5-hue-0: var(--ops-category-red);
  --dp5-hue-1: var(--ops-category-blue);
  --dp5-hue-2: var(--ops-category-purple);
  --dp5-hue-3: var(--ops-category-orange);
  --dp5-hue-4: var(--ops-category-pink);
  --dp5-hue-5: var(--ops-category-teal);
  --dp5-primary: var(--ops-selected-bg);
  --dp5-primary-hover: var(--ops-text-secondary);
  --dp5-warn: var(--ops-status-warn);
  --radius: 8px;
  --dp3-r-pill: 6px;
  --dp2-r-pill: 6px;
}

/* The boot paint is an inline background on <html>. A class cannot beat it. */
html.ops-navy { background: var(--ops-bg-canvas) !important; color-scheme: var(--ops-color-scheme); }
body.ops-navy.dpt-dark { color-scheme: var(--ops-color-scheme); }

html.ops-navy body {
  background: var(--ops-bg-canvas);
  color: var(--ops-text-primary);
}

html.ops-navy input::placeholder,
html.ops-navy textarea::placeholder {
  color: var(--ops-text-tertiary);
  opacity: 1;
}

/* ------------------------------------------------------------------ shared
   Screens this file paints. Today and Plan (data-view=calendar) are not here. */
html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="trends"], [data-view="winback"]) {
  color: var(--ops-text-primary);
}

/* The shimmer stays inside the navy ladder. */
html.ops-navy .skel {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--ops-bg-surface) 25%, var(--ops-bg-surface-hover) 50%, var(--ops-bg-surface) 75%);
  background-size: 200% 100%;
}
html.ops-navy .skel-line { border-radius: 6px; }

html.ops-navy :is(.empty, .card-empty, .ui-empty p) {
  color: var(--ops-text-secondary);
  font-size: 13px;
  line-height: 1.45;
}
html.ops-navy .ui-empty h3,
html.ops-navy .boot-fail h2 {
  color: var(--ops-text-primary);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}
html.ops-navy .boot-fail p { color: var(--ops-text-secondary); font-size: 13px; }
html.ops-navy .boot-fail a,
html.ops-navy .boot-fail-hint a { color: var(--ops-status-good); }
html.ops-navy .boot-fail .btn.primary {
  background: var(--ops-accent-primary);
  color: var(--ops-accent-on-primary);
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}
html.ops-navy .boot-fail .btn.primary:hover { background: var(--ops-accent-primary-hover); color: var(--ops-accent-on-primary); }
html.ops-navy .boot-fail .btn.primary:active { background: var(--ops-accent-primary-press); }
html.ops-navy .boot-fail .btn.primary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--ops-accent-on-primary);
}

/* Screen title. Hidden by the chassis on Today and Plan; shown everywhere else. */
html.ops-navy body:not([data-view="today"]):not([data-view="calendar"]) .hdr {
  height: auto;
  min-height: 56px;
  align-items: center;
  border-bottom: 0;
}
html.ops-navy body:not([data-view="today"]):not([data-view="calendar"]) .screen-title {
  font-size: 26px;
  line-height: 32px;
  font-weight: 600;
  color: var(--ops-text-primary);
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
html.ops-navy body:not([data-view="today"]):not([data-view="calendar"]) .screen-sub {
  font-size: 13px;
  line-height: 18px;
  color: var(--ops-text-secondary);
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

html.ops-navy .stale-strip {
  background: var(--ops-bg-surface);
  color: var(--ops-status-warn);
  border: 1px solid var(--ops-status-warn);
  border-radius: 8px;
  box-shadow: none;
}
html.ops-navy .stale-strip .stale-x {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--ops-status-warn);
  border-radius: 8px;
}
html.ops-navy .stale-strip .stale-x:hover { color: var(--ops-text-primary); background: transparent; }
html.ops-navy .stale-strip .stale-x:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--ops-focus);
}

html.ops-navy .install-card {
  background: var(--ops-bg-surface);
  border: 0;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--ops-line-default);
  color: var(--ops-text-primary);
}
html.ops-navy .install-h {
  color: var(--ops-text-primary);
  font-size: 15px;
  font-weight: 600;
}
html.ops-navy .install-p { color: var(--ops-text-secondary); font-size: 13px; }
html.ops-navy .install-steps li {
  background: var(--ops-bg-surface-hover);
  color: var(--ops-text-secondary);
  border-radius: 8px;
}
html.ops-navy .install-steps strong { color: var(--ops-text-primary); }
html.ops-navy .install-ic { color: var(--ops-status-good); }
html.ops-navy .install-close {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--ops-text-secondary);
  border-radius: 8px;
}
html.ops-navy .install-close:hover { background: transparent; color: var(--ops-text-primary); }
html.ops-navy .install-close:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--ops-focus);
}
html.ops-navy .install-go,
html.ops-navy .dp2-btn.install-go {
  background: var(--ops-accent-primary);
  color: var(--ops-accent-on-primary);
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  font-weight: 600;
}
html.ops-navy .install-go:hover,
html.ops-navy .dp2-btn.install-go:hover { background: var(--ops-accent-primary-hover); color: var(--ops-accent-on-primary); border: 0; }
html.ops-navy .install-go:active,
html.ops-navy .dp2-btn.install-go:active { background: var(--ops-accent-primary-press); }
html.ops-navy .install-go:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--ops-accent-on-primary);
}

/* Sheets keep their own file. */
html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="trends"], [data-view="winback"]) .btn.primary {
  background: var(--ops-accent-primary);
  color: var(--ops-accent-on-primary);
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  font-weight: 600;
}
html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="trends"], [data-view="winback"]) .btn.primary:hover {
  background: var(--ops-accent-primary-hover);
  color: var(--ops-accent-on-primary);
  border: 0;
}
html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="trends"], [data-view="winback"]) .btn.primary:active:not(:disabled) { background: var(--ops-accent-primary-press); }
html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="trends"], [data-view="winback"]) .btn.primary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--ops-accent-on-primary);
}
html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="trends"], [data-view="winback"]) .btn.primary:disabled {
  opacity: .45;
}

html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="trends"], [data-view="winback"]) :is(.btn.ghost, .btn:not(.primary), .iconbtn, .dp2-btn, .wb-more, .dp2-sec) {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--ops-text-secondary);
  border-radius: 8px;
}
html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="trends"], [data-view="winback"]) :is(.btn.ghost, .iconbtn, .dp2-btn, .wb-more, .dp2-sec):hover {
  background: transparent;
  border: 0;
  color: var(--ops-text-primary);
}
html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="trends"], [data-view="winback"]) :is(.wb-link, .jumpview, a:not(.skip-link)) {
  color: var(--ops-status-good);
}
html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="trends"], [data-view="winback"]) :is(.wb-link, .jumpview):hover {
  background: transparent;
  border: 0;
  color: var(--ops-status-good-hover);
}
html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="trends"], [data-view="winback"]) :is(.btn.warn, .btn.danger, .btn.ghost.danger, .iconbtn.danger) {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--ops-status-bad);
}
html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="trends"], [data-view="winback"]) :is(.btn.warn, .btn.danger, .btn.ghost.danger, .iconbtn.danger):hover {
  background: transparent;
  border: 0;
  color: var(--ops-status-bad);
}
html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="trends"], [data-view="winback"]) :is(button, a, summary, input, select, .rk-row):focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--ops-focus);
}
/* A white slab cannot show a white focus line. Navy ink on that slab only. */
html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="trends"], [data-view="winback"]) :is(.is-here, [aria-pressed="true"], [aria-selected="true"]):focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--ops-selected-text);
}

html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="trends"], [data-view="winback"]) :is(.filters input, .filters select, .wb-head input) {
  background: var(--ops-bg-surface);
  color: var(--ops-text-primary);
  border: 1px solid var(--ops-line-strong);
  border-radius: 8px;
  box-shadow: none;
}
html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="trends"], [data-view="winback"]) :is(.filters input, .filters select, .wb-head input):focus-visible {
  outline: none;
  border-color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ops-focus);
}
html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="trends"], [data-view="winback"]) select option {
  background: var(--ops-bg-surface);
  color: var(--ops-text-primary);
}

html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="trends"], [data-view="winback"]) :is(.more-views.seg) {
  background: var(--ops-bg-surface);
  border: 0;
  border-bottom: 0;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--ops-line-strong);
  padding: 3px;
  gap: 2px;
}
html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="trends"], [data-view="winback"]) :is(.more-views.seg) button {
  background: transparent;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  color: var(--ops-text-secondary);
}
html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="trends"], [data-view="winback"]) :is(.more-views.seg) button:hover {
  background: transparent;
  color: var(--ops-text-primary);
}
html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="trends"], [data-view="winback"]) :is(.more-views.seg) button:is(.is-here, [aria-selected="true"], [aria-pressed="true"]) {
  background: var(--ops-selected-bg);
  color: var(--ops-selected-text);
  box-shadow: none;
  font-weight: 600;
}
html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="trends"], [data-view="winback"]) .more-views:not(.seg) button {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--ops-status-good);
  border-radius: 8px;
}
html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="trends"], [data-view="winback"]) .more-views:not(.seg) button:hover {
  background: transparent;
  border: 0;
  color: var(--ops-status-good-hover);
}

html.ops-navy body:is([data-view="charts"], [data-view="winback"]) :is(.kpi-chip) {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  height: auto;
  color: var(--ops-text-secondary);
}
html.ops-navy body[data-view="charts"] .kpi-chip i,
html.ops-navy body[data-view="charts"] .rk-dot {
  border-radius: 50%;
}
html.ops-navy :is(.kpi-chip.g-on_pace, .kpi-chip.g-reached) { color: var(--ops-status-good); }
html.ops-navy :is(.kpi-chip.g-close) { color: var(--ops-status-warn); }
html.ops-navy :is(.kpi-chip.g-behind) { color: var(--ops-status-bad); }

html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="trends"], [data-view="winback"]) .section-title {
  color: var(--ops-text-primary);
  font-size: 15px;
  font-weight: 600;
}
html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="trends"], [data-view="winback"]) .section-title .count {
  background: var(--ops-bg-surface);
  color: var(--ops-text-secondary);
  border-radius: 6px;
}
html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="trends"], [data-view="winback"]) .section-title .hint {
  color: var(--ops-text-secondary);
  font-size: 13px;
}

html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="winback"]) .who-chips .dp5-who {
  border-radius: 50%;
  background: var(--hue, var(--ops-person-staff));
}
html.ops-navy body:is([data-view="projects"], [data-view="charts"], [data-view="winback"]) .who-chips .dp5-who__i {
  border-radius: 50%;
  color: var(--ops-text-on-category);
  background: transparent;
}
html.ops-navy body[data-view="charts"] :is(.tile, .chartcard, .rk-card) {
  background: var(--ops-bg-surface);
  border-radius: 8px;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: 0;
  box-shadow: inset 0 0 0 1px var(--ops-line-default);
  color: var(--ops-text-primary);
}
html.ops-navy body[data-view="charts"] :is(.chartcard h3) { color: var(--ops-text-primary); }
html.ops-navy body[data-view="charts"] :is(.kpi-line, .kpi-why, .wir-copy p, .rk-who, .rk-frac) {
  color: var(--ops-text-secondary);
}
html.ops-navy body[data-view="charts"] .kpi-line.is-bad { color: var(--ops-status-bad); }
html.ops-navy body[data-view="charts"] :is(.rk-bar, .dp5-prog) {
  background: var(--ops-bg-sunken);
  border-radius: 2px;
}
html.ops-navy body[data-view="charts"] .rk-bar i.s-on_track,
html.ops-navy body[data-view="charts"] .rk-bar i.s-done { background: var(--ops-status-good); }
html.ops-navy body[data-view="charts"] .rk-bar i.s-behind { background: var(--ops-status-warn); }
html.ops-navy body[data-view="charts"] .rk-bar i.s-at_risk { background: var(--ops-status-bad); }
html.ops-navy body[data-view="charts"] .rk-dot.s-on_track,
html.ops-navy body[data-view="charts"] .rk-dot.s-done { background: var(--ops-status-good); }
html.ops-navy body[data-view="charts"] .rk-dot.s-behind { background: var(--ops-status-warn); }
html.ops-navy body[data-view="charts"] .rk-dot.s-at_risk { background: var(--ops-status-bad); }
html.ops-navy body[data-view="charts"] :is(.rk-table) th {
  color: var(--ops-text-secondary);
  font-size: 13px;
}
html.ops-navy body[data-view="charts"] :is(.rk-table) :is(td, th[scope="row"]) {
  color: var(--ops-text-primary);
  border-top-color: var(--ops-line-default);
}
html.ops-navy body[data-view="charts"] .rk-row:hover { background: var(--ops-bg-surface-hover); }
html.ops-navy body[data-view="charts"] .rk-name {
  color: var(--ops-text-primary);
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
html.ops-navy body[data-view="charts"] .rk-add { color: var(--ops-status-good); }
html.ops-navy body[data-view="charts"] .rk-add:hover { color: var(--ops-status-good-hover); background: transparent; }

/* ------------------------------------------------------------------ Trends */

html.ops-navy body[data-view="trends"] .chartcard {
  background: var(--ops-bg-surface);
  border: 0;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--ops-line-default);
  color: var(--ops-text-primary);
}
html.ops-navy body[data-view="trends"] .chartcard h3 { color: var(--ops-text-primary); font-size: 15px; }
html.ops-navy body[data-view="trends"] .chartcard .sub,
html.ops-navy body[data-view="trends"] .sv-mut { color: var(--ops-text-secondary); fill: var(--ops-text-secondary); }
html.ops-navy body[data-view="trends"] .chartcard svg text { fill: var(--ops-text-secondary); }

html.ops-navy body[data-view="winback"] .wb-row.task {
  height: auto;
  min-height: 44px;
  margin-bottom: 8px;
  padding: 10px 12px;
  background: var(--ops-bg-surface);
  border: 0;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--ops-line-default);
  color: var(--ops-text-primary);
}
html.ops-navy body[data-view="winback"] .tname {
  color: var(--ops-text-primary);
  white-space: normal;
  overflow: visible;
  overflow-wrap: break-word;
}
html.ops-navy body[data-view="winback"] :is(.tmeta, .wb-parent, .mine-sub) { color: var(--ops-text-secondary); font-size: 13px; }
html.ops-navy body[data-view="winback"] .wb-next { color: var(--ops-status-good); }
html.ops-navy body[data-view="winback"] .chip.prog {
  background: var(--ops-bg-surface-hover);
  color: var(--ops-text-secondary);
  border: 0;
  border-radius: 6px;
  box-shadow: none;
}
html.ops-navy body[data-view="winback"] :is(.wb-link, .wb-log, .wb-more) {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--ops-status-good);
}
html.ops-navy body[data-view="winback"] :is(.wb-link, .wb-log, .wb-more):hover {
  background: transparent;
  border: 0;
  color: var(--ops-status-good-hover);
}

/* Shared kit rules that paint raw colours on Ops screens. */
html.ops-navy.dpt-dark .dp3-btn--ghost, html.ops-navy .dpt-dark .dp3-btn--ghost { background: var(--ops-hover-wash); }

/* Colour, surfaces, type and controls only. The chassis and the sheet dock stay in plan.css. --dp5-primary is left alone. */

html.ops-navy body[data-view="season"] #view,
html.ops-navy .season-page,
html.ops-navy #season-inspector,
html.ops-navy #modal-root,
html.ops-navy #toast-root,
html.ops-navy body.gated #view,
html.ops-navy .pin-gate {
  --nv-frame: var(--ops-bg-canvas);
  --nv-panel: var(--ops-bg-panel);
  --nv-raised: var(--ops-bg-surface);
  --nv-raised-2: var(--ops-bg-surface-hover);
  --nv-line: var(--ops-line-default);
  --nv-edge: var(--ops-line-strong);
  --nv-text: var(--ops-text-primary);
  --nv-text-2: var(--ops-text-secondary);
  --nv-text-3: var(--ops-text-tertiary);
  --nv-green: var(--ops-accent-primary);
  --nv-green-2: var(--ops-accent-primary-hover);
  --nv-ink: var(--ops-accent-on-primary);
  --nv-late: var(--ops-status-bad);
  --nv-soon: var(--ops-status-warn);
  --nv-focus: inset 0 0 0 1.5px var(--ops-focus);
  --nv-card: inset 0 0 0 1px var(--ops-line-strong);
  --nv-ring: inset 0 0 0 1px var(--ops-line-default);
  --nv-tile: var(--nv-ring), 0 1px 0 transparent inset, 0 14px 34px transparent;
  color: var(--nv-text);
  --dp5-canvas: var(--nv-frame);
  --dp5-surface: var(--nv-panel);
  --dp5-raised: var(--nv-raised);
  --dp5-raised-hover: var(--nv-raised-2);
  --dp5-raised-press: var(--nv-raised-2);
  --dp5-line: var(--nv-line);
  --dp5-line-canvas: var(--nv-line);
  --dp5-line-strong: var(--nv-edge);
  --dp5-line-card: var(--ops-line-default);
  --dp5-text: var(--nv-text);
  --dp5-text-2: var(--nv-text-2);
  --dp5-text-3: var(--nv-text-3);
  --dp5-placeholder: var(--ops-text-placeholder);
  --dp5-focus: var(--nv-focus);
  --dp5-shadow-card: var(--nv-tile);
  --dp5-secondary-wash: var(--ops-hover-wash);
  --dp5-r-ctl: 8px;
  --dp5-r-chip: 6px;
  --dp5-r-field: 8px;
  --dp5-r-card: 8px;
  --dp5-r-sheet: 8px;
  --page: var(--nv-frame);
  --panel: var(--nv-panel);
  --canvas: var(--nv-frame);
  --card: var(--nv-raised);
  --cardbg: var(--nv-raised);
  --raised: var(--nv-raised);
  --well: var(--nv-raised);
  --line: var(--nv-line);
  --line2: var(--nv-edge);
  --text: var(--nv-text);
  --t1: var(--nv-text);
  --t2: var(--nv-text-2);
  --t3: var(--nv-text-3);
  --sub: var(--nv-text-2);
  --muted: var(--nv-text-3);
  --shadow: none;
  --wk-list: var(--nv-panel);
  --wk-line: var(--nv-edge);
  --wk-card: var(--nv-raised);
  --wk-row-hover: var(--nv-raised-2);
  --dp3-text-2: var(--nv-text-2);
  --dp3-text-3: var(--nv-text-3);
  --dp3-link: var(--ops-accent-link);
}

html.ops-navy body[data-view="season"] #view {
  color: var(--nv-text);
}

html.ops-navy .season-page {
  color: var(--nv-text);
  font-family: Inter, system-ui, sans-serif;
}
html.ops-navy .season-page :is(.section-title, .ms-head) {
  color: var(--nv-text);
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
}
html.ops-navy .season-page .section-title .count,
html.ops-navy .season-page .section-title .hint,
html.ops-navy .season-page .ms-head .hint {
  background: none;
  border: 0;
  border-radius: 0;
  height: auto;
  padding: 0;
  color: var(--nv-text-2);
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
}
html.ops-navy .season-page .ms-stat { color: var(--nv-text-2); font-size: 13px; line-height: 20px; }
html.ops-navy .season-page .ms-stat .ms-up-n { color: var(--nv-text); }
html.ops-navy .season-page .ms-stat .ms-late-n { color: var(--nv-late); }
html.ops-navy .season-page .ms-stat .ms-sep { color: var(--nv-text-3); }
html.ops-navy .season-page .ms-due-l { color: var(--nv-text-3); font-size: 13px; letter-spacing: 0; text-transform: none; }

html.ops-navy .season-page .more-views.seg {
  background: var(--nv-raised);
  border: 0;
  border-radius: 8px;
  box-shadow: var(--nv-card);
  padding: 2px;
  gap: 2px;
}
html.ops-navy .season-page .more-views.seg button {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--nv-text-2);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}
html.ops-navy .season-page .more-views.seg button:hover:not(.is-here) {
  background: none;
  color: var(--nv-text);
}
html.ops-navy .season-page .more-views.seg button.is-here,
html.ops-navy .season-page .more-views.seg button[aria-selected="true"] {
  background: var(--ops-selected-bg);
  color: var(--ops-selected-text);
  border: 0;
  box-shadow: none;
}

html.ops-navy .season-page :is(.ms-jump, .ms-add-event) {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--ops-status-good);
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
}
html.ops-navy .season-page :is(.ms-jump, .ms-add-event):hover {
  background: none;
  border: 0;
  color: var(--ops-status-good);
  text-decoration: underline;
  text-underline-offset: 3px;
}
html.ops-navy .season-page .ms-add-event:disabled {
  color: var(--nv-text-3);
  text-decoration: none;
  opacity: 1;
}

html.ops-navy .season-page .ms-handled-toggle {
  background: var(--nv-raised);
  color: var(--nv-text-2);
  border: 0;
  border-radius: 8px;
  box-shadow: var(--nv-card);
}
html.ops-navy .season-page .ms-handled-toggle:hover {
  background: var(--nv-raised-2);
  color: var(--nv-text);
}
html.ops-navy .season-page .ms-handled-toggle.is-on {
  background: var(--ops-selected-bg);
  color: var(--ops-selected-text);
  box-shadow: none;
}
html.ops-navy .season-page .ms-handled-toggle.is-on :is(.ms-handled-n, .ms-chev) {
  background: none;
  color: var(--ops-selected-text);
}

html.ops-navy .season-page :is(.ms-clear, .ms-confirm .iconbtn) {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--nv-text-2);
  border-radius: 8px;
}
html.ops-navy .season-page :is(.ms-clear, .ms-confirm .iconbtn):hover {
  background: none;
  border: 0;
  color: var(--nv-text);
}
html.ops-navy .season-page .ms-confirm { color: var(--nv-text-2); font-size: 13px; }
html.ops-navy .season-page .ms-confirm .ms-confirm-yes,
html.ops-navy .season-page .ms-confirm .ms-confirm-yes:hover {
  background: none;
  border: 0;
  color: var(--nv-late);
}

html.ops-navy .season-page :is(.season-card, .runway-card, .ms-group, .ui-empty) {
  background: var(--nv-raised);
  border: 0;
  border-radius: 8px;
  box-shadow: var(--nv-tile);
  color: var(--nv-text);
}
html.ops-navy .season-page .runway-card { overflow: visible; }
html.ops-navy .season-page :is(.ms-group.late, .season-card.late) {
  box-shadow: inset 3px 0 0 var(--nv-late), var(--nv-tile);
}
html.ops-navy .season-page :is(.ms-group.soon, .season-card.soon) {
  box-shadow: inset 3px 0 0 var(--nv-soon), var(--nv-tile);
}
html.ops-navy .season-page :is(.ms-group.is-selected, .season-card.is-selected) {
  background: var(--nv-raised-2);
}
html.ops-navy .season-page :is(.ms-group.is-selected, .season-card.is-selected) {
  box-shadow: var(--nv-tile);
}
html.ops-navy .season-page .ms-group.is-selected.late,
html.ops-navy .season-page .season-card.is-selected.late {
  box-shadow: inset 3px 0 0 var(--nv-late), var(--nv-tile);
}
html.ops-navy .season-page .ms-group.is-selected.soon,
html.ops-navy .season-page .season-card.is-selected.soon {
  box-shadow: inset 3px 0 0 var(--nv-soon), var(--nv-tile);
}
html.ops-navy .season-page .ms-group > summary:hover,
html.ops-navy .season-page .ms-group.quiet:hover,
html.ops-navy .season-page .ms-row:hover {
  background: var(--ops-hover-wash);
}

html.ops-navy .season-page .ms-ev-name,
html.ops-navy .season-page .season-card h3 {
  color: var(--nv-text);
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  overflow-wrap: break-word;
}
html.ops-navy .season-page .season-card h3 { flex: 1 1 auto; min-width: 8em; }
html.ops-navy .season-page :is(.season-card, .ms-group > summary, .ms-group > .ms-summary) {
  height: auto;
  max-height: none;
  min-height: 48px;
}
html.ops-navy .season-page .ms-group > :is(summary, .ms-summary) .ms-sub,
html.ops-navy .season-page .season-card :is(.sc-date, .sc-open) {
  color: var(--nv-text-2);
  font-size: 13px;
  line-height: 20px;
}
html.ops-navy .season-page .ms-sub-late { color: var(--nv-late); }
html.ops-navy .season-page .ms-group > :is(summary, .ms-summary) .ms-due { color: var(--nv-text); }
html.ops-navy .season-page .ms-group > summary .ms-chev,
html.ops-navy .season-page .sc-started > summary::after { color: var(--nv-text-2); }

html.ops-navy .season-page .season-card .sc-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  border-radius: 0;
  height: auto;
  padding: 0;
  color: var(--nv-text-2);
  font-size: 13px;
  line-height: 20px;
}
html.ops-navy .season-page .season-card .sc-count::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nv-text-3);
}
html.ops-navy .season-page .season-card.late .sc-count { color: var(--nv-late); background: none; }
html.ops-navy .season-page .season-card.late .sc-count::before { background: var(--nv-late); }
html.ops-navy .season-page .season-card.soon .sc-count { color: var(--nv-soon); background: none; }
html.ops-navy .season-page .season-card.soon .sc-count::before { background: var(--nv-soon); }
html.ops-navy .season-page .season-card .sc-edit {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--nv-text-2);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}
html.ops-navy .season-page .season-card .sc-edit:hover {
  background: none;
  color: var(--nv-text);
}

html.ops-navy .season-page .ms-rows,
html.ops-navy .season-page .ms-cols,
html.ops-navy .season-page .ms-row {
  border-color: var(--nv-line);
}
html.ops-navy .season-page .ms-cols { color: var(--nv-text-3); font-size: 13px; letter-spacing: 0; text-transform: none; }
html.ops-navy .season-page .ms-row {
  background: none;
  box-shadow: none;
  height: auto;
  max-height: none;
  min-height: 40px;
}
html.ops-navy .season-page .ms-row .ms-phase,
html.ops-navy .season-page .ms-row .ms-lead,
html.ops-navy .season-page .ms-row .ms-ev {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  overflow-wrap: break-word;
}
html.ops-navy .season-page .ms-row .ms-phase { color: var(--nv-text); font-size: 15px; line-height: 22px; }
html.ops-navy .season-page .ms-row .ms-due,
html.ops-navy .season-page .ms-row .ms-lead,
html.ops-navy .season-page .ms-row .ms-when { color: var(--nv-text-2); font-size: 13px; }
html.ops-navy .season-page .ms-row.late .ms-when { color: var(--nv-late); }
html.ops-navy .season-page .ms-row.soon .ms-when { color: var(--nv-soon); }
html.ops-navy .season-page :is(.ms-add, .ms-restore) {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--ops-status-good);
  border-radius: 8px;
  font-weight: 700;
}
html.ops-navy .season-page :is(.ms-add, .ms-restore):hover {
  background: none;
  border: 0;
  color: var(--ops-status-good);
}
html.ops-navy .season-page .ms-add.is-done { color: var(--ops-status-good); }

html.ops-navy .season-page .ms-check {
  background: none;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}
html.ops-navy .season-page .ms-check .ms-circle {
  border: 1.5px solid var(--nv-text-2);
  background: none;
}
html.ops-navy .season-page .ms-check:hover { background: var(--ops-hover-wash); }
html.ops-navy .season-page .ms-check:hover .ms-circle { border-color: var(--nv-text); }
html.ops-navy .season-page .ms-tick { color: var(--ops-status-good); }

html.ops-navy .season-page .ui-empty h3 { color: var(--nv-text); font-size: 15px; }
html.ops-navy .season-page .ui-empty p,
html.ops-navy .season-page .runway-card .sub,
html.ops-navy .season-page .sc-started > summary .hint { color: var(--nv-text-2); font-size: 13px; }

html.ops-navy .season-page .rw-cell {
  background: var(--nv-panel);
  border: 0;
  border-radius: 8px;
  box-shadow: var(--nv-ring);
}
html.ops-navy .season-page .rw-m { color: var(--nv-text); font-size: 13px; }
html.ops-navy .season-page .rw-n,
html.ops-navy .season-page .rw-st { color: var(--nv-text-2); font-size: 13px; }
html.ops-navy .season-page .rw-cell.late .rw-st { color: var(--nv-late); }
html.ops-navy .season-page .rw-cell.late .rw-st::before { background: var(--nv-late); }
html.ops-navy .season-page .rw-cell.open .rw-st { color: var(--nv-soon); }
html.ops-navy .season-page .rw-cell.open .rw-st::before { background: var(--nv-soon); }
html.ops-navy .season-page .rw-cell.clear .rw-st::before { background: var(--ops-status-good); }
html.ops-navy .season-page .rw-cell.none :is(.rw-m, .rw-n) { color: var(--nv-text-3); }

html.ops-navy .season-page .sv-grid { stroke: var(--nv-line); }
html.ops-navy .season-page .sv-now { stroke: var(--nv-text); }
html.ops-navy .season-page .sv-mut { fill: var(--nv-text-3); }
html.ops-navy .season-page .rw-name { fill: var(--nv-text-2); }
html.ops-navy .season-page .rw-row:hover .rw-name,
html.ops-navy .season-page .rw-row.is-selected .rw-name { fill: var(--nv-text); }
html.ops-navy .season-page .rw-bar { fill: var(--ops-status-good); opacity: .45; }
html.ops-navy .season-page .rw-start,
html.ops-navy .season-page .rw-dot { fill: var(--ops-status-good); }
html.ops-navy .season-page .rw-dot.late { fill: var(--nv-late); }
html.ops-navy .season-page .rw-dot.soon { fill: var(--nv-soon); }
html.ops-navy .season-page .rw-dot.past,
html.ops-navy .season-page .rw-dot.handled { fill: var(--nv-text-3); opacity: 1; }
html.ops-navy .season-page .rw-tip {
  background: var(--nv-raised);
  color: var(--nv-text);
  border-radius: 8px;
  box-shadow: var(--nv-ring);
  font-size: 13px;
  line-height: 18px;
}

html.ops-navy .season-page :is(
  .ms-jump, .ms-add-event, .ms-handled-toggle, .ms-clear, .sc-edit,
  .ms-add, .ms-restore, .ms-check, .more-views.seg button, summary
):focus-visible {
  outline: none;
  box-shadow: var(--nv-focus);
}

/* The inspector injects its own stylesheet at runtime. These selectors are
   heavier, so they win on colour without moving its dock. */

html.ops-navy #season-inspector {
  background: var(--nv-panel);
  color: var(--nv-text);
  border: 0;
  box-shadow: var(--nv-ring);
}
html.ops-navy #season-inspector h2 {
  color: var(--nv-text);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  overflow-wrap: break-word;
}
html.ops-navy #season-inspector :is(.si-meta, .si-count, .si-date, .si-state) {
  color: var(--nv-text-2);
  font-size: 13px;
}
html.ops-navy #season-inspector h3 { color: var(--nv-text); font-size: 15px; line-height: 22px; }
html.ops-navy #season-inspector :is(.si-notes, footer) { border-top-color: var(--nv-line); }
html.ops-navy #season-inspector :is(.si-action, .si-raised) {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--ops-status-good);
  border-radius: 8px;
  font-weight: 700;
}
html.ops-navy #season-inspector :is(.si-action, .si-raised):hover:not(:disabled) {
  background: none;
  color: var(--ops-status-good);
}
html.ops-navy #season-inspector :is(.si-action, .si-raised):disabled { color: var(--nv-text-3); }
html.ops-navy #season-inspector button:focus-visible {
  outline: none;
  box-shadow: var(--nv-focus);
}

html.ops-navy #modal-root .overlay {
  background: transparent;
}
html.ops-navy #modal-root .overlay > .modal {
  background: var(--nv-panel);
  color: var(--nv-text);
  border: 0;
  box-shadow: var(--nv-ring);
  font-family: Inter, system-ui, sans-serif;
}
html.ops-navy #modal-root .modal h2 {
  color: var(--nv-text);
  font-family: Inter, system-ui, sans-serif;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
html.ops-navy #modal-root .modal h2.h-ic svg { color: var(--nv-soon); }
html.ops-navy #modal-root .modal .msub,
html.ops-navy #modal-root .modal label {
  color: var(--nv-text-2);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
}
html.ops-navy #modal-root .modal .msub b { color: var(--nv-text); font-weight: 600; }
html.ops-navy #modal-root .cad {
  background: none;
  border: 0;
  color: var(--nv-text-2);
  border-radius: 0;
  padding: 0;
  height: auto;
}
html.ops-navy #modal-root .notes {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--nv-text-2);
  border-radius: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.5;
}
html.ops-navy #modal-root :is(.more-fields, .pe-more, .comments) {
  border-top-color: var(--nv-line);
}
html.ops-navy #modal-root :is(.more-fields > summary, .pe-more > summary) {
  color: var(--nv-text-2);
  font-size: 13px;
  background: none;
  border: 0;
}
html.ops-navy #modal-root :is(.more-fields > summary, .pe-more > summary):hover { color: var(--nv-text); }
html.ops-navy #modal-root .comments > b {
  color: var(--nv-text-2);
  font-size: 13px;
  font-weight: 700;
}
html.ops-navy #modal-root .comment {
  background: var(--nv-raised);
  color: var(--nv-text);
  border: 0;
  border-radius: 8px;
  box-shadow: var(--nv-ring);
  font-size: 15px;
  line-height: 1.5;
}
html.ops-navy #modal-root .comment .c-meta { color: var(--nv-text-3); font-size: 13px; }
html.ops-navy #modal-root .empty,
html.ops-navy #modal-root .pe-saved,
html.ops-navy #modal-root .se-date {
  color: var(--nv-text-2);
  font-size: 13px;
  background: none;
  border: 0;
}
html.ops-navy #modal-root .se-date.past { color: var(--nv-text-3); }
html.ops-navy #modal-root .mact.sheet-foot,
html.ops-navy #modal-root :is(#te-form, #pe-fields, #se-fields) > .mact {
  background: var(--nv-panel);
  border-top: 1px solid var(--nv-line);
}

html.ops-navy #modal-root :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
  background: var(--ops-bg-field);
  color: var(--nv-text);
  border: 0;
  border-radius: 8px;
  box-shadow: var(--nv-card);
  font-size: 15px;
  line-height: 22px;
  color-scheme: var(--ops-color-scheme);
}
html.ops-navy #modal-root :is(input, textarea)::placeholder { color: var(--ops-text-placeholder); opacity: 1; }
html.ops-navy #modal-root :is(input, select, textarea):focus-visible {
  outline: none;
  border-color: transparent;
  box-shadow: var(--nv-focus);
}

html.ops-navy #modal-root :is(.btn, .dp2-btn, .dp3-btn, .dp5-btn, .iconbtn, .mclose) {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--nv-text-2);
  border-radius: 8px;
  font-weight: 600;
}
html.ops-navy #modal-root :is(.btn, .dp2-btn, .dp3-btn, .dp5-btn, .iconbtn, .mclose):hover {
  background: none;
  border: 0;
  color: var(--nv-text);
}
html.ops-navy #modal-root :is(.btn.primary, .dp3-btn--primary) {
  background: var(--nv-green);
  color: var(--ops-accent-on-primary);
  border: 0;
  border-radius: 8px;
  font-weight: 700;
}
html.ops-navy #modal-root :is(.btn.primary, .dp3-btn--primary):hover {
  background: var(--nv-green-2);
  color: var(--ops-accent-on-primary);
  border: 0;
}
html.ops-navy #modal-root :is(.btn.primary, .dp3-btn--primary):active:not(:disabled) { background: var(--ops-accent-primary-press); }
html.ops-navy #modal-root :is(.btn.warn, .btn.danger, .btn.ghost.danger, .iconbtn.danger, .c-del) {
  background: none;
  border: 0;
  color: var(--nv-late);
}
html.ops-navy #modal-root :is(.btn.warn, .btn.danger, .btn.ghost.danger, .iconbtn.danger, .c-del):hover {
  background: none;
  color: var(--nv-late);
  text-decoration: underline;
  text-underline-offset: 3px;
}
html.ops-navy #modal-root .c-form .btn {
  background: none;
  border: 0;
  color: var(--ops-status-good);
  font-weight: 700;
}
html.ops-navy #modal-root .c-form .btn:hover { background: none; color: var(--ops-status-good); }

html.ops-navy #modal-root :is(.pchip, .dp5-fchip, .dg-opt) {
  background: var(--nv-raised);
  color: var(--nv-text-2);
  border: 0;
  border-radius: 6px;
  box-shadow: var(--nv-card);
  font-weight: 600;
  font-size: 13px;
}
html.ops-navy #modal-root :is(.pchip, .dp5-fchip, .dg-opt):hover {
  background: var(--nv-raised-2);
  color: var(--nv-text);
  border: 0;
}
html.ops-navy #modal-root :is(
  .pchip.on, .pchip.is-on,
  .dp5-fchip.is-on, .dp5-fchip[aria-pressed="true"],
  .dg-opt.on
) {
  background: var(--ops-selected-bg);
  color: var(--ops-selected-text);
  border: 0;
  box-shadow: none;
}
html.ops-navy #modal-root :is(
  .pchip.on, .pchip.is-on,
  .dp5-fchip.is-on, .dp5-fchip[aria-pressed="true"],
  .dg-opt.on
):hover {
  background: var(--ops-selected-bg);
  color: var(--ops-selected-text);
}

html.ops-navy #modal-root :is(.pill, .kpi-chip, .rk-one) {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  height: auto;
  padding: 0;
  color: var(--nv-text-2);
}
html.ops-navy #modal-root :is(.rock, .kt-row, #pe-tasks .task) {
  background: transparent;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  color: var(--nv-text);
}
html.ops-navy #modal-root #pe-tasks .task:hover { background: var(--ops-hover-wash); }
html.ops-navy #modal-root :is(.tname, .kt-period, .kt-val) { color: var(--nv-text); }
html.ops-navy #modal-root :is(.kt-note, .kt-hint, .kt-kind) {
  color: var(--nv-text-2);
}
html.ops-navy #modal-root .who-chips .dp5-who {
  border-radius: 50%;
  color: var(--ops-text-on-category);
  background: var(--hue, var(--nv-raised-2));
}
html.ops-navy :is(#modal-root, .season-page, .pin-gate) .skel {
  background: var(--nv-raised-2);
  border-radius: 8px;
}
html.ops-navy :is(#modal-root, .season-page) .skel-line { border-radius: 6px; }
html.ops-navy #modal-root :is(button, a, input, select, textarea, summary, .pchip):focus-visible {
  outline: none;
  box-shadow: var(--nv-focus);
}
html.ops-navy #modal-root :is(.btn.primary, .dp3-btn--primary):focus-visible {
  outline: none;
  box-shadow: var(--nv-focus);
}

html.ops-navy #modal-root .acct-id {
  border-bottom-color: var(--nv-line);
}
html.ops-navy #modal-root .acct-disc {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--nv-raised-2);
  color: var(--nv-text);
  border: 0;
  box-shadow: var(--nv-ring);
  font-size: 13px;
}
html.ops-navy #modal-root .acct-id b { color: var(--nv-text); font-size: 15px; }
html.ops-navy #modal-root .acct-id small,
html.ops-navy #modal-root .acct-row .n small,
html.ops-navy #modal-root .acct-row .chev { color: var(--nv-text-3); }
html.ops-navy #modal-root .acct-ic { stroke: var(--nv-text-2); }
html.ops-navy #modal-root button.acct-row {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--nv-line);
  border-radius: 8px;
  color: var(--nv-text);
  box-shadow: none;
}
html.ops-navy #modal-root button.acct-row:hover {
  background: var(--nv-raised-2);
}
html.ops-navy #modal-root button.acct-row:not([disabled]):not([aria-disabled="true"]):hover :is(.n, .chev),
html.ops-navy #modal-root button.acct-row:not([disabled]):not([aria-disabled="true"]):hover .acct-ic {
  color: var(--nv-text);
  stroke: var(--nv-text);
}
html.ops-navy #modal-root .acct-act { color: var(--ops-text-primary); font-weight: 600; background: var(--ops-btn-bg); border-color: var(--ops-line-strong); box-shadow: none; }
html.ops-navy #modal-root button.acct-row:not([disabled]):not([aria-disabled="true"]):hover .acct-act { background: var(--ops-btn-bg-hover); }
html.ops-navy #modal-root .acct-out {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--nv-late);
  font-weight: 700;
}
html.ops-navy #modal-root .acct-out:hover { background: none; color: var(--nv-late); text-decoration: underline; text-underline-offset: 3px; }
html.ops-navy #modal-root button.acct-row[disabled] .n { color: var(--nv-text-3); }

html.ops-navy body.gated #view {
  color: var(--nv-text);
}
html.ops-navy .pin-gate { color: var(--nv-text); }
html.ops-navy .pin-gate h2 {
  color: var(--nv-text);
  font-family: Inter, system-ui, sans-serif;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
}
html.ops-navy .pin-gate p,
html.ops-navy .pin-label,
html.ops-navy #pin-help {
  color: var(--nv-text-2);
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0;
  text-transform: none;
}
html.ops-navy .pin-err { color: var(--nv-late); font-size: 13px; }
html.ops-navy .pin-gate input {
  background: var(--ops-bg-field);
  color: var(--nv-text);
  border: 0;
  border-radius: 8px;
  box-shadow: var(--nv-card);
  font-size: 16px;
  color-scheme: var(--ops-color-scheme);
}
html.ops-navy .pin-gate input:focus-visible {
  outline: none;
  border-color: transparent;
  box-shadow: var(--nv-focus);
}
html.ops-navy .pin-gate input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1.5px var(--nv-late);
}
html.ops-navy .pin-gate .btn.primary {
  background: var(--nv-green);
  color: var(--ops-accent-on-primary);
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  font-weight: 700;
  font-size: 15px;
}
html.ops-navy .pin-gate .btn.primary:hover {
  background: var(--nv-green-2);
  color: var(--ops-accent-on-primary);
  border: 0;
}
html.ops-navy .pin-gate .btn.primary:active:not(:disabled) { background: var(--ops-accent-primary-press); }
html.ops-navy .pin-gate .btn.primary:focus-visible {
  outline: none;
  box-shadow: var(--nv-focus);
}

/* White slab, navy text. Green on white fails contrast, so Undo stays navy. */

html.ops-navy #toast-root .toast {
  background: var(--ops-selected-bg);
  color: var(--ops-selected-text);
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
}
html.ops-navy #toast-root .toast-undo {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--ops-selected-text);
  border-radius: 8px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
html.ops-navy #toast-root .toast-undo:hover {
  background: none;
  border: 0;
  color: var(--ops-selected-text);
}
html.ops-navy #toast-root .toast-undo:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--ops-selected-text);
}

/* Phone: 44px targets. Full-screen sheet sits on the frame, not a grey scrim. */
@media (max-width: 1439.98px) {
  html.ops-navy .season-page .season-card {
    flex-wrap: wrap;
    align-items: flex-start;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  html.ops-navy .season-page .season-card h3 { flex: 1 1 100%; min-width: 0; }
  html.ops-navy #modal-root .overlay { background: var(--nv-frame); }
  html.ops-navy #modal-root .overlay > .modal { box-shadow: none; }
  html.ops-navy .season-page :is(
    .ms-check, .ms-tick, .ms-add, .ms-restore, .ms-clear, .ms-add-event,
    .ms-handled-toggle, .sc-edit, .ms-confirm .iconbtn, .more-views.seg button
  ),
  html.ops-navy #modal-root :is(.btn, .dp3-btn, .iconbtn, .mclose, .pchip, .dp5-fchip, .dg-opt, button.acct-row),
  html.ops-navy .pin-gate :is(input, .btn) {
    min-height: 44px;
  }
  html.ops-navy #modal-root :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
    font-size: 16px;
  }
}

html.ops-navy #modal-root :is(.pchip, .dp5-fchip, .dg-opt):not(.on):not(.is-on):not([aria-pressed="true"]) {
  background: var(--ops-bg-surface-hover);
  border-color: transparent;
  box-shadow: none;
}
html.ops-navy #modal-root .modal:has(#te-form) h2 { font-size: 15px; line-height: 1.3; }
html.ops-navy #modal-root :is(.more-fields > summary, .pe-more > summary) { color: var(--ops-status-good); }
html.ops-navy #modal-root :is(.more-fields > summary, .pe-more > summary):hover { color: var(--ops-status-good); }

html.ops-navy .season-page .rw-cell[data-rw-ev] { cursor: pointer; }
html.ops-navy .season-page .rw-cell[data-rw-ev]:active { background: var(--ops-bg-surface-hover); }
html.ops-navy .season-page .rw-cell[data-rw-ev]:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--ops-focus); }
html.ops-navy .season-page .season-card.is-flash { box-shadow: inset 0 0 0 1.5px var(--ops-focus); }

/* Log sheet: the selected week is the raised fill, not a green stripe (green is only the navigation's rail). */
html.ops-navy #modal-root .lg-row.is-sel { box-shadow: none; background: var(--ops-bg-surface-hover); }

html.ops-navy #modal-root .ach { margin-top: 6px; max-height: min(62vh, 640px); overflow-y: auto; padding-right: 2px; }
html.ops-navy #modal-root .ach-day {
  margin: 16px 0 8px;
  font: 600 12px/1.2 var(--pv-font, Inter, system-ui, sans-serif);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--nv-text-3);
}
html.ops-navy #modal-root .ach-day:first-child { margin-top: 4px; }
html.ops-navy #modal-root .ach-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--ops-bg-surface);
  box-shadow: inset 0 0 0 1px var(--ops-line-default);
}
html.ops-navy #modal-root .ach-tick {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--ops-status-good);
}
html.ops-navy #modal-root .ach-tick::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  width: 9px;
  height: 5px;
  border: solid var(--ops-bg-canvas);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}
html.ops-navy #modal-root .ach-n { flex: 1; min-width: 0; }
html.ops-navy #modal-root .ach-n b { display: block; font: 600 13.5px/1.35 var(--pv-font, Inter, system-ui, sans-serif); color: var(--ops-text-primary); overflow-wrap: anywhere; }
html.ops-navy #modal-root .ach-n small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--nv-text-3); }
html.ops-navy #modal-root button.ach-restore {
  flex: none;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: var(--ops-btn-bg);
  box-shadow: inset 0 0 0 1px var(--ops-line-strong);
  color: var(--ops-text-primary);
  font: 600 13px/1 var(--pv-font, Inter, system-ui, sans-serif);
  cursor: pointer;
}
html.ops-navy #modal-root button.ach-restore:hover { background: var(--ops-btn-bg-hover); box-shadow: inset 0 0 0 1px var(--ops-line-strong-hover); }
html.ops-navy #modal-root button.ach-restore:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--ops-focus); }
html.ops-navy #modal-root button.ach-restore:disabled { color: var(--nv-text-3); cursor: default; }
html.ops-navy #modal-root .ach-empty { margin: 12px 0; font-size: 14px; color: var(--nv-text-3); }
@media (max-width: 1439.98px) {
  html.ops-navy #modal-root button.ach-restore { height: 44px; }
  html.ops-navy #modal-root .ach { max-height: none; }
}

html[data-ops-theme="light"] img[src$="dmark-green-v5.svg"] {
  object-fit: none;
  object-position: 9999px 0;
  background: var(--ops-logo-mark);
  -webkit-mask: url("/brand/logo/dmark-green-v5.svg") center / contain no-repeat;
  mask: url("/brand/logo/dmark-green-v5.svg") center / contain no-repeat;
}
html[data-ops-theme="light"] img[src$="crest-reversed.svg"] {
  content: url("/brand/logo/crest-primary-v5.svg");
}

/* Phone and tablet break at 1439.98px so they do not share the 1440px desktop rules. */

html.ops-navy {
  --pv-frame: var(--ops-bg-canvas);
  --pv-panel: var(--ops-bg-panel);
  --pv-raised: var(--ops-bg-surface);
  --pv-raised2: var(--ops-bg-surface-hover);
  --pv-edge: var(--ops-line-strong);
  --pv-edge-card: var(--ops-line-default);
  --pv-float: 0 1px 0 transparent inset, 0 14px 34px var(--ops-shadow-over);
  --pv-div: var(--ops-line-default);
  --pv-t1: var(--ops-text-primary);
  --pv-t2: var(--ops-text-secondary);
  --pv-t3: var(--ops-text-tertiary);
  --pv-green: var(--ops-accent-primary);
  --pv-good: var(--ops-status-good);
  --pv-green-hover: var(--ops-accent-primary-hover);
  --pv-ink: var(--ops-accent-on-primary);
  --pv-ink-cat: var(--ops-text-on-category);
  --pv-ink-sel: var(--ops-selected-text);
  --pv-c-get: var(--ops-bucket-get);
  --pv-c-serve: var(--ops-bucket-serve);
  --pv-c-ops: var(--ops-bucket-ops);
  --pv-c-grow: var(--ops-bucket-grow);
  --pv-c-none: var(--ops-bucket-none);
  --pv-p-jon: var(--ops-person-jon);
  --pv-p-kendra: var(--ops-person-kendra);
  --pv-p-staff: var(--ops-person-staff);
  --pv-late: var(--ops-status-bad);
  --sea-fill: var(--ops-bg-surface-hover);
  --sea-fill-hover: var(--ops-bg-surface-press);
  --sea-edge: var(--ops-text-tertiary);
  --pv-r: 8px;
  --pv-nav-w: 248px;
  --pv-side-w: 404px;
  --pv-focus: inset 0 0 0 1.5px var(--ops-focus);
  --pv-focus-ink: inset 0 0 0 1.5px var(--ops-accent-on-primary);
  --pv-font: Inter, -apple-system, "Segoe UI", system-ui, sans-serif;
}

@media (max-width: 1600px) {
  html.ops-navy {
    --pv-nav-w: 232px;
    --pv-side-w: 360px;
  }
}

html.ops-navy,
html.ops-navy body {
  background: var(--pv-frame);
  color: var(--pv-t1);
}

html.ops-navy #dp5-panel {
  display: none;
}

html.ops-navy header.topbar button:focus-visible,
html.ops-navy header.topbar select:focus-visible,
html.ops-navy #pv-side button:focus-visible,
html.ops-navy #pv-side input:focus-visible,
html.ops-navy #pv-side select:focus-visible,
html.ops-navy #pv-mini button:focus-visible {
  outline: none;
  box-shadow: var(--pv-focus);
}

html.ops-navy #fab:focus-visible,
html.ops-navy header.topbar #tabs button.tab-add:focus-visible,
html.ops-navy .pv-seg button[aria-pressed="true"]:focus-visible {
  outline: none;
  box-shadow: var(--pv-focus-ink);
}

html.ops-navy .pv-av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--pv-ink-cat);
  flex: none;
}
html.ops-navy .pv-av.pv-p-jon { background: var(--pv-p-jon); }
html.ops-navy .pv-av.pv-p-kendra { background: var(--pv-p-kendra); }
html.ops-navy .pv-av.pv-p-staff { background: var(--pv-p-staff); }
html.ops-navy .pv-avs { display: inline-flex; }
html.ops-navy .pv-avs .pv-av + .pv-av {
  margin-left: -5px;
  box-shadow: 0 0 0 2px var(--pv-panel);
}

html.ops-navy .pv-ib {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--pv-r);
  display: grid;
  place-items: center;
  color: var(--pv-t2);
  flex: none;
}
html.ops-navy .pv-ib:hover { color: var(--pv-t1); background: var(--pv-raised); }
html.ops-navy .pv-ib svg { display: block; }

html.ops-navy select.pv-fld {
  appearance: none;
  -webkit-appearance: none;
  height: 36px;
  border-radius: var(--pv-r);
  border: 0;
  background-color: var(--pv-raised);
  box-shadow: inset 0 0 0 1px var(--pv-edge);
  color: var(--pv-t1);
  padding: 0 34px 0 12px;
  font-weight: 500;
  font-size: 13px;
  font-family: var(--pv-font);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--pv-t2) 50%),
    linear-gradient(135deg, var(--pv-t2) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
html.ops-navy select.pv-fld:focus-visible { box-shadow: var(--pv-focus); }
html.ops-navy .pv-seg {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--pv-r);
  background: var(--pv-raised);
  gap: 2px;
}
html.ops-navy .pv-seg button {
  height: 34px;
  min-width: 74px;
  padding: 0 14px;
  border: 0;
  background: none;
  border-radius: 6px;
  color: var(--pv-t2);
  font-weight: 600;
  font-size: 13px;
  font-family: var(--pv-font);
}
html.ops-navy .pv-seg button:hover { color: var(--pv-t1); }
html.ops-navy .pv-seg button[aria-pressed="true"] {
  background: var(--ops-selected-bg);
  color: var(--pv-ink-sel);
}

html.ops-navy .pv-chip {
  --cat: var(--pv-c-none);
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 3px 8px;
  align-items: start;
  padding: 8px 9px;
  border: 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--cat) 20%, var(--pv-panel));
  color: inherit;
  text-align: left;
  cursor: grab;
  user-select: none;
  width: 100%;
  font-family: var(--pv-font);
}
html.ops-navy .pv-chip:hover { background: color-mix(in srgb, var(--cat) 28%, var(--pv-panel)); }
html.ops-navy .pv-chip.is-sel { box-shadow: inset 0 0 0 1.5px var(--pv-t1); }
html.ops-navy .pv-chip.is-dragging { opacity: 0.4; }
html.ops-navy .pv-chip.pv-cat-get { --cat: var(--pv-c-get); }
html.ops-navy .pv-chip.pv-cat-serve { --cat: var(--pv-c-serve); }
html.ops-navy .pv-chip.pv-cat-ops { --cat: var(--pv-c-ops); }
html.ops-navy .pv-chip.pv-cat-grow { --cat: var(--pv-c-grow); }
html.ops-navy .pv-chip.pv-cat-none { --cat: var(--pv-c-none); }
html.ops-navy .pv-tick {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--cat);
  display: grid;
  place-items: center;
  flex: none;
}
html.ops-navy .pv-tick:hover { background: color-mix(in srgb, var(--cat) 40%, transparent); }
html.ops-navy .pv-chip .pv-cn {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--pv-t1);
  overflow-wrap: break-word;
  hyphens: manual;
}
html.ops-navy .pv-chip .pv-cm {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 13px;
  color: var(--pv-t2);
}
html.ops-navy .pv-chip .pv-cm .pv-late { color: var(--pv-late); font-weight: 600; }
html.ops-navy .pv-chip.is-late .pv-tick { box-shadow: inset 0 0 0 1.5px var(--pv-late); }
html.ops-navy .pv-chip.is-done .pv-cn { text-decoration: line-through; color: var(--pv-t3); }
html.ops-navy .pv-chip.is-done { opacity: 0.6; }
html.ops-navy .pv-chip.is-done .pv-tick { background: var(--cat); }
html.ops-navy .pv-chip.is-done .pv-tick::after {
  content: "";
  width: 7px;
  height: 4px;
  border: solid var(--pv-ink);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg) translate(1px, -1px);
}
html.ops-navy .pv-chip.is-compact {
  grid-template-columns: 14px minmax(0, 1fr);
  padding: 5px 7px;
  gap: 7px;
  align-items: start;
}
html.ops-navy .pv-chip.is-compact .pv-tick { width: 14px; height: 14px; margin-top: 2px; }
html.ops-navy .pv-chip.is-compact .pv-cn { font-weight: 500; }

html.ops-navy #pv-side {
  font: 15px/1.45 var(--pv-font);
  color: var(--pv-t1);
}
html.ops-navy .pv-sh {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 12px 14px 20px;
  border-bottom: 1px solid var(--pv-div);
}
html.ops-navy .pv-sh h2 { margin: 0; font-size: 15px; font-weight: 700; }
html.ops-navy .pv-sh p { margin: 2px 0 0; font-size: 13px; color: var(--pv-t3); }
html.ops-navy .pv-sh .push,
html.ops-navy .pv-sh .pv-push { margin-left: auto; }
html.ops-navy .pv-sb {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 4px 16px 76px 20px;
}
html.ops-navy .pv-tk .pv-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pv-t2);
  overflow-wrap: break-word;
}
html.ops-navy .pv-tk .pv-crumb i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: none;
}
html.ops-navy .pv-tk h2 {
  margin: 8px 0 0;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
html.ops-navy .pv-facts {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  margin: 18px 0 0;
  font-size: 15px;
}
html.ops-navy .pv-facts dt { color: var(--pv-t3); font-size: 13px; padding-top: 2px; }
html.ops-navy .pv-facts dd { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 500; }
html.ops-navy .pv-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin-top: 18px;
}
html.ops-navy .pv-sec {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--pv-div);
}
html.ops-navy .pv-sec h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--pv-t2); }
html.ops-navy .pv-sec p { margin: 0; font-size: 15px; line-height: 1.55; white-space: pre-wrap; color: var(--pv-t2); }
html.ops-navy .pv-sec .pv-none,
html.ops-navy .pv-none { color: var(--pv-t3); font-size: 13px; }
html.ops-navy .pv-sec ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--pv-t2);
}
html.ops-navy .pv-sec li { position: relative; padding-left: 14px; overflow-wrap: break-word; }
html.ops-navy .pv-sec li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pv-t3);
}
html.ops-navy .pv-field {
  display: grid;
  gap: 6px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pv-t2);
}
html.ops-navy .pv-field input,
html.ops-navy .pv-field select {
  height: 40px;
  border-radius: var(--pv-r);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--pv-edge);
  background: var(--pv-raised);
  color: var(--pv-t1);
  padding: 0 12px;
  font-size: 15px;
  font-weight: 500;
  font-family: var(--pv-font);
}
html.ops-navy .pv-field input:focus-visible,
html.ops-navy .pv-field select:focus-visible { box-shadow: var(--pv-focus); }
html.ops-navy .pv-field input::placeholder { color: var(--pv-t3); }

html.ops-navy .pv-comments {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--pv-t2);
}
html.ops-navy .pv-comment { overflow-wrap: break-word; }
html.ops-navy .pv-cmeta {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--pv-t3);
}
html.ops-navy .pv-cform {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
html.ops-navy .pv-cin {
  flex: 1;
  min-width: 0;
  height: 40px;
  border-radius: var(--pv-r);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--pv-edge);
  background: var(--pv-raised);
  color: var(--pv-t1);
  padding: 0 12px;
  font-size: 15px;
  font-weight: 500;
  font-family: var(--pv-font);
}
html.ops-navy .pv-cin:focus-visible { box-shadow: var(--pv-focus); }
html.ops-navy .pv-cin::placeholder { color: var(--pv-t3); }

html.ops-navy #pv-nav-projects {
  min-height: 0;
  overflow: auto;
}
html.ops-navy .pv-nh {
  margin: 20px 10px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pv-t3);
}
html.ops-navy .pv-pj {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  background: none;
  border-radius: var(--pv-r);
  color: var(--pv-t2);
  font-size: 13px;
  line-height: 1.35;
  font-family: var(--pv-font);
  text-align: left;
  overflow-wrap: break-word;
}
html.ops-navy .pv-pj:hover { color: var(--pv-t1); }
html.ops-navy .pv-pj i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: none;
  margin-top: 5px;
  background: var(--pv-c-none);
}
html.ops-navy .pv-pj.pv-cat-get i { background: var(--pv-c-get); }
html.ops-navy .pv-pj.pv-cat-serve i { background: var(--pv-c-serve); }
html.ops-navy .pv-pj.pv-cat-ops i { background: var(--pv-c-ops); }
html.ops-navy .pv-pj.pv-cat-grow i { background: var(--pv-c-grow); }
html.ops-navy .pv-pj span { min-width: 0; }
html.ops-navy .pv-pj b {
  margin-left: auto;
  font-weight: 500;
  color: var(--pv-t3);
  padding-left: 6px;
  flex: none;
  font-variant-numeric: tabular-nums;
}

html.ops-navy #pv-mini {
  margin-top: auto;
  padding: 14px 4px 4px;
  border-top: 1px solid var(--pv-div);
  flex: none;
}

@media (min-width: 1440px) {
  html.ops-navy,
  html.ops-navy body {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
  }
  html.ops-navy body {
    display: block;
    font-family: var(--pv-font);
  }

  html.ops-navy header.topbar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--pv-nav-w);
    height: auto;
    max-width: none;
    margin: 0;
    padding: 18px 10px 20px 16px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    background: var(--pv-frame);
    border: 0;
    border-right: 0;
    color: var(--pv-t1);
    overflow: hidden;
    z-index: 20;
  }

  html.ops-navy header.topbar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    margin: 0;
    padding: 0 8px;
    justify-content: flex-start;
    flex: none;
  }
  html.ops-navy header.topbar .crest {
    width: 28px;
    height: 28px;
    margin: 0;
    border-radius: var(--pv-r);
    object-fit: contain;
  }
  html.ops-navy header.topbar .ws-name {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
    display: inline;
    font-weight: 700;
    font-size: 15px;
    color: var(--pv-t1);
    letter-spacing: 0;
  }

  html.ops-navy #fab,
  html.ops-navy header.topbar #fab {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: auto;
    margin: 10px 0 16px;
    height: 42px;
    min-height: 42px;
    width: 100%;
    min-width: 0;
    flex: none;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: var(--pv-r);
    background: var(--pv-green);
    color: var(--pv-ink);
    font-weight: 700;
    font-size: 15px;
    font-family: var(--pv-font);
    box-shadow: none;
  }
  html.ops-navy body > #fab {
    position: fixed;
    left: 16px;
    top: 54px;
    width: calc(var(--pv-nav-w) - 26px);
    z-index: 21;
  }
  html.ops-navy body:has(#modal-root .overlay) #fab:not([data-hidden]) {
    display: flex !important;
  }
  html.ops-navy #fab:hover,
  html.ops-navy header.topbar #fab:hover {
    background: var(--pv-green-hover);
    transform: none;
  }
  html.ops-navy #fab:active,
  html.ops-navy header.topbar #fab:active { background: var(--ops-accent-primary-press); }
  html.ops-navy #fab .fab-plus,
  html.ops-navy #fab .fab-label {
    display: inline;
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    overflow: visible;
    font-size: inherit;
    line-height: 1;
  }
  html.ops-navy #fab[data-hidden],
  html.ops-navy body.gated #fab {
    display: none !important;
  }

  html.ops-navy header.topbar nav.dp2-nav,
  html.ops-navy header.topbar nav.dp2-nav.has-fab,
  html.ops-navy header.topbar #tabs {
    position: static;
    inset: auto;
    transform: none;
    left: auto;
    right: auto;
    bottom: auto;
    top: auto;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    -webkit-mask-image: none;
    mask-image: none;
    overflow: visible;
    flex: none;
    z-index: auto;
  }
  html.ops-navy header.topbar #tabs button {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    height: 40px;
    min-height: 40px;
    min-width: 0;
    padding: 0 10px;
    border: 0;
    border-radius: var(--pv-r);
    background: transparent;
    box-shadow: none;
    color: var(--pv-t3);
    font-family: var(--pv-font);
    font-size: 15px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    white-space: nowrap;
  }
  html.ops-navy header.topbar #tabs button .tab-ic {
    width: 18px;
    height: 18px;
    flex: none;
    stroke: currentColor;
    fill: none;
  }
  html.ops-navy header.topbar #tabs button span {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
    font-size: 15px;
    font-weight: inherit;
  }
  html.ops-navy header.topbar #tabs button:hover {
    background: transparent;
    color: var(--pv-t1);
    box-shadow: none;
  }
  html.ops-navy header.topbar #tabs button.active,
  html.ops-navy header.topbar #tabs button.active:hover {
    background: var(--pv-raised);
    color: var(--pv-t1);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--ops-nav-marker);
  }
  html.ops-navy header.topbar #tabs button.active .tab-ic,
  html.ops-navy header.topbar #tabs button:hover .tab-ic { stroke: currentColor; }
  html.ops-navy header.topbar #tabs button[data-count]::after {
    content: attr(data-count);
    margin-left: auto;
    font-size: 13px;
    font-weight: 500;
    color: var(--pv-t3);
    font-variant-numeric: tabular-nums;
  }
  html.ops-navy header.topbar #tabs button[data-count].active::after { color: var(--pv-t1); }
  html.ops-navy header.topbar #tabs button[data-count=""]::after,
  html.ops-navy header.topbar #tabs button[data-count="0"]::after { content: none; }
  html.ops-navy header.topbar #tabs button.tab-add { display: none; }
  html.ops-navy header.topbar #tabs button[hidden] { display: none; }

  html.ops-navy header.topbar #pv-nav-projects {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }
  html.ops-navy header.topbar #pv-mini { flex: none; }

  html.ops-navy header.topbar .sync {
    width: 100%;
    height: auto;
    margin-top: 8px;
    padding: 0;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  html.ops-navy header.topbar #menu-btn,
  html.ops-navy header.topbar #menu-btn.avatar-btn {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    border: 0;
    border-radius: var(--pv-r);
    background: none;
    box-shadow: none;
    color: var(--pv-t2);
    font-family: var(--pv-font);
    font-size: 15px;
    font-weight: 500;
  }
  html.ops-navy header.topbar #menu-btn:hover,
  html.ops-navy header.topbar #menu-btn.avatar-btn:hover {
    background: transparent;
    color: var(--pv-t1);
  }
  html.ops-navy header.topbar .menu-label {
    position: static;
    display: inline;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 500;
  }
  html.ops-navy header.topbar .acct-disc {
    width: 22px;
    height: 22px;
    flex: none;
    border: 0;
    border-radius: 50%;
    background: var(--pv-p-staff);
    color: var(--pv-ink-cat);
    font-size: 11px;
    font-weight: 700;
    box-shadow: none;
  }
  html.ops-navy header.topbar #menu-btn[data-who="jon"] .acct-disc { background: var(--pv-p-jon); }
  html.ops-navy header.topbar #menu-btn[data-who="kendra"] .acct-disc { background: var(--pv-p-kendra); }
  html.ops-navy header.topbar #net-chip {
    align-self: flex-start;
    border-radius: 6px;
  }
  html.ops-navy header.topbar .who {
    width: 100%;
    padding: 0 10px;
    height: auto;
  }
  html.ops-navy header.topbar .who select {
    width: 100%;
    height: 36px;
    border: 0;
    border-radius: var(--pv-r);
    background: var(--pv-raised);
    box-shadow: inset 0 0 0 1px var(--pv-edge);
    color: var(--pv-t1);
  }

  /* The chassis is fixed and #view scrolls inside it, so the page itself never scrolls on desktop: the old
     scrollbar-gutter would only leave a 15px empty strip down the right edge. */
  html.ops-navy { scrollbar-gutter: auto; overflow: hidden; }
  html.ops-navy .shell {
    position: fixed;
    top: 0;
    bottom: 0;
    left: var(--pv-nav-w);
    right: 0;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    padding-right: var(--panel-w, 520px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--pv-panel);
    border-radius: 0;
    box-shadow: none;
    z-index: 1;
  }
  html.ops-navy body[data-view="today"] .shell,
  html.ops-navy body[data-view="calendar"] .shell,
  html.ops-navy body[data-view="plan"] .shell,
  html.ops-navy body[data-view="season"] .shell {
    right: var(--pv-side-w);
    padding-right: 0;
  }

  html.ops-navy .shell > .hdr {
    flex: none;
    min-height: 56px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--pv-div);
    background: transparent;
  }

  html.ops-navy #view,
  html.ops-navy main#view {
    flex: 1;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 16px 24px 24px;
    overflow: auto;
    background: transparent;
  }
  html.ops-navy body[data-view="today"]:not(.gated) #view,
  html.ops-navy body[data-view="calendar"]:not(.gated) #view,
  html.ops-navy body[data-view="plan"]:not(.gated) #view {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
  }

  html.ops-navy #pv-side {
    display: none;
  }
  html.ops-navy body[data-view="today"] #pv-side,
  html.ops-navy body[data-view="calendar"] #pv-side,
  html.ops-navy body[data-view="plan"] #pv-side {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 12px;
    bottom: 12px;
    right: 12px;
    width: var(--pv-side-w);
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--pv-panel);
    border-radius: var(--pv-r);
    box-shadow: inset 0 0 0 1px var(--pv-edge-card);
    z-index: 2;
  }
  html.ops-navy body.gated #pv-side { display: none; }

  html.ops-navy body.gated .shell {
    top: 12px;
    bottom: 12px;
    left: 12px;
    right: 12px;
    padding-right: 0;
  }
  html.ops-navy body.gated header.topbar { display: none; }
}

/* laptop: narrower segment buttons */
@media (min-width: 1440px) and (max-width: 1600px) {
  html.ops-navy .pv-seg button { min-width: 58px; padding: 0 10px; }
}

@media (max-width: 1439.98px) {
  /* The tick stays a 20px circle but takes a 44px tap. */
  html.ops-navy .pv-tick { position: relative; }
  html.ops-navy .pv-tick::before { content: ""; position: absolute; inset: -12px; }
  html.ops-navy,
  html.ops-navy body {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
  }
  html.ops-navy body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
  }

  html.ops-navy header.topbar {
    position: static;
    width: 0;
    height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    pointer-events: none;
    z-index: 30;
  }
  html.ops-navy header.topbar .brand,
  html.ops-navy header.topbar .who,
  html.ops-navy #pv-nav-projects,
  html.ops-navy #pv-mini {
    display: none;
  }

  html.ops-navy #fab,
  html.ops-navy header.topbar #fab,
  html.ops-navy body:has(#modal-root .overlay) #fab {
    display: none !important;
  }

  html.ops-navy header.topbar .sync {
    pointer-events: auto;
    position: fixed;
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: 8px;
    z-index: 35;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: transparent;
  }
  html.ops-navy header.topbar #menu-btn,
  html.ops-navy header.topbar #menu-btn.avatar-btn {
    pointer-events: auto;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
    border: 0;
    border-radius: var(--pv-r);
    background: transparent;
    box-shadow: none;
    color: var(--pv-t2);
  }
  html.ops-navy header.topbar #menu-btn .menu-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  html.ops-navy header.topbar .acct-disc {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--pv-ink-cat);
    background: var(--pv-p-staff);
  }
  html.ops-navy header.topbar #menu-btn[data-who="jon"] .acct-disc { background: var(--pv-p-jon); }
  html.ops-navy header.topbar #menu-btn[data-who="kendra"] .acct-disc { background: var(--pv-p-kendra); }

  html.ops-navy header.topbar nav.dp2-nav,
  html.ops-navy header.topbar nav.dp2-nav.has-fab,
  html.ops-navy body > .topbar .dp2-nav,
  html.ops-navy header.topbar #tabs {
    pointer-events: auto;
    display: grid !important;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    inset: auto 0 0 0 !important;
    transform: none !important;
    width: 100%;
    max-width: none;
    height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0;
    padding: 6px 8px env(safe-area-inset-bottom, 0px) !important;
    background: var(--ops-nav-bg) !important; /* phone bottom menu = the menu colour */
    border: 0 !important;
    border-top: 1px solid var(--pv-div) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    -webkit-mask-image: none;
    mask-image: none;
    z-index: 45;
    overflow: visible;
  }
  html.ops-navy header.topbar #tabs button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    /* 52px: the 44px tap floor with room to spare (frame.css pins the old pill buttons at 40px !important). */
    min-height: 52px !important;
    height: 52px !important;
    padding: 0 4px;
    border: 0;
    border-radius: var(--pv-r);
    background: transparent !important;
    box-shadow: none !important;
    color: var(--pv-t3) !important;
    font-family: var(--pv-font);
    font-size: 13px !important;
    font-weight: 600;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  html.ops-navy header.topbar #tabs button .tab-ic {
    width: 20px;
    height: 20px;
    stroke: currentColor;
  }
  html.ops-navy header.topbar #tabs button span {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
    font-size: 13px;
  }
  html.ops-navy header.topbar #tabs button[data-count]::after { content: none; }
  html.ops-navy header.topbar #tabs button.active {
    color: var(--pv-t1) !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html.ops-navy header.topbar #tabs button.active .tab-ic {
    stroke: var(--pv-good) !important;
  }
  html.ops-navy header.topbar #tabs button.tab-add {
    display: flex;
    background: var(--pv-green) !important;
    color: var(--pv-ink) !important;
    margin: 2px 6px;
    border-radius: var(--pv-r);
  }
  html.ops-navy header.topbar #tabs button.tab-add .tab-ic {
    stroke: var(--pv-ink) !important;
  }
  html.ops-navy header.topbar #tabs button[hidden] { display: none !important; }

  html.ops-navy .shell {
    position: relative;
    flex: 1;
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    padding-bottom: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--pv-panel);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  html.ops-navy .shell > .hdr {
    flex: none;
    min-height: 56px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 56px 8px 16px;
    border-bottom: 1px solid var(--pv-div);
    background: var(--pv-panel);
  }
  html.ops-navy body[data-view="today"] .shell > .hdr,
  html.ops-navy body[data-view="calendar"] .shell > .hdr,
  html.ops-navy body[data-view="plan"] .shell > .hdr,
  html.ops-navy body[data-view="today"] .install-wrap:not(:has(#install-card:not([hidden]))),
  html.ops-navy body[data-view="calendar"] .install-wrap:not(:has(#install-card:not([hidden]))),
  html.ops-navy body[data-view="plan"] .install-wrap:not(:has(#install-card:not([hidden]))) {
    display: none;
  }

  html.ops-navy #view,
  html.ops-navy main#view {
    flex: 1;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 0 8px calc(72px + env(safe-area-inset-bottom, 0px));
    overflow: auto;
    background: transparent;
  }
  html.ops-navy body[data-view="today"]:not(.gated) #view,
  html.ops-navy body[data-view="calendar"]:not(.gated) #view,
  html.ops-navy body[data-view="plan"]:not(.gated) #view {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 0 calc(64px + env(safe-area-inset-bottom, 0px));
  }
  html.ops-navy body.pv-sheet #pv-side .pv-sh { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
  html.ops-navy .pv-seg { width: 100%; }
  html.ops-navy .pv-seg button { flex: 1; height: 44px; min-height: 44px; }
  html.ops-navy .pv-ib { width: 44px; height: 44px; }
  html.ops-navy select.pv-fld { height: 44px; min-height: 44px; }
  html.ops-navy .pv-chip { padding: 10px; grid-template-columns: 20px minmax(0, 1fr); }
  html.ops-navy .pv-chip .pv-tick { width: 20px; height: 20px; }
  html.ops-navy .pv-sh .pv-ib,
  html.ops-navy .pv-sh .push { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }

  html.ops-navy #pv-side { display: none; }
  html.ops-navy body.pv-sheet #pv-side {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 0 calc(64px + env(safe-area-inset-bottom, 0px)) 0;
    width: auto;
    z-index: 40;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--pv-panel);
    overflow: hidden;
  }

  html.ops-navy #modal-root .overlay {
    padding: 0;
    place-items: stretch;
    inset: 0;
    background: var(--pv-panel);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 80;
  }
  html.ops-navy #modal-root .overlay > .modal {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  html.ops-navy body.gated {
    overflow: auto;
    height: auto;
  }
  html.ops-navy body.gated .shell {
    flex: none;
    min-height: 100%;
  }
}

/* The D-mark, not the full logo or the crest. */
html.ops-navy header.topbar .brand-logo {
  width: auto;
  height: 30px;
  flex: none;
  display: block;
}

/* The PIN screen on a phone has no bottom bar. Add threw when nobody was signed in. */
@media (max-width: 1439.98px) {
  html.ops-navy body.gated header.topbar #tabs { display: none !important; }
}

/* ------------------------------------------------------------------ the aging ladder on Today and Plan rows
   (task-extras.js metaHTML). 8-14 days: "Open 12 days" in quiet text.
   15+: the warning square + "Open 23 days" in --pv-t2. Waiting on someone replaces any late words: "Waiting on" plus a name.
   Recurring: nothing. */
html.ops-navy .pv-age { color: var(--pv-t3); font-weight: 600; }
html.ops-navy .pv-age.is-decide { gap: 6px; font-weight: 600; }
html.ops-navy .pv-age.is-decide > span { color: var(--pv-t2); }
html.ops-navy .pv-wait { color: var(--pv-t3); font-weight: 600; }
html.ops-navy .pv-chip.is-compact .pv-cm { margin-top: 1px; }

html.ops-navy {
  --pv-off: var(--ops-text-disabled);
}
html.ops-navy #view { container-type: inline-size; }
html.ops-navy #pv-mini { display: none; }

html.ops-navy body[data-view="today"] .shell,
html.ops-navy body[data-view="calendar"] .shell,
html.ops-navy body[data-view="plan"] .shell {
  background: var(--pv-frame);
}
html.ops-navy body[data-view="today"] .shell > .hdr,
html.ops-navy body[data-view="calendar"] .shell > .hdr,
html.ops-navy body[data-view="plan"] .shell > .hdr {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 14px 28px 8px;
  border-bottom: 0;
  background: transparent;
}
html.ops-navy body[data-view="today"] .screen-title,
html.ops-navy body[data-view="calendar"] .screen-title,
html.ops-navy body[data-view="plan"] .screen-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--pv-t1);
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
html.ops-navy body[data-view="today"] .screen-sub,
html.ops-navy body[data-view="calendar"] .screen-sub,
html.ops-navy body[data-view="plan"] .screen-sub { display: none; }

html.ops-navy #bell-btn {
  position: relative;
  width: 36px;
  height: 36px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--dp5-raised, var(--pv-raised));
  color: var(--pv-t1);
  display: grid;
  place-items: center;
  flex: none;
}
html.ops-navy #bell-btn[hidden] { display: none; }
html.ops-navy #bell-btn:hover { background: var(--dp5-raised-hover, var(--pv-raised2)); }
html.ops-navy #bell-btn svg { width: 18px; height: 18px; display: block; }
html.ops-navy #inbox-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--st-risk, var(--ops-status-bad));
  color: var(--ops-text-on-status);
  font-size: 11px;
  line-height: 18px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* 18px square tick, 32px hit area. Done is the green check. Not a circle. */
html.ops-navy .pv-tick {
  width: 18px;
  height: 18px;
  margin-top: 0;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px var(--ops-text-tertiary);
  position: relative;
  background: transparent;
}
html.ops-navy .pv-tick::before { content: ""; position: absolute; inset: -7px; }
html.ops-navy .pv-tick:hover { background: var(--ops-hover-wash); }
html.ops-navy .pv-chip { grid-template-columns: 18px minmax(0, 1fr); }
html.ops-navy .pv-chip.is-compact { grid-template-columns: 18px minmax(0, 1fr); }
html.ops-navy .pv-chip.is-compact .pv-tick { width: 18px; height: 18px; margin-top: 1px; }
html.ops-navy .pv-chip.is-late .pv-tick { box-shadow: inset 0 0 0 1.5px var(--ops-text-tertiary); }
html.ops-navy .pv-chip.is-done .pv-tick,
html.ops-navy .tcard.is-done .pv-tick,
html.ops-navy .tg-irow.is-done .pv-tick,
html.ops-navy .tg-btask.is-done .pv-tick {
  background: var(--pv-green);
  box-shadow: none;
}
html.ops-navy .pv-chip.is-done .pv-tick::after,
html.ops-navy .tcard.is-done .pv-tick::after,
html.ops-navy .tg-irow.is-done .pv-tick::after,
html.ops-navy .tg-btask.is-done .pv-tick::after {
  content: "";
  width: 9px;
  height: 5px;
  border: solid var(--pv-ink);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg) translate(1px, -1px);
}

html.ops-navy #pv-side select.dpt-field {
  height: 36px;
  border-radius: 6px;
  border: 0;
  background-color: var(--pv-raised);
  box-shadow: inset 0 0 0 1px var(--pv-edge);
  padding: 0 30px 0 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--pv-t1);
  font-family: var(--pv-font);
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--ops-icon-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
}
html.ops-navy #pv-side select.dpt-field:hover { background-color: var(--pv-raised2); }

html.ops-navy .cards { display: grid; gap: 12px; }
html.ops-navy .tcard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--pv-raised);
  border-radius: 8px;
  box-shadow: none; /* no edge: the fill separates it from the panel */
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  color: var(--pv-t1);
}
html.ops-navy .tcard:hover { background: var(--pv-raised2); }
html.ops-navy .tcard.is-sel { box-shadow: inset 0 0 0 1.5px var(--ops-focus); }
html.ops-navy .tcard.is-late { box-shadow: none; }
html.ops-navy .tcard.is-sel.is-late { box-shadow: inset 0 0 0 1.5px var(--ops-focus); }
html.ops-navy .tc-top { display: flex; gap: 10px; align-items: flex-start; }
html.ops-navy .tc-t { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
html.ops-navy .tc-e { font-size: 11.5px; color: var(--pv-t3); white-space: nowrap; font-variant-numeric: tabular-nums; }
html.ops-navy .tcard.is-done .tc-t { text-decoration: line-through; opacity: .6; }
html.ops-navy .tcard .m {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 12px;
  color: var(--pv-t3);
  align-items: center;
  padding-left: 28px;
  line-height: 1.4;
}
html.ops-navy .tcard .m .is-late { color: var(--dp5-text-3); font-weight: 400; }
html.ops-navy .tcard .tc-note { color: var(--pv-t2); }
html.ops-navy .pv-catline { display: inline-flex; align-items: center; gap: 7px; color: var(--pv-t2); }
html.ops-navy .pv-catline i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
html.ops-navy .pv-who { display: inline-flex; gap: 4px; flex-wrap: wrap; }
html.ops-navy .pv-who i {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 4px;
  color: var(--pv-ink-cat);
  background: var(--pv-p-staff);
}
html.ops-navy .pv-who i.pv-p-jon { background: var(--pv-p-jon); }
html.ops-navy .pv-who i.pv-p-kendra { background: var(--pv-p-kendra); }
html.ops-navy .more {
  border: 0;
  background: none;
  font-size: 12px;
  color: var(--pv-t2);
  text-align: left;
  padding: 2px 7px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ops-line-strong);
  font-family: var(--pv-font);
}
html.ops-navy .more:hover { color: var(--pv-t1); }
html.ops-navy #pv-side .pv-field select.dpt-field { width: 100%; }

@media (max-width: 1439.98px) {
  html.ops-navy body[data-view="today"] .shell > .hdr,
  html.ops-navy body[data-view="calendar"] .shell > .hdr,
  html.ops-navy body[data-view="plan"] .shell > .hdr {
    display: flex;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 8px;
    min-height: 56px;
  }
  /* The phone keeps the Inbox in its top row (#inbox-btn): one inbox button, not two. */
  html.ops-navy #bell-btn { display: none; }
  html.ops-navy .pv-tick::before { inset: -13px; }
}

html.ops-navy #view .tg-due .pv-chip { background: var(--pv-raised); box-shadow: inset 0 0 0 1px var(--pv-edge-card); }
html.ops-navy #view .tg-due .pv-chip:hover { background: var(--dp5-raised-hover, var(--ops-bg-surface-hover)); }
html.ops-navy #view .tg-due .pv-chip.is-late { box-shadow: inset 0 0 0 1px var(--ops-status-bad); }

html.ops-navy #pv-side .pv-sh .pv-ib {
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  flex: none;
  border: 0;
  border-radius: 6px;
  background: var(--ops-btn-bg);
  box-shadow: inset 0 0 0 1px var(--ops-line-strong);
  color: var(--pv-t2);
  cursor: pointer;
}
html.ops-navy #pv-side .pv-sh .pv-ib:hover { background: var(--ops-btn-bg-hover); box-shadow: inset 0 0 0 1px var(--ops-line-strong); color: var(--pv-t1); }
html.ops-navy #pv-side .pv-sh .pv-ib:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--ops-focus); }

/* The side panel header (Inbox, Links): the close button lines up with the content's right edge. */
html.ops-navy #pv-side .pv-sh { padding: 12px 16px 12px 20px; min-height: 61px; gap: 8px; }

/* Phone: the title row carries Plan, the funnel and the view; the dates + calendar are the one row under it. The month
   opens under the controls and pushes the week down. */
@media (max-width: 1439.98px) {
  html.ops-navy body[data-view="calendar"] .shell > .hdr,
  html.ops-navy body[data-view="plan"] .shell > .hdr { display: none; }
}

/* Schedule's title row uses the toolbar's 20px inset, the same as Projects, so the bell lines up with the calendar button. */
@media (min-width: 1440px) {
  html.ops-navy body[data-view="calendar"] .shell > .hdr { padding-left: 20px; padding-right: 20px; }
}

html.ops-navy #bell-btn {
  border-radius: 8px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ops-line-strong);
  color: var(--pv-t2);
}
html.ops-navy #bell-btn:hover { background: var(--ops-hover-wash); box-shadow: inset 0 0 0 1px var(--ops-line-strong); color: var(--pv-t1); }
html.ops-navy #bell-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--ops-focus); }

/* Home has no right column of its own. Idle, the page runs to the window's right edge; an opened
   task slides over the right side as a panel, so the Today and Overdue lists never move. */
@media (min-width: 1440px) {
  html.ops-navy body[data-view="today"] .shell { right: 0; }
  html.ops-navy body[data-view="today"] #pv-side[data-mode="home"] { display: none; }
  html.ops-navy body[data-view="today"] #pv-side:is([data-mode="task"], [data-mode="sub"], [data-mode="block"]) {
    z-index: 5;
    box-shadow: -24px 0 48px transparent;
  }
}

/* Anchored on #view, html and body. The mast hover rule in planes.css lists #bell-btn, so that selector counts as an id.
   Each arrow fills its segment. The outline is an inset shadow, so the arrow keeps a 1px margin.
   Outer corners are 7px: the 8px box radius minus that margin. The box stays 32 by 36, and 40 by 44 on a phone. */
#view :is(.pt-capb) {
  width: 31px;
  height: 34px;
  margin: 1px 0;
  border-radius: 0;
}
#view :is(.pt-capb):first-child { margin-left: 1px; border-radius: 7px 0 0 7px; }
#view :is(.pt-capb):last-child { margin-right: 1px; border-radius: 0 7px 7px 0; }
html.ops-navy body #view :is(.pt-capb):hover:not(:disabled) { background: var(--ops-bg-surface-hover); color: var(--ops-text-primary); }
html.ops-navy body #view :is(.pt-capb):hover:active:not(:disabled) { background: var(--ops-bg-surface-press); color: var(--ops-text-primary); }
@media (max-width: 1439.98px) {
  #view :is(.pt-capb) { width: 39px; height: 42px; }
}