/* CognaType Personal Interface: reading preferences, the high-contrast re-target, and the
   few shell rules assets/ct/shell.css does not carry. Every route body reads --ct-* tokens
   directly; the --pi-* bridge block and the .pi-member body-scope rules that served the
   not-yet-reskinned bodies were deleted in the final review (2026-09-19) because their one
   live effect was `.pi-member .ct-content a` outranking `.ct-btn--filled` and hiding the
   dashboard's signed-out "Sign in" label. Nothing in this file may key off .pi-member.
   The alternate reading-typeface toggle this file used to carry, and the @font-face for the
   accessible face it switched to, are gone per the owner's ruling on the Task 7 (Account)
   brief: Lexend was already chosen as the site's one reading typeface for exactly this
   reason, so a second, switchable face never shipped. The now-unreferenced font files were
   removed with it (grepped first for any other reference; there was none). */

/* Reading comfort. chrome.js applies a signed-in member's reading preferences on EVERY
   page (initReadingPreferences), and applying them loads this stylesheet there too, so
   these rules run on the baked public pages as well as the four member routes. They must
   be INERT at the default "standard" values: only a non-default text size or line length
   may touch .resource-section copy, otherwise every signed-in member reads public pages
   re-sized to 1rem and clamped to 68ch that cms.css never asked for (final review I2,
   2026-09-19). There is deliberately no un-attributed .resource-section rule here. */
html[data-ct-text-size="large"] { --ct-reading-size: 1.125rem; }
html[data-ct-text-size="larger"] { --ct-reading-size: 1.25rem; }
html[data-ct-line-length="narrow"] { --ct-reading-measure: 54ch; }

html[data-ct-text-size="large"] :is(.resource-section .blk-prose, .resource-section .blk-lead, .resource-section .blk-callout, .resource-section .blk-list, .resource-section .blk-quote, .pi-reading-copy, .pi-reading-preview),
html[data-ct-text-size="larger"] :is(.resource-section .blk-prose, .resource-section .blk-lead, .resource-section .blk-callout, .resource-section .blk-list, .resource-section .blk-quote, .pi-reading-copy, .pi-reading-preview) {
  font-size: var(--ct-reading-size);
}

html[data-ct-line-length="narrow"] :is(.resource-section .blk-prose, .resource-section .blk-lead, .resource-section .blk-callout, .resource-section .blk-list, .resource-section .blk-quote, .pi-reading-copy, .pi-reading-preview) {
  max-width: var(--ct-reading-measure);
}

/* High contrast re-targets design-system.css's own --ct-text-* and --ct-border-default tokens
   directly (Task 7), so the boost reaches every component built from them, not just these
   four member routes' own body copy -- this supersedes the old .pi-member-scoped ink and
   border override block Task 3 deleted as dead code (it set cms.css names no member route
   ever read, so the contrast preference has been inert since). Light values are the old
   block's own numbers, just re-pointed. Dark needs its own, separately tuned values: the
   dark palette already sits close to the contrast ceiling, so reusing the light numbers
   would put dark ink on the dark canvas instead of boosting anything. Both are declared
   under the identical three-way selector design-system.css itself uses for html[data-mode]:
   an explicit "dark" attribute, and the system/absent case gated on the OS preference. */
html[data-ct-contrast="high"] {
  --ct-text-primary: #071a3a;
  --ct-text-secondary: #10264b;
  --ct-text-muted: #334b70;
  --ct-border-default: #6683aa;
}

html[data-mode="dark"][data-ct-contrast="high"] {
  --ct-text-primary: #ffffff;
  --ct-text-secondary: #eaf2fb;
  --ct-text-muted: #cfe0f2;
  --ct-border-default: #6f93bd;
}

@media (prefers-color-scheme: dark) {
  html[data-mode="system"][data-ct-contrast="high"],
  html:not([data-mode])[data-ct-contrast="high"] {
    --ct-text-primary: #ffffff;
    --ct-text-secondary: #eaf2fb;
    --ct-text-muted: #cfe0f2;
    --ct-border-default: #6f93bd;
  }
}

