:root {
 color-scheme: light;
 --bg: #ecf1f8;
 --ink: #142b49;
 --surface: #fff;
 --line: #a6b9ce;
 --muted: #425971;
 --hero: #153251;
 --accent: #215bc7;
 --on-accent: #fff;
 --selected: #dce8fc;
 --link: #174ca8;
 --font-heading: Sora, system-ui, sans-serif;
 --font-body: Figtree, system-ui, sans-serif;
 --control-height: 48px;
 --control-radius: 10px;
 --field-gap: 16px;
 --section-gap: 24px;
 --card-pad: 22px;
 --card-radius: 18px;
 --rail-width: 252px;
 --app-header-height: 76px;
 --app-gutter: 30px;
 --motion-in: 180ms;
 --motion-out: 144ms;
 --motion-move: 180ms;
 background: var(--bg);
 color: var(--ink);
 font: 400 1rem/1.55 var(--font-body);
}
:root[data-appearance=dark] {
 color-scheme: dark;
 --bg: #151c25;
 --ink: #ecf4ff;
 --surface: #1c2834;
 --line: #394c60;
 --muted: #b3c0ce;
 --hero: #202f40;
 --accent: #73d0fa;
 --on-accent: #11232e;
 --selected: #273b51;
 --link: #b4d2ff;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100dvh; }
h1, h2, h3, .brand {
 font-family: var(--font-heading);
 font-weight: 700;
 text-wrap: balance;
}
h1 { margin: 0 0 8px; font-size: 2.25rem; line-height: 1.15; letter-spacing: -.035em; }
h2 { margin: 0 0 10px; font-size: 1.3125rem; line-height: 1.3; letter-spacing: -.018em; }
h3 { margin: 0 0 8px; font-size: 1.125rem; line-height: 1.35; }
p { margin: 0 0 16px; max-width: 68ch; line-height: 1.6; overflow-wrap: anywhere; }
p:last-child { margin-bottom: 0; }
small, .muted { color: var(--muted); }
a { color: var(--link); text-underline-offset: 3px; }
pre { font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

button, input, select, textarea { font: inherit; }
button, .app-link-button {
 display: inline-flex;
 justify-content: center;
 align-items: center;
 gap: 8px;
 min-height: var(--control-height);
 max-width: 100%;
 padding: 8px 14px;
 border: 1px solid var(--line);
 border-radius: var(--control-radius);
 color: var(--ink);
 background: var(--surface);
 font-size: .875rem;
 font-weight: 600;
 line-height: 1.3;
 touch-action: manipulation;
 cursor: pointer;
}
.app-link-button { text-decoration: none; }
button:not(:disabled):hover, .app-link-button:hover { background: var(--selected); }
button:active, .app-link-button:active { transform: scale(.97); transition: none; }
button:disabled { opacity: .5; cursor: not-allowed; }
button.primary, button.primary:not(:disabled):hover {
 background: var(--accent);
 border-color: var(--accent);
 color: var(--on-accent);
}
form, .field-grid { display: grid; gap: var(--field-gap); }
.field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.field-grid > *, form > * { min-width: 0; }
.field-wide { grid-column: 1 / -1; }
label {
 display: grid;
 min-width: 0;
 gap: 8px;
 margin: 0;
}
label:not(.check) {
 color: var(--muted);
 font-size: .75rem;
 font-weight: 600;
 line-height: 1.4;
 letter-spacing: .065em;
 text-transform: uppercase;
}
input:not([type=hidden],[type=checkbox],[type=radio],[type=range]),
select, textarea {
 width: 100%;
 min-width: 0;
 max-width: 100%;
 border: 1px solid var(--line);
 border-radius: var(--control-radius);
 padding: 8px 14px;
 background: var(--bg);
 color: var(--ink);
 font: 400 1rem/1.3 var(--font-body);
 letter-spacing: normal;
 text-transform: none;
}
input:not([type=hidden],[type=checkbox],[type=radio],[type=range],[type=file]),
select:not([multiple]) {
 -webkit-appearance: none;
 appearance: none;
 height: var(--control-height);
 min-height: var(--control-height);
}
select:not([multiple]) {
 padding-inline-end: 40px;
 background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                   linear-gradient(135deg, var(--muted) 50%, transparent 50%);
 background-position: right 19px center, right 14px center;
 background-size: 5px 5px;
 background-repeat: no-repeat;
}
@media (forced-colors: active) {
 select:not([multiple]) { appearance: auto; padding-inline-end: 14px; }
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .78; }
input[type=file] { min-height: var(--control-height); padding: 7px; }
input[type=date]::-webkit-date-and-time-value { min-height: 1.3em; text-align: left; }
textarea { min-height: 112px; padding-block: 12px; line-height: 1.5; resize: vertical; }
input[type=range] { width: 100%; min-height: 44px; margin: 0; accent-color: var(--accent); }
.check {
 display: flex;
 align-items: center;
 gap: 12px;
 min-height: 48px;
 line-height: 1.45;
 cursor: pointer;
}
.check input { flex: 0 0 22px; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.row, .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.form-actions { padding-top: 4px; }
progress { width: 100%; height: 10px; accent-color: var(--accent); }

.soak-app {
 display: grid;
 grid-template-columns: var(--rail-width) minmax(0, 1fr);
 grid-template-rows: auto 1fr;
}
.app-header {
 position: sticky;
 top: 0;
 z-index: 3;
 grid-column: 2;
 display: flex;
 align-items: center;
 gap: 12px;
 min-height: calc(var(--app-header-height) + env(safe-area-inset-top));
 padding: env(safe-area-inset-top) var(--app-gutter) 0;
 border-bottom: 1px solid var(--line);
 background: var(--surface);
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; white-space: nowrap; }
.brand .brand-mark {
 display: grid;
 place-items: center;
 flex: 0 0 40px;
 width: 40px;
 height: 40px;
 border-radius: 10px;
 color: #c6deff;
 background: var(--hero);
}
.brand svg { width: 22px; height: 22px; }
.brand img[data-soak-icon] { display: block; object-fit: cover; }
.app-header .brand { display: none; }
.identity {
 min-width: 0;
 overflow: hidden;
 color: var(--muted);
 font-size: .875rem;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.app-header .appearance-trigger { margin-inline-start: auto; }
.account-trigger { flex: none; }
.account-trigger svg { width: 20px; height: 20px; }
.account-identity { display: grid; gap: 2px; margin-bottom: 12px; }
.account-identity strong { font-weight: 600; }
.account-identity span { font-size: .875rem; }
.app-rail {
 position: sticky;
 top: 0;
 grid-column: 1;
 grid-row: 1 / 3;
 display: flex;
 flex-direction: column;
 gap: 20px;
 align-self: start;
 min-height: 100dvh;
 padding: 22px 14px;
 border-inline-end: 1px solid var(--line);
 background: var(--surface);
}
.app-rail-heading {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 padding-inline: 4px;
}
#app-rail-toggle { width: 44px; min-height: 44px; padding: 0; }
#app-rail-toggle svg { width: 20px; height: 20px; }
@media (min-width: 701px) {
 .soak-app[data-rail=collapsed] { --rail-width: 88px; }
 .soak-app[data-rail=collapsed] .app-rail-heading { flex-direction: column; }
 .soak-app[data-rail=collapsed] .app-rail :is(.brand-wordmark, .app-nav button span) { display: none; }
 .soak-app[data-rail=collapsed] .app-nav button { justify-content: center; padding-inline: 0; }
 #app-rail-toggle[aria-expanded=false] svg { transform: rotate(180deg); }
}
.app-nav { display: flex; flex-direction: column; gap: 6px; }
.app-nav button {
 justify-content: flex-start;
 gap: 12px;
 width: 100%;
 min-height: 46px;
 padding-inline: 12px;
 border-color: transparent;
 border-radius: 11px;
 color: var(--muted);
 background: transparent;
 font-size: .8125rem;
 font-weight: 500;
}
.app-nav button[aria-current] { color: var(--ink); background: var(--selected); font-weight: 600; }
.app-nav svg { flex: 0 0 21px; width: 21px; height: 21px; }
.app-main {
 grid-column: 2;
 display: grid;
 align-content: start;
 gap: var(--section-gap);
 width: min(100%, 1280px);
 min-width: 0;
 margin-inline: auto;
 padding: 24px var(--app-gutter) 40px;
}
.view-stack { display: grid; gap: var(--section-gap); min-width: 0; animation: enter var(--motion-in) ease-out; }
.view-stack > :is(h1, h2, p, .row) { margin: 0; }
.workspace-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--field-gap); }
.spa-picker { width: min(100%, 400px); }
.page-heading { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 16px 24px; }
.page-heading small { display: block; margin-bottom: 7px; }
.page-heading p { margin: 0; color: var(--muted); }
.panel, details {
 min-width: 0;
 padding: var(--card-pad);
 border: 1px solid var(--line);
 border-radius: var(--card-radius);
 background: var(--surface);
}
.panel > :last-child { margin-bottom: 0; }
.panel > form, .panel > .form-actions, .panel > details { margin-top: 16px; }
summary {
 min-height: 44px;
 padding: 10px 0;
 font-weight: 600;
 line-height: 1.4;
 cursor: pointer;
}
details[open] > :not(summary) { margin-top: 14px; animation: enter var(--motion-in) ease-out; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.grid > * { min-width: 0; }
.overview-grid > .panel { display: flex; flex-direction: column; align-items: start; }
.overview-grid > .panel button { margin-top: auto; }
.record-list { display: grid; margin: 18px 0 0; padding: 0; list-style: none; }
.record-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 8px 18px;
 padding: 14px 0;
 border-top: 1px solid var(--line);
}
.record-row :is(strong, small) { display: block; overflow-wrap: anywhere; }
.record-row strong { font-weight: 600; }
.record-row small { margin-top: 3px; }
.settings-switcher {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 padding: 5px;
 border: 1px solid var(--line);
 border-radius: 12px;
 background: var(--surface);
 width: fit-content;
}
.settings-switcher button { border-color: transparent; background: transparent; }
.settings-switcher button[aria-pressed=true] { background: var(--selected); }
.settings-section { display: grid; gap: var(--section-gap); min-width: 0; }

.ask-workspace { display: grid; gap: var(--section-gap); width: min(100%, 760px); }
.ask-heading p { margin: 0; color: var(--muted); }
.ask-composer { gap: var(--field-gap); }
.ask-composer textarea { min-height: 72px; }
.ask-composer-actions, .ask-mode-actions, .ask-connection {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 8px 12px;
}
.ask-mode-actions { gap: 8px; margin-inline-start: auto; }
.ask-quiet-action {
 border-color: transparent;
 background: transparent;
 color: var(--link);
}
.ask-connection { padding-top: 12px; border-top: 1px solid var(--line); }
.ask-connection small { flex: 1 1 13rem; line-height: 1.45; }
#ask-status { margin: 0; }
#ask-status:empty, #answer:empty { position: absolute; }
.ask-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ask-results, .ask-page-list { display: grid; gap: var(--field-gap); min-width: 0; }
.ask-results-heading {
 display: grid;
 grid-template-columns: minmax(0, 1fr) auto;
 align-items: baseline;
 gap: 4px 12px;
}
.ask-results-heading h2, .ask-results-heading p { margin: 0; }
.ask-results-heading p { grid-column: 1 / -1; color: var(--muted); }
.ask-page-list { margin: 0; padding: 0; list-style: none; }
.ask-page-heading {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: center;
 gap: 8px 16px;
 margin-bottom: 10px;
}
.ask-page-heading h3 { margin: 2px 0 0; font-size: 1rem; text-wrap: pretty; }
.ask-page-heading small { font-weight: 600; }
.ask-page > p { margin-bottom: 8px; }
.ask-page > details {
 margin-top: 0;
 padding: 0;
 border: 0;
 border-top: 1px solid var(--line);
 border-radius: 0;
 background: transparent;
}
.ask-page > details pre { margin: 4px 0 8px; color: var(--muted); }
.ask-more { padding-block: 4px 12px; }
.ask-answer-text {
 display: grid;
 gap: var(--field-gap);
 max-inline-size: 62ch;
 overflow-wrap: anywhere;
}
.ask-answer-text > * { margin: 0; }
.ask-answer-text .ask-answer-lead { font-size: 1.0625rem; font-weight: 500; }
.ask-answer-text .ask-answer-subhead {
 margin-block-end: -8px;
 font-size: 1rem;
 text-wrap: pretty;
}
.ask-answer-text :is(ul, ol) {
 display: grid;
 gap: 8px;
 padding-inline-start: 1.4em;
}
.ask-answer-text li { padding-inline-start: .25em; }
.ask-answer-text li::marker { color: var(--accent); font-weight: 600; }
.ask-citation { font-size: .9em; font-weight: 600; white-space: nowrap; }
.ask-citation[data-ask-document-citation] { white-space: normal; overflow-wrap: anywhere; }
.ask-page-heading h4 { margin: 2px 0 0; font-size: 1rem; }
.ask-page-heading :is(h3, h4) { overflow-wrap: anywhere; }
.ask-generated-sources { padding-block: 0; }
.ask-generated-sources > summary {
 min-height: var(--control-height);
 padding-block: 14px;
}
.ask-generated-sources > summary small { margin-inline-start: 6px; font-weight: 400; }
.ask-generated-sources[open] { padding-block-end: var(--card-pad); }

.ask-chat-heading {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 8px var(--field-gap);
 min-width: 0;
}
.ask-chat-heading > div { min-width: 0; }
.ask-chat-intro {
 display: flex;
 align-items: center;
 gap: 12px;
}
.ask-chat-heading h1 { margin-block-end: 4px; }
#ask-status, #ask-results-title, .ask-message-meta {
 scroll-margin-block-start: calc(var(--app-header-height) + var(--field-gap));
}
#ask-header-actions:empty,
#ask-saved-conversations:empty,
#ask-conversation-notes:empty { display: none; }
.ask-chat-actions {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 8px;
 min-width: 0;
}
.ask-conversations,
.ask-memory { padding-block: 0; }
.ask-conversations > summary,
.ask-memory > summary {
 min-height: var(--control-height);
 padding-block: 14px;
}
.ask-conversations[open],
.ask-memory[open] { padding-block-end: var(--field-gap); }
.ask-conversations[open] > .ask-thread-list { margin-block-start: 4px; }
.ask-thread-list {
 display: grid;
 gap: 8px;
 margin: 0;
 padding: 0;
 list-style: none;
}
.ask-thread-list > li { min-width: 0; }
.ask-thread-choice {
 display: grid;
 justify-items: start;
 gap: 4px;
 width: 100%;
 padding-block: 10px;
 text-align: start;
 overflow-wrap: anywhere;
}
.ask-thread-choice small { font-weight: 400; }
.ask-thread-choice:is([aria-current=true], [aria-pressed=true]) {
 border-color: var(--accent);
 background: var(--selected);
}
.ask-transcript,
.ask-turn {
 display: grid;
 min-width: 0;
}
.ask-transcript {
 gap: var(--section-gap);
 margin: 0;
 padding: 0;
 list-style: none;
}
.ask-turn { gap: 12px; }
.ask-message {
 display: grid;
 gap: 8px;
 min-width: 0;
 padding: var(--field-gap);
 border: 1px solid var(--line);
 border-radius: var(--card-radius);
 background: var(--surface);
 overflow-wrap: anywhere;
}
.ask-message-user {
 justify-self: end;
 max-inline-size: min(88%, 58ch);
 border-end-end-radius: 4px;
 background: var(--selected);
}
.ask-message-suds {
 justify-self: start;
 inline-size: fit-content;
 max-inline-size: min(100%, 68ch);
 border-end-start-radius: 4px;
}
.ask-message-pending {
 min-inline-size: min(100%, 230px);
 color: var(--muted);
}
.ask-message-pending p { margin: 0; }
#ask-pending-turn { scroll-margin-block-end: var(--section-gap); }
.ask-message-meta {
 display: flex;
 align-items: center;
 gap: 8px;
 margin: 0;
 color: var(--muted);
 font-size: .875rem;
 font-weight: 600;
}
.ask-message-meta > * { margin: 0; }
.ask-message-copy {
 margin: 0;
 white-space: pre-wrap;
}
.ask-suds-icon { display: block; flex: none; }
.ask-mascot-trigger,
.ask-mascot-badge {
 display: grid;
 place-items: center;
 flex: none;
 width: 60px;
 height: 60px;
 padding: 0;
 border: 0;
 border-radius: var(--control-radius);
 background: transparent;
 color: var(--link);
}
.ask-mascot-trigger:not(:disabled):hover { background: transparent; }
.ask-mascot-badge { width: 32px; height: 32px; }
.ask-mascot-motion,
.ask-mascot-art,
.ask-mascot-art > svg {
 display: block;
 width: 100%;
 height: 100%;
}
.ask-mascot-motion { display: grid; place-items: center; transform-origin: center 70%; }
.ask-mascot-trigger .ask-mascot-motion > .ask-suds-icon { width: 32px; height: 32px; }
.ask-source-links {
 display: flex;
 flex-wrap: wrap;
 gap: 8px 12px;
}
.ask-source-links a {
 display: inline-flex;
 align-items: center;
 min-height: var(--control-height);
}
#ask-conversation-notes > .row { margin-block-start: var(--field-gap); }
.ask-memory-form {
 gap: 8px;
 margin-block-start: var(--field-gap);
}

.editor-dialog {
 width: min(650px, calc(100vw - 32px));
 max-height: calc(100dvh - 32px);
 overflow: auto;
 padding: 24px;
 border: 1px solid var(--line);
 border-radius: 20px;
 background: var(--surface);
 color: var(--ink);
}
.editor-dialog::backdrop { background: rgb(12 24 39 / .55); }
.editor-dialog[open] { animation: popover-in var(--motion-in) ease-out; }
.dialog-heading {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 margin-bottom: 20px;
 padding-bottom: 18px;
 border-bottom: 1px solid var(--line);
}
.dialog-heading h2 { margin: 0; }
.dialog-heading button { min-width: 48px; }
.editor-dialog form + form { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }

.appearance-trigger { display: inline-flex; flex: none; }
.appearance-trigger svg { width: 20px; height: 20px; }
#restore-status:empty { display: none; }
#appearance-panel {
 inset: calc(var(--app-header-height) + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) auto auto;
 display: none;
 width: min(320px, calc(100vw - 32px));
 margin: 0;
 padding: 18px;
 border: 1px solid var(--line);
 border-radius: 16px;
 color: var(--ink);
 background: var(--surface);
 box-shadow: 0 18px 44px #0003;
 transform-origin: top right;
}
#appearance-panel:popover-open { display: grid; gap: 14px; animation: popover-in var(--motion-in) ease-out both; }
#appearance-panel h2 { margin: 0; }
@supports (position-anchor: --appearance-trigger) {
 .appearance-trigger { anchor-name: --appearance-trigger; }
 #appearance-panel { position-anchor: --appearance-trigger; top: calc(anchor(bottom) + 8px); right: anchor(right); }
}
@supports (transition-behavior: allow-discrete) {
 #appearance-panel {
  opacity: 0;
  transform: scale(.95);
  transition: opacity var(--motion-out) ease-in, transform var(--motion-out) ease-in,
              overlay var(--motion-out) allow-discrete, display var(--motion-out) allow-discrete;
 }
 #appearance-panel:popover-open {
  animation: none;
  opacity: 1;
  transform: scale(1);
  transition-duration: var(--motion-in);
  transition-timing-function: ease-out;
 }
 @starting-style { #appearance-panel:popover-open { opacity: 0; transform: scale(.95); } }
}
#notice:not(:empty) {
 position: fixed;
 z-index: 5;
 inset: auto auto 24px 50%;
 width: max-content;
 max-width: calc(100vw - 32px);
 padding: 12px 18px;
 border-radius: 14px;
 background: var(--ink);
 color: var(--bg);
 transform: translateX(-50%);
 animation: pulse .24s ease-out;
}
.history { animation: enter var(--motion-in) ease-out both; animation-delay: calc(var(--i,0)*30ms); }
.water-reading { max-inline-size: 760px; }
.water-match { margin-block: var(--field-gap); }
.water-comparison {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: var(--field-gap);
 padding: var(--field-gap);
 margin-block-end: var(--field-gap);
 border: 1px solid var(--line);
 border-radius: var(--control-radius);
 background: var(--bg);
}
.water-comparison-swatch {
 inline-size: clamp(64px, 22vw, 120px);
 block-size: 70px;
 border: 1px solid var(--line);
 border-radius: var(--control-radius);
 background: var(--water-color);
}
#water-estimate {
 display: block;
 font: 600 1.5rem/1.25 var(--font-heading);
 font-variant-numeric: tabular-nums;
}
.water-match label { gap: 0; }
#water-slider {
 appearance: none;
 -webkit-appearance: none;
 block-size: var(--control-height);
 min-height: var(--control-height);
 background: transparent;
 cursor: pointer;
 touch-action: pan-y;
}
#water-slider::-webkit-slider-runnable-track {
 height: 14px;
 border-radius: 100px;
 background: var(--water-gradient);
 box-shadow: 0 0 0 1px var(--line);
}
#water-slider::-moz-range-track {
 height: 14px;
 border-radius: 100px;
 background: var(--water-gradient);
 box-shadow: 0 0 0 1px var(--line);
}
#water-slider::-webkit-slider-thumb {
 -webkit-appearance: none;
 width: 26px;
 height: 26px;
 margin-top: -6px;
 border: 2px solid var(--ink);
 border-radius: 50%;
 background: var(--water-color);
 box-shadow: 0 0 0 1px var(--bg);
 transition: transform var(--motion-move) ease-in-out;
}
#water-slider:active::-webkit-slider-thumb { transform: scaleX(1.12); transition: none; }
#water-slider::-moz-range-thumb {
 box-sizing: border-box;
 width: 26px;
 height: 26px;
 border: 2px solid var(--ink);
 border-radius: 50%;
 background: var(--water-color);
 box-shadow: 0 0 0 1px var(--bg);
 transition: transform var(--motion-move) ease-in-out;
}
#water-slider:active::-moz-range-thumb { transform: scaleX(1.12); transition: none; }
.water-scale-labels {
 position: relative;
 min-block-size: 1.25rem;
 margin-inline: 13px;
 color: var(--muted);
 font-size: .75rem;
 font-variant-numeric: tabular-nums;
}
.water-scale-labels span { position: absolute; inset-inline-start: var(--water-stop); transform: translateX(-50%); }
.water-scale-guide { margin-block-end: 8px; }
.water-scale-guide strong { margin-inline-end: 5px; }
@media (forced-colors: active) {
 #water-slider { appearance: auto; -webkit-appearance: auto; }
}
#update-banner { justify-content: space-between; }
#offline-banner { margin: 0; }
.due-next h3 { margin: 0 0 12px; }
.due-next time { font-size: .875rem; }
.draft-controls { justify-content: space-between; }
.water-trend { margin-block: 12px; }
#feedback-status:not(:empty) { color: var(--ink); }
section[id] { scroll-margin-top: 96px; }

