:root { --radius: 16px; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--link); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

.top { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.logo { font-weight: 800; font-size: 1.25rem; color: var(--text); text-decoration: none; letter-spacing: -.02em; }
.logo span { color: var(--brand); }
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .9rem; }
.lang summary::-webkit-details-marker { display: none; }
.lang ul { position: absolute; inset-inline-end: 0; z-index: 5; margin: 6px 0 0; padding: 6px; list-style: none; min-width: 230px; max-height: 70vh; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.lang a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; }
.lang a:hover, .lang a[aria-current] { background: color-mix(in srgb, var(--brand) 14%, transparent); }

.hero { padding: 48px 0 40px; display: grid; gap: 28px; align-items: center; }
.hero h1 { font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 14px; }
.hero p { color: var(--muted); font-size: 1.12rem; margin: 0 0 24px; max-width: 34em; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-block; padding: 8px 18px; font-size: .92rem; line-height: 1.4; border-radius: 999px; font-weight: 650; text-decoration: none; border: 1px solid var(--brand); }
.btn.primary { background: var(--brand); color: var(--brand-ink); }
.btn.ghost { color: var(--brand); }
.hero-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.hero-card h2 { margin: 0 0 12px; font-size: 1rem; color: var(--muted); font-weight: 600; }
.hero-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.hero-card li { display: flex; align-items: center; gap: 10px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); padding: 8px 0 40px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.card h3 { margin: 0 0 6px; font-size: 1.1rem; }
.card p { margin: 0; color: var(--muted); }
.card .emoji { font-size: 1.6rem; display: block; margin-bottom: 10px; }
.card small { display: inline-block; margin-top: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }

.stats { display: flex; flex-wrap: wrap; gap: 28px; padding: 22px 0 8px; border-top: 1px solid var(--line); }
.stats strong { display: block; font-size: 1.8rem; letter-spacing: -.02em; }
.stats span { color: var(--muted); font-size: .92rem; }
footer { color: var(--muted); }

@media (min-width: 820px) { .hero { grid-template-columns: 1.3fr 1fr; padding: 72px 0 56px; } }

/* --- Navigation, flashes, forms (auth + account) --- */
.top { flex-wrap: wrap; gap: 8px 16px; }
.nav { display: none; order: 5; width: 100%; flex-direction: column; gap: 2px; padding: 6px 0; }
.nav.open { display: flex; }
.nav a { padding: 8px 4px; color: var(--text); text-decoration: none; border-radius: 8px; }
.nav a:hover, .nav a[aria-current] { color: var(--brand); }
.nav-toggle { margin-inline-start: auto; background: none; border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: 1.2rem; padding: 4px 10px; cursor: pointer; }
.user-nav { display: flex; align-items: center; gap: 12px; }
.user-nav a { text-decoration: none; }
.user-nav .btn.small { padding: 4px 12px; font-size: .85rem; }
form.inline { display: inline; margin: 0; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--link); cursor: pointer; }
@media (min-width: 960px) {
    .nav-toggle { display: none; }
    .nav { display: flex; flex-direction: row; flex-wrap: wrap; order: 0; width: auto; gap: 4px 14px; flex: 1; padding: 0 12px; font-size: .95rem; }
}