/* Density (FR-052, 2026-09-19, "Replace Line length with a Density control on Account").
   Gmail-style Default/Comfortable/Compact, replacing the retired Line length control (which
   only ever clamped .resource-section reading copy above). This re-targets
   design-system.css's own --ct-space-* scale directly, the same "re-target the vendored
   file's own tokens from here instead of editing it" shape html[data-ct-contrast="high"]
   above uses for the --ct-text- family and --ct-border-default -- html IS :root, so every component built
   from --ct-space-* (ct-row/ct-section gaps, .ct-field-inline gaps, account.css's own
   .ac-row padding-block, shell.css's nav/body-grid/content padding, and so on) picks up the
   change everywhere it renders, on every member route, not only Account. That is the actual
   FR-052 requirement: "visibly changes overall spacing," not just line width.

   "Default" is a true no-op BY ABSENCE: there is no html[data-ct-density="default"] rule at
   all, so design-system.css's own values stand untouched. --ct-space-0 is never redeclared
   either, in either block below -- it means "no space," not "the smallest amount of space,"
   and a density control should never turn a deliberate zero into a nonzero gap.

   Comfortable and Compact both shift design-system.css's own numeric scale by a flat 4px in
   either direction (Compact floors at 2px rather than reaching 0, so the tightest gaps
   compress without fully touching). This keeps every value obviously a "one step" move on a
   published scale, not a guessed multiplier, so it is auditable against
   assets/ct/design-system.css's own --ct-space-1 through --ct-space-10 declarations
   (currently 4/8/12/16/20/24/32/40/48/64px) at a glance. */
html[data-ct-density="comfortable"] {
  --ct-space-1: 8px;
  --ct-space-2: 12px;
  --ct-space-3: 16px;
  --ct-space-4: 20px;
  --ct-space-5: 24px;
  --ct-space-6: 28px;
  --ct-space-7: 36px;
  --ct-space-8: 44px;
  --ct-space-9: 52px;
  --ct-space-10: 68px;
}

html[data-ct-density="compact"] {
  --ct-space-1: 2px;
  --ct-space-2: 4px;
  --ct-space-3: 8px;
  --ct-space-4: 12px;
  --ct-space-5: 16px;
  --ct-space-6: 20px;
  --ct-space-7: 28px;
  --ct-space-8: 36px;
  --ct-space-9: 44px;
  --ct-space-10: 60px;
}

html[data-ct-reduce-motion="true"] *,
html[data-ct-reduce-motion="true"] *::before,
html[data-ct-reduce-motion="true"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.01ms !important;
}

/* The shell itself (header.ct-topbar, nav.ct-rail, div.ct-body-grid, main.ct-content,
   aside.ct-context) is assets/ct/shell.css over assets/ct/design-system.css, ported from the
   Design handoff. These few rules cover what the handoff's mock had no state for, and draw
   only on its tokens. */

/* The badge beside the wordmark is "Beta" in content/site.js and BETA in the mocks. */
.ct-wordmark span { text-transform: uppercase; }

/* Signed out, the topbar's one action is a filled button on the navy bar; the design
   system's focus ring is navy too, so it takes the bar's inverse ring like its neighbours. */
.ct-topbar .ct-btn:focus-visible { outline-color: var(--ct-text-inverse); }

/* Sign out is a real button inside the user menu, where the mock only had links. */
.ct-menu button {
  display: flex;
  align-items: center;
  gap: var(--ct-space-3);
  width: 100%;
  padding: var(--ct-space-2) var(--ct-space-3);
  border: 0;
  border-radius: var(--ct-radius-sm);
  background: none;
  color: var(--ct-text-primary);
  font: inherit;
  font-size: var(--ct-text-base);
  text-align: left;
  cursor: pointer;
}
.ct-menu button:hover { background: var(--ct-bg-hover); color: var(--ct-text-link); }