@keyframes enter { from { opacity: 0; transform: translateY(5px); } }
@keyframes popover-in { from { opacity: 0; transform: scale(.95); } }
@keyframes pulse { from { opacity: 0; scale: .95; } 65% { scale: 1.025; } }

@media (max-width: 1050px) {
 :root { --app-gutter: 24px; }
}
@media (max-width: 700px) {
 :root { --app-gutter: 20px; --app-header-height: 68px; --card-pad: 18px; }
 h1 { font-size: 1.75rem; }
 h2 { font-size: 1.1875rem; }
 .soak-app { display: block; }
 .app-header .brand { display: flex; }
 .app-header .identity, .app-rail-heading { display: none; }
 .app-rail {
  position: fixed;
  z-index: 4;
  inset: auto 0 0;
  display: block;
  min-height: 0;
  padding: 5px max(4px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
  border: 0;
  border-top: 1px solid var(--line);
 }
 .app-nav { flex-direction: row; gap: 0; }
 .app-nav button {
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 56px;
  padding: 5px 2px;
  font-size: .6875rem;
 }
 .app-nav svg { flex: 0 0 21px; }
 .app-main { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
 .field-grid { grid-template-columns: 1fr; }
 #notice:not(:empty) { bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media (max-width: 500px) {
 .app-header :is(.appearance-trigger, .account-trigger) span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
 }
 #appearance-panel { right: max(16px, env(safe-area-inset-right)); }
 .soak-app #appearance-panel { transform-origin: calc(100% - 88px) top; }
 .editor-dialog { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { animation: none !important; transition: none !important; }
}

.reference-kit-fields { display: grid; gap: var(--field-gap); align-content: start; }
.reference-kit-fields h3 { margin: 0; }
.reference-document-items { margin-top: var(--field-gap); }
.reference-document-items .row a {
 display: inline-flex;
 align-items: center;
 min-height: var(--control-height);
}
.reading-list { margin: 0; }
.reading-list .record-row:first-child { border-top: 0; }
.reading-list dt { color: var(--muted); font-size: .8125rem; font-weight: 600; }
.reading-list dd { margin: 0; font-weight: 400; font-variant-numeric: tabular-nums; }

@media (max-width: 850px) { .field-grid { grid-template-columns: 1fr; } }
.form-actions + h3, .record-list + h3 { margin-top: var(--section-gap); }
.form-status:empty { display: none; }
@media (min-width: 701px) {
 .editor-dialog .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.balance-steps {
 display: grid;
 gap: var(--field-gap);
 margin: var(--field-gap) 0;
 padding: 0;
 list-style: none;
}
.balance-steps > li {
 display: grid;
 grid-template-columns: 2rem minmax(0, 1fr);
 gap: 12px;
}
.balance-step-number {
 display: grid;
 place-items: center;
 width: 2rem;
 height: 2rem;
 border: 1px solid var(--line);
 border-radius: 50%;
 background: var(--selected);
 font-size: .875rem;
 font-weight: 600;
}
.balance-step-title {
 margin: 3px 0 4px;
 font-family: var(--font-heading);
 font-size: 1rem;
 font-weight: 600;
 line-height: 1.4;
}
.balance-step-body > p { margin: 0; }
.balance-step-body > .balance-step-mode {
 margin-block-start: 6px;
 color: var(--muted);
 font-size: .875rem;
}
.balance-step-mode strong { color: var(--ink); }
.balance-fields {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
 gap: 8px;
 margin: 12px 0 var(--field-gap);
}
.balance-fields > div {
 padding: 8px 12px;
 border: 1px solid var(--line);
 border-radius: var(--control-radius);
 background: var(--surface);
}
.balance-fields dt {
 color: var(--muted);
 font-size: .8125rem;
 font-weight: 600;
}
.balance-fields dd { margin: 0; }
.balance-sources {
 display: flex;
 flex-wrap: wrap;
 gap: 4px var(--field-gap);
 font-size: .875rem;
}
.balance-sources a {
 display: inline-flex;
 align-items: center;
 min-height: var(--control-height);
}

.balance-plan-readings, .balance-sequence { display: grid; gap: 12px; min-width: 0; }
.balance-plan-readings h2, .balance-sequence h2, .balance-sequence h3 { margin: 0; }
.balance-reading-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr));
 gap: 8px;
 margin: 0;
}
.balance-reading-grid > div {
 display: grid;
 align-content: start;
 gap: 2px;
 min-width: 0;
 padding: 8px 10px;
 border: 1px solid var(--line);
 border-radius: var(--control-radius);
 background: var(--surface);
 overflow-wrap: anywhere;
}
.balance-reading-grid dt { color: var(--muted); font-size: .8125rem; font-weight: 600; }
.balance-reading-grid dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 700; }
.balance-reading-grid small { font-weight: 600; }
.balance-sequence-heading, .balance-sequence-product {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: baseline;
 gap: 2px 12px;
}
.balance-sequence-heading p, .balance-sequence-product p { margin: 0; }
.balance-sequence-list {
 display: grid;
 gap: 12px;
 margin: 0;
 padding: 0;
 list-style: none;
}
.balance-sequence-step {
 position: relative;
 display: grid;
 grid-template-columns: 2rem minmax(0, 1fr);
 align-items: start;
 gap: 10px;
}
.balance-sequence-step:not(:last-child)::before {
 position: absolute;
 inset-inline-start: calc(1rem - .5px);
 inset-block: 2rem -12px;
 border-inline-start: 1px solid var(--line);
 content: "";
}
.balance-sequence-step .balance-step-number { position: relative; margin-block-start: 4px; }
.balance-sequence-step[data-state=ready] .balance-step-number {
 border-color: var(--accent);
 background: var(--accent);
 color: var(--on-accent);
}
.balance-sequence-step[aria-current] .balance-sequence-card { border-color: var(--accent); }
.balance-sequence-card {
 display: grid;
 gap: 8px;
 min-width: 0;
 padding: clamp(12px, 2.5vw, var(--card-pad));
}
.balance-sequence-card > * { min-width: 0; }
.balance-sequence-card > p { margin: 0; }
.balance-sequence-card .balance-sequence-status { color: var(--muted); font-size: .8125rem; font-weight: 600; }
.balance-sequence-step[data-state=ready] .balance-sequence-status { color: var(--accent); }
.balance-sequence-product { color: var(--muted); }
.balance-sequence-amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; }
.balance-sequence-amount strong { color: var(--ink); font-family: var(--font-heading); font-size: 1rem; }
.balance-sequence-note, .balance-sequence-method, .balance-sequence-wait { color: var(--muted); font-size: .875rem; }
.balance-sequence-wait {
 display: flex;
 align-items: baseline;
 flex-wrap: wrap;
 gap: 2px 8px;
 padding-block-start: 8px;
 border-block-start: 1px solid var(--line);
}
.balance-sequence-wait strong { color: var(--ink); }
.balance-sequence-card > form, .balance-sequence-card > .form-actions, .balance-sequence-card > details { margin-top: 4px; }
.balance-sequence-sources { padding: 0; border: 0; background: transparent; }
.balance-sequence-sources > summary { min-height: var(--control-height); padding-inline: 0; }
#balance-next-treatment { scroll-margin-block-start: calc(var(--app-header-height) + 12px); }

