/* =============================================================================
   Comfort & Accessibility — first-party adjustment panel.

   LEFT edge. The Family Guide owns the RIGHT edge. Both panels open toward the
   centre so neither covers the other's launcher.

   Self-contained on purpose: the previous implementation opened but stayed
   translated 100% off-screen, and rather than fight that cascade this component
   brings its own rules and its own class prefix (.scc-a11y-*).
   ============================================================================= */

:root {
  /* Adjustment tokens. Untouched by default, so the site renders exactly as designed
     until someone actually changes something. */
  --scc-a11y-font-scale: 1;
  --scc-a11y-line-height: 1.6;
  --scc-a11y-letter: 0em;
  --scc-a11y-para-gap: 1em;
  --scc-a11y-measure: 70ch;
}

/* ---------- launcher: extreme LEFT ----------
   RESTING STATE IS AN ICON, NOT A LABELLED TAB.

   The previous resting state stacked "Comfort &" / "Accessibility" under the icon, which made the
   button 80x74 and parked it at top:58% — directly on top of the homepage H1 and on article-card
   titles at most desktop heights. The label is now a tooltip that opens INWARD on hover/focus, so
   nothing but a 52px icon ever rests over the page. The accessible name is carried by aria-label
   on the button, so reducing the visual label costs nothing in the accessibility tree. */
