/* ============================================================================
   Open Care Data — "The Public Record" design system  (Direction 01)
   An independent watchdog for nursing-home & assisted-living safety.
   Committed light "document" world: ink on paper, color only from the data.
   Loaded AFTER Tailwind's CDN so the remap layer wins the cascade.
   ========================================================================== */

:root{
  /* type — resilient system stacks, deliberately NOT Inter */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,"Cascadia Code",Consolas,monospace;

  /* paper & ink — "Bright Ivory" ground with true-white raised surfaces */
  --paper:#F1EEE5;      /* page ground (ivory) */
  --inset:#EFEBE1;      /* subtle inset panels / table heads */
  --card:#FFFFFF;       /* raised surfaces — the lightest parts, true white */
  --card-2:#FFFFFF;     /* lightest surface */
  --ink:#1E2A31;        /* primary text */
  --ink-2:#46555C;      /* secondary text */
  --ink-3:#727C81;      /* muted / captions */
  --line:#E1DBCF;       /* hairline rules */
  --line-2:#ECE7DD;     /* lighter hairline */

  /* brand — teal, chosen precisely because it is NOT a safety semantic */
  --teal:#0A5157;
  --teal-ink:#063C41;

  /* data semantics — documentary, desaturated (the only source of color) */
  --green:#2E7A54;
  --amber:#946716;
  --red:#A63A30;

  --focus:#0A5157;
  --shadow:0 1px 0 rgba(27,42,49,.04), 0 18px 40px -30px rgba(27,42,49,.45);
}

/* ---------- base ---------- */
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  background:var(--paper) !important;
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:-.012em;
  color:var(--ink);
  text-wrap:balance;
}
::selection{ background:var(--teal); color:#fff; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

/* thin, chosen scrollbars reinforce the "instrument" feel without noise */
* { scrollbar-color:var(--line) transparent; }

/* ============================================================================
   TAILWIND REMAP LAYER
   The existing markup is full of indigo / gray / white+shadow utilities.
   Re-point them at the paper/ink/teal system so every page adopts Direction 01
   without rewriting element by element.  !important guards against CDN order.
   ========================================================================== */

/* surfaces */
.bg-white{ background-color:var(--card) !important; }
.bg-gray-50{ background-color:var(--inset) !important; }
.bg-gray-100{ background-color:var(--paper) !important; }

/* neutral text ramp -> ink ramp */
.text-gray-900{ color:var(--ink) !important; }
.text-gray-800{ color:var(--ink) !important; }
.text-gray-700{ color:var(--ink-2) !important; }
.text-gray-600{ color:var(--ink-2) !important; }
.text-gray-500{ color:var(--ink-3) !important; }
.text-gray-400{ color:var(--ink-3) !important; }
.text-gray-300{ color:var(--line) !important; }

/* brand (indigo -> teal) */
.text-indigo-600,.text-indigo-800{ color:var(--teal) !important; }
.hover\:text-indigo-900:hover,.hover\:text-indigo-800:hover{ color:var(--teal-ink) !important; }
.bg-indigo-600{ background-color:var(--teal) !important; }
.hover\:bg-indigo-700:hover{ background-color:var(--teal-ink) !important; }
.border-indigo-500,.focus\:border-indigo-500:focus{ border-color:var(--teal) !important; }
.focus\:ring-indigo-500:focus,.focus\:ring-indigo-500\/40:focus{ --tw-ring-color:rgba(12,92,99,.4) !important; box-shadow:0 0 0 2px rgba(12,92,99,.4) !important; }

/* stars: filled = data green, empty = muted rule */
.text-yellow-500{ color:var(--green) !important; }
.text-yellow-500 svg[fill="none"]{ color:#D6CEBD !important; }

/* semantic text */
.text-green-600,.text-green-700,.text-green-800,.text-green-400{ color:var(--green) !important; }
.text-red-600,.text-red-400{ color:var(--red) !important; }
.text-orange-600{ color:var(--amber) !important; }

/* info boxes: blue -> teal-tinted paper (no stock blue) */
.bg-blue-50{ background-color:rgba(12,92,99,.06) !important; }
.border-blue-200{ border-color:rgba(12,92,99,.28) !important; }
.text-blue-800,.text-blue-900,.text-blue-700,.text-blue-400{ color:var(--teal-ink) !important; }
.bg-green-50{ background-color:rgba(47,122,85,.09) !important; }
.border-green-200,.border-green-400{ border-color:rgba(47,122,85,.4) !important; }
.text-green-800{ color:var(--green) !important; }

/* quality-measures left rules -> data palette (kill the purple) */
.border-blue-400{ border-color:var(--teal) !important; }
.border-red-400{ border-color:var(--red) !important; }
.border-purple-400{ border-color:var(--ink-2) !important; }

/* borders & rules */
.border,.border-b,.border-t,.border-gray-100,.border-gray-200,.border-gray-300{ border-color:var(--line) !important; }
.divide-gray-200 > :not([hidden]) ~ :not([hidden]){ border-color:var(--line) !important; }
.divide-gray-100 > :not([hidden]) ~ :not([hidden]){ border-color:var(--line-2) !important; }
.ring-black\/5{ --tw-ring-color:rgba(27,42,49,.10) !important; }

/* documents don't float on drop shadows: hairline border + faint lift, tight radius */
.shadow,.shadow-md{ box-shadow:var(--shadow) !important; border:1px solid var(--line) !important; }
.shadow-xl{ box-shadow:0 30px 60px -30px rgba(27,42,49,.55) !important; border:1px solid var(--line) !important; }
.rounded-lg,.rounded-md{ border-radius:4px !important; }

/* hover on table rows */
.hover\:bg-gray-50:hover{ background-color:var(--inset) !important; }

/* monospaced facts read as record data */
.tabular-nums{ font-variant-numeric:tabular-nums; }

/* ============================================================================
   COMPONENTS  (for the rewritten hero / record headers)
   ========================================================================== */

.ocd-wrap{ max-width:72rem; margin:0 auto; }

/* masthead / wordmark */
.ocd-mast{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 0; border-bottom:1px solid var(--line); margin-bottom:8px; flex-wrap:wrap; }
.ocd-brand{ font-family:var(--serif); font-weight:600; font-size:20px; letter-spacing:-.01em;
  display:inline-flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; }
.ocd-brand .mk{ width:13px; height:13px; border-radius:50%; border:2.5px solid var(--teal); position:relative; flex:none; }
.ocd-brand .mk::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--teal); }
.ocd-mastnav{ display:flex; gap:22px; font-size:13.5px; color:var(--ink-2); }
.ocd-mastnav a{ color:var(--ink-2); text-decoration:none; }
.ocd-mastnav a:hover{ color:var(--teal); }

/* eyebrow / kicker */
.ocd-eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--teal); margin:0 0 18px; display:flex; align-items:center; gap:10px; }
.ocd-eyebrow::before{ content:""; width:26px; height:1px; background:var(--teal); display:inline-block; }

/* headline / lede */
.ocd-headline{ font-family:var(--serif); font-weight:600; line-height:1.03; letter-spacing:-.02em;
  font-size:clamp(34px,5.2vw,54px); margin:0; }
.ocd-headline em{ font-style:italic; color:var(--teal); }
.ocd-lede{ font-size:17px; line-height:1.6; color:var(--ink-2); max-width:52ch; margin:20px 0 0; }
.ocd-disclaim{ font-size:13px; color:var(--ink-3); margin-top:14px; }
.ocd-disclaim strong{ color:var(--ink-2); }

/* stat strip */
.ocd-stats{ display:flex; gap:30px; flex-wrap:wrap; margin-top:26px; }
.ocd-stat .n{ font-family:var(--serif); font-size:26px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1; }
.ocd-stat .l{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-top:6px; }

/* editorial search bar (bordered, not a pill) */
.ocd-search{ display:flex; border:1.5px solid var(--ink); border-radius:3px; background:var(--card);
  overflow:hidden; max-width:460px; }
.ocd-search input{ flex:1; border:0; background:transparent; padding:14px 16px; font-family:var(--sans);
  font-size:15px; color:var(--ink); }
.ocd-search input::placeholder{ color:#8B8574; }
.ocd-search button{ border:0; background:var(--ink); color:var(--paper); font-family:var(--mono);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:0 22px; cursor:pointer; }
.ocd-search button:hover{ background:var(--teal-ink); }

/* record header (facility page) */
.ocd-record-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); }
.ocd-monitor{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11.5px; color:var(--green); }
.ocd-monitor i{ width:7px; height:7px; border-radius:50%; background:var(--green); display:block; flex:none; }

