/* PET BRO app brand layer: matches the shop. One amber accent, ink text, white surfaces.
   Loaded last on index.html. Remove this one <link> to return to the previous look. */
:root{--pb-accent:#C2410C;--pb-accent-dark:#9A3412;--pb-tint:#FFF1E8;--pb-ink:#17181C;--pb-muted:#5B5F68;--pb-line:#E6E7EA;--pb-surface:#F4F5F7;
  --navy:#17181C;--gold:#C2410C;--ink:#17181C;--muted:#5B5F68;--line:#E6E7EA}
html body{background:#F7F7F8;background-image:none;color:var(--pb-ink);font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:0}
html body h1,html body h2,html body h3{color:var(--pb-ink);letter-spacing:-.02em}
html body .eyebrow,html body .hero-kicker{color:var(--pb-accent)}

/* Buttons: amber primary, white outline, ink dark */
html body .btn{background:var(--pb-accent);color:#fff;border:0;border-radius:999px;box-shadow:none;min-height:44px;padding:11px 18px;font-weight:700;filter:none}
html body .btn:hover{background:var(--pb-accent-dark)}
html body .btn.outline{background:#fff;color:var(--pb-ink);border:1px solid var(--pb-line);box-shadow:none}
html body .btn.outline:hover{background:var(--pb-surface)}
html body .btn.dark{background:var(--pb-ink);color:#fff;border:0;box-shadow:none}
html body .btn.dark:hover{background:#000}
html body :where(button,a,input,select,textarea):focus-visible{outline:3px solid var(--pb-accent);outline-offset:3px}

/* Surfaces: flat white cards with a light border */
html body .card,html body .panel .dog-card,html body .panel:not(#home)>.card,html body .pack-stat,html body .action{background:#fff;border:1px solid var(--pb-line);box-shadow:none;border-radius:16px}
html body .panel .dog-card{border-top:1px solid var(--pb-line)}
html body .panel:not(#home)>.heading{background:#fff;border:1px solid var(--pb-line);box-shadow:none;border-radius:18px}
html body .panel:not(#home)>.heading:after{display:none}
html body .section-emblem{background:var(--pb-tint);border:0;box-shadow:none;transform:none}
html body .section-emblem svg{color:var(--pb-accent);filter:none}
html body .action .symbol,html body .stat-icon,html body .pack-stat:nth-child(n) .stat-icon{background:var(--pb-tint);box-shadow:none;color:var(--pb-accent)}
html body .action:hover{border-color:var(--pb-accent);background:#fff}
html body .dogpic{background:var(--pb-surface);box-shadow:none}
html body .avatar{background:var(--pb-tint);color:var(--pb-accent);border:0;box-shadow:none}
html body .tag{background:var(--pb-surface);color:var(--pb-muted);border:1px solid var(--pb-line)}
html body .status{background:var(--pb-surface);border:1px solid var(--pb-line);color:var(--pb-ink);box-shadow:none}
html body .status.error{background:#FEF2F2;border-color:#FECACA;color:#991B1B}
html body .notice{background:var(--pb-tint);border:1px solid #FED7C3;color:#7C2D12;box-shadow:none}
html body .field input,html body .field select,html body .field textarea,html body .panel select,html body .panel input:not([type=checkbox]):not([type=hidden]),html body .panel textarea{background:#fff;border:1px solid #D4D6DB;box-shadow:none;border-radius:12px}
html body .panel input[type=checkbox]{accent-color:var(--pb-accent)}
html body #chat-history{background:var(--pb-surface);border-color:var(--pb-line);box-shadow:none}
html body #chat-history>div{box-shadow:none;border-color:var(--pb-line)}
html body #chat-history b{color:var(--pb-accent)}

/* Home hero: dark ink card like the shop */
html body .hero{background:var(--pb-ink);border:0;box-shadow:none}
html body .hero h2,html body .hero h2 em{color:#fff}
html body .hero p{color:#C9CBD1}
html body .mascot-disc{background:var(--pb-accent);opacity:.9}

/* Sign-in screen */
html body .auth-wrap{background:var(--pb-ink)}
html body .auth-card{background:#fff;border:0;box-shadow:0 20px 60px #0006}
html body .auth-switch{color:var(--pb-accent)}

/* Navigation */
html body .topbar{background:#ffffffeb;border-bottom:1px solid var(--pb-line);box-shadow:none}
html body .topbar .mobile-brand{background:transparent}
html body .sidebar{background:var(--pb-ink);box-shadow:none;border-right:0}
html body .sidebar .nav button{color:#C9CBD1}
html body .sidebar .nav button:hover{background:#ffffff14}
html body .sidebar .nav button.active{background:var(--pb-accent);border-color:var(--pb-accent);color:#fff;box-shadow:none}
html body .side-label{color:#9CA0A8}
html body .bottom-nav{background:#ffffffF2;border:1px solid var(--pb-line);box-shadow:0 6px 24px #17181c1f}
html body .bottom-nav button{color:var(--pb-muted)}
html body .bottom-nav button.active,html body .bottom-nav button[aria-current]{background:var(--pb-tint);color:var(--pb-accent);box-shadow:none}

/* Phones: keep the last buttons on every screen clear of the floating tab bar */
@media(max-width:850px){
  html body .main,html body .content{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
  html body form{scroll-margin-bottom:120px}
}

/* Dog photos */
html body .dogpic{overflow:hidden}
html body .dogpic.has-photo{padding:0;background:var(--pb-surface)}
html body .dogpic img{width:100%;height:100%;object-fit:cover;display:block}
html body .dog-actions{flex-wrap:wrap;gap:8px}

/* Phones: keep the "More" button inside the floating tab bar.
   A blur effect on the menu panel moved it; the panel does not need blur on phones. */
@media(max-width:850px){
  html body .sidebar{-webkit-backdrop-filter:none;backdrop-filter:none}
  html body .mobile-menu-toggle{right:14px;bottom:calc(13px + env(safe-area-inset-bottom));width:calc((100% - 20px) * .2 - 8px);height:58px;color:var(--pb-muted)}
  html body .menu-open .mobile-menu-toggle{background:var(--pb-tint);color:var(--pb-accent)}
}

/* The top bar already shows the logo; hide the squashed duplicate in the sidebar. */
html body .sidebar .brand{display:none}

/* Short notes replace the old warning boxes */
html body .pb-note{font-size:12.5px;line-height:1.5;color:var(--pb-muted);margin:12px 0 0}

/* Welcome card for new users with no dogs yet */
html body .pb-welcome{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--pb-tint);border-color:#FED7C3;margin-bottom:18px}
html body .pb-welcome[hidden]{display:none}
html body .pb-welcome h2{margin:0 0 4px;font-size:22px}
html body .pb-welcome p{margin:0 0 10px;color:var(--pb-muted)}
html body .pb-welcome ol{margin:0;padding-left:20px;line-height:1.8;font-size:14px}
html body.pb-no-dogs .pack-stats{display:none}

/* Phones: compact page headers (title and button only) */
@media(max-width:850px){
  html body .panel:not(#home)>.heading{flex-direction:row;align-items:center;gap:12px;padding:14px 16px;margin-bottom:16px}
  html body .panel:not(#home)>.heading p,html body .panel:not(#home)>.heading .eyebrow{display:none}
  html body .panel:not(#home)>.heading h1{font-size:22px;margin:0}
  html body .panel:not(#home)>.heading .section-emblem{width:40px;height:40px;border-radius:12px}
  html body .panel:not(#home)>.heading .section-emblem svg{width:20px;height:20px}
  html body .panel:not(#home)>.heading>.btn{margin-left:auto;padding:9px 14px;min-height:40px;font-size:13px;white-space:nowrap}
  html body #home>.heading p{display:none}
  html body #home>.heading h1{font-size:24px}
  html body .pb-welcome{padding:18px}
}
html body .pb-legal-links{font-size:12.5px;color:var(--pb-muted);margin:14px 0 0;text-align:center}
html body #account .pb-legal-links{text-align:left}
html body .pb-legal-links a{color:var(--pb-accent);font-weight:600}
html body.pb-no-dogs .card:has(#home-dog-list){display:none}
@media(max-width:850px){html body .panel:not(#home)>.heading{flex-wrap:nowrap}html body .panel:not(#home)>.heading>div{flex:1 1 auto;min-width:0}}
/* Delete account */
html body .pb-delete{margin-top:18px;border-top:1px solid var(--pb-line);padding-top:12px}
html body .pb-delete>summary{cursor:pointer;color:#B91C1C;font-weight:700;font-size:14px;min-height:44px;display:flex;align-items:center}
html body .pb-delete form{margin-top:8px}
html body .pb-delete form>p{font-size:13px;color:var(--pb-muted);line-height:1.6}
html body .pb-check{display:flex;gap:8px;align-items:center;font-size:13px;margin:10px 0 14px}
html body .btn.pb-danger{background:#B91C1C}
html body .btn.pb-danger:hover{background:#991B1B}