.flash { margin: 8px 0; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.flash.success { border-color: var(--brand); }
.flash.error { border-color: #c0392b; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin: 16px auto; max-width: 560px; }
.panel h1, .panel h2 { margin-top: 0; letter-spacing: -.02em; }
.panel .muted { color: var(--muted); }
.panel.danger { border-color: #c0392b; }
.form .form-group, .form .mb-3 { margin-bottom: 16px; }
.form label { display: block; font-weight: 600; margin-bottom: 4px; }
.form input[type=text], .form input[type=email], .form input[type=password], .form select {
    width: 100%; padding: 10px 12px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
}
.form input[type=checkbox], .form input[type=radio] { margin-inline-end: 8px; }
.form .choices label { font-weight: 400; display: block; }
.form .hint-block, .form .form-text { color: var(--muted); font-size: .88rem; }
.form .help-block, .form .invalid-feedback, .form .has-error .help-block { color: #c0392b; font-size: .9rem; }
.form .has-error input, .form .has-error select { border-color: #c0392b; }
.alt { color: var(--muted); font-size: .92rem; margin-bottom: 0; }
button.btn { cursor: pointer; font: inherit; font-weight: 650; }
.btn.danger-btn { background: #c0392b; border-color: #c0392b; color: #fff; }

/* --- Pet decider, toxic checker, breed guides --- */
.panel.wide { max-width: 860px; }
.disclaimer { margin-top: 24px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, transparent); font-size: .9rem; color: var(--muted); }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bar { display: block; inline-size: 100%; block-size: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar > span { display: block; block-size: 100%; background: var(--brand); border-radius: 999px; }
.chip { display: inline-block; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; color: var(--muted); }
.traits { display: grid; gap: 4px 16px; grid-template-columns: 1fr; margin: 12px 0; }
.traits dt { font-weight: 600; margin-block-start: 8px; }
.traits dd { margin: 0; }
.traits small { display: flex; justify-content: space-between; color: var(--muted); font-size: .78rem; }
@media (min-width: 640px) { .traits { grid-template-columns: 14rem 1fr; } .traits dt { margin: 0; align-self: center; } .traits dd { margin: 6px 0; } }

.decider fieldset { border: 0; padding: 0; margin: 0 0 24px; }
.decider legend { font-size: 1.15rem; font-weight: 700; padding: 0; margin-block-end: 6px; }
.decider.wizard .step:not(.current) { display: none; }
.decider .choices { display: grid; gap: 8px; }
.decider .choice { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); cursor: pointer; font-weight: 400; }
.decider .choice:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.decider .choice input { margin: 0; }
.decider .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.decider .progress { margin-block-end: 18px; }
.decider .progress small { color: var(--muted); }
.decider .progress .bar { margin-block-end: 4px; }
.decider [hidden], .toxic-list [hidden] { display: none !important; }

.match { margin: 16px 0; padding: 20px; }
.match header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.match h2 { margin: 0; font-size: 1.3rem; }
.match h3 { margin: 14px 0 4px; font-size: 1rem; }
.match .rank { color: var(--brand); }
.match-bar { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.match-bar strong { font-size: 1.2rem; min-inline-size: 3.2rem; text-align: end; }
.why { margin: 0; padding-inline-start: 1.2em; }
.adopt { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 14px; }
.adopt input[type=text] { flex: 1 1 10rem; padding: 10px 12px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.more { padding-inline-start: 1.6em; }
.more li { padding: 6px 0; }
.more strong { margin-inline-start: 8px; }
.share { margin-block: 22px; }
.share-row { display: flex; gap: 8px; margin-block: 6px; }
.share-row input { flex: 1; min-inline-size: 0; padding: 10px 12px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }

.emergency { margin: 16px 0; padding: 14px 18px; border: 2px solid #c0392b; border-radius: 12px; background: color-mix(in srgb, #c0392b 10%, transparent); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.emergency .btn { margin-inline-start: auto; }
.btn.small { padding: 4px 12px; font-size: .85rem; }
.toxic-filters, .breed-filters { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); align-items: end; margin-block: 16px; }
.toxic-filters > div:first-child { grid-column: 1 / -1; }
.toxic-filters input[type=search], .toxic-filters select, .breed-filters select { inline-size: 100%; padding: 10px 12px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.trait-filters { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.trait-filters legend { font-weight: 600; padding: 0; margin-block-end: 6px; }
.chip-check { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-weight: 400 !important; margin: 0 !important; cursor: pointer; }
.chip-check input { margin: 0 !important; }
.toxic-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.toxic-item { padding: 16px 18px; border: 1px solid var(--line); border-inline-start-width: 6px; border-radius: 12px; background: var(--surface); }
.toxic-item.sev-emergency { border-inline-start-color: #c0392b; }
.toxic-item.sev-high { border-inline-start-color: #e67e22; }
.toxic-item.sev-medium { border-inline-start-color: var(--accent); }
.toxic-item.sev-low { border-inline-start-color: var(--brand); }
.toxic-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.toxic-head h2 { margin: 0; font-size: 1.1rem; }
.toxic-item p { margin: 6px 0 0; }
.toxic-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; color: #fff; background: var(--muted); }
.badge.sev-emergency { background: #c0392b; }
.badge.sev-high { background: #b9540f; }
.badge.sev-medium { background: #8a6410; }
.badge.sev-low { background: #2e7d4f; }
.breed-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); margin-block-end: 16px; }
.breed-card { display: block; text-decoration: none; color: var(--text); padding: 16px; }
.breed-card:hover { border-color: var(--brand); }
.breed-card h3 { margin: 0 0 2px; }
.breed-card p { margin: 0 0 10px; font-size: .9rem; }

/* --- Reminders and notifications (feature: reminders) --- */
.rem-panel { max-width: 820px; }
.rem-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.rem-head h1 { margin: 0; }
.rem-panel h2 { font-size: 1.05rem; margin: 22px 0 8px; }
.rem-overdue { color: #c0392b; }
.rem-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rem-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; border-inline-start-width: 4px; }
.rem-item.unread { border-inline-start-color: var(--brand); }
.rem-done .rem-item { opacity: .65; }
.rem-main { display: grid; gap: 2px; min-width: 0; }
.rem-meta { color: var(--muted); font-size: .9rem; }
.rem-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.btn.small { padding: 4px 12px; font-size: .85rem; }
.rem-repeat { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.rem-prefs { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.rem-prefs th, .rem-prefs td { padding: 10px 6px; border-bottom: 1px solid var(--line); text-align: start; }
.form input[type=datetime-local], .form input[type=number] { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; }
.rem-badge { display: inline-block; min-width: 1.4em; padding: 0 6px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font-size: .75rem; text-align: center; }

/* --- Pets, media, household sharing, onboarding (feature: pets) --- */
.panel.wide { max-width: none; }
.pets-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 0; }
.pets-head h1 { margin: 0; letter-spacing: -.02em; }
.pet-card.archived, .pet-detail.archived { opacity: .85; }
.pet-card-head, .pet-detail-head { display: flex; align-items: center; gap: 14px; }
.pet-card h3 a { color: var(--text); text-decoration: none; }
.pet-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; background: var(--bg); border: 1px solid var(--line); }
.pet-avatar.big { width: 96px; height: 96px; }
.pet-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; }
.pet-avatar.big.pet-avatar-fallback { font-size: 3rem; }
.pet-detail-head h1 { margin: 0 0 2px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 6px; }
.facts div { min-width: 0; }
.facts dt { color: var(--muted); font-size: .82rem; }
.facts dd { margin: 0; font-weight: 600; margin-inline-start: 0; }
.card .quick { display: flex; gap: 14px; margin-top: 10px; }
.card .quick a { color: var(--brand); text-decoration: none; font-weight: 600; }
.badge { display: inline-block; margin: 4px 0 0; padding: 2px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .9rem; }
.table { width: 100%; border-collapse: collapse; }
.table td { padding: 8px 6px; border-bottom: 1px solid var(--line); }
.table td.end { text-align: end; }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.inline-form > div { min-width: 0; }
.form input[type=number], .form input[type=date], .form input[type=file], .form input[type=text], .form input[type=email], .form select { max-width: 100%; }
.inline-form input[type=text], .inline-form input[type=email], .inline-form input[type=date], .inline-form select { width: auto; min-width: 8em; padding: 10px 12px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.form input[type=date], .form input[type=file] { font: inherit; color: var(--text); }
.form input[type=date] { width: 100%; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.weight-chart { width: 100%; height: auto; max-height: 300px; display: block; margin: 8px 0; }
.weight-chart .grid-line { stroke: var(--line); stroke-width: 1; }
.weight-chart .axis-text { fill: var(--muted); font-size: 11px; }
.weight-chart .line { stroke: var(--brand); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.weight-chart .dot-pt { fill: var(--brand); stroke: var(--surface); stroke-width: 2; }
.weight-list { margin: 8px 0 16px; }
.weight-list summary { cursor: pointer; color: var(--brand); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 12px 0; }
.photo-grid figure { margin: 0; }
.photo-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.doc-list { padding-inline-start: 1.2em; }
.upload-row { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 14px; }
.upload-row .form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.steps { list-style: none; counter-reset: s; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.steps li { counter-increment: s; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.steps li::before { content: counter(s); width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.steps li span { color: var(--muted); }
.result-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.result-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }

/* --- Blog (BlogController) --- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.blog-head h1 { margin: 12px 0 8px; letter-spacing: -.02em; }
.blog-tabs { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 14px; }
.blog-tabs a { color: var(--text); text-decoration: none; padding: 4px 0; border-block-end: 2px solid transparent; }
.blog-tabs a[aria-current] { border-block-end-color: var(--brand); color: var(--brand); }
.blog-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.blog-filter input, .blog-filter select { padding: 9px 12px; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; max-width: 100%; }
.blog-filter input[type=search] { flex: 1 1 200px; }
.blog-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.blog-card { display: flex; flex-direction: column; gap: 6px; padding: 0 0 18px; overflow: hidden; }
.blog-card > :not(a:first-child), .blog-card > a:first-child:not(:has(img)) { margin-inline: 20px; }
.blog-card h3 { margin: 0; } .blog-card h3 a { color: var(--text); text-decoration: none; }
.blog-card h3 a:hover { color: var(--brand); }
.blog-card .blog-meta { margin-top: 18px; }
.blog-card .blog-cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-card .blog-cover + * { margin-top: 0; }
.blog-card small { margin-top: auto; border: 0; padding: 0; }
.blog-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.blog-tag { font-size: .8rem; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); text-decoration: none; }
.blog-tag.guide { border-color: var(--brand); color: var(--brand); }
.blog-post { max-width: 720px; margin: 8px auto 32px; }
.blog-post h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.15; letter-spacing: -.02em; margin: 12px 0 8px; }
.blog-hero { width: 100%; border-radius: var(--radius); margin: 12px 0; }
.blog-body { font-size: 1.05rem; line-height: 1.7; }
.blog-body h2 { margin: 1.8em 0 .5em; font-size: 1.4rem; } .blog-body h3 { margin: 1.5em 0 .4em; }
.blog-body img { max-width: 100%; height: auto; border-radius: 12px; }
.blog-body blockquote { margin-inline: 0; padding-inline-start: 16px; border-inline-start: 3px solid var(--brand); color: var(--muted); }
.blog-body pre { overflow: auto; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.blog-body table { border-collapse: collapse; } .blog-body td, .blog-body th { border: 1px solid var(--line); padding: 6px 10px; }
.blog-disclaimer { font-size: .9rem; border-block-start: 1px solid var(--line); padding-block-start: 14px; }
.blog-related { max-width: 1080px; margin: 0 auto 32px; }
.pager { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 40px; justify-content: center; }
.pager a, .pager span { display: block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; background: var(--surface); }
.pager .active a { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.pager .disabled span { opacity: .4; }
/* --- end Blog --- */

/* === Pet log / health log / activity (LogController, MeasurementController) === */
.log-page { padding: 8px 0 40px; }
.log-head h1 { margin: 12px 0 8px; letter-spacing: -.02em; }
.log-pets, .log-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.log-pets a, .log-tabs a { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); text-decoration: none; background: var(--surface); font-size: .95rem; }
.log-pets a[aria-current], .log-tabs a[aria-current] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.log-tabs.small a { padding: 4px 12px; font-size: .9rem; }
.log-toolbar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.log-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.btn.small { padding: 4px 12px; font-size: .85rem; }
.log-filter { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; margin: 8px 0 16px; }
.log-filter label { display: grid; gap: 2px; font-size: .88rem; color: var(--muted); }
.log-filter select, .log-filter input, .log-form input[type=number], .log-form input[type=date], .log-form input[type=datetime-local], .log-form textarea {
    padding: 8px 10px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; max-width: 100%;
}
.log-form input[type=number], .log-form input[type=date], .log-form input[type=datetime-local], .log-form textarea, .log-form select, .log-form input[type=text] { width: 100%; }
.log-formpanel { max-width: 640px; margin-inline: 0; }
.log-cost { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.log-attach { border: 1px dashed var(--line); border-radius: 12px; margin: 0 0 16px; padding: 10px 14px; }
.log-attach select { width: auto; margin-bottom: 8px; }
.log-count { color: var(--muted); font-size: .9rem; margin: 0 0 8px; }
.log-list { display: grid; gap: 10px; }
.log-event { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.log-event.cat-health { border-inline-start-color: #c0392b; }
.log-event.cat-care { border-inline-start-color: var(--accent); }
.log-event.cat-activity { border-inline-start-color: var(--brand); }
.log-icon { font-size: 1.5rem; line-height: 1.2; }
.log-body { flex: 1; min-width: 0; }
.log-body h3 { margin: 0; font-size: 1.05rem; }
.log-meta { margin: 2px 0 6px; color: var(--muted); font-size: .88rem; }
.log-details { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 6px; }
.log-details div { display: flex; gap: 6px; }
.log-details dt { color: var(--muted); font-size: .9rem; }
.log-details dt::after { content: ":"; }
.log-details dd { margin: 0; font-size: .95rem; }
.log-notes { margin: 4px 0 0; white-space: normal; overflow-wrap: anywhere; }
.log-files { list-style: none; margin: 6px 0 0; padding: 0; display: flex; gap: 10px; font-size: .9rem; }
.log-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: .9rem; }
.danger-link { color: #c0392b; }
.log-empty { text-align: center; padding: 32px 16px; color: var(--muted); }
.log-pager { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 16px 0; }
.log-pager a, .log-pager span { display: inline-block; padding: 5px 12px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; }
.log-pager .active a, .log-pager .active span { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.log-pager .disabled { opacity: .5; }
.log-subtitle { margin: 16px 0 6px; color: var(--muted); font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; }
.log-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.log-types a { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; font-weight: 600; }
.log-types a:hover { border-color: var(--brand); }
.log-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.log-grid .card h2 { font-size: 1.1rem; margin: 0 0 8px; }
.log-grid .card h3 { font-size: 1rem; margin: 12px 0 4px; }
.log-plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.log-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.log-table th, .log-table td { text-align: start; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.log-table th { color: var(--muted); font-weight: 600; font-size: .85rem; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: .82rem; white-space: nowrap; }
.badge.status-overdue { border-color: #c0392b; color: #c0392b; font-weight: 700; }
.badge.status-due_soon { border-color: var(--accent); }
.badge.status-ok, .badge.status-complete { border-color: var(--brand); color: var(--brand); }
.badge.status-not_started { color: var(--muted); }
.log-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 12px 0 20px; }
.log-kpis .card { padding: 14px 16px; }
.log-kpis strong { display: block; font-size: 1.6rem; letter-spacing: -.02em; }
.log-kpis span { color: var(--muted); font-size: .9rem; }
.log-chart { margin: 8px 0 16px; }
.log-chart svg { width: 100%; height: auto; max-width: 640px; display: block; }
.log-chart figcaption { color: var(--muted); font-size: .85rem; }
.log-chart .axis { stroke: var(--line); stroke-width: 1; }
.log-chart .line { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linejoin: round; }
.log-chart .dot, .log-chart .bar { fill: var(--brand); }
.log-chart .tick { fill: var(--muted); font-size: 11px; }
@media (max-width: 560px) {
    .log-event { flex-wrap: wrap; }
    .log-actions { flex-direction: row; width: 100%; gap: 14px; }
    .log-cost { grid-template-columns: 1fr 1fr; }
}

/* --- Places directory + map (feature: places) --- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.directory h1, .place-detail h1 { letter-spacing: -.02em; margin: 12px 0; }
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .9rem; min-width: 140px; }
.filters label.grow { flex: 1 1 220px; }
.filters input[type=search], .filters input[type=text], .filters select, .map-controls select {
    padding: 9px 12px; font: inherit; font-weight: 400; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; width: 100%;
}
.filters .checks { display: flex; flex-wrap: wrap; gap: 4px 16px; border: 0; margin: 0; padding: 0; min-width: 0; }
.filters .checks label { flex-direction: row; align-items: center; gap: 6px; font-weight: 400; min-width: 0; }
.filters .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.filters .btn, .map-controls .btn { padding: 7px 14px; }
.result-count { color: var(--muted); margin: 16px 0 8px; }
.place-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.place-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.place-card h2 { font-size: 1.05rem; margin: 0 0 6px; overflow-wrap: anywhere; }
.place-card h2 a { text-decoration: none; }
.place-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.place-where { margin: 2px 0; color: var(--muted); font-size: .92rem; overflow-wrap: anywhere; }
.tag { display: inline-block; padding: 1px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; color: var(--muted); background: var(--bg); }
.tag.ok { border-color: #2e9e5b; color: #2e9e5b; }
.tag.accent { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 30%, transparent); }
.tag.danger { border-color: #c0392b; color: #c0392b; }
.pager { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 20px 0; }
.pager a, .pager span { display: inline-block; min-width: 38px; padding: 6px 12px; text-align: center; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; background: var(--surface); }
.pager .active a, .pager .active span { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.pager .disabled span { opacity: .45; }

.crumbs { font-size: .9rem; margin-top: 8px; }
.detail-grid { display: grid; gap: 16px; }
.panel-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; min-width: 0; }
.panel-block h2, .reviews h2 { font-size: 1.1rem; margin: 0 0 10px; }
.panel-block h2:not(:first-child) { margin-top: 20px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.hours { border-collapse: collapse; width: 100%; }
.hours th, .hours td { text-align: start; padding: 4px 0; font-weight: 400; vertical-align: top; }
.hours th { color: var(--muted); padding-inline-end: 16px; white-space: nowrap; }
.small { font-size: .85rem; }
.muted { color: var(--muted); }
.attribution { margin: 16px 0; }
.reviews { margin: 24px 0; max-width: 640px; }
.review { border-bottom: 1px solid var(--line); padding: 10px 0; }
.review p { margin: 4px 0; }
.stars { color: var(--accent); letter-spacing: 2px; }
.reviews .form textarea { width: 100%; padding: 10px 12px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.rating-choices label { display: inline-block !important; margin-inline-end: 14px; color: var(--accent); }
@media (min-width: 820px) { .detail-grid { grid-template-columns: 1fr 1fr; } }

.map-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 12px; }
.map-controls label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.map-controls select { width: auto; }
.map-box { height: min(70vh, 640px); min-height: 360px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; z-index: 0; background: var(--surface); }
.map-box.small { height: 280px; min-height: 0; }
.map-popup .muted { color: #555; }
@media (prefers-color-scheme: dark) {
    /* Dim and invert the light OSM tiles; markers and popups keep their own colours. */
    :root:not([data-mode=light]) .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9); }
    :root:not([data-mode=light]) .leaflet-container { background: #1b2424; }
    :root:not([data-mode=light]) .leaflet-bar a, :root:not([data-mode=light]) .leaflet-control-attribution { background-color: var(--surface) !important; color: var(--text) !important; }
    :root:not([data-mode=light]) .leaflet-control-attribution a { color: var(--brand) !important; }
    :root:not([data-mode=light]) .leaflet-popup-content-wrapper, :root:not([data-mode=light]) .leaflet-popup-tip { background: var(--surface); color: var(--text); }
    :root:not([data-mode=light]) .map-popup .muted { color: var(--muted); }
}
:root[data-mode=dark] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9); }
:root[data-mode=dark] .leaflet-container { background: #1b2424; }
:root[data-mode=dark] .leaflet-bar a, :root[data-mode=dark] .leaflet-control-attribution { background-color: var(--surface) !important; color: var(--text) !important; }
:root[data-mode=dark] .leaflet-control-attribution a { color: var(--brand) !important; }
:root[data-mode=dark] .leaflet-popup-content-wrapper, :root[data-mode=dark] .leaflet-popup-tip { background: var(--surface); color: var(--text); }
:root[data-mode=dark] .map-popup .muted { color: var(--muted); }
/* --- end places --- */

footer .legal { display: flex; gap: 14px; margin-top: 6px; }
.legal-page { max-width: 46rem; }
.legal-page h2 { margin-top: 1.6em; }

/* --- expenses --- */
.expense-page .exp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.exp-totals { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.exp-total { font-weight: 650; }
.exp-scroll { overflow-x: auto; }
.expense-page .log-table .num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.exp-row-actions { white-space: nowrap; }
.exp-row-actions > * { margin-inline-end: 10px; }
.exp-pager { display: flex; gap: 14px; align-items: center; margin: 12px 0; }
.exp-currency { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.exp-currency input { padding: 6px 10px; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.exp-period { display: flex; gap: 14px; align-items: center; font-size: 1.1rem; }
.exp-period a { font-size: 1.4rem; text-decoration: none; padding: 0 8px; }
.exp-report h3 { font-size: 1rem; margin: 20px 0 6px; }
.exp-chart { width: 100%; height: auto; max-width: 640px; display: block; }
.exp-bar { fill: var(--brand); }
.exp-label { fill: var(--text); font-size: 12px; }
[dir=rtl] .exp-chart { direction: ltr; }
/* --- end expenses --- */

/* --- Pet passport, share pages, memorial (dark mode and RTL friendly: logical properties, theme variables) --- */
.passport-form .switch, .vet-links + p, .switch { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.field-list { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 14px 0; }
.field-list legend { padding: 0 6px; color: var(--muted); font-size: .9rem; }
.field-row { display: grid; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.field-row:last-child { border-bottom: 0; }
.field-row > label { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.field-inputs { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-start: 26px; }
.field-inputs input[type=text] { flex: 1 1 12rem; min-inline-size: 0; padding: 9px 12px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.qr-box { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.qr { flex: none; background: #fff; padding: 4px; border-radius: 12px; line-height: 0; }
.qr svg { max-inline-size: 100%; height: auto; }
.qr-side { flex: 1 1 260px; min-inline-size: 0; }
.vet-links td input[type=text] { inline-size: 100%; padding: 9px 12px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.btn.small { padding: 4px 12px; font-size: .85rem; }
.nowrap { white-space: nowrap; }

.share-wrap { max-width: 720px; padding-block: 24px; }
.share-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.share-card.wide { max-width: none; }
.share-card h1 { margin: 0 0 4px; letter-spacing: -.02em; }
.share-card h2 { font-size: 1.1rem; margin: 26px 0 8px; }
.share-kicker { margin: 0 0 8px; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.share-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.share-photo { inline-size: 96px; block-size: 96px; object-fit: cover; border-radius: 50%; border: 1px solid var(--line); }
.share-facts { display: grid; gap: 10px; margin: 16px 0; }
.share-fact { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.share-fact.key { border-color: var(--brand); }
.share-fact dt { color: var(--muted); font-size: .85rem; }
.share-fact dd { margin: 0; font-size: 1.15rem; font-weight: 600; overflow-wrap: anywhere; }
.share-note, .share-foot { font-size: .85rem; }
.share-foot { text-align: center; color: var(--muted); }
.doc-list { padding-inline-start: 1.2em; }

.tribute { text-align: center; }
.tribute-dates { margin: 0 0 14px; }
.tribute-text { max-inline-size: 36em; margin-inline: auto; text-align: start; font-size: 1.08rem; line-height: 1.7; }
.tribute-photos { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tribute-photos img { inline-size: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); display: block; }
.tribute-photos.pick label { position: relative; display: block; cursor: pointer; }
.tribute-photos.pick input { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; inline-size: 20px; block-size: 20px; }
.tribute-input { inline-size: 100%; padding: 10px 12px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.memorial .pet-avatar.big { margin-inline: auto; }

/* printable A6 emergency card: always black on white, one card per page */
.print-page { background: #fff; color: #000; }
.print-bar { display: flex; gap: 16px; align-items: center; padding: 12px 16px; }
.a6-card { inline-size: 105mm; block-size: 148mm; margin: 12px auto; padding: 8mm; border: 2px solid #000; border-radius: 6mm; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; background: #fff; color: #000; }
.a6-card h1 { margin: 0; font-size: 26pt; line-height: 1.1; }
.a6-kicker { margin: 0; font-size: 12pt; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.a6-qr svg { inline-size: 62mm; block-size: 62mm; }
.a6-contact { margin: 0; font-size: 14pt; font-weight: 700; }
.a6-logo { block-size: 15mm; inline-size: auto; }
.a6-url { margin: 0; font-size: 7pt; overflow-wrap: anywhere; color: #333; }
@media print {
    @page { size: A6; margin: 0; }
    .no-print { display: none !important; }
    .a6-card { margin: 0; border-radius: 0; border-width: 1.5px; inline-size: 105mm; block-size: 148mm; page-break-inside: avoid; }
}

/* --- Icons (common\widgets\Icon) and section header (common\components\Sections) --- */
.icon { flex: none; vertical-align: -.22em; }
.icon:not([width]) { width: 1.2em; height: 1.2em; }
.icon-fill { fill: currentColor; }
.nav a, .user-nav a, .lang summary { display: inline-flex; align-items: center; gap: 6px; }
.nav-icon { opacity: .75; }
.nav-toggle .icon, .user-nav .icon { vertical-align: middle; }

/* The big title is the current section; --section-h (hue) comes from Sections::resolve() and the colours adapt to dark mode. */
.top { --sec: hsl(var(--section-h, 170) 55% 34%); border-block-end: 2px solid color-mix(in srgb, var(--sec) 22%, transparent); }
@media (prefers-color-scheme: dark) {
    :root:not([data-mode=light]) .top { --sec: hsl(var(--section-h, 170) 60% 70%); }
}
:root[data-mode=dark] .top { --sec: hsl(var(--section-h, 170) 60% 70%); }
.section-head { display: inline-flex; align-items: center; gap: 12px; letter-spacing: normal; font-size: 1rem; }
.section-icon { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 14px; flex: none; color: var(--sec); background: color-mix(in srgb, var(--sec) 14%, transparent); }
.section-text { display: flex; flex-direction: column; line-height: 1.1; }
.section-title { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.section-by { margin-block-start: 3px; font-size: .74rem; font-weight: 600; letter-spacing: .02em; color: var(--muted); }

.card .card-icon { display: grid; place-items: center; inline-size: 44px; block-size: 44px; margin-block-end: 10px; border-radius: 12px; color: var(--brand); background: color-mix(in srgb, var(--brand) 13%, transparent); }
.card .card-icon .icon { width: 24px; height: 24px; }
.log-icon { display: grid; place-items: center; color: var(--brand); }
.log-icon .icon { width: 1.6rem; height: 1.6rem; }
.pet-avatar-fallback { color: var(--brand); }
.pet-avatar-fallback .icon { width: 55%; height: 55%; }
.stars .icon { width: 1em; height: 1em; vertical-align: -.12em; }
.rating-choices .icon { width: 1em; height: 1em; vertical-align: -.12em; color: var(--accent); }
.tag .icon { width: 1em; height: 1em; vertical-align: -.15em; }
.sev .icon, .toxic-head .icon { vertical-align: -.2em; }

/* --- Home page --- */
:root { --map-bg: #e9e8e3; --map-line: #f7f6f2; --map-block: #dfded8; --map-water: #d3dcdf; --map-pin: #b9b7ae; }
@media (prefers-color-scheme: dark) {
    :root:not([data-mode=light]) { --map-bg: #1b2323; --map-line: #232d2d; --map-block: #202929; --map-water: #1c2a2e; --map-pin: #3a4848; }
}
:root[data-mode=dark] { --map-bg: #1b2323; --map-line: #232d2d; --map-block: #202929; --map-water: #1c2a2e; --map-pin: #3a4848; }
.home-hero { position: relative; margin-inline: -16px; padding: 56px 16px 28px; overflow: hidden; isolation: isolate; border-radius: 0 0 var(--radius) var(--radius); }
.home-map { position: absolute; inset: 0; z-index: -2; filter: grayscale(1); }
.home-map-svg { display: block; inline-size: 100%; block-size: 100%; }
.home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 78%, transparent), color-mix(in srgb, var(--bg) 40%, transparent) 55%, color-mix(in srgb, var(--bg) 88%, transparent)); }
.home-hero-inner { max-inline-size: 1048px; margin-inline: auto; }
.home-hero h1 { font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 14px; max-inline-size: 18em; }
.home-hero .lead { color: var(--text); opacity: .82; font-size: 1.12rem; margin: 0 0 24px; max-inline-size: 36em; }
.home-hero .btn.ghost { background: var(--surface); }
.home-chips { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.home-chips a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--surface); color: var(--text); border: 1px solid var(--line); text-decoration: none; font-size: .95rem; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.home-chips a:hover, .home-chips a:focus-visible { border-color: var(--brand); color: var(--brand); }
.home-chips strong { color: var(--brand); font-variant-numeric: tabular-nums; }
.home-stats { margin-block-start: 8px; }
.home-section { padding-block: 28px 8px; }
.home-section > h2, .home-section-head h2 { margin: 0 0 14px; font-size: 1.5rem; letter-spacing: -.02em; }
.home-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.home-section-head h2 { margin-block-end: 14px; }
.tool-card { display: block; color: inherit; text-decoration: none; }
.tool-card:hover, .tool-card:focus-visible { border-color: var(--brand); }
.tool-go { display: inline-flex; align-items: center; gap: 4px; margin-block-start: 12px; color: var(--brand); font-weight: 650; }
[dir="rtl"] .rtl-flip { transform: scaleX(-1); }
.home-band { margin-block: 32px 24px; padding: 36px 20px; text-align: center; border-radius: var(--radius); background: color-mix(in srgb, var(--brand) 12%, var(--surface)); border: 1px solid var(--line); }
.home-band h2 { margin: 0 0 16px; letter-spacing: -.02em; }
.home-quick { display: grid; gap: 16px; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.quick-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.quick-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.quick-card h2 { margin: 0 0 8px; font-size: 1.05rem; }
.quick-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.quick-card li { display: flex; justify-content: space-between; gap: 10px; }
.quick-card time { color: var(--muted); white-space: nowrap; }
.quick-card .danger-link { color: #c0392b; font-weight: 650; }

/* --- App shell: header, full-screen menu, pet switcher, mobile bottom bar --- */
.js-only { display: none; }
.js .js-only { display: flex; }
.skip-link { position: absolute; inset-inline-start: 8px; inset-block-start: -60px; z-index: 100; padding: 8px 14px; background: var(--brand); color: var(--brand-ink); border-radius: 8px; }
.skip-link:focus { inset-block-start: 8px; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 70%, transparent); outline-offset: 2px; }
html.dialog-open { overflow: hidden; }

.top { flex-wrap: nowrap; justify-content: flex-start; gap: 10px 14px; }
.menu-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; font-weight: 650; }
.menu-btn:hover { border-color: var(--brand); color: var(--brand); }
.top-end { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.top-end > a { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.bell { position: relative; padding: 8px; border-radius: 10px; color: var(--text); }
.bell .rem-badge { position: absolute; inset-block-start: -2px; inset-inline-end: -4px; padding: 0 5px; font-size: .68rem; }

.pet-switch { position: relative; }
.pet-switch summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; max-inline-size: 15rem; }
.pet-switch summary::-webkit-details-marker { display: none; }
.pet-switch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.pet-switch-pop { position: absolute; inset-inline-start: 0; z-index: 20; margin-block-start: 6px; min-inline-size: 15rem; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.14); }
.pet-chip-img { inline-size: 28px; block-size: 28px; border-radius: 50%; object-fit: cover; flex: none; background: var(--bg); border: 1px solid var(--line); }
.pet-chip-icon { display: inline-grid; place-items: center; color: var(--brand); }
.pet-chip-icon .icon { inline-size: 70%; block-size: 70%; }
.pet-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pet-list form { display: block; }
.pet-list button { inline-size: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.pet-list button:hover, .pet-list button[aria-current] { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.pet-list button span:nth-child(2) { flex: 1; }
.pet-list-check { color: var(--brand); }
.pet-list-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-block-start: 8px; padding-block-start: 8px; border-block-start: 1px solid var(--line); }
.pet-list-links a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 6px 4px; }

/* dialogs: full-screen menu and bottom sheet */
.overlay[hidden], .sheet[hidden] { display: none; }
.overlay { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--bg); opacity: 0; transition: opacity .18s ease; }
.overlay.is-open { opacity: 1; }
.overlay-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-block-end: 1px solid var(--line); background: var(--surface); }
.overlay-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.15rem; }
.overlay-close { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.overlay-body, .menu-page { overflow-y: auto; padding: 16px; max-inline-size: 1080px; inline-size: 100%; margin-inline: auto; overscroll-behavior: contain; }
.menu-page { padding-inline: 0; overflow: visible; }
.menu-search { align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); margin-block-end: 8px; }
.menu-search input { flex: 1; min-inline-size: 0; padding: 14px 0; border: 0; background: none; color: var(--text); font: inherit; }
.menu-search input:focus { outline: none; }
.menu-search:focus-within { border-color: var(--brand); }
.menu-empty { color: var(--muted); }
.menu-group h2 { margin: 22px 0 10px; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.menu-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.mcard { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; }
.mcard[hidden] { display: none; }
.mcard:hover, .mcard:focus-visible, .mcard[aria-current] { border-color: var(--brand); }
.mcard.promo { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); border-color: var(--brand); grid-column: 1 / -1; }
.mcard-icon { flex: none; display: grid; place-items: center; inline-size: 42px; block-size: 42px; border-radius: 12px; color: var(--brand); background: color-mix(in srgb, var(--brand) 13%, transparent); }
.mcard-text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.mcard-text small { color: var(--muted); line-height: 1.35; }
.pwa-slot:empty { display: none; }
.menu-footer { margin-block: 28px 12px; padding-block-start: 16px; border-block-start: 1px solid var(--line); }
.menu-footer h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .95rem; color: var(--muted); }
.menu-footer ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.menu-footer li a { display: block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; background: var(--surface); }
.menu-footer li a[aria-current] { border-color: var(--brand); color: var(--brand); }

.sheet { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; opacity: 0; transition: opacity .18s ease; }
.sheet.is-open { opacity: 1; }
.sheet-panel { inline-size: 100%; max-block-size: 80vh; overflow-y: auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--surface); border-radius: 20px 20px 0 0; transform: translateY(24px); transition: transform .2s ease; }
.sheet.is-open .sheet-panel { transform: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 8px; }
.sheet .pet-list button { padding-block: 12px; }

.tabbar { display: none; }
@media (max-width: 768px) {
    .desktop-only, .menu-btn { display: none !important; }
    .top { padding-block: 10px; }
    body { padding-block-end: calc(76px + env(safe-area-inset-bottom)); }
    .section-title { font-size: 1.25rem; }
    .tabbar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 50; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); border-block-start: 1px solid var(--line); }
    .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-block-size: 56px; padding: 4px 2px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .72rem; text-decoration: none; cursor: pointer; border-radius: 12px; min-inline-size: 0; }
    .tab span:last-child { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tab.on { color: var(--brand); font-weight: 650; }
    .tab.centre { margin-block-start: -26px; color: var(--text); }
    .centre-btn { display: grid; place-items: center; inline-size: 60px; block-size: 60px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); border: 4px solid var(--surface); box-shadow: 0 4px 14px rgba(0,0,0,.2); overflow: hidden; }
    .centre-btn .pet-chip-img { inline-size: 100%; block-size: 100%; border: 0; background: var(--surface); }
    .tab.on .centre-btn { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 40%, transparent), 0 4px 14px rgba(0,0,0,.2); }
}
@media (min-width: 769px) { .sheet { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .overlay, .sheet, .sheet-panel { transition: none; } }

/* --- Logo (common\widgets\Logo): two mask layers painted with the theme --- */
.logo-art { position: relative; display: inline-block; flex: none; vertical-align: middle; inline-size: 32px; }
.logo-art--mark { aspect-ratio: 800 / 740; }
.logo-art--full { aspect-ratio: 1374 / 1145; }
.logo-art i { position: absolute; inset: 0; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.logo-art .logo-main { background: var(--brand); }
.logo-art .logo-accent { background: var(--accent); }
.logo-art--mark .logo-main { -webkit-mask-image: url(/img/logo-mark-main.svg); mask-image: url(/img/logo-mark-main.svg); }
.logo-art--mark .logo-accent { -webkit-mask-image: url(/img/logo-mark-accent.svg); mask-image: url(/img/logo-mark-accent.svg); }
.logo-art--full .logo-main { -webkit-mask-image: url(/img/logo-main.svg); mask-image: url(/img/logo-main.svg); }
.logo-art--full .logo-accent { -webkit-mask-image: url(/img/logo-accent.svg); mask-image: url(/img/logo-accent.svg); }
.logo-art--mono .logo-main, .logo-art--mono .logo-accent { background: currentColor; }
.section-icon .logo-art { inline-size: 34px; }
.brand-foot { display: flex; align-items: center; gap: 10px; margin-block-end: 10px; font-weight: 700; color: var(--text); }
.brand-foot .logo-art { inline-size: 30px; }
.panel .auth-logo, .home-logo { display: block; margin: 0 auto 14px; }
.home-logo { margin-inline: 0; }


/* --- Public guides (/guides): category grid, listings, entry pages, compare, stocking --- */
.guides-home .guide-search, .guide-filters .guide-filter-main { display: grid; gap: 12px; }
.guide-search { grid-template-columns: 1fr auto; align-items: end; margin-block: 16px; }
.guide-search input[type=search], .guide-filters input[type=search], .slot-search input[type=search] { inline-size: 100%; padding: 10px 12px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.category-grid { list-style: none; margin: 16px 0 24px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.category-card { padding: 16px; display: grid; gap: 10px; align-content: start; }
.category-link { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; text-decoration: none; color: var(--text); }
.category-icon { grid-row: span 2; display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 14px; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }
.category-name { font-weight: 700; font-size: 1.1rem; }
.category-count { color: var(--muted); font-size: .9rem; }
.category-link:hover .category-name { color: var(--brand); text-decoration: underline; }
.subcategories, .chip-list, .guide-tools { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.subcategories a { font-size: .9rem; }
.guide-tools { flex-direction: column; gap: 6px; margin-block-end: 8px; }
.crumbs { font-size: .9rem; color: var(--muted); margin-block-end: 8px; }
.crumbs a { color: var(--muted); }
.h-icon { display: inline-grid; vertical-align: middle; color: var(--brand); }
a.chip { text-decoration: none; color: var(--text); }
a.chip:hover { border-color: var(--brand); }
.guide-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); margin-block: 12px 20px; }
.guide-card { display: block; text-decoration: none; color: var(--text); padding: 16px; }
.guide-card:hover { border-color: var(--brand); }
.guide-card h3 { margin: 6px 0 2px; }
.guide-card p { margin: 0 0 8px; font-size: .9rem; }
.guide-card-icon { display: inline-grid; color: var(--brand); }
.card .sci, .sci { display: block; margin: 6px 0 0; padding: 0; border: 0; border-radius: 0; font-style: italic; color: var(--muted); font-size: .82rem; }
.chip.sci { display: inline-block; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; margin: 0; }
.rank { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, transparent); }
.rank-cross { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.rank-variety, .rank-morph { color: var(--muted); background: color-mix(in srgb, var(--muted) 16%, transparent); }
.guide-filters { margin-block: 12px; }
.guide-filter-main { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); align-items: end; }
.more-filters { margin-block: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; }
.more-filters summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.guide-filter-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); padding-block: 8px; }
.guide-filters select { inline-size: 100%; padding: 10px 12px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.range-filter { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.range-filter legend { grid-column: 1 / -1; font-weight: 600; padding: 0; margin-block-end: 4px; }
.range-filter input { inline-size: 100%; padding: 10px 12px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }

/* entry page */
.guide-head h1 { margin-block-end: 6px; }
.guide-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.trust { margin: 10px 0 16px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); font-size: .93rem; }
.trust-ai { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.trust-ok { background: color-mix(in srgb, var(--brand) 9%, transparent); }
.guide-layout { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.guide-body { min-width: 0; }
.guide-summary { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; align-self: start; }
.guide-photo { display: grid; place-items: center; align-content: center; gap: 6px; aspect-ratio: 16 / 7; border-radius: 12px; border: 1px dashed var(--line); color: var(--muted); background: var(--surface); }
.guide-photo small { font-size: .78rem; }
.summary-list { margin: 14px 0; display: grid; gap: 2px 12px; grid-template-columns: auto 1fr; font-size: .94rem; }
.summary-list dt { color: var(--muted); }
.summary-list dd { margin: 0; text-align: end; font-weight: 600; }
.summary-list .bar { inline-size: 6rem; display: inline-block; vertical-align: middle; }
.fact-value { display: block; }
.fact-context { color: var(--muted); font-weight: 400; font-size: .85em; }
.guide-cta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.guide-nav { position: sticky; top: 0; z-index: 3; margin: 0 -4px 12px; padding: 6px 4px; background: var(--surface); border-block-end: 1px solid var(--line); overflow-x: auto; }
.guide-nav ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.guide-nav a { display: block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-size: .9rem; color: var(--text); }
.guide-nav a:hover, .guide-nav a:focus-visible { border-color: var(--brand); color: var(--brand); }
.guide-section { padding-block: 8px 18px; scroll-margin-top: 64px; border-block-end: 1px solid var(--line); }
.guide-section h2 { margin-block-end: 10px; }
.guide-section h3 { margin-block: 18px 6px; font-size: 1.05rem; }
.lead { font-size: 1.08rem; }
.note { padding: 10px 14px; border-inline-start: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 8px; }
.facts { display: grid; gap: 4px 16px; grid-template-columns: 1fr; margin: 10px 0; }
.facts dt { font-weight: 600; margin-block-start: 8px; }
.facts dd { margin: 0; }
@media (min-width: 640px) { .facts { grid-template-columns: 14rem 1fr; } .facts dt { margin: 0; } }
.condition { border: 1px solid var(--line); border-inline-start-width: 6px; border-radius: 12px; padding: 12px 16px; margin-block: 12px; background: var(--surface); }
.condition h3 { margin: 0; }
.condition.sev-emergency { border-inline-start-color: #c0392b; }
.condition.sev-serious { border-inline-start-color: #e67e22; }
.condition.sev-moderate { border-inline-start-color: var(--accent); }
.condition.sev-mild { border-inline-start-color: var(--brand); }
.inherited-list, .care-list, .equipment-list, .notable-list, .legal-list, .pair-list, .slot-results { padding-inline-start: 1.1rem; }
.care-list { list-style: none; padding: 0; }
.care-list li { padding-block: 8px; border-block-end: 1px solid var(--line); }
.care-list p { margin: 4px 0 0 1.7rem; color: var(--muted); }
.care-task { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-weight: 400 !important; cursor: pointer; }
.care-task input { margin: 0 !important; inline-size: 1.15rem; block-size: 1.15rem; }
.care-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-block: 14px 6px; }
.care-actions select { padding: 10px 12px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.compat-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.compat { border-radius: 12px; padding: 4px 14px 10px; border: 1px solid var(--line); border-inline-start-width: 6px; }
.compat h3 { margin-block-start: 10px; }
.compat ul { margin: 0; padding-inline-start: 1.1rem; }
.compat-good { border-inline-start-color: #2e7d4f; }
.compat-careful { border-inline-start-color: #c98a12; }
.compat-avoid { border-inline-start-color: #c0392b; }
li.compat-good, li.compat-careful, li.compat-avoid, p.verdict { padding: 8px 12px; border-radius: 8px; border-inline-start: 6px solid; list-style: none; margin-block: 6px; }
li.compat-good, p.verdict.compat-good { border-color: #2e7d4f; background: color-mix(in srgb, #2e7d4f 10%, transparent); }
li.compat-careful, p.verdict.compat-careful { border-color: #c98a12; background: color-mix(in srgb, #c98a12 12%, transparent); }
li.compat-avoid, p.verdict.compat-avoid { border-color: #c0392b; background: color-mix(in srgb, #c0392b 10%, transparent); }
.setup-template { border: 1px solid var(--line); border-radius: 12px; padding: 4px 16px 10px; margin-block: 10px; }
.tree, .tree ul { list-style: none; margin: 4px 0; padding-inline-start: 1.2rem; border-inline-start: 2px solid var(--line); }
.tree { border: 0; padding: 0; }
.tree li { padding-block: 3px; }
.estimate-note { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.cost-controls { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-block: 12px; }
.cost-controls select, .cost-controls input, .stocking-form select, .stocking-form input[type=number], .stocking-form #tank { inline-size: 100%; padding: 10px 12px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.cost-totals { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin-block: 14px; }
.cost-total { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); display: grid; gap: 2px; }
.cost-total strong { font-size: 1.5rem; letter-spacing: -.02em; }
.cost-total small, .cost-label { color: var(--muted); font-size: .85rem; }
.table-wrap { overflow-x: auto; margin-block: 8px 16px; }
.data-table { border-collapse: collapse; inline-size: 100%; font-size: .94rem; }
.data-table th, .data-table td { padding: 8px 10px; border-block-end: 1px solid var(--line); text-align: start; vertical-align: top; }
.data-table thead th, .data-table tfoot th, .data-table tfoot td { font-weight: 700; }
.data-table .num { text-align: end; white-space: nowrap; }
.data-table tbody th[scope=row] { font-weight: 600; }
.data-table .qty { inline-size: 6rem; padding: 6px 8px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.compare-table th[scope=col] { min-inline-size: 9rem; }
.compare-table .group-head th { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.compare-table td.compat-good { color: #2e7d4f; font-weight: 700; }
.compare-table td.compat-careful { color: #8a6410; font-weight: 700; }
.compare-table td.compat-avoid { color: #c0392b; font-weight: 700; }
.compare-slots { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-block: 14px; }
.compare-slot h2 { font-size: 1.1rem; margin: 4px 0 0; }
.slot-search { display: grid; gap: 6px; }
.slot-search label { font-weight: 600; }
.stocking-row { display: grid; grid-template-columns: 1fr 6rem; gap: 10px; margin-block: 8px; }
.stocking-form fieldset { border: 0; padding: 0; margin: 0 0 12px; }
.stocking-form legend { font-weight: 700; padding: 0; }
.stocking-result { margin-block: 20px; }
.compat-good .muted, .compat-avoid .muted, .compat-careful .muted { color: var(--muted); }
@media (min-width: 900px) {
    .guide-layout { grid-template-columns: 17rem minmax(0, 1fr); }
    .guide-photo { aspect-ratio: 4 / 3; }
    .guide-summary { position: sticky; top: 12px; }
    .guide-nav { position: static; border: 0; padding: 0; margin: 0 0 8px; overflow: visible; background: none; }
    .guide-nav ul { flex-wrap: wrap; white-space: normal; }
    .guide-section { scroll-margin-top: 16px; }
}
@media (max-width: 480px) {
    .guide-search { grid-template-columns: 1fr; }
    .stocking-row { grid-template-columns: 1fr 5rem; }
}



/* --- Profile tabs --- */
.profile-tabs { display: flex; gap: 4px; max-inline-size: 560px; margin: 16px auto 0; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.profile-tabs a { flex: 1; padding: 7px 10px; border-radius: 999px; text-align: center; font-size: .9rem; font-weight: 650; color: var(--text); text-decoration: none; }
.profile-tabs a[aria-current] { background: var(--brand); color: var(--brand-ink); }
.legal-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.panel h3 { margin: 18px 0 8px; font-size: 1rem; }

/* --- Footer (desktop; hidden on mobile where the menu and Profile > Security carry the links) --- */
.site-footer { margin-block-start: 40px; padding: 28px 0 40px; border-block-start: 1px solid var(--line); }
.foot-grid { display: grid; gap: 24px; grid-template-columns: 1.4fr repeat(4, 1fr); }
.foot-col h2 { margin: 0 0 8px; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.foot-col ul, .webring { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot-col a, .webring a { color: var(--muted); text-decoration: none; font-size: .92rem; }
.foot-col a:hover, .webring a:hover { color: var(--brand); text-decoration: underline; }
.webring [aria-current] { font-size: .92rem; font-weight: 650; color: var(--text); }
.foot-brand p { margin: 6px 0 0; font-size: .9rem; max-inline-size: 22rem; }
.foot-small { margin: 24px 0 0; }
.about-list { padding-inline-start: 1.1rem; }
.about .home-logo { margin-block-end: 8px; }
.panel .webring { margin-block-start: 8px; }
@media (max-width: 960px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 768px) { .site-footer { display: none; } }

/* --- Soft (neumorphic) themes: data-style="soft" on <html>; the theme sets --elev (raised), --elev-sm, --elev-in (inset) --- */
[data-style=soft] :is(.panel, .card, .hero-card, .quick-card, .mcard, .sheet-panel, .overlay-bar, .home-chips a, .stats, .profile-tabs, .tabbar) { box-shadow: var(--elev); border-color: transparent; }
[data-style=soft] .tabbar { box-shadow: var(--elev); border-block-start-color: transparent; }
[data-style=soft] .btn { box-shadow: var(--elev-sm); border-color: transparent; }
[data-style=soft] .btn:active { box-shadow: var(--elev-in); }
[data-style=soft] .btn.ghost { color: var(--brand); }
[data-style=soft] .form :is(input, select, textarea) { box-shadow: var(--elev-in); border-color: transparent; background: var(--bg); }
[data-style=soft] :is(.profile-tabs a[aria-current], .theme-option:has(input:checked)) { box-shadow: var(--elev-in); }
[data-style=soft] .profile-tabs { box-shadow: var(--elev-in); }
[data-style=soft] .theme-option { box-shadow: var(--elev-sm); border-color: transparent; }
[data-style=soft] .section-icon, [data-style=soft] .card .card-icon, [data-style=soft] .mcard-icon { box-shadow: var(--elev-in); }
[data-style=soft] .profile-tabs a[aria-current] { background: transparent; color: var(--brand); }

/* Public pet profile: photo picker on the owner page */
.tribute-photos.pickable label { display: block; position: relative; cursor: pointer; }
.tribute-photos.pickable input[type=checkbox] { position: absolute; top: 6px; inset-inline-start: 6px; width: 20px; height: 20px; }

/* Public pet page: owner bar and section switches (edit mode) */
.owner-bar { position: sticky; top: 0; z-index: 5; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; }
.owner-bar-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.owner-bar-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.owner-bar-more { margin-top: 8px; }
.owner-bar-grid { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; margin-top: 8px; }
@media (max-width: 560px) { .owner-bar-grid { grid-template-columns: 1fr; } }
.pp-switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pp-switch.big { font-size: 1.1rem; }
.pp-status.bad { color: var(--danger, #c0392b); }
.pp-section { margin-top: 20px; }
.pp-section.is-off { opacity: .55; border-inline-start: 3px dashed var(--line); padding-inline-start: 12px; }
.pp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.pp-head h2 { margin: 0; }
.pp-head .pp-switch { font-size: .9rem; }
.pp-section textarea { width: 100%; }
.pp-activity { list-style: none; padding: 0; margin: 0; }
.pp-activity li { padding: 4px 0; border-bottom: 1px solid var(--line); }

/* ---- Virtual pets (docs/ARCHITECTURE.md section 13) ---- */
.vpet-emoji { font-size: 2rem; line-height: 1; }
.vpet-card-head { display: flex; gap: 14px; align-items: center; }
.vpet-adopt { display: grid; gap: 14px; max-width: 720px; }
.vpet-adopt fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.vpet-adopt legend { font-weight: 600; margin-bottom: 6px; }
.vpet-choice { display: grid; justify-items: center; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; font-size: .8rem; }
.vpet-choice:has(input:checked) { border-color: currentColor; box-shadow: 0 0 0 1px currentColor; }
.vpet-choice input { position: absolute; opacity: 0; pointer-events: none; }
.vpet-preview { display: block; width: 128px; height: 100px; position: relative; overflow: hidden; }
/* centred with auto margins, not transform: the mirror flip uses transform and would undo the centring */
.vpet-preview .vpet-art { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 0; }

.vpet-room { display: grid; gap: 10px; margin-bottom: 24px; }
.vpet-stage { position: relative; height: clamp(320px, 50vw, 500px); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); image-rendering: pixelated; cursor: pointer; }
/* Room backgrounds, pure CSS so they scale to thumbnails. ::before is the window / sun / moon. */
.vpet-scene { position: relative; overflow: hidden; }
.vpet-scene::before { content: ""; position: absolute; }
.vpet-scene--living { background: linear-gradient(to bottom, #cfe6ef 0 66%, #a7743f 66% 67%, #c99a63 67% 100%); }
.vpet-scene--living::before { left: 8%; top: 12%; width: 22%; height: 30%; background: #f3fbff; border: 6px solid #9a6b3a; border-radius: 4px; opacity: .85; }
.vpet-scene--garden { background: linear-gradient(to bottom, #8fd3f4 0, #d8f0ff 66%, #4f9d3d 66% 67%, #6bbf59 67% 100%); }
.vpet-scene--night { background: linear-gradient(to bottom, #151f3d 0, #2c3a68 66%, #2a2020 66% 67%, #3c2f2f 67% 100%); }
.vpet-scene--beach { background: linear-gradient(to bottom, #8fd3f4 0 40%, #3fa7d6 40% 66%, #d9bd7a 66% 67%, #f0d9a0 67% 100%); }
.vpet-scene--snow { background: linear-gradient(to bottom, #b9c7d8 0, #e3ebf4 66%, #c5d3e2 66% 67%, #f4f8fb 67% 100%); }
.vpet-scene--sunset { background: linear-gradient(to bottom, #ff9a62 0, #ffd89b 66%, #46662c 66% 67%, #5b7a3a 67% 100%); }
.vpet-scene--garden::before, .vpet-scene--beach::before, .vpet-scene--snow::before, .vpet-scene--sunset::before, .vpet-scene--night::before {
    right: 10%; top: 10%; width: 9%; aspect-ratio: 1; border-radius: 50%; }
.vpet-scene--garden::before, .vpet-scene--beach::before { background: #fff3a8; }
.vpet-scene--snow::before { background: #ffffff; opacity: .8; }
.vpet-scene--sunset::before { background: #fff1b8; right: 20%; top: 38%; }
.vpet-scene--night::before { background: #f6f0c8; box-shadow: 0 0 18px 4px rgba(246, 240, 200, .35); }
.vpet-rooms { display: flex; gap: 8px; flex-wrap: wrap; }
.vpet-rooms .vpet-scene { width: 72px; height: 44px; padding: 0; border: 2px solid var(--line); border-radius: 8px; cursor: pointer; }
.vpet-rooms .vpet-scene::before { border-width: 2px; }
.vpet-rooms .vpet-scene[aria-checked="true"] { border-color: currentColor; box-shadow: 0 0 0 2px currentColor; }
.vpet-hint { margin: 0; }
.vpet-ping { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid #fff; border-radius: 50%; pointer-events: none; opacity: .9; animation: vpet-ping .7s ease-out forwards; }
@keyframes vpet-ping { to { transform: scale(2.4); opacity: 0; } }
.vpet-stage .vpet-track { position: absolute; inset: 0 0 26px 0; }
.vpet-track .vpet-walker-pos, .vpet-walker-pos { position: absolute; left: 0; bottom: 0; }
.vpet-say { margin: 0; min-height: 1.5em; text-align: center; color: var(--muted); }
.vpet-say.is-bad { color: var(--danger, #b3261e); font-weight: 600; }
.vpet-bars, .vpet-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vpet-bars li, .vpet-parts li { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 10px; }
.vpet-bars li.is-low span { color: var(--danger, #b3261e); font-weight: 600; }
.vpet-bars meter, .vpet-parts meter { width: 100%; }
.vpet-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vpet-grade-letter { font-size: 4rem; font-weight: 700; line-height: 1; margin: 0; }

.vpet-art { display: block; image-rendering: pixelated; background-repeat: no-repeat; cursor: pointer; }
.vpet-art.is-emoji { font-size: 3rem; line-height: 1; background: none; }
.vpet-art.is-left { transform: scaleX(-1); }
.vpet-prop { position: absolute; left: 50%; top: -4px; transform: translateX(-50%); font-size: 1.8rem; line-height: 1; pointer-events: none; animation: vpet-float 1s ease-in-out infinite alternate; }
@keyframes vpet-float { to { transform: translate(-50%, -10px); } }
@media (prefers-reduced-motion: reduce) { .vpet-prop { animation: none; } }

/* Page companion: a fixed strip above the mobile tab bar; only the pet and its menu take clicks. */
.vpet-companion { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); height: 0; z-index: 40; pointer-events: none; }
@media (min-width: 900px) { .vpet-companion { bottom: 0; } }
.vpet-companion .vpet-track { position: absolute; left: 0; right: 0; bottom: 0; height: 0; }
.vpet-companion .vpet-art { cursor: default; }
.vpet-toggle { position: absolute; left: 15%; right: 15%; top: 30%; bottom: 0; background: none; border: 0; padding: 0; pointer-events: auto; cursor: pointer; }
.vpet-toggle:focus-visible { outline: 2px solid currentColor; border-radius: 8px; }
.vpet-bubble, .vpet-menu { position: absolute; left: 0; bottom: calc(var(--vpet-h, 100px) + 6px); margin: 0; background: var(--surface); color: inherit; border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; font-size: .85rem; max-width: 220px; pointer-events: auto; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.vpet-menu { display: none; flex-wrap: wrap; gap: 4px; }
.vpet-menu.is-open { display: flex; }
.vpet-menu button { font: inherit; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: none; color: inherit; cursor: pointer; }
@media print { .vpet-companion { display: none; } }

/* Virtual pets in the pet switcher, under the real pets */
.pet-list-sub { margin: 10px 0 2px; padding: 0 12px; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.vpet-row { display: flex; align-items: center; gap: 10px; padding: 6px 12px; color: inherit; text-decoration: none; }
.vpet-row:hover { background: var(--line); }
.vpet-mini { flex: none; display: inline-block; background-repeat: no-repeat; image-rendering: pixelated; }
.vpet-mini.is-emoji { width: 32px; height: 32px; font-size: 1.4rem; line-height: 32px; text-align: center; }

/* Toys in the playground */
.vpet-toys { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vpet-toys-label { font-weight: 600; margin-right: 4px; }
.vpet-toy-btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; padding: 4px 12px 4px 6px; border: 1px solid var(--line); border-radius: 999px; background: none; color: inherit; cursor: pointer; }
.vpet-toy-btn[aria-pressed="true"] { border-color: currentColor; box-shadow: 0 0 0 1px currentColor; }
.vpet-toy-icon { width: 22px; height: 22px; background-size: contain; background-repeat: no-repeat; background-position: center; }

.vpet-toy { position: absolute; left: 0; bottom: 0; background-size: contain; background-repeat: no-repeat; background-position: center; cursor: pointer; will-change: transform; }
.vpet-note { position: absolute; font-size: 1rem; pointer-events: none; animation: vpet-float 0.9s ease-out forwards; }
@media (prefers-reduced-motion: reduce) { .vpet-toys { display: none; } }

/* Game HUD over the playground: stats on top, tool popovers top-right, care dock at the bottom */
.vpet-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vpet-hud { position: absolute; left: 10px; top: 10px; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; max-width: calc(100% - 120px); }
.vpet-stat { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; background: rgba(255,255,255,.82); color: #1f2a2e; border-radius: 999px; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.vpet-stat meter { width: 64px; height: 10px; }
.vpet-stat.is-low { background: #ffe1df; color: #8b1a14; }
.vpet-ico { flex: none; }
.vpet-stat .vpet-ico { width: 18px; height: 18px; }
.vpet-tools { position: absolute; right: 10px; top: 10px; z-index: 4; display: flex; gap: 8px; align-items: flex-start; }
.vpet-pop { position: relative; }
.vpet-pop > summary { list-style: none; }
.vpet-pop > summary::-webkit-details-marker { display: none; }
.vpet-pop-body { position: absolute; right: 0; top: 52px; min-width: 200px; padding: 10px; background: var(--surface); color: var(--text, inherit); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.25); display: flex; flex-wrap: wrap; gap: 8px; }
.vpet-pop-up .vpet-pop-body { top: auto; bottom: 72px; right: 0; width: 240px; }
.vpet-round { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.88); color: #1f2a2e; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.25); font: inherit; }
.vpet-round:hover { background: #fff; }
.vpet-round:disabled { opacity: .5; cursor: default; }
.vpet-round:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.vpet-say { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 3; margin: 0; padding: 4px 14px; max-width: 90%; border-radius: 999px; background: rgba(255,255,255,.9); color: #1f2a2e; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.vpet-say:empty { display: none; }
.vpet-say.is-bad { color: #8b1a14; font-weight: 600; }
.vpet-dock { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 3; display: flex; gap: 8px; padding: 8px 12px; background: rgba(20,30,34,.45); border-radius: 999px; backdrop-filter: blur(4px); }
.vpet-act { width: 56px; height: 56px; }
.vpet-act span { font-size: .62rem; line-height: 1; }
.vpet-act .vpet-ico { width: 24px; height: 24px; }
.vpet-stage .vpet-track { bottom: 76px; }
@media (max-width: 560px) { .vpet-dock { gap: 4px; padding: 6px 8px; } .vpet-act { width: 44px; height: 44px; } .vpet-act span { display: none; } .vpet-say { bottom: 78px; } .vpet-stage .vpet-track { bottom: 62px; } }

/* Controls live in side columns on the right; the pet's walking area (track) stops before them so nothing covers it. */
.vpet-stage .vpet-track { inset: 0 126px 26px 0; }
.vpet-dock { left: auto; right: 10px; top: 10px; bottom: auto; transform: none; flex-direction: column; gap: 6px; padding: 6px; border-radius: 30px; }
.vpet-tools { right: 76px; top: 10px; flex-direction: column; }
.vpet-act { width: 48px; height: 48px; }
.vpet-act span { display: none; }
.vpet-pop-body, .vpet-pop-up .vpet-pop-body { right: calc(100% + 10px); top: 0; bottom: auto; width: auto; min-width: 200px; max-width: 260px; }
.vpet-pop-up .vpet-pop-body { top: auto; bottom: 0; }
.vpet-hud { max-width: calc(100% - 150px); }
.vpet-say { left: calc((100% - 126px) / 2); bottom: 12px; max-width: calc(100% - 170px); }
@media (max-width: 560px) {
    .vpet-stage { height: clamp(400px, 105vw, 480px); }
    .vpet-stage .vpet-track { inset: 0 104px 26px 0; }
    .vpet-dock { gap: 4px; padding: 4px; }
    .vpet-act { width: 40px; height: 40px; }
    .vpet-round { width: 40px; height: 40px; }
    .vpet-tools { right: 62px; }
    .vpet-say { left: calc((100% - 104px) / 2); bottom: 8px; max-width: calc(100% - 130px); }
    .vpet-hud { max-width: calc(100% - 120px); }
}

/* Adopt carousel */
.vpet-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.vpet-tab { font: inherit; padding: 6px 16px; border: 1px solid var(--line); border-radius: 999px; background: none; color: inherit; cursor: pointer; }
.vpet-tab[aria-selected="true"] { border-color: currentColor; box-shadow: 0 0 0 1px currentColor; font-weight: 600; }
.vpet-tab:disabled { opacity: .5; cursor: default; }
.vpet-carousel { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.vpet-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: inherit; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.vpet-arrow:focus-visible, .vpet-adopt-stage:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.vpet-adopt-stage { position: relative; height: 260px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; touch-action: pan-y; }
.vpet-adopt-track { position: absolute; left: 0; right: 0; bottom: 36px; display: flex; justify-content: center; align-items: flex-end; }
.vpet-adopt-track .vpet-art { cursor: default; }
.vpet-counter { position: absolute; right: 10px; top: 8px; padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.85); color: #1f2a2e; font-size: .8rem; }
.vpet-traits { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px 16px; margin: 14px 0; }
.vpet-traits div { display: grid; }
.vpet-traits dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.vpet-traits dd { margin: 0; font-weight: 600; }
.vpet-adopt { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; max-width: none; }
.vpet-adopt label { display: grid; gap: 4px; }

/* Speech balloon above the pet; the old bottom pill is gone */
.vpet-balloon { position: absolute; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 6px; width: max-content; max-width: 200px; padding: 6px 8px 6px 12px; border-radius: 14px; background: #fff; color: #1f2a2e; font-size: .85rem; line-height: 1.25; box-shadow: 0 2px 8px rgba(0,0,0,.25); cursor: pointer; pointer-events: auto; animation: vpet-pop .18s ease-out; }
.vpet-balloon::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: inherit; transform: translateX(-50%) rotate(45deg); box-shadow: 2px 2px 3px rgba(0,0,0,.12); }
.vpet-balloon.is-bad { background: #ffe9e7; color: #8b1a14; font-weight: 600; }
.vpet-balloon-x { flex: none; border: 0; background: none; color: inherit; font-size: 1.1rem; line-height: 1; padding: 0 4px; cursor: pointer; opacity: .6; }
.vpet-balloon-x:hover, .vpet-balloon-x:focus-visible { opacity: 1; }
.vpet-balloon[hidden] { display: none; }
@keyframes vpet-pop { from { transform: translateX(-50%) scale(.85); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .vpet-balloon { animation: none; } }

/* Scenery change: the playground fades to black and back */
.vpet-veil { position: absolute; inset: 0; z-index: 6; background: #0b1114; opacity: 0; pointer-events: none; transition: opacity .42s ease; }
@media (prefers-reduced-motion: reduce) { .vpet-veil { transition-duration: .01s; } }

/* Talk: command list and the three balloon kinds (say = speech, thought = cloud, dream = sleepy cloud) */
.vpet-talk { width: 230px; }
.vpet-cmd { font: inherit; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: none; color: inherit; cursor: pointer; }
.vpet-cmd:hover { background: var(--line); }
.vpet-cmd-toggle { width: 100%; text-align: left; border-style: dashed; }
.vpet-cmd-toggle[aria-pressed="true"]::before { content: "\2713  "; }
.vpet-balloon.is-thought, .vpet-balloon.is-dream { border-radius: 22px; font-style: italic; }
.vpet-balloon.is-thought::after, .vpet-balloon.is-dream::after { width: 10px; height: 10px; border-radius: 50%; bottom: -12px; left: 46%; transform: none; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.vpet-balloon.is-thought::before, .vpet-balloon.is-dream::before { content: ""; position: absolute; bottom: -20px; left: 40%; width: 6px; height: 6px; border-radius: 50%; background: inherit; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.vpet-balloon.is-dream { background: #ece6ff; color: #3b2f6b; }
.vpet-balloon.is-dream span::before { content: "z Z  "; font-style: normal; font-weight: 700; opacity: .6; }
.vpet-balloon.is-bad::after { background: #ffe9e7; }

/* Graveyard */
.vpet-tab[aria-current="true"] { border-color: currentColor; box-shadow: 0 0 0 1px currentColor; font-weight: 600; }
a.vpet-tab { text-decoration: none; display: inline-block; }
.vpet-grave { border-radius: 40px 40px var(--radius) var(--radius); background: color-mix(in srgb, var(--surface) 88%, #8a8f98); }
.vpet-grave-head { display: flex; gap: 12px; align-items: center; }
.vpet-grave .vpet-mini { filter: grayscale(.85) opacity(.8); }
.vpet-grave h3 { margin: 0; }
.vpet-grade-chip { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; border: 1px solid currentColor; font-size: .75rem; vertical-align: middle; }
.vpet-lived { margin: 8px 0; font-weight: 600; }
.vpet-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 8px; }
.vpet-chips li { padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; }
.vpet-epitaph { margin: 8px 0; padding: 0 0 0 10px; border-left: 3px solid var(--line); font-style: italic; }
.vpet-nick-hint { flex-basis: 100%; }
.vpet-retire { display: grid; gap: 8px; margin-top: 10px; max-width: 420px; }
.vpet-check { display: flex; gap: 8px; align-items: center; }

/* One control column: care actions, then (after a divider) toys, talk and room. Popovers open to the left. */
.vpet-stage { height: clamp(480px, 56vw, 580px); }
.vpet-stage .vpet-track { inset: 0 84px 26px 0; }
.vpet-dock { right: 10px; top: 10px; bottom: auto; gap: 6px; padding: 8px 6px; border-radius: 30px; flex-direction: column; align-items: center; }
.vpet-round, .vpet-act { width: 46px; height: 46px; }
.vpet-sep { width: 28px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.55); margin: 2px 0; }
.vpet-pop-body, .vpet-pop-up .vpet-pop-body { right: calc(100% + 14px); top: auto; bottom: -6px; min-width: 200px; max-width: 270px; max-height: 70vh; overflow: auto; }
.vpet-hud { max-width: calc(100% - 96px); }
.vpet-snacks { width: 270px; }
.vpet-snacks p { flex-basis: 100%; margin: 0 0 4px; }
.vpet-rooms { width: 230px; }
.vpet-tip { position: fixed; z-index: 100; transform: translate(-100%, -50%); padding: 4px 10px; border-radius: 8px; background: #1f2a2e; color: #fff; font-size: .8rem; white-space: nowrap; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.vpet-tip[hidden] { display: none; }
@media (max-width: 560px) {
    .vpet-stage { height: 490px; }
    .vpet-stage .vpet-track { inset: 0 70px 26px 0; }
    .vpet-round, .vpet-act { width: 42px; height: 42px; }
    .vpet-dock { gap: 4px; padding: 6px 4px; }
    .vpet-hud { max-width: calc(100% - 80px); }
    .vpet-pop-body, .vpet-pop-up .vpet-pop-body { max-width: calc(100vw - 110px); }
}

/* Background visitors (NPC animals) sit behind the main pet and a little higher on the ground, as if further away */
.vpet-npc-track { position: absolute; inset: 0 84px 62px 0; pointer-events: none; z-index: 0; opacity: .9; }
.vpet-npc-track .vpet-art { cursor: default; }
.vpet-npc-track .vpet-balloon { pointer-events: auto; font-size: .78rem; }
.vpet-stage .vpet-track { z-index: 1; }
/* popovers: the food list sits high in the column so it opens downwards from its button, the others open upwards */
.vpet-pop:has(.vpet-snacks) .vpet-pop-body { top: -6px; bottom: auto; max-height: 420px; }
@media (max-width: 560px) { .vpet-npc-track { inset: 0 70px 56px 0; } }
.vpet-retire input[type="text"] { width: 100%; }

/* Clicking and double-clicking around the playground must never select text or drag images */
.vpet-stage, .vpet-stage * , .vpet-adopt-stage, .vpet-adopt-stage * { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.vpet-stage img, .vpet-stage .vpet-art, .vpet-adopt-stage .vpet-art { -webkit-user-drag: none; }
.vpet-stage .vpet-pop-body, .vpet-stage .vpet-pop-body * { -webkit-user-select: none; user-select: none; }

/* Retire step: collapsed until asked for, with epitaph ideas */
.vpet-retire-box > summary { list-style: none; display: inline-block; cursor: pointer; }
.vpet-retire-box > summary::-webkit-details-marker { display: none; }
.vpet-retire-box[open] > summary { margin-bottom: 10px; }
.vpet-ideas { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }

/* Depth: far (blurred NPCs) < middle (visitors you can tap) < front (your pet) */
.vpet-npc-track { inset: 0 84px 118px 0; z-index: 0; }
/* distance is shown on the animal only, so text balloons stay sharp */
.vpet-npc-track .vpet-art { filter: blur(.45px); opacity: .88; }
.vpet-mid-track { position: absolute; inset: 0 84px 66px 0; pointer-events: none; z-index: 1; }
.vpet-mid-track .vpet-art { pointer-events: auto; cursor: pointer; }
.vpet-stage .vpet-track { z-index: 2; }
.vpet-name { position: absolute; left: 50%; transform: translateX(-50%); z-index: 4; padding: 0 8px; border-radius: 999px; background: rgba(20,30,34,.6); color: #fff; font-size: .7rem; line-height: 1.5; white-space: nowrap; pointer-events: none; }
.vpet-mid-track .vpet-balloon { pointer-events: auto; font-size: .78rem; }
.vpet-card { position: absolute; z-index: 7; transform: translate(-50%, -100%); display: grid; gap: 4px; justify-items: start; min-width: 150px; max-width: 220px; padding: 10px 12px; border-radius: 12px; background: #fff; color: #1f2a2e; box-shadow: 0 4px 16px rgba(0,0,0,.3); font-size: .85rem; }
.vpet-card[hidden] { display: none; }
.vpet-card-kind { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; opacity: .65; }
.vpet-card .btn { padding: 4px 12px; font-size: .8rem; margin-top: 4px; }
@media (max-width: 560px) { .vpet-npc-track { inset: 0 70px 108px 0; } .vpet-mid-track { inset: 0 70px 60px 0; } }

/* Quiet tiles under the playground: companion switch and pet settings */
.vpet-aside { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 6px 0 24px; align-items: start; }
.vpet-tile { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.vpet-tile h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 1rem; }
.vpet-tile h2 .vpet-ico { width: 18px; height: 18px; opacity: .7; }
.vpet-tile p { margin: 0 0 10px; font-size: .88rem; }
.vpet-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vpet-switch { position: relative; flex: none; width: 46px; height: 26px; border: 0; border-radius: 999px; background: color-mix(in srgb, currentColor 25%, transparent); cursor: pointer; transition: background .2s; }
.vpet-switch span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.vpet-switch[aria-checked="true"] { background: #1f8a5b; }
.vpet-switch[aria-checked="true"] span { transform: translateX(20px); }
.vpet-switch:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.vpet-rename { display: flex; gap: 8px; margin-bottom: 8px; }
.vpet-rename input { flex: 1; min-width: 0; }
.vpet-links { margin: 0 0 8px; }
.vpet-retire-box { margin-top: 6px; }
.vpet-retire-box > summary { padding: 0; border: 0; background: none; font-size: .8rem; color: var(--muted); text-decoration: underline; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .vpet-switch, .vpet-switch span { transition: none; } }

/* Sky: time-of-day tint, weather shade, clouds and a particle canvas. Pets are dimmed with a brightness filter (the balloons are not). */
.vpet-sky-clouds, .vpet-sky-shade, .vpet-sky-tint, .vpet-sky-fx { position: absolute; inset: 0; pointer-events: none; }
.vpet-sky-clouds { z-index: 0; overflow: hidden; opacity: 0; transition: opacity 1.2s; }
.vpet-sky-shade { z-index: 0; background: rgb(18, 28, 40); opacity: 0; transition: opacity 1.2s; }
.vpet-sky-tint { z-index: 3; opacity: 0; transition: opacity 1.2s, background-color 1.2s; mix-blend-mode: multiply; }
.vpet-sky-fx { z-index: 4; width: 100%; height: 100%; }
.vpet-cloud { position: absolute; width: 150px; height: 44px; border-radius: 40px; background: #fff; filter: blur(2px); opacity: .85; animation: vpet-drift linear infinite; }
.vpet-cloud::before, .vpet-cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.vpet-cloud::before { width: 70px; height: 70px; left: 22px; top: -30px; }
.vpet-cloud::after { width: 54px; height: 54px; left: 80px; top: -20px; }
.vpet-stage[data-weather="cloudy"] .vpet-cloud, .vpet-stage[data-weather="rain"] .vpet-cloud, .vpet-stage[data-weather="storm"] .vpet-cloud { background: #cfd6dd; }
.vpet-stage[data-weather="rain"] .vpet-cloud { background: #9fa9b4; }
.vpet-stage[data-weather="storm"] .vpet-cloud { background: #6e7885; }
@keyframes vpet-drift { from { transform: translateX(-220px); } to { transform: translateX(110vw); } }
.vpet-stage .vpet-art { filter: brightness(var(--sky-bright, 1)); }
.vpet-npc-track .vpet-art { filter: blur(.45px) brightness(var(--sky-bright, 1)); }
.vpet-skybox { width: 270px; }
.vpet-skyhead { flex-basis: 100%; margin: 0; font-weight: 600; font-size: .85rem; }
.vpet-chips-row { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.vpet-cmd[aria-pressed="true"] { border-color: currentColor; box-shadow: 0 0 0 1px currentColor; font-weight: 600; }
.vpet-flash { position: absolute; inset: 0; z-index: 5; background: #fff; opacity: 0; pointer-events: none; transition: opacity .12s; }
@media (prefers-reduced-motion: reduce) { .vpet-cloud { animation: none; left: 30%; } .vpet-flash { display: none; } }
/* ten buttons in the column */
.vpet-stage { height: clamp(540px, 60vw, 640px); }
@media (max-width: 560px) { .vpet-stage { height: 540px; } }

/* Furniture sits on the floor line behind the pet */
.vpet-furn { position: absolute; bottom: -2px; background-repeat: no-repeat; background-size: contain; background-position: bottom center; pointer-events: none; z-index: 0; }

/* Progress: streak pill, locked rooms and toys, quiet toasts, badge page */
.vpet-streak { opacity: .75; }
.vpet-streak.is-on { opacity: 1; color: #b4461c; }
.vpet-streak.is-risk { animation: vpet-risk 2.4s ease-in-out infinite; }
.vpet-streak b { font-size: .8rem; min-width: 1ch; }
@keyframes vpet-risk { 50% { box-shadow: 0 0 0 3px rgba(240, 150, 60, .55); } }
@media (prefers-reduced-motion: reduce) { .vpet-streak.is-risk { animation: none; } }
.vpet-scene.is-locked { opacity: .4; filter: grayscale(.7); cursor: not-allowed; position: relative; }
.vpet-scene.is-locked::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; transform: translate(-50%, -50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2a2e' stroke-width='2.5'%3E%3Crect x='5' y='11' width='14' height='9' rx='2' fill='white'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat; }
.vpet-toy-btn.is-locked { opacity: .45; cursor: not-allowed; }
.vpet-toasts { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 9; display: grid; gap: 6px; justify-items: center; pointer-events: none; }
.vpet-toast { pointer-events: auto; font: inherit; font-size: .85rem; padding: 6px 14px; border: 0; border-radius: 999px; background: #1f2a2e; color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.35); cursor: pointer; animation: vpet-toast-in .25s ease-out; transition: opacity .3s; }
.vpet-toast::before { content: "\2605  "; color: #ffd45e; }
.vpet-toast.is-out { opacity: 0; }
@keyframes vpet-toast-in { from { transform: translateY(8px); opacity: 0; } }
.vpet-badge-group { font-size: 1rem; margin: 18px 0 6px; }
.vpet-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; list-style: none; padding: 0; margin: 0; }
.vpet-badge { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.vpet-badge span { font-size: .82rem; color: var(--muted); }
.vpet-badge small { font-size: .72rem; color: #1f8a5b; }
.vpet-badge.is-locked { opacity: .55; }
.vpet-badge:not(.is-locked) strong::before { content: "\2605  "; color: #e0a800; }

/* Learning tip card: small, under the stat pills in the empty sky, away from the pets and the controls; never blocks play */
.vpet-tipcard { position: absolute; left: 10px; top: 56px; z-index: 8; max-width: min(320px, calc(100% - 110px)); padding: 10px 28px 10px 12px; border-radius: 12px; background: #fffbe8; color: #3a3320; box-shadow: 0 3px 12px rgba(0,0,0,.3); font-size: .82rem; line-height: 1.35; animation: vpet-toast-in .25s ease-out; }
.vpet-tipcard[hidden] { display: none; }
.vpet-tipcard strong { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #8a6d00; margin-bottom: 2px; }
.vpet-tipcard p { margin: 0 0 4px; }
.vpet-tipcard a { font-weight: 600; color: #1d5fa8; }
.vpet-tipcard-x { position: absolute; right: 6px; top: 4px; border: 0; background: none; font-size: 1.1rem; line-height: 1; cursor: pointer; opacity: .6; color: inherit; }
.vpet-tipcard-x:hover { opacity: 1; }

/* New places: backgrounds */
.vpet-scene--vet { background: linear-gradient(to bottom, #e2f4f2 0 66%, #b9c9c7 66% 67%, #efeae0 67% 100%); }
.vpet-scene--vet::before { left: 10%; top: 10%; width: 8%; aspect-ratio: 1; border-radius: 6px; border: 3px solid #fff; background: linear-gradient(#d9433f, #d9433f) center / 100% 28% no-repeat, linear-gradient(#d9433f, #d9433f) center / 28% 100% no-repeat, #fff; }
.vpet-scene--camp { background: radial-gradient(circle at 20% 15%, #fff7 0 1px, transparent 2px) 0 0 / 70px 60px, radial-gradient(circle at 70% 40%, #fff6 0 1px, transparent 2px) 0 0 / 90px 80px, linear-gradient(to bottom, #0f1b3a 0, #25376a 66%, #1c3a28 66% 67%, #2c5a3a 67% 100%); }
.vpet-scene--camp::before { right: 10%; top: 10%; width: 8%; aspect-ratio: 1; border-radius: 50%; background: #f6f0c8; box-shadow: 0 0 18px 4px rgba(246, 240, 200, .35); }
.vpet-scene--training { background: linear-gradient(to bottom, #a9dcf7 0, #e4f6ff 66%, #3f8f35 66% 67%, #62b84e 67% 100%); }
.vpet-scene--training::before { left: 0; right: 0; top: 67%; height: 3px; background: repeating-linear-gradient(90deg, #fff 0 18px, transparent 18px 36px); opacity: .7; }
.vpet-scene--memory { background: linear-gradient(to bottom, #d9d4f2 0, #f4e9f4 55%, #cfe3cf 66% 67%, #b4d4b0 67% 100%); }
.vpet-scene--memory::before { left: 50%; top: 8%; width: 14%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, #fff8d6 0 35%, transparent 70%); }
/* places grid in the popover */
.vpet-rooms { width: 290px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.vpet-rooms .vpet-scene.vpet-placebtn { width: auto; height: 56px; border-radius: 10px; }
.vpet-place-label { position: absolute; left: 4px; right: 4px; bottom: 3px; padding: 0 6px; border-radius: 999px; background: rgba(20, 30, 34, .62); color: #fff; font-size: .7rem; line-height: 1.5; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Place bar, course effects, memory ghosts, campfire */
.vpet-placebar { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 9; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: calc(100% - 160px); }
.vpet-placebar[hidden] { display: none; }
.vpet-placebar.is-busy { opacity: .6; pointer-events: none; }
.vpet-pill { font: inherit; font-size: .82rem; padding: 6px 14px; border: 0; border-radius: 999px; background: rgba(255,255,255,.92); color: #1f2a2e; box-shadow: 0 2px 6px rgba(0,0,0,.28); cursor: pointer; }
.vpet-pill:hover { background: #fff; }
.vpet-pill:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.vpet-pill-hint { font-size: .8rem; padding: 5px 12px; border-radius: 999px; background: rgba(20,30,34,.6); color: #fff; }
.vpet-card em { font-size: .8rem; opacity: .85; }
.vpet-card span { font-size: .82rem; }
.vpet-furn--fire { animation: vpet-flicker 1.1s ease-in-out infinite alternate; transform-origin: bottom center; }
@keyframes vpet-flicker { from { transform: scale(1, 1); } to { transform: scale(1.04, 1.08); } }
.vpet-furn--clickable { pointer-events: auto; cursor: pointer; }
.vpet-furn--clickable:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.vpet-hop { animation: vpet-hop .48s ease-out; }
@keyframes vpet-hop { 50% { margin-bottom: 42px; } }
.vpet-wiggle { animation: vpet-wig .3s linear 3; }
@keyframes vpet-wig { 25% { margin-bottom: 8px; } 75% { margin-bottom: -4px; } }
.vpet-ghost { opacity: .5; filter: brightness(1.25) blur(.4px); transition: opacity 1.1s; }
.vpet-ghost.is-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .vpet-furn--fire, .vpet-hop, .vpet-wiggle { animation: none; } }

/* The walking area sits in a clipping viewport (a place may be wider than the screen); empty areas let clicks through */
.vpet-view { position: absolute; inset: 0 84px 0 0; overflow: hidden; z-index: 2; pointer-events: none; }
.vpet-stage .vpet-view > .vpet-track { position: absolute; inset: 0 auto 26px 0; width: 100%; z-index: auto; pointer-events: none; }
.vpet-view .vpet-art, .vpet-view .vpet-toy, .vpet-view .vpet-balloon, .vpet-view .vpet-furn--clickable { pointer-events: auto; }
.vpet-view .vpet-furn { pointer-events: none; }
.vpet-view .vpet-furn--clickable { pointer-events: auto; }
@media (max-width: 560px) { .vpet-view { inset: 0 70px 0 0; } }

/* Phones: the stat pills must not eat the playground */
@media (max-width: 560px) {
    .vpet-hud { gap: 4px; left: 8px; top: 8px; }
    .vpet-stat { padding: 3px 7px 3px 5px; gap: 4px; }
    .vpet-stat .vpet-ico { width: 15px; height: 15px; }
    .vpet-stat meter { width: 22px; height: 8px; }
}

/* Backdrops: scenery behind the pets */
.vpet-backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.vpet-deco { position: absolute; background-repeat: no-repeat; background-size: contain; background-position: bottom center; }
.vpet-deco.is-tile { background-repeat: repeat-x; background-size: auto 100%; background-position: left bottom; }
.vpet-eyes { filter: drop-shadow(0 0 5px #d8ff4a); }
.vpet-sail { animation: vpet-sail 300s linear infinite; }
@keyframes vpet-sail { from { left: -18%; } to { left: 104%; } }
.vpet-fly { animation: vpet-fly 20s linear infinite, vpet-flutter 1.3s ease-in-out infinite alternate; }
.vpet-fly-back { animation-direction: reverse, alternate; }
@keyframes vpet-fly { from { left: -8%; } to { left: 104%; } }
@keyframes vpet-flutter { from { margin-bottom: -14px; } to { margin-bottom: 14px; } }
.vpet-flutter-path { animation: vpet-flit 16s ease-in-out infinite alternate, vpet-flutter 1s ease-in-out infinite alternate; }
@keyframes vpet-flit { from { margin-left: -4%; } to { margin-left: 9%; } }
.vpet-fog { position: absolute; left: -20%; width: 140%; height: 12%; background: linear-gradient(to right, transparent, rgba(190, 200, 230, .16), transparent); filter: blur(8px); animation: vpet-fogmove 70s linear infinite alternate; }
@keyframes vpet-fogmove { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
/* snow place: a cold sea with ice at the horizon, sky above, white shore */
.vpet-scene--snow { background: linear-gradient(to bottom, #b4c4d6 0, #dbe5ef 38%, #7f9db5 40% 66%, #cfdbe6 66% 67%, #f4f8fb 67% 100%); }
.vpet-scene--night { background: linear-gradient(to bottom, #0b1230 0, #1e2b5e 60%, #251d3a 66% 67%, #2f2a3d 67% 100%); }
.vpet-scene--garden { background: linear-gradient(to bottom, #8fd3f4 0, #d8f0ff 62%, #5aa84a 66% 67%, #6bbf59 67% 100%); }
/* memory garden: light from above */
.vpet-rays { position: absolute; left: 0; right: 0; top: 0; height: 70%; mix-blend-mode: screen; }
.vpet-rays i { position: absolute; top: -4%; height: 100%; background: linear-gradient(to bottom, rgba(255, 246, 205, .75), rgba(255, 246, 205, 0)); transform-origin: 50% 0; transform: rotate(var(--r, 0deg)); filter: blur(7px); opacity: .6; animation: vpet-shimmer 8s ease-in-out infinite alternate; }
@keyframes vpet-shimmer { from { opacity: .35; } to { opacity: .85; } }
.vpet-mote { position: absolute; bottom: 34%; border-radius: 50%; background: #fff8d0; box-shadow: 0 0 6px 2px rgba(255, 248, 208, .8); opacity: 0; animation: vpet-rise 14s linear infinite; }
@keyframes vpet-rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-260px); opacity: 0; } }
.vpet-feather { top: -6%; animation: vpet-feather 26s linear infinite; }
@keyframes vpet-feather { from { transform: translate(0, 0) rotate(-20deg); opacity: 0; } 10% { opacity: .9; } 50% { transform: translate(30px, 150px) rotate(25deg); } to { transform: translate(-10px, 340px) rotate(-15deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .vpet-sail, .vpet-fly, .vpet-flutter-path, .vpet-fog, .vpet-rays i, .vpet-mote, .vpet-feather { animation: none; } .vpet-mote, .vpet-feather { display: none; } .vpet-fly { left: 30%; } }

.vpet-placebar.is-top { top: 58px; bottom: auto; }

/* Six-button column: feed popover, games and scenery popovers */
.vpet-stage { height: clamp(460px, 54vw, 580px); }
@media (max-width: 560px) { .vpet-stage { height: 500px; } }
.vpet-feedbox { width: 280px; display: grid; gap: 8px; }
.vpet-food { display: grid; gap: 1px; text-align: left; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: none; color: inherit; font: inherit; cursor: pointer; }
.vpet-food:hover { background: var(--line); }
.vpet-food small { font-size: .76rem; opacity: .7; }
.vpet-food-more { border-style: dashed; }
.vpet-human { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.vpet-human[hidden] { display: none; }
.vpet-human p { flex-basis: 100%; margin: 0 0 2px; }
.vpet-gamesbox { width: 300px; max-height: 70vh; overflow: auto; display: block; }
.vpet-stars { margin: 0 0 6px; font-size: .85rem; }
.vpet-stars b::after { content: " \2605"; color: #e0a800; }
.vpet-toysec .vpet-chips-row { margin-bottom: 4px; }
.vpet-gamelist { display: grid; gap: 6px; margin-bottom: 8px; }
.vpet-game { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 12px; }
.vpet-game strong { font-size: .88rem; }
.vpet-game small { grid-column: 1 / -1; font-size: .74rem; opacity: .75; }
.vpet-game .vpet-pill { padding: 3px 12px; font-size: .78rem; }
.vpet-game.is-locked { opacity: .5; }
.vpet-game.is-locked .vpet-lock { font-size: .74rem; white-space: nowrap; }
.vpet-scenery { width: 290px; max-height: 72vh; overflow: auto; display: block; }
.vpet-scenery .vpet-rooms { width: auto; margin-bottom: 8px; }
.vpet-poop { position: absolute; bottom: 0; background-repeat: no-repeat; background-size: contain; background-position: bottom center; pointer-events: auto; cursor: pointer; animation: vpet-plop .35s ease-out; }
@keyframes vpet-plop { from { transform: scale(.2); opacity: 0; } 70% { transform: scale(1.15); } }
.vpet-poop:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .vpet-poop { animation: none; } }

.vpet-toysec[hidden] { display: none; }

/* popovers fit the stage: the feed list hangs down from its button (first in the column), the others grow upwards but never past the stage */
.vpet-pop:has(.vpet-feedbox) .vpet-pop-body { top: -6px; bottom: auto; max-height: 420px; overflow: auto; }
.vpet-gamesbox, .vpet-scenery, .vpet-talk { max-height: 400px; overflow: auto; }
@media (max-height: 760px) { .vpet-gamesbox, .vpet-scenery, .vpet-talk, .vpet-pop:has(.vpet-feedbox) .vpet-pop-body { max-height: 320px; } }

/* Game boards and the game overlay */
.vpet-boardcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.vpet-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: b; }
.vpet-board li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 8px; counter-increment: b; font-size: .9rem; }
.vpet-board li::before { content: counter(b) "."; opacity: .6; min-width: 1.4em; }
.vpet-board li span { flex: 1; }
.vpet-board li.is-me { background: var(--line); font-weight: 600; }
.vpet-player-form { display: flex; gap: 8px; flex-wrap: wrap; }
.vpet-player { margin-bottom: 16px; }

/* Game layer, HUD and result card (frontend/web/js/games/core.js) */
.vpet-glayer { position: absolute; left: 0; right: 0; bottom: 0; top: 0; pointer-events: none; z-index: 2; }
.vpet-gthing { position: absolute; left: 0; bottom: 0; text-align: center; will-change: transform; user-select: none; }
.vpet-ghud { position: absolute; left: 10px; top: 52px; z-index: 6; display: flex; gap: 10px; align-items: center; padding: 6px 12px; border-radius: 999px; background: rgba(20,30,34,.6); color: #fff; font-weight: 600; font-size: .9rem; }
.vpet-gmid:empty { display: none; }
.vpet-gquit { cursor: pointer; padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.2); font-size: .8rem; }
.vpet-stage.is-gaming .vpet-dock, .vpet-stage.is-gaming .vpet-placebar, .vpet-stage.is-gaming .vpet-poop { visibility: hidden; }
.vpet-stage.is-gaming { touch-action: none; cursor: pointer; }
.vpet-gtoast { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); z-index: 6; padding: 6px 14px; border-radius: 999px; background: rgba(20,30,34,.7); color: #fff; font-weight: 700; pointer-events: none; }
.vpet-gcard { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8; width: min(320px, calc(100% - 120px)); max-height: calc(100% - 24px); overflow: auto; padding: 16px; border-radius: 16px; background: var(--surface); color: var(--text, inherit); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.35); text-align: center; display: grid; gap: 8px; }
.vpet-gtitle { font-weight: 700; opacity: .7; }
.vpet-gbig { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.vpet-gline { font-size: 1.6rem; color: #e0a800; letter-spacing: .1em; }
.vpet-gnote { font-size: .88rem; } .vpet-gnote.is-warn { color: #b3261e; }
.vpet-gsub { font-size: .8rem; opacity: .7; margin-top: 4px; }
.vpet-gboard { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; text-align: left; font-size: .85rem; counter-reset: b; }
.vpet-gboard li { display: flex; gap: 8px; padding: 2px 8px; border-radius: 6px; counter-increment: b; }
.vpet-gboard li::before { content: counter(b) "."; opacity: .6; min-width: 1.4em; } .vpet-gboard li span { flex: 1; } .vpet-gboard li.is-me { background: var(--line); font-weight: 600; }
.vpet-gbtns { display: flex; gap: 8px; justify-content: center; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .vpet-gthing { transition: none; } }
.vpet-pill.is-primary { background: var(--accent, #2f7d6d); color: #fff; border-color: transparent; }
.vpet-gquiz { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); z-index: 7; width: min(440px, calc(100% - 130px)); padding: 14px 16px; border-radius: 16px; background: var(--surface); color: var(--text, inherit); border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0,0,0,.25); display: grid; gap: 8px; text-align: center; }
.vpet-gqtext { font-weight: 700; font-size: 1.05rem; }
.vpet-gwhy { min-height: 2.6em; font-size: .88rem; } .vpet-gwhy.is-right { color: #1b7f4b; } .vpet-gwhy.is-wrong { color: #b3261e; }

/* The player name box at the top of the Games popover */
.vpet-playerbox { margin-bottom: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; font-size: .85rem; }
.vpet-playerbox.is-ask { border-color: #e0a800; background: rgba(224,168,0,.12); }
.vpet-playerline { margin: 0; }
.vpet-linkbtn { background: none; border: 0; padding: 0 2px; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
.vpet-playeredit { display: grid; gap: 6px; margin-top: 6px; }
.vpet-playeredit .muted { margin: 0; }
.vpet-playeredit input { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: var(--surface); color: inherit; }
.vpet-playererr { margin: 0; color: #b3261e; }
.vpet-playeredit .vpet-gbtns { justify-content: flex-start; margin: 0; }

/* Game boards: pick a game, pick a period, look at the podium */
.vboard-games { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; margin-bottom: 8px; scrollbar-width: thin; }
.vboard-game { flex: 0 0 auto; display: grid; justify-items: center; gap: 2px; min-width: 84px; padding: 8px 12px; border: 2px solid var(--line); border-radius: 16px; background: var(--surface); color: inherit; font: inherit; font-size: .8rem; cursor: pointer; transition: transform .12s; }
.vboard-game:hover { transform: translateY(-2px); }
.vboard-game[aria-selected="true"] { border-color: #e0a800; box-shadow: 0 3px 0 #e0a800; font-weight: 700; }
.vboard-ico { font-size: 1.8rem; line-height: 1.1; }
.vboard-hero { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: linear-gradient(135deg, rgba(224,168,0,.18), rgba(47,125,109,.15)); }
.vboard-hero h2 { margin: 0; } .vboard-hero p { margin: 2px 0 0; opacity: .8; font-size: .9rem; }
.vboard-sprite { display: grid; place-items: center; width: 64px; height: 64px; font-size: 2.4rem; border-radius: 50%; background: var(--surface); border: 3px solid #e0a800; box-shadow: 0 3px 0 rgba(0,0,0,.12); flex: 0 0 auto; }
.vboard-periods { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.vboard-period { font: inherit; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: none; color: inherit; cursor: pointer; }
.vboard-period[aria-pressed="true"] { background: #e0a800; border-color: #e0a800; color: #1d1d1d; font-weight: 700; }
.vboard-empty { text-align: center; padding: 28px 8px; } .vboard-empty span { font-size: 3rem; opacity: .5; }
.vboard-podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; padding: 14px 0 0; }
.vboard-step { flex: 1 1 0; max-width: 170px; display: grid; justify-items: center; gap: 2px; text-align: center; }
.vboard-medal { font-size: 2rem; } .vboard-score { font-size: 1.5rem; } .vboard-name { font-size: .85rem; overflow-wrap: anywhere; }
.vboard-block { display: block; width: 100%; border-radius: 10px 10px 0 0; background: linear-gradient(#e0a800, #b98700); margin-top: 6px; }
.vboard-step.is-1 .vboard-block { height: 84px; } .vboard-step.is-2 .vboard-block { height: 58px; background: linear-gradient(#c3c8cc, #9aa1a6); } .vboard-step.is-3 .vboard-block { height: 40px; background: linear-gradient(#cd8a4b, #a56a32); }
.vboard-step.is-1 .vboard-score { font-size: 2rem; }
.vboard-step.is-me .vboard-name { font-weight: 800; text-decoration: underline; }
.vboard-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.vboard-list li { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.vboard-list li.is-me { border-color: #e0a800; background: rgba(224,168,0,.14); font-weight: 700; }
.vboard-rank { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--line); font-size: .8rem; font-weight: 700; }
.vboard-list .vboard-name { flex: 1; }

/* indoors the clouds, like the rain, only show through the window (same box as .vpet-scene--living::before) */
.vpet-scene--living .vpet-sky-clouds { clip-path: inset(12% 70% 58% 8%); }

/* ---- legal pages (rapttor/yii2-legal markup: .legal, .legal-toc, .legal-notice, .legal-meta, .legal-more) ---- */
.legal-page .legal { max-width: 46rem; line-height: 1.6; overflow-wrap: anywhere; }
.legal-page .legal h1 { margin-top: 0; }
.legal-page .legal h2 { margin-top: 1.6em; }
.legal-page .legal table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1em 0; font-size: .92rem; }
.legal-page .legal th, .legal-page .legal td { border: 1px solid var(--line); padding: .45em .65em; text-align: start; vertical-align: top; }
.legal-page .legal th { background: var(--surface); }
.legal-page .legal-toc { margin: 1em 0 1.5em; padding: .8em 1em; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.legal-page .legal-toc ol { margin: .4em 0 0; padding-inline-start: 1.3em; }
.legal-page .legal-notice { padding: .7em 1em; border-inline-start: 4px solid var(--accent); background: var(--surface); }
.legal-page .legal-meta { margin-top: 2em; color: var(--muted); }
.legal-page .legal-rights, .legal-page .legal-more { max-width: 46rem; margin-top: 1.5em; }
.legal-page .legal-more ul { padding-inline-start: 1.2em; }
.legal-cookie-link { color: var(--link); }
.site-footer .legal-cookie-link { font: inherit; }

/* ===== training plans (training/*) ===== */
.training-head h1 { display: flex; align-items: center; gap: 8px; }
.tr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 16px 0; }
.tr-stat { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.tr-stat strong { font-size: 1.6rem; line-height: 1.1; color: var(--brand); }
.tr-stat span { font-size: .85rem; color: var(--muted); }
.tr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; margin: 10px 0 20px; }
.tr-card { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.tr-card h3 { margin: 0 0 6px; font-size: 1.1rem; }
.tr-card p { margin: 6px 0; }
.tr-card.status-paused { opacity: .8; }
.tr-card-head, .tr-plan-head { display: flex; align-items: center; gap: 14px; }
.tr-plan-head h1 { margin: 0 0 4px; font-size: 1.5rem; }
.tr-sub { margin: 18px 0 0; font-size: 1rem; color: var(--muted); }
.tr-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.tr-today { margin: 4px 0 0; padding-inline-start: 18px; }
.tr-today-label { margin: 10px 0 0 !important; }
.tr-ring { position: relative; display: inline-grid; place-items: center; flex: none; inline-size: 64px; block-size: 64px; }
.tr-ring svg { position: absolute; inset: 0; }
.tr-ring-bg { fill: none; stroke: var(--line); stroke-width: 7; }
.tr-ring-fg { fill: none; stroke: var(--brand); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .4s ease; }
.tr-ring-n { position: relative; font-size: .8rem; font-weight: 700; }
.tr-steps { list-style: none; margin: 10px 0 20px; padding: 0; display: grid; gap: 8px; counter-reset: lesson; }
.tr-step { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.tr-step.is-due { border-color: var(--brand); }
.tr-step summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.tr-step summary::-webkit-details-marker { display: none; }
.tr-step > details > :not(summary) { margin-inline: 14px; }
.tr-step > details > :last-child { margin-block-end: 14px; }
.tr-check { display: inline-grid; place-items: center; inline-size: 24px; block-size: 24px; border: 2px solid var(--line); border-radius: 50%; flex: none; }
.tr-step.is-done .tr-check { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.tr-step.is-done summary strong { text-decoration: line-through; text-decoration-color: var(--muted); }
.tr-week { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tr-chip-today { border-color: var(--brand); color: var(--brand); }
.tr-lesson-body h4 { margin: 14px 0 4px; font-size: .95rem; }
.tr-lesson-body p, .tr-lesson-body ol { margin: 4px 0; }
.tr-lesson-body ol { padding-inline-start: 22px; }
.tr-goal { padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--brand) 10%, transparent); }
.tr-mark { display: grid; gap: 10px; margin-block-start: 14px; padding-block-start: 12px; border-block-start: 1px dashed var(--line); }
.tr-mark fieldset { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0; padding: 0; }
.tr-mark legend { padding: 0; margin-block-end: 6px; color: var(--muted); }
.tr-mark input[type=text] { inline-size: 100%; padding: 8px 10px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.tr-mark button { justify-self: start; }
.tr-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.tr-done-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; margin: 12px 0; border: 1px solid var(--brand); border-radius: 12px; background: color-mix(in srgb, var(--brand) 10%, transparent); }
.tr-celebrate { margin: 14px 0; padding: 16px 18px; border: 2px solid var(--brand); border-radius: var(--radius); background: color-mix(in srgb, var(--brand) 9%, var(--surface)); }
.tr-celebrate h2 { margin: 0 0 8px; font-size: 1.15rem; }
.tr-badges { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px; }
.tr-badges li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.tr-badges li.is-locked { opacity: .65; }
.tr-badge-icon { display: inline-grid; place-items: center; flex: none; inline-size: 44px; block-size: 44px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); }
.tr-badge-icon.is-locked { background: var(--line); color: var(--muted); }
.tr-danger { margin: 16px 0; }
.tr-danger summary { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .tr-ring-fg { transition: none; } }

/* ---- food and medication tracker (care-*) ---- */
.care-page h2 { margin: 22px 0 8px; font-size: 1.15rem; }
.care-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); margin: 12px 0; }
.care-card { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 14px 16px; border-inline-start: 5px solid var(--line); }
.care-card.state-ok { border-inline-start-color: var(--brand); }
.care-card.state-low { border-inline-start-color: #b9540f; }
.care-card.state-out { border-inline-start-color: #c0392b; }
.care-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.care-card-head h2 { margin: 0; font-size: 1.1rem; }
.care-tag { display: inline-block; padding: 1px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; color: var(--muted); }
.care-main { margin: 6px 0; }
.care-stock { margin: 4px 0; }
.care-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-block-start: 10px; }
.care-inline { display: inline-flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; margin: 0; }
.care-num { width: 5.5em; }
.care-hint, .care-note { padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); font-size: .95rem; }
.care-warning { margin: 12px 0; padding: 12px 16px; border: 2px solid #b9540f; border-radius: 12px; background: var(--surface); }
.care-result { margin: 16px 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.care-doses { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.care-dose { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); border-inline-start: 5px solid var(--line); }
.care-dose-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.care-dose-actions { display: flex; gap: 6px; }
.care-time { font-variant-numeric: tabular-nums; }
.care-status { font-size: .85rem; font-weight: 700; }
.care-dose.status-given { border-inline-start-color: #2e7d4f; opacity: .8; }
.care-dose.status-skipped { opacity: .65; }
.care-dose.status-due { border-inline-start-color: var(--brand); }
.care-dose.status-overdue { border-inline-start-color: #c0392b; }
.care-dose.status-overdue .care-status { color: #c0392b; }
.care-plain { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; }
.care-alert { font-weight: 700; color: #b9540f; }
.care-old { margin: 18px 0; }
.care-widget .cta { margin-block-start: 8px; }
@media (prefers-color-scheme: dark) { .care-alert, .care-dose.status-overdue .care-status { color: #ff9b6a; } }

/* --- Pet-friendly places (feature: pet-friendly map) --- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.pet-chip { cursor: pointer; background: var(--surface); font: inherit; font-size: .9rem; color: var(--text); }
.pet-chip.is-on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.pet-chip.is-on .muted { color: inherit; opacity: .85; }
.pet-rule { font-weight: 600; }
.pet-rule--yes { border-color: #2e9e5b; color: #2e9e5b; }
.pet-rule--leashed { border-color: #b57f0c; color: #b57f0c; }
.pet-rule--off_leash { border-color: #2b7de9; color: #2b7de9; }
.pet-rule--conditional { border-color: #8e5bb8; color: #8e5bb8; }
.pet-rule--no { border-color: #c0392b; color: #c0392b; }
.pet-policy .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 8px; }
.pet-vote input[type=text] { inline-size: 100%; max-inline-size: 520px; padding: 9px 12px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.map-controls .map-check { font-weight: 400; }
.map-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 8px 0; padding: 0; font-size: .85rem; color: var(--muted); }
.legend-dot { display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 50%; margin-inline-end: 4px; background: currentColor; }
.map-popup-rule { font-weight: 600; }
.map-cluster { display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 50%; background: var(--brand, #2e7d6b); color: var(--brand-ink, #fff); border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); font: 700 .8rem/1 system-ui, sans-serif; }
.map-cluster span { pointer-events: none; }
.suggest-form { max-inline-size: 640px; }
.suggest-where { border: 0; padding: 0; margin: 12px 0; }
.suggest-where legend { font-weight: 600; padding: 0; margin-block-end: 6px; }
.suggest-form select, .suggest-form input[type=text] { inline-size: 100%; padding: 9px 12px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }

/* === Collar tag and lost & found (CollarController, FinderController, LostController) === */
.collar-panel .lost-flag, .lost-flag { border-inline-start: 4px solid #b3261e; padding: 8px 12px; background: color-mix(in srgb, #b3261e 10%, transparent); border-radius: 8px; }
.lost-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-block: 12px; }
.lost-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px; }
.lost-card h3 { margin: 0 0 4px; }
.lost-photo { inline-size: 96px; block-size: 96px; object-fit: cover; border-radius: 12px; flex: 0 0 auto; }
.lost-view .lost-banner { margin-block-end: 12px; }
.place-picker { display: grid; gap: 6px; margin-block: 8px; }
.print-page .tag-sheet { padding-block: 4mm; }

/* ===== Online shelter (adopt) ===== */
.ol-page { max-width: 1100px; margin: 0 auto; padding: 8px 16px 40px; }
.ol-hero { padding: 12px 0 4px; }
.ol-hero h1 { margin: 0 0 6px; letter-spacing: -.02em; }
.ol-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ol-filter { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 14px 0; }
.ol-filter-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ol-filter label > span { display: block; font-weight: 600; font-size: .85rem; margin-block-end: 3px; }
.ol-filter select, .ol-filter input[type=text], .ol-form input[type=text], .ol-form input[type=number], .ol-form input[type=date], .ol-form select, .ol-form textarea, .ol-ask textarea, .ol-ask select, .ol-ask input[type=text], .ol-report textarea, .ol-report select, .ol-respond textarea, .ol-join textarea, .ol-join select {
    width: 100%; box-sizing: border-box; padding: 9px 11px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.ol-checks { border: 0; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ol-filter-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 0; }
.ol-count { color: var(--muted); margin: 6px 0; }
.ol-city, .ol-city .form-group { position: relative; }
.ol-suggest { position: absolute; inset-inline: 0; z-index: 20; margin: 2px 0 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); max-height: 16rem; overflow: auto; }
.ol-suggest[hidden] { display: none; }
.ol-suggest li { padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.ol-suggest li:hover, .ol-suggest li.on { background: color-mix(in srgb, var(--brand) 14%, transparent); }
.ol-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin: 12px 0 20px; }
.ol-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.ol-card-media { position: relative; display: block; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--brand) 8%, var(--bg)); }
.ol-card-media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.ol-card-ph, .ol-photo-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; block-size: 100%; color: var(--muted); }
.ol-flag { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; background: #8a6410; color: #fff; font-size: .75rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.ol-card-body { padding: 12px 14px 14px; }
.ol-card-body h3 { margin: 0 0 4px; font-size: 1.1rem; }
.ol-card-body h3 a { color: inherit; text-decoration: none; }
.ol-meta { margin: 2px 0; color: var(--muted); font-size: .92rem; }
.ol-tags { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ol-empty { text-align: center; }
.ol-layout { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .ol-layout { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); } }
.ol-gallery { margin-block-end: 14px; }
.ol-photo-main img { inline-size: 100%; max-block-size: 520px; object-fit: cover; border-radius: var(--radius); display: block; }
.ol-photo-ph { aspect-ratio: 4 / 3; border: 1px dashed var(--line); border-radius: var(--radius); }
.ol-thumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 8px 0 0; }
.ol-thumbs li { position: relative; }
.ol-thumbs img { inline-size: 110px; block-size: 82px; object-fit: cover; border-radius: 10px; display: block; }
.ol-text { line-height: 1.6; overflow-wrap: anywhere; }
.ol-facts { display: grid; gap: 8px 20px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 16px 0; }
.ol-facts dt { font-size: .82rem; color: var(--muted); font-weight: 600; }
.ol-facts dd { margin: 0; }
.ol-side .panel { max-width: none; margin-block: 0 14px; }
.ol-side h2 { font-size: 1.1rem; }
.ol-report summary { cursor: pointer; font-weight: 600; }
.ol-safety { margin: 28px 0 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ol-safety h2 { margin: 0 0 8px; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.ol-safety ul { margin: 0; padding-inline-start: 1.2em; color: var(--muted); }
.ol-form fieldset { border: 0; border-block-start: 1px solid var(--line); padding: 14px 0 4px; margin: 0 0 8px; min-inline-size: 0; }
.ol-form legend { font-weight: 700; padding: 0 8px 0 0; }
.ol-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.ol-photo-edit { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.ol-photo-edit img { inline-size: 100%; block-size: 120px; object-fit: cover; border-radius: 10px; display: block; }
.ol-photo-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-block-start: 4px; }
.ol-mine { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.ol-mine-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.ol-mine-row.ol-unread { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); }
.ol-mine-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ol-msg { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; margin: 12px 0; }
.ol-reply { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.ol-transfer { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 12px 0; }
.ol-shelter h3 { margin-block-end: 6px; }
.ol-join summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.ol-nav { margin-block-end: 8px; }

/* --- Symptom checker (health KB, T10). Logical properties only, colours from the theme variables. --- */
.js-only { display: none; }
.js .js-only:not([hidden]) { display: revert; }
.symptom-check [hidden] { display: none !important; }
.health-notice { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--brand) 8%, transparent); font-size: .92rem; }
.health-notice > svg { flex: none; margin-block-start: 3px; }
.health-notice p { margin: 0 0 6px; }
.health-notice p:last-child { margin-block-end: 0; }
.health-notice-emergency { font-weight: 700; }
.symptom-check .check-progress { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-size: .9rem; }
.symptom-check progress { flex: 1; block-size: 8px; accent-color: var(--brand); }
.symptom-check fieldset { border: 0; padding: 0; margin: 0 0 16px; min-inline-size: 0; }
.symptom-check legend { padding: 0; margin-block-end: 8px; }
.symptom-check legend h2 { margin: 0; font-size: 1.25rem; }
.symptom-check legend:focus-within, .symptom-check [data-focus]:focus { outline: none; }
.symptom-check [data-focus]:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.check-scroll { max-block-size: 22rem; overflow: auto; padding-inline-end: 4px; }
.check-list .choice { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); cursor: pointer; font-weight: 400; margin: 0; }
.check-list .choice:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.check-list .choice input { margin-block-start: 4px; flex: none; }
.check-list .choice small { display: block; }
.check-list .choice.red-flag { border-inline-start: 4px solid #c0392b; }
.check-emergency .choice:has(input:checked) { border-color: #c0392b; background: color-mix(in srgb, #c0392b 12%, transparent); }
.check-live { margin: 12px 0 0; padding: 12px 16px; border: 2px solid #c0392b; border-radius: 12px; background: color-mix(in srgb, #c0392b 10%, transparent); }
.flag-icon { color: #c0392b; vertical-align: text-bottom; margin-inline-start: 4px; }
.red-flag-note { padding: 10px 14px; border-radius: 10px; border: 1px solid #c0392b; background: color-mix(in srgb, #c0392b 8%, transparent); }
.check-group { border-block-start: 1px solid var(--line) !important; padding-block-start: 12px !important; }
.check-group legend { font-weight: 700; padding-inline-end: 8px; }
.check-tiles { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.check-tiles .tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; text-align: center; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); cursor: pointer; margin: 0; font-weight: 600; }
.check-tiles .tile:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, transparent); }
.check-tiles .tile input { position: absolute; opacity: 0; pointer-events: none; }
.check-tiles .tile:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.check-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.check-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-block: 8px; }
.check-grid select, .check-grid input[type=text], .check-grid input[type=number] { inline-size: 100%; }
.check-age { display: flex; gap: 8px; }
.check-actions { display: flex; flex-wrap: wrap; flex-direction: row-reverse; justify-content: flex-end; gap: 10px; margin-block: 16px 4px; }
.check-vets .check-actions, .vet-summary .check-actions { flex-direction: row; justify-content: flex-start; }
.urgency { margin: 16px 0; padding: 16px 18px; border: 2px solid var(--line); border-inline-start-width: 8px; border-radius: 14px; background: var(--surface); }
.urgency h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 1.4rem; }
.urgency h3 { margin: 16px 0 6px; font-size: 1.05rem; }
.urgency-lead { font-size: 1.1rem; margin: 0 0 8px; }
.urgency-emergency { border-color: #c0392b; background: color-mix(in srgb, #c0392b 9%, var(--surface)); }
.urgency-today { border-color: #e67e22; background: color-mix(in srgb, #e67e22 9%, var(--surface)); }
.urgency-soon { border-color: #c9a227; }
.urgency-monitor { border-color: var(--brand); }
.safe-steps { margin: 0 0 8px; padding-inline-start: 1.3em; }
.check-vets { margin-block: 14px; }
.check-vets h3 { margin: 0 0 8px; }
.vet-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px; }
.vet-item { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.vet-item p { margin: 2px 0 8px; }
.vet-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.chip.vet-emergency, .chip.vet-24h { border-color: #c0392b; color: #c0392b; }
.chip.vet-open_now { border-color: var(--brand); color: var(--brand); }
.vet-form { margin-block-start: 10px; }
.cause-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 12px; }
.cause { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.cause h3 { margin: 0 0 6px; font-size: 1.1rem; }
.cause p { margin: 4px 0; }
.cause-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.strength-strong { border-color: var(--brand); color: var(--brand); font-weight: 700; }
.chip.urg-emergency { border-color: #c0392b; color: #c0392b; }
.chip.urg-today { border-color: #e67e22; color: #e67e22; }
.causes-pinned { margin-block-start: 18px; }
.causes-collapsed { margin-block: 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; }
.causes-collapsed summary { cursor: pointer; font-weight: 700; }
.sanity-check { margin: 16px 0; padding: 12px 16px; border-inline-start: 4px solid var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); border-radius: 8px; }
.sanity-check p { margin: 0 0 6px; }
.toxic-card, .vet-summary, .check-feedback { margin: 18px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.toxic-card h2, .vet-summary h2, .check-feedback h2 { margin: 0 0 8px; font-size: 1.15rem; }
.summary-list { display: grid; gap: 4px; margin: 0; }
.summary-list > div { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr; gap: 8px; }
.summary-list dt { color: var(--muted); font-weight: 600; }
.summary-list dd { margin: 0; overflow-wrap: anywhere; }
.check-save { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-block: 14px; }
.check-save select { inline-size: auto; }
.check-unavailable { padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; }
@media (max-width: 520px) { .summary-list > div { grid-template-columns: 1fr; gap: 0; } }
@media print {
    html.printing-summary body * { visibility: hidden; }
    html.printing-summary .vet-summary, html.printing-summary .vet-summary * { visibility: visible; }
    html.printing-summary .vet-summary { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 100%; border: 0; }
    html.printing-summary .vet-summary .check-actions { display: none; }
}

/* === Health knowledge base (T9): /health pages. Logical properties and theme variables only, so RTL and dark mode follow. === */
.kb h2 { margin-block: 22px 8px; font-size: 1.25rem; }
.kb h3 { font-size: 1.02rem; }
.kb-species { font-size: .55em; font-weight: 500; color: var(--muted); }
.kb-lead { font-size: 1.08rem; }
.kb-notice { margin: 12px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: .93rem; }
.kb-notice p { margin: 0 0 6px; }
.kb-notice p:last-child { margin: 0; color: var(--muted); }
.kb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.kb-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.kb-empty { padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; background: color-mix(in srgb, var(--brand) 6%, transparent); }
.kb-urg { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 2px solid var(--muted); font-size: .8rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.kb-urg-emergency { border-color: #c0392b; background: color-mix(in srgb, #c0392b 22%, transparent); }
.kb-urg-today { border-color: #e67e22; background: color-mix(in srgb, #e67e22 20%, transparent); }
.kb-urg-soon { border-color: #c9a227; background: color-mix(in srgb, #c9a227 18%, transparent); }
.kb-urg-monitor { border-color: #2e7d4f; background: color-mix(in srgb, #2e7d4f 16%, transparent); }
.kb-emergency { margin: 16px 0; padding: 16px 18px; border: 3px solid #c0392b; border-radius: 14px; background: color-mix(in srgb, #c0392b 11%, transparent); }
.kb-emergency h2 { margin-block-start: 0; display: flex; align-items: center; gap: 8px; color: var(--text); }
.kb-emergency h3 { margin-block: 12px 4px; }
.kb-emergency ul { margin: 6px 0 10px; padding-inline-start: 20px; }
.kb-today { margin: 16px 0; padding: 12px 16px; border: 2px solid #e67e22; border-radius: 12px; background: color-mix(in srgb, #e67e22 12%, transparent); }
.kb-today p { margin: 4px 0; }
.kb-glance-line { margin: 12px 0; }
.kb-card-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0; }
.kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 12px 0; }
.kb-card { padding: 12px 14px; border: 1px solid var(--line); border-inline-start-width: 5px; border-radius: 12px; background: var(--surface); min-width: 0; }
.kb-card h3 { margin: 0 0 4px; }
.kb-card p { margin: 6px 0 0; }
.kb-card-emergency { border-inline-start-color: #c0392b; }
.kb-card-today { border-inline-start-color: #e67e22; }
.kb-card-soon { border-inline-start-color: #c9a227; }
.kb-card-monitor { border-inline-start-color: #2e7d4f; }
.kb-tiles { list-style: none; margin: 12px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.kb-tiles a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-decoration: none; color: var(--text); text-align: center; }
.kb-tiles a:hover, .kb-tiles a:focus-visible { border-color: var(--brand); }
.kb-tiles .icon { color: var(--brand); }
.kb-search { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.kb-search input[type=search] { flex: 1 1 220px; min-width: 0; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; }
.kb-search select { padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; }
.kb-search .btn { display: inline-flex; align-items: center; gap: 6px; }
.kb-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin: 10px 0; }
.kb-filters label { display: block; font-size: .85rem; color: var(--muted); margin-block-end: 2px; }
.kb-filters select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; max-width: 100%; }
.kb-filter-go { display: flex; gap: 8px; }
.kb-section { margin-block: 18px; scroll-margin-block-start: 70px; }
.kb-section > h2 { padding-block-end: 4px; border-block-end: 1px solid var(--line); }
.kb-body p { margin: 0 0 .7em; }
.kb-body ul, .kb-body ol { margin: 0 0 .8em; padding-inline-start: 22px; }
.kb-body li { margin-block: 3px; }
.kb-section-sanity-check .kb-body { padding: 12px 16px; border-inline-start: 4px solid var(--brand); border-radius: 8px; background: color-mix(in srgb, var(--brand) 8%, transparent); }
.kb-section-when-to-call .kb-body { padding: 12px 16px; border-inline-start: 4px solid #e67e22; border-radius: 8px; background: color-mix(in srgb, #e67e22 8%, transparent); }
.kb-stage { margin-block: 10px; padding-inline-start: 12px; border-inline-start: 3px solid var(--line); }
.kb-sources { margin: 8px 0 0; font-size: .88rem; color: var(--muted); }
.kb-sources summary { cursor: pointer; }
.kb-sources ul { margin: 6px 0; padding-inline-start: 20px; }
.kb-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 14px; margin: 12px 0; }
.kb-facts div { padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.kb-facts dt { font-size: .85rem; color: var(--muted); }
.kb-facts dd { margin: 0; font-weight: 700; }
.kb-breeds { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.kb-breeds li { padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.kb-faq { margin: 6px 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.kb-faq summary { cursor: pointer; font-weight: 600; }
.kb-signs { margin: 6px 0; }
.kb-signs summary { cursor: pointer; font-weight: 600; padding-block: 4px; }
.kb-signs ul, .kb-faq-list, .kb-bib { padding-inline-start: 22px; }
.kb-redflag { border-color: #c0392b; }
.kb-results { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.kb-results li { padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.kb-tabs, .kb-pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.kb-tabs .chip.on, .kb-pager .chip.on { border-color: var(--brand); color: var(--text); background: color-mix(in srgb, var(--brand) 14%, transparent); }
.kb-applies { margin: 8px 0; }
.kb-links { margin-block-start: 22px; }
@media (max-width: 560px) {
    .kb-grid { grid-template-columns: 1fr; }
    .kb-filters > div { flex: 1 1 100%; }
    .kb-filters select { width: 100%; }
}
@media print {
    .kb-actions, .kb-search, .kb-filters { display: none; }
}