.mode-guide-heading {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 8px var(--field-gap);
 margin-bottom: 8px;
}
.mode-guide-heading h2 { margin: 0; }
.mode-guide-list { display: grid; gap: 8px; }
.mode-guide-card {
 padding: 0;
 border-radius: var(--control-radius);
 background: var(--bg);
}
.mode-guide-card > summary {
 display: flex;
 align-items: center;
 gap: 8px 12px;
 min-height: var(--control-height);
 padding: 8px 12px;
 border-radius: var(--control-radius);
 list-style: none;
}
.mode-guide-card > summary::-webkit-details-marker { display: none; }
.mode-guide-card > summary::after {
 content: '';
 width: 8px;
 height: 8px;
 margin-inline: auto 3px;
 border-right: 2px solid var(--muted);
 border-bottom: 2px solid var(--muted);
 transform: rotate(45deg);
 flex: none;
 transition: transform var(--motion-move) ease-in-out;
}
.mode-guide-card[open] > summary::after { transform: rotate(225deg); }
.mode-guide-card[open] > summary { background: var(--selected); }
.mode-guide-label {
 flex: 0 0 4.5rem;
 padding: 4px 6px;
 border: 1px solid var(--line);
 border-radius: 6px;
 background: var(--surface);
 font-size: .875rem;
 font-weight: 700;
 letter-spacing: .06em;
 text-align: center;
}
.mode-guide-content { padding: 0 12px 12px; }
.mode-guide-directions,
.mode-guide-options { margin: 0 0 12px; }
.mode-guide-directions { display: grid; gap: 12px; }
.mode-guide-directions dt {
 margin-bottom: 4px;
 color: var(--muted);
 font-size: .8125rem;
 font-weight: 600;
}
.mode-guide-content dd { margin: 0; }
.mode-guide-options > div {
 display: grid;
 grid-template-columns: 4rem minmax(0, 1fr);
 gap: 8px;
 padding-block: 8px;
 border-top: 1px solid var(--line);
}
.mode-guide-options dt { font-weight: 700; }
.mode-guide-sources { display: flex; flex-wrap: wrap; gap: 4px var(--field-gap); }
.mode-guide-sources a { display: inline-flex; align-items: center; min-height: var(--control-height); }
.mode-guide-card > summary,
#reference-mode-title,
#balance-plan-title,
#balance-salt-directions { scroll-margin-top: calc(var(--app-header-height) + 12px); }

