/*
 * SweetCutePets app styles. Brand colours come from the SweetCutePets logo:
 *   orange #F46912, gold #FCB425, white.
 * Contrast (WCAG): dark-brown text on orange 5.5:1; deep-orange #B53D0A on white 5.8:1; body text on cream 13:1.
 * Mobile-first, 44px touch targets, visible focus. Everything is scoped under .scp-app.
 */
.scp-app {
  --scp-orange:#F46912; --scp-orange-deep:#B53D0A; --scp-gold:#FCB425;
  --scp-ink:#3a2416; --scp-ink-soft:#6b5443; --scp-on-orange:#2b1a0e;
  --scp-cream:#FFF4E8; --scp-card:#fff; --scp-line:#F2D9C3; --scp-danger:#b32d2e;
  max-width:62rem; margin:1.5rem auto; padding:0 0 1.5rem; background:var(--scp-cream); color:var(--scp-ink);
  border:1px solid var(--scp-line); border-radius:14px; overflow:hidden;
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.scp-app *,.scp-app *::before,.scp-app *::after { box-sizing:border-box; }
.scp-app a { color:var(--scp-orange-deep); }
.scp-app :focus-visible { outline:3px solid var(--scp-gold); outline-offset:2px; box-shadow:0 0 0 5px var(--scp-ink); }

/* header */
.scp-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1rem; padding:.75rem 1rem; background:var(--scp-orange); color:var(--scp-on-orange); }
.scp-brand svg { flex:none; }
.scp-brand { display:inline-flex; align-items:center; gap:.5rem; color:#fff!important; font-size:1.35rem; font-weight:800; text-decoration:none; letter-spacing:.01em; text-shadow:0 1px 0 rgba(0,0,0,.18); }
.scp-nav { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem .5rem; }
.scp-nav a { display:inline-flex; align-items:center; min-height:44px; padding:0 .75rem; border-radius:999px; color:var(--scp-on-orange)!important; font-weight:700; text-decoration:none; }
.scp-nav a:hover,.scp-nav a[aria-current="page"] { background:rgba(255,255,255,.35); }
.scp-nav .scp-hello { color:var(--scp-on-orange); font-size:.95rem; }
.scp-main { padding:1rem; }

/* headings */
.scp-app h2 { font-size:1.6rem; line-height:1.25; margin:.25rem 0 .75rem; color:var(--scp-ink); }
.scp-app h3 { font-size:1.1rem; margin:0 0 .6rem; color:var(--scp-ink); }
.scp-app h2[tabindex="-1"]:focus { outline:none; box-shadow:none; }
.scp-lead { margin:-.25rem 0 1rem; color:var(--scp-ink-soft); }

/* buttons */
.scp-btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:44px; min-width:44px; padding:.5rem 1.1rem; border:2px solid var(--scp-orange); border-radius:999px; background:var(--scp-orange); color:var(--scp-on-orange)!important; font:inherit; font-weight:800; text-decoration:none; cursor:pointer; }
.scp-btn.secondary { background:#fff; border-color:var(--scp-orange-deep); color:var(--scp-orange-deep)!important; }
.scp-btn.danger { background:#fff; border-color:var(--scp-danger); color:var(--scp-danger)!important; }
.scp-btn[disabled] { opacity:.6; cursor:progress; }
.scp-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin:.75rem 0 1rem; }

/* panels & cards */
.scp-panel { background:var(--scp-card); border:1px solid var(--scp-line); border-radius:12px; padding:1rem 1.1rem; margin:0 0 1rem; }
.scp-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(16rem,1fr)); list-style:none; padding:0; margin:0; }
.scp-card { background:var(--scp-card); border:1px solid var(--scp-line); border-radius:12px; transition:box-shadow .15s,transform .15s; }
.scp-card:hover { box-shadow:0 4px 14px rgba(181,61,10,.15); }
.scp-card-link { display:flex; gap:.9rem; align-items:center; padding:1rem; text-decoration:none; color:inherit!important; }
.scp-card h3 { margin:0; font-size:1.15rem; }
.scp-avatar { flex:none; display:inline-flex; align-items:center; justify-content:center; width:3.25rem; height:3.25rem; border-radius:50%; background:var(--scp-orange); color:var(--scp-on-orange); border:3px solid var(--scp-gold); font-size:1.5rem; font-weight:800; line-height:1; }
.scp-avatar.big { width:4.5rem; height:4.5rem; font-size:2.2rem; }
.scp-meta { margin:.1rem 0 0; color:var(--scp-ink-soft); font-size:.95rem; }
.scp-badges { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.4rem; }
.scp-badge { display:inline-block; padding:.1rem .6rem; border-radius:999px; background:var(--scp-gold); color:var(--scp-on-orange); font-size:.8rem; font-weight:700; }
.scp-badge.quiet { background:#fff; border:1px solid var(--scp-line); color:var(--scp-ink-soft); }

/* empty / banners */
.scp-empty { text-align:center; padding:2.5rem 1rem; background:#fff; border:2px dashed var(--scp-orange); border-radius:12px; }
.scp-empty .scp-big { line-height:0; margin-bottom:.5rem; }
.scp-banner { border:1px solid var(--scp-gold); background:#FFF9E5; padding:.8rem 1rem; border-radius:10px; margin:0 0 1rem; }
.scp-alert { border:1px solid var(--scp-danger); color:var(--scp-danger); padding:.75rem 1rem; border-radius:10px; margin:0 0 1rem; background:#fff; }
.scp-success { border:1px solid #2e7d32; color:#1b5e20; padding:.75rem 1rem; border-radius:10px; margin:0 0 1rem; background:#fff; }

/* forms */
.scp-form { display:grid; gap:.85rem; max-width:52rem; }
.scp-form fieldset { border:1px solid var(--scp-line); border-radius:12px; background:#fff; padding:.8rem 1rem 1rem; margin:0; display:grid; gap:.75rem; }
/* Layout pattern: a group of fields is a two-column grid from a tablet up and one column on a phone. Anything that is not a plain field (a hint,
   a checkbox list, a row of its own) and every text area spans the full width; nothing is positioned by hand. */
.scp-form fieldset.scp-grid2 { grid-template-columns:minmax(0,1fr); }
@media (min-width:40rem){
  .scp-form fieldset.scp-grid2 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem 1rem; }
  .scp-form fieldset.scp-grid2 > :not(.scp-field), .scp-form fieldset.scp-grid2 > .scp-field:has(textarea), .scp-form fieldset.scp-grid2 > .scp-field.scp-span { grid-column:1 / -1; }
  .scp-form fieldset.scp-grid2 > .scp-field.scp-inline2, .scp-form fieldset.scp-grid2 > .scp-field.scp-check-cell { grid-column:auto; }
}
.scp-inline2 { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:.6rem; }
.scp-inline2 > .scp-field { margin:0; }
.scp-check-cell { align-self:end; padding-bottom:.6rem; }
.scp-form legend { padding:0 .4rem; font-weight:800; color:var(--scp-orange-deep); }
.scp-field label { display:block; font-weight:700; margin-bottom:.25rem; }
.scp-field input,.scp-field select,.scp-field textarea { width:100%; min-height:44px; padding:.5rem .65rem; font:inherit; border:1px solid #a58b76; border-radius:8px; background:#fff; color:inherit; }
.scp-field textarea { min-height:7rem; }
.scp-field .scp-check input { min-height:0; }
.scp-field-error { color:var(--scp-danger); font-size:.9rem; margin:.25rem 0 0; }
.scp-hint { color:var(--scp-ink-soft); font-size:.9rem; margin:.25rem 0 0; }
.scp-row { display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:36rem){ .scp-row { grid-template-columns:1fr 1fr; } }

/* profile */
.scp-summary { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.scp-summary .scp-grow { flex:1 1 14rem; }
.scp-cols { display:grid; gap:1rem; grid-template-columns:1fr; align-items:start; }
@media (min-width:48rem){ .scp-cols { grid-template-columns:1.1fr 1fr; } }
.scp-dl { display:grid; grid-template-columns:max-content 1fr; gap:.45rem 1rem; margin:0; }
.scp-dl dt { font-weight:700; color:var(--scp-ink-soft); } .scp-dl dd { margin:0; word-break:break-word; }
.scp-notes { white-space:pre-wrap; margin:0; }
.scp-timeline { list-style:none; margin:0; padding:0; } .scp-timeline li { padding:.55rem 0; border-bottom:1px solid var(--scp-line); } .scp-timeline li:last-child { border-bottom:0; }
.scp-back { display:inline-block; margin:0 0 .5rem; }
@media (prefers-reduced-motion:no-preference){ .scp-btn { transition:filter .15s; } .scp-btn:hover { filter:brightness(.94); } }

/* health: section tabs */
.scp-tabs { display:flex; flex-wrap:wrap; gap:.35rem; margin:0 0 1rem; padding:0 0 .6rem; border-bottom:2px solid var(--scp-line); }
.scp-tabs a { display:inline-flex; align-items:center; min-height:44px; padding:0 .9rem; border-radius:999px; border:2px solid transparent; color:var(--scp-orange-deep); font-weight:700; text-decoration:none; background:#fff; border-color:var(--scp-line); }
.scp-tabs a:hover { border-color:var(--scp-orange); }
.scp-tabs a[aria-current="page"] { background:var(--scp-orange); border-color:var(--scp-orange); color:var(--scp-on-orange); }

/* health: record lists */
.scp-list { list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.6rem; }
.scp-item { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1rem; background:var(--scp-card); border:1px solid var(--scp-line); border-radius:12px; padding:.2rem .4rem .2rem 0; }
.scp-item-link { flex:1 1 14rem; display:grid; gap:.1rem; min-height:44px; padding:.6rem .9rem; color:inherit!important; text-decoration:none; }
.scp-item-link:hover strong { text-decoration:underline; }
.scp-item .scp-badge { margin-right:.6rem; }
.scp-sched { padding:.6rem .9rem; align-items:flex-start; }
.scp-sched .scp-grow { flex:1 1 14rem; display:grid; gap:.15rem; }
.scp-sched .scp-actions { margin:0; }
.scp-sched .scp-btn { min-height:44px; padding:.35rem .9rem; }

/* health: at-a-glance stats */
.scp-stats { display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr)); }
.scp-stat { display:grid; gap:.1rem; padding:.7rem .8rem; background:var(--scp-cream); border:1px solid var(--scp-line); border-radius:10px; }
.scp-stat-label { font-size:.85rem; color:var(--scp-ink-soft); font-weight:700; }
.scp-stat-value { font-size:1.15rem; }
.scp-stat-note { font-size:.85rem; font-weight:700; }
.scp-stat.warn { border-color:var(--scp-danger); background:#fff; }
.scp-stat.warn .scp-stat-value,.scp-stat.warn .scp-stat-note { color:var(--scp-danger); }

/* health: timeline */
.scp-tl { list-style:none; margin:0 0 1rem; padding:0; }
.scp-tl li { display:grid; gap:.15rem .9rem; grid-template-columns:1fr; padding:.7rem 0 .7rem .9rem; border-left:4px solid var(--scp-gold); margin-left:.3rem; position:relative; }
.scp-tl li::before { content:""; position:absolute; left:-.6rem; top:1rem; width:.8rem; height:.8rem; border-radius:50%; background:var(--scp-orange); border:2px solid #fff; }
.scp-tl-date { font-weight:700; color:var(--scp-ink-soft); }
@media (min-width:36rem){ .scp-tl li { grid-template-columns:9rem 1fr; } }

/* photos and documents */
.scp-avatar.has-photo { background:#fff; overflow:hidden; padding:0; }
.scp-avatar img { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.scp-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .6rem; margin:.7rem 0 1rem; }
.scp-toolbar > div { display:contents; }
.scp-toolbar .scp-actions { margin:0; }
.scp-toolbar .scp-photo-tools { margin:0; }
.scp-toolbar .scp-hint, .scp-toolbar .scp-field-error { flex:1 0 100%; order:5; margin:0; font-size:.82rem; }
.scp-photo-tools { display:grid; gap:.4rem; margin:0 0 1rem; }
.scp-photo-tools .scp-btn { justify-self:start; }
.scp-photo-tools { grid-template-columns:repeat(auto-fit,minmax(9rem,max-content)); align-items:center; }
.scp-photo-tools .scp-hint,.scp-photo-tools .scp-field-error { grid-column:1 / -1; }
.scp-inline-field { display:flex; align-items:center; gap:.5rem; }
.scp-inline-field label { margin:0; }
.scp-inline-field select { min-height:44px; padding:.35rem .6rem; font:inherit; border:1px solid #a58b76; border-radius:8px; background:#fff; color:inherit; }
.scp-item .scp-btn { margin:.2rem 0; }
.scp-field input[type="file"] { padding:.5rem; }

/* reminders */
.scp-occ { padding:.35rem .8rem; align-items:center; }
.scp-occ .scp-grow { flex:1 1 14rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.1rem .7rem; }
.scp-occ .scp-badges { margin:0; }
.scp-occ .scp-actions { margin:0; }
.scp-badge.warn { background:#fff; border:1px solid var(--scp-danger); color:var(--scp-danger); }

/* health: schedule form */
.scp-times { display:grid; gap:.5rem; }
.scp-time-row { display:flex; gap:.5rem; align-items:center; }
.scp-time-row input { flex:1 1 auto; max-width:12rem; }
.scp-time-row .scp-btn { min-height:44px; padding:.35rem .9rem; }
.scp-app [hidden] { display:none!important; }
@media (max-width:35.99rem){ .scp-btn { width:auto; } .scp-actions .scp-btn { flex:1 1 auto; } }

/* The hosting WordPress page: the app has its own title, so hide the theme's duplicate page title and sidebar. */
body.scp-app-page .entry-header, body.scp-app-page .page-header, body.scp-app-page .ast-single-post-order .entry-title,
body.scp-app-page .wp-block-post-title, body.scp-app-page #secondary { display:none!important; }
body.scp-app-page #primary, body.scp-app-page .content-area { width:100%!important; max-width:none!important; float:none!important; }
/* Many themes constrain page content to a narrow column. Let the app use up to 62rem of the viewport regardless. */
body.scp-app-page .scp-app { position:relative; left:50%; transform:translateX(-50%); width:min(62rem, calc(100vw - 2rem)); max-width:none; }
body.scp-app-page { overflow-x:hidden; }

/* ---- Phase 5: emergency profile, QR code, caregivers ---- */
.scp-flags .scp-field { margin: 0 0 10px; }
.scp-em-preview { display: grid; gap: 8px; }
.scp-em-preview-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid #FCB425; justify-self: start; }
.scp-em-row { display: grid; grid-template-columns: minmax(96px, 30%) 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--scp-line, #f0d9b8); }
.scp-em-row span { overflow-wrap: anywhere; white-space: pre-line; }
.scp-qr-box { margin: 8px 0 12px; }
.scp-qr { display: inline-block; padding: 8px; background: #fff; border: 1px solid var(--scp-line, #f0d9b8); border-radius: 8px; }
.scp-qr svg { display: block; width: 224px; height: 224px; max-width: 100%; }
.scp-qr-box input[readonly], .scp-offer input[readonly] { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }
.scp-caregiver { flex-wrap: wrap; gap: 8px; }
.scp-caregiver select { max-width: 100%; min-height: 44px; padding: 0 .6rem; font: inherit; border: 2px solid var(--scp-line, #f0d9b8); border-radius: 8px; background: #fff; color: inherit; }
.scp-print-only { display: none; }
@media print {
  body.scp-printing > *:not(.scp-print-only) { display: none !important; }
  body.scp-printing .scp-print-only { display: block; text-align: center; color: #000; background: #fff; padding: 24px; }
  body.scp-printing .scp-print-only svg { width: 300px; height: 300px; }
  body.scp-printing .scp-print-url { font-size: 11px; word-break: break-all; }
}

/* ---- provider directory (Phase 7) */
.scp-checks { display:grid; gap:.15rem .75rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr)); }
/* A checkbox and its words are one aligned row: the box in a fixed first column, the label in the second and wrapping inside it (never under the box). */
.scp-check { display:grid; grid-template-columns:1.3rem minmax(0,1fr); column-gap:.65rem; align-items:start; min-height:44px; padding:.5rem 0; }
.scp-check input[type="checkbox"] { grid-column:1; width:1.3rem; height:1.3rem; min-height:0; margin:.05rem 0 0; accent-color:var(--scp-orange-deep); }
.scp-check label { grid-column:2; margin:0; font-weight:600; line-height:1.35; overflow-wrap:anywhere; cursor:pointer; }
.scp-check .scp-hint, .scp-check > :not(input):not(label) { grid-column:2; }
.scp-small { width:6rem!important; min-height:44px; }
.scp-details { margin:.5rem 0; }
.scp-details > summary { cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:700; color:var(--scp-orange-deep); }
.scp-placepicker .scp-list { margin:.4rem 0; }
.scp-why,.scp-caveats,.scp-offers { margin:.3rem 0; padding-left:1.2rem; }
.scp-caveats { color:var(--scp-ink-soft); }
.scp-result h3 { margin:0 0 .2rem; }
.scp-contact-row { grid-template-columns:1fr; }
@media (min-width:36rem){ .scp-contact-row { grid-template-columns:9rem 1fr 11rem; } }
.scp-contact-row input,.scp-contact-row select { width:100%; min-height:44px; padding:.5rem .65rem; border:1px solid var(--scp-line); border-radius:10px; font:inherit; }
.scp-checked::before { content:"\2713\00a0"; font-weight:800; } /* a CSS glyph: the WordPress emoji script never rewrites it into a third-party image */
.scp-item > .scp-grow { flex:1 1 14rem; display:grid; gap:.1rem; }

/* provider area, notifications, "suggest a place" (Phase 8) */
.scp-bell-count { display:inline-flex; align-items:center; justify-content:center; min-width:1.35rem; height:1.35rem; margin-left:.4rem; padding:0 .35rem; border-radius:999px; background:var(--scp-danger); color:#fff; font-size:.75rem; font-weight:800; line-height:1; }
.scp-bell-count[hidden] { display:none; }
.scp-list-plain { margin:.4rem 0 1rem 1.2rem; padding:0; }
.scp-list-plain li { margin:.3rem 0; }
.scp-provider-nav { margin-bottom:1.2rem; }
.scp-inbox .scp-note { align-items:center; gap:1rem; border-left:5px solid var(--scp-line); }
.scp-inbox .scp-note.is-unread { border-left-color:var(--scp-orange); background:#fffaf0; }
.scp-inbox .scp-note.is-read { opacity:.8; }
.scp-inbox .scp-note .scp-meta { display:block; }
.scp-suggest { margin:.6rem 0; }
.scp-suggest summary { cursor:pointer; font-weight:700; color:var(--scp-orange-deep); }

/* Lost & Found (v0.7.0) */
.scp-tabs { display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1rem; }
.scp-tabs a { display:inline-flex; align-items:center; min-height:44px; padding:0 1rem; border:2px solid var(--scp-line); border-radius:999px; background:#fff; font-weight:700; text-decoration:none; }
.scp-tabs a[aria-current="page"] { background:var(--scp-orange); border-color:var(--scp-orange); color:var(--scp-on-orange); }
.scp-lostbanner { border-color:var(--scp-danger); background:#fff1f0; }
.scp-lostbox { border-color:var(--scp-gold); }
.scp-lf-photo { width:96px; height:96px; flex:none; object-fit:cover; border-radius:12px; background:#fff; border:1px solid var(--scp-line); }
.scp-lf-nophoto { display:flex; align-items:center; justify-content:center; background:var(--scp-cream); }
.scp-summary .scp-lf-photo { width:140px; height:140px; }
.scp-lf-filters .scp-row { margin-bottom:.5rem; }
.scp-details { margin:0 0 1rem; border:1px solid var(--scp-line); border-radius:10px; padding:.5rem .9rem; background:#fff; }
.scp-details > summary { cursor:pointer; font-weight:700; min-height:44px; display:flex; align-items:center; }
.scp-linkbox { margin:.6rem 0; padding:.7rem .9rem; border:2px dashed var(--scp-orange-deep); border-radius:10px; background:#fff; }
.scp-label { display:block; font-weight:700; margin-bottom:.25rem; }
.scp-weekdays { display:flex; flex-wrap:wrap; gap:.4rem; }
.scp-weekday-pill { display:inline-flex; align-items:center; gap:.35rem; min-height:44px; padding:.35rem .75rem; border:1px solid var(--scp-line); border-radius:999px; background:#fff; font-weight:600; cursor:pointer; margin:0; }
.scp-weekday-pill input { width:1.1rem; height:1.1rem; min-height:0; margin:0; accent-color:var(--scp-orange-deep); }
.scp-weekday-pill:has(input:checked) { border-color:var(--scp-orange-deep); background:#fff4ea; }
.scp-panel-soft { background:#fffaf5; border:1px solid var(--scp-line); border-radius:10px; padding:.75rem .9rem; margin:.5rem 0 1rem; }
.scp-panel-soft h4 { margin:.1rem 0 .4rem; }
.scp-panel-accent { border-color:var(--scp-orange-deep); box-shadow:0 0 0 2px rgba(244,105,18,.15); }
.scp-radios { display:grid; gap:.25rem; }
.scp-radios .scp-radio { display:grid; grid-template-columns:1.3rem minmax(0,1fr); column-gap:.65rem; align-items:start; min-height:44px; padding:.45rem .6rem; border:1px solid var(--scp-line); border-radius:10px; background:#fff; cursor:pointer; font-weight:600; line-height:1.35; }
.scp-radios .scp-radio input[type="radio"] { width:1.2rem; height:1.2rem; min-height:0; margin:.1rem 0 0; accent-color:var(--scp-orange-deep); }
.scp-radios .scp-radio:has(input:checked) { border-color:var(--scp-orange-deep); background:#fff4ea; }
.scp-radios .scp-radio:focus-within { outline:3px solid rgba(244,105,18,.35); outline-offset:1px; }
.scp-qr { margin:.6rem 0; padding:.6rem; background:#fff; border:1px solid var(--scp-line); border-radius:10px; display:inline-block; max-width:100%; }
.scp-qr svg { display:block; width:min(100%,14rem); height:auto; }
.scp-linkbox code { word-break:break-all; overflow-wrap:anywhere; font-size:.9rem; }
.scp-thread { list-style:none; margin:.4rem 0 .8rem; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.scp-msg { max-width:34rem; padding:.5rem .8rem; border-radius:12px; border:1px solid var(--scp-line); background:#fff; }
.scp-msg p { margin:.15rem 0 0; white-space:pre-wrap; }
.scp-msg.mine { align-self:flex-end; background:#FFF9E5; }
.scp-reasons { margin:.2rem 0 .8rem 1.1rem; padding:0; }
.scp-lf-report { border-left:6px solid var(--scp-gold); }
.scp-lf-list .scp-card-link { align-items:flex-start; }
@media (max-width:30rem) { .scp-summary .scp-lf-photo { width:100px; height:100px; } }
.scp-missing { margin:.25rem 0 .75rem 1.1rem; padding:0; }
.scp-missing li { margin:.2rem 0; }

/* ---- "Coming up" on My pets: a glance, not a reminder manager (v0.7.1) */
.scp-upcoming-compact { padding:.75rem 1rem; margin-bottom:1rem; }
.scp-upcoming-head h3 { margin:0 0 .35rem; font-size:1.05rem; }
.scp-upcoming-list { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.scp-occ-compact { display:grid; grid-template-columns:5.75rem minmax(0,1fr) auto; column-gap:.65rem; align-items:center; padding:.15rem 0; border-top:1px solid var(--scp-line); background:transparent; border-radius:0; }
.scp-occ-compact:first-child { border-top:0; }
.scp-occ-when { font-weight:800; font-size:.92rem; }
.scp-occ-when.warn { color:var(--scp-danger); }
.scp-occ-what { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:inherit; text-decoration:none; display:block; padding:.55rem 0; }
.scp-occ-what:hover strong { text-decoration:underline; }
.scp-occ-compact .scp-btn { padding:.35rem .9rem; }
.scp-occ-compact .scp-field-error { grid-column:1 / -1; }
.scp-upcoming-more { margin:.35rem 0 0; font-weight:700; }
@media (max-width:520px) {
  .scp-occ-compact { grid-template-columns:4.6rem minmax(0,1fr) auto; column-gap:.5rem; }
  .scp-occ-when { font-size:.85rem; }
}

/* v0.7.1: a loading placeholder the shape of the page, and calm motion for people who ask for none */
.scp-skeleton { display: grid; gap: 12px; margin-top: 8px; }
.scp-skeleton span { display: block; height: 64px; border-radius: 10px; background: linear-gradient(90deg, #eee6dc 25%, #f6f0e8 50%, #eee6dc 75%); background-size: 200% 100%; animation: scp-skel 1.4s ease-in-out infinite; }
.scp-skeleton span:first-child { height: 40px; width: 60%; }
@keyframes scp-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .scp-skeleton span { animation: none; } }
.scp-main.scp-refreshing { opacity: .6; transition: opacity .15s; }

/* v0.7.1 Find care: recommendations first, then a filter sidebar beside the results (a panel behind a button on a narrow screen) */
.scp-rec-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scp-rec-card { border: 1px solid #e4d9ca; border-radius: 12px; padding: 12px 14px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.scp-rec-card h4 { margin: 0; font-size: 1.05rem; }
.scp-rec-why { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.scp-rec-why li { background: #fff5dc; border-radius: 999px; padding: 2px 10px; font-size: .85rem; }
.scp-rec-card .scp-btn { align-self: flex-start; margin-top: auto; }
.scp-care-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 16px; }
.scp-filters { position: sticky; top: 12px; border: 1px solid #e4d9ca; border-radius: 12px; padding: 12px 14px; background: #fff; max-height: calc(100vh - 24px); overflow: auto; }
.scp-filters-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; }
.scp-filters-head h3 { margin: 0; flex: 1 1 auto; }
.scp-filters-close, .scp-filters-open, .scp-filters-backdrop { display: none; }
.scp-browse-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.scp-browse-head h3 { margin: 0; }
.scp-filter-count { display: inline-block; min-width: 1.4em; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #3b2f2f; color: #fff; font-size: .8rem; text-align: center; }
@media (max-width: 760px) {
  .scp-rec-list { grid-template-columns: 1fr; }
  .scp-care-layout { grid-template-columns: 1fr; }
  .scp-filters-open, .scp-filters-close { display: inline-flex; align-items: center; }
  .scp-filters { display: none; }
  .scp-filters.is-open { display: block; position: fixed; inset: 0; z-index: 1000; max-height: none; border-radius: 0; border: 0; padding: 16px; overflow: auto; background: #fff; }
  .scp-filters-backdrop { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.4); }
  .scp-filters-backdrop:not([hidden]) { display: block; }
  .scp-filters.is-open .scp-btn[type="submit"] { position: sticky; bottom: 0; width: 100%; }
}
body.scp-noscroll { overflow: hidden; }
.scp-filters .scp-row { grid-template-columns: 1fr; gap: .5rem; }
.scp-filters .scp-field select, .scp-filters .scp-field input[type="text"], .scp-filters .scp-field input[type="search"] { width: 100%; max-width: 100%; box-sizing: border-box; }

/* v0.7.1 landing: two ways in */
.scp-entry { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (max-width: 760px) { .scp-entry { grid-template-columns: 1fr; } }
.scp-entry-card h3 { margin-top: 0; }

/* the Account menu: everything that belongs to the signed-in person, in one place (the same entries the site header offers) */
.scp-account { position:relative; display:inline-block; }
.scp-account-btn { display:inline-flex; align-items:center; gap:.4rem; min-height:44px; padding:0 1rem; border:1px solid rgba(255,255,255,.55); border-radius:999px; background:transparent; color:inherit; font:inherit; font-weight:600; cursor:pointer; }
.scp-account-btn::after { content:""; width:.45rem; height:.45rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); }
.scp-account-btn[aria-expanded="true"]::after { transform:rotate(-135deg) translateY(-2px); }
.scp-account-panel { position:absolute; right:0; top:calc(100% + .4rem); z-index:40; min-width:14rem; max-width:calc(100vw - 2rem); padding:.4rem; display:flex; flex-direction:column; background:#fff; color:var(--scp-ink,#1e293b); border:1px solid var(--scp-line,#e2e8f0); border-radius:12px; box-shadow:0 10px 24px rgba(15,23,42,.14); }
.scp-account-panel[hidden] { display:none; }
.scp-account-panel a, .scp-account-panel button { display:flex; align-items:center; gap:.5rem; width:100%; min-height:44px; padding:.5rem .8rem; border:0; border-radius:8px; background:transparent; color:inherit !important; font:inherit; font-weight:600; text-align:left; text-decoration:none; cursor:pointer; box-sizing:border-box; }
.scp-account-panel a:hover, .scp-account-panel button:hover { background:#f1f5f9; }
.scp-account-panel a[aria-current="page"] { background:#fff4ea; }

/* the place box: a compact combobox with a dropdown, never a stack of big buttons */
.scp-placepicker { position:relative; }
.scp-placepicker input[type="search"] { width:100%; }
.scp-place-menu { position:absolute; left:0; right:0; z-index:30; margin:.25rem 0 0; padding:.25rem; list-style:none; max-height:18rem; overflow:auto; background:#fff; border:1px solid var(--scp-line,#e2e8f0); border-radius:12px; box-shadow:0 10px 24px rgba(15,23,42,.14); }
.scp-place-menu[hidden] { display:none; }
.scp-place-menu[aria-busy="true"] { opacity:.85; }
.scp-place-menu li { margin:0; }
.scp-place-opt { display:flex; align-items:center; justify-content:space-between; gap:.75rem; width:100%; min-height:44px; padding:.45rem .7rem; border:0; border-radius:8px; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.scp-place-opt:hover, .scp-place-opt.is-active { background:#fff4ea; }
.scp-place-name { font-weight:600; min-width:0; overflow-wrap:anywhere; }
.scp-place-kind { flex:none; padding:.1rem .5rem; font-size:.72rem; font-weight:700; color:#475569; background:#f1f5f9; border-radius:999px; }
.scp-place-none { padding:.6rem .7rem; }
.scp-place-field { position:relative; }
.scp-place-field input[type="search"] { padding-right:2.6rem; }
.scp-place-field input[type="search"]::-webkit-search-cancel-button { display:none; }
.scp-placepicker.is-selected input[type="search"] { font-weight:700; background:var(--scp-cream); border-color:var(--scp-orange-deep); }
.scp-place-clear { position:absolute; right:.35rem; top:50%; transform:translateY(-50%); width:2rem; height:2rem; min-height:0; padding:0; border:0; border-radius:50%; background:transparent; color:var(--scp-ink); font-size:1.4rem; line-height:1; cursor:pointer; }
.scp-place-clear:hover, .scp-place-clear:focus-visible { background:#fff; outline:2px solid var(--scp-orange-deep); }
.scp-sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.scp-panel-quiet { background:var(--scp-cream); border:1px dashed var(--scp-line); border-radius:12px; padding:.75rem 1rem; margin:.75rem 0; }
.scp-steps { margin:.25rem 0 .5rem 1.25rem; padding:0; }

/* ---- shared building blocks (v0.12.0): chips and the compact two-column grid, used by the provider profile and the compact screens ------------ */
.scp-chip { display:inline-block; padding:.15rem .65rem; margin:.15rem .3rem .15rem 0; border-radius:999px; background:#fff; border:1px solid var(--scp-line); color:var(--scp-ink); font-size:.85rem; line-height:1.4; }
.scp-chip.is-verified { background:var(--scp-gold); border-color:transparent; color:var(--scp-on-orange); font-weight:700; }
.scp-chip.is-featured { background:var(--scp-orange-deep); border-color:transparent; color:#fff; font-weight:700; }
.scp-chip.quiet { color:var(--scp-ink-soft); }
.scp-hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; } /* the field no person sees (a bot fills it) */

/* ---- the provider profile: a compact service profile, not a database record ------------------------------------------------------------------ */
.scp-pp-hero { text-align:center; display:flex; flex-direction:column; align-items:center; gap:.2rem; padding:1.1rem 1rem; }
.scp-pp-photo { width:112px; height:112px; border-radius:50%; object-fit:cover; border:3px solid #fff; box-shadow:0 0 0 1px var(--scp-line); background:#fff; }
.scp-pp-fallback { display:flex; align-items:center; justify-content:center; background:var(--scp-cream); color:var(--scp-orange-deep); font-weight:800; font-size:2rem; }
.scp-pp-name { margin:.4rem 0 0; font-size:1.5rem; }
.scp-pp-type, .scp-pp-primary { margin:0; }
.scp-pp-primary { font-weight:700; }
.scp-pp-badges { display:flex; flex-wrap:wrap; justify-content:center; margin-top:.35rem; }
.scp-pp-actions { justify-content:center; margin-top:.6rem; }
.scp-pp-cta { min-width:12rem; }
.scp-pp-request { margin-top:.75rem; }
.scp-pp-body { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:.75rem 1rem; align-items:start; margin-top:.75rem; }
.scp-pp-body .scp-panel { margin:0 0 .75rem; }
.scp-pp-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(14rem,1fr)); gap:.6rem; }
.scp-pp-offer { display:flex; flex-direction:column; gap:.1rem; padding:.6rem .75rem; border:1px solid var(--scp-line); border-radius:12px; background:#fff; }
.scp-pp-offer-head { display:flex; justify-content:space-between; gap:.5rem; align-items:baseline; flex-wrap:wrap; }
.scp-pp-price { font-weight:700; color:var(--scp-orange-deep); white-space:nowrap; }
.scp-pp-line { margin:.25rem 0; }
.scp-pp-summary { font-size:1.05rem; margin-top:0; }
@media (max-width:48rem) { .scp-pp-body { grid-template-columns:1fr; } .scp-pp-cta { width:100%; } }
.scp-pp-pic-row { display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap; }
.scp-request { align-items:flex-start; }
.scp-place-attrib { padding:.2rem .75rem; font-size:.72rem; color:var(--scp-ink-soft); list-style:none; }

/* Subscription */
.scp-plan-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); margin:1rem 0; }
.scp-plan-card h3 { margin-top:0; }
.scp-plan-price { font-size:1.25rem; font-weight:600; margin:.2rem 0 .6rem; }

/* Layout pattern: panels side by side from a laptop up, stacked on a phone (Account; any screen made of independent panels) */
.scp-panels2 { display:grid; gap:1rem; grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width:62rem){ .scp-panels2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .scp-panels2 > .scp-span { grid-column:1 / -1; } }
.scp-panels2 > .scp-panel { margin:0; }
.scp-placepicker input[type="search"] { min-height:44px; padding:.5rem .65rem; font:inherit; border:1px solid #a58b76; border-radius:8px; background:#fff; color:inherit; box-sizing:border-box; }

.scp-pp-thumb { width:48px; height:48px; border-radius:50%; object-fit:cover; margin-left:.6rem; flex:none; }