.scc-a11y__launcher {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  /* 58% sat on the H1. 72% drops the launcher below the headline band at every tested height
     while staying well clear of the mobile action bar and the footer. */
  top: 72%;
  transform: translateY(-50%);
  z-index: 120;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  padding: 0;
  border: 1px solid var(--forest-700);
  border-radius: 15px;
  background: linear-gradient(180deg, #fff 0%, var(--cream) 100%);
  color: var(--forest-800);
  font-family: var(--font-sans);
  cursor: pointer;
  box-shadow: 0 3px 0 0 var(--forest-700), 0 8px 18px rgba(27,55,45,.20), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.scc-a11y__launcher:hover {
  background: linear-gradient(180deg, #fff 0%, var(--forest-050) 100%);
  transform: translateY(-50%) translateX(2px);
  box-shadow: 0 5px 0 0 var(--forest-700), 0 14px 26px rgba(27,55,45,.24), inset 0 1px 0 rgba(255,255,255,.9);
}
.scc-a11y__launcher:active {
  transform: translateY(-50%) translateY(3px);
  box-shadow: 0 1px 0 0 var(--forest-700), 0 4px 10px rgba(27,55,45,.2), inset 0 1px 0 rgba(255,255,255,.9);
}
.scc-a11y__launcher:focus-visible {
  outline: 3px solid var(--clay);
  outline-offset: 3px;
}
.scc-a11y__launchicon { color: var(--clay); display: grid; place-items: center; }

/* The label is now a tooltip: aria-hidden in the markup, opens inward from the left edge, and is
   never in the layout flow, so it cannot occupy or obscure content space at rest. */
.scc-a11y__launchlabel {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  z-index: 1;
  white-space: nowrap;
  padding: .5rem .8rem;
  border-radius: 10px;
  background: var(--forest-700);
  color: #fff;
  font-size: .82rem; font-weight: 650; line-height: 1.2;
  box-shadow: 0 6px 16px rgba(27,55,45,.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.scc-a11y__launchlabel::before {
  content: "";
  position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
  border: 6px solid transparent; border-right-color: var(--forest-700);
}
.scc-a11y__launcher:hover .scc-a11y__launchlabel,
.scc-a11y__launcher:focus-visible .scc-a11y__launchlabel {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.scc-a11y.is-open .scc-a11y__launcher { display: none; }

/* Narrow viewports: the tooltip would run off-screen or collide with the opposite edge, so it is
   suppressed entirely. The button keeps its aria-label, so it stays fully described to AT. */
@media (max-width: 64rem) {
  .scc-a11y__launchlabel { display: none; }
}

@media (max-width: 48rem) {
  .scc-a11y__launcher {
    top: auto;
    /* clears the mobile action bar and the device safe area */
    bottom: calc(4.75rem + env(safe-area-inset-bottom));
    transform: none;
    width: 48px; height: 48px;
  }
  .scc-a11y__launcher:hover, .scc-a11y__launcher:active { transform: none; }
}

/* ---------- panel: slides in from the LEFT ---------- */
.scc-a11y__panel {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: min(94vw, 27rem);
  z-index: 205;
  display: flex; flex-direction: column;
  background: var(--paper);
  border-right: 1px solid var(--cream-3);
  box-shadow: var(--shadow-lg);
  /*
   * VISIBILITY DOES NOT DEPEND ON ANIMATION — deliberately.
   *
   * The panel this replaces was positioned by a transform that was supposed to animate to 0. If
   * that transition never ticks, the element is stranded off-screen: present in the DOM, classes
   * applied, controls working, and completely invisible to the user. Browsers do not tick
   * animations in a backgrounded tab, and any cascade conflict produces the same result.
   *
   * So the resting position here is the correct position, with no transform at all. `hidden` is
   * the only thing that controls visibility, and it cannot be half-applied. A panel whose whole
   * purpose is accessibility must not be able to fail this way.
   */
}
.scc-a11y__panel[hidden] { display: none; }

.scc-a11y__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
  padding: 1.1rem 1.1rem 1rem;
  background: var(--forest-800); color: #fff;
}
.scc-a11y__head h2 { margin: 0; font-size: var(--step-1); color: #fff; line-height: 1.2; }
.scc-a11y__head p { margin: .45rem 0 0; font-size: .82rem; line-height: 1.5; color: #C6D6CE; }
.scc-a11y__close {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 0; color: #fff; cursor: pointer;
  display: grid; place-items: center;
}
.scc-a11y__close:hover { background: rgba(255,255,255,.26); }

.scc-a11y__body { overflow-y: auto; padding: 1.1rem; display: grid; gap: 1.5rem; }
.scc-a11y__group h3 {
  margin: 0 0 .7rem; font-size: var(--step-0); color: var(--forest-700);
  border-bottom: 1px solid var(--cream-3); padding-bottom: .35rem;
}

/* profiles */
.scc-a11y__profiles { display: grid; gap: .5rem; }
.scc-a11y__profile {
  display: grid; gap: .15rem; text-align: left;
  padding: .7rem .85rem; min-height: 48px;
  border: 1px solid var(--cream-3); border-radius: 12px;
  background: var(--cream); color: var(--ink); cursor: pointer; font: inherit;
}
.scc-a11y__profile:hover { background: var(--forest-050); border-color: var(--forest-700); }
.scc-a11y__profile strong { font-size: .92rem; }
.scc-a11y__profile span { font-size: .78rem; color: var(--ink-soft); line-height: 1.4; }
.scc-a11y__profile--reset { background: var(--paper); border-style: dashed; }
.scc-a11y__profile[aria-pressed="true"] { border-color: var(--clay); background: var(--clay-050); }

/* controls */
.scc-a11y__control { display: grid; gap: .4rem; padding: .55rem 0; border-bottom: 1px dotted var(--cream-3); }
.scc-a11y__control:last-child { border-bottom: 0; }
.scc-a11y__control--switch { grid-template-columns: 1fr auto; align-items: center; gap: .75rem; }
.scc-a11y__ctlabel { font-size: .88rem; font-weight: 600; color: var(--ink); }
.scc-a11y__ctlabel small { display: block; font-weight: 400; font-size: .76rem; color: var(--ink-soft); line-height: 1.4; margin-top: .1rem; }

.scc-a11y__seg { display: flex; flex-wrap: wrap; gap: .35rem; }
.scc-a11y__seg button {
  flex: 1 1 auto; min-height: 44px; padding: .4rem .6rem;
  border: 1px solid var(--cream-3); border-radius: 10px;
  background: var(--cream); color: var(--ink); font: inherit; font-size: .8rem; cursor: pointer;
}
.scc-a11y__seg button:hover { background: var(--forest-050); border-color: var(--forest-700); }
.scc-a11y__seg button[aria-pressed="true"] { background: var(--forest-700); border-color: var(--forest-700); color: #fff; font-weight: 700; }

.scc-a11y__switch {
  flex: none; width: 56px; height: 32px; border-radius: 999px; position: relative;
  border: 1px solid var(--cream-3); background: var(--cream-3); cursor: pointer; padding: 0;
  transition: background .18s var(--ease);
}
.scc-a11y__switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: var(--shadow-sm); transition: transform .18s var(--ease);
}
.scc-a11y__switch[aria-checked="true"] { background: var(--forest-700); border-color: var(--forest-700); }
.scc-a11y__switch[aria-checked="true"]::after { transform: translateX(24px); }

.scc-a11y__note { margin: 0; font-size: .76rem; color: var(--ink-soft); line-height: 1.5; }

@media (max-width: 30rem) {
  /* bottom sheet, still originating from the left */
  .scc-a11y__panel { width: 100vw; top: auto; height: 88vh; border-radius: 18px 18px 0 0; border-right: 0; }

  /* The vertical stagger that used to live here is no longer needed. It existed because both
     launchers carried text labels (80px and 199px wide), so at 360px they met in the middle and
     Comfort & Accessibility had to be lifted onto its own row. Both are now 48-54px icons pinned
     to opposite edges, which leaves ~250px of clear space between them even at 320px — so they
     share one row above the mobile action bar, as intended. */
}

/* While a panel owns the screen, the OTHER launcher stands down — otherwise it sits on top of, or
   underneath, a panel it has nothing to do with. The coordinator sets data-scc-float on <html>. */
html[data-scc-float~="family-guide"] .scc-a11y__launcher,
html[data-scc-float~="a11y-panel"] .scc-fg__launcher { display: none; }

/* =============================================================================
   THE ADJUSTMENTS THEMSELVES
   Applied to <html> so every component inherits, and driven by tokens so the
   values live in one place.
   ============================================================================= */

html.scc-a11y-scaled body { font-size: calc(1rem * var(--scc-a11y-font-scale)); }
html.scc-a11y-scaled h1, html.scc-a11y-scaled h2, html.scc-a11y-scaled h3,
html.scc-a11y-scaled h4, html.scc-a11y-scaled .scc-btn { font-size: calc(1em * var(--scc-a11y-font-scale)); }

body { line-height: var(--scc-a11y-line-height); letter-spacing: var(--scc-a11y-letter); }
p, li { margin-bottom: var(--scc-a11y-para-gap); }
.prose p, .prose li { max-width: var(--scc-a11y-measure); }

/* Readable font — a plainer face with clearer letterforms. */
html.scc-a11y-readable body,
html.scc-a11y-readable h1, html.scc-a11y-readable h2,
html.scc-a11y-readable h3, html.scc-a11y-readable h4 {
  font-family: "Atkinson Hyperlegible", Verdana, "Segoe UI", Tahoma, sans-serif;
}

html.scc-a11y-links a:not(.scc-btn) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }

html.scc-a11y-contrast {
  --cream: #fff; --cream-2: #f4f3ee; --cream-3: #b9b6a9; --paper: #fff;
  --ink: #14201d; --ink-soft: #26332f; --ink-mute: #3a4642;
}
html.scc-a11y-contrast a:not(.scc-btn) { text-decoration: underline; }

html.scc-a11y-dark {
  --cream: #14201d; --cream-2: #1b2a26; --cream-3: #3b4a45; --paper: #1b2a26;
  --ink: #f2f6f4; --ink-soft: #d3ded9; --ink-mute: #a9b8b2;
  --forest-050: #24352f; --forest-100: #2c403a;
  background: #14201d;
}
html.scc-a11y-dark body { background: #14201d; color: #f2f6f4; }
html.scc-a11y-dark .scc-btn--ghost { color: #f2f6f4; border-color: #6b7b75; }

html.scc-a11y-borders .scc-card, html.scc-a11y-borders .scc-community,
html.scc-a11y-borders .post-card, html.scc-a11y-borders input,
html.scc-a11y-borders textarea, html.scc-a11y-borders select,
html.scc-a11y-borders .greview { border-width: 2px; border-color: var(--ink-mute); }

/* Reduce colour in the INTERFACE only. Photographs and award graphics are deliberately
   left alone — desaturating a resident's photograph is not an accessibility feature. */
html.scc-a11y-grayscale body { filter: grayscale(1); }
html.scc-a11y-grayscale img, html.scc-a11y-grayscale video { filter: grayscale(0); }

html.scc-a11y-targets .scc-btn,
html.scc-a11y-targets input, html.scc-a11y-targets textarea, html.scc-a11y-targets select,
html.scc-a11y-targets .scc-fg__chip, html.scc-a11y-targets .greviews__dot { min-height: 56px; }
html.scc-a11y-targets .primary-nav a, html.scc-a11y-targets .site-footer a { padding-block: .8rem; display: inline-block; }

html.scc-a11y-focus :focus-visible {
  outline: 4px solid var(--focus-ring) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 7px rgba(18,70,58,.35) !important;
  border-radius: 4px;
}

html.scc-a11y-motion *, html.scc-a11y-motion *::before, html.scc-a11y-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}
html.scc-a11y-nosmooth, html.scc-a11y-nosmooth * { scroll-behavior: auto !important; }

/* `pause` is read by JS (reviews, rail, hero) rather than expressed in CSS, because those
   components own their own timers. The class is the single signal they all check. */

@media (prefers-reduced-motion: reduce) {
  .scc-a11y__launcher, .scc-a11y__switch, .scc-a11y__switch::after { transition: none; }
  /* The tooltip still appears on hover/focus — it carries meaning — it simply does not slide in. */
  .scc-a11y__launchlabel { transition: none; transform: translateY(-50%); }
  .scc-a11y__launcher:hover .scc-a11y__launchlabel,
  .scc-a11y__launcher:focus-visible .scc-a11y__launchlabel { transform: translateY(-50%); }
}