/*
 * The SweetCutePets application inside the site's own shell.
 *
 * Loaded only on the page that hosts the application, and only while the SweetCutePets Homepage package gives that page the same header and
 * footer as the homepage. It does not change what the application does or where anything is: it gives the application the homepage's
 * typeface, colours, buttons, cards and spacing, hides the application's own bar (the header above already carries the brand, the places
 * main links and the Account menu) so there is one navigation, not two.
 * Without the package this file is never loaded and the application looks exactly as it did.
 *
 * Specificity: every rule starts with `.scp-hf-app .scp-app`, which outranks the application's own `.scp-app …` rules whatever the load order.
 */
.scp-hf-app { background: #faf8f5; }
.scp-hf-app .scp-hf-main { box-sizing: border-box; max-width: 75rem; margin: 0 auto; padding: 1.5rem 1.5rem 3rem; }
@media (max-width: 640px) { .scp-hf-app .scp-hf-main { padding: 1rem 1rem 2.5rem; } }

.scp-hf-app .scp-app {
  --scp-orange: #f26522; --scp-orange-deep: #c2410c; --scp-gold: #f59e0b;
  --scp-ink: #0f172a; --scp-ink-soft: #475569; --scp-on-orange: #fff;
  --scp-cream: #faf8f5; --scp-card: #fff; --scp-line: #e2e8f0; --scp-danger: #b91c1c;
  margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; overflow: visible;
  font: 15px/1.6 "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--scp-ink);
}
.scp-hf-app .scp-app a { color: var(--scp-orange-deep); }

/* the application's own break-out of a narrow theme column (position, left, transform, width) is not needed inside the shell */
body.scp-hf-app.scp-app-page .scp-app { position: static; left: auto; transform: none; width: auto; max-width: none; }

/* the application's own bar: the site header now carries the places AND the Account menu (My Pets, Offer Pet Care, Notifications, Settings, Log out), so
   the application shows no second navigation at all */
.scp-hf-app .scp-app .scp-header { display: none; }
.scp-hf-app .scp-app .scp-nav-global { display: none; }
.scp-hf-app .scp-app .scp-main { padding: 0; }

/* headings and text */
.scp-hf-app .scp-app h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; color: #042f2e; margin: .25rem 0 .75rem; }
.scp-hf-app .scp-app h3 { font-weight: 700; color: var(--scp-ink); }
.scp-hf-app .scp-app .scp-lead { color: var(--scp-ink-soft); }
.scp-hf-app .scp-app .scp-meta,.scp-hf-app .scp-app .scp-hint { color: var(--scp-ink-soft); }

/* buttons: the homepage's pills */
.scp-hf-app .scp-app .scp-btn { border: 1px solid var(--scp-orange); background: var(--scp-orange); color: #fff !important; font-weight: 700; font-size: .875rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.scp-hf-app .scp-app .scp-btn:hover { background: #ea580c; border-color: #ea580c; filter: none; }
.scp-hf-app .scp-app .scp-btn.secondary { background: #fff; border-color: #cbd5e1; color: #334155 !important; box-shadow: none; }
.scp-hf-app .scp-app .scp-btn.secondary:hover { background: #f8fafc; }
.scp-hf-app .scp-app .scp-btn.danger { background: #fff; border-color: var(--scp-danger); color: var(--scp-danger) !important; box-shadow: none; }

/* panels, cards, lists */
.scp-hf-app .scp-app .scp-panel,.scp-hf-app .scp-app .scp-card,.scp-hf-app .scp-app .scp-item,.scp-hf-app .scp-app .scp-form fieldset { border: 1px solid var(--scp-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.scp-hf-app .scp-app .scp-card:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, .08); }
.scp-hf-app .scp-app .scp-empty { border: 2px dashed #fdba74; border-radius: 16px; background: #fff; }
.scp-hf-app .scp-app .scp-banner { background: #fff7ed; border-color: #fed7aa; border-radius: 12px; }
.scp-hf-app .scp-app .scp-badge { background: #ccfbf1; color: #134e4a; font-weight: 700; }
.scp-hf-app .scp-app .scp-badge.quiet { background: #fff; border: 1px solid var(--scp-line); color: var(--scp-ink-soft); }
.scp-hf-app .scp-app .scp-avatar { background: var(--scp-orange); color: #fff; border-color: #fff; box-shadow: 0 0 0 2px var(--scp-orange); }
.scp-hf-app .scp-app .scp-stat { background: #faf8f5; border-radius: 12px; }

/* tabs */
.scp-hf-app .scp-app .scp-tabs { border-bottom-color: var(--scp-line); }
.scp-hf-app .scp-app .scp-tabs a { border-color: var(--scp-line); color: #334155; font-weight: 600; background: #fff; }
.scp-hf-app .scp-app .scp-tabs a:hover { border-color: var(--scp-orange); }
.scp-hf-app .scp-app .scp-tabs a[aria-current="page"] { background: #134e4a; border-color: #134e4a; color: #fff; }

/* forms */
.scp-hf-app .scp-app .scp-form legend { color: #134e4a; }
.scp-hf-app .scp-app .scp-field input,.scp-hf-app .scp-app .scp-field select,.scp-hf-app .scp-app .scp-field textarea,.scp-hf-app .scp-app .scp-inline-field select { border: 1px solid #cbd5e1; border-radius: 10px; }
.scp-hf-app .scp-app .scp-field label { font-weight: 600; }

/* keyboard focus keeps the application's visible ring */
.scp-hf-app .scp-app :focus-visible { outline: 3px solid var(--scp-gold); outline-offset: 2px; box-shadow: 0 0 0 5px #0f172a; }

/* the header's current entry, set by home.js from the application's route */
.scp-hf-nav .scp-hf-links a.is-current { color: #0f172a; border-bottom: 2px solid #f26522; }

/* a short screen keeps the footer at the bottom of the window */
body.scp-hf-app { min-height: 100vh; display: flex; flex-direction: column; }
body.scp-hf-app .scp-hf-main { flex: 1 0 auto; width: 100%; }