/* =============================================================
   AskSara.care — Tier 1 facility page styles
   -------------------------------------------------------------
   Loaded only on the facility route (via the page head slot). All color,
   type, radius, and layout values resolve to the existing design tokens in
   tokens.css (the single source of truth). This file adds NO new palette; it
   only composes the brand tokens into the facility-page layout.

   GOVERNANCE G4 (guidance accent): guidance uses Sage, not warning amber.
   The Design System defines no separate "guidance" semantic; --accent resolves
   to Sage, and amber is reserved for warning states. General family guidance is
   not a warning, so the single replaceable guidance accent below points to
   Sage (--sage). It is used only for non-text accents (borders, marks, top
   rules); guidance TEXT uses the AA sage --text-accent (--sage-700), never the
   pure accent, per the accessibility rule that Sage is not normal-size text.
   TODO(G4): Sage is the current default; warning amber was rejected because
   guidance is not a warning. Final confirmation pending Megan's visual review.
   Not resolved by code alone.
   ============================================================= */

.t1 {
  /* Single, replaceable guidance accent (G4) — Sage, non-text accents only. */
  --t1-guidance-accent: var(--sage);
  --t1-measure: 760px;
  --t1-gap: 20px;
}

/* ---- shared width wrappers ---- */
.t1-wide { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.t1-col { max-width: var(--t1-measure); margin: 0 auto; padding: 0 24px; }

/* =============================================================
   HERO — compact, left-aligned identity
   ============================================================= */
.t1-hero { padding: 40px 0 28px; }
.t1-hero__inner { max-width: var(--t1-measure); margin: 0 auto; padding: 0 24px; }
.t1-breadcrumb { font-size: 14px; color: var(--text-muted); margin: 0 0 18px; }
.t1-breadcrumb a { color: var(--soft-cyan); text-decoration: none; }
.t1-breadcrumb a:hover { text-decoration: underline; }
.t1-breadcrumb span { margin: 0 8px; color: var(--border); }

.t1-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--soft-cyan);
  margin: 0 0 10px;
}
.t1-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.12;
  color: var(--deep-teal);
  margin: 0 0 14px;
  /* long facility names must wrap, never overflow */
  overflow-wrap: anywhere;
  hyphens: auto;
}
.t1-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.t1-pill {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  color: var(--deep-teal);
  background: color-mix(in srgb, var(--soft-cyan) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--soft-cyan) 28%, transparent);
}
/* Memory care (state-certified) pill: a subtle success-hued variant so the
   authoritative certification reads as a confirming signal, still in-system. */
.t1-pill--memorycare {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, transparent);
  border-color: color-mix(in srgb, var(--success) 34%, transparent);
}
/* Muted memory-care absence note (non-certified facilities). */
.t1-note--memorycare {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 14px 0 0;
  max-width: 62ch;
}
.t1-hero__address { font-size: 16px; color: var(--text-muted); margin: 0 0 18px; }

/* record-match note — narrow, honest */
/* Narrow source/status note: compact NEUTRAL surface (Megan's decision — no
   large mint field, no green verification halo). The narrow claim + date/source
   are unchanged; the small Sage check icon stays as a restrained accent. */
.t1-match {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0 0 20px;
  max-width: 460px;
}
.t1-match__icon {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--soft-cyan);
  color: var(--off-white);
  display: grid; place-items: center;
  font-size: 15px; line-height: 1;
}
.t1-match__body strong { display: block; color: var(--deep-teal); font-size: 15px; }
/* Source + check date is a provenance note: hold the 14px floor. */
.t1-match__body p { margin: 2px 0 0; font-size: 14px; color: var(--text-muted); }

/* =============================================================
   ACTIONS — ordinary direct links, wrap/stack cleanly
   ============================================================= */
.t1-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.t1-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  padding: 13px 24px;
  border-radius: 10px;
  text-decoration: none;
  min-height: 44px; /* practical tap target */
  transition: background var(--ease), transform 0.2s ease, color var(--ease);
}
.t1-btn--primary { background: var(--soft-cyan); color: var(--off-white); }
.t1-btn--primary:hover { background: var(--cyan-dark); color: var(--off-white); transform: translateY(-1px); }
.t1-btn--secondary {
  background: transparent;
  color: var(--deep-teal);
  border: 2px solid var(--soft-cyan);
}
.t1-btn--secondary:hover { background: var(--soft-cyan); color: var(--off-white); }
.t1-btn--full { width: 100%; justify-content: center; }
.t1-ext { font-size: 13px; }

/* =============================================================
   FACTS STRIP — dark at-a-glance band
   ============================================================= */