.suds-avatar,
.suds-avatar svg {
 display: block;
 width: 100%;
 height: 100%;
}
.suds-avatar { flex: none; }
.suds-picker-trigger .suds-avatar {
 width: 40px;
 height: 40px;
}
.suds-picker-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 12px;
}
.suds-picker-choice {
 position: relative;
 display: grid;
 align-content: center;
 justify-items: center;
 gap: 8px;
 min-width: 0;
 min-height: 104px;
 padding: 12px 6px;
 text-align: center;
}
.suds-picker-choice[aria-pressed="true"] {
 background: var(--selected);
 border-color: var(--accent);
 color: var(--ink);
}
.suds-picker-choice .suds-avatar {
 width: 58px;
 height: 58px;
}
.suds-picker-name { font-size: .9375rem; }
.suds-picker-footer {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 8px 12px;
}
.suds-picker-status { margin: 0; }

.suds-foam-character { animation: suds-foam-breathe 4.8s ease-in-out infinite; }
.suds-foam-eyes { transform-box: fill-box; transform-origin: center; animation: suds-foam-blink 4.8s ease-in-out infinite; }
.suds-foam-wave { transform-origin: 36px 32px; animation: suds-foam-wave 4.8s ease-in-out infinite; }
.suds-foam-bubble { animation: suds-foam-bubble 4.8s ease-in-out infinite; }
@keyframes suds-foam-breathe { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-1.25px); } }
@keyframes suds-foam-blink { 0%, 48%, 54%, 100% { transform: scaleY(1); } 51% { transform: scaleY(.13); } }
@keyframes suds-foam-wave { 0%, 14%, 34%, 100% { transform: rotate(0); } 20%, 29% { transform: rotate(-15deg); } 25% { transform: rotate(2deg); } }
@keyframes suds-foam-bubble { 0%, 100% { transform: translateY(0); } 52% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) {
  .suds-foam-character, .suds-foam-eyes, .suds-foam-wave, .suds-foam-bubble { animation: none; }
}