/* Your surveys on My Map (FR-055, 2026-09-20): the native details rows lib/survey-takes.js
   renders. design-system.css and shell.css carry no details or summary rule, so the row
   divider, the summary's cursor and the inner spacing live here. Class-scoped and inert on
   every other page this sheet reaches; ct tokens only; the browser's own marker and the
   global :focus-visible ring are kept, which is why the summary is not display:flex (a
   summary that is not display:list-item loses its marker in Chrome). */
.pi-takes { border-top: var(--ct-border-width) solid var(--ct-border-subtle); }
.pi-take { border-bottom: var(--ct-border-width) solid var(--ct-border-subtle); }
.pi-take-summary {
  padding: var(--ct-space-3) 0;
  cursor: pointer;
  color: var(--ct-text-primary);
}
.pi-take-summary .ct-eyebrow { display: inline; margin-right: var(--ct-space-3); }
.pi-take-summary:hover .ct-body-strong { color: var(--ct-text-link); }
.pi-take-body { padding: 0 0 var(--ct-space-4) var(--ct-space-5); }
.pi-take-patterns {
  margin: 0;
  padding-left: var(--ct-space-5);
  display: grid;
  gap: var(--ct-space-3);
}
.pi-take-patterns .ct-support { margin-top: var(--ct-space-1); }
.pi-take-retake { margin-top: var(--ct-space-4); }

/* Your surveys, grouped by survey (runway feedback on FR-055, 2026-09-21): one .pi-survey
   details per survey key, .pi-take rows indented inside its body. Same reasoning as the block
   above (ct tokens only); the summary's native marker is suppressed (list-style: none) in
   favour of .pi-survey-chevron, a custom chevron that rotates on [open]. The left border on
   .pi-survey-body is the only new visual idea, there to read the nested .pi-take rows as
   children of the group. */
.pi-surveys { border-top: var(--ct-border-width) solid var(--ct-border-subtle); }
.pi-survey { border-bottom: var(--ct-border-width) solid var(--ct-border-subtle); }
/* Fix 2 (Jody's feedback, 2026-09-21): the chevron now leads the line (see lib/survey-takes.js's
   surveyGroupHtml), so justify-content: space-between is gone -- it used to pin the chevron to
   the far right by pushing the two flex children apart; with the chevron first in DOM order that
   would instead shove the name and taken-count all the way to the far right. flex-start plus the
   existing gap keeps the chevron, then the name and taken-count, sitting together at the start. */
.pi-survey-summary {
  padding: var(--ct-space-3) 0;
  cursor: pointer;
  color: var(--ct-text-primary);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--ct-space-3);
  list-style: none;
}
.pi-survey-summary-text { display: grid; gap: var(--ct-space-1); }
.pi-survey-summary .ct-support { display: block; }
.pi-survey-chevron {
  display: inline-flex;
  flex: none;
  color: var(--ct-text-secondary);
  transition: transform var(--ct-motion-fast) var(--ct-motion-ease);
}
.pi-survey[open] > .pi-survey-summary .pi-survey-chevron { transform: rotate(180deg); }
.pi-survey-summary:hover .ct-body-strong { color: var(--ct-text-link); }
.pi-survey-body {
  padding: 0 0 var(--ct-space-4) var(--ct-space-5);
  border-left: var(--ct-border-width) solid var(--ct-border-subtle);
}

/* Thin personal-route footer (T-196 item 7, FR-057, 2026-09-21): one row, minimal height,
   in the personal palette. lib/personal-shell.js's footerHtml() populates [data-personal-footer]
   with this markup on all four member routes. */
.ct-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ct-space-4);
  padding: var(--ct-space-4) var(--ct-space-6);
  border-top: var(--ct-border-width) solid var(--ct-border-subtle);
  color: var(--ct-text-secondary);
  font-size: var(--ct-text-sm);
}
.ct-footer-mark {
  color: var(--ct-text-secondary);
  text-decoration: none;
  font-family: var(--ct-font-display);
}
.ct-footer-mark:hover { color: var(--ct-text-link); }
.ct-footer-links { display: flex; gap: var(--ct-space-4); }
.ct-footer-links a { color: var(--ct-text-secondary); text-decoration: none; }
.ct-footer-links a:hover { color: var(--ct-text-link); }