/* ==========================================================================
   app.css - OnlyDogFood interactive surfaces (NOT loaded on the high-traffic
   public pages). Conditionally enqueued via odf_needs_app_css() - see
   functions.php. Keeping these rules out of main.css trims render-blocking
   CSS on the homepage, product pages and directory. Depends on tokens.css.

   Starting set: generic form/account primitives ported from tc-theme.
   TODO: review-submit form, account dashboard, saved-foods list styles land
   here as those surfaces are built (06-PAGE-SPECS 14 + 18).
   ========================================================================== */

/* Full-width app surface (dashboards are apps, not prose). */
.odf-content--wide { max-width: none; }

/* App card: a boxed section of a dashboard/form page. */
.odf-app-card {
	background: var(--odf-card); border: 1px solid var(--odf-line); border-radius: var(--odf-radius-lg);
	padding: var(--odf-sp-5); margin-bottom: var(--odf-sp-4); box-shadow: var(--odf-shadow-xs);
}
.odf-app-card h3 { margin-top: 0; display: flex; align-items: center; gap: 8px; font-size: var(--odf-fs-lg); }

/* Field groups - divide a long form into labelled, boxed sections. */
.odf-fgroup { border: 1px solid var(--odf-line); border-radius: var(--odf-radius); background: var(--odf-tint); padding: var(--odf-sp-4); margin-bottom: var(--odf-sp-4); }
.odf-fgroup__h { display: flex; align-items: center; gap: 8px; margin: 0 0 3px; font-size: var(--odf-fs-base); font-weight: 800; color: var(--odf-ink); letter-spacing: -.01em; }
.odf-fgroup__sub { margin: 0 0 var(--odf-sp-4); font-size: var(--odf-fs-sm); color: var(--odf-ink-3); line-height: 1.5; }
.odf-fgroup > *:last-child { margin-bottom: 0; }
@media (max-width: 600px) { .odf-fgroup { padding: var(--odf-sp-3); } }

/* Multi-field rows that stack on phones. */
.odf-frow { display: flex; gap: var(--odf-sp-3); }
.odf-frow > .odf-fld { flex: 1 1 0; }
@media (max-width: 600px) { .odf-frow { flex-direction: column; gap: 0; } }

