:root {
  color-scheme: dark;
  --bg: #000;
  --raised: #080a0b;
  --surface: #101315;
  --surface-2: #171b1e;
  --hover: #20262a;
  --line: #2a3035;
  --line-strong: #424b52;
  --text: #f4f7f8;
  --soft: #aab4ba;
  --muted: #6f7b82;
  --active: #20c884;
  --active-dim: #0a3225;
  --info: #55aef3;
  --info-dim: #0b2940;
  --warning: #ffcd4a;
  --warning-dim: #382b08;
  --danger: #ff5864;
  --danger-dim: #3b1015;
  --font: "Aptos", "IBM Plex Sans", "Segoe UI", sans-serif;
  --mono: "Berkeley Mono", "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { background: var(--bg); font: 100%/1.45 var(--font); }
body { margin: 0; color: var(--text); background: var(--bg); min-height: 100vh; overflow-x: hidden; }
button, input, select { font: inherit; color: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }

.topbar { position: fixed; inset: 0 0 auto; z-index: 20; height: 4.25rem; display: grid; grid-template-columns: 15rem 1fr 15rem; align-items: center; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.94); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: .7rem; padding: 0 1.25rem; font: 700 .78rem/1 var(--mono); letter-spacing: .1em; }
.brand-mark { display: grid; place-items: center; width: 2rem; height: 2rem; color: #00180f; background: var(--active); border-radius: .4rem; font: 900 .83rem/1 var(--mono); box-shadow: inset 0 1px rgba(255,255,255,.35); }
.command-status { justify-self: center; min-width: 20rem; display: flex; align-items: center; justify-content: center; gap: .65rem; color: var(--soft); border: 1px solid var(--line); background: var(--raised); padding: .55rem .85rem; border-radius: .55rem; font: 500 .78rem/1 var(--mono); }
.command-status kbd { margin-left: auto; color: var(--muted); border: 1px solid var(--line); padding: .2rem .4rem; border-radius: .25rem; font: inherit; }
.live-dot { width: .47rem; height: .47rem; border-radius: 50%; background: var(--active); box-shadow: 0 0 0 .2rem var(--active-dim); }
.account-menu { position: relative; grid-column: 3; justify-self: end; margin-right: .75rem; }
.account-menu > summary { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .3rem .5rem; border: 1px solid transparent; border-radius: .5rem; color: var(--soft); cursor: pointer; font-size: .82rem; list-style: none; transition: background 120ms ease-out, border-color 120ms ease-out, transform 90ms ease-out; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary:hover, .account-menu[open] > summary { color: var(--text); background: var(--surface); border-color: var(--line); }
.account-menu > summary:active { transform: scale(.98); }
.account-popover { position: absolute; top: calc(100% + .45rem); right: 0; width: 15rem; padding: .45rem; border: 1px solid var(--line-strong); border-radius: .65rem; background: rgba(18,21,23,.96); box-shadow: 0 1.2rem 3rem rgba(0,0,0,.55); transform-origin: top right; }
.account-popover > div { display: grid; gap: .1rem; padding: .65rem .7rem .75rem; border-bottom: 1px solid var(--line); }
.account-popover strong { font-size: .82rem; }.account-popover small { overflow: hidden; color: var(--muted); font-size: .69rem; text-overflow: ellipsis; }
.account-popover > a, .account-popover button { display: flex; align-items: center; width: 100%; min-height: 2.35rem; border: 0; border-radius: .4rem; background: transparent; color: var(--soft); cursor: pointer; text-align: left; padding: .5rem .7rem; font-size: .78rem; font-weight: 650; }.account-popover > a { margin-top: .35rem; }.account-popover > a:hover, .account-popover button:hover { color: var(--text); background: var(--hover); }
.avatar { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text); font: 700 .68rem/1 var(--mono); }

.auth-page { min-height: 100vh; background: #050606; }
.auth-topbar { height: 4.25rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: #000; }
.auth-topbar > span { margin-right: 1.25rem; color: var(--muted); font: 700 .62rem/1 var(--mono); letter-spacing: .12em; }
.auth-shell { width: min(70rem, calc(100% - 2rem)); min-height: calc(100vh - 4.25rem); margin: auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 27rem); align-items: center; gap: clamp(2rem, 7vw, 7rem); padding: 4rem 0; }
.auth-context { align-self: center; }.auth-context h1 { margin: .8rem 0 1.2rem; max-width: 42rem; font-size: clamp(2.4rem, 5.5vw, 4.9rem); line-height: .94; letter-spacing: -.055em; }.auth-context > p { max-width: 35rem; color: var(--soft); font-size: 1rem; line-height: 1.65; }
.auth-context ul { display: grid; gap: 0; max-width: 34rem; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }.auth-context li { display: flex; align-items: center; gap: 1rem; min-height: 3rem; border-bottom: 1px solid var(--line); color: var(--soft); font-size: .8rem; }.auth-context li span { color: var(--active); font: 700 .64rem/1 var(--mono); }
.auth-panel { border: 1px solid var(--line-strong); border-radius: .85rem; padding: clamp(1.35rem, 4vw, 2rem); background: var(--raised); box-shadow: 0 1.5rem 5rem rgba(0,0,0,.38); }.auth-panel h2 { margin: 1.35rem 0 .35rem; font-size: 1.75rem; line-height: 1.05; letter-spacing: -.035em; }.auth-panel > p { margin: 0; color: var(--muted); font-size: .82rem; }
.auth-status { display: inline-flex; align-items: center; gap: .55rem; color: var(--soft); font: 650 .65rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.auth-form { display: grid; gap: .95rem; margin-top: 1.5rem; }.auth-form label { position: relative; font-size: .76rem; }.auth-form input { min-height: 2.85rem; background: #050606; }.auth-form .button { min-height: 2.85rem; margin-top: .25rem; }.auth-form .field-hint { position: absolute; top: 0; right: 0; color: var(--muted); font-size: .66rem; font-weight: 500; }
.auth-error { margin-top: 1.1rem; padding: .72rem .8rem; color: #ffc5ca; border: 1px solid #74313a; border-radius: .45rem; background: var(--danger-dim); font-size: .76rem; }
.auth-notice { margin-top: 1.1rem; padding: .72rem .8rem; color: #a2edcc; border: 1px solid #2f7659; border-radius: .45rem; background: var(--active-dim); font-size: .76rem; }
.auth-switch { margin-top: 1.25rem !important; text-align: center; }.auth-switch a { color: var(--info); font-weight: 700; }.auth-switch a:hover { text-decoration: underline; }
.back-console { margin-right: 1.25rem; color: var(--soft); font-size: .78rem; }.back-console:hover { color: var(--text); }
.settings-shell { width: min(64rem, calc(100% - 2rem)); margin: auto; padding: clamp(3rem, 8vw, 6rem) 0; }.settings-head { padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }.settings-head h1 { margin: .65rem 0 .35rem; font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1; letter-spacing: -.05em; }.settings-head p { margin: 0; color: var(--muted); }
.settings-grid { display: grid; grid-template-columns: minmax(16rem, .8fr) minmax(22rem, 1fr); gap: 2rem; align-items: start; padding-top: 2rem; }.identity-panel { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1rem 0; }.avatar.large { width: 3rem; height: 3rem; font-size: .85rem; }.identity-panel h2 { margin: .2rem 0; font-size: 1.15rem; }.identity-panel p { margin: 0; color: var(--muted); font-size: .78rem; }.identity-panel dl { grid-column: 1 / -1; margin: 1rem 0 0; border-top: 1px solid var(--line); }.identity-panel dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: .75rem; }.identity-panel dt { color: var(--muted); }.identity-panel dd { margin: 0; color: var(--soft); font-family: var(--mono); }.settings-panel { box-shadow: none; }

.shell { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100vh; padding-top: 4.25rem; }
.sidebar { position: fixed; top: 4.25rem; bottom: 0; width: 15rem; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--raised); overflow-y: auto; }
.side-label, .eyebrow { color: var(--muted); font: 700 .67rem/1.2 var(--mono); letter-spacing: .11em; }
.side-label { padding: 1.1rem 1rem .65rem; }
.pet-list { padding: 0 .55rem; }
.pet-link { display: flex; align-items: center; gap: .7rem; min-height: 3.35rem; padding: .45rem .65rem; border-radius: .5rem; color: var(--soft); border: 1px solid transparent; transition: background 120ms ease-out, color 120ms ease-out, transform 90ms ease-out; }
.pet-link:hover { background: var(--surface); color: var(--text); }
.pet-link:active { transform: scale(.985); }
.pet-link.active { color: var(--text); background: var(--surface-2); border-color: var(--line); box-shadow: inset 3px 0 var(--active); }
.pet-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--line-strong); border-radius: 50%; background: #202427; font: 700 .65rem/1 var(--mono); }
.pet-link span:last-child { display: grid; gap: .08rem; }
.pet-link b { font-size: .88rem; }.pet-link small { color: var(--muted); font-size: .72rem; }
.add-pet { margin: .6rem; border-top: 1px solid var(--line); }
.add-pet summary { cursor: pointer; list-style: none; padding: .8rem .65rem; color: var(--soft); font-size: .82rem; font-weight: 650; }
.stack-form { display: grid; gap: .65rem; padding: 0 .65rem 1rem; }
label { display: grid; gap: .32rem; color: var(--soft); font-size: .72rem; font-weight: 650; }
input, select { width: 100%; min-height: 2.45rem; border: 1px solid var(--line); border-radius: .42rem; background: #090b0c; padding: .55rem .65rem; }
input::placeholder { color: #586168; }
.button { border: 1px solid var(--line-strong); min-height: 2.5rem; border-radius: .45rem; padding: .55rem .8rem; cursor: pointer; font-weight: 700; transition: transform 90ms ease-out, background 120ms ease-out; }
.button:active, .send-button:active, .quiet-action:active { transform: scale(.97); }
.button.primary { background: var(--text); color: #060708; border-color: var(--text); }
.button.secondary { background: var(--surface-2); color: var(--text); }
.button:hover { background: var(--hover); color: var(--text); }
.side-footer { margin-top: auto; display: flex; justify-content: space-between; padding: 1rem; border-top: 1px solid var(--line); color: var(--muted); font: 600 .6rem/1 var(--mono); letter-spacing: .08em; }

.workspace { grid-column: 2; min-width: 0; padding: 1.6rem clamp(1rem, 2.5vw, 2.25rem) 6rem; }
.pet-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; padding: .7rem 0 1.3rem; border-bottom: 1px solid var(--line); }
.pet-header h1 { margin: .35rem 0 .15rem; font-size: clamp(2rem, 4vw, 3.1rem); line-height: .98; letter-spacing: -.045em; }
.pet-header p { margin: 0; color: var(--muted); font-size: .9rem; }
.record-state { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; color: var(--soft); border: 1px solid var(--line); border-radius: .35rem; background: var(--raised); font: 600 .7rem/1 var(--mono); text-transform: uppercase; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.metrics > div, .metrics > a.metric-link { display: grid; align-content: center; min-height: 6.2rem; padding: .9rem 1.1rem; border-right: 1px solid var(--line); }
.metrics > div:first-child { padding-left: 0; }.metrics > :last-child { border: 0; }
.metrics small { color: var(--muted); font: 700 .62rem/1 var(--mono); letter-spacing: .12em; }
.metrics strong { margin: .25rem 0; font-size: 1.45rem; line-height: 1.15; letter-spacing: -.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metrics span { color: var(--muted); font-size: .72rem; }
.metric-link { color: inherit; transition: background 120ms ease-out; }.metric-link:hover { background: var(--surface); }.metric-link:hover span { color: var(--info); }

.tab-bar { display: flex; gap: .3rem; overflow-x: auto; margin-top: 1.1rem; padding-bottom: .1rem; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tab-bar::-webkit-scrollbar { display: none; }
.tab-link { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 2.65rem; padding: 0 .9rem; border-bottom: 2px solid transparent; color: var(--muted); font: 650 .8rem/1 var(--font); white-space: nowrap; transition: color 120ms ease-out, border-color 120ms ease-out; }
.tab-link:hover { color: var(--text); }
.tab-link.active { color: var(--text); border-color: var(--active); }
.tab-body { min-width: 0; }
.plan-tab, .labs-tab, .sharing-tab { margin-top: 1.3rem; }
.plan-primary { border-top: 0; }
.plan-log { padding: 1rem 0; border-top: 1px solid var(--line); }
.plan-log .side-label { padding: 0; }
.plan-log h3 { margin: .6rem 0 .3rem; color: var(--soft); font-size: .95rem; letter-spacing: -.015em; }
.plan-log p { margin: 0; color: var(--muted); font-size: .74rem; }
.plan-add { margin: .8rem 0; border: 1px solid var(--line); border-radius: .5rem; background: var(--surface); }
.plan-add > summary { display: flex; align-items: center; gap: .6rem; padding: .65rem .75rem; color: var(--soft); cursor: pointer; list-style: none; }
.plan-add > summary::-webkit-details-marker { display: none; }
.plan-add > summary > span:last-child { display: grid; gap: .1rem; }
.plan-add > summary b { color: var(--text); font-size: .76rem; }
.plan-add > summary small { color: var(--muted); font-size: .64rem; }
.plan-add .tracker-form { padding: 0 .8rem .8rem; }
.knowledge-panel { margin-top: 2rem; border: 1px solid var(--line); border-radius: .7rem; overflow: hidden; background: var(--raised); }
.agent-and-timeline { margin-top: 1.3rem; }
.agent-capture { position: relative; overflow: hidden; border: 1px solid var(--line-strong); border-radius: .72rem; background: linear-gradient(135deg, #111719 0%, #0c1011 62%, #081710 100%); box-shadow: 0 1.2rem 4rem rgba(0,0,0,.32); }
.agent-capture::after { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(32,200,132,.7), transparent); }
.agent-label { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem .55rem; }
.agent-label > span:nth-child(2) { display: grid; }.agent-label b { font-size: .82rem; }.agent-label small { color: var(--muted); font-size: .7rem; }
.agent-orb { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; color: var(--active); border: 1px solid #275e49; border-radius: 50%; background: #0b2219; }
.htmx-indicator { opacity: 0; margin-left: auto; color: var(--active); font: 700 .62rem/1 var(--mono); letter-spacing: .08em; transition: opacity 100ms; }.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.capture-row { display: grid; grid-template-columns: minmax(0, 1fr) 2.9rem; gap: .55rem; min-width: 0; padding: 0 1rem; }
.capture-row input { min-width: 0; min-height: 3.25rem; border-color: var(--line-strong); background: rgba(0,0,0,.65); font-size: 1rem; }
.send-button { border: 0; border-radius: .48rem; background: var(--active); color: #00170f; cursor: pointer; font-size: 1.25rem; font-weight: 900; transition: transform 90ms ease-out, filter 120ms; }.send-button:hover { filter: brightness(1.12); }
.capture-help { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 1rem .75rem; color: var(--muted); font: .63rem/1.3 var(--mono); }
.capture-help span:first-child { color: var(--active); }
.capture-result { display: flex; align-items: center; gap: .55rem; padding: .7rem 1rem; border-top: 1px solid; font-size: .78rem; }.capture-result.success { color: #a2edcc; border-color: #1e654a; background: rgba(11,54,39,.68); }.capture-result.error { color: #ffc5ca; border-color: #74313a; background: rgba(62,14,20,.72); }

.assistant-workbench { position: relative; margin-top: 1rem; padding: .9rem; border: 1px solid #315b4a; border-radius: .72rem; background: linear-gradient(135deg, rgba(15,29,24,.96), rgba(8,13,13,.98) 68%, rgba(8,24,18,.98)); box-shadow: 0 .8rem 2.5rem rgba(0,0,0,.22); }
.assistant-workbench::after { content: ""; position: absolute; inset: 0 20% auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(32,200,132,.8), transparent); }
.assistant-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.assistant-title-wrap { display: flex; align-items: center; gap: .65rem; min-width: 0; }.assistant-title-wrap .side-label { display: block; padding: 0; color: #75cfa8; }.assistant-title-wrap h2 { margin: .25rem 0 0; font-size: 1.15rem; letter-spacing: -.025em; }.assistant-orb { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border: 1px solid #327b5a; border-radius: 50%; color: var(--active); background: #0a251a; font-size: .95rem; box-shadow: 0 0 .8rem rgba(32,200,132,.12); }.assistant-scope { flex: 0 0 auto; color: var(--muted); font: .62rem/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; }.assistant-scope b { color: var(--soft); }
.assistant-form { margin-top: .85rem; }.assistant-compose-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 2.9rem; gap: .5rem; align-items: stretch; }.assistant-mode-switch { display: flex; align-items: stretch; padding: .2rem; border: 1px solid var(--line-strong); border-radius: .48rem; background: rgba(0,0,0,.35); }.assistant-mode { min-width: 4.1rem; border: 0; border-radius: .3rem; color: var(--muted); background: transparent; cursor: pointer; font: 700 .64rem/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; }.assistant-mode:hover { color: var(--soft); }.assistant-mode.active { color: #00170f; background: var(--active); }.assistant-input-label { min-width: 0; }.assistant-input-label textarea { display: block; width: 100%; min-height: 3.25rem; height: 100%; resize: vertical; border-color: var(--line-strong); border-radius: .48rem; background: rgba(0,0,0,.62); padding: .75rem .8rem; color: var(--text); font-size: .88rem; line-height: 1.35; }.assistant-input-label textarea:focus { border-color: #3f9b72; box-shadow: 0 0 0 .15rem rgba(32,200,132,.1); }.assistant-send { border: 0; border-radius: .48rem; background: var(--active); color: #00170f; cursor: pointer; font-size: 1.25rem; font-weight: 900; transition: transform 90ms ease-out, filter 120ms; }.assistant-send:hover { filter: brightness(1.12); }.assistant-send:active { transform: scale(.96); }
.assistant-examples { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .45rem; margin-top: .55rem; }.assistant-examples button, .assistant-suggestions button { border: 1px solid #315b4a; border-radius: 99px; padding: .3rem .5rem; color: #8fcdb1; background: rgba(10,31,23,.55); cursor: pointer; font: .61rem/1 var(--mono); }.assistant-examples button:hover, .assistant-suggestions button:hover { color: var(--text); border-color: #55a980; background: rgba(22,66,47,.72); }.assistant-contract { margin-left: auto; color: var(--muted); font: .59rem/1.3 var(--mono); }.assistant-processing { display: none; color: var(--active); }.assistant-form.htmx-request .assistant-processing { display: inline; }.assistant-form.htmx-request .assistant-send { cursor: wait; opacity: .7; }
.assistant-thread { display: grid; gap: .4rem; max-height: 12rem; margin-top: .8rem; overflow: auto; padding-top: .7rem; border-top: 1px solid rgba(49,91,74,.65); }.assistant-turn { max-width: 78%; padding: .5rem .65rem; border-radius: .42rem; font-size: .72rem; }.assistant-turn.user { justify-self: end; color: var(--text); background: #17251f; border: 1px solid #2c6048; }.assistant-turn.assistant { justify-self: start; color: var(--soft); background: rgba(9,17,15,.75); border: 1px solid var(--line); }.assistant-turn-label { display: block; margin-bottom: .2rem; color: var(--muted); font: 700 .55rem/1 var(--mono); letter-spacing: .1em; }.assistant-turn p { margin: 0; line-height: 1.45; }
.assistant-reply { margin-top: .8rem; padding: .75rem; border: 1px solid #2f7659; border-radius: .5rem; background: rgba(10,38,28,.58); }.assistant-reply.clarification { border-color: #665a2a; background: rgba(44,37,12,.42); }.assistant-reply.safety { border-color: #74313a; background: rgba(62,14,20,.4); }.assistant-reply-head { display: flex; align-items: flex-start; gap: .6rem; }.assistant-reply-head .side-label { display: block; padding: 0; color: #8fd7b4; }.assistant-reply.safety .assistant-reply-head .side-label { color: #ffc5ca; }.assistant-reply-head h3 { margin: .3rem 0 0; color: var(--text); font-size: .82rem; font-weight: 600; line-height: 1.45; }.assistant-reply-mark { display: grid; flex: 0 0 auto; place-items: center; width: 1.35rem; height: 1.35rem; border: 1px solid #327b5a; border-radius: .3rem; color: var(--active); font: 800 .78rem/1 var(--mono); }.assistant-reply.safety .assistant-reply-mark { color: #ffc5ca; border-color: #74313a; }.assistant-label { display: block; margin-bottom: .35rem; color: var(--muted); font: 700 .55rem/1 var(--mono); letter-spacing: .1em; }.assistant-evidence, .assistant-suggestions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; padding-top: .65rem; border-top: 1px solid rgba(49,91,74,.55); }.assistant-evidence-chip { display: grid; gap: .15rem; min-width: 6.2rem; padding: .4rem .45rem; border: 1px solid #315b4a; border-radius: .32rem; color: #b9e4ce; background: rgba(6,20,14,.58); font: 700 .62rem/1 var(--mono); }.assistant-evidence-chip:hover { border-color: #67c797; color: var(--text); }.assistant-evidence-chip small { color: var(--muted); font: .57rem/1.2 var(--mono); }.assistant-suggestions { align-items: center; }.assistant-suggestions .assistant-label { margin: 0 .2rem 0 0; }
.medication-change-review { margin-top: .8rem; padding: .85rem; border: 1px solid #8a7130; border-radius: .55rem; background: linear-gradient(145deg, rgba(51,42,14,.68), rgba(17,19,15,.92)); box-shadow: inset 0 1px rgba(255,229,157,.06); }
.medication-change-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .65rem; align-items: start; }.medication-change-head .side-label { display: block; padding: 0; color: #e0c875; }.medication-change-head h3 { margin: .28rem 0 0; color: var(--text); font-size: .95rem; }.medication-change-mark { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border: 1px solid #8a7130; border-radius: .32rem; color: #f0d77f; background: rgba(75,59,12,.5); font: 800 .8rem/1 var(--mono); }.medication-change-status { padding: .3rem .42rem; border: 1px solid #765f25; border-radius: 99px; color: #e0c875; font: 700 .55rem/1 var(--mono); letter-spacing: .08em; }
.medication-change-intro { margin: .7rem 0 0; color: var(--soft); font-size: .75rem; line-height: 1.5; }.medication-change-form { display: grid; grid-template-columns: 1.2fr .65fr .65fr 1fr; gap: .6rem; margin-top: .8rem; }.medication-change-form label { display: grid; gap: .3rem; min-width: 0; color: #d4c99f; font-size: .65rem; font-weight: 700; }.medication-change-form label > span { color: var(--muted); font-size: .57rem; font-weight: 500; }.medication-change-form input, .medication-change-form textarea { width: 100%; min-width: 0; border: 1px solid #5e542f; border-radius: .4rem; background: rgba(4,6,5,.8); padding: .55rem .6rem; color: var(--text); }.medication-change-form textarea { resize: vertical; }.medication-change-form input:focus, .medication-change-form textarea:focus { border-color: #c3a947; box-shadow: 0 0 0 .14rem rgba(195,169,71,.1); }.medication-change-form .full-width { grid-column: 1 / -1; }
.medication-change-impact { padding: .7rem; border: 1px solid rgba(138,113,48,.58); border-radius: .42rem; background: rgba(31,27,12,.5); }.medication-change-impact ul { display: grid; gap: .35rem; margin: .45rem 0 0; padding-left: 1.05rem; color: var(--soft); font-size: .68rem; line-height: 1.4; }.medication-change-boundary { margin: 0; color: var(--muted); font-size: .62rem; line-height: 1.4; }.medication-change-actions { display: flex; align-items: center; gap: .5rem; }.medication-change-actions .button { min-height: 2.35rem; font-size: .7rem; }.medication-change-form.htmx-request .assistant-processing { display: inline; }.medication-change-form.htmx-request button { pointer-events: none; opacity: .68; }

.timeline-region { margin-top: 2rem; }
.section-head { display: flex; align-items: end; justify-content: space-between; padding-bottom: .75rem; border-bottom: 1px solid var(--line-strong); }.section-head h2 { margin: .2rem 0 0; font-size: 1.25rem; letter-spacing: -.02em; }.section-head > span { color: var(--muted); font: .68rem/1 var(--mono); }
.timeline { padding-top: .25rem; }
.event-row { display: grid; grid-template-columns: 2.6rem 1fr auto; min-height: 7rem; border-bottom: 1px solid var(--line); padding: 1rem 0; }
.event-rail { position: relative; display: flex; justify-content: center; }.event-rail i { position: absolute; top: 2rem; bottom: -1.25rem; width: 1px; background: var(--line); }.event-row:last-child .event-rail i { display: none; }
.event-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--line-strong); border-radius: .38rem; background: var(--surface); font: 800 .85rem/1 var(--mono); }.event-icon.warning { color: var(--warning); border-color: #755f20; background: var(--warning-dim); }.event-icon.info { color: var(--info); border-color: #285b7d; background: var(--info-dim); }.event-icon.active { color: var(--active); border-color: #246b50; background: var(--active-dim); }
.event-body { min-width: 0; padding: 0 .8rem; }.event-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; color: var(--muted); font: .63rem/1 var(--mono); text-transform: uppercase; }.type { border: 1px solid var(--line); border-radius: 99px; padding: .25rem .42rem; }.type.warning { color: var(--warning); border-color: #5b4b1e; }.type.info { color: var(--info); border-color: #254e69; }.type.active { color: var(--active); border-color: #246b50; }
.event-body h3 { margin: .55rem 0 .18rem; font-size: .95rem; overflow-wrap: anywhere; }.event-body p { margin: 0; color: var(--soft); font-size: .82rem; }.event-body small { display: block; margin-top: .45rem; color: var(--muted); }
.event-label-editor { width: min(100%, 34rem); margin-top: .55rem; }.event-label-editor > summary { width: max-content; cursor: pointer; list-style: none; color: var(--muted); font: 700 .62rem/1 var(--mono); letter-spacing: .02em; }.event-label-editor > summary::-webkit-details-marker { display: none; }.event-label-editor > summary::before { content: "✎ "; color: var(--active); }.event-label-editor > summary:hover, .event-label-editor > summary:focus-visible { color: var(--text); }.event-label-editor[open] > summary { margin-bottom: .55rem; color: var(--active); }
.event-label-editor form { padding: .7rem; border: 1px solid #315b4a; border-radius: .42rem; background: rgba(7,18,14,.78); }.event-label-editor label { display: block; margin-bottom: .35rem; color: var(--muted); font: 700 .58rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }.event-label-fields { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: .4rem; }.event-label-fields input { min-width: 0; border-color: #315b4a; }.event-label-fields .button, .event-label-fields .quiet-action { min-height: 2.35rem; }.event-label-note { margin-top: .45rem !important; font-size: .6rem; line-height: 1.4; }.event-label-status:empty { display: none; }.event-label-status .inline-error { margin: .55rem 0 0; padding: .55rem; font-size: .65rem; }
.quiet-action { border: 1px solid transparent; background: transparent; color: var(--muted); border-radius: .35rem; padding: .4rem .55rem; cursor: pointer; font-size: .7rem; transition: color 120ms, border 120ms, transform 90ms; }.quiet-action:hover { color: var(--text); border-color: var(--line); }.quiet-action.danger:hover { color: var(--danger); border-color: #71313a; }
.timeline-empty, .zero-state { display: grid; justify-items: center; text-align: center; padding: 4rem 1rem; color: var(--muted); }.timeline-empty > span, .zero-glyph { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border: 1px dashed var(--line-strong); border-radius: 50%; font: 600 1.1rem/1 var(--mono); }.timeline-empty h3, .zero-state h1 { margin: 1rem 0 .3rem; color: var(--text); }.timeline-empty p, .zero-state p { max-width: 31rem; margin: 0; }
.timeline-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 .2rem; }
.chip { min-height: 1.85rem; padding: 0 .75rem; border: 1px solid var(--line-strong); border-radius: 99px; background: transparent; color: var(--muted); cursor: pointer; font: 650 .68rem/1 var(--mono); letter-spacing: .02em; transition: color 120ms, border-color 120ms, background 120ms; }
.chip:hover { color: var(--text); border-color: var(--line-strong); }
.chip.active { color: var(--text); border-color: var(--active); background: var(--active-dim); }
.event-row[hidden] { display: none; }
.timeline-day { padding: .9rem 0 .4rem; color: var(--muted); font: 700 .65rem/1 var(--mono); letter-spacing: .1em; text-align: center; }
.timeline-more { display: flex; justify-content: center; padding: 1rem 0; }
.timeline-more .load-more { border-color: var(--line-strong); }

.knowledge-card { padding: 1rem; border-bottom: 1px solid var(--line); }.concept-line { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font: .6rem/1 var(--mono); letter-spacing: .08em; }.concept-line code { color: var(--warning); background: var(--warning-dim); border: 1px solid #594719; padding: .24rem .4rem; border-radius: .25rem; }.knowledge-card h2, .share-box h2 { margin: 1rem 0 .5rem; font-size: 1.15rem; letter-spacing: -.025em; }.knowledge-card p, .share-box p { color: var(--soft); font-size: .78rem; }.knowledge-card h3 { margin: 1.2rem 0 .3rem; color: var(--muted); font: 700 .65rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }.knowledge-card > a { color: var(--info); font-size: .72rem; }
.urgent { margin: 1rem 0; border-left: 2px solid var(--danger); background: var(--danger-dim); padding: .7rem .8rem; }.urgent b { color: var(--danger); font-size: .72rem; }.urgent p { margin: .3rem 0 0; color: #f3c2c6; }
.linked-events { display: flex; gap: .75rem; padding: 1rem; border-bottom: 1px solid var(--line); }.linked-events strong { font: 500 2rem/1 var(--mono); }.linked-events span { display: grid; color: var(--soft); font-size: .75rem; }.linked-events small { color: var(--muted); }
.context-empty { display: grid; justify-items: center; gap: .8rem; padding: 3rem 1.5rem; text-align: center; color: var(--muted); }.context-empty span { font-size: 2rem; }
.share-box { padding: 1rem; }.share-box .side-label { padding: 0; }.share-form { display: grid; grid-template-columns: 1fr 5.5rem; gap: .65rem; }.share-form .button { grid-column: 1 / -1; }
.mcp-connect { margin: .8rem; padding: 1rem; border: 1px solid #2f7659; border-radius: .55rem; background: linear-gradient(145deg, rgba(10,47,34,.8), rgba(8,16,15,.9)); box-shadow: 0 .8rem 2rem rgba(0,0,0,.18); }.mcp-connect-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }.mcp-connect h2 { margin: .8rem 0 .45rem; font-size: 1rem; letter-spacing: -.02em; }.mcp-connect p { margin: 0; color: var(--soft); font-size: .75rem; line-height: 1.45; }.mcp-connect p strong { color: var(--text); }.mcp-ready { color: var(--active); font: 700 .58rem/1 var(--mono); letter-spacing: .08em; }.mcp-prompt-row { display: grid; gap: .45rem; margin-top: .8rem; }.mcp-prompt-row textarea { width: 100%; resize: vertical; min-height: 6.1rem; border: 1px solid #2f7659; border-radius: .42rem; background: rgba(0,0,0,.55); padding: .65rem; color: var(--text); font: .68rem/1.45 var(--mono); }.mcp-prompt-row .button { width: 100%; }.mcp-url-label { margin-top: .85rem !important; font-size: .68rem !important; }.mcp-url-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem; margin-top: .45rem; }.mcp-url-row input { min-width: 0; color: var(--text); font: .65rem/1 var(--mono); }.mcp-url-row .button { min-height: 2.45rem; padding-inline: .65rem; }.mcp-client-list { display: flex; flex-wrap: wrap; gap: .3rem .55rem; margin-top: .7rem; color: var(--muted); font: 600 .56rem/1 var(--mono); letter-spacing: .06em; }.mcp-help { margin-top: .8rem; border-top: 1px solid rgba(47,118,89,.45); padding-top: .65rem; color: var(--soft); }.mcp-help summary { cursor: pointer; color: var(--text); font-size: .7rem; font-weight: 700; }.mcp-help p { margin-top: .55rem; font-size: .7rem; }.mcp-help a { color: var(--info); }
.tracker-box { padding: 1rem; border-top: 1px solid var(--line); }.tracker-box .side-label { padding: 0; }.tracker-box h2 { margin: 1rem 0 .5rem; font-size: 1.15rem; letter-spacing: -.025em; }.tracker-box p { color: var(--soft); font-size: .78rem; }.tracker-form { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }.tracker-form .full-width { grid-column: 1 / -1; }.field-hint { float: right; color: var(--muted); font-weight: 500; }.tracker-empty { color: var(--muted) !important; }.weight-list, .lab-list { margin-top: 1rem; border-top: 1px solid var(--line); }.weight-row { display: flex; justify-content: space-between; gap: .8rem; padding: .65rem 0; border-bottom: 1px solid var(--line); }.weight-row strong { color: var(--active); font: 700 .82rem/1 var(--mono); }.weight-row span { display: grid; color: var(--muted); font: .64rem/1.3 var(--mono); text-align: right; }.weight-row small { color: var(--soft); font: .7rem/1.3 var(--sans); }.lab-box code { color: var(--warning); font: .68rem/1 var(--mono); }.lab-report { padding: .8rem 0; border-top: 1px solid var(--line); }.lab-report-head { display: flex; justify-content: space-between; gap: .5rem; }.lab-report-head strong { color: var(--text); font: 700 .72rem/1 var(--mono); }.lab-report-head small { max-width: 9rem; overflow: hidden; color: var(--muted); font: .6rem/1.2 var(--mono); text-overflow: ellipsis; white-space: nowrap; }.lab-report p { margin: .6rem 0 0; color: var(--muted); }.lab-results { margin-top: .6rem; }.lab-results > div { display: grid; grid-template-columns: 1fr auto auto; gap: .45rem; padding: .35rem 0; border-bottom: 1px solid var(--line); font-size: .7rem; }.lab-results span { color: var(--soft); }.lab-results strong { color: var(--text); font-family: var(--mono); }.lab-results b { color: var(--warning); font: 700 .63rem/1 var(--mono); text-transform: uppercase; }
.lab-trends { margin: 1rem 0 0; padding: .85rem; border: 1px solid #315b77; border-radius: .55rem; background: linear-gradient(145deg, rgba(13,31,42,.92), rgba(8,13,16,.96)); box-shadow: 0 .8rem 2rem rgba(0,0,0,.18); }.lab-trends-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }.lab-trends .side-label { padding: 0; color: #7ebce2; }.lab-trends h3 { margin: .35rem 0 0; font-size: 1rem; letter-spacing: -.02em; }.trend-pulse { width: .55rem; height: .55rem; border-radius: 50%; background: var(--info); box-shadow: 0 0 0 .28rem rgba(85,174,243,.13); }.trend-intro { margin: .7rem 0 .85rem; color: #a9c6d8 !important; font-size: .72rem !important; }.trend-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }.trend-controls label { color: #9fc2d8; }.trend-controls select { border-color: #315b77; background: rgba(0,0,0,.45); }.trend-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .65rem; min-height: 1.1rem; color: var(--soft); font: .62rem/1.35 var(--mono); }.trend-summary strong { color: var(--text); }.trend-chart { position: relative; min-height: 15rem; height: clamp(15rem, min(58vh, 62vw), 36rem); }.trend-chart svg { display: block; width: 100%; height: 100%; }.trend-chart .chart-grid { stroke: rgba(126,188,226,.18); stroke-width: 1; }.trend-chart .chart-axis { fill: var(--muted); font: 9px var(--mono); }.trend-chart .chart-line { fill: none; stroke: #62c7ff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }/* No `fill` here: each chart builds its own gradient (`trend-fill-<marker>`) and
   sets it as a presentation attribute. A `fill` declaration would win over that
   attribute and resolve to a gradient that does not exist, so the area under the
   line would silently never paint. */
.trend-chart .chart-area { pointer-events: none; }.trend-chart .chart-dot { fill: #07151e; stroke: #8bd7ff; stroke-width: 2; }.trend-chart .chart-dot.flagged { stroke: var(--warning); }.trend-chart .chart-band { fill: rgba(90,201,138,.16); }.trend-chart .chart-flag { fill: var(--warning); font: 700 8px var(--mono); text-transform: uppercase; }.trend-chart .chart-empty { display: grid; place-items: center; min-height: 10rem; padding: 1rem; color: var(--muted); font-size: .72rem; text-align: center; }.trend-table-wrap { margin-top: .7rem; max-height: 11rem; overflow: auto; border-top: 1px solid rgba(49,91,119,.7); }.trend-table { width: 100%; border-collapse: collapse; font: .62rem/1.3 var(--mono); }.trend-table th { position: sticky; top: 0; padding: .5rem .2rem .4rem; color: #7ebce2; background: #0c1a23; font-weight: 700; text-align: left; }.trend-table td { padding: .4rem .2rem; border-top: 1px solid rgba(49,91,119,.45); color: var(--soft); }.trend-table td:nth-child(2) { color: var(--text); text-align: right; }.trend-table td:nth-child(3) { max-width: 5rem; overflow: hidden; color: var(--muted); text-overflow: ellipsis; text-align: right; white-space: nowrap; }.trend-points { display: none; }.lab-report-summary { display: flex; align-items: center; justify-content: space-between; gap: .55rem; cursor: pointer; list-style: none; }.lab-report-summary::-webkit-details-marker { display: none; }.lab-report-summary > span { display: grid; gap: .25rem; min-width: 0; }.lab-report-summary strong { color: var(--text); font: 700 .72rem/1 var(--mono); }.lab-report-summary small { overflow: hidden; color: var(--muted); font: .6rem/1.2 var(--mono); text-overflow: ellipsis; white-space: nowrap; }.lab-report-summary em { flex: 0 0 auto; color: var(--muted); font: normal .58rem/1 var(--mono); }.lab-report-summary::after { content: "+"; flex: 0 0 auto; color: var(--info); font: 700 .9rem/1 var(--mono); }.lab-report[open] .lab-report-summary::after { content: "−"; }.lab-report-body { padding-top: .25rem; }
.shares-region { margin-top: 1rem; border-top: 1px solid var(--line); }.share-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }.share-row > span { display: grid; }.share-row b { font-size: .75rem; }.share-row small { color: var(--muted); font-size: .65rem; text-transform: uppercase; }
.new-share { margin-top: .8rem; padding: .7rem; border: 1px solid #2f7659; border-radius: .45rem; background: var(--active-dim); }.new-share > b { color: var(--active); font-size: .75rem; }.new-share > div { display: grid; grid-template-columns: 1fr auto; margin: .5rem 0; }.new-share input { min-width: 0; border-radius: .3rem 0 0 .3rem; font: .62rem/1 var(--mono); }.new-share button { border: 0; background: var(--active); color: #00170f; font-weight: 800; cursor: pointer; }.new-share small { color: var(--soft); font-size: .63rem; }
.inline-error { margin: 1rem; padding: 1rem; color: #ffc5ca; background: var(--danger-dim); border: 1px solid #74313a; }

.shared-page { background: #050606; }.shared-top { height: 4.25rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }.readonly-badge { margin-right: 1.25rem; color: var(--info); border: 1px solid #315b77; padding: .4rem .55rem; border-radius: .35rem; font: 700 .63rem/1 var(--mono); }.shared-record { width: min(58rem, calc(100% - 2rem)); margin: 2rem auto 5rem; }.share-notice { margin: 1rem 0; padding: .8rem 1rem; border: 1px solid #315b77; background: var(--info-dim); color: #beddf3; font-size: .78rem; }.medical-note { color: var(--muted); font-size: .7rem; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@media (max-width: 1120px) {
  .shell { grid-template-columns: 12.5rem minmax(0, 1fr); }.sidebar { width: 12.5rem; }.topbar { grid-template-columns: 12.5rem 1fr 10rem; }
}
@media (max-width: 760px) {
  .topbar { grid-template-columns: 1fr auto; height: 3.8rem; }.account-menu { grid-column: 2; }.command-status { display: none; }.account-menu > summary > span:nth-child(2), .account-menu > summary > span:last-child { display: none; }.shell { display: block; padding-top: 3.8rem; }.sidebar { position: static; width: auto; height: auto; border: 0; border-bottom: 1px solid var(--line); }.side-label, .add-pet, .side-footer { display: none; }.pet-list { display: flex; gap: .35rem; overflow-x: auto; padding: .55rem; }.pet-link { min-width: max-content; min-height: 2.8rem; }.pet-link.active { box-shadow: inset 0 -2px var(--active); }.workspace { padding: 1rem .85rem 3rem; }.pet-header { align-items: center; }.pet-header > div:first-child { min-width: 0; }.pet-header h1 { font-size: 2.1rem; }.record-state { font-size: .58rem; }.metrics > div, .metrics > a.metric-link { min-width: 0; min-height: 5.3rem; padding: .7rem; }.metrics strong { font-size: 1rem; }.metrics span { display: none; }.capture-help span:last-child { display: none; }.event-row { grid-template-columns: 2.2rem minmax(0, 1fr) auto; }.share-form { grid-template-columns: minmax(0, 1fr) 5.5rem; }
  .assistant-head { align-items: flex-start; flex-direction: column; gap: .45rem; }.assistant-scope { padding-left: 2.45rem; }.assistant-compose-row { grid-template-columns: minmax(0, 1fr) 2.7rem; }.assistant-mode-switch { grid-column: 1 / -1; min-height: 2.35rem; }.assistant-mode { flex: 1; }.assistant-contract { width: 100%; margin-left: 0; }.medication-change-form { grid-template-columns: 1fr 1fr; }.medication-change-form label:first-of-type, .medication-change-form label:nth-of-type(4) { grid-column: 1 / -1; }.medication-change-actions { align-items: stretch; flex-direction: column; }.medication-change-actions .button { width: 100%; }
  .auth-shell { grid-template-columns: 1fr; width: min(29rem, calc(100% - 1.5rem)); gap: 2rem; padding: 2.5rem 0 4rem; }.auth-context h1 { font-size: clamp(2.4rem, 12vw, 3.8rem); }.auth-context ul { display: none; }
  .settings-grid { grid-template-columns: 1fr; }.settings-shell { padding-top: 2.5rem; }
}

/* Public home: a quiet field-notebook surface for the product story. */
.home-page { --home-ink: #f5f7f4; --home-soft: #b7c0ba; --home-dim: #7b8780; --home-line: rgba(177, 199, 187, .18); --home-green: #8fe3b2; --home-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; background: #070908; color: var(--home-ink); }
.home-page::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .24; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 5rem 5rem; mask-image: linear-gradient(to bottom, #000, transparent 75%); }
.home-nav { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 4.5rem; border-bottom: 1px solid var(--home-line); background: rgba(7,9,8,.86); backdrop-filter: blur(18px); }
.home-nav .brand { padding-left: clamp(1rem, 4vw, 3.5rem); }.home-nav nav { display: flex; gap: 1.5rem; color: var(--home-dim); font: 600 .65rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }.home-nav nav a:hover, .home-nav-actions a:hover { color: var(--home-ink); }
.home-nav-actions { display: flex; align-items: center; justify-self: end; gap: 1.1rem; padding-right: clamp(1rem, 4vw, 3.5rem); }.home-sign-in { color: var(--home-soft); font-size: .78rem; font-weight: 700; }.home-cta { min-height: 2.35rem; padding: .5rem .7rem; font-size: .72rem; }.home-cta span, .hero-actions .button span { margin-left: .45rem; font-size: 1rem; }
.home-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(25rem, .8fr); gap: clamp(3rem, 9vw, 10rem); align-items: center; width: min(78rem, calc(100% - 2rem)); min-height: min(47rem, calc(100vh - 4.5rem)); margin: auto; padding: clamp(4rem, 10vw, 8rem) 0 clamp(5rem, 10vw, 8rem); }.hero-copy { position: relative; z-index: 1; }.hero-copy h1 { max-width: 42rem; margin: 1rem 0 1.5rem; font: 500 clamp(3.8rem, 7.5vw, 7rem)/.88 var(--home-display); letter-spacing: -.065em; }.hero-copy h1 em, .home-section h2 em, .home-assistant h2 em { color: var(--home-green); font-style: italic; }.hero-lede { max-width: 31rem; margin: 0; color: var(--home-soft); font-size: clamp(.95rem, 1.4vw, 1.1rem); line-height: 1.7; }.hero-actions { display: flex; align-items: center; gap: 1.35rem; margin-top: 2.2rem; }.hero-actions .button { min-height: 3rem; padding-inline: 1rem; font-size: .78rem; }.text-link { color: var(--home-soft); font-size: .78rem; font-weight: 700; }.text-link:hover { color: var(--home-green); }.text-link span { margin-left: .4rem; color: var(--home-green); }.hero-note { display: flex; align-items: center; gap: .6rem; margin-top: 3rem; color: var(--home-dim); font: .62rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; }.hero-note .live-dot { background: var(--home-green); box-shadow: 0 0 0 .2rem rgba(143,227,178,.12); }
.hero-visual { position: relative; min-height: 31rem; transform: rotate(2deg); }.hero-visual::before { content: ""; position: absolute; inset: 7% -5% -6% 8%; border: 1px solid rgba(143,227,178,.25); border-radius: 1rem; transform: rotate(-7deg); }.hero-stamp { position: absolute; z-index: 2; top: 2%; right: -2%; padding: .55rem .65rem; border: 1px solid rgba(143,227,178,.35); color: var(--home-green); background: #0b1711; font: .58rem/1.35 var(--mono); letter-spacing: .1em; transform: rotate(8deg); }.hero-stamp strong { color: var(--home-ink); font-size: .75rem; }.timeline-card { position: relative; z-index: 1; width: min(100%, 30rem); margin: 4rem auto 0; padding: 1.25rem; border: 1px solid #42594c; border-radius: .8rem; background: linear-gradient(145deg, rgba(21,31,26,.98), rgba(8,12,10,.98)); box-shadow: 1.5rem 2rem 4rem rgba(0,0,0,.45); }.timeline-card-top, .mini-metric-row, .note-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }.card-kicker, .card-date, .note-meta { color: #7e9387; font: 700 .57rem/1 var(--mono); letter-spacing: .1em; }.card-date { color: var(--home-green); }.timeline-card h2 { margin: 1.4rem 0 .2rem; font: 500 3rem/.9 var(--home-display); letter-spacing: -.06em; }.card-subtitle { margin: 0; color: var(--home-dim); font-size: .73rem; }.mini-metric-row { margin: 1.6rem 0 1rem; padding: .85rem 0; border-top: 1px solid var(--home-line); border-bottom: 1px solid var(--home-line); }.mini-metric-row > div { display: grid; gap: .25rem; min-width: 0; }.mini-metric-row small { color: var(--home-dim); font: .55rem/1 var(--mono); letter-spacing: .08em; }.mini-metric-row strong { color: var(--home-ink); font: 700 .75rem/1 var(--mono); }.timeline-note { display: grid; grid-template-columns: 1.8rem 1fr; gap: .7rem; padding: .9rem 0; border-bottom: 1px solid var(--home-line); }.timeline-icon { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 1px solid #347a58; border-radius: .35rem; color: var(--home-green); font: 700 .85rem/1 var(--mono); }.note-meta { justify-content: start; gap: .65rem; font-size: .55rem; }.note-meta b { padding: .2rem .3rem; border: 1px solid #315b46; border-radius: .2rem; color: var(--home-green); font-size: .5rem; }.timeline-note strong { display: block; margin-top: .45rem; color: var(--home-ink); font-size: .78rem; }.timeline-note p { margin: .3rem 0 0; color: var(--home-soft); font-size: .7rem; line-height: 1.45; }.muted-note { border-bottom: 0; padding-bottom: .1rem; opacity: .65; }.muted-note strong { margin-top: .25rem; }.hero-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(143,227,178,.25); }.orbit-one { width: 8rem; height: 8rem; top: -2rem; left: -3rem; }.orbit-two { width: 4rem; height: 4rem; right: -4rem; bottom: 3rem; border-color: rgba(235,180,100,.35); }
.home-proof { display: grid; grid-template-columns: minmax(10rem, .7fr) minmax(0, 1.3fr); gap: 2rem; width: min(78rem, calc(100% - 2rem)); margin: auto; padding: 1.2rem 0 1.4rem; border-top: 1px solid var(--home-line); border-bottom: 1px solid var(--home-line); }.proof-label { color: var(--home-green); font: 700 .58rem/1.3 var(--mono); letter-spacing: .1em; }.home-proof p { max-width: 40rem; margin: 0; color: var(--home-soft); font: 500 clamp(1rem, 2vw, 1.3rem)/1.35 var(--home-display); }
.home-section { width: min(78rem, calc(100% - 2rem)); margin: auto; padding: clamp(6rem, 12vw, 10rem) 0; }.section-intro { display: grid; grid-template-columns: .7fr 1.3fr; gap: 2rem; align-items: start; }.home-section h2, .home-assistant h2 { margin: .8rem 0 0; font: 500 clamp(2.4rem, 5.2vw, 4.7rem)/.92 var(--home-display); letter-spacing: -.06em; }.feature-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 1px; margin-top: 4rem; border: 1px solid var(--home-line); background: var(--home-line); }.feature-card { position: relative; min-height: 16rem; padding: 1.35rem; background: #0b0f0d; }.feature-card-large { display: flex; flex-direction: column; justify-content: space-between; min-height: 19rem; background: linear-gradient(145deg, #102219, #0b100d); }.feature-number { color: var(--home-green); font: .62rem/1 var(--mono); }.feature-card h3 { max-width: 13rem; margin: 3rem 0 .7rem; font: 500 1.6rem/.95 var(--home-display); letter-spacing: -.04em; }.feature-card p { max-width: 17rem; margin: 0; color: var(--home-soft); font-size: .78rem; line-height: 1.55; }.feature-card-large h3 { max-width: 19rem; font-size: 2.3rem; }.feature-mark { position: absolute; right: 1.3rem; bottom: 1.2rem; color: var(--home-green); font-size: 1.5rem; }
.home-assistant { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 8vw, 8rem); width: min(78rem, calc(100% - 2rem)); margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) 0; border-top: 1px solid var(--home-line); }.assistant-intro > p { max-width: 26rem; margin-top: 1.5rem; color: var(--home-soft); font-size: .9rem; line-height: 1.65; }.home-mcp { border: 1px solid #2f7659; border-radius: .8rem; background: linear-gradient(145deg, rgba(10,38,28,.76), rgba(8,14,12,.96)); box-shadow: 0 1.5rem 4rem rgba(0,0,0,.25); }.mcp-home-label { display: flex; justify-content: space-between; padding: 1rem 1.25rem 0; color: var(--home-green); font: 700 .58rem/1 var(--mono); letter-spacing: .1em; }.home-mcp .mcp-connect { margin: 0; padding: 1.1rem 1.25rem 1.25rem; border: 0; background: transparent; box-shadow: none; }.home-mcp .mcp-connect h2 { margin: .9rem 0 .45rem; font: 700 clamp(1.5rem, 3vw, 2.3rem)/1 var(--font); letter-spacing: -.04em; }.home-mcp .mcp-connect p { max-width: 38rem; font-size: .85rem; }.home-mcp .mcp-prompt-row { grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }.home-mcp .mcp-prompt-row .button { width: auto; min-width: 8.5rem; }.home-mcp .mcp-prompt-row textarea { min-height: 8rem; }.home-mcp .mcp-url-label { margin-top: 1.1rem !important; }.home-mcp .mcp-url-row input { min-height: 2.8rem; }.home-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(78rem, calc(100% - 2rem)); margin: auto; padding: 1.5rem 0 2.5rem; border-top: 1px solid var(--home-line); color: var(--home-dim); font: .58rem/1 var(--mono); letter-spacing: .08em; }.home-footer .brand { padding: 0; color: var(--home-ink); font-size: .68rem; }.home-footer .brand-mark { width: 1.6rem; height: 1.6rem; font-size: .68rem; }.home-footer > div { display: flex; gap: 1rem; }.home-footer a:hover { color: var(--home-green); }

@media (max-width: 800px) { .home-nav { grid-template-columns: 1fr auto; }.home-nav nav { display: none; }.home-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 5rem; }.hero-visual { width: min(100%, 34rem); min-height: 28rem; margin: 0 auto; }.home-proof, .section-intro, .home-assistant { grid-template-columns: 1fr; }.home-assistant { gap: 2.5rem; }.feature-grid { grid-template-columns: 1fr; }.feature-card, .feature-card-large { min-height: 13rem; }.home-mcp .mcp-prompt-row { grid-template-columns: 1fr; }.home-mcp .mcp-prompt-row .button { width: 100%; }.home-footer { align-items: flex-start; flex-wrap: wrap; } }
@media (max-width: 500px) { .home-nav .brand span:last-child { display: none; }.home-nav-actions { gap: .7rem; }.home-cta { padding-inline: .55rem; }.hero-copy h1 { font-size: clamp(3.5rem, 16vw, 5rem); }.hero-actions { align-items: flex-start; flex-direction: column; gap: 1.1rem; }.hero-note { margin-top: 2.2rem; }.hero-visual { min-height: 24rem; transform: rotate(1deg) scale(.94); }.timeline-card { margin-top: 3rem; padding: .95rem; }.timeline-card h2 { font-size: 2.5rem; }.home-section { padding: 5rem 0; }.home-footer > span { order: 3; width: 100%; }.home-footer > div { margin-left: auto; } }
@media (max-width: 480px) { .auth-topbar > span { display: none; }.auth-shell { align-items: start; }.auth-context > p { font-size: .88rem; }.auth-panel { border-left: 0; border-right: 0; border-radius: 0; margin-inline: -.75rem; } }
@media (max-width: 480px) { .mcp-url-row { grid-template-columns: 1fr; }.mcp-url-row .button { width: 100%; } }
@media (max-width: 480px) { .record-state { display: none; } }
@media (max-width: 380px) { .metrics { grid-template-columns: 1fr 1fr; }.metrics > div, .metrics > a.metric-link { border-bottom: 1px solid var(--line); }.metrics > div:nth-child(2n), .metrics > a.metric-link:nth-child(2n) { border-right: 0; }.metrics > :nth-last-child(-n+2) { border-bottom: 0; }.record-state { display: none; }.event-row { grid-template-columns: 2rem 1fr; }.event-row > form { grid-column: 2; justify-self: start; }.capture-row { grid-template-columns: 1fr 2.7rem; padding: 0 .7rem; }.agent-label, .capture-help { padding-left: .7rem; padding-right: .7rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (prefers-reduced-transparency: reduce) { .topbar { background: #000; backdrop-filter: none; } }
@media (prefers-contrast: more) { :root { --line: #5c6870; --muted: #aeb9bf; } }
.ocr-details { margin-top: .7rem; color: var(--muted); font-size: .68rem; }.ocr-details summary { cursor: pointer; }.ocr-details pre { max-height: 12rem; overflow: auto; margin: .5rem 0 0; padding: .65rem; color: var(--soft); background: #080a0b; white-space: pre-wrap; font: .62rem/1.45 var(--mono); }
.structured-capture { margin-top: .65rem; border: 1px solid #315b77; border-radius: .55rem; background: rgba(10,22,29,.7); }.structured-capture > summary { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; color: var(--soft); cursor: pointer; list-style: none; }.structured-capture > summary::-webkit-details-marker { display: none; }.structured-capture > summary > span:last-child { display: grid; gap: .15rem; }.structured-capture > summary b { color: var(--text); font-size: .76rem; }.structured-capture > summary small { color: var(--muted); font-size: .64rem; }.structured-pulse { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border: 1px solid #315b77; border-radius: .3rem; color: var(--info); font: 700 .85rem/1 var(--mono); }.structured-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; padding: 0 .8rem .8rem; }.structured-form .full-width { grid-column: 1 / -1; }.structured-form textarea { width: 100%; resize: vertical; border: 1px solid var(--line); border-radius: .42rem; background: #090b0c; color: var(--text); padding: .55rem .65rem; }.symptom-facts { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .55rem; color: #b6d9ed; font: .62rem/1 var(--mono); }.symptom-facts span:not(.fact-label) { padding: .25rem .35rem; border: 1px solid #315b77; border-radius: .25rem; background: #0c202c; }.symptom-facts .fact-label { width: 100%; color: #7ebce2; font-size: .57rem; letter-spacing: .08em; }.medication-box { background: linear-gradient(145deg, rgba(15,29,25,.75), rgba(8,12,13,.9)); }.medication-box h2 { color: #d7f6e7; }.medication-box p { margin-top: 0; }.medication-list { margin-top: 1rem; border-top: 1px solid var(--line); }.medication-row { display: flex; justify-content: space-between; gap: .6rem; padding: .65rem 0; border-bottom: 1px solid var(--line); }.medication-row strong { min-width: 0; overflow: hidden; color: var(--text); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }.medication-row span { flex: 0 0 auto; display: grid; color: var(--muted); font: .62rem/1.2 var(--mono); text-align: right; }.medication-row small { color: var(--soft); }
.prescription-box { background: linear-gradient(145deg, rgba(29,25,16,.78), rgba(8,12,13,.94)); }
.prescription-box h2 { color: #f3e5bf; }
.prescription-box p { margin-top: 0; }
.prescription-list, .adherence-list { margin-top: 1rem; border-top: 1px solid var(--line); }
.prescription-row { padding: .8rem 0; border-bottom: 1px solid var(--line); }
.prescription-title { display: flex; align-items: center; gap: .5rem; justify-content: space-between; }
.prescription-title strong { color: var(--text); font-size: .76rem; }
.prescription-title span { flex: 0 0 auto; padding: .2rem .35rem; border: 1px solid #756133; border-radius: .2rem; color: #e7c878; font: .56rem/1 var(--mono); text-transform: uppercase; }
.prescription-title span.paused { color: #e3a75b; border-color: #82552c; }
.prescription-title span.stopped { color: #d68d8d; border-color: #773b40; }
.prescription-row p { margin: .28rem 0 0; color: var(--soft); font: .65rem/1.3 var(--mono); }
.prescription-row small { display: block; margin-top: .35rem; color: var(--muted); font-size: .68rem; }
.adherence-capture { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid #5b4c2d; }
.adherence-capture h3 { margin: .35rem 0 .75rem; color: #f3e5bf; font-size: .85rem; }
.adherence-row { display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; padding: .65rem 0; border-bottom: 1px solid var(--line); color: var(--soft); font: .63rem/1.3 var(--mono); }
.adherence-row > div:first-child { display: flex; gap: .5rem; }
.adherence-row > div:first-child span { color: #e7c878; text-transform: uppercase; }
.adherence-row .adherence-status { color: #e7c878; text-transform: uppercase; }
.adherence-row .adherence-status.partial { color: #e3a75b; }
.adherence-row .adherence-status.missed { color: #d68d8d; }
.adherence-row small { grid-column: 1 / -1; color: var(--muted); }

/* Lab trends: dense by default, expansive when a vet needs the whole picture. */
.trend-head-actions { display: flex; align-items: center; gap: .7rem; }
.trend-expand { border: 1px solid #315b77; border-radius: .35rem; padding: .42rem .55rem; background: rgba(7,21,30,.75); color: #b9dcf0; cursor: pointer; font: 700 .6rem/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.trend-expand:hover { border-color: #62c7ff; color: var(--text); background: #102a3a; }
.trend-controls { grid-template-columns: auto minmax(0, 1fr); align-items: end; }
.trend-scope { display: grid; gap: .2rem; min-width: 6.7rem; }
.trend-scope span, .trend-card-label { color: #7ebce2; font: 700 .56rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.trend-scope strong { color: var(--text); font: 700 .78rem/1 var(--mono); }
/* §5b overview + detail: one big selected-marker chart plus a sparkline
   filmstrip for the rest, instead of a grid of small-multiple cards. The
   filmstrip is a horizontal-scroll row at every width (390px included, per
   the plan's "horizontal scroll is fine") rather than a side rail that only
   exists above some breakpoint — one layout, no breakpoint-specific rework. */
.trend-layout { display: flex; flex-direction: column; gap: .75rem; margin-top: .55rem; }
.trend-detail { border: 1px solid rgba(49,91,119,.7); border-radius: .4rem; background: rgba(0,0,0,.25); overflow: hidden; }
.trend-detail-inner { display: flex; flex-direction: column; height: 100%; }
.trend-detail-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem .75rem; padding: .7rem .75rem .35rem; }
.trend-detail-head h4 { margin: .28rem 0 0; color: var(--text); font-size: 1rem; letter-spacing: -.02em; }
.trend-card-latest { display: grid; gap: .25rem; min-width: 0; text-align: right; }
.trend-card-latest strong { color: #d9f3ff; font: 700 .9rem/1 var(--mono); white-space: nowrap; }
.trend-card-latest span { overflow: hidden; color: var(--muted); font: .58rem/1.2 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.trend-detail-foot { flex: 1 0 100%; display: flex; justify-content: space-between; gap: .5rem; color: var(--muted); font: .58rem/1 var(--mono); }
.trend-detail-foot span:last-child { color: var(--warning); }
.trend-filmstrip { display: flex; gap: .55rem; overflow-x: auto; padding-bottom: .15rem; }
.trend-spark { flex: 0 0 auto; display: grid; gap: .3rem; width: 7.6rem; padding: .5rem .55rem; border: 1px solid rgba(49,91,119,.6); border-radius: .4rem; background: rgba(4,13,19,.6); color: inherit; cursor: pointer; text-align: left; transition: border-color 120ms, background 120ms; }
.trend-spark:hover { border-color: #62c7ff; }
.trend-spark:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.trend-spark.active { border-color: #62c7ff; background: rgba(15,45,63,.85); box-shadow: inset 0 0 0 1px rgba(98,199,255,.35); }
.trend-spark-label { display: flex; flex-direction: column; gap: .1rem; overflow: hidden; }
.trend-spark-label b { overflow: hidden; color: var(--soft); font: 700 .62rem/1.2 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.trend-spark-label i { color: var(--warning); font: 600 .55rem/1 var(--mono); font-style: normal; }
.trend-spark svg { display: block; width: 100%; height: 2.1rem; }
.trend-spark .spark-line { fill: none; stroke: #62c7ff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.trend-spark .spark-line.flagged { stroke: var(--warning); }
.trend-spark .spark-dot { fill: #8bd7ff; }
.trend-spark-value { color: var(--text); font: 700 .68rem/1 var(--mono); }
.trend-spark-value small { color: var(--muted); font-weight: 500; }
.trend-table { min-width: 34rem; }
.trend-table th:first-child, .trend-table td:first-child { text-align: left; }
.trend-table td:nth-child(2) { color: var(--muted); text-align: right; }
.trend-table td:nth-child(3) { max-width: none; color: var(--text); text-align: right; }
.trend-table td:nth-child(4) { max-width: 9rem; overflow: hidden; color: var(--muted); text-align: right; text-overflow: ellipsis; white-space: nowrap; }

/* §5a: a native <dialog> replaces the hand-rolled `.is-expanded` fixed-position
   overlay. It needs no knowledge of the topbar height or sidebar width — the
   UA centers and sizes it, and Escape/backdrop/focus-trap/focus-return are
   free. `.trend-detail-inner` (head + chart) is reparented into the dialog's
   slot on open and back on close, so the chart is rendered once, not twice. */
.trend-dialog { width: min(94vw, 84rem); height: min(90vh, 56rem); padding: 0; border: 1px solid #3e7da5; border-radius: .6rem; background: #071019; color: var(--text); box-shadow: 0 1.5rem 5rem rgba(0,0,0,.65); }
.trend-dialog::backdrop { background: rgba(2,5,7,.72); }
.trend-dialog[open] { display: flex; flex-direction: column; }
.trend-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid rgba(49,91,119,.6); }
/* Same pre-existing `.side-label` display:none-below-760px issue as
   `.record-dialog-head`/`.drawer-head` above — fixed here too since it's the
   same one-line cause. */
.trend-dialog-head .side-label { display: block; padding: 0; }
.trend-dialog-slot { flex: 1; min-height: 0; padding: 1rem; overflow: auto; }
.trend-dialog-slot .trend-detail { height: 100%; border: 0; background: transparent; }
.trend-dialog-slot .trend-chart { height: 100%; }

@media (max-width: 760px) {
  .trend-controls { grid-template-columns: 1fr; }
}

/* Phase 4 (`UI_REDESIGN_PLAN.md` §4): the "+ Record" menu + dialog, and the
   transient knowledge drawer. Neither reintroduces the old `15rem | 1fr |
   21rem` shell — both are `<dialog>`s, which the UA centers and sizes
   without any knowledge of the sidebar or a fixed rail width, and both
   collapse to a near-full-width sheet at narrow viewports via the `width:
   min(94vw, …)` clamp below rather than a breakpoint-specific rework. */
.pet-header { flex-wrap: wrap; }
.record-menu { position: relative; flex: 0 0 auto; }
/* A closed `<details>`'s non-summary content doesn't reliably keep its
   `position: absolute` popover out of document flow in every engine — it can
   still contribute real geometry to the page's scrollable width even while
   visually suppressed, which is exactly the kind of thing that silently blows
   the 390px budget (`document.body.scrollWidth <= window.innerWidth`).
   Explicit `display: none` when closed removes any doubt. */
.record-menu:not([open]) > .record-popover { display: none; }
.record-menu > summary { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: 0 .9rem; border: 1px solid var(--line-strong); border-radius: .45rem; background: var(--surface-2); color: var(--text); cursor: pointer; list-style: none; font-weight: 700; font-size: .82rem; transition: background 120ms ease-out, transform 90ms ease-out; }
.record-menu > summary::-webkit-details-marker { display: none; }
.record-menu > summary:hover { background: var(--hover); }
.record-menu > summary:active { transform: scale(.97); }
.record-popover { position: absolute; z-index: 15; top: calc(100% + .45rem); right: 0; width: 11rem; padding: .4rem; border: 1px solid var(--line-strong); border-radius: .6rem; background: rgba(18,21,23,.97); box-shadow: 0 1.2rem 3rem rgba(0,0,0,.55); }
.record-popover button { display: flex; align-items: center; width: 100%; min-height: 2.4rem; border: 0; border-radius: .4rem; background: transparent; color: var(--soft); cursor: pointer; text-align: left; padding: 0 .7rem; font-size: .8rem; font-weight: 650; }
.record-popover button:hover, .record-popover button:focus-visible { color: var(--text); background: var(--hover); }

.record-dialog, .drawer-dialog { width: min(94vw, 30rem); max-height: min(88vh, 46rem); padding: 0; border: 1px solid var(--line-strong); border-radius: .7rem; background: #0b0d0e; color: var(--text); box-shadow: 0 1.5rem 5rem rgba(0,0,0,.65); }
.record-dialog::backdrop, .drawer-dialog::backdrop { background: rgba(2,5,7,.72); }
.record-dialog[open], .drawer-dialog[open] { display: flex; flex-direction: column; }
.record-dialog-head, .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
/* `.side-label` is `display: none` below 760px (`@media (max-width: 760px)`,
   further up this file) — a rule meant for the sidebar's "YOUR PETS" label
   when the sidebar collapses to a horizontal strip. These dialog headers
   reuse `.side-label` only for its type styling and pick up that rule too,
   which would silently blank the "RECORD"/"DETAIL" eyebrow at exactly the
   390px width this app is designed at first. The two-class selector outranks
   the single-class media-query rule regardless of source order. */
.record-dialog-head .side-label, .drawer-head .side-label { display: block; padding: 0; }
.record-dialog-slot, .drawer-slot { flex: 1; min-height: 0; padding: 1rem; overflow-y: auto; }
.dialog-status:empty { display: none; }
.dialog-status .inline-error { margin: 0; }
.dialog-hint { color: var(--muted); font-size: .72rem; }
.drawer-entry { padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.drawer-entry .concept-line { margin-bottom: .35rem; }
.drawer-entry h2 { margin: .3rem 0; font-size: 1.1rem; }
.drawer-entry p { margin: 0; color: var(--soft); font-size: .82rem; }
.drawer-slot .knowledge-panel { margin-top: 0; border: 0; border-radius: 0; }
.drawer-slot .knowledge-card { padding: 1rem 0; }
.drawer-slot .linked-events { padding: 1rem 0 0; }

.event-actions { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: .3rem; }
.event-open { color: var(--info); font: 800 .95rem/1 var(--mono); }
.event-open:hover { color: var(--text); border-color: var(--line); }

.standalone-shell { width: min(40rem, calc(100% - 2rem)); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) 0 4rem; }
.standalone-shell h1 { margin: .8rem 0 1.2rem; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.03em; }

/* Stay anchored to the button's right edge at every width. Flipping to `left: 0`
   anchors the popover's left edge to the button's, and the button sits at the
   right of the pet header — which pushes the popover off-screen and gives the
   page a horizontal scrollbar at 390px. */
@media (max-width: 480px) {
  .record-popover { right: 0; left: auto; width: min(11rem, calc(100vw - 2rem)); }
  .event-label-fields { grid-template-columns: 1fr 1fr; }.event-label-fields input { grid-column: 1 / -1; }.event-label-fields .button, .event-label-fields .quiet-action { width: 100%; }
}


/* Appearance photo tracking */
.photos-tab { margin-top: 1.3rem; }
.photo-capture-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid var(--line-strong); border-radius: .72rem; background: linear-gradient(145deg, rgba(15,24,22,.96), rgba(8,12,12,.98)); }
.photo-capture-card .side-label { display: block; padding: 0; color: #75cfa8; }
.photo-capture-card h2 { margin: .3rem 0 .2rem; font-size: 1.05rem; }
.photo-capture-card p { max-width: 42rem; margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.photo-capture-form { display: flex; flex: 0 0 auto; align-items: center; gap: .6rem; }
.photo-camera-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 1rem; border-radius: .48rem; background: var(--active); color: #00170f; cursor: pointer; font-size: .78rem; font-weight: 800; }
.photo-camera-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.photo-upload-status { display: none; color: var(--active); font: 700 .62rem/1 var(--mono); }
.photo-capture-form.htmx-request .photo-upload-status { display: inline; }
.photo-capture-form.htmx-request .photo-camera-button { opacity: .65; pointer-events: none; }
.photo-empty { display: grid; gap: .25rem; margin-top: 1rem; padding: 1.3rem; border: 1px dashed var(--line-strong); border-radius: .6rem; color: var(--soft); }
.photo-empty span { color: var(--muted); font-size: .72rem; }
.photo-viewer { margin-top: 1rem; }
.photo-stage { position: relative; width: min(100%, 42rem); aspect-ratio: 1; margin: 0 auto; overflow: hidden; border: 1px solid var(--line-strong); border-radius: .7rem; background: #050707; }
.photo-stage canvas { display: block; width: 100%; height: 100%; }
.photo-viewer-controls { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .7rem; align-items: center; width: min(100%, 42rem); margin: .7rem auto 0; }
.photo-viewer-controls > div { display: grid; text-align: center; }
.photo-viewer-controls strong { font-size: .78rem; }
.photo-viewer-controls small { margin-top: .18rem; color: var(--muted); font: .61rem/1 var(--mono); }
.photo-range { display: block; width: min(100%, 42rem); margin: .7rem auto 0; accent-color: var(--active); }
.photo-viewer-options { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(100%, 42rem); margin: .55rem auto 0; color: var(--muted); font-size: .66rem; }
.photo-viewer-options label { display: inline-flex; align-items: center; gap: .4rem; color: var(--soft); }
.photo-viewer-options input { accent-color: var(--active); }
.photo-strip { display: flex; gap: .5rem; margin-top: 1rem; padding-bottom: .35rem; overflow-x: auto; scroll-snap-type: x proximity; }
.photo-thumb { display: grid; flex: 0 0 5.2rem; gap: .3rem; padding: .3rem; border: 1px solid var(--line); border-radius: .45rem; color: var(--muted); background: var(--raised); cursor: pointer; scroll-snap-align: start; }
.photo-thumb img { width: 100%; aspect-ratio: 1; border-radius: .28rem; object-fit: cover; }
.photo-thumb span { font: 650 .58rem/1 var(--mono); }
.photo-thumb.active { border-color: var(--active); color: var(--text); box-shadow: 0 0 0 1px rgba(32,200,132,.18); }
.photo-analysis-card { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--line-strong); }
.section-head.compact { align-items: center; }
.photo-compare-form { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto auto; gap: .6rem; align-items: end; margin-top: .85rem; }
.photo-compare-form label { display: grid; gap: .3rem; color: var(--muted); font-size: .62rem; font-weight: 700; }
.photo-compare-form select { width: 100%; min-width: 0; padding: .55rem .6rem; border: 1px solid var(--line-strong); border-radius: .4rem; color: var(--text); background: var(--raised); }
.photo-compare-arrow { align-self: center; color: var(--muted); }
.photo-ai-unavailable, .photo-safety-note { color: var(--muted); font-size: .66rem; line-height: 1.5; }
.photo-ai-unavailable code { color: var(--soft); }
.photo-analysis-result { margin-top: .9rem; padding: .9rem; border: 1px solid #315b4a; border-radius: .55rem; background: rgba(10,31,23,.45); }
.photo-analysis-result .side-label { display: block; padding: 0; color: #75cfa8; }
.photo-analysis-result h3 { margin: .35rem 0 .55rem; font-size: .9rem; }
.photo-analysis-result p { margin: 0; color: var(--soft); font-size: .74rem; line-height: 1.55; white-space: pre-wrap; }
.photo-analysis-result small { display: block; margin-top: .65rem; padding-top: .6rem; border-top: 1px solid rgba(49,91,74,.55); color: var(--muted); font-size: .61rem; line-height: 1.45; }
.photo-safety-note { margin: 1.2rem 0 0; }

@media (max-width: 680px) {
  .photo-capture-card { align-items: stretch; flex-direction: column; }
  .photo-capture-form, .photo-camera-button { width: 100%; }
  .photo-compare-form { grid-template-columns: 1fr; }
  .photo-compare-arrow { display: none; }
  .photo-compare-form .button { width: 100%; }
  .photo-viewer-options { align-items: flex-start; flex-direction: column; gap: .35rem; }
}