/* Sensory Space Self-Audit — Mindful:IN brand kit (Brand Guidelines v2): palette, type, WCAG AA pairings. */
:root {
  --cloud: #FFFFFD; --sand: #EEE9D6; --sky-tint: #E0EDF2; --mint-tint: #E6FBEE; --blush-tint: #FFEEF2; --lilac-tint: #FCF7FF;
  --slate: #556881; --midnight: #160A37;
  --sky: #A7DAEE; --periwinkle: #9EC5F6; --mint: #66E89D; --coral: #EE3A61; --lilac: #E3CFF5;
  --teal: #035469; --indigo: #3A55A0; --emerald: #087A50; --raspberry: #AB1B50; --plum: #4E2E73;
  --font-title: "Fraunces", Georgia, serif;
  --font-head: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-section: "Lexend", "Segoe UI", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --radius: 16px; --radius-sm: 10px;
  --wrap: 1040px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cloud); color: var(--midnight); font: 400 1rem/1.55 var(--font-body); }
img { max-width: 100%; }
a { color: var(--teal); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--midnight); }
:focus-visible { outline: 3px solid var(--midnight); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--midnight); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 50; }
.skip:focus { top: 12px; color: #fff; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
p { margin: 0 0 .9em; max-width: 70ch; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.2; }
h1 { font: 600 clamp(2rem, 5vw, 3.2rem)/1.08 var(--font-title); max-width: 20ch; text-wrap: balance; }
h2 { font: 600 clamp(1.5rem, 3vw, 2rem)/1.2 var(--font-head); }
h3 { font: 600 1.1rem/1.3 var(--font-section); }
.muted { color: var(--slate); }
.eyebrow { font: 500 .95rem/1.3 var(--font-section); letter-spacing: .02em; margin-bottom: .8rem; }

/* Header / nav */
.site-header { border-bottom: 1px solid var(--sky-tint); background: var(--cloud); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; flex-wrap: wrap; }
.brand { font: 600 1.05rem/1.2 var(--font-section); color: var(--midnight); text-decoration: none; }
.brand small { display: block; font: 400 .8rem/1.2 var(--font-body); color: var(--slate); }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a { font: 500 .95rem/1 var(--font-section); color: var(--midnight); text-decoration: none; padding: 12px 12px; border-radius: 999px; }
.nav a[aria-current="page"], .nav a:hover { background: var(--sky-tint); }
.banner { background: var(--lilac); color: var(--midnight); font: 500 .9rem/1.4 var(--font-section); text-align: center; padding: 8px 16px; }
.banner[hidden] { display: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 22px; border-radius: 999px; border: 2px solid var(--teal); font: 600 1rem/1.2 var(--font-section); text-decoration: none; cursor: pointer; transition: background-color .3s ease, color .3s ease; }
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--midnight); border-color: var(--midnight); color: #fff; }
.btn-quiet { background: var(--cloud); color: var(--teal); }
.btn-quiet:hover { background: var(--sky-tint); color: var(--teal); }
.btn-danger { background: var(--cloud); color: var(--raspberry); border-color: var(--raspberry); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mt { margin-top: 20px; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--teal); text-decoration: underline; cursor: pointer; }

