/* home.css: the customer's home, the cockpit (W7, the customer dashboard, rebuilt; lighthouse-ecosystem
 * docs/w7-customer-dashboard-plan-2026-10-01.html and the chosen mockup C, docs/w7-mockup-c-2026-10-01.html; the owner's
 * rulings of 30 Sep 2026: direction C, and a light mode following the visitor's system setting, with a toggle).
 *
 * Loaded on reports.html only, after instrument.css. Tokens only: the dark palette is the Instrument's (instrument.css),
 * the light one is tokens.css's own with two text colors darkened for contrast (the plan's section 11: the light amber is
 * #8f5f00, 5.28:1 on the light paper, where tokens.css's --warn #b07d12 is 3.47:1 and is left alone for fills). The theme
 * is chosen by assets/js/home-theme.js, which sets html[data-home-theme] to "light" or "dark" before the page paints
 * (the visitor's choice, else the system's); a distinct attribute, so tokens.css's [data-theme] palettes never wake.
 * CSP: style-src 'self'. Everything here is a class; the two widths a script sets go through element.style.
 */

/* ── the dashboard's own tokens, dark (the Instrument) ── */
:root {
  --cp-mint: #43d597; --cp-mint-soft: rgba(67, 213, 151, .11); --cp-mint-line: rgba(67, 213, 151, .45); --cp-on-mint: #0b0e0d;
  --cp-gold: #e6b654; --cp-gold-fill: #e6b654; --cp-gold-soft: rgba(230, 182, 84, .11); --cp-gold-line: rgba(230, 182, 84, .45); --cp-gold-ink: #3a2e10;
  --cp-amber: #e0a63c; --cp-red: #d4685c; --cp-red-soft: rgba(212, 104, 92, .11);
  --cp-lav: #c792ea; --cp-lav-soft: rgba(199, 146, 234, .12); --cp-lav-line: rgba(199, 146, 234, .45);
  --cp-sky: #7fb4e8;
  --cp-beam: rgba(230, 182, 84, .55); --cp-beam-lav: rgba(199, 146, 234, .45);
}

/* ── light: tokens.css's palette for the page, its shell and its components, and the dashboard's own ── */
html[data-home-theme="light"] {
  color-scheme: light;
  --paper: #f5f1e8; --surface: #fbfaf6; --surface-2: #fffaf1; --surface-3: #fffdf8; --tint: #e8f0e7; --clay: #eee4d1; --deep: #09231d;
  --ink: #14201c; --muted: #5d6863; --faint: #636e67; --placeholder: #8a9a90;
  --line: rgba(20, 32, 28, .14); --line-2: rgba(20, 32, 28, .24);
  --forest: #1f7a52; --forest-2: #246a55; --pin: #1f7a52;
  --gold: #d7b65d; --gold-ink: #5a4413; --gold-dark: #8a6820;
  --amber: #8f5f00; --red: #a8402c;
  --ok: #1f7a52; --ok-bg: rgba(31, 122, 82, .10); --warn: #8f5f00; --warn-bg: #fff8e5; --error: #a8402c; --error-bg: rgba(168, 64, 44, .08);
  --info: #246a55; --info-bg: rgba(36, 106, 85, .10);
  --header-ink: #14201c; --header-ink-scrolled: #14201c; --header-bg-scrolled: rgba(255, 255, 255, .96);
  --sh-1: 0 6px 20px rgba(9, 35, 29, .08); --sh-2: 0 14px 40px -18px rgba(9, 35, 29, .20);
  --glow: 0 1px 0 rgba(20, 32, 28, .04), 0 10px 28px -18px rgba(9, 35, 29, .25);
  --cp-mint: #1f7a52; --cp-mint-soft: rgba(31, 122, 82, .09); --cp-mint-line: rgba(31, 122, 82, .42); --cp-on-mint: #ffffff;
  --cp-gold: #80601b; --cp-gold-fill: #d7b65d; --cp-gold-soft: rgba(215, 182, 93, .18); --cp-gold-line: rgba(138, 104, 32, .42); --cp-gold-ink: #5a4413;
  --cp-amber: #8f5f00; --cp-red: #a8402c; --cp-red-soft: rgba(168, 64, 44, .08);
  --cp-lav: #7a4aa0; --cp-lav-soft: rgba(122, 74, 160, .08); --cp-lav-line: rgba(122, 74, 160, .4);
  --cp-sky: #2f6aa3;
  --cp-beam: rgba(215, 182, 93, .75); --cp-beam-lav: rgba(122, 74, 160, .35);
}
/* the shell on a light page: the header reads as its scrolled bar, the wordmark's Pro and the skip link keep their contrast;
   the footer stays the dark forest band it always was on the light site */
