/* Family Gift Tracker — palette and art-deco trim carried over from the original page. */
:root{--bg:#F7F3EC;--surface:#FFFFFF;--ink:#13271B;--muted:#5A6B5F;--line:#DCD6C8;--pine:#14612F;--berry:#C1121F;--brass:#A8791A;--on-pine:#FFFFFF;--stripe:#FFFFFF;--btn-ink:#FFFFFF;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0F1A13;--surface:#18281E;--ink:#EEF3EC;--muted:#A3B5A8;--line:#2D4535;--pine:#4FB27A;--berry:#FF6B79;--brass:#E0B84F;--on-pine:#0B1A10;--stripe:#C9D6CD;--btn-ink:#2A0A0F}}
:root[data-theme="dark"]{--bg:#0F1A13;--surface:#18281E;--ink:#EEF3EC;--muted:#A3B5A8;--line:#2D4535;--pine:#4FB27A;--berry:#FF6B79;--brass:#E0B84F;--on-pine:#0B1A10;--stripe:#C9D6CD;--btn-ink:#2A0A0F}
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 "Instrument Sans",system-ui,sans-serif}
body::before{content:"";display:block;height:10px;background:repeating-linear-gradient(135deg,var(--berry) 0 14px,var(--stripe) 14px 28px)}
main{max-width:880px;margin:0 auto;padding:24px 16px 64px}
h1,h2{font-family:Fraunces,Georgia,serif;margin:0;line-height:1.1}
a{color:var(--pine)}
[hidden]{display:none!important}

/* ---- Top bar ---- */
.topbar{max-width:880px;margin:0 auto;padding:10px 16px 0;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;font-size:.92rem}
.topbar .brand{font:600 1rem Fraunces,Georgia,serif;color:var(--pine);text-decoration:none}
.topbar .who{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;color:var(--muted)}
.topbar .who a,.linkbtn{color:var(--pine);font-weight:600;text-decoration:none;background:none;border:0;padding:0;font:inherit;font-weight:600;cursor:pointer}
.topbar .who a:hover,.linkbtn:hover{text-decoration:underline}
.topbar .hi{color:var(--ink);font-weight:500}
form.inline{display:inline}

/* ---- Hero ---- */
.hero{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;padding:8px 0 24px}
.hero h1{font-size:clamp(2rem,6vw,3.2rem);font-weight:800;letter-spacing:-.02em;color:var(--pine)}
.days{font-family:Fraunces,Georgia,serif;color:var(--berry);border:3px solid var(--berry);outline:2px solid var(--pine);outline-offset:3px;border-radius:12px;padding:10px 20px;margin:5px;text-align:center;background:var(--surface)}
.days b{font-size:clamp(2.4rem,8vw,4rem);font-weight:800;line-height:1;display:block}
.days span{font-size:.95rem;color:var(--muted);font-family:"Instrument Sans",sans-serif}

/* ---- Stats ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.stat small{color:var(--muted);display:block}
.stat strong{font-size:1.35rem;font-weight:600;color:var(--pine)}
.stat:nth-child(even) strong{color:var(--berry)}
.bar{height:8px;background:var(--line);border-radius:4px;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;width:0;background:var(--pine);transition:width .3s}
.over{color:var(--berry)}

/* ---- Forms ---- */
form.add{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:28px}
form.add.tight{margin-bottom:12px}
.f{display:flex;flex-direction:column;gap:2px;font-size:.85rem;color:var(--muted)}
.f.w2{grid-column:span 2}.f.w3{grid-column:span 3}.f.w6{grid-column:span 6}
.f.end,.end{justify-content:flex-end;align-items:flex-end;display:flex}
input,select,button,textarea{font:inherit;color:var(--ink)}
input,select,textarea{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
textarea{resize:vertical}
input:disabled,select:disabled{opacity:.7}
input:focus-visible,select:focus-visible,button:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
.btn{display:inline-block;background:var(--berry);color:var(--btn-ink);border:0;border-radius:8px;padding:10px 16px;font-weight:600;cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{filter:brightness(1.08)}
.btn.sm{padding:6px 12px}
.btn.ghost{background:none;color:var(--pine);border:1px solid var(--line)}
.x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1.2rem;padding:4px 8px;border-radius:6px}
.x.sm{font-size:.88rem}
.x:hover{color:var(--berry)}
.x.danger:hover{color:var(--berry);text-decoration:underline}

/* ---- List bar, status, tools ---- */
.listbar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:12px}
.lsel{display:flex;align-items:center;gap:8px;font:600 .95rem Fraunces,Georgia,serif;color:var(--brass)}
.lsel select{width:auto;max-width:60vw;font-family:"Instrument Sans",sans-serif;font-weight:500}
.lacts{display:flex;flex-wrap:wrap;gap:2px;margin-left:auto}
.sync{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:16px;font-size:.92rem;color:var(--muted)}
.sync.err{color:var(--berry)}
.tools{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.tools select{width:auto}
.tright{display:flex;gap:6px;align-items:center}
.pdfbox{position:relative}
.pdfbox>summary{list-style:none}
.pdfbox>summary::-webkit-details-marker{display:none}
.pdfbox .pop{position:absolute;right:0;top:calc(100% + 6px);z-index:5;width:280px;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--brass);border-radius:10px;padding:12px 14px;box-shadow:0 8px 24px rgba(0,0,0,.12);display:flex;flex-direction:column;gap:8px}
.chk{display:flex;gap:8px;align-items:center;font-size:.92rem}
.chk input{width:auto}

/* Role-based visibility (set on <body> by app.js) */
.owner-only{display:none}
body.is-owner .owner-only{display:inline-block}
.member-only{display:inline-block}
body.is-owner .member-only{display:none}
.editor-only{display:none}
body.can-edit .editor-only{display:block}

/* ---- Recipients and gifts ---- */
.person{background:var(--surface);border:1px solid var(--line);border-radius:10px;margin-bottom:16px;overflow:hidden}
.person>header{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);border-left:5px solid var(--berry)}
.person:nth-of-type(even)>header{border-left-color:var(--pine)}
.person h2{font-size:1.3rem}
.lockicon{font-size:1rem}
.pm{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--muted);font-size:.9rem}
.pm input{width:84px;padding:5px 8px}
.pm a{color:var(--pine);font-weight:600;text-decoration:none}.pm a:hover{text-decoration:underline}
.gift{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:center;padding:10px 14px;border-top:1px solid var(--line)}
.gift:first-of-type{border-top:0}
.gift.single{grid-template-columns:1fr}
.gift.lockrow{grid-template-columns:1fr auto auto}
.gift .n{min-width:0}.gift .n b{font-weight:600;overflow-wrap:anywhere}
.gift .n small{display:block;color:var(--muted);overflow-wrap:anywhere}
.gift.given .n b{text-decoration:line-through;color:var(--muted)}
.gift select{width:auto;padding:6px 8px}
.price{font-variant-numeric:tabular-nums;font-weight:500}
.st-Idea{color:var(--muted)}.st-Bought{color:var(--brass)}.st-Wrapped{color:var(--pine)}.st-Given{color:var(--pine)}
.sub{font:600 .95rem Fraunces,Georgia,serif;margin:0;padding:10px 14px 6px;color:var(--brass);border-top:1px solid var(--line);background:var(--bg)}
.memo{grid-column:1/-1}
.memo summary{cursor:pointer;color:var(--muted);font-size:.88rem;overflow-wrap:anywhere}
.memo.ro{color:var(--muted);font-size:.88rem;white-space:pre-wrap;overflow-wrap:anywhere}
.gedit{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:8px;padding:10px;border:1px dashed var(--line);border-radius:8px}
.empty{padding:36px 16px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:10px}
.pin{width:96px!important;letter-spacing:.2em;text-align:center}
.lockbox summary{cursor:pointer;color:var(--muted);font-size:.9rem}
.lockbox span{display:inline-flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.lockbox input{width:170px}
.lockbox input.wide{width:210px}
.perr{color:var(--berry);display:block;padding:0 14px 10px}
.perr:empty{display:none}
.grp{font:800 1.5rem Fraunces,Georgia,serif;color:var(--berry);margin:28px 0 12px;padding-bottom:6px;border-bottom:3px solid var(--pine)}
.gt{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;display:flex;gap:10px;align-items:center;width:100%;text-align:left}
.gc{font:500 .85rem "Instrument Sans",system-ui,sans-serif;color:var(--muted);margin-left:auto}

/* ---- Notices and small text ---- */
.note{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--pine);border-radius:10px;padding:10px 14px;margin-bottom:16px;font-size:.95rem;overflow-wrap:anywhere}
.note.err{border-left-color:var(--berry);color:var(--berry)}
.muted{color:var(--muted)}
.block{display:block}
.fine{color:var(--muted);font-size:.85rem;margin:8px 0 0}
.center{text-align:center;margin-top:12px}

