:root {
  --green: #035320;
  --green-dark: #022f15;
  --yellow: #ffd00e;
  --ink: #102017;
  --muted: #627268;
  --bg: #f5f7f3;
  --surface: #ffffff;
  --soft: #eef3ed;
  --line: #dce5dd;
  --shadow: 0 10px 28px rgba(10, 49, 26, .09);
  --motion-enter: 260ms;
  --motion-press: 180ms;
  --motion-ease: cubic-bezier(.2,.8,.2,1);
  --scrim: rgba(2,29,15,.42);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
}

:root[data-theme="dark"] {
  --green: #61d996;
  --green-dark: #f5faf6;
  --yellow: #ffda3d;
  --ink: #f2f5f2;
  --muted: #aab5ad;
  --bg: #111512;
  --surface: #1b211d;
  --soft: #272f29;
  --line: #39433b;
  --shadow: 0 12px 30px rgba(0, 0, 0, .24);
  --scrim: rgba(0,8,4,.62);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scrollbar-width:none; overscroll-behavior-y:none; }
html::-webkit-scrollbar { display: none; }
body { margin:0; min-width:0; background:var(--bg); }
html.dialog-open { overflow:hidden; overscroll-behavior:none; }
body.dialog-open { overflow:hidden; position:fixed; width:100%; overscroll-behavior:none; }
button, input, select { font: inherit; }
button { cursor:pointer; }
button, a, summary, input, select { touch-action:manipulation; }
[hidden] { display:none!important; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.app-shell { width: min(100%, 860px); min-height:100svh; min-height:100dvh; margin:0 auto; padding: max(1rem, var(--safe-top)) max(1rem, var(--safe-right)) max(1rem, var(--safe-bottom)) max(1rem, var(--safe-left)); }
.app-shell > :last-child { margin-bottom:0; }
.results-area > :last-child, .nature-results > :last-child, .question-list > .empty-state { margin-bottom:0; }

.page-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: 1rem; }
.back-button, .mode-button { border: 0; color: var(--green); background: transparent; }
.back-button, .mode-button { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border-radius: .8rem; background: var(--surface); box-shadow: 0 2px 10px rgba(0, 0, 0, .05); }
.mode-button { color: var(--green); }

.hero { padding: .6rem 0 1.5rem; }
.home-hero { display: flex; align-items: center; justify-content: space-between; padding: .35rem 0 1.4rem; }
.eyebrow { margin: 0 0 .45rem; color: var(--green); font-size: .68rem; font-weight: 900; letter-spacing: .13em; }
h1 { margin: 0; color: var(--green-dark); font-size: clamp(1.75rem, 7vw, 2.6rem); letter-spacing: -.055em; line-height: 1; }
.hero > p:last-child, .page-heading > p:last-child { margin: .65rem 0 0; color: var(--muted); line-height: 1.4; }
.home-hero p { margin: .48rem 0 0; color: var(--muted); font-size: .88rem; }
.source-link { color: var(--green); font-weight: 800; text-decoration: underline; text-underline-offset: .16em; }

.section-grid, .option-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; }
.section-card { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; gap: .85rem; width: 100%; border: 1px solid var(--line); border-radius: 1rem; padding: .82rem; background: var(--surface); color: var(--ink); text-align: left; box-shadow: var(--shadow); transition: transform .16s ease, border-color .16s ease; }
.section-card:active { transform: scale(.985); }
.section-icon { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border-radius: .8rem; background: var(--green); color: var(--bg); font-size: 1.05rem; }
.section-card.muted .section-icon { background: var(--soft); color: var(--green); }
.section-card.favorites-home .section-icon { background: var(--yellow); color: #5e4800; }
.section-card strong, .section-card small { display: block; }
.section-card strong { font-size: .98rem; }
.section-card small { margin-top: .16rem; color: var(--muted); font-size: .75rem; line-height: 1.25; }
.chevron { color: var(--muted); font-size: .75rem; }

.page-heading { margin: .3rem 0 1.1rem; }
.traffic-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin: 0 0 1rem; }
.norm-menu-card { display: grid; grid-template-columns: 1.8rem 1fr; align-items: center; gap: .5rem; min-height: 4rem; border: 1px solid var(--line); border-radius: .8rem; padding: .55rem; background: var(--surface); color: var(--ink); text-align: left; }
.norm-menu-card > i { color: var(--green); text-align: center; }
.norm-menu-card strong, .norm-menu-card small { display: block; }
.norm-menu-card strong { font-size: .76rem; line-height: 1.2; }
.norm-menu-card small { margin-top: .15rem; color: var(--muted); font-size: .7rem; line-height: 1.2; }
.norm-menu-card.selected { border-color: var(--green); background: color-mix(in srgb, var(--green) 8%, var(--surface)); box-shadow: inset 0 0 0 1px var(--green); }
.norm-menu-card.general { grid-column: 1 / -1; }