html[data-home-theme="light"] .site-header { color: var(--header-ink-scrolled); background: var(--header-bg-scrolled); box-shadow: 0 1px 0 var(--line); }
html[data-home-theme="light"] .brand .brand-pro { color: var(--gold-dark); }
html[data-home-theme="light"] .skip-link { background: var(--ink); color: var(--paper); }
html[data-home-theme="light"] .menu-toggle { background: transparent; }
html[data-home-theme="light"] body::before { background: radial-gradient(ellipse 70% 42% at 60% -8%, rgba(31, 122, 82, .06), transparent 60%); }

/* ── the page around the cockpit ── */
body.is-cockpit .home-main { padding-top: 72px; }
body.is-cockpit .home-main > .section { padding: 22px 0 56px; }
body.is-cockpit .home-wrap { max-width: 1420px; }
body.is-cockpit .home-back { display: none; }

.cp { position: relative; color: var(--ink); }
.cp *, .cp *::before, .cp *::after { min-width: 0; }
.cp h1, .cp h2, .cp h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.005em; line-height: 1.05; margin: 0; color: var(--ink); text-wrap: balance; }
.cp p { margin: 0; }
.cp ul, .cp ol { list-style: none; margin: 0; padding: 0; }
.cp a { color: var(--cp-mint); }
.cp a:hover { color: var(--cp-mint); text-decoration: underline; }
.cp a.btn, .cp a.btn:hover { text-decoration: none; }
.cp :focus-visible { outline: 2px solid var(--cp-gold); outline-offset: 2px; border-radius: 6px; }
.cp time { font-variant-numeric: tabular-nums; }
.cp .btn-primary { background: var(--cp-gold-fill); color: var(--cp-gold-ink); }
.cp .btn-primary:hover { background: var(--cp-gold-fill); color: var(--cp-gold-ink); filter: brightness(1.05); }
.cp .btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-2); }
.cp .btn-secondary:hover { border-color: var(--cp-mint); background: var(--cp-mint-soft); color: var(--ink); }
.cp-quiet { display: inline-flex; align-items: center; min-height: 38px; padding: 0 4px; font-weight: 600; background: none; border: 0; cursor: pointer; color: var(--cp-mint); font-size: 14px; }

/* type */
.cp-kicker, .cp .cp-tile h2.cp-kicker, .cp .cp-more .cp-kicker { display: block; margin: 0 0 6px; font: 600 10.5px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cp .cp-more .cp-kicker { margin: 0; }
.cp-eyebrow { display: block; font: 500 11.5px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cp-gold); }
.cp-src { font: 500 11px var(--font-mono); letter-spacing: .02em; color: var(--faint); }
.cp-fine { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--faint); }

/* the phone's one line: the next check, under the site's header */
.cp-strip { display: none; }

/* a note across the top: the card, two plans, a plan changing, an add-on added, a part we could not read */
.cp-alerts { display: grid; gap: 8px; margin: 0 0 14px; }
.cp-alert { border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; background: var(--surface); font-size: 14px; line-height: 1.5; color: var(--ink); }
.cp-alert.is-warn { border-color: var(--cp-amber); }
.cp-alert.is-warn::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; background: var(--cp-amber); color: var(--paper); font: 700 12px var(--font-body); vertical-align: 1px; }
.cp-alert.is-ok { border-color: var(--cp-mint-line); background: var(--cp-mint-soft); }
.cp-alert .btn { margin-left: 10px; }

/* the head: the business, the plan, the chips and the theme */
.cp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.cp-head h1 { font-size: 44px; line-height: 1; margin-top: 4px; }
.cp-meta { font: 500 12.5px var(--font-mono); color: var(--muted); margin-top: 6px; }
.cp-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.cp-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.cp-chip { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }
.cp-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.cp-chip.is-ok { color: var(--cp-mint); border-color: var(--cp-mint-line); background: var(--cp-mint-soft); }
.cp-chip.is-warn { color: var(--cp-amber); border-color: var(--cp-amber); }
.cp-chip.is-later::before { background: transparent; border: 1.5px solid currentColor; }
.cp-theme { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.cp-theme span { font: 600 9.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding: 0 6px; }
.cp-theme button { appearance: none; border: 0; background: transparent; color: var(--muted); font: 500 12px var(--font-body); padding: 6px 10px; border-radius: 8px; cursor: pointer; min-height: 32px; }
.cp-theme button[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }

/* the bento: twelve columns of tiles around the week */
.cp-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.cp-tile { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin: 0; }
.cp-tile h2 { font-size: 20px; }
.cp-tile-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.cp-now { grid-column: 1 / span 4; grid-row: 1; }
.cp-dial { grid-column: 5 / span 4; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: center; padding: 14px 14px 12px;
  background: radial-gradient(circle at 50% 46%, var(--surface-2), var(--surface) 70%); }
.cp-check { grid-column: 9 / span 4; grid-row: 1; }
.cp-letter { grid-column: 1 / span 4; grid-row: 2; }
.cp-daily { grid-column: 9 / span 4; grid-row: 2; }
.cp-add { grid-column: 1 / span 8; grid-row: 3; }
.cp-bill { grid-column: 9 / span 4; grid-row: 3; }
.cp-sched { grid-column: 1 / span 6; grid-row: 4; }
.cp-rep { grid-column: 7 / span 3; grid-row: 4; }
.cp-person { grid-column: 10 / span 3; grid-row: 4; }
.cp-subs { grid-column: 1 / -1; grid-row: 5; }

/* where we are */
.cp-now.is-next { border-color: var(--cp-gold-line); }
.cp-now.is-held { border-color: var(--cp-lav-line); }
.cp-now.is-warn { border-color: var(--cp-amber); }
.cp-big-say { font: 700 30px/1.05 var(--font-display); color: var(--ink); margin: 2px 0 10px; }
.cp-big-say em { font-style: normal; color: var(--cp-gold); }
.cp-now.is-held .cp-big-say em { color: var(--cp-lav); }
.cp-now.is-cycle .cp-big-say em { color: var(--cp-mint); }
.cp-seg4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0; }
.cp-seg4 span { height: 34px; border-radius: 8px; border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; font: 600 11px var(--font-mono); color: var(--faint); }
.cp-seg4 .is-done { background: var(--cp-mint); border-color: var(--cp-mint); color: var(--cp-on-mint); }
.cp-seg4 .is-next { border: 1.5px solid var(--cp-gold); color: var(--cp-gold); background: var(--cp-gold-soft); }
.cp-seg4 .is-running { border: 1.5px solid var(--cp-gold); color: var(--cp-gold-ink); background: var(--cp-gold-fill); }
.cp-seg4 .is-held { border: 1.5px solid var(--cp-lav); color: var(--cp-lav); background: var(--cp-lav-soft); }
.cp-seg4 .is-warn { border: 1.5px dashed var(--cp-amber); color: var(--cp-amber); }
.cp-seg4-l { display: flex; justify-content: space-between; gap: 10px; font: 500 11px var(--font-mono); color: var(--muted); }
.cp-say { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 12px 0 14px !important; }
.cp-now .btn { width: 100%; }
/* a plan with two markets or more: each, its count, its page */
.cp-mkts { margin: 2px 0 6px; }
.cp-mkts li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.cp-mkts li:first-child { border-top: 0; }
.cp-mkts .mk-l { font: 600 14px/1.3 var(--font-body); color: var(--ink); }
.cp-mkts .mk-l small { display: block; margin-top: 2px; font: 400 12px/1.4 var(--font-body); color: var(--faint); }
.cp .cp-now .cp-mkts .btn { width: auto; flex: none; }
#cp-count { margin-top: 8px; }

/* the week */
/* (overflow visible: a day's name at the ring's sides, "SAT 17", runs a few units past the drawing's edge at the phone's
   12.5 px and was cut off; it sits in the tile's own padding instead) */
.cp-week { width: 100%; max-width: 400px; height: auto; display: block; overflow: visible; }
.cp-week text { font-family: var(--font-mono); }
.cp-week .d-lab { font-size: 10px; letter-spacing: .06em; fill: var(--muted); }
.cp-week .d-now { fill: var(--cp-gold); }
.cp-week .d-ev { font-size: 10.5px; font-weight: 500; fill: var(--ink); }
.cp-week .d-ev .d-sub { font-size: 9.5px; font-weight: 400; fill: var(--muted); }
.cp-week .d-ev .is-rule { fill: var(--muted); }
.cp-week .d-ring { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.cp-week .d-tick { stroke: var(--line-2); stroke-width: 1.5; }
.cp-week .d-today { fill: none; stroke: var(--cp-gold-soft); stroke-width: 30; }
.cp-week .d-daily { fill: none; stroke: var(--cp-sky); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0 13.2; }
.cp-week .d-g { fill: none; stroke: var(--cp-gold-fill); stroke-width: 12; stroke-linecap: round; }
.cp-week .d-gp { fill: none; stroke: var(--cp-gold); stroke-width: 3; stroke-dasharray: 5 5; stroke-linecap: round; }
.cp-week .d-l { fill: none; stroke: var(--cp-lav); stroke-width: 12; stroke-linecap: round; opacity: .85; }
.cp-week .d-lp { fill: none; stroke: var(--cp-lav); stroke-width: 3; stroke-dasharray: 4 5; stroke-linecap: round; }
.cp-week .d-m { fill: none; stroke: var(--cp-mint); stroke-width: 12; stroke-linecap: round; opacity: .7; }
.cp-week .d-dot { fill: var(--cp-gold-fill); stroke: var(--surface); stroke-width: 3; }
.cp-week .d-dot.is-run { fill: var(--cp-gold); }
.cp-week .d-env { fill: var(--surface); stroke: var(--cp-gold); stroke-width: 2; }
.cp-week .d-envl { fill: none; stroke: var(--cp-gold); stroke-width: 1.6; }
.cp-week .d-lens { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.5; }
.cp-week .d-beam { fill: var(--cp-beam); opacity: .7; animation: cpBeam 4.8s ease-in-out infinite; }
.cp-week .d-beam.is-held { fill: var(--cp-beam-lav); }
@keyframes cpBeam { 0%, 100% { opacity: .45; } 50% { opacity: .85; } }
.cp-week .d-c1 { font-size: 10px; letter-spacing: .16em; fill: var(--muted); }
.cp-week .d-c2 { font-family: var(--font-display); font-size: 44px; font-weight: 700; fill: var(--ink); }
.cp-week .d-c2.is-long { font-size: 30px; }
.cp-week .d-c3 { font-size: 11.5px; fill: var(--cp-gold); }
.cp-week .d-c3.is-held { fill: var(--cp-lav); }
.cp-week .d-c3.is-cycle { fill: var(--cp-mint); }
.cp-week .d-c3.is-warn { fill: var(--cp-amber); }
.cp-week .d-c4 { font-size: 11px; fill: var(--muted); }
.cp-week-cap { font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; margin-top: 4px; max-width: 34em; }
.cp-week-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.cp-week-key span { display: inline-flex; align-items: center; gap: 5px; }
.cp-dk { display: inline-block; width: 14px; height: 6px; border-radius: 3px; }
.cp-dk.is-g { background: var(--cp-gold-fill); }
.cp-dk.is-p { border: 1.5px dashed var(--cp-gold); height: 8px; }
.cp-dk.is-l { background: var(--cp-lav); }
.cp-dk.is-m { background: var(--cp-mint); }
.cp-dk.is-s { width: 7px; height: 7px; border-radius: 50%; background: var(--cp-sky); }

/* the next check, the next letter */
.cp-bigtime { font: 700 46px/1 var(--font-display); color: var(--ink); margin: 2px 0 4px; }
.cp-bigtime.is-s { font-size: 34px; }
.cp-bigtime.is-xs { font-size: 26px; line-height: 1.1; }
.cp-sub { font: 500 12.5px var(--font-mono); color: var(--cp-gold); }
.cp-sub.is-held { color: var(--cp-lav); }
.cp-sub.is-cycle { color: var(--cp-mint); }
.cp-sub.is-rule { color: var(--muted); }
.cp-sub.is-warn { color: var(--cp-amber); }
.cp-flow { display: grid; gap: 7px; margin-top: 14px; }
.cp-flow li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); }
.cp-flow li i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-2); }
.cp-flow li.is-done i { background: var(--cp-mint); border-color: var(--cp-mint); }
.cp-flow li.is-next i { background: var(--cp-gold-fill); border-color: var(--cp-gold); }
.cp-flow li.is-person i { border-color: var(--cp-lav); }
.cp-flow li.is-held i { background: var(--cp-lav); border-color: var(--cp-lav); }
.cp-flow li b { font: 600 12px var(--font-mono); color: var(--ink); white-space: nowrap; }
.cp-flow li.is-done span { text-decoration: none; }