.suds-otter-head, .suds-otter-paw, .suds-otter-eyes { transform-box: view-box; }
.suds-otter-head { transform-origin: 24px 26px; animation: suds-otter-listen 7.2s ease-in-out infinite; }
.suds-otter-paw { transform-origin: 15px 34px; animation: suds-otter-wave 7.2s ease-in-out infinite; }
.suds-otter-eyes { transform-origin: 24px 16.5px; animation: suds-otter-blink 7.2s ease-in-out infinite; }
@keyframes suds-otter-listen {
  0%, 17%, 43%, 100% { transform: rotate(0deg); }
  26%, 35% { transform: rotate(4deg); }
}
@keyframes suds-otter-wave {
  0%, 24%, 51%, 100% { transform: rotate(0deg); }
  30%, 43% { transform: rotate(16deg); }
  36% { transform: rotate(10deg); }
}
@keyframes suds-otter-blink {
  0%, 9%, 13%, 68%, 72%, 100% { transform: scaleY(1); }
  11%, 70% { transform: scaleY(.16); }
}
@media (prefers-reduced-motion: reduce) {
  .suds-otter-head, .suds-otter-paw, .suds-otter-eyes { animation: none; }
}

.suds-frog-eyes { transform-box: fill-box; transform-origin: center; animation: suds-frog-blink 6.8s ease-in-out infinite; }
.suds-frog-throat { transform-box: fill-box; transform-origin: center bottom; animation: suds-frog-breath 6.8s ease-in-out infinite; }
.suds-frog-bubble { animation: suds-frog-bubble-rise 6.8s ease-in-out infinite; }
@keyframes suds-frog-blink {
  0%, 25%, 29%, 67%, 71%, 100% { transform: scaleY(1); }
  27%, 69% { transform: scaleY(.16); }
}
@keyframes suds-frog-breath {
  0%, 32%, 58%, 100% { transform: scale(1); }
  45% { transform: scale(1.09, 1.15); }
}
@keyframes suds-frog-bubble-rise {
  0%, 22%, 92%, 100% { transform: translate(0, 0); opacity: .85; }
  48%, 68% { transform: translate(1px, -2px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .suds-frog-eyes, .suds-frog-throat, .suds-frog-bubble { animation: none; }
}

.suds-jet-aerial { animation: suds-jet-aerial 5.8s ease-in-out infinite; }
.suds-jet-eyes { transform-origin: 24px 24px; animation: suds-jet-blink 6.9s linear infinite; }
.suds-jet-hand { transform-origin: 40px 29px; animation: suds-jet-wave 7.4s ease-in-out infinite; }
@keyframes suds-jet-aerial {
  0%, 100% { transform: translateY(0); }
  38%, 62% { transform: translateY(-2px); }
}
@keyframes suds-jet-blink {
  0%, 47%, 51%, 100% { transform: scaleY(1); }
  49% { transform: scaleY(.15); }
}
@keyframes suds-jet-wave {
  0%, 10%, 27%, 100% { transform: rotate(0); }
  14%, 21% { transform: rotate(-12deg); }
  17%, 24% { transform: rotate(-5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .suds-jet-aerial, .suds-jet-eyes, .suds-jet-hand { animation: none; }
}
.suds-avatar-static svg * { animation: none !important; }