/* Tinnitus Haven — legal & support pages.
   One stylesheet, no JS, no external assets. Colours match the app's palette. */

:root {
  --bg:            #FAFAF7;
  --bg-elevated:   #FFFFFF;
  --bg-sunken:     #F2F1EC;
  --text:          #1A1A1A;
  --text-muted:    #5C5C5A;
  --primary:       #2C627A;
  --accent:        #2F6F62;
  --border:        rgba(0, 0, 0, .13);
  --border-soft:   rgba(0, 0, 0, .07);
  --note-bg:       #F0F5F6;
  --warn-bg:       #FBF3E6;
  --warn-border:   #B5843A;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #0F1419;
    --bg-elevated: #171E25;
    --bg-sunken:   #1C242C;
    --text:        #F2F3F4;
    --text-muted:  #A9AFB5;
    --primary:     #85BBD2;
    --accent:      #7BC2B5;
    --border:      rgba(255, 255, 255, .17);
    --border-soft: rgba(255, 255, 255, .09);
    --note-bg:     #16232A;
    --warn-bg:     #2A2317;
    --warn-border: #C9A464;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

.wrap {
  width: 100%;
  max-width: 46rem;             /* ~68 characters per line */
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* ---------- skip link ---------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bg-elevated);
  color: var(--text);
  padding: .7rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 0 0 .5rem 0;
  z-index: 10;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */
.site-header {
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-elevated);
}
.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-block: .9rem;
}
.brand {
  font-weight: 650;
  font-size: 1rem;
  letter-spacing: -.01em;
  color: var(--text);
  text-decoration: none;
}
.brand:hover { text-decoration: underline; }

.langs { display: flex; gap: .3rem; }
.langs a {
  display: inline-block;
  padding: .3rem .6rem;
  border: 1px solid var(--border);
  border-radius: .45rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--text-muted);
  text-decoration: none;
}
.langs a:hover { color: var(--text); }
.langs a[aria-current] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--bg-elevated);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  padding-bottom: .85rem;
  font-size: .9375rem;
}
.tabs a { color: var(--text-muted); text-decoration: none; }
.tabs a:hover { color: var(--text); text-decoration: underline; }
.tabs a[aria-current] { color: var(--text); font-weight: 600; }

/* ---------- typography ---------- */
main { padding-block: 2.5rem 3.5rem; }

h1 {
  font-size: clamp(1.75rem, 5vw, 2.3rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 .5rem;
}
h2 {
  font-size: clamp(1.2rem, 3.4vw, 1.4rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 2.4rem 0 .7rem;
  padding-top: .3rem;
}
h3 {
  font-size: 1.0625rem;
  margin: 1.6rem 0 .4rem;
}
p, ul, ol, table, dl { margin: 0 0 1rem; }
ul, ol { padding-left: 1.35rem; }
li { margin-bottom: .35rem; }
a { color: var(--primary); }
a:hover { text-decoration: none; }
strong { font-weight: 650; }
abbr { text-decoration: none; border-bottom: 1px dotted var(--border); }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 3px;
}

.meta {
  color: var(--text-muted);
  font-size: .875rem;
  margin-bottom: 2rem;
}
.lead {
  font-size: 1.125rem;
  color: var(--text-muted);
  margin-bottom: 1.75rem;
}

/* ---------- blocks ---------- */
.summary, .note, .warn {
  border: 1px solid var(--border-soft);
  border-radius: .7rem;
  padding: 1.1rem 1.25rem;
  margin: 0 0 2rem;
}
.summary { background: var(--bg-sunken); }
.note    { background: var(--note-bg); }
.warn    { background: var(--warn-bg); border-left: 4px solid var(--warn-border); }
.summary h2, .note h2, .warn h2 { margin-top: 0; font-size: 1.0625rem; }
.summary > :last-child, .note > :last-child, .warn > :last-child { margin-bottom: 0; }

.toc { background: var(--bg-sunken); border-radius: .7rem; padding: 1.1rem 1.25rem 1.1rem 2.4rem; }
.toc + h2 { margin-top: 2rem; }

.placeholder {
  background: var(--warn-bg);
  border-bottom: 1px solid var(--warn-border);
  padding: 0 .15em;
  font-weight: 600;
}

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; margin-bottom: 1.25rem; }
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: .9375rem;
}
th, td {
  border: 1px solid var(--border-soft);
  padding: .6rem .7rem;
  text-align: left;
  vertical-align: top;
}
th { background: var(--bg-sunken); font-weight: 650; }

/* ---------- home cards ---------- */
.cards { display: grid; gap: 1rem; grid-template-columns: 1fr; padding: 0; list-style: none; margin: 2rem 0; }
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(3, 1fr); } }
.cards li { margin: 0; }
.cards a {
  display: block;
  height: 100%;
  padding: 1.1rem 1.2rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: .7rem;
  text-decoration: none;
  color: var(--text);
}
.cards a:hover { border-color: var(--primary); }
.cards strong { display: block; margin-bottom: .3rem; color: var(--primary); }
.cards span { font-size: .9375rem; color: var(--text-muted); }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  padding-block: 1.6rem 2.4rem;
  font-size: .9375rem;
  color: var(--text-muted);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-bottom: .8rem; }
.site-footer p { margin-bottom: .4rem; }

/* ---------- print ---------- */
@media print {
  .site-header, .site-footer, .skip { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .wrap { max-width: none; }
  a { color: #000; }
}