.t1-strip { background: var(--deep-teal); color: var(--off-white); padding: 22px 0; margin: 8px 0 0; }
.t1-strip__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px 28px;
}
.t1-strip__item span {
  display: block;
  font-size: 12px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--off-white) 70%, transparent);
  margin: 0 0 4px;
}
.t1-strip__item strong { font-size: 17px; font-weight: 700; }

/* =============================================================
   MAIN COLUMN + SECTIONS
   ============================================================= */
.t1-main { padding: 40px 0 8px; }
.t1-section { margin: 0 0 44px; }
.t1-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin: 0 0 8px;
}
/* Kickers are small uppercase TEXT: use the AA sage (--text-accent),
   never the pure Sage accent. */
.t1-kicker--state { color: var(--text-accent); }
.t1-kicker--guidance { color: var(--text-accent); }
.t1-section h2 {
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 1.2;
  color: var(--deep-teal);
  margin: 0 0 10px;
}
.t1-lead { color: var(--text-muted); margin: 0 0 20px; max-width: 62ch; }

/* record facts definition list */
.t1-facts { margin: 0 0 12px; }
.t1-facts__row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 6px 24px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}
.t1-facts__row:first-child { border-top: 1px solid var(--border); }
.t1-facts dt { font-weight: 700; color: var(--text-dark); }
.t1-facts dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.t1-facts dd code {
  /* A license number is a neutral identifier, not a status/guidance state. */
  font-size: 14px; color: var(--text-dark);
  background: var(--paper-200); padding: 2px 6px; border-radius: 6px;
}
.t1-source-line {
  font-size: 14px;
  color: var(--text-muted);
  margin: 12px 0 0;
}
.t1-source-line span {
  font-weight: 700;
  color: var(--text-dark);
  margin-right: 6px;
}

/* license explainer */
/* License explainer is a guidance PANEL: per Megan's rule it is NOT a mint
   field. Neutral raised surface; guidance is carried by structure + restrained
   Sage accents (the thin left rule, the "B" mark, the kicker) — not the field. */
.t1-explainer {
  display: flex;
  gap: 18px;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--t1-guidance-accent);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.t1-explainer__mark {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 10px;
  /* Darker sage so the white "B" clears AA; the pure Sage accent (used for the
     card's border/rules) is too light behind white text. */
  background: var(--sage-700);
  color: var(--off-white);
  display: grid; place-items: center;
  font-family: var(--font-heading);
  font-size: 22px; font-weight: 700;
}
.t1-explainer h2 { font-size: 22px; margin: 0 0 8px; }
.t1-explainer p { margin: 0 0 10px; }
.t1-explainer p:last-child { margin-bottom: 0; }
.t1-explainer .t1-muted { color: var(--text-muted); font-size: 15px; }
.t1-textlink {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--soft-cyan); font-weight: 600; text-decoration: none;
}
.t1-textlink:hover { color: var(--deep-teal); text-decoration: underline; }

/* clarify guidance cards */
.t1-clarify-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--t1-gap);
}
/* Guidance cards: near-white raised, distinguished by the thin Sage top rule
   (accent) — not a mint field. */
.t1-clarify-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--t1-guidance-accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}
.t1-clarify-card .t1-num {
  /* Small number text: AA sage, not the pure accent. */
  font-size: 13px; font-weight: 700; color: var(--text-accent);
}
.t1-clarify-card h3 {
  font-family: var(--font-heading);
  font-size: 17px; color: var(--deep-teal); margin: 6px 0 8px;
}
.t1-clarify-card p { margin: 0; font-size: 15px; color: var(--text); }
.t1-note { font-size: 14px; color: var(--text-muted); margin: 16px 0 0; }

/* call questions */
.t1-questions { list-style: none; counter-reset: q; margin: 0 0 22px; padding: 0; }
.t1-questions li {
  display: flex; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--border);
}
.t1-questions li:first-child { border-top: 1px solid var(--border); }
.t1-questions .t1-qn {
  flex: none; font-family: var(--font-heading);
  font-size: 15px; font-weight: 700; color: var(--soft-cyan);
  min-width: 26px;
}
.t1-questions p { margin: 0; color: var(--text-dark); }
.t1-questions__footer {
  font-size: 14px; color: var(--text-muted); font-style: italic; margin: 0 0 18px;
}
.t1-cta-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px;
  /* Generic call-to-action surface: neutral raised paper. */
  background: var(--surface-raised);
  border-radius: var(--radius);
  padding: 18px 22px;
}
.t1-cta-row strong { display: block; color: var(--deep-teal); }
.t1-cta-row p { margin: 2px 0 0; font-size: 14px; color: var(--text-muted); }

/* sources card */
/* Outer/aside section band: deeper warm-paper canvas; the source CARD inside is
   white (top of the ramp), giving real elevation without any Sage field. */
