/* ============================================================================
   QUIET — an index that behaves like printed matter.
   No cards, no shadows: hairlines, serif, and the search as the only strong
   element on the page. The manual is a printed booklet; this reads like one.
   ========================================================================== */

html[data-theme="quiet"], html[data-theme="hybrid"] {
  --paper: #FAF7F1;
  --card: transparent;
  --ink: #1A2228;
  --muted: #6B7679;
  --teal: #17565A;
  --teal-soft: #E7EDE9;
  --sand: #A9814A;
  --line: #DCD4C6;
  --mark: #EFDDB0;
  --shadow: none;
  --radius: 0;
}

html[data-theme="quiet"], html[data-theme="hybrid"] body { font-size: 16px; }

/* ---------------------------------------------------------------- masthead */
html[data-theme="quiet"], html[data-theme="hybrid"] .masthead { padding: calc(20px + env(safe-area-inset-top)) 0 14px; }
html[data-theme="quiet"], html[data-theme="hybrid"] .masthead-inner { align-items: flex-end; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
html[data-theme="quiet"], html[data-theme="hybrid"] .brand { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
html[data-theme="quiet"], html[data-theme="hybrid"] .logo { height: 30px; }
html[data-theme="quiet"], html[data-theme="hybrid"] .kicker {
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
html[data-theme="quiet"], html[data-theme="hybrid"] .install {
  background: none; color: var(--teal); padding: 6px 0; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- search */
html[data-theme="quiet"], html[data-theme="hybrid"] .sticky { padding: 10px 0 0; background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="quiet"], html[data-theme="hybrid"] .searchbar {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  border-bottom: 1.5px solid var(--ink); padding: 0 0 0 2px; height: 52px;
}
html[data-theme="quiet"], html[data-theme="hybrid"] .searchbar:focus-within { border-color: var(--teal); box-shadow: none; }
html[data-theme="quiet"], html[data-theme="hybrid"] .searchbar .ico { width: 20px; height: 20px; stroke-width: 1.6; }
html[data-theme="quiet"], html[data-theme="hybrid"] #q { font-size: 19px; }
html[data-theme="quiet"], html[data-theme="hybrid"] #q::placeholder { color: var(--muted); opacity: .85; }

/* ---------------------------------------------------------------- tabs */
html[data-theme="quiet"], html[data-theme="hybrid"] .tabs { gap: 22px; margin-top: 0; padding: 4px 0 0; border-bottom: 1px solid transparent; }
html[data-theme="quiet"], html[data-theme="hybrid"] .tab {
  border: 0; border-radius: 0; background: none; padding: 12px 0 11px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); border-bottom: 2px solid transparent;
}
html[data-theme="quiet"], html[data-theme="hybrid"] .tab.is-on { color: var(--ink); background: none; border-bottom-color: var(--teal); }
html[data-theme="quiet"], html[data-theme="hybrid"] .tab[data-tab="home"] { display: none; }

/* ---------------------------------------------------------------- heads */
html[data-theme="quiet"], html[data-theme="hybrid"] .panel-head { padding: 30px 0 14px; }
html[data-theme="quiet"], html[data-theme="hybrid"] h1 { font-size: clamp(27px, 6.4vw, 36px); font-weight: 500; letter-spacing: -.015em; margin-bottom: 10px; }
html[data-theme="quiet"], html[data-theme="hybrid"] .lede { font-size: 15px; max-width: 52ch; }

/* ---------------------------------------------------------------- A-Z */
html[data-theme="quiet"], html[data-theme="hybrid"] .az { gap: 0; padding: 2px 0 4px; border-bottom: 1px solid var(--line); }
html[data-theme="quiet"], html[data-theme="hybrid"] .az button {
  min-width: 26px; height: 34px; border-radius: 0; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; color: var(--muted); border-bottom: 2px solid transparent;
}
html[data-theme="quiet"], html[data-theme="hybrid"] .az button.is-on { background: none; color: var(--ink); border-bottom-color: var(--teal); }

/* ---------------------------------------------------------------- topics: hairline rows */
html[data-theme="quiet"], html[data-theme="hybrid"] .topics { gap: 0; }
html[data-theme="quiet"], html[data-theme="hybrid"] .topic {
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none;
}
html[data-theme="quiet"], html[data-theme="hybrid"] .topic > summary { padding: 17px 2px; }
html[data-theme="quiet"], html[data-theme="hybrid"] .topic > summary:hover { background: none; }
html[data-theme="quiet"], html[data-theme="hybrid"] .topic[open] > summary { border-bottom: 0; }
html[data-theme="quiet"], html[data-theme="hybrid"] .topic-name {
  font-size: 19px; font-weight: 500;
}
html[data-theme="quiet"], html[data-theme="hybrid"] .count {
  background: none; padding: 0; font-family: var(--serif); font-size: 14px; font-weight: 400;
  color: var(--muted);
}
html[data-theme="quiet"], html[data-theme="hybrid"] .count::before { content: "("; }
html[data-theme="quiet"], html[data-theme="hybrid"] .count::after { content: ")"; }
html[data-theme="quiet"], html[data-theme="hybrid"] .chev { width: 11px; height: 11px; stroke-width: 1.6; opacity: .55; }

html[data-theme="quiet"], html[data-theme="hybrid"] .verses { padding: 0 0 14px; }
html[data-theme="quiet"], html[data-theme="hybrid"] .verse { padding: 9px 0 9px 18px; border-left: 1px solid var(--line); margin-left: 2px; }
html[data-theme="quiet"], html[data-theme="hybrid"] .verse + .verse { border-top: 0; }
html[data-theme="quiet"], html[data-theme="hybrid"] .verse-text { font-family: var(--serif); font-size: 16.5px; line-height: 1.5; }
html[data-theme="quiet"], html[data-theme="hybrid"] .verse-ref {
  display: inline; margin: 0 0 0 6px;
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .02em;
  text-transform: none; color: var(--muted); white-space: nowrap;
}
html[data-theme="quiet"], html[data-theme="hybrid"] .copy { border: 0; width: 30px; height: 30px; opacity: 0; transition: opacity .15s; }
html[data-theme="quiet"], html[data-theme="hybrid"] .verse:hover .copy,
html[data-theme="quiet"], html[data-theme="hybrid"] .verse:focus-within .copy { opacity: .8; }
@media (hover: none) { html[data-theme="quiet"], html[data-theme="hybrid"] .copy { opacity: .45; } }

html[data-theme="quiet"], html[data-theme="hybrid"] .related { padding: 0 0 18px 18px; }
html[data-theme="quiet"], html[data-theme="hybrid"] .chip { background: none; padding: 0; border-bottom: 1px solid var(--teal); border-radius: 0; }
html[data-theme="quiet"], html[data-theme="hybrid"] .related .lbl { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* ---------------------------------------------------------------- one step */
html[data-theme="quiet"], html[data-theme="hybrid"] .steps { gap: 0; }
html[data-theme="quiet"], html[data-theme="hybrid"] .step { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 22px 0 20px; background: none; }
html[data-theme="quiet"], html[data-theme="hybrid"] .step-n { color: var(--muted); font-family: var(--sans); font-size: 11px; letter-spacing: .16em; }
html[data-theme="quiet"], html[data-theme="hybrid"] .step-tag { font-size: 11px; letter-spacing: .14em; color: var(--sand); }
html[data-theme="quiet"], html[data-theme="hybrid"] .step-q { font-size: 21px; font-weight: 500; max-width: 40ch; }
html[data-theme="quiet"], html[data-theme="hybrid"] .step-row { border-top: 0; padding: 4px 0 4px 0; gap: 14px; }
html[data-theme="quiet"], html[data-theme="hybrid"] .step-row .k { width: 46px; font-size: 10px; letter-spacing: .14em; color: var(--muted); }
html[data-theme="quiet"], html[data-theme="hybrid"] .step-row .v { font-size: 15px; }

/* ---------------------------------------------------------------- icebreakers */
html[data-theme="quiet"], html[data-theme="hybrid"] .ice { gap: 0; }
html[data-theme="quiet"], html[data-theme="hybrid"] .ice-item { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 16px 2px; background: none; }
html[data-theme="quiet"], html[data-theme="hybrid"] .ice-item .num { font-size: 12px; color: var(--muted); font-family: var(--sans); letter-spacing: .08em; }
html[data-theme="quiet"], html[data-theme="hybrid"] .ice-q { font-family: var(--serif); font-size: 18px; }
html[data-theme="quiet"], html[data-theme="hybrid"] .ice-why { font-size: 13.5px; max-width: 56ch; }

/* ---------------------------------------------------------------- fun */
html[data-theme="quiet"], html[data-theme="hybrid"] .fun { gap: 0 26px; }
html[data-theme="quiet"], html[data-theme="hybrid"] .fun li { border: 0; border-radius: 0; padding: 10px 0; border-bottom: 1px solid var(--line); width: 100%; }

/* ---------------------------------------------------------------- results */
html[data-theme="quiet"], html[data-theme="hybrid"] .results { gap: 0; }
html[data-theme="quiet"], html[data-theme="hybrid"] .res { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 2px; background: none; }
html[data-theme="quiet"], html[data-theme="hybrid"] .res .where { font-size: 10.5px; letter-spacing: .14em; color: var(--muted); }
html[data-theme="quiet"], html[data-theme="hybrid"] .res .what.serif { font-family: var(--serif); font-size: 17.5px; }
html[data-theme="quiet"], html[data-theme="hybrid"] .res .verse-ref { display: inline; margin-left: 6px; font-size: 12px; text-transform: none; letter-spacing: .02em; color: var(--muted); }
html[data-theme="quiet"], html[data-theme="hybrid"] .res-group h2 { letter-spacing: .16em; }

/* ---------------------------------------------------------------- footer */
html[data-theme="quiet"], html[data-theme="hybrid"] .foot { border-top: 0; margin-top: 10px; }
html[data-theme="quiet"], html[data-theme="hybrid"] .foot p:first-child { font-family: var(--serif); font-size: 16px; }

/* ---------------------------------------------------------------- dark */
@media (prefers-color-scheme: dark) {
  html[data-theme="quiet"], html[data-theme="hybrid"] {
    --paper: #12181B; --ink: #E9E4D9; --muted: #8E9A9C; --teal: #86C4BE;
    --teal-soft: #1B2A2C; --sand: #C79B5E; --line: #2A3437; --mark: #4A3C1C;
  }
  html[data-theme="quiet"], html[data-theme="hybrid"] .sticky { background: var(--paper); }
}