.controls { margin: 1rem 0; padding: .75rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); box-shadow: var(--shadow); }
.search-input { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; border-bottom: 1px solid var(--line); padding: .18rem .1rem .55rem; color: var(--green); }
.search-input input { width: 100%; min-height: 2rem; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .94rem; }
.search-input input:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: .2rem; }
.filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; padding-top: .7rem; }
.filter-grid label { display: grid; gap: .25rem; color: var(--muted); font-size: .7rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.filter-grid label:first-child { grid-column: 1 / -1; }
select { width: 100%; min-height: 2.75rem; border: 1px solid var(--line); border-radius: .55rem; padding: .5rem; background: var(--soft); color: var(--ink); font-size: .875rem; letter-spacing: normal; text-transform: none; }
.favorites-note { margin: .8rem 0 0; color: var(--green); font-size: .78rem; }
.favorites-note i { color: #d5a400; }

.results-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 1.2rem 0 .65rem; color: var(--muted); font-size: .78rem; }
.results-heading p { margin: 0; }
.clear-button { min-height: 2.75rem; border: 0; padding-inline: .3rem; background: transparent; color: var(--green); font-size: .76rem; font-weight: 800; }
.record-group + .record-group { margin-top: 1.3rem; }
.group-title { display: flex; align-items: center; gap: .45rem; margin: 0 0 .55rem; color: var(--green-dark); font-size: .92rem; }
.group-title i { color: var(--green); }
.records { display: grid; gap: .65rem; }
.record-card { position: relative; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.record-card:focus-within { outline: 3px solid var(--green); outline-offset: 2px; }
.record-open { display: block; width: 100%; border: 0; padding: .85rem 3.25rem .82rem .85rem; background: transparent; color: var(--ink); text-align: left; }
.record-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; min-height: 1.65rem; }
.severity, .norm-pill, .record-code, .matter-pill { display: inline-flex; align-items: center; gap: .25rem; border-radius: 99px; padding: .28rem .48rem; font-size: .7rem; font-weight: 900; line-height: 1.15; }
.severity { background: #e9f4ea; color: #176538; }
.severity.severe { background: #fff0df; color: #ae5614; }
.severity.very-severe { background: #fde8ea; color: #b42f3e; }
.severity.neutral { background: var(--soft); color: var(--muted); }
:root[data-theme="dark"] .severity { background: #173d25; color: #8cebae; }
:root[data-theme="dark"] .severity.severe { background: #4a2d15; color: #ffbf7d; }
:root[data-theme="dark"] .severity.very-severe { background: #4b2027; color: #ff9ca6; }
.norm-pill { background: var(--soft); color: var(--green); }
.norm-pill.compact { min-width: 1.72rem; justify-content: center; }
.record-code { padding-inline: 0; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; }
.record-open h3 { margin: .7rem 0 .82rem; font-size: .97rem; line-height: 1.38; text-align: left; text-transform: uppercase; }
.record-open footer { display: flex; }
.matter-pill { max-width: 100%; overflow: hidden; background: var(--soft); color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.favorite-card { position:absolute; top:.65rem; right:.6rem; display:grid; width:2.75rem; height:2.75rem; place-items:center; border:0; border-radius:.7rem; background:transparent; color:var(--green); font-size:.94rem; }
.favorite-card::before { content:''; position:absolute; inset:6px; border:1px solid var(--line); border-radius:.55rem; background:var(--surface); }
.favorite-card > i { position:relative; }
.favorite-card.saved::before, .detail-favorite.saved::before { border-color:#d9ad00; background:#fff9d8; }
.favorite-card.saved, .detail-favorite.saved { color:#816100; }
:root[data-theme="dark"] .favorite-card.saved::before, :root[data-theme="dark"] .detail-favorite.saved::before { background:#4d4214; }
:root[data-theme="dark"] .favorite-card.saved, :root[data-theme="dark"] .detail-favorite.saved { color:#ffdc4e; }
.favorite-sparks { position:absolute; pointer-events:none; width:2.5rem; height:2.5rem; top:calc(50% - 1.25rem); left:calc(50% - 1.25rem); background:radial-gradient(circle at 50% 8%,var(--yellow) 0 2px,transparent 2.5px),radial-gradient(circle at 92% 43%,var(--yellow) 0 2px,transparent 2.5px),radial-gradient(circle at 20% 90%,var(--yellow) 0 1.5px,transparent 2px),radial-gradient(circle at 8% 30%,var(--yellow) 0 1.5px,transparent 2px); }
.copy-button { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 0; border-radius: .55rem; background: transparent; color: var(--green); font-size: .78rem; }

.favorite-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin: 0 0 1rem; }
.empty-state, .pending, .fatal-error { display: grid; justify-items: center; gap: .5rem; margin: 1.5rem 0; border: 1px dashed var(--line); border-radius: 1rem; padding: 2.4rem 1rem; color: var(--muted); text-align: center; }
.empty-state i, .pending > i, .fatal-error > i { color: var(--green); font-size: 1.5rem; }
.empty-state strong, .pending strong, .fatal-error strong { color: var(--ink); }
.pending p { max-width: 26rem; margin: 0; line-height: 1.45; }

/* A fixed overlay covers the whole viewport, including iOS safe areas.
   Only the article scrolls. The sheet and its close action stay inside the safe area.
   Avoid 90vh / the native dialog's absolute positioning in installed iOS apps. */
.detail-dialog { position:fixed; inset:var(--dialog-offset, 0px) 0 auto; width:100%; height:100vh; height:var(--dialog-height, 100dvh); max-width:none; max-height:none; margin:0; border:0; padding:calc(.75rem + var(--safe-top)) calc(.75rem + var(--safe-right)) max(.75rem, var(--safe-bottom)) calc(.75rem + var(--safe-left)); overflow:hidden; background:rgba(1,23,12,.68); color:var(--ink); }
.detail-dialog[open] { display:flex; align-items:center; justify-content:center; }
/* A single painted overlay. No independently animated native backdrop or closing ghost. */
.detail-dialog::backdrop { background:transparent; }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 .detail-dialog { background:var(--scrim); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }
}
.detail-panel { display:flex; flex-direction:column; width:min(100%,650px); max-height:100%; min-height:0; overflow:hidden; border-radius:1.1rem; background:var(--surface); box-shadow:0 20px 60px rgba(0,0,0,.32); }
.detail-dialog[open] .detail-panel { animation:panel-enter var(--motion-enter) var(--motion-ease); }
@keyframes panel-enter { from { transform:translateY(4px) scale(.96); opacity:.82; } to { transform:translateY(0) scale(1); opacity:1; } }
.detail-dialog article { flex:1 1 auto; min-height:0; padding:1rem; overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:thin; }
.detail-dialog form { flex:none; margin:0; border-top:1px solid var(--line); padding:.75rem 1rem 1rem; }
.close-button { width: 100%; min-height: 2.75rem; border: 0; border-radius: .7rem; padding: .75rem; background: var(--green); color: var(--bg); font-weight: 900; }
.detail-top { display:flex; justify-content:space-between; align-items:flex-start; gap:.6rem; margin-bottom:.85rem; }
.detail-badges { display:flex; flex-direction:column; align-items:flex-start; gap:.4rem; min-width:0; }
.detail-badges .severity { max-width:100%; line-height:1.2; }
.detail-favorite { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.35rem; flex:none; min-height:2.75rem; min-width:5.4rem; margin-left:auto; border:0; border-radius:.65rem; padding:.5rem .65rem; background:transparent; color:var(--green); font-weight:750; font-size:.72rem; }
.detail-favorite::before { content:''; position:absolute; inset:6px 0; border:1px solid var(--line); border-radius:.6rem; background:var(--surface); }
.detail-favorite > i, .detail-favorite > span:not(.favorite-sparks) { position:relative; }
.detail-favorite i { font-size:.82rem; }
.detail-favorite .favorite-sparks { left:calc(.65rem - .84rem); }
.detail-code-row, .detail-fields { display: grid; gap: .55rem; margin: .55rem 0; }
.detail-code-row { grid-template-columns: 1fr 1.35fr; }
.detail-fields.columns-1 { grid-template-columns: 1fr; }
.detail-fields.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-fields.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.detail-fields.financial { grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr); }
.detail-fields.financial.money-only { grid-template-columns: 1fr; }
.detail-field { min-width: 0; border-radius: .75rem; padding: .7rem; background: var(--soft); }
.detail-field.full { grid-column: 1 / -1; }
.detail-field dt { color: var(--muted); font-size: .7rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.detail-field dd { overflow-wrap: anywhere; margin: .3rem 0 0; color: var(--ink); font-size: .86rem; font-weight: 850; }
.detail-law-norm dd { overflow: visible; white-space: normal; overflow-wrap: break-word; font-size: .86rem; line-height: 1.45; }
.module-note { font-size: .84rem; line-height: 1.5; color: var(--muted); padding: .8rem; border: 1px solid var(--line); border-radius: .8rem; }
.detail-sources { display: grid; gap: .65rem; padding: 1rem .2rem; font-size: .8rem; }
.detail-sources a { color: var(--green); overflow-wrap: anywhere; }
.text-field { margin-top: .65rem; border: 1px solid var(--line); border-radius: .8rem; padding: .8rem; background: var(--surface); }
.text-field { position: relative; }
.text-field h3 { margin: 0 0 .45rem; color: var(--green); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.text-field p { margin: 0; line-height: 1.5; text-align: left; white-space: pre-wrap; }
.detail-copy { position: absolute; top: .48rem; right: .48rem; }

.consultation-topics { display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0; }
.topic-pill { display:inline-flex; align-items:center; gap:.4rem; min-height:2.75rem; padding:.55rem .7rem; border:1px solid var(--line); border-radius:.7rem; color:var(--muted); background:var(--surface); font-size:.78rem; font-weight:700; }
.topic-pill.selected { color:var(--green); border-color:var(--green); background:var(--soft); }
.question-categories { display:flex; gap:.5rem; flex-wrap:wrap; padding-top:.7rem; }
.question-categories button { min-height:2.75rem; padding:.42rem .65rem; border:1px solid var(--line); border-radius:99px; background:var(--surface); color:var(--muted); font-size:.75rem; }
.question-categories button[aria-pressed="true"] { background:var(--green); color:var(--bg); border-color:var(--green); font-weight:750; }
.consultation-count, .consultation-verified { font-size:.75rem; color:var(--muted); margin:1rem 0 .6rem; }
.consultation-verified { margin:1.3rem 0 .4rem; }
.consultation-verified i { color:var(--green); margin-right:.3rem; }
.question-list { display:grid; gap:.7rem; }
.question-card { display:grid; grid-template-columns:2.4rem minmax(0,1fr) .7rem; align-items:start; gap:.7rem; padding:.9rem .8rem; width:100%; text-align:left; border:1px solid var(--line); border-radius:1rem; background:var(--surface); color:var(--ink); box-shadow:var(--shadow); }
.question-card:active { border-color:var(--green); }
.question-icon { display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:.7rem; background:var(--soft); color:var(--green); font-size:1rem; flex:none; }
.question-category { display:block; color:var(--green); font-size:.61rem; letter-spacing:.055em; text-transform:uppercase; font-weight:800; margin-bottom:.35rem; }
.question-body strong { display:block; line-height:1.35; font-size:.94rem; letter-spacing:-.015em; }
.question-summary { display:block; margin-top:.4rem; font-size:.77rem; line-height:1.45; color:var(--muted); }
.question-chevron { font-size:.65rem; color:var(--muted); margin-top:1rem; }
.question-date { display:inline-block; margin-top:.55rem; padding:.3rem .45rem; border-radius:.4rem; background:var(--soft); color:var(--green); font-size:.64rem; font-weight:700; }
.question-detail-heading { display:flex; gap:.7rem; align-items:flex-start; padding:.15rem 0 .65rem; }
.question-detail-heading h2 { font-size:1.16rem; line-height:1.3; letter-spacing:-.025em; margin:0; }
.question-answer p { font-size:.94rem; line-height:1.6; }
.question-notice { display:flex; align-items:flex-start; gap:.55rem; margin:.7rem 0; padding:.75rem; border-radius:.7rem; background:var(--soft); color:var(--green); font-size:.8rem; line-height:1.5; }
.question-notice p { margin:0; }
.question-notice i { margin-top:.2rem; }
.question-offenses h3, .question-source-section h3 { margin:1.2rem 0 .6rem; color:var(--muted); font-size:.66rem; text-transform:uppercase; letter-spacing:.065em; }
.question-offenses button { display:flex; align-items:center; justify-content:space-between; gap:.6rem; width:100%; padding:.7rem; margin:.4rem 0; border:1px solid var(--line); border-radius:.65rem; background:var(--soft); text-align:left; color:var(--green); }
.question-offenses strong { display:block; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.82rem; }
.question-offenses small { display:block; margin-top:.3rem; font-size:.73rem; color:var(--muted); line-height:1.4; }
.question-source-section .detail-sources { padding:.1rem 0 .5rem; }
.consultation-return { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .65rem; margin-bottom:.8rem; border:1px solid var(--line); border-radius:.6rem; background:var(--soft); color:var(--green); font-size:.78rem; font-weight:700; }

@media (min-width: 620px) {
  .app-shell { padding-inline: max(1.5rem, var(--safe-left)) max(1.5rem, var(--safe-right)); }
  .section-grid, .option-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-grid > .favorites-home { grid-column: 1 / -1; }
  .traffic-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .norm-menu-card.general { grid-column: span 3; }
  .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filter-grid label:first-child { grid-column: auto; }
}

/* Coherent navigation, consultation cards and information pages. */
.home-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:.5rem; }
.home-hero > p { grid-column:1/-1; }
.home-title { display:flex; align-items:baseline; flex-wrap:wrap; gap:.25rem .65rem; }
.home-title h1 { font-size:clamp(2.2rem,9vw,3rem); }
.home-hero > .mode-button { align-self:start; }
.home-version { position:relative; border:0; padding:.25rem 0; background:transparent; color:var(--muted); font-size:.65rem; font-weight:600; white-space:nowrap; }
.home-version::before { content:''; position:absolute; inset:-.5rem -.2rem; }
.home-version:hover { color:var(--green); text-decoration:underline; text-underline-offset:.2em; }
.home-footer { display:flex; flex-direction:column; align-items:center; gap:.1rem; margin:1rem 0 0; }
.home-footer button { min-height:2.75rem; background:transparent; border:0; color:var(--muted); padding:.6rem; font-size:.8rem; }
.home-footer i { margin-right:.3rem; }
.severity { font-size:.76rem; padding:.38rem .55rem; }
.ppp-badge { background:#fde8ea; color:#b42f3e; }
:root[data-theme="dark"] .ppp-badge { background:#4b2027; color:#ff9ca6; }
.copy-button:hover { background:var(--soft); }
.copy-button.copied { background:var(--green); color:var(--bg); }
.text-field h3 { padding-right:3rem; min-height:1.1rem; }
.detail-copy { top:.35rem; right:.35rem; }
#detail-content:focus { outline:none; }
.copy-status { display:block; font-size:.7rem; margin-top:.4rem; color:var(--green); }
.favorite-menu { gap:.5rem; }
.favorite-menu .general { grid-column:1/-1; min-height:2.8rem; grid-template-columns:auto 1fr; padding:.65rem .8rem; }
.favorite-menu .general strong { font-size:.82rem; }
.favorite-menu .favorite-tile { display:flex; flex-direction:column; justify-content:center; text-align:center; gap:.4rem; min-height:5.5rem; padding:.6rem; }
.favorite-menu .favorite-tile > i { font-size:1.2rem; }
.favorite-menu .favorite-tile strong { font-size:.78rem; line-height:1.3; overflow-wrap:break-word; }
.consultation-topics { flex-wrap:nowrap; overflow-x:auto; padding:.15rem .15rem .6rem; scrollbar-width:thin; overscroll-behavior-x:contain; }
.topic-pill { flex:none; white-space:nowrap; }
.transport-topics { margin-top:-.4rem; }
.question-card { display:block; padding:1rem; }
.question-category,.question-topic { display:inline-flex; width:fit-content; margin:0; padding:.4rem .6rem; font-size:.74rem; line-height:1.15; text-transform:none; letter-spacing:0; }
.question-category i { margin-right:.2rem; }
.question-tags { display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; margin-bottom:.7rem; }
.question-topic { border:1px solid var(--line); background:transparent; color:var(--muted); font-weight:700; }
.consultation-menu .section-card { padding:1rem .85rem; }
.consultation-menu .section-card strong { font-size:1.1rem; }
.question-body strong { font-size:1rem; }
.question-summary { font-size:.85rem; }
.question-detail-heading { padding-bottom:.8rem; }
.question-detail-heading h2 { margin-top:.3rem; }
.info-card,.release-card { border:1px solid var(--line); border-radius:1rem; padding:1rem; background:var(--surface); margin:.7rem 0; }
.info-card h2,.release-card h2 { font-size:1rem; margin:0 0 .5rem; color:var(--green-dark); }
.info-card p,.release-card li,.about-intro p { line-height:1.55; font-size:.88rem; margin:.3rem 0; color:var(--muted); }
.info-card a,.about-intro a { color:var(--green); }
.release-heading { display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-bottom:1rem; }
.release-heading time { color:var(--muted); font-size:.75rem; }
.release-version { color:var(--green); font-size:.8rem; font-weight:800; }
.release-group { margin-top:1rem; }
.release-group h3 { display:flex; align-items:center; gap:.45rem; margin:0; font-size:.8rem; color:var(--green); }
.release-card ul { margin:.5rem 0 0; padding-left:1.2rem; }
.release-card li + li { margin-top:.45rem; }
.version-notice { display:flex; align-items:flex-start; gap:.7rem; margin:0 0 1rem; border-left:3px solid var(--green); border-radius:.35rem .8rem .8rem .35rem; padding:1rem; background:var(--soft); }
.version-notice > i { color:var(--green); margin-top:.15rem; }
.version-notice h2 { margin:0 0 .4rem; font-size:.9rem; color:var(--green-dark); }
.version-notice p { margin:.3rem 0 0; color:var(--muted); font-size:.82rem; line-height:1.5; }
.about-intro { margin:1.5rem 0 1.75rem; text-align:center; }
.about-intro > strong { display:block; color:var(--green-dark); font-size:2.6rem; letter-spacing:-.055em; line-height:1.1; }
.app-version { display:block; margin:.35rem 0 .85rem; color:var(--muted); font-size:.78rem; }
.about-intro a { display:inline-block; margin-top:.5rem; font-size:.85rem; }
.credits-link { margin:1rem 0; color:var(--muted); font-size:.75rem; }
.credits-link a { color:inherit; }
.procedure-intro { color:var(--muted); font-size:.85rem; line-height:1.5; margin:0 0 1rem; }
.procedure-heading h2 { color:var(--green-dark); font-size:1.35rem; letter-spacing:-.025em; margin:0; line-height:1.2; }
.procedure-list { display:grid; gap:.65rem; }
.procedure-card { min-width:0; border:1px solid var(--line); border-radius:.9rem; background:var(--surface); overflow:hidden; }
.procedure-card summary { display:grid; grid-template-columns:1.5rem minmax(0,1fr) .8rem; align-items:center; gap:.7rem; padding:1rem .85rem; cursor:pointer; list-style:none; }
.procedure-card summary::-webkit-details-marker { display:none; }
.procedure-card summary:focus-visible { outline:3px solid var(--yellow); outline-offset:-3px; }
.procedure-card summary > i { color:var(--green); text-align:center; }
.procedure-card summary strong { display:block; font-size:.91rem; line-height:1.35; }
.procedure-card summary small { display:block; color:var(--muted); font-size:.75rem; line-height:1.4; margin-top:.2rem; }
.procedure-card .procedure-chevron { font-size:.7rem; }
.procedure-card[open] .procedure-chevron { transform:rotate(180deg); }
.procedure-body { position:relative; border-top:1px solid var(--line); padding:1rem; }
.procedure-body p { margin:0 0 1rem; font-size:.88rem; line-height:1.55; }
.procedure-body p:first-of-type > strong { padding-right:3rem; }
.procedure-body p > strong { display:block; color:var(--green-dark); margin-bottom:.25rem; }
.procedure-copy { position:absolute; top:.4rem; right:.4rem; }
.procedure-sources { display:grid; gap:.65rem; border-top:1px solid var(--line); padding-top:.85rem; }
.procedure-sources a { color:var(--green); font-size:.76rem; line-height:1.4; overflow-wrap:anywhere; }
.procedure-sources i { margin-left:.2rem; font-size:.65rem; }
.procedure-link { display:grid; grid-template-columns:1.3rem minmax(0,1fr) .7rem; align-items:center; gap:.6rem; width:100%; margin:1rem 0 .3rem; padding:.85rem; border:1px solid var(--line); border-radius:.8rem; background:var(--soft); color:var(--green); text-align:left; }
.procedure-link strong { display:block; font-size:.82rem; line-height:1.35; }
.procedure-link small { display:block; margin-top:.2rem; font-size:.73rem; color:var(--muted); line-height:1.35; }
.procedure-link > i:last-child { font-size:.65rem; }
@media(hover:hover){
  :is(.section-card,.norm-menu-card,.record-card,.question-card,.procedure-card,.topic-pill,.question-categories button,.procedure-link):hover { border-color:color-mix(in srgb,var(--green) 45%,var(--line)); }
  :is(.back-button,.mode-button,.home-footer button,.clear-button):hover { background:var(--soft); color:var(--green); }
  :is(.favorite-card:not(.saved),.detail-favorite:not(.saved)):hover::before { border-color:var(--green); background:var(--soft); }
}
:is(.norm-menu-card,.topic-pill,.question-categories button,.record-open,.question-card,.procedure-link):active { background:var(--soft); }
@media(min-width:620px){ .favorite-menu { grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* Shared, interruptible feedback. Layout and results never wait for these effects. */
.theme-changing, .theme-changing body, .theme-changing :is(.section-card,.section-icon,.norm-menu-card,.record-card,.controls,.detail-panel,.info-card,.release-card,.topic-pill,.question-card,.mode-button,.back-button,.detail-field) { transition:background-color 240ms ease,color 240ms ease,border-color 240ms ease,box-shadow 240ms ease; }
:is(.norm-menu-card,.topic-pill,.question-categories button,.mode-button,.back-button,.close-button,.home-footer button), .favorite-card::before, .detail-favorite::before { transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease; }
:is(.mode-button,.back-button,.close-button,.home-footer button):active { transform:scale(.96); }
.install-heading-icon { display:grid; place-items:center; width:3rem; height:3rem; border-radius:.85rem; background:var(--soft); color:var(--green); font-size:1.35rem; margin-bottom:.8rem; }
.install-guide h2 { margin:0 0 .65rem; font-size:1.4rem; color:var(--green-dark); letter-spacing:-.035em; }
.install-intro { margin:0 0 1.2rem; color:var(--muted); font-size:.9rem; line-height:1.5; }
.install-steps { list-style:none; padding:0; margin:0; display:grid; gap:.7rem; counter-reset:install; }
.install-steps li { display:grid; grid-template-columns:2.5rem minmax(0,1fr); gap:.75rem; padding:.85rem; background:var(--soft); border-radius:.85rem; counter-increment:install; }
.install-step-icon { display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:.6rem; background:var(--surface); color:var(--green); }
.install-steps strong { color:var(--green-dark); font-size:.9rem; }
.install-steps strong::before { content:counter(install) '. '; }
.install-steps p { color:var(--muted); margin:.3rem 0 0; font-size:.85rem; line-height:1.5; }
.install-address p { overflow-wrap:anywhere; font-size:.8rem; }
.install-footnote { color:var(--muted); font-size:.76rem; line-height:1.5; margin:1rem 0 0; }
.feedback-heading { display:flex; align-items:center; gap:.65rem; margin-bottom:.7rem; }
.feedback-heading > i { display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:.75rem; background:var(--soft); color:var(--green); font-size:1.15rem; }
.feedback-heading h2 { margin:0; }
#feedback-form { margin-top:1rem; }
#feedback-form > label { display:block; margin-bottom:.5rem; font-size:.86rem; font-weight:700; }
#feedback-message { display:block; width:100%; min-height:9rem; max-height:28rem; resize:vertical; padding:.85rem; border:1px solid var(--line); border-radius:.75rem; background:var(--bg); color:var(--ink); font:inherit; font-size:1rem; line-height:1.5; touch-action:manipulation; }
#feedback-message::placeholder { color:var(--muted); }
#feedback-message:focus-visible { outline:3px solid var(--green); outline-offset:2px; }
.feedback-caption { display:flex; justify-content:space-between; gap:.5rem; margin:.45rem 0 .85rem; color:var(--muted); font-size:.73rem; }
.feedback-card .feedback-hint,.feedback-card .feedback-privacy { font-size:.78rem; margin:.65rem 0; }
.feedback-send { display:flex; align-items:center; justify-content:center; gap:.55rem; width:100%; min-height:2.75rem; margin-top:1rem; padding:.75rem; border:0; border-radius:.75rem; background:var(--green); color:var(--bg); font-weight:750; transition:transform 180ms ease,background-color 200ms ease; }
.feedback-send:not(:disabled):active { transform:scale(.98); }
.feedback-send:disabled { background:var(--soft); color:var(--muted); cursor:default; }
.feedback-connection { display:grid; grid-template-columns:1.15rem minmax(0,1fr); align-items:start; gap:.5rem; margin:.85rem 0 0; padding:.8rem; border-radius:.65rem; background:var(--soft); color:var(--muted); font-size:.8rem; line-height:1.45; }
.feedback-connection > i { margin-top:.2rem; color:var(--green); }
.feedback-connection button { grid-column:2; justify-self:start; min-height:2.75rem; padding:.5rem 0; border:0; background:transparent; color:var(--green); text-decoration:underline; text-underline-offset:.2em; font-size:.8rem; }
.feedback-card .feedback-status { font-size:.85rem; margin:.8rem 0 0; }
.feedback-status:empty { display:none; }
.feedback-status[data-kind="success"] { color:var(--green); }
.feedback-status[data-kind="error"] { color:#a52b3b; }
:root[data-theme="dark"] .feedback-status[data-kind="error"] { color:#ff9ca6; }
.contact-link { display:grid; grid-template-columns:1.5rem minmax(0,1fr) .8rem; gap:.65rem; align-items:center; padding:.9rem 0; text-decoration:none; border-bottom:1px solid var(--line); }
.contact-link:last-child { border:0; padding-bottom:.3rem; }
.contact-link strong { display:block; font-size:.85rem; }
.contact-link span span { display:block; margin-top:.2rem; color:var(--muted); font-size:.83rem; overflow-wrap:anywhere; }
.contact-link > i:last-child { font-size:.7rem; }
@media(any-pointer:coarse) { input[type='search'],select { font-size:1rem; } }
@media(prefers-reduced-motion:reduce) { *, ::before, ::after, ::backdrop { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }