/* The faces Harbor names, shipped with the theme ([AF-145]; AF-DESIGN-SYSTEM.md §4.2): Theme/fonts/ beside the two
   files, served at /theme/fonts/ with the theme — no request leaves the app. Source Sans 3 (Adobe, SIL OFL 1.1, fonts/OFL-SourceSans3.txt)
   as its two variable files; JetBrains Mono (JetBrains, SIL OFL 1.1, fonts/OFL-JetBrainsMono.txt) at the two weights identifiers wear. */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url('/theme/fonts/SourceSans3VF-Upright.woff2') format('woff2'); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap; src: url('/theme/fonts/SourceSans3VF-Italic.woff2') format('woff2'); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url('/theme/fonts/JetBrainsMono-Regular.woff2') format('woff2'); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url('/theme/fonts/JetBrainsMono-SemiBold.woff2') format('woff2'); }

/* Compass theme "Harbor": tokens.css. Light under :root, dark under :root.dark. Written in chat J0, 2026-10-30. */
:root {
  /* primitives: the ramps the semantic tokens point at (a sample; every semantic token below carries its own value) */
  --p-light-surface-canvas: #eef5f7;
  --p-light-surface-plane: #ffffff;
  --p-light-text-ink: #142226;
  --p-light-text-muted: #515d61;
  --p-light-accent-action: #006d6b;
  --p-light-state-attention: #b54b43;
  --p-light-state-warning: #a45f00;
  --p-light-state-success: #3a7d1f;   /* DESIGN-PROFILE.md §9 (12), CP-30: away from the accent */
  /* semantic, light */
  --surface-canvas: #eef5f7;
  --surface-plane: #ffffff;
  --surface-raised: #ffffff;
  --surface-inset: #e3ebee;
  --surface-hover: #e9f2f5;
  --surface-selected: #d2f3f1;
  --surface-rail: #e3edf1;
  --text-ink: #142226;
  --text-body: #2e3a3e;
  --text-muted: #515d61;
  --text-faint: #8b9497;
  --text-on-accent: #ffffff;
  --text-on-ink: #ffffff;
  --text-link: #006361;
  --border-hairline: #d1d9dc;
  --border-default: #6c777a;
  --border-emphasis: #006d6b;
  --border-strong: #3c4a4f;
  --accent-action: #006d6b;
  --accent-action-hover: #005c5a;
  --accent-action-active: #004948;
  --accent-muted: #caf1ef;
  --accent-ai: #6f4fa1;
  --accent-ai-tint: #f2edff;
  --accent-ai-border: #7d5fad;
  --state-attention: #b54b43;
  --state-attention-text: #89322c;
  --state-attention-tint: #ffe8e4;
  --state-warning: #a45f00;
  --state-warning-text: #7b4300;
  --state-warning-tint: #ffedd7;
  --state-success: #3a7d1f;
  --state-success-text: #03642b;
  --state-success-tint: #e0f7e4;
  --state-info: #0077bd;
  --state-info-text: #00568f;
  --state-info-tint: #ddf3ff;
  --state-muted: #5c6568;
  --state-muted-text: #4c5457;
  --state-muted-tint: #ebf1f4;
  --category-1: #a34945;
  --category-1-tint: #ffe6e3;
  --category-2: #9c5313;
  --category-2-tint: #ffe9d9;
  --category-3: #7f6700;
  --category-3-tint: #f6efd5;
  --category-4: #287c42;
  --category-4-tint: #dff6e2;
  --category-5: #007d7e;
  --category-5-tint: #d5f6f6;
  --category-6: #0070a6;
  --category-6-tint: #daf2ff;
  --category-7: #695ba9;
  --category-7-tint: #eeebff;
  --category-8: #924b84;
  --category-8-tint: #fee6f8;
  --focus-ring: #00605e;
  --focus-ring-offset: #ffffff;
  --shape-radius-control: 12px;
  --shape-radius-plane: 16px;
  --shape-radius-sheet: 24px;
  --shape-radius-pill: 999px;
  --shape-border-width: 1px;
  --elevation-plane: 0 1px 2px rgb(20 30 40 / 0.06), 0 2px 8px rgb(20 30 40 / 0.06);
  --elevation-raised: 0 4px 16px rgb(20 30 40 / 0.12);
  --elevation-overlay: 0 12px 40px rgb(20 30 40 / 0.18);
  --space-base: 8px;
  --space-ratio: 1.5;
  --space-row: 12px;
  --space-field: 16px;
  --space-section: 32px;
  --space-gutter: 16px;
  --type-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --type-family-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --type-title-size: 1.75rem;
  --type-title-weight: 600;
  --type-title-leading: 1.2;
  --type-figure-size: 2.25rem;
  --type-figure-weight: 600;
  --type-figure-leading: 1.1;
  --type-heading-size: 1.125rem;
  --type-heading-weight: 600;
  --type-heading-leading: 1.3;
  --type-label-size: 0.875rem;
  --type-label-weight: 500;
  --type-label-leading: 1.3;
  --type-body-size: 1rem;
  --type-body-weight: 400;
  --type-body-leading: 1.5;
  --type-control-size: 1rem;
  --type-control-weight: 600;
  --type-control-leading: 1.2;
  --type-caption-size: 0.875rem;
  --type-caption-weight: 400;
  --type-caption-leading: 1.4;
  --type-numerals: tabular-nums;
  --type-label-transform: none;
  --type-label-tracking: 0;
  --target-min: 24px;
  --motion-duration-fast: 100ms;
  --motion-duration-base: 180ms;
  --motion-easing: cubic-bezier(0.2, 0, 0, 1);
  --decoration-accent: linear-gradient(90deg, #006d6b, #007cab);
  /* component tokens */
  --segment-track: #e3ebee;
  --segment-active: #ffffff;
  --icon-stroke: 1.75px;
  --modal-width-small: 480px;
  --modal-width-standard: 640px;
  --modal-width-wide: 780px;
  --modal-width-extra: 900px;
  --modal-header: plain;
  --modal-footer: sticky;
  --rail-width-expanded: 224px;
  --rail-width-collapsed: 56px;
  /* CP-443 (AF-2056; BACKDROP-2026-11-09-cwd, ratified 2026-11-09): the canvas's rose, Theme/canvas-rose.svg, 2 % ink with rings
     5 / 3.5 / 3.5 px, its centre on the viewport's start-bottom corner, 1400 px square (about 900 at 390: 230vw); both shells'
     canvas draws it behind every plane (the host's .af-appshell::before, the pilot's .pilot-canvas::before) */
  --canvas-image: url('/theme/canvas-rose.svg') left calc(min(1400px, 230vw) / -2) bottom calc(min(1400px, 230vw) / -2) / min(1400px, 230vw) no-repeat;
}
:root.dark {
  --canvas-image: url('/theme/canvas-rose-dark.svg') left calc(min(1400px, 230vw) / -2) bottom calc(min(1400px, 230vw) / -2) / min(1400px, 230vw) no-repeat;   /* CP-443: the rose at 5 % of the dark ink */
  --p-dark-surface-canvas: #0a1113;
  --p-dark-surface-plane: #20282a;   /* AF row 101 ([AF-254], [AF-291]): the dark planes lifted off the canvas, a hairline edge on every plane */
  --p-dark-text-ink: #eaeff1;
  --p-dark-text-muted: #a6b0b3;
  --p-dark-accent-action: #5fccc8;
  --p-dark-state-attention: #eb8278;
  --p-dark-state-warning: #d8953d;
  --p-dark-state-success: #9bd36a;   /* §9 (12) */
  --surface-canvas: #0a1113;
  --surface-plane: #20282a;
  --surface-raised: #20282a;
  --surface-inset: #2a3437;
  --plane-edge: #2b3639;            /* the component token the package reads on every plane in dark ([AF-291]); light draws none, the plane edged by its shadow ([AF-372] at v0.1.50) */
  --surface-hover: #1d2427;
  --surface-selected: #0b2f2e;
  --surface-rail: #0f1619;
  --text-ink: #eaeff1;
  --text-body: #ccd2d5;
  --text-muted: #a6b0b3;
  --text-faint: #6d7679;
  --text-on-accent: #070c0e;
  --text-on-ink: #0a1113;
  --text-link: #72d0cd;
  --border-hairline: #272f32;
  --border-default: #8b9497;
  --border-emphasis: #5fccc8;
  --border-strong: #b6c0c3;
  --accent-action: #5fccc8;
  --accent-action-hover: #7fdeda;
  --accent-action-active: #42b2ae;
  --accent-muted: #113b3a;
  --accent-ai: #c2a7f4;
  --accent-ai-tint: #292237;
  --accent-ai-border: #9c84c7;
  --state-attention: #eb8278;
  --state-attention-text: #feaba1;
  --state-attention-tint: #3a1d1a;
  --state-warning: #d8953d;
  --state-warning-text: #eeb97b;
  --state-warning-tint: #34220b;
  --state-success: #9bd36a;
  --state-success-text: #95d7a2;
  --state-success-tint: #152d1a;
  --state-info: #56acf0;
  --state-info-text: #8ccbff;
  --state-info-tint: #12283b;
  --state-muted: #919a9d;
  --state-muted-text: #bcc6c9;
  --state-muted-tint: #20282a;
  --category-1: #e88f87;
  --category-1-tint: #3d2321;
  --category-2: #e09865;
  --category-2-tint: #3b2617;
  --category-3: #c0aa54;
  --category-3-tint: #322b13;
  --category-4: #76be86;
  --category-4-tint: #1c3121;
  --category-5: #3fc0c0;
  --category-5-tint: #0e3231;
  --category-6: #65b4e9;
  --category-6-tint: #182e3d;
  --category-7: #aa9fec;
  --category-7-tint: #2b283e;
  --category-8: #d690c6;
  --category-8-tint: #382433;
  --focus-ring: #86e4e0;
  --focus-ring-offset: #0a1113;
  --shape-radius-control: 12px;
  --shape-radius-plane: 16px;
  --shape-radius-sheet: 24px;
  --shape-radius-pill: 999px;
  --shape-border-width: 1px;
  --elevation-plane: 0 1px 2px rgb(0 0 0 / 0.5), 0 2px 8px rgb(0 0 0 / 0.35);
  --elevation-raised: 0 4px 16px rgb(0 0 0 / 0.55);
  --elevation-overlay: 0 12px 40px rgb(0 0 0 / 0.65);
  --space-base: 8px;
  --space-ratio: 1.5;
  --space-row: 12px;
  --space-field: 16px;
  --space-section: 32px;
  --space-gutter: 16px;
  --type-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --type-family-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --type-title-size: 1.75rem;
  --type-title-weight: 600;
  --type-title-leading: 1.2;
  --type-figure-size: 2.25rem;
  --type-figure-weight: 600;
  --type-figure-leading: 1.1;
  --type-heading-size: 1.125rem;
  --type-heading-weight: 600;
  --type-heading-leading: 1.3;
  --type-label-size: 0.875rem;
  --type-label-weight: 500;
  --type-label-leading: 1.3;
  --type-body-size: 1rem;
  --type-body-weight: 400;
  --type-body-leading: 1.5;
  --type-control-size: 1rem;
  --type-control-weight: 600;
  --type-control-leading: 1.2;
  --type-caption-size: 0.875rem;
  --type-caption-weight: 400;
  --type-caption-leading: 1.4;
  --type-numerals: tabular-nums;
  --type-label-transform: none;
  --type-label-tracking: 0;
  --target-min: 24px;
  --motion-duration-fast: 100ms;
  --motion-duration-base: 180ms;
  --motion-easing: cubic-bezier(0.2, 0, 0, 1);
  --decoration-accent: linear-gradient(90deg, #5fccc8, #63cbfe);
  --segment-track: #050a0d;
  --segment-active: #272f32;
  --icon-stroke: 1.75px;
  --modal-width-small: 480px;
  --modal-width-standard: 640px;
  --modal-width-wide: 780px;
  --modal-width-extra: 900px;
  --modal-header: plain;
  --modal-footer: sticky;
  --rail-width-expanded: 224px;
  --rail-width-collapsed: 56px;
}
/* [CP-158], provisional, Ken's word still: the J1 and J2 comps draw the ladder at 1 (AF row 229, [AF-468]); Public's space stays the package's. */
[data-density="clinical"] {
  --density-type: 1;
  --density-space: 1;
  --target-min: 44px;
  --space-row: 16px;
  --space-field: 20px;
  --space-section: 40px;
  --space-gutter: 24px;
}
.dark [data-density="clinical"] {
  --density-type: 1;
  --density-space: 1;
  --target-min: 44px;
  --space-row: 16px;
  --space-field: 20px;
  --space-section: 40px;
  --space-gutter: 24px;
}
/* CP-204 (1), Ken's ruling 10:29: Mary's pages are on the BLUE canvas, not cream (the J2 comps' cream is wrong; J1, J3, FD
   are right) — the Public density keeps its targets and spacing and takes the default canvas, inset and hover. The App
   Factory's 205 carries the token; its consume retires these three lines' override. */
[data-density="public"] {
  --density-type: 1;
  --target-min: 48px;
  --surface-canvas: #eef5f7;
  --surface-inset: #e3ebee;
  --surface-hover: #e9f2f5;
  --space-row: 16px;
  --space-field: 24px;
  --space-section: 40px;
  --space-gutter: 20px;
}
.dark [data-density="public"] {
  --density-type: 1;
  --target-min: 48px;
  --surface-canvas: #0a1113;
  --surface-inset: #2a3437;
  --surface-hover: #1d2427;
  --space-row: 16px;
  --space-field: 24px;
  --space-section: 40px;
  --space-gutter: 20px;
}

/* CP-178 (Cowork's 06:37 ⚑; Ken 05:05; J2a draws no lens strip): a lens strip of ONE lens offers no choice, so it is not drawn —
   Mary's *Next* over her appointment and *Not scheduled yet* over her requests are the lists' filters, not views to switch. At
   v0.1.53 the design's ListBlockRenderer draws `nav.af-lenses` whenever a view has a lens; the markup line (a lone lens draws no
   strip) is routed to the App Factory (still drawn at v0.1.56). Retire this rule with that consume. */
.af-lenses:has(> .af-lens:only-child) { display: none; }

/* CP-204: Ken's walk (2026-11-03 10:29-10:56), his CSS as theme rules until the package carries each. Every rule is scoped to
   the block it fixes and names its line; each retires with the Aptive.Design / Aptive.Host consume that fixes it at the source
   (the App Factory's 205 and 206). The doubled class out-ranks the package's scoped selector ([b-...]) regardless of load order. */

/* (2) The tour callout box on the blue canvas as FD draws it — the host fills it with --surface-canvas, which a Public page
   turned cream; drawn from the default canvas in both themes. Retires with Aptive.Host's callout fix. */
.aptive-tour .aptive-tour-callout.aptive-tour-callout { background: var(--p-light-surface-canvas); }
.dark .aptive-tour .aptive-tour-callout.aptive-tour-callout { background: var(--p-dark-surface-canvas); }

/* (3) *Open my letter* (the banner's act) shows its hover: the package's --surface-hover sits a shade off the plane, so the
   hover read as nothing. Retires with the design's banner-act hover. */
.af-banner .af-banner-act:not(:disabled):hover { background: var(--surface-selected); border-color: var(--border-emphasis); color: var(--text-ink); }

/* (4) and CP-214's tracker rules: retired by CP-238 at v0.1.64 ([AF-420]), the rung's sentence in ink at v0.1.73 (row 233). */

/* CP-214's text figure and page padding: retired by CP-238 at v0.1.68 ([AF-435], [AF-436]): a card's text figure at the heading rung; one page
   container, `af-page`, so the compact gutter applies. */

/* (5) Retired by CP-213 (Ken 12:07: the columns' horizontal scroll, every stage reachable): the columns keep J3a's 220 px and
   the package's columns' row (`.af-board-scroll`, `overflow-x: auto`) scrolls sideways under the fixed heads. */

/* (6) The audiogram's grid fits its section: 6000 and 8000 Hz no longer sit behind a horizontal scroll (a 598 table in a 452
   box) — the table takes the width and its inputs drop the 1.5-target minimum. Retires with the questionnaire's grid fix. */
.syn-q-gridtable.syn-q-gridtable { width: 100%; }
.syn-q-gridtable td > .syn-input.syn-input.syn-input { min-width: 0; width: 100%; }
/* CP-238: at v0.1.65's 320 panel ([AF-421]) a cell of the seven-frequency grid is about 43 px wide: the field's own side padding clipped its
   digits. The cell gives up its padding (it is centred). CP-224's grid as J1b draws it retires this with (6). */
.syn-q-gridtable td > .syn-input.syn-q-cell.syn-q-cell { padding-inline: 0; }

/* (7) Retired by CP-238 at v0.1.64 ([AF-412]): the staged guidance is at the body rung of the theme's own ladder, as J1b draws it. */

/* (8) The survey's *Back* and *Next* at one height (a link and a button drew two). Retires with the questionnaire's walk row. */
.syn-q-walk.syn-q-walk { align-items: stretch; }
.syn-q-walk > .af-action.af-action { box-sizing: border-box; min-height: var(--target-min); }

/* (9) Label and value on one baseline in a read-only field row (*My standing* first: the values floated above their labels'
   line under align-items: center). Retires with the App Factory's 206 (the baseline). */
.af-fieldgrid[data-variant="readonly"] .af-fieldro:not(.is-wide):not(.is-bare) { align-items: baseline; }

/* (10) *My standing* at J1c's type scale: the read-only rows' labels at the label step in muted, their values at body in ink —
   one scale, not a font per row. Retires with the App Factory's 206 (one type scale). */
.af-fieldgrid[data-variant="readonly"] .af-fieldro-label { font: var(--type-label); color: var(--text-muted); }
.af-fieldgrid[data-variant="readonly"] .af-fieldro:not(.is-bare) .syn-ef-control { font: var(--type-body); color: var(--text-ink); }

/* CP-213 (Cowork's 12:37 line 4; Ken 12:07: the board cards "look terrible"): the board card and the ops request's History as J3a
   draws them, until the package draws each. Each rule names the line that retires it. */

/* (a) Retired by CP-238 at v0.1.66 (`BoardLines.Label`, [AF-431]): the package draws J3a's card, the Veteran first in the card's
   weight, VA's number beside her in the mono face, one emphasis, and stacks a column under 270 px. */

/* (b) Retired by CP-238 at v0.1.72 (`Timeline` `Variant: "history"`, [AF-456]): the package draws History as J3a's plane of rows. */