/* Notices (success / error / info) after form submits. */
.odf-notice { display: flex; gap: 8px; align-items: flex-start; padding: var(--odf-sp-3) var(--odf-sp-4); border-radius: var(--odf-radius); border: 1px solid var(--odf-line); background: var(--odf-tint); font-size: var(--odf-fs-sm); color: var(--odf-ink-2); margin: 0 0 var(--odf-sp-4); line-height: 1.5; }
.odf-notice--ok { border-color: var(--odf-band-verygood); background: #f0f7f0; color: var(--odf-band-exceptional); }
.odf-notice--err { border-color: var(--odf-band-avoid); background: #fbf1f0; color: var(--odf-band-avoid); }
.odf-notice svg { flex: 0 0 auto; margin-top: 2px; }

/* Compact auth card (sign-in / register / lost + reset password). */
.odf-authcard { max-width: 440px; margin: var(--odf-sp-6) auto; }
.odf-auth__title { margin: 0 0 var(--odf-sp-2); font-size: var(--odf-fs-xl); letter-spacing: -.02em; }
.odf-auth__sub { margin: 0 0 var(--odf-sp-4); color: var(--odf-ink-3); font-size: var(--odf-fs-sm); line-height: 1.5; }
.odf-auth__hint { margin: -6px 0 var(--odf-sp-3); color: var(--odf-ink-3); font-size: var(--odf-fs-xs); }
.odf-auth__alt { margin: var(--odf-sp-4) 0 0; padding-top: var(--odf-sp-4); border-top: 1px solid var(--odf-line); font-size: var(--odf-fs-sm); color: var(--odf-ink-2); text-align: center; }
.odf-auth__row { display: flex; align-items: center; justify-content: space-between; gap: var(--odf-sp-3); margin-bottom: var(--odf-sp-4); font-size: var(--odf-fs-sm); }
.odf-auth__remember { display: inline-flex; align-items: center; gap: 6px; color: var(--odf-ink-2); }
.odf-auth__lost { white-space: nowrap; }

/* Auth form: consistent vertical rhythm. */
.odf-authform { margin: 0; }
.odf-authform--resend { margin-top: var(--odf-sp-5); padding-top: var(--odf-sp-4); border-top: 1px dashed var(--odf-line); }

/* Full-width button (auth CTAs stretch the card). */
.odf-btn--block { display: flex; width: 100%; justify-content: center; }

/* ==========================================================================
   Brand-owner dashboard shell ([odf_account]). Placeholder panels in wave 1;
   wave 2/3 fill the bodies within the same grid.
   ========================================================================== */
.odf-dash { max-width: 960px; margin: 0 auto; }
.odf-dash__top { display: flex; align-items: center; justify-content: space-between; gap: var(--odf-sp-3); flex-wrap: wrap; margin-bottom: var(--odf-sp-4); }
.odf-dash__id { display: flex; align-items: center; gap: var(--odf-sp-3); min-width: 0; }
.odf-dash__avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: var(--odf-green-soft); color: var(--odf-green-deep); display: grid; place-items: center; font-weight: 800; font-size: var(--odf-fs-lg); }
.odf-dash__idmeta { display: flex; flex-direction: column; min-width: 0; }
.odf-dash__idmeta small { color: var(--odf-ink-3); font-size: var(--odf-fs-xs); }
.odf-dash__idmeta strong { font-size: var(--odf-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odf-dash__welcome { margin: 0 0 var(--odf-sp-5); font-size: var(--odf-fs-xl); letter-spacing: -.02em; }

.odf-dash__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--odf-sp-4); margin-bottom: var(--odf-sp-4); }
.odf-dash__panel { margin-bottom: 0; }
.odf-dash__panelhead { display: flex; align-items: center; gap: 8px; margin-bottom: var(--odf-sp-2); }
.odf-dash__panelhead h2 { margin: 0; font-size: var(--odf-fs-base); font-weight: 800; }
.odf-dash__panelico { color: var(--odf-green); display: inline-flex; }
.odf-dash__soon { margin-left: auto; font-size: var(--odf-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--odf-ink-3); background: var(--odf-tint); border: 1px solid var(--odf-line); border-radius: var(--odf-radius-pill); padding: 2px 8px; }
.odf-dash__panel p { margin: 0; color: var(--odf-ink-2); font-size: var(--odf-fs-sm); line-height: 1.5; }
.odf-dash__settings { max-width: 460px; }

/* --- Team panel (brand dashboard): roster + email-bound invites ----------- */
.odf-dash__panelsub { margin-left: auto; font-size: var(--odf-fs-xs); font-weight: 600; color: var(--odf-ink-3); }
.odf-team { list-style: none; margin: 0 0 var(--odf-sp-4); padding: 0; }
.odf-team__row { display: flex; align-items: center; gap: var(--odf-sp-3); padding: 10px 0; border-bottom: 1px solid var(--odf-line); }
.odf-team__row:last-child { border-bottom: 0; }
.odf-team__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.odf-team__who strong { font-size: var(--odf-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odf-team__who small { color: var(--odf-ink-3); font-size: var(--odf-fs-xs); }
.odf-team__chips { display: flex; gap: 6px; margin-left: auto; flex: none; }
.odf-team__revoke { flex: none; margin: 0; }
.odf-pill--soft { background: var(--odf-tint); color: var(--odf-ink-2); }
.odf-pill--amber { background: color-mix(in srgb, var(--odf-band-average, #d9930d) 16%, #fff); color: #8a5b06; }
.odf-team__invite label { display: block; font-weight: 700; font-size: var(--odf-fs-sm); margin-bottom: 6px; }
.odf-team__inviterow { display: flex; gap: var(--odf-sp-2); flex-wrap: wrap; }
.odf-team__inviterow input[type="email"] { flex: 1 1 220px; border: 1.5px solid var(--odf-line); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: var(--odf-fs-sm); background: var(--odf-card); }
.odf-team__inviterow input[type="email"]:focus { outline: 2px solid var(--odf-green); outline-offset: 1px; border-color: var(--odf-green); }
.odf-dash__hint { margin-top: var(--odf-sp-2); font-size: var(--odf-fs-xs); color: var(--odf-ink-3); }
@media (max-width: 560px) {
	.odf-team__row { flex-wrap: wrap; }
	.odf-team__chips { margin-left: 0; }
}

/* --- Sign in | Create account segmented toggle (one auth page, two modes) --- */
.odf-authtoggle { display: flex; gap: 4px; background: var(--odf-tint); border-radius: var(--odf-radius-pill); padding: 4px; margin-bottom: var(--odf-sp-4); }
.odf-authtoggle a { flex: 1; text-align: center; padding: 9px 12px; border-radius: var(--odf-radius-pill); font-weight: 700; font-size: var(--odf-fs-sm); color: var(--odf-ink-2); }
.odf-authtoggle a:hover { color: var(--odf-ink); }
.odf-authtoggle a.is-active { background: var(--odf-card); color: var(--odf-ink); box-shadow: var(--odf-shadow-xs); }

/* --- Help & support panel (brand dashboard) -------------------------------- */
.odf-support__thread, .odf-support__new { border: 1px solid var(--odf-line); border-radius: var(--odf-radius-sm); padding: var(--odf-sp-2) var(--odf-sp-3); margin-bottom: var(--odf-sp-2); }
.odf-support__thread summary, .odf-support__new summary { cursor: pointer; display: flex; align-items: center; gap: var(--odf-sp-2); font-weight: 700; font-size: var(--odf-fs-sm); }
.odf-support__subject { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odf-support__msg { margin: var(--odf-sp-2) 0; padding: 10px 12px; border-radius: 10px; background: var(--odf-tint); font-size: var(--odf-fs-sm); }
.odf-support__msg--staff { background: var(--odf-green-soft); }
.odf-support__msg p { margin: 0; }
.odf-support__meta { margin-bottom: 4px !important; }
.odf-support__meta time { color: var(--odf-ink-3); font-size: var(--odf-fs-xs); font-weight: 500; margin-left: 6px; }
.odf-support__replyform textarea, .odf-support__form textarea, .odf-support__form input[type="text"], .odf-support__form select { width: 100%; margin: 6px 0; border: 1.5px solid var(--odf-line); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: var(--odf-fs-sm); background: var(--odf-card); }
.odf-support__form label { display: block; font-weight: 700; font-size: var(--odf-fs-sm); margin-top: var(--odf-sp-2); }
.odf-support__replyform { margin-top: var(--odf-sp-2); }
.odf-dash__settings .odf-authform { margin-top: var(--odf-sp-3); }

/* ==========================================================================
   Brand-owner dashboard - wave 2 management panels (brand edit, offers,
   reviews, claim, premium teaser). One vertical stack of app cards.
   ========================================================================== */
.odf-dash__stack { display: flex; flex-direction: column; gap: var(--odf-sp-4); margin-bottom: var(--odf-sp-4); }
.odf-dash__stack .odf-dash__panel { margin-bottom: 0; }

/* Your-brand panel. */
.odf-bpanel .odf-dash__panelhead { justify-content: space-between; }
.odf-bpanel__view { margin-left: auto; font-size: var(--odf-fs-sm); white-space: nowrap; }
.odf-bpanel__note { margin: 0 0 var(--odf-sp-4); padding: var(--odf-sp-3) var(--odf-sp-4); border-radius: var(--odf-radius); background: var(--odf-tint); border: 1px solid var(--odf-line); font-size: var(--odf-fs-sm); color: var(--odf-ink-2); line-height: 1.5; }

.odf-bform .odf-fld { margin-bottom: var(--odf-sp-3); }
.odf-bform__hint { margin: -6px 0 var(--odf-sp-4); color: var(--odf-ink-3); font-size: var(--odf-fs-xs); line-height: 1.5; }
.odf-bform fieldset { border: 1px solid var(--odf-line); border-radius: var(--odf-radius); padding: var(--odf-sp-4); margin: 0 0 var(--odf-sp-4); }
.odf-bform legend { padding: 0 6px; font-size: var(--odf-fs-sm); font-weight: 800; color: var(--odf-ink); }
.odf-bform__socials .odf-fld { margin-bottom: var(--odf-sp-2); }
.odf-bform__logopreview { margin-bottom: var(--odf-sp-3); }
.odf-bform__logopreview img { max-width: 140px; max-height: 90px; border: 1px solid var(--odf-line); border-radius: var(--odf-radius); background: var(--odf-card); padding: 6px; }
.odf-bform__remove { display: inline-flex; align-items: center; gap: 6px; font-size: var(--odf-fs-sm); color: var(--odf-ink-2); margin-bottom: var(--odf-sp-3); }

/* Offers repeater rows (parallel-array inputs; blank rows are dropped on save). */
.odf-offer-row { display: grid; grid-template-columns: 1.4fr .8fr 1.4fr .9fr 1.2fr; gap: var(--odf-sp-2); margin-bottom: var(--odf-sp-2); }
.odf-offer-row input { width: 100%; }
@media (max-width: 720px) { .odf-offer-row { grid-template-columns: 1fr 1fr; } }

/* Owner reviews list + response forms. */
.odf-owner-reviews__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--odf-sp-4); }
.odf-owner-review { border: 1px solid var(--odf-line); border-radius: var(--odf-radius); padding: var(--odf-sp-4); background: var(--odf-card); }
.odf-owner-review__head { display: flex; align-items: baseline; gap: var(--odf-sp-3); margin-bottom: 4px; }
.odf-owner-review__stars { color: var(--odf-gold, #c98a1e); letter-spacing: 1px; }
.odf-owner-review__ctx { font-size: var(--odf-fs-xs); color: var(--odf-ink-3); font-weight: 700; }
.odf-owner-review__title { margin: 0 0 4px; font-weight: 800; font-size: var(--odf-fs-sm); }
.odf-owner-review__body { margin: 0 0 4px; font-size: var(--odf-fs-sm); color: var(--odf-ink-2); line-height: 1.5; }
.odf-owner-review__by { margin: 0; font-size: var(--odf-fs-xs); color: var(--odf-ink-3); }
.odf-owner-review__reply { margin-top: var(--odf-sp-3); padding: var(--odf-sp-3); border-left: 3px solid var(--odf-green); background: var(--odf-green-soft); border-radius: var(--odf-radius); }
.odf-owner-review__reply strong { display: block; font-size: var(--odf-fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--odf-green-deep); margin-bottom: 3px; }
.odf-owner-review__reply p { margin: 0; font-size: var(--odf-fs-sm); color: var(--odf-ink-2); }
.odf-owner-review__form { margin-top: var(--odf-sp-3); }
.odf-owner-review__form summary { cursor: pointer; font-size: var(--odf-fs-sm); font-weight: 700; color: var(--odf-green-deep); }
.odf-owner-review__form form { margin-top: var(--odf-sp-3); }

/* Claim-a-brand panel + the on-page brand CTA. */
.odf-claim-panel__form { margin-top: var(--odf-sp-3); max-width: 460px; }
/* Compact, right-aligned, quiet (founder ask 28 Jul 2026) - a small footnote
   row, not a full-width band shouting at every visitor. */
.odf-claim-slot { margin: var(--odf-sp-2) auto; display: flex; justify-content: flex-end; }
.odf-claim-form { margin: 0; }
.odf-claim-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--odf-fs-xs); font-weight: 600; color: var(--odf-ink-3); }
.odf-claim-link:hover { color: var(--odf-green-deep); }
.odf-claim-link svg { width: 13px; height: 13px; }
.odf-claim-link--muted { color: var(--odf-ink-3); font-weight: 600; }

/* Hero variant: sits under the brand logo in the hero side column, so it is
   centred on the logo card and deliberately quiet - it speaks to one brand
   owner, not to the reader who came to see the ratings. No container, no
   full-bleed strip, no button: a small line of text under a logo. */
.odf-claim-slot--hero { display: flex; justify-content: center; margin: var(--odf-sp-3) 0 0; }
/* A deliberate pill, not floating text. Loose centred text under the logo read
   as a stray caption; a bordered chip reads as the quiet call-to-action it is,
   and keeps its shape even if it wraps. align-items:center keeps the shield on
   the text's centre line rather than the first row's baseline. */
.odf-claim-slot--hero .odf-claim-link { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 14px; border: 1px solid var(--odf-line); border-radius: 999px; background: var(--odf-card); font-size: var(--odf-fs-xs); font-weight: 600; line-height: 1.3; color: var(--odf-ink-3); text-align: center; transition: color .12s ease, border-color .12s ease, background-color .12s ease; }
.odf-claim-slot--hero .odf-claim-link svg { width: 13px; height: 13px; flex: 0 0 auto; }
.odf-claim-slot--hero .odf-claim-link:hover { color: var(--odf-green-deep); border-color: color-mix(in srgb, var(--odf-green) 40%, var(--odf-line)); background: var(--odf-green-soft); }
/* The signed-in claim state is already a real button - leave it its own size,
   just centre it under the logo. */
.odf-claim-slot--hero .odf-claim-form { display: flex; justify-content: center; }

/* Premium / billing panel (wave 3). */
.odf-billing__locked { display: inline-flex; align-items: center; gap: 6px; font-size: var(--odf-fs-sm); color: var(--odf-ink-3); }
.odf-billing__pill { margin-left: auto; font-size: var(--odf-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: var(--odf-radius-pill); padding: 2px 8px; border: 1px solid var(--odf-line); color: var(--odf-ink-3); background: var(--odf-tint); }
.odf-billing__pill--on { color: var(--odf-green-deep); background: var(--odf-green-soft); border-color: var(--odf-green); }
.odf-billing__badge { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: var(--odf-sp-3) 0; font-size: var(--odf-fs-sm); color: var(--odf-ink-2); }
.odf-billing__form { margin: var(--odf-sp-3) 0 var(--odf-sp-2); }
.odf-billing__feats { list-style: none; margin: var(--odf-sp-3) 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.odf-billing__feats li { display: flex; align-items: center; gap: 8px; font-size: var(--odf-fs-sm); color: var(--odf-ink-2); }
.odf-billing__feats li svg { color: var(--odf-green); flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   Dog-owner dashboard (Accounts wave 1): dogs, my reviews, Gravatar avatars.
   Reuses the shared .odf-dash / .odf-app-card / .odf-fld / .odf-btn system.
   --------------------------------------------------------------------------- */

/* Gravatar avatars (dashboard header + review cards) sit inside the existing
   round avatar chip; the <img> fills it. */
.odf-dash__avatar--img, .odf-review__avatar--img { overflow: hidden; padding: 0; }
.odf-dash__avatarimg, .odf-review__avatarimg { width: 100%; height: 100%; border-radius: 50%; display: block; object-fit: cover; }

/* Dogs grid + cards */
.odf-dogs__grid { list-style: none; margin: 0 0 var(--odf-sp-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--odf-sp-3); }
.odf-dogcard { border: 1px solid var(--odf-line); border-radius: var(--odf-radius); padding: var(--odf-sp-3); background: var(--odf-card); }
.odf-dogcard__head { display: flex; align-items: center; gap: var(--odf-sp-3); }
.odf-dogcard__photo { flex: 0 0 auto; width: 64px; height: 64px; border-radius: var(--odf-radius); object-fit: cover; background: var(--odf-tint); }
.odf-dogcard__photo--empty { display: grid; place-items: center; font-weight: 800; font-size: var(--odf-fs-lg); color: var(--odf-green-deep); background: var(--odf-green-soft); }
.odf-dogcard__id { display: flex; flex-direction: column; min-width: 0; }
.odf-dogcard__id strong { font-size: var(--odf-fs-base); }
.odf-dogcard__meta { color: var(--odf-ink-3); font-size: var(--odf-fs-sm); }
.odf-dogcard__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--odf-sp-3); }
.odf-dogcard__chip { font-size: var(--odf-fs-xs); background: var(--odf-tint); border: 1px solid var(--odf-line); border-radius: var(--odf-radius-pill); padding: 2px 9px; color: var(--odf-ink-2); }
.odf-dogcard__actions { margin-top: var(--odf-sp-3); }
.odf-dogcard__edit > summary { display: inline-flex; cursor: pointer; list-style: none; }
.odf-dogcard__edit > summary::-webkit-details-marker { display: none; }
.odf-dogcard__edit[open] > summary { margin-bottom: var(--odf-sp-3); }
.odf-dogcard__del { margin-top: var(--odf-sp-3); }

.odf-dogs__add { margin-top: var(--odf-sp-2); border-top: 1px dashed var(--odf-line); padding-top: var(--odf-sp-3); }
.odf-dogs__add > summary { cursor: pointer; font-weight: 700; color: var(--odf-green-deep); }
.odf-dogform { margin-top: var(--odf-sp-3); }
.odf-dogform .odf-fld { margin-bottom: var(--odf-sp-3); }
.odf-dogform__issues, .odf-dogform__photo { border: 0; padding: 0; margin: 0 0 var(--odf-sp-3); }
.odf-dogform__issues legend, .odf-dogform__photo legend { font-weight: 700; font-size: var(--odf-fs-sm); margin-bottom: var(--odf-sp-2); padding: 0; }
.odf-dogform__issues { display: flex; flex-wrap: wrap; gap: 6px; }
.odf-dogform__photopreview img { border-radius: var(--odf-radius); object-fit: cover; margin-bottom: var(--odf-sp-2); }

/* Check-pills (issue selectors + confirmation checkboxes) */
.odf-checkpill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--odf-fs-sm); border: 1px solid var(--odf-line); border-radius: var(--odf-radius-pill); padding: 4px 12px; cursor: pointer; background: var(--odf-card); }
.odf-checkpill input { margin: 0; }

/* Saved-dog picker on the review form */
.odf-reviewform__dogpick { margin-bottom: var(--odf-sp-3); }

/* My reviews list */
.odf-myreviews__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--odf-sp-3); }
.odf-myreview { border: 1px solid var(--odf-line); border-radius: var(--odf-radius); padding: var(--odf-sp-3); }
.odf-myreview__head { display: flex; align-items: center; justify-content: space-between; gap: var(--odf-sp-2); }
.odf-myreview__stars { color: var(--odf-gold); letter-spacing: 1px; }
.odf-myreview__ctx { margin: var(--odf-sp-2) 0 0; font-weight: 700; font-size: var(--odf-fs-sm); }
.odf-myreview__title { margin: 4px 0 0; font-weight: 700; }
.odf-myreview__body { margin: 4px 0 0; color: var(--odf-ink-2); font-size: var(--odf-fs-sm); line-height: 1.5; }

/* Status pills (reuse .odf-pill base from main.css) */
.odf-pill--ok { background: var(--odf-green-soft); color: var(--odf-green-deep); }
.odf-pill--err { background: #fbf1f0; color: var(--odf-band-avoid); }

/* Danger zone (delete account) */
.odf-dangerzone { margin-top: var(--odf-sp-5); padding-top: var(--odf-sp-4); border-top: 1px solid var(--odf-line); }
.odf-dangerzone h3 { margin: 0 0 var(--odf-sp-2); font-size: var(--odf-fs-base); color: var(--odf-band-avoid); }
.odf-dangerzone .odf-checkpill { margin: var(--odf-sp-2) 0; }
.odf-btn--danger { background: var(--odf-band-avoid); color: #fff; border-color: var(--odf-band-avoid); }
.odf-btn--danger:hover { filter: brightness(0.94); color: #fff; }
.odf-linkbtn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-decoration: underline; }
.odf-linkbtn--danger { color: var(--odf-band-avoid); }
.odf-dash__soonrow { margin-top: var(--odf-sp-3); font-size: var(--odf-fs-sm); color: var(--odf-ink-3); }

/* ==========================================================================
   Contact page (page-contact.php + [odf_contact_form]). A two-column layout:
   the message form on the left, the contact details cards on the right.
   Reuses the shared .odf-panel / .odf-fld / .odf-frow / .odf-notice / .odf-btn
   primitives - these rules only add the page's own layout + detail styling.
   ========================================================================== */
.odf-contact { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--odf-sp-5); align-items: start; }
@media (max-width: 860px) { .odf-contact { grid-template-columns: 1fr; gap: var(--odf-sp-4); } }

.odf-contact__main { min-width: 0; }
.odf-contact__panel { padding: var(--odf-sp-5); }
@media (max-width: 600px) { .odf-contact__panel { padding: var(--odf-sp-4); } }

/* The form itself (rendered by the shortcode). */
.odf-contactform__form { margin: 0; }
.odf-contactform__form .odf-btn { margin-top: var(--odf-sp-2); }
.odf-contactform__again { margin: var(--odf-sp-3) 0 0; font-size: var(--odf-fs-sm); }

/* Detail cards down the aside. */
.odf-contact__aside { display: flex; flex-direction: column; gap: var(--odf-sp-4); }
.odf-contact__card { padding: var(--odf-sp-4); }
.odf-contact__cardtitle { margin: 0 0 var(--odf-sp-2); font-size: var(--odf-fs-base); font-weight: 800; letter-spacing: -.01em; }
.odf-contact__email { margin: 0 0 var(--odf-sp-2); font-size: var(--odf-fs-lg); font-weight: 700; word-break: break-word; }
.odf-contact__email a { color: var(--odf-green-deep); }
.odf-contact__note { margin: 0; font-size: var(--odf-fs-sm); color: var(--odf-ink-2); line-height: 1.55; }
.odf-contact__socials { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.odf-contact__socials a { display: inline-flex; align-items: center; font-size: var(--odf-fs-sm); font-weight: 700; color: var(--odf-green-deep); border: 1px solid var(--odf-line); border-radius: var(--odf-radius-pill); padding: 4px 12px; background: var(--odf-card); }
.odf-contact__socials a:hover { border-color: var(--odf-green); color: var(--odf-ink); }

/* ==========================================================================
   AUTH SPLIT (sign-in / create-account). The card used to float alone in a lot
   of empty space and repeated the page H1. Now: value-prop panel on the left,
   form card on the right, and the card heading is an h2 so the page keeps ONE
   H1. Stacks on mobile with the panel FIRST - it is the reason to sign up.
   ========================================================================== */
.odf-auth {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
	max-width: 980px;
	margin: var(--odf-sp-6) auto var(--odf-sp-8);
}
.odf-auth .odf-authcard { max-width: none; margin: 0; }
.odf-auth__info { padding-top: var(--odf-sp-3); }
.odf-auth__eyebrow {
	display: inline-block; margin-bottom: var(--odf-sp-2);
	font-size: var(--odf-fs-xs); font-weight: 700; letter-spacing: var(--odf-tracking-wide);
	text-transform: uppercase; color: var(--odf-green);
}
.odf-auth__infoh {
	margin: 0 0 var(--odf-sp-3);
	font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; color: var(--odf-ink);
}
.odf-auth__lead {
	margin: 0 0 var(--odf-sp-5);
	color: var(--odf-ink-2); font-size: var(--odf-fs-lg); line-height: 1.55; max-width: 46ch;
}
.odf-auth__points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--odf-sp-3); }
.odf-auth__points li {
	position: relative; padding-left: 30px;
	color: var(--odf-ink-2); font-size: var(--odf-fs-md); line-height: 1.5;
}
/* Tick drawn in CSS so the panel needs no icon markup. */
.odf-auth__points li::before {
	content: ""; position: absolute; left: 0; top: 2px;
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--odf-green-soft);
}
.odf-auth__points li::after {
	content: ""; position: absolute; left: 6px; top: 7px;
	width: 6px; height: 3px;
	border-left: 2px solid var(--odf-green); border-bottom: 2px solid var(--odf-green);
	transform: rotate(-45deg);
}

@media (max-width: 860px) {
	.odf-auth { grid-template-columns: 1fr; gap: var(--odf-sp-5); max-width: 520px; }
	.odf-auth__info { padding-top: 0; }
	.odf-auth__lead { font-size: var(--odf-fs-base); margin-bottom: var(--odf-sp-4); }
}

/* ==========================================================================
   Dog-owner dashboard - sidebar tab layout (.odf-dash--tabs)
   One section at a time, chosen from a left rail, instead of one long scroll
   where the account form sat below two panels most visits never needed.
   Scoped to the modifier so the brand dashboard's stacked layout is untouched.
   ========================================================================== */
.odf-dash--tabs { max-width: 1080px; display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: var(--odf-sp-5); align-items: start; }
.odf-dash--tabs .odf-dash__welcome { margin-bottom: var(--odf-sp-4); }

.odf-dash__side { position: sticky; top: var(--odf-sp-5); display: flex; flex-direction: column; gap: var(--odf-sp-4); padding: var(--odf-sp-4); background: var(--odf-surface, #fff); border: 1px solid var(--odf-line); border-radius: var(--odf-radius-card); box-shadow: var(--odf-shadow-soft); }
.odf-dash__side .odf-dash__id { padding-bottom: var(--odf-sp-4); border-bottom: 1px solid var(--odf-line); }

.odf-dash__nav { display: flex; flex-direction: column; gap: 2px; }
.odf-dash__navlink { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--odf-radius); color: var(--odf-ink-2); font-size: var(--odf-fs-sm); font-weight: 600; text-decoration: none; line-height: 1.2; }
.odf-dash__navlink svg { flex: 0 0 auto; color: var(--odf-ink-3); }
.odf-dash__navlink span { flex: 1 1 auto; min-width: 0; }
.odf-dash__navlink:hover { background: var(--odf-tint); color: var(--odf-ink); }
.odf-dash__navlink.is-active { background: var(--odf-green-soft); color: var(--odf-green-deep); font-weight: 800; }
.odf-dash__navlink.is-active svg { color: var(--odf-green-deep); }
.odf-dash__navcount { flex: 0 0 auto; font-style: normal; font-size: var(--odf-fs-xs); font-weight: 700; color: var(--odf-ink-3); background: var(--odf-tint); border-radius: var(--odf-radius-pill); padding: 1px 8px; }
.odf-dash__navlink.is-active .odf-dash__navcount { background: #fff; color: var(--odf-green-deep); }

.odf-dash__signout { display: inline-flex; align-items: center; gap: 8px; padding-top: var(--odf-sp-3); border-top: 1px solid var(--odf-line); color: var(--odf-ink-3); font-size: var(--odf-fs-sm); font-weight: 600; text-decoration: none; }
.odf-dash__signout:hover { color: var(--odf-ink); }

.odf-dash__main { min-width: 0; }
.odf-dash__main .odf-dash__panel { margin-bottom: 0; }
/* The settings form keeps its 460px measure: the panel is now wide, and a
   password field stretched across 800px is harder to use, not easier. */

/* Below the breakpoint the rail becomes a horizontal, scrollable tab strip -
   a 244px column would leave the panel unusably narrow on a phone. */
@media (max-width: 860px) {
	.odf-dash--tabs { grid-template-columns: minmax(0, 1fr); gap: var(--odf-sp-4); }
	/* Sign out moves UP onto the identity row instead of sitting alone at the
	   bottom of the card, where it cost a whole row to one rarely-used link.
	   Grid + explicit placement rather than reordering the markup: sign-out is
	   last in the DOM for a reason (it is the last thing you'd tab to), and the
	   score card is omitted entirely for users with too few votes, so nothing
	   here may depend on a fixed number of children. */
	.odf-dash__side {
		position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto;
		align-items: center; row-gap: var(--odf-sp-4); column-gap: var(--odf-sp-3);
	}
	.odf-dash__side .odf-dash__id { grid-column: 1; grid-row: 1; padding-bottom: var(--odf-sp-3); border-bottom: 0; }
	.odf-dash__signout {
		grid-column: 2; grid-row: 1; justify-self: end; align-self: center;
		padding-top: 0; padding-bottom: var(--odf-sp-3); border-top: 0;
	}
	/* Everything else spans the full width beneath that row. */
	.odf-dash__side > .odf-scorecard, .odf-dash__side > .odf-dash__nav { grid-column: 1 / -1; }
	.odf-dash__nav { flex-direction: row; overflow-x: auto; gap: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.odf-dash__nav::-webkit-scrollbar { display: none; }
	.odf-dash__navlink { white-space: nowrap; }
}

/* Profile picture block (account tab). Sits above the password form because it
   is the friendly thing in a panel that is otherwise all security. */
.odf-avatarbox { padding-bottom: var(--odf-sp-4); margin-bottom: var(--odf-sp-4); border-bottom: 1px solid var(--odf-line); }
.odf-avatarbox__row { display: flex; align-items: flex-start; gap: var(--odf-sp-4); margin-top: var(--odf-sp-3); flex-wrap: wrap; }
.odf-avatarbox__preview { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--odf-tint); border: 1px solid var(--odf-line); display: grid; place-items: center; }
.odf-avatarbox__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.odf-avatarbox__preview--empty { color: var(--odf-ink-3); }
.odf-avatarbox__form { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--odf-sp-3); }
.odf-avatarbox__form input[type="file"] { max-width: 100%; font-size: var(--odf-fs-sm); }
.odf-avatarbox__form small { color: var(--odf-ink-3); font-size: var(--odf-fs-xs); line-height: 1.45; }
.odf-avatarbox__remove { margin-top: var(--odf-sp-3); }

/* The stored picture in the sidebar identity block. */
.odf-dash__avatar--img { overflow: hidden; padding: 0; }
.odf-dash__avatar--img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

/* ==========================================================================
   Member score card (dashboard sidebar)
   Shown to the member before it is shown to anyone else - but never as a number
   they have not earned. Under the vote floor it says how far off they are
   instead of printing "0%" from two votes.
   ========================================================================== */
.odf-scorecard { display: flex; flex-direction: column; gap: 2px; padding: var(--odf-sp-3); border-radius: var(--odf-radius); background: var(--odf-tint); text-align: center; }
.odf-scorecard__label { font-size: var(--odf-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--odf-ink-3); }
.odf-scorecard__value { font-family: var(--odf-font-display); font-size: 34px; font-weight: 700; line-height: 1.05; color: var(--odf-green-deep); font-variant-numeric: tabular-nums; }
.odf-scorecard__value small { font-size: 16px; font-weight: 700; margin-left: 1px; }
.odf-scorecard__value--mixed { color: var(--odf-ink-2); }
.odf-scorecard__value--low { color: var(--odf-ink-3); }
.odf-scorecard__band { font-size: var(--odf-fs-sm); font-weight: 700; color: var(--odf-ink); }
.odf-scorecard__pending { font-family: var(--odf-font-display); font-size: var(--odf-fs-base); font-weight: 700; color: var(--odf-ink-2); }
.odf-scorecard__hint { font-size: var(--odf-fs-xs); color: var(--odf-ink-3); line-height: 1.4; margin-top: 2px; }