/* Sections */
.hero { background: linear-gradient(135deg, var(--mint-tint), var(--sky) 65%, var(--periwinkle)); padding: clamp(36px, 7vw, 80px) 0; }
.hero .lede { font-size: clamp(1.05rem, 1.8vw, 1.25rem); max-width: 56ch; }
.section { padding: clamp(36px, 6vw, 64px) 0; }
.section.alt { background: var(--sky-tint); }
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.card { background: var(--cloud); border: 2px solid var(--sky); border-radius: var(--radius); padding: 22px; }
.card.feature { border-color: var(--teal); }
.list { padding-left: 1.2em; margin: 0 0 1em; }
.list li { margin-bottom: .4em; }
.price { font: 600 2rem/1.1 var(--font-head); margin: .2em 0; }
.price small { font: 400 1rem var(--font-body); color: var(--slate); }
.tag { display: inline-block; font: 600 .8rem/1 var(--font-section); padding: 7px 12px; border-radius: 999px; background: var(--mint-tint); border: 1.5px solid var(--emerald); }
.notice { border-radius: var(--radius-sm); padding: 14px 16px; margin: 16px 0; border: 2px solid; }
.notice.info { background: var(--sky-tint); border-color: var(--teal); }
.notice.ok { background: var(--mint-tint); border-color: var(--emerald); }
.notice.warn { background: var(--blush-tint); border-color: var(--raspberry); }
.notice:empty, .notice[hidden] { display: none; }
footer.site-footer { border-top: 1px solid var(--sky-tint); padding: 28px 0 40px; color: var(--slate); font-size: .95rem; }
footer.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* Forms */
label { font: 500 1rem/1.3 var(--font-section); display: block; margin-bottom: 6px; }
input[type="text"], input[type="email"] { width: 100%; max-width: 420px; min-height: 46px; padding: 10px 12px; border: 2px solid var(--slate); border-radius: var(--radius-sm); font: inherit; background: #fff; color: var(--midnight); }
input[aria-invalid="true"] { border-color: var(--raspberry); }
.field-error { color: var(--raspberry); font-size: .95rem; margin-top: 6px; }

/* Audit */
.progress-bar { position: sticky; top: 0; z-index: 10; background: var(--cloud); border-bottom: 1px solid var(--sky-tint); }
.progress-bar .wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.meter { flex: 1 1 160px; height: 10px; background: var(--sky-tint); border-radius: 999px; overflow: hidden; }
.meter > span { display: block; height: 100%; width: 0; background: var(--teal); border-radius: 999px; transition: width .4s ease; }
.progress-text { font: 500 .95rem/1.3 var(--font-section); }
.room { border: 2px solid var(--sky); border-radius: var(--radius); margin: 0 0 16px; background: var(--cloud); }
.room-toggle { width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; border-radius: var(--radius); }
.room-toggle:hover { background: var(--sky-tint); }
.room-toggle h2 { font: 600 1.15rem/1.3 var(--font-section); margin: 0; flex: 1; }
.room-status { font: 500 .9rem/1.2 var(--font-section); color: var(--slate); white-space: nowrap; }
.chev { transition: transform .3s ease; }
.room-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.room-body { padding: 0 18px 18px; }
.room-body[hidden] { display: none; }
.cat { font: 600 .85rem/1.3 var(--font-section); letter-spacing: .03em; color: var(--slate); margin: 18px 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--sky-tint); }
fieldset.item { border: 0; padding: 12px 0; margin: 0; border-bottom: 1px dashed var(--sky); }
fieldset.item:last-child { border-bottom: 0; }
fieldset.item legend { padding: 0; font-weight: 600; margin-bottom: 4px; }
.item-note { color: var(--slate); font-size: .95rem; margin: 0 0 8px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 2px solid var(--slate); border-radius: 999px; font: 500 .95rem/1.2 var(--font-section); cursor: pointer; background: #fff; }
.choice input:focus-visible + span { outline: 3px solid var(--midnight); outline-offset: 2px; }
.choice input:checked + span { color: #fff; }
.choice.r1 input:checked + span { background: var(--raspberry); border-color: var(--raspberry); }
.choice.r2 input:checked + span { background: var(--indigo); border-color: var(--indigo); }
.choice.r3 input:checked + span { background: var(--emerald); border-color: var(--emerald); }
.choice.r0 input:checked + span { background: var(--slate); border-color: var(--slate); }
.choice input:checked + span::before { content: "✓ "; white-space: pre; }

/* Results */
.results { margin-top: 28px; }
.results[hidden] { display: none; }
.scorecards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin: 16px 0 24px; }
.scorecard { background: var(--sky-tint); border-radius: var(--radius-sm); padding: 14px 16px; }
.scorecard .pct { font: 600 1.7rem/1 var(--font-head); font-variant-numeric: tabular-nums; }
.scorecard .lbl { font: 500 .9rem/1.3 var(--font-section); }
.barline { height: 8px; background: #fff; border-radius: 999px; margin-top: 10px; overflow: hidden; }
.barline > span { display: block; height: 100%; background: var(--teal); }
.band-low .barline > span { background: var(--raspberry); }
.band-mid .barline > span { background: var(--indigo); }
.band-high .barline > span { background: var(--emerald); }
.locked { background: var(--lilac-tint); border: 2px dashed var(--plum); border-radius: var(--radius); padding: 22px; }
.gap { border: 2px solid var(--sky); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 12px; background: #fff; }
.gap h4 { font: 600 1.02rem/1.35 var(--font-section); margin: 0 0 6px; }
.gap .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pill { font: 600 .8rem/1 var(--font-section); padding: 6px 10px; border-radius: 999px; border: 1.5px solid var(--slate); background: #fff; }
.pill.sev1 { border-color: var(--raspberry); }
.pill.quick { border-color: var(--emerald); background: var(--mint-tint); }
.gap p { margin-bottom: .4em; }
ol.ranked { padding-left: 0; list-style: none; counter-reset: gap; }
ol.ranked > li { counter-increment: gap; }
ol.ranked > li .gap h4::before { content: counter(gap) ". "; }
.spaces { list-style: none; padding: 0; margin: 0; }
.spaces li { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--sky-tint); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print {
  .site-header, .banner, .progress-bar, .no-print, footer.site-footer, #rooms { display: none !important; }
  body { background: #fff; }
  .results { margin: 0; }
  .gap { break-inside: avoid; }
}