/* ===========================================================================
   DOGTAG — Your Dog's Medical ID
   Brand system: The Real Doodle Co. (soft blue / cream / sand / gold)
   =========================================================================== */
:root{
  --blue:#8cb0bc;
  --blue-deep:#6c97a4;
  --blue-ink:#406572;
  --blue-soft:#d9e6ea;
  --cream:#faf7f1;
  --sand:#f1ebe0;
  --sand-deep:#e7ddcd;
  --ink:#2a2e31;
  --muted:#767d82;
  --white:#fff;
  --night:#14191c;
  --gold:#c9a86a;
  --red:#c0453b;
  --red-soft:#f7e5e2;
  --green:#5a8f66;
  --amber:#c98a2f;

  --shadow-sm:0 2px 10px rgba(40,50,55,.07);
  --shadow-md:0 12px 34px rgba(40,50,55,.12);
  --shadow-lg:0 26px 70px rgba(20,25,28,.30);
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:30px;
  --maxw:960px;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);color:var(--ink);
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(140,176,188,.20), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(201,168,106,.10), transparent 55%),
    var(--cream);
  min-height:100vh;font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sans);font-weight:500;letter-spacing:.02em;
  padding:.8rem 1.5rem;border-radius:999px;font-size:.92rem;
  transition:transform .22s var(--ease),background .22s,color .22s,box-shadow .22s;
  white-space:nowrap;
}
.btn-lg{padding:1rem 2rem;font-size:1rem}
.btn-sm{padding:.55rem 1.05rem;font-size:.84rem}
.btn-google{width:100%;background:#fff;color:#3c4043;border:1.5px solid #dadce0;box-shadow:0 1px 2px rgba(60,64,67,.12);font-weight:500}
.btn-google:hover{background:#f8f9fa;box-shadow:0 2px 6px rgba(60,64,67,.18);transform:translateY(-1px)}
.btn-google .g-ico{width:18px;height:18px;flex:0 0 auto;background-repeat:no-repeat;background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E")}
.or-divider{display:flex;align-items:center;gap:.7rem;margin:.9rem 0;color:var(--muted);font-size:.78rem}
.or-divider::before,.or-divider::after{content:"";flex:1;height:1px;background:var(--sand-deep,#e4d9c5)}
.btn-primary{background:var(--blue-deep);color:#fff;box-shadow:0 8px 20px rgba(108,151,164,.35)}
.btn-primary:hover{background:var(--blue-ink);transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--blue-ink);box-shadow:var(--shadow-sm)}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-ghost-dark{background:transparent;color:var(--blue-ink);border:1.5px solid var(--sand-deep)}
.btn-ghost-dark:hover{background:var(--sand)}
.btn-danger-ghost{background:transparent;color:var(--red);border:1.5px solid rgba(192,69,59,.3)}
.btn-danger-ghost:hover{background:var(--red-soft)}
.btn-emergency{background:var(--red);color:#fff;box-shadow:0 8px 20px rgba(192,69,59,.35);font-weight:600}
.pill-premium{display:inline-block;background:var(--gold);color:#fff;font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.1rem .4rem;border-radius:999px;vertical-align:middle;margin-left:.3rem}
.btn-premium{background:linear-gradient(135deg,#d9bd7e,#c9a86a);color:#3a2f16;font-weight:600;box-shadow:0 8px 20px rgba(201,168,106,.35)}
.btn-premium:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(201,168,106,.45)}
.btn-emergency:hover{background:#a83a31;transform:translateY(-2px)}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

.icon-btn{
  width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:var(--blue-ink);background:rgba(255,255,255,.6);transition:background .2s,transform .2s;
}
.icon-btn:hover{background:#fff;transform:translateY(-1px)}

/* ---------- Top bar ---------- */
.topbar{position:sticky;top:0;z-index:40;background:rgba(250,247,241,.82);backdrop-filter:blur(12px);border-bottom:1px solid rgba(231,221,205,.7)}
.topbar-inner{max-width:var(--maxw);margin:0 auto;padding:.7rem 1.1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.55rem}
.brand-mark{display:inline-flex;align-items:center}
.brand-mark svg{display:block}
.brand-name{font-family:var(--serif);font-weight:600;font-size:1.6rem;letter-spacing:-.01em;color:var(--ink)}
.brand-accent{color:var(--blue-deep)}
.topbar-actions{display:flex;align-items:center;gap:.55rem}

/* ---------- Dog switcher strip ---------- */
.dogstrip{max-width:var(--maxw);margin:0 auto;padding:1rem 1.1rem .2rem;display:flex;gap:.7rem;overflow-x:auto;scrollbar-width:none}
.dogstrip::-webkit-scrollbar{display:none}
.dogchip{
  flex:0 0 auto;display:flex;align-items:center;gap:.6rem;padding:.4rem .95rem .4rem .45rem;
  border-radius:999px;background:#fff;box-shadow:var(--shadow-sm);border:2px solid transparent;
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.dogchip:hover{transform:translateY(-2px)}
.dogchip.active{border-color:var(--blue-deep);box-shadow:var(--shadow-md)}
.dogchip-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--sand-deep);display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--blue-ink)}
.dogchip-name{font-weight:500;font-size:.95rem;white-space:nowrap}
.dogchip.add{padding:.55rem 1.1rem;color:var(--blue-ink);font-weight:500;border:2px dashed var(--sand-deep);background:transparent}
.dogchip.add:hover{border-color:var(--blue-deep);background:#fff}

/* ---------- Wrap / layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:1.2rem 1.1rem 3rem;min-height:50vh}

/* ---------- Empty state ---------- */
.empty{text-align:center;padding:4rem 1rem 3rem;max-width:560px;margin:0 auto}
.empty-offer{display:inline-block;background:linear-gradient(135deg,#d9bd7e,#c9a86a);color:#3a2f16;
  font-weight:500;font-size:.92rem;padding:.5rem 1.1rem;border-radius:999px;margin-bottom:1rem;
  box-shadow:0 6px 16px rgba(201,168,106,.32)}
.empty-offer b{font-weight:700}
.empty-art{margin-bottom:.7rem}
.empty-art svg{display:block;margin:0 auto;filter:drop-shadow(0 12px 26px rgba(64,101,114,.28))}
.empty-title{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,5vw,2.9rem);line-height:1.05;color:var(--ink)}
.empty-lead{color:var(--muted);margin:1rem auto 1.8rem;font-size:1.08rem;max-width:460px}
.empty-note{margin-top:1.4rem;color:var(--muted);font-size:.86rem}

/* ---------- Profile hero ---------- */
.hero{
  position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-md);
  background:linear-gradient(135deg,var(--blue-ink),var(--blue-deep));color:#fff;
}
.hero-inner{display:flex;gap:1.6rem;align-items:center;padding:1.8rem;position:relative;z-index:2}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 90% -20%,rgba(255,255,255,.18),transparent 60%);pointer-events:none}
.hero-photo{
  width:132px;height:132px;flex:0 0 auto;border-radius:26px;object-fit:cover;
  border:4px solid rgba(255,255,255,.35);background:rgba(255,255,255,.15);box-shadow:var(--shadow-md);
  display:flex;align-items:center;justify-content:center;font-size:3.4rem;cursor:pointer;position:relative;
}
.hero-photo .cam{position:absolute;bottom:-6px;right:-6px;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--blue-ink);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.hero-id{flex:1;min-width:0}
.hero-eyebrow{text-transform:uppercase;letter-spacing:.24em;font-size:.68rem;font-weight:500;opacity:.85}
.hero-name{font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,6vw,3.2rem);line-height:1;margin:.2rem 0 .1rem}
.hero-breed{opacity:.9;font-size:1.05rem;font-weight:300}
.hero-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.hero-chip{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);padding:.32rem .8rem;border-radius:999px;font-size:.82rem;font-weight:400;backdrop-filter:blur(4px)}
.hero-chip b{font-weight:600}
.hero-edit{position:absolute;top:1.1rem;right:1.1rem;z-index:3;background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.35)}
.hero-edit:hover{background:rgba(255,255,255,.3)}

/* ---------- Alert banner (allergies) ---------- */
.alertbar{
  margin-top:1rem;background:var(--red-soft);border:1px solid rgba(192,69,59,.3);color:#8f2f27;
  border-radius:var(--r-md);padding:.85rem 1.1rem;display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;
}
.alertbar .a-ic{font-size:1.1rem;line-height:1.4}
.alertbar b{font-weight:600}

/* ---------- Cards grid ---------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem}
.card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);border:1px solid rgba(231,221,205,.7);padding:1.3rem 1.35rem;transition:box-shadow .25s,transform .25s}
.card:hover{box-shadow:var(--shadow-md)}
.card.span2{grid-column:1/-1}
.card-head{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;cursor:pointer;user-select:none}
.card-head::after{content:"⌄";margin-left:auto;font-size:1.25rem;color:var(--muted);line-height:1;transform:translateY(-3px);transition:transform .22s var(--ease)}
.card.collapsed .card-head{margin-bottom:0}
.card.collapsed .card-head::after{transform:rotate(-90deg)}
.card.collapsed > *:not(.card-head){display:none}
.card-ic{width:34px;height:34px;border-radius:10px;background:var(--blue-soft);color:var(--blue-ink);display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex:0 0 auto}
.card-title{font-family:var(--serif);font-weight:600;font-size:1.4rem;color:var(--ink);line-height:1}
.card-title small{display:block;font-family:var(--sans);font-weight:400;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:.25rem}
.chip-badge{display:inline-block;padding:.14rem .6rem;border-radius:999px;font-size:.76rem;font-weight:600;background:var(--sand-deep,#efe3cc);color:var(--ink)}
.chip-badge.ok{background:#dcf1e1;color:#1f7a3d}
.chip-badge.warn{background:#fce4d4;color:#b4571a}

/* stat rows */
.rows{display:flex;flex-direction:column;gap:.1rem}
.row{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px dashed var(--sand-deep)}
.row:last-child{border-bottom:none}
.row-k{color:var(--muted);font-size:.9rem}
.row-v{font-weight:500;text-align:right}
.row-v.empty-v{color:var(--sand-deep);font-weight:300}

/* pills / tags */
.taglist{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.2rem}
.tag{background:var(--sand);border-radius:999px;padding:.35rem .8rem;font-size:.86rem;font-weight:400}
.tag.warn{background:var(--red-soft);color:#8f2f27}
.tag.med{background:var(--blue-soft);color:var(--blue-ink)}
.muted-empty{color:var(--muted);font-size:.9rem;font-style:italic}

/* vaccination list */
.vaxlist{display:flex;flex-direction:column;gap:.55rem}
.vax{display:flex;align-items:center;gap:.7rem;padding:.6rem .75rem;background:var(--cream);border-radius:var(--r-sm)}
.vax-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;background:var(--green)}
.vax-dot.due{background:var(--amber)}
.vax-dot.over{background:var(--red)}
.vax-name{font-weight:500;flex:1}
.vax-dates{font-size:.82rem;color:var(--muted);text-align:right}
.vax-dates .due-lbl{display:block;font-weight:500}
.vax-dates .due-lbl.over{color:var(--red)}
.vax-dates .due-lbl.due{color:var(--amber)}

/* contacts */
.contact{display:flex;align-items:center;gap:.8rem;padding:.7rem 0;border-bottom:1px dashed var(--sand-deep)}
.contact:last-child{border-bottom:none}
.contact-av{width:40px;height:40px;border-radius:50%;background:var(--blue-soft);color:var(--blue-ink);display:flex;align-items:center;justify-content:center;font-weight:600;flex:0 0 auto}
.contact-main{flex:1;min-width:0}
.contact-name{font-weight:500}
.contact-rel{font-size:.82rem;color:var(--muted)}
.contact-call{color:var(--blue-deep);font-weight:500;font-size:.9rem;white-space:nowrap}

/* ---------- Footer ---------- */
.site-footer{max-width:var(--maxw);margin:0 auto;padding:2rem 1.1rem 3rem;text-align:center}
.powered{display:inline-flex;flex-direction:column;align-items:center;gap:.55rem;color:var(--muted);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
.powered-link{display:inline-flex;transition:transform .2s,opacity .2s;opacity:.95}
.powered-link:hover{transform:translateY(-2px);opacity:1}
.powered-logo{height:56px;width:auto;display:block}
.footer-links{margin-top:1rem;font-size:.86rem}
.footer-links a{color:var(--blue-ink);text-decoration:none;font-weight:500}
.footer-links a:hover{text-decoration:underline}
.footer-fine{margin-top:.9rem;color:var(--muted);font-size:.78rem;max-width:520px;margin-left:auto;margin-right:auto;opacity:.85}

/* ---------- Drawer ---------- */
.drawer-scrim{position:fixed;inset:0;background:rgba(20,25,28,.4);backdrop-filter:blur(2px);z-index:60;animation:fade .25s}
.drawer{
  position:fixed;top:0;right:0;height:100dvh;width:min(480px,100%);z-index:70;background:var(--cream);
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;animation:slideIn .32s var(--ease);
}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.3rem;border-bottom:1px solid var(--sand-deep)}
.drawer-head h2{font-family:var(--serif);font-weight:600;font-size:1.7rem}
.drawer-body{flex:1;overflow-y:auto;padding:1.2rem 1.3rem}
.drawer-foot{display:flex;align-items:center;gap:.6rem;padding:1rem 1.3rem;border-top:1px solid var(--sand-deep);background:var(--cream)}
.drawer-foot .spacer{flex:1}

/* form */
.fgroup{margin-bottom:1.15rem}
.fsection{font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-deep);margin:1.6rem 0 .8rem;padding-bottom:.4rem;border-bottom:1px solid var(--sand-deep)}
.fsection:first-child{margin-top:0}
label.flabel{display:block;font-size:.82rem;font-weight:500;color:var(--ink);margin-bottom:.35rem}
.fopt{font-weight:400;color:var(--muted);font-size:.78rem}
.finput,.fselect,.ftext{
  width:100%;padding:.7rem .85rem;border:1.5px solid var(--sand-deep);border-radius:var(--r-sm);
  background:#fff;font-size:.95rem;font-weight:300;color:var(--ink);transition:border-color .2s,box-shadow .2s;
}
.finput:focus,.fselect:focus,.ftext:focus{outline:none;border-color:var(--blue-deep);box-shadow:0 0 0 3px rgba(108,151,164,.15)}
.finput-lg{padding:.9rem 1rem;font-size:1.05rem}
.ftext{resize:vertical;min-height:70px;line-height:1.5}
.frow{display:flex;gap:.7rem}
.frow>*{flex:1}
.fsub{font-weight:600;font-size:.82rem;color:var(--ink);margin:.5rem 0 .55rem;display:flex;align-items:center;gap:.4rem}
.fsub::before{content:"🦴";font-size:.9rem}

/* Pedigree card (read-only profile) */
.ped-parents{display:flex;gap:.7rem;margin-top:.7rem;flex-wrap:wrap}
.ped-parent{flex:1;min-width:150px;background:var(--sand);border-radius:var(--r-sm);padding:.75rem .85rem}
.ped-parent-h{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-deep);margin-bottom:.3rem}
.ped-name{font-weight:600;font-size:1rem;color:var(--ink)}
.ped-meta{font-size:.85rem;color:var(--muted);margin-top:.15rem}
.fhint{font-size:.76rem;color:var(--muted);margin-top:.3rem}

/* repeatable rows (vax, contacts) */
.repeat{display:flex;flex-direction:column;gap:.7rem}
.repeat-item{background:#fff;border:1.5px solid var(--sand-deep);border-radius:var(--r-md);padding:.9rem;position:relative}
.repeat-item .rm{position:absolute;top:.5rem;right:.5rem;width:26px;height:26px;border-radius:50%;color:var(--muted);display:flex;align-items:center;justify-content:center}
.repeat-item .rm:hover{background:var(--red-soft);color:var(--red)}
.btn-add-row{margin-top:.7rem;width:100%;border:1.5px dashed var(--sand-deep);color:var(--blue-ink);background:transparent;padding:.7rem;border-radius:var(--r-sm);font-weight:500;transition:.2s}
.btn-add-row:hover{border-color:var(--blue-deep);background:#fff}

/* photo picker in form */
.photo-pick{display:flex;align-items:center;gap:1rem;margin-bottom:.4rem}
.photo-thumb{width:70px;height:70px;border-radius:var(--r-md);object-fit:cover;background:var(--sand-deep);display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:var(--blue-ink);flex:0 0 auto}

/* ---------- Emergency overlay ---------- */
.emerg{position:fixed;inset:0;z-index:90;background:linear-gradient(160deg,#7a2a23,#9c3a30 60%,#b34438);color:#fff;overflow-y:auto;animation:fade .25s}
.emerg-inner{max-width:620px;margin:0 auto;padding:1.4rem 1.2rem 3rem;min-height:100%}
.emerg-top{display:flex;align-items:center;justify-content:space-between;padding:.4rem 0 1.2rem}
.emerg-badge{display:flex;align-items:center;gap:.55rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.82rem}
.emerg-badge .dot{width:9px;height:9px;border-radius:50%;background:#fff;animation:pulse 1.8s infinite}
.emerg-close{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.4)}
.emerg-close:hover{background:rgba(255,255,255,.28)}
.emerg-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:var(--r-lg);padding:1.4rem;margin-bottom:1rem;backdrop-filter:blur(4px)}
.emerg-hero{display:flex;align-items:center;gap:1.1rem}
.emerg-photo{width:92px;height:92px;border-radius:20px;object-fit:cover;border:3px solid rgba(255,255,255,.5);background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:2.6rem;flex:0 0 auto}
.emerg-name{font-family:var(--serif);font-weight:600;font-size:2.4rem;line-height:1}
.emerg-sub{opacity:.9;margin-top:.2rem}
.emerg-h{text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:600;opacity:.85;margin-bottom:.55rem}
.emerg-list{display:flex;flex-direction:column;gap:.5rem}
.emerg-line{font-size:1.08rem;font-weight:400}
.emerg-line b{font-weight:600}
.emerg-tag{display:inline-block;background:rgba(255,255,255,.2);border-radius:999px;padding:.3rem .8rem;margin:.15rem .3rem .15rem 0;font-weight:500;font-size:.95rem}
.emerg-call{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:rgba(255,255,255,.14);border-radius:var(--r-md);padding:.85rem 1rem;margin-top:.5rem}
.emerg-call a{background:#fff;color:#9c3a30;padding:.5rem 1.1rem;border-radius:999px;font-weight:600;font-size:.9rem}
.emerg-none{opacity:.75;font-style:italic}
.emerg-foot{text-align:center;opacity:.8;font-size:.82rem;margin-top:1rem}

/* ---------- Backup modal ---------- */
.modal-scrim{position:fixed;inset:0;z-index:80;background:rgba(20,25,28,.42);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:1.2rem;animation:fade .2s}
.modal{background:var(--cream);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:min(440px,100%);padding:1.6rem;max-height:calc(100vh - 2rem);overflow-y:auto}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.modal-head h3{font-family:var(--serif);font-weight:600;font-size:1.6rem}
.modal-lead{color:var(--muted);font-size:.92rem;margin-bottom:1.2rem}
.modal-actions{display:flex;flex-direction:column;gap:.6rem}
.modal-actions .btn{width:100%}

/* ---------- Multi-step wizard ---------- */
.wiz-steps{display:flex;align-items:center;gap:.5rem;margin:0 auto 1.1rem;max-width:180px}
.wiz-dot{width:12px;height:12px;border-radius:50%;background:#dfe3e0;flex:0 0 auto;transition:background .25s,transform .25s}
.wiz-dot.is-active{background:var(--gold);transform:scale(1.12)}
.wiz-track{flex:1;height:3px;border-radius:2px;background:#dfe3e0;overflow:hidden}
.wiz-fill{display:block;height:100%;width:0;background:var(--gold);transition:width .3s ease}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%) translateY(20px);z-index:100;
  background:var(--ink);color:#fff;padding:.75rem 1.3rem;border-radius:999px;font-size:.9rem;font-weight:400;
  box-shadow:var(--shadow-lg);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Responsive ---------- */
@media (max-width:680px){
  .cards{grid-template-columns:1fr}
  /* The hero used to stack photo-over-name and centre it, which ate roughly a
     whole phone screen before any medical information appeared. Kept as a row it
     reads like the ID card it is, and allergies/vitals land above the fold. */
  .hero-inner{flex-direction:row;text-align:left;align-items:center;gap:1rem;padding:1.1rem 1.1rem 1.2rem}
  .hero-chips{justify-content:flex-start;margin-top:.6rem;gap:.4rem}
  .hero-chip{padding:.26rem .6rem;font-size:.76rem}
  .hero-edit{position:absolute;top:.8rem;right:.8rem;margin:0;padding:.4rem .7rem;font-size:.82rem}
  .hero-photo{width:86px;height:86px;border-radius:20px;border-width:3px;font-size:2.3rem}
  .hero-photo .cam{width:28px;height:28px;bottom:-4px;right:-4px}
  .hero-name{font-size:clamp(1.7rem,7vw,2.3rem)}
  .hero-breed{font-size:.92rem}
  .hero-eyebrow{font-size:.6rem;letter-spacing:.18em}
  .brand-name{font-size:1.4rem}
  .btn-emergency{padding:.7rem 1rem}
}

/* ---------- Phone: keep topbar on one line + lift the landing CTA ---------- */
@media (max-width:480px){
  .topbar-inner{padding:.6rem .8rem;gap:.5rem}
  .brand-name{display:none}            /* keep the mark; wordmark is redundant with the hero */
  .topbar-actions{gap:.35rem}
  .icon-btn{width:40px;height:40px}
  .btn-emergency{padding:.55rem .8rem;font-size:.9rem}
  .empty{padding:1.4rem 1rem 2.5rem}   /* was 4rem top — pulls the CTA up */
  .empty-art{margin-bottom:.4rem}
  .empty-art svg{width:86px;height:auto}
  .empty-title{font-size:2rem}
  .empty-lead{font-size:1rem;margin:.7rem auto 1.3rem}
  .empty-note{margin-top:1rem}
  .install-banner{padding:.55rem .8rem;margin-top:.5rem}
  .install-banner .ib-text{font-size:.85rem}
}

/* ---------- Empty-state actions ---------- */
.empty-actions{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}

/* ---------- Landing / marketing section ---------- */
.lp{max-width:920px;margin:3rem auto 0;text-align:center}
.lp-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.4rem;color:var(--muted);font-size:.86rem;font-weight:500;padding:1.1rem 0;border-top:1px solid var(--sand-deep);border-bottom:1px solid var(--sand-deep)}
.lp-h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,4vw,2.1rem);color:var(--blue-ink);margin:2.6rem 0 1.3rem}
.lp-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.9rem;text-align:left}
.lp-card{background:#fff;border:1px solid var(--sand-deep);border-radius:var(--r-md);padding:1.1rem 1.15rem;box-shadow:var(--shadow-sm)}
.lp-ic{font-size:1.6rem;line-height:1;display:block;margin-bottom:.5rem}
.lp-card h3{font-size:1.02rem;font-weight:600;color:var(--blue-ink);margin-bottom:.25rem}
.lp-card p{font-size:.9rem;color:var(--muted);font-weight:300;line-height:1.55}
.lp-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem}
.lp-step{flex:1;min-width:220px;max-width:280px;background:var(--blue-soft);border-radius:var(--r-md);padding:1.1rem;display:flex;align-items:center;gap:.8rem;text-align:left}
.lp-num{flex:0 0 auto;width:2rem;height:2rem;border-radius:50%;background:var(--blue-ink);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.lp-step p{font-size:.92rem;color:var(--blue-ink);font-weight:500}
.lp-cta{margin:2.8rem 0 1rem}

/* ---------- Card action button (in header) ---------- */
.card-head{position:relative}
.card-action{margin-left:auto}

/* ---------- Reminders ---------- */
.remlist{display:flex;flex-direction:column;gap:.55rem}
.rem{display:flex;align-items:center;gap:.7rem;padding:.6rem .75rem;background:var(--cream);border-radius:var(--r-sm)}
.rem-main{flex:1;min-width:0}
.rem-label{font-weight:500}
.rem-kind{font-size:.76rem;color:var(--muted)}
.rem-right{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;justify-content:flex-end}
.rem-date{font-size:.82rem;color:var(--muted);text-align:right}
.rem-date.due{color:var(--amber);font-weight:500}.rem-date.over{color:var(--red);font-weight:500}
@media (max-width:560px){
  .rem{flex-wrap:wrap}
  .rem-main{flex:1 1 0;min-width:0}
  .rem-right{flex:1 1 100%;justify-content:space-between;margin-top:.15rem}
}
/* Lost-pet network share buttons */
.lost-networks{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.net-btn{flex:1;min-width:130px;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  background:#fff;border:1.5px solid var(--sand-deep);border-radius:var(--r-md);padding:.7rem .6rem;
  font-size:.9rem;font-weight:500;color:var(--blue-ink);transition:transform .15s,border-color .15s}
.net-btn:hover{transform:translateY(-2px);border-color:var(--blue-deep)}
.net-ic{font-size:1.05rem}

/* Reorder supplies (Amazon affiliate) */
.reorder-list{display:flex;flex-wrap:wrap;gap:.5rem}
.reorder-chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--cream);border:1px solid var(--sand-deep);border-radius:999px;padding:.5rem .9rem;font-size:.9rem;font-weight:500;color:var(--blue-ink);text-decoration:none;transition:transform .15s,border-color .15s}
.reorder-chip:hover{transform:translateY(-2px);border-color:var(--blue-deep)}
.reorder-arrow{font-size:.75rem;color:var(--muted)}
.reorder-fine{margin-top:.8rem;font-size:.72rem;color:var(--muted)}

.rem-actions{display:flex;gap:.4rem;align-items:center}
.rem-foot{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}
.rem-foot .btn{flex:1;min-width:150px}
.rem-cal{font-size:.78rem;font-weight:500;color:var(--blue-deep);border:1px solid var(--sand-deep);border-radius:999px;padding:.28rem .65rem;background:#fff;white-space:nowrap;text-decoration:none;display:inline-block}
.rem-cal:hover{border-color:var(--blue-deep);background:var(--blue-soft)}
.rem-cal.ghost{color:var(--muted)}

/* ---------- Weight ---------- */
.wchart{width:100%;height:150px;margin:.2rem 0 .6rem;overflow:visible}
.wlist{display:flex;flex-direction:column;gap:.1rem}
.wrow{display:flex;align-items:center;gap:.8rem;padding:.4rem 0;border-bottom:1px dashed var(--sand-deep);font-size:.9rem}
.wrow:last-child{border-bottom:none}
.wrow span{color:var(--muted);flex:1}
.wrow b{font-weight:600}
.wrm{width:22px;height:22px;border-radius:50%;color:var(--muted);font-size:.7rem;display:flex;align-items:center;justify-content:center}
.wrm:hover{background:var(--red-soft);color:var(--red)}

/* ---------- Documents ---------- */
.doclist{display:flex;flex-direction:column;gap:.1rem}
.docrow{display:flex;align-items:center;gap:.7rem;padding:.55rem 0;border-bottom:1px dashed var(--sand-deep)}
.docrow:last-child{border-bottom:none}
.doc-ic{font-size:1.2rem}
.doc-name{flex:1;text-align:left;font-weight:500;color:var(--blue-ink);text-decoration:underline;text-underline-offset:2px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-name:hover{color:var(--blue-deep)}
.doc-meta{font-size:.78rem;color:var(--muted);white-space:nowrap}
.doc-rm{width:22px;height:22px;border-radius:50%;color:var(--muted);font-size:.7rem;display:flex;align-items:center;justify-content:center}
.doc-rm:hover{background:var(--red-soft);color:var(--red)}

/* ---------- Timeline (vet visits) ---------- */
.timeline{position:relative;padding-left:.4rem}
.tl-item{position:relative;padding:0 0 1rem 1.4rem;border-left:2px solid var(--sand-deep)}
.tl-item:last-child{border-left-color:transparent;padding-bottom:0}
.tl-dot{position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--blue-deep);border:2px solid #fff}
.tl-top{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.tl-top span{font-size:.82rem;color:var(--muted);white-space:nowrap}
.tl-notes{font-size:.9rem;color:var(--ink);margin-top:.3rem;line-height:1.5}

/* ---------- QR modal ---------- */
.qr-holder{display:flex;justify-content:center;padding:.5rem 0 1rem}
.qr-holder canvas{width:230px;height:230px;border-radius:var(--r-md);box-shadow:var(--shadow-sm);background:#fff}
.modal-fine{font-size:.74rem;color:var(--muted);margin-top:1rem;line-height:1.5}
.coupon-note{font-size:.84rem;color:var(--blue-ink);background:var(--blue-soft);border-radius:var(--r-sm);padding:.7rem .85rem}
.linklike{background:none;border:none;color:var(--blue-deep);font-weight:500;font-size:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer;padding:0}
.linklike:hover{color:var(--blue-ink)}
.modal-actions .btn{width:100%}

/* ---------- Install banner + steps ---------- */
.install-banner{max-width:var(--maxw);margin:.7rem auto 0;padding:.7rem .9rem;display:flex;align-items:center;gap:.7rem;
  background:linear-gradient(135deg,var(--blue-soft),#fff);border:1px solid var(--sand-deep);border-radius:var(--r-md);box-shadow:var(--shadow-sm)}
.install-banner .ib-text{flex:1;font-size:.9rem;font-weight:400;color:var(--blue-ink)}
.install-banner .ib-x{width:26px;height:26px;border-radius:50%;color:var(--muted);flex:0 0 auto}
.install-banner .ib-x:hover{background:var(--sand)}
.install-steps{margin:.4rem 0 .6rem;padding-left:1.3rem;display:flex;flex-direction:column;gap:.7rem}
.install-steps li{line-height:1.5}
.ios-share{display:inline-block;padding:0 .2rem}
@media (max-width:680px){.install-banner{margin-left:1.1rem;margin-right:1.1rem;width:auto}}

/* ---------- Premium promo banner ---------- */
.promo-banner{max-width:var(--maxw);margin:.7rem auto 0;padding:.65rem .9rem;display:flex;align-items:center;gap:.7rem;
  background:linear-gradient(135deg,#f7ecd0,#efdcb2);border:1px solid #e4cf9e;border-radius:var(--r-md);
  box-shadow:0 6px 16px rgba(201,168,106,.28);cursor:pointer;transition:transform .15s,box-shadow .15s}
.promo-banner:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(201,168,106,.34)}
.promo-banner--warn{background:linear-gradient(135deg,#fdeede,#fbdfc0);border-color:#f0c79b;box-shadow:0 6px 16px rgba(214,146,74,.26)}
/* Informational, not urgent — deliberately cool so it doesn't read as an alarm. */
.promo-banner--calm{background:linear-gradient(135deg,#eef4f6,#dfeaee);border-color:#b9d2da;box-shadow:0 6px 16px rgba(64,101,114,.18);cursor:default}
.promo-banner--calm:hover{transform:none;box-shadow:0 6px 16px rgba(64,101,114,.18)}
.promo-banner--calm .pb-text{color:#2e4650}
.promo-banner--calm .pb-text b{color:#1f333b}
.promo-banner--warn:hover{box-shadow:0 10px 22px rgba(214,146,74,.32)}
.promo-banner:focus-visible{outline:2px solid var(--blue-ink);outline-offset:2px}
.promo-banner .pb-gift{font-size:1.25rem;flex:0 0 auto;line-height:1}
.promo-banner .pb-text{flex:1;font-size:.9rem;color:#4a3c1c;line-height:1.35}
.promo-banner .pb-text b{font-weight:700;color:#3a2f16}
.promo-banner .pb-code{letter-spacing:.4px;background:#fff;border:1px dashed #c9a86a;border-radius:6px;padding:.02rem .34rem;white-space:nowrap}
.promo-banner .pb-cta{flex:0 0 auto;background:var(--blue-ink);color:#fff;font-weight:600;
  padding:.4rem .85rem;border-radius:999px;box-shadow:0 4px 10px rgba(64,101,114,.28)}
.promo-banner .pb-cta:hover{transform:translateY(-1px)}
.promo-banner .pb-x{width:26px;height:26px;border-radius:50%;color:#8a744a;flex:0 0 auto;line-height:1}
.promo-banner .pb-x:hover{background:rgba(201,168,106,.3)}
@media (max-width:680px){
  /* Was wrapping to three lines and pushing the dog below the fold. One line,
     still tappable, still the same offer. */
  .promo-banner{margin-left:1.1rem;margin-right:1.1rem;width:auto;flex-wrap:nowrap;padding:.55rem .7rem;gap:.5rem}
  .promo-banner .pb-text{font-size:.78rem;line-height:1.3;flex:1 1 auto;min-width:0}
  .promo-banner .pb-gift{font-size:1.05rem}
  .promo-banner .pb-cta{padding:.38rem .7rem;font-size:.8rem}
}

/* ---------- Upgrade / Premium modal ---------- */
.perk-list{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin:.2rem 0 1.1rem}
.perk-list li{font-size:.95rem;line-height:1.4}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.plan-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  padding:1.2rem .8rem;border-radius:var(--r-lg);border:2px solid var(--sand-deep);background:#fff;
  color:var(--blue-ink);transition:transform .15s,box-shadow .15s,border-color .15s,background .15s;text-align:center;min-height:118px}
.plan-card:hover{border-color:var(--blue-deep)}
.plan-card.is-selected{border-color:var(--blue-deep);background:var(--blue-soft);box-shadow:var(--shadow-sm)}
/* Annual is the plan we want chosen: heavier border and a lifted card so it reads
   as the default rather than one of two equal options. */
.plan-card--hero{border-width:2px}
.plan-card--hero.is-selected{box-shadow:var(--shadow-md,0 6px 18px rgba(29,48,56,.18))}
.plan-card--hero .plan-price{font-size:2.1rem}
.plan-card--hero .plan-badge{background:var(--blue-deep);color:#fff;border-color:var(--blue-deep)}
.plan-check{position:absolute;top:.6rem;right:.6rem;width:20px;height:20px;border-radius:50%;border:2px solid var(--sand-deep);background:#fff;transition:.15s}
.plan-card.is-selected .plan-check{border-color:var(--blue-deep);background:var(--blue-deep)}
.plan-card.is-selected .plan-check::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.plan-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--gold);color:#fff;font-size:.64rem;font-weight:600;letter-spacing:.03em;padding:.2rem .6rem;border-radius:999px}
.plan-price{font-family:var(--serif);font-weight:600;font-size:1.9rem;line-height:1}
.plan-price small{font-family:var(--sans);font-size:.8rem;font-weight:400;color:var(--muted)}
.plan-sub{font-size:.78rem;color:var(--muted)}
.redeem-row{display:flex;gap:.5rem;margin-top:1rem}
.redeem-row input{flex:1;border:1.5px solid var(--sand-deep);border-radius:var(--r-sm);padding:.65rem .85rem;font-size:.92rem;font-weight:300}
.redeem-row input:focus{outline:none;border-color:var(--blue-deep);box-shadow:0 0 0 3px rgba(108,151,164,.15)}

/* ---------- Account button + sync dot ---------- */
.account-btn{position:relative}
.account-dot{position:absolute;bottom:6px;right:6px;width:9px;height:9px;border-radius:50%;border:2px solid var(--cream);background:var(--muted)}
.account-dot.guest{background:var(--sand-deep)}
.account-dot.ok{background:var(--green)}
.account-dot.syncing{background:var(--amber);animation:blink 1s infinite}
.account-dot.err{background:var(--red)}

/* ---------- Toggle row ---------- */
.toggle-row{display:flex;align-items:center;gap:.6rem;padding:.6rem 0 1rem;font-weight:500;cursor:pointer}
.toggle-row input{width:20px;height:20px;accent-color:var(--blue-deep)}

/* ---------- Lost button ---------- */
.btn-lost{background:#fff;color:var(--red);border:1.5px solid rgba(192,69,59,.4);font-weight:500}
.btn-lost:hover{background:var(--red-soft);transform:translateY(-2px)}

/* ---------- Photo gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.7rem}
.gal-thumb{aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s;background:var(--sand)}
.gal-thumb:hover{transform:translateY(-2px)}
.gal-thumb img{width:100%;height:100%;object-fit:cover}
.gal-add{aspect-ratio:1;border-radius:var(--r-md);border:1.5px dashed var(--sand-deep);color:var(--blue-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;font-size:1.6rem;font-weight:300;transition:.2s}
.gal-add span{font-size:.72rem}
.gal-add:hover{border-color:var(--blue-deep);background:#fff}
.gallery-edit{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:.55rem;margin-bottom:.3rem}
.gal-edit-item{position:relative;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden}
.gal-edit-item img{width:100%;height:100%;object-fit:cover}
.gal-rm{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;background:rgba(20,25,28,.65);color:#fff;font-size:.7rem;display:flex;align-items:center;justify-content:center}
.gal-rm:hover{background:var(--red)}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:95;background:rgba(20,25,28,.9);display:flex;align-items:center;justify-content:center;padding:2rem;animation:fade .2s}
.lightbox img{max-width:100%;max-height:100%;border-radius:var(--r-md);box-shadow:var(--shadow-lg)}
.lightbox-close{position:absolute;top:1.2rem;right:1.2rem;background:rgba(255,255,255,.15);color:#fff}
.lightbox-close:hover{background:rgba(255,255,255,.3)}

/* ---------- Lost modal ---------- */
.lost-modal{width:min(520px,100%);max-height:92vh;overflow-y:auto}
.lost-modal .modal-head h3{color:var(--red)}

/* ---------- Ask Maddie ---------- */
.maddie-fab{
  position:fixed;bottom:1.3rem;right:1.3rem;z-index:50;display:flex;align-items:center;gap:.6rem;
  padding:.5rem 1.15rem .5rem .5rem;border-radius:999px;background:#fff;box-shadow:var(--shadow-lg);
  border:2px solid var(--blue-soft);transition:transform .2s,box-shadow .2s;
}
.maddie-fab:hover{transform:translateY(-3px)}
.maddie-fab-face{width:46px;height:46px;border-radius:50%;overflow:hidden;background:var(--sand);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex:0 0 auto}
.maddie-fab-face img{width:100%;height:100%;object-fit:cover;object-position:top}
.maddie-fab-label{font-weight:600;color:var(--blue-ink);font-size:.95rem}

.maddie-scrim{position:fixed;inset:0;z-index:74;background:rgba(20,25,28,.35);backdrop-filter:blur(2px);animation:fade .2s}
.maddie{
  position:fixed;z-index:75;bottom:0;right:0;width:min(420px,100%);height:min(680px,100dvh);
  background:var(--cream);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;
  border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;animation:slideUp .3s var(--ease);
}
@media(min-width:520px){.maddie{bottom:1.1rem;right:1.1rem;border-radius:var(--r-lg)}}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.maddie-head{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem;background:linear-gradient(135deg,var(--blue-ink),var(--blue-deep));color:#fff}
.maddie-head-id{display:flex;align-items:center;gap:.7rem}
.maddie-avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:1.4rem;border:2px solid rgba(255,255,255,.5)}
.maddie-avatar img{width:100%;height:100%;object-fit:cover;object-position:top}
.maddie-title{font-family:var(--serif);font-weight:600;font-size:1.35rem;line-height:1}
.maddie-status{font-size:.74rem;opacity:.9;display:flex;align-items:center;gap:.35rem;margin-top:.15rem}
.maddie-dot{width:7px;height:7px;border-radius:50%;background:#8fd6a0}
.maddie-head .icon-btn{background:rgba(255,255,255,.18);color:#fff}
.maddie-head .icon-btn:hover{background:rgba(255,255,255,.3)}

.maddie-log{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.8rem}
.mmsg{display:flex;gap:.55rem;max-width:100%}
.mmsg-me{justify-content:flex-end}
.mmsg-av{width:30px;height:30px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--sand);display:flex;align-items:center;justify-content:center;font-size:.95rem;margin-top:auto}
.mmsg-av img{width:100%;height:100%;object-fit:cover;object-position:top}
.mbubble{padding:.7rem .95rem;border-radius:16px;font-size:.92rem;line-height:1.5;max-width:82%}
.mmsg-maddie .mbubble{background:#fff;color:var(--ink);border-bottom-left-radius:5px;box-shadow:var(--shadow-sm)}
.mmsg-me .mbubble{background:var(--blue-deep);color:#fff;border-bottom-right-radius:5px}
.mbubble a{color:var(--blue-deep);font-weight:500;text-decoration:underline}
.mmsg-me .mbubble a{color:#fff}
.mtyping{display:flex;gap:4px;align-items:center;padding:.85rem .95rem}
.mtyping span{width:7px;height:7px;border-radius:50%;background:var(--sand-deep);animation:blink 1.2s infinite}
.mtyping span:nth-child(2){animation-delay:.2s}.mtyping span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}

.maddie-chips{display:flex;gap:.4rem;overflow-x:auto;padding:.2rem 1rem .5rem;scrollbar-width:none}
.maddie-chips::-webkit-scrollbar{display:none}
.mchip{flex:0 0 auto;background:#fff;border:1px solid var(--sand-deep);color:var(--blue-ink);padding:.45rem .8rem;border-radius:999px;font-size:.8rem;font-weight:400;transition:.2s;white-space:nowrap}
.mchip:hover{border-color:var(--blue-deep);background:var(--blue-soft)}
.maddie-input{display:flex;gap:.5rem;padding:.7rem 1rem;border-top:1px solid var(--sand-deep);background:#fff}
.maddie-input input{flex:1;border:1.5px solid var(--sand-deep);border-radius:999px;padding:.65rem 1rem;font-size:.92rem;font-weight:300}
.maddie-input input:focus{outline:none;border-color:var(--blue-deep);box-shadow:0 0 0 3px rgba(108,151,164,.15)}
.maddie-send{width:44px;height:44px;border-radius:50%;background:var(--blue-deep);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:.2s}
.maddie-send:hover{background:var(--blue-ink);transform:scale(1.05)}
.maddie-foot{text-align:center;font-size:.66rem;color:var(--muted);padding:.3rem 1rem .6rem;background:#fff}

@media (max-width:680px){
  .maddie-fab-label{display:none}
  .maddie-fab{padding:.4rem;bottom:1rem;right:1rem}
}

/* ---------- Print ---------- */
@media print{
  .topbar,.dogstrip,.hero-edit,.site-footer .footer-fine,.btn,.icon-btn,.maddie-fab,.maddie,.maddie-scrim,.gal-add{display:none!important}
  body{background:#fff}
  .hero{background:#406572!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .card{break-inside:avoid;box-shadow:none;border:1px solid #ddd}
  .cards{gap:.6rem}
  /* Always print full content, even if a card is collapsed on screen */
  .card.collapsed > *{display:revert!important}
  .card.collapsed .card-head{margin-bottom:1rem}
  .card-head::after{display:none!important}
}

/* ---------------- Smart Tag: upsell inside the QR modal + order preview ---------------- */
.tag-upsell{
  margin-top:1.2rem;padding:1.05rem 1.1rem;border-radius:16px;
  background:linear-gradient(180deg,var(--sand) 0%,var(--cream) 100%);
  border:1px solid var(--sand-deep);
}
.tag-upsell-head{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.22rem;font-weight:600;color:var(--blue-ink);margin-bottom:.3rem}
.tag-upsell p{font-size:.86rem;color:var(--muted);line-height:1.55;margin:0 0 .85rem}
.tag-upsell .btn{width:100%}

.tag-preview{display:flex;gap:.8rem;justify-content:center;margin:0 0 1.15rem}
.tag-preview figure{margin:0;flex:0 1 130px;text-align:center}
.tag-preview img{
  width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:50%;
  background:var(--white);border:1px solid var(--sand-deep);box-shadow:var(--shadow-sm);
}
.tag-preview figcaption{font-size:.72rem;color:var(--muted);margin-top:.35rem;letter-spacing:.04em;text-transform:uppercase}

/* Engraving validation, explainer, confirm + order status */
.tag-warn{
  margin:-.35rem 0 1rem;padding:.7rem .85rem;border-radius:12px;
  background:var(--red-soft);border:1px solid rgba(192,69,59,.25);
  color:var(--red);font-size:.83rem;line-height:1.5;
}
.tag-how{margin:0 0 1rem;border-top:1px solid var(--sand-deep);border-bottom:1px solid var(--sand-deep);padding:.15rem 0}
.tag-how summary{
  cursor:pointer;list-style:none;padding:.7rem 0;font-size:.86rem;font-weight:500;color:var(--blue-ink);
}
.tag-how summary::-webkit-details-marker{display:none}
.tag-how summary::after{content:"＋";float:right;color:var(--muted);font-weight:400}
.tag-how[open] summary::after{content:"−"}
.tag-how ul{margin:0 0 .9rem;padding-left:1.1rem}
.tag-how li{font-size:.82rem;color:var(--muted);line-height:1.6;margin-bottom:.45rem}
.tag-how li b{color:var(--ink);font-weight:500}

.tag-confirm{display:flex;gap:.6rem;align-items:flex-start;margin:0 0 1.1rem;cursor:pointer}
.tag-confirm input{margin-top:.15rem;width:1.05rem;height:1.05rem;accent-color:var(--blue-deep);flex:0 0 auto}
.tag-confirm span{font-size:.82rem;color:var(--muted);line-height:1.55}
.tag-confirm span b{color:var(--ink);font-weight:500}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

.tag-status{
  margin-top:.7rem;padding:.7rem .85rem;border-radius:12px;
  background:var(--white);border:1px solid var(--sand-deep);
  font-size:.82rem;color:var(--muted);line-height:1.5;
}
.tag-status b{color:var(--ink);font-weight:500}
.tag-status .tag-status-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;color:var(--blue-ink)}

/* Sign in with Apple — required alongside Google under App Store guideline 4.8.
   Apple's HIG asks for its button to be no less prominent than the alternatives,
   so it renders first and at the same size. Black-on-white per Apple's spec. */
/* Apple and Google must render as the same size and shape wherever both appear
   — that parity is what guideline 4 asks for, so width is set explicitly here
   rather than left to depend on display:flex filling its parent. */
.oauth-stack{display:flex;flex-direction:column;gap:.6rem;margin-bottom:.2rem}
.oauth-stack .btn{width:100%}
.btn-apple{width:100%;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;gap:.55rem;
  border:1.5px solid #000;box-shadow:0 1px 2px rgba(0,0,0,.12);font-weight:500}
.btn-apple:hover{background:#1a1a1a}
.btn-apple .a-ico{
  width:18px;height:20px;flex:0 0 auto;background:#fff;
  -webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z'/%3E%3C/svg%3E");
  mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z'/%3E%3C/svg%3E");
}

/* ---------- iOS safe areas ----------
   The viewport is viewport-fit=cover, which tells iOS to extend the web view
   under the status bar, the Dynamic Island and the home indicator. Nothing in
   this stylesheet compensated for that, so the top bar rendered underneath the
   clock and battery and the floating controls sat on the home indicator.
   env() resolves to 0px on desktop and Android, so this block is inert there. */
.topbar{padding-top:env(safe-area-inset-top,0px)}
.topbar-inner{
  padding-left:max(1.1rem,env(safe-area-inset-left,0px));
  padding-right:max(1.1rem,env(safe-area-inset-right,0px));
}
/* Full-height overlays: box-sizing is border-box globally, so padding shrinks
   the content box rather than overflowing the 100dvh height. */
.drawer{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.emerg-inner{
  padding-top:calc(1.4rem + env(safe-area-inset-top,0px));
  padding-bottom:calc(3rem + env(safe-area-inset-bottom,0px));
}
.toast{bottom:calc(1.4rem + env(safe-area-inset-bottom,0px))}
.maddie-fab{
  bottom:calc(1.3rem + env(safe-area-inset-bottom,0px));
  right:calc(1.3rem + env(safe-area-inset-right,0px));
}
.maddie{padding-bottom:env(safe-area-inset-bottom,0px)}
@media(min-width:520px){.maddie{padding-bottom:0}}

/* ---------- Horizontal scroll feel ----------
   The page had no overscroll rules, so any stray overflow let the whole
   document rubber-band sideways — the "loose" side-to-side drift while
   scrolling vertically. overflow-x:clip contains it WITHOUT creating a scroll
   container, which matters: overflow-x:hidden here would break the sticky
   top bar. The two deliberate horizontal scrollers get overscroll containment
   so their gesture stops at their own edge instead of chaining to the page. */
html{overscroll-behavior-x:none;overflow-x:clip;width:100%;max-width:100%}
body{overflow-x:clip;width:100%;max-width:100%}
.dogstrip,.maddie-chips{overscroll-behavior-x:contain}
/* Panel open: stop the page behind it scrolling. overflow-y only, so the
   overflow-x:clip above (which keeps the sticky top bar working) survives. */
body.maddie-open{overflow-y:hidden}

/* ---------- Phone top-bar overflow menu ----------
   The bar can hold six controls at once — account, settings, backup, help,
   the Premium upsell (shown to every non-premium user) and Emergency. That
   does not fit a phone, and the one being pushed off the edge was Emergency,
   which is the worst possible thing to lose. Below 560px the three utility
   icons collapse into a single "more" button; Emergency always survives. */
.tb-more{position:relative;display:none}
.tb-menu{
  position:absolute;top:calc(100% + .45rem);right:0;z-index:60;min-width:190px;
  background:var(--cream);border:1px solid var(--sand-deep);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);padding:.35rem;display:flex;flex-direction:column;
}
.tb-menu > *{
  display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:.68rem .8rem;border-radius:var(--r-sm);font:inherit;font-size:.95rem;
  color:var(--ink);text-decoration:none;
}
.tb-menu > *:hover{background:var(--blue-soft)}

@media (max-width:560px){
  .tb-more{display:block}
  /* Kept in the DOM, not removed — the menu proxies clicks to them. */
  #btnSettings,#btnBackup,.topbar-actions > a[href="help.html"]{display:none}
}
/* Both the upsell and Emergency deserve to stay on screen, but at phone width
   they cannot both carry a full label. Premium keeps its place and its tap
   target as the sparkle alone (title and aria-label still read "Upgrade to
   Premium"); Emergency keeps its word, because an unlabelled safety button is
   a worse trade than an unlabelled upsell. */
@media (max-width:560px){
  #btnPremiumTop{font-size:0;padding:.55rem .72rem}
  #btnPremiumTop::before{content:"\2728";font-size:1rem;line-height:1}
}

/* --- Daily schedule: Today card + drawer editor (Sep 19, 2026) --- */
.rem.rt-done{opacity:.45}
.rt-times{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-top:.25rem}
.rt-time{position:relative;display:inline-flex;align-items:center}
.rt-time-in{width:auto;min-width:7.4rem;padding-right:1.6rem}
.rt-x{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);border:0;background:none;cursor:pointer;
  font-size:.8rem;line-height:1;color:#8a9199;padding:.15rem}
.rt-x:hover{color:#c0392b}
.rt-add{margin:0;width:auto;padding:.45rem .7rem}
.rt-days{display:flex;gap:.3rem;margin-top:.25rem}
.rt-day{flex:1 1 0;min-width:0;padding:.45rem 0;border:1px solid var(--line,#dfe3e6);border-radius:.55rem;
  background:#fff;color:#6b7278;font-size:.82rem;font-weight:700;cursor:pointer}
.rt-day.on{background:var(--brand,#406572);border-color:var(--brand,#406572);color:#fff}
.rt-bell{display:flex;align-items:center;gap:.5rem;margin-top:.7rem;font-size:.9rem;color:#2a2e31;cursor:pointer}
.rt-bell input{width:1.05rem;height:1.05rem;accent-color:var(--brand,#406572)}
@media (max-width:420px){
  .rt-time-in{min-width:6.6rem;font-size:.9rem}
  .rt-day{font-size:.76rem}
}
.rt-ic{display:inline-block;margin-right:.4rem}