/* hero two-column: pitch on the left, a sample record on the right */
.ocd-hero-grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:start; }
@media (min-width:900px){ .ocd-hero-grid{ grid-template-columns:1.08fr .92fr; gap:52px; } }

/* sample facility "dossier" */
.ocd-dossier{ background:var(--card); border:1px solid var(--line); border-radius:3px;
  box-shadow:0 24px 48px -32px rgba(27,42,49,.5); align-self:start; }
.ocd-dossier .dh{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:15px 20px; border-bottom:1px solid var(--line); }
.ocd-dossier .dh .t{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); }
.ocd-dossier .body{ padding:20px; }
.ocd-dossier .fname{ font-family:var(--serif); font-size:20px; font-weight:600; line-height:1.15; }
.ocd-dossier .fmeta{ font-family:var(--mono); font-size:11.5px; color:var(--ink-2); margin-top:5px; }
.ocd-dossier .stars{ display:flex; align-items:center; gap:9px; margin:16px 0 18px; flex-wrap:wrap; }
.ocd-dossier .stars .s{ color:var(--green); font-size:19px; letter-spacing:2px; }
.ocd-dossier .stars .s .o{ color:#D6CEBD; }
.ocd-dossier .stars .lab{ font-family:var(--mono); font-size:11px; color:var(--ink-2); }
.ocd-dossier .rows{ border-top:1px solid var(--line); }
.ocd-dossier .row{ display:flex; gap:12px; align-items:baseline; padding:11px 0;
  border-bottom:1px solid var(--line); font-size:13px; }
.ocd-dossier .row .d{ color:var(--ink-2); flex:1 1 auto; }
.ocd-dossier .row .dt{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-3); flex:none; }
.ocd-dossier .watch{ margin-top:16px; padding:12px 14px; font-size:13px; line-height:1.45; color:var(--ink-2);
  background:rgba(12,92,99,.07); border:1px dashed var(--teal); border-radius:3px; }
.ocd-dossier .watch b{ color:var(--teal); }

/* severity tag (F-tags, fines) */
.ocd-tag{ font-family:var(--mono); font-size:11px; padding:2px 7px; border-radius:2px; white-space:nowrap; }
.ocd-tag--crit{ background:rgba(165,56,47,.12); color:var(--red); }
.ocd-tag--warn{ background:rgba(143,100,22,.14); color:var(--amber); }
.ocd-tag--ok{ background:rgba(47,122,85,.13); color:var(--green); }

/* datum in monospace */
.ocd-datum{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* section titles inside record pages get a hairline rule */
.ocd-section-title{ font-family:var(--serif); font-size:22px; font-weight:600; }

/* footer */
.ocd-foot a{ color:var(--teal); }

/* ============================================================================
   FACILITY RECORD PAGE
   ========================================================================== */

/* section titles get a hairline rule + a source stamp (CMS · date) */
.rec-title{ font-family:var(--serif); font-size:22px; font-weight:600; margin:0 0 18px;
  padding-bottom:12px; border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.rec-title .src{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); font-weight:400; }

/* facts line under the facility name */
.rec-facts{ font-family:var(--mono); font-size:12px; color:var(--ink-3); margin:2px 0 10px; }

/* ratings ledger */
.rec-ledger{ display:grid; grid-template-columns:repeat(2,1fr); border:1px solid var(--line);
  border-radius:4px; background:var(--card); overflow:hidden; }
@media (min-width:720px){ .rec-ledger{ grid-template-columns:repeat(4,1fr); } }
.rec-ledger-item{ padding:16px 18px; border-right:1px solid var(--line); border-top:1px solid var(--line); }
.rec-ledger-item:nth-child(-n+2){ border-top:0; }
@media (min-width:720px){ .rec-ledger-item:nth-child(-n+4){ border-top:0; } }
.rec-ledger-label{ font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
.rec-ledger-stars{ color:var(--green); font-size:16px; letter-spacing:2px; margin:9px 0 3px; }
.rec-ledger-stars .o{ color:#D6CEBD; }
.rec-ledger-val{ font-family:var(--serif); font-size:21px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.1; }
.rec-ledger-na{ font-family:var(--mono); font-size:13px; color:var(--ink-3); margin-top:11px; }

/* status rows (safety indicators) */
.rec-status{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-2); font-size:13.5px; }
.rec-status:last-child{ border-bottom:0; }
.rec-status .k{ color:var(--ink-2); }
.rec-status .v{ margin-left:auto; }

/* penalties figures grid */
.rec-figures{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:4px; overflow:hidden; }
@media (min-width:560px){ .rec-figures{ grid-template-columns:repeat(4,1fr); } }
.rec-fig{ background:var(--card); padding:15px 16px; }
.rec-fig .n{ font-family:var(--serif); font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1; }
.rec-fig .n.crit{ color:var(--red); }
.rec-fig .l{ font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-top:6px; }

/* record rows (citations) — same language as the hero dossier */
.rec-row{ display:flex; gap:14px; align-items:baseline; padding:13px 0; border-bottom:1px solid var(--line-2); font-size:13.5px; }
.rec-row:last-child{ border-bottom:0; }
.rec-row .rec-tagcol{ flex:none; min-width:66px; }
.rec-row .rec-b{ flex:1 1 auto; color:var(--ink); }
.rec-row .rec-b .sub{ color:var(--ink-3); font-size:12.5px; margin-top:3px; }
.rec-row .rec-date{ margin-left:auto; flex:none; font-family:var(--mono); font-size:11.5px; color:var(--ink-3); white-space:nowrap; }

/* staffing figures */
.rec-staff{ display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:640px){ .rec-staff{ grid-template-columns:repeat(3,1fr); } }
.rec-staff-item .n{ font-family:var(--serif); font-size:32px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink); line-height:1; }
.rec-staff-item .l{ font-size:13px; color:var(--ink-2); margin-top:8px; }
.rec-staff-item .bm{ font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:6px; }

/* quality-measure rows */
.rec-qm{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:12px 0; border-bottom:1px solid var(--line-2); }
.rec-qm:last-child{ border-bottom:0; }
.rec-qm .q{ font-size:13.5px; color:var(--ink); flex:1 1 auto; }
.rec-qm .s{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:13.5px; font-weight:600; flex:none; }
.rec-qm .s.good{ color:var(--green); }
.rec-qm .s.mid{ color:var(--amber); }
.rec-qm .s.bad{ color:var(--red); }

/* a quiet documentary note block (replaces stock blue callouts) */
.rec-note{ font-size:13px; color:var(--ink-2); background:rgba(12,92,99,.06);
  border-left:2px solid var(--teal); padding:12px 15px; border-radius:0 3px 3px 0; }

/* respect reduced motion everywhere */
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* server-rendered internal-link index (SEO crawl paths on listing pages) */
.sr-index{ margin-top:30px; padding-top:22px; border-top:1px solid var(--line); }
.sr-index-title{ font-family:var(--serif); font-size:18px; font-weight:600; margin:0 0 14px; }
.sr-index-list{ list-style:none; margin:0; padding:0; columns:2; column-gap:32px; font-size:14px; }
@media (min-width:720px){ .sr-index-list{ columns:3; } }
.sr-index-list li{ break-inside:avoid; padding:4px 0; line-height:1.35; }
.sr-index-list a{ color:var(--teal); text-decoration:none; }
.sr-index-list a:hover{ text-decoration:underline; }
.sr-index-list .n{ color:var(--ink-3); font-family:var(--mono); font-size:11px; }

/* ============================================================================
   MOBILE REFINEMENTS
   ========================================================================== */
@media (max-width:640px){
  /* Home hero: keep only masthead + eyebrow + headline; drop the rest */
  .ocd-hero-grid .ocd-lede,
  .ocd-hero-grid .ocd-stats,
  .ocd-hero-grid .ocd-disclaim,
  .ocd-hero-grid .ocd-dossier { display:none; }

  /* With the hero trimmed, give the search the same breathing room the headline
     has above it (matches the masthead-to-eyebrow gap). */
  #search { margin-top: 34px; }

  /* Breadcrumb: the current-page crumb duplicates the H1 and wraps badly, so
     hide it (and its preceding chevron) on mobile. It stays in the DOM, so the
     BreadcrumbList structured data is unaffected for crawlers. */
  .ocd-breadcrumb ol { flex-wrap:nowrap; overflow:hidden; }
  .ocd-breadcrumb li:last-child { display:none; }
  .ocd-breadcrumb li:nth-last-child(2) svg { display:none; }
}