.t1-sources { background: var(--surface-canvas); border-top: 1px solid var(--border-subtle); padding: 44px 0; }
.t1-source-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  margin: 18px 0 0;
}
.t1-badge {
  display: inline-block;
  font-size: 12px; font-weight: 600; letter-spacing: .3px;
  color: var(--soft-cyan);
  background: color-mix(in srgb, var(--soft-cyan) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--soft-cyan) 25%, transparent);
  border-radius: var(--radius-pill);
  padding: 4px 12px; margin: 0 0 8px;
}
.t1-source-card > strong { display: block; color: var(--deep-teal); font-size: 17px; margin: 0 0 12px; }
.t1-source-card dl { margin: 0; }
.t1-source-card dl > div {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 20px;
  padding: 9px 0; border-top: 1px solid var(--border);
}
.t1-source-card dt { color: var(--text-muted); font-size: 15px; }
.t1-source-card dd { margin: 0; color: var(--text-dark); font-weight: 600; text-align: right; }
.t1-source-card dd code { font-weight: 400; font-size: 14px; }

/* integrity note — quiet */
.t1-integrity {
  max-width: var(--t1-measure);
  margin: 44px auto;
  padding: 0 24px;
}
.t1-integrity__inner {
  border-left: 3px solid var(--soft-cyan);
  padding: 4px 0 4px 20px;
}
.t1-integrity p { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.7; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 640px) {
  .t1-facts__row { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
  .t1-facts dt { font-size: 14px; }
  .t1-explainer { flex-direction: column; gap: 14px; }
  .t1-actions .t1-btn { width: 100%; justify-content: center; }
  .t1-source-card dl > div { grid-template-columns: 1fr; }
  .t1-source-card dd { text-align: left; }
  .t1-cta-row { flex-direction: column; align-items: stretch; }
  .t1-cta-row .t1-btn { width: 100%; justify-content: center; }
}

/* ---- Related licensed records (D-P16) ----
   Only ever rendered when a campus relationship has been human-confirmed. Kept
   visually quiet on purpose: this is a factual pointer to another state record,
   not a recommendation or a cross-sell.

   CONTAINMENT: the markup uses .t1-col, the page's shared width wrapper. This
   block sets vertical rhythm and surface only, never max-width — re-declaring a
   column here is what put the sibling website section 44px out of alignment. */
.t1-related {
  background: var(--surface-canvas);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 36px 0;
}
.t1-related h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--text-dark);
  margin: 0 0 10px;
}
.t1-related > .t1-col > p {
  color: var(--text-muted);
  font-size: 15px;
  max-width: 62ch;
  margin: 0 0 16px;
}
.t1-related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.t1-related li {
  padding: 14px 16px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 15px;
  overflow-wrap: anywhere;
}
.t1-related a { color: var(--soft-cyan); font-weight: 600; }
.t1-related a:hover, .t1-related a:focus-visible { color: var(--cyan-dark); }

/* ---- Facility website ----
   A SIBLING LANE to the state-sourced blocks, and styled to read as one.

   WEIGHT: deliberately lighter than the "Call facility" CTA. That action is
   state-sourced (the number comes from the HHSC registry) and earns the solid
   filled primary button; this is facility-provided, so it gets a contained card
   with an underlined link affordance and NO button chrome at all. It also uses
   none of the cyan action vocabulary — stone/neutral only — so the two never
   read as peers.

   CONTAINMENT: markup uses .t1-col. Nothing here declares a max-width. */
.t1-website { padding: 24px 0 8px; }
.t1-website h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--text-dark);
  margin: 0 0 10px;
}
.t1-website__card {
  background: var(--surface-card);
  border: 1px dashed var(--stone-500);
  border-left: 3px solid var(--stone-600);
  border-radius: var(--radius);
  padding: 16px 18px;
}
/* Outline button. Shares the base .t1-btn METRICS (16px/600, 13px 24px, 10px
   radius, 44px tap target) so it sits comfortably beside the page's other
   controls, but none of its COLOUR: stone/neutral only, no cyan and no sage, so
   it never reads as a peer of the filled state-sourced "Call facility" CTA.
   Deliberately NOT full-width at narrow widths either — the filled CTA goes
   full-width at <=640px, and staying auto-width keeps the hierarchy visible on
   mobile, where colour differences are easiest to miss. */
.t1-website__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  padding: 13px 24px;
  min-height: 44px;
  border: 2px solid var(--stone-500);
  border-radius: 10px;
  background: transparent;
  color: var(--stone-600);
  text-decoration: none;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.t1-website__btn:hover {
  background: var(--paper-100);
  border-color: var(--stone-600);
  color: var(--stone-600);
}
.t1-website__btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* The destination, as plain text. Long confirmed URLs (e.g. the Pegasus path)
   wrap here rather than stretching any control. */
.t1-website__domain {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.t1-website__note {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}