/* ---- Sign-in / setup card ---- */
body.auth main{max-width:440px;padding-top:48px}
.authcard{background:var(--surface);border:3px solid var(--berry);outline:2px solid var(--pine);outline-offset:3px;border-radius:12px;padding:28px 24px}
.authcard h1{font-size:clamp(1.7rem,6vw,2.2rem);font-weight:800;color:var(--pine);letter-spacing:-.02em}
.lede{color:var(--muted);margin:6px 0 18px}
.stack{display:flex;flex-direction:column;gap:12px}
.stack .btn{margin-top:4px}

/* ---- Account / admin panels ---- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:20px}
.panel h2{font-size:1.25rem;color:var(--berry);margin-bottom:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.span2{grid-column:span 2}
.tablewrap{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
table.users{width:100%;border-collapse:collapse;font-size:.92rem}
table.users th{text-align:left;font:600 .9rem Fraunces,Georgia,serif;color:var(--brass);padding:10px 12px;border-bottom:3px solid var(--pine);background:var(--bg)}
table.users td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
table.users tr.off td{opacity:.6}
table.users select{width:auto;padding:5px 8px}
.r,table.users th.r{text-align:right}
.acts{white-space:normal;text-align:right}
.acts form{display:inline-block}
table.users th,td.nowrap{white-space:nowrap}
table.users td.acts{width:1%;min-width:220px}

/* ---- Share dialog ---- */
dialog{border:3px solid var(--berry);outline:2px solid var(--pine);outline-offset:3px;border-radius:12px;background:var(--surface);color:var(--ink);padding:0;width:min(520px,calc(100vw - 32px))}
dialog::backdrop{background:rgba(10,20,14,.55)}
.dlg{padding:20px;display:flex;flex-direction:column;gap:10px}
.dlg h2{color:var(--pine)}
.shareadd{display:grid;grid-template-columns:1fr auto auto;gap:8px}
.shareadd select{width:auto}
.members{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.members li{display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.members li span{flex:1;min-width:0;overflow-wrap:anywhere}
.members select{width:auto;padding:5px 8px}

@media (max-width:640px){
  form.add,.gedit{grid-template-columns:1fr 1fr}
  .f.w2,.f.w3,.f.w6{grid-column:span 2}
  .gift{grid-template-columns:1fr auto}.gift .price{grid-column:1}.gift select{grid-column:1}.gift .x{grid-row:1;grid-column:2}
  .gift.lockrow{grid-template-columns:1fr auto}.gift.lockrow span{grid-column:1/-1}
  .grid2{grid-template-columns:1fr}.span2{grid-column:auto}
  .lacts{margin-left:0}
  .pdfbox .pop{right:auto;left:0}
  table.users thead{display:none}
  table.users tr{display:block;border-top:1px solid var(--line);padding:8px 0}
  table.users td{display:block;border:0;padding:4px 12px}
  table.users td[data-l]::before{content:attr(data-l) ": ";color:var(--muted);font-size:.85rem}
  .r{text-align:left}.acts{white-space:normal}
  .shareadd{grid-template-columns:1fr 1fr}.shareadd input{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- Email additions ---- */
.mt{margin-top:12px}
.panel.mt{margin-top:24px}
code{font-size:.9em;background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:0 4px}
.recips{display:flex;flex-wrap:wrap;gap:6px 14px;margin:2px 0 4px}
.dlg textarea{min-height:70px}
.dlg .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:640px){.dlg .row2{grid-template-columns:1fr}}
.mail-only{display:none!important}
body.has-mail .mail-only{display:inline-block!important}
body.has-mail label.mail-only{display:flex!important}