/* rows of facts */
.cp-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); }
.cp-rows li:first-child { border-top: 0; }
.cp-rows .r-l { color: var(--ink); font-size: 14px; }
.cp-rows .r-l small { display: block; color: var(--faint); font-size: 12px; margin-top: 1px; }
.cp-rows .r-r { font: 500 12.5px var(--font-mono); color: var(--muted); text-align: right; white-space: nowrap; }
.cp-rows .r-r.is-ok { color: var(--cp-mint); }
.cp-rows .r-r.is-next { color: var(--cp-gold); }
.cp-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cp-verdict { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.cp-verdict-h { display: block; font: 600 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }

/* checked every day */
.cp-roster { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.cp-roster i { width: 16px; height: 16px; border-radius: 50%; background: var(--cp-sky); opacity: .85; }
.cp-roster i.is-you { background: var(--cp-mint); opacity: 1; box-shadow: 0 0 0 3px var(--cp-mint-soft); }
.cp-roster i.is-cmp { background: var(--cp-gold-fill); opacity: 1; }
.cp-rk { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.cp-rk span { display: inline-flex; align-items: center; gap: 5px; }
.cp-rk i { width: 8px; height: 8px; border-radius: 50%; }
.cp-rk .k-you { background: var(--cp-mint); }
.cp-rk .k-cmp { background: var(--cp-gold-fill); }
.cp-rk .k-ld { background: var(--cp-sky); }
.cp-more > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; min-height: 44px; margin-top: 6px; }
.cp-more > summary::-webkit-details-marker { display: none; }
.cp-more-show { font: 600 12px var(--font-body); color: var(--cp-mint); }
.cp-more[open] .cp-more-show { color: var(--muted); }

/* add to your plan */
.cp-addrows { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: 4px; }
.cp-ar { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.cp-ar > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 12px 13px; min-height: 44px; }
.cp-ar > summary::-webkit-details-marker { display: none; }
.cp-ar .an { font: 600 14px/1.3 var(--font-body); color: var(--ink); }
.cp-ar .am { grid-column: 1 / -1; display: block; }
.cp-ar .ap { display: flex; align-items: center; gap: 10px; }
.cp-ar .ap > span { font: 700 17px var(--font-display); color: var(--ink); white-space: nowrap; }
.cp-ar .ap small { font: 500 10.5px var(--font-mono); color: var(--faint); }
.cp-ar .ap em { font-style: normal; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--cp-gold-line); background: var(--cp-gold-soft); color: var(--cp-gold); font: 700 20px/1 var(--font-body); display: grid; place-items: center; transition: transform var(--dur-1) var(--ease); }
.cp-ar[open] .ap em { color: var(--muted); border-color: var(--line-2); background: transparent; transform: rotate(45deg); }
.cp-ar.is-off > summary { cursor: default; }
.cp-ar.is-off .ap em { display: none; }
.cp-bar { display: block; height: 8px; border-radius: 4px; background: var(--line); position: relative; overflow: hidden; }
.cp-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--cp-mint); }
.cp-bar b { position: absolute; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: repeating-linear-gradient(90deg, var(--cp-gold-soft) 0 6px, transparent 6px 9px); border: 1px dashed var(--cp-gold-line); }
.cp-bar-l { display: flex; justify-content: space-between; gap: 8px; font: 500 11px var(--font-mono); color: var(--faint); margin-top: 4px; }
.cp-why { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.cp-confirm { border-top: 1px dashed var(--line-2); padding: 12px 13px 13px; display: grid; gap: 10px; }
.cp-qty { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-qty button { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 700 18px/1 var(--font-body); cursor: pointer; }
.cp-qty button:disabled { opacity: .4; cursor: default; }
.cp-qty output { min-width: 2ch; text-align: center; font: 700 20px var(--font-display); color: var(--ink); }
.cp-qty .sum { font: 600 13px var(--font-mono); color: var(--ink); margin-left: auto; }
.cp-terms { font-size: 12px; line-height: 1.5; color: var(--muted); }
.cp-add-status { font-size: 13px; color: var(--cp-amber); }
.cp-add-status:empty { display: none; }

/* billing */
.cp-bill-n { font: 700 30px/1 var(--font-display); color: var(--ink); margin: 2px 0 8px; }
.cp-bill-n small { font: 500 12px var(--font-mono); color: var(--faint); }
.cp-bill-say { font-size: 13.5px; line-height: 1.5; color: var(--ink); margin: 8px 0 0 !important; }
.cp-bill-say.is-warn { color: var(--cp-amber); }
#billing-box .hero-actions { margin-top: 10px; gap: 8px; }
#billing-box .form-status { margin-top: 8px; font-size: 13px; min-height: 0; }

/* everything the plan checks */
.cp-sc li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; align-items: baseline; }
.cp-sc li:first-child { border-top: 0; }
.cp-sc .n { color: var(--ink); font-weight: 600; }
.cp-sc .n small { display: block; font-weight: 400; color: var(--faint); font-size: 12px; }
.cp-sc .o { font: 500 12px var(--font-mono); color: var(--ink); }
.cp-sc .l { font: 500 12px var(--font-mono); color: var(--muted); text-align: right; }

/* your week (release 8; the Your week plan's section 7): the page's headline and three of its numbers, linked to the card.
   Phone first: one column, the headline, the three tiles side by side, the link; from 761 px the headline and the link
   on the left, the tiles on the right. The change is an arrow AND words; colour only repeats it. */
.cp-yw { margin: 0 0 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-areas: "top tiles" "go tiles"; gap: 10px 22px; align-items: start; border-color: var(--cp-mint-line); }
.cp-yw[hidden] { display: none; }
.cp-yw-top { grid-area: top; }
.cp-yw .cp-yw-when { font: 500 12.5px/1.4 var(--font-mono); color: var(--muted); margin: 0 0 6px; }
.cp-yw .cp-yw-head { font: 700 22px/1.2 var(--font-display); color: var(--ink); text-wrap: balance; }
.cp .cp-yw-tiles { grid-area: tiles; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cp-yw-t { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.cp-yw-l { font: 600 12px/1.25 var(--font-body); color: var(--muted); }
.cp-yw-v { font: 700 24px/1.1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cp-yw-v small { font: 500 12.5px var(--font-body); color: var(--muted); }
.cp-yw-c { font: 600 12.5px/1.3 var(--font-mono); color: var(--muted); }
.cp-yw-c.is-up { color: var(--cp-mint); }
.cp-yw-c.is-down { color: var(--cp-red); }
.cp-yw-c.is-start { color: var(--cp-gold); }
.cp-yw-g { margin-right: 4px; }
.cp-yw-n { font-size: 12px; line-height: 1.35; color: var(--muted); }
.cp .cp-yw-go { grid-area: go; align-self: end; justify-self: start; display: inline-flex; align-items: center; min-height: 38px; font-weight: 600; }
.cp .cp-yw-go::after { content: "\203A"; margin-left: 6px; }

/* your reports, a person, who is signed in */
.cp-person-line { font: 600 15px/1.4 var(--font-body); color: var(--ink); margin: 6px 0 8px !important; }
.cp-rep .rlist { display: grid; gap: 0; margin: 0; }
.cp-rep .rrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.cp-rep .rrow:first-child { border-top: 0; }
.cp-rep .rrow h2 { font: 600 14px/1.3 var(--font-body); margin: 0; }
.cp-rep .rrow-meta { font-size: 11.5px; }
.cp-rep .rrow .btn { min-height: 34px; padding: 0 10px; font-size: 13px; background: transparent; color: var(--cp-mint); border: 0; }
.cp-rep .home-block-head { display: none; }
.cp-rep .home-block { margin: 0; }
/* who is signed in: the first line of the home, with the way out */
.cp .cp-who { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 12px; margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.cp-who b { color: var(--ink); font-weight: 600; }
/* the plain home's head: the look and the way out */
.home-head-side { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* a part that could not be read, or has nothing yet */
.cp-none { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin-top: 6px !important; }

/* motion: the beam and the pulse stop; nothing moves to say a fact */
@media (prefers-reduced-motion: reduce) {
  .cp-week .d-beam { animation: none; }
  .cp-ar .ap em { transition: none; }
}

/* touch: every control 44 px */
@media (pointer: coarse) {
  .cp .btn, .cp .btn-sm { min-height: 44px; }
  .cp-quiet { min-height: 44px; }
  .cp-theme button { min-height: 44px; }
  .cp-rep .rrow .btn { min-height: 44px; }
  .cp .cp-yw-go { min-height: 44px; }
}

/* ── a phone, and anything narrow: one column, the next check first, the panel order of the plan's section 2 ── */
@media (max-width: 760px) {
  body.is-cockpit .home-main > .section { padding: 0 0 40px; }
  body.is-cockpit .home-wrap { padding-inline: 16px; }
  .cp-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 -16px 14px; padding: 10px 16px;
    background: var(--surface); border-bottom: 1px solid var(--line); font: 600 13px var(--font-body); color: var(--ink); }
  .cp-strip b { font: 600 12.5px var(--font-mono); color: var(--cp-gold); text-align: right; }
  .cp-strip.is-held b { color: var(--cp-lav); }
  .cp-strip[hidden] { display: none; }
  .cp .cp-who { justify-content: flex-start; }
  .cp-head { margin-bottom: 12px; align-items: flex-start; }
  .cp-head h1 { font-size: 32px; }
  .cp-head-side { align-items: flex-start; }
  .cp-chips { justify-content: flex-start; }
  .cp-bento { grid-template-columns: 1fr; gap: 12px; }
  .cp-dial { order: 1; } .cp-now { order: 2; } .cp-check { order: 3; } .cp-letter { order: 4; } .cp-daily { order: 5; } .cp-add { order: 6; }
  .cp-sched { order: 7; } .cp-bill { order: 8; } .cp-rep { order: 9; } .cp-person { order: 10; } .cp-subs { order: 11; }
  .cp-now, .cp-dial, .cp-check, .cp-letter, .cp-daily, .cp-add, .cp-bill, .cp-sched, .cp-rep, .cp-person, .cp-subs { grid-column: 1; grid-row: auto; }
  .cp-addrows { grid-template-columns: 1fr; }
  .cp-tile { padding: 15px; }
  .cp-yw { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "tiles" "go"; gap: 10px; }
  .cp-yw .cp-yw-head { font-size: 20px; }
  .cp .cp-yw-tiles { gap: 6px; }
  .cp-yw-t { padding: 9px 9px; }
  .cp-yw-v { font-size: 21px; }
  .cp-sc li { grid-template-columns: minmax(0, 1fr) auto; }
  .cp-sc .l { grid-column: 1 / -1; text-align: left; }
  .cp-tile .btn { width: 100%; }
  /* the report rows stay rows in their tile: the name, then its Open link at the right */
  .cp-rep .rrow { flex-direction: row; align-items: center; }
  .cp-rep .rrow .btn { width: auto; flex: none; }
  .cp-btns { display: grid; grid-template-columns: 1fr; }
  #billing-box .hero-actions .btn { width: 100%; }
  .cp-bigtime { font-size: 40px; }
  .cp-bigtime.is-s { font-size: 30px; }
  /* the plan's phone rule 6: no text under 12 px, and times in mono at 12.5 px or more */
  .cp-kicker, .cp .cp-tile h2.cp-kicker, .cp .cp-more .cp-kicker, .cp-src, .cp-chip, .cp-seg4-l, .cp-bar-l, .cp-week-key, .cp-theme span, .cp-verdict-h { font-size: 12px; }
  .cp-flow li b, .cp-sc .o, .cp-sc .l, .cp-rows .r-r, .cp-meta, .cp-sub { font-size: 12.5px; }
  .cp-seg4 span { font-size: 12px; }
  .cp-ar .ap small, .cp-rep .rrow-meta, .cp-eyebrow { font-size: 12px; }
  .cp .cp-tile .cp-mkts .btn { width: auto; }
  .cp-week .d-lab, .cp-week .d-ev, .cp-week .d-ev .d-sub, .cp-week .d-c1, .cp-week .d-c4 { font-size: 12.5px; }
  .cp-week .d-c3 { font-size: 13px; }
}