/* Shared component styles. Each skin (member, ops, owner, public) defines the variables; nothing here sets a colour of its own. */
:root{
  --bg:#f4f1ea; --panel:#faf8f3; --ink:#2b2823; --muted:#6a6459; --line:#ded8cc; --accent:#6d5f45; --accent-fill:#8a7a5c;
  --cta:#2b2823; --cta-ink:#faf8f3; --ok:#3f5b3a; --warn:#8a5a14; --bad:#9b2d2a;
  --r:4px; --tap:48px; --dur-1:120ms; --dur-2:180ms; --dur-3:260ms; --ease:cubic-bezier(.2,.8,.2,1);
  --sh-sheet:0 -8px 40px rgba(0,0,0,.18); --focus:var(--accent);
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-serif:"Cormorant Garamond",Didot,"Bodoni 72",Baskerville,Georgia,serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14120f; --panel:#1d1b17; --ink:#ece6da; --muted:#a79f90; --line:#34302a; --accent:#c9b58a; --accent-fill:#8a7a5c;
    --cta:#e8dfcc; --cta-ink:#14120f; --ok:#a9c8a0; --warn:#e0b878; --bad:#f0a39b; --sh-sheet:0 -8px 40px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#14120f; --panel:#1d1b17; --ink:#ece6da; --muted:#a79f90; --line:#34302a; --accent:#c9b58a; --accent-fill:#8a7a5c;
  --cta:#e8dfcc; --cta-ink:#14120f; --ok:#a9c8a0; --warn:#e0b878; --bad:#f0a39b; --sh-sheet:0 -8px 40px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--font-sans);-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
input,textarea{font-size:16px}  /* 16px stops iOS Safari zooming on focus */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ic{display:inline-block;vertical-align:-.22em;flex:none}
.linkbtn{background:none;border:0;color:var(--accent);text-decoration:underline;cursor:pointer;padding:0 4px;min-height:44px}
.iconbtn{background:none;border:0;min-width:44px;min-height:44px;display:inline-grid;place-items:center;cursor:pointer;border-radius:var(--r);color:var(--ink)}
.iconbtn:active{background:var(--line)}

.btn{min-height:var(--tap);padding:0 20px;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:var(--r);cursor:pointer;
  transition:transform var(--dur-1) var(--ease),background var(--dur-1)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--cta);color:var(--cta-ink);border-color:var(--cta)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn:disabled,.btn.busy{opacity:.55;cursor:default}
.btnrow{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.btnrow .btn{flex:1 1 auto}

.selectbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--line);background:var(--panel);border-radius:var(--r);cursor:pointer}
.dd-menu{position:fixed;z-index:80;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.18);padding:4px;max-height:50vh;overflow:auto;
  overscroll-behavior:contain;animation:ddin var(--dur-2) var(--ease)}
.dd-item{display:flex;flex-direction:column;align-items:flex-start;width:100%;min-height:44px;justify-content:center;padding:6px 12px;background:none;border:0;border-radius:3px;text-align:left;cursor:pointer}
.dd-item:hover,.dd-item:focus{background:var(--line)}
.dd-item.on{font-weight:600}
.dd-item small{color:var(--muted)}
.dd-sep{height:1px;background:var(--line);margin:4px 0}
@keyframes ddin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.scrim{position:fixed;inset:0;background:rgba(20,18,15,.42);opacity:0;transition:opacity var(--dur-2);z-index:60}
.scrim.on{opacity:1}
.sheet{position:fixed;z-index:61;left:0;right:0;bottom:0;max-height:92dvh;background:var(--panel);color:var(--ink);border-radius:14px 14px 0 0;box-shadow:var(--sh-sheet);
  transform:translateY(100%);transition:transform var(--dur-3) var(--ease);display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)}
.sheet.on{transform:none}
.sheet-grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:8px auto 0}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 0 20px}
.sheet-head h2{margin:0;font:600 18px/1.3 var(--font-sans)}
.sheet-body{overflow:auto;padding:12px 20px 20px;overscroll-behavior:contain}
@media (min-width:720px){
  .sheet{left:50%;right:auto;bottom:auto;top:50%;width:min(520px,92vw);border-radius:var(--r);transform:translate(-50%,-46%);opacity:0}
  .sheet.on{transform:translate(-50%,-50%);opacity:1}
  .sheet.sheet-wide{width:min(760px,94vw)}
  .sheet-grab{display:none}
}
#toasts{position:fixed;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:8px;z-index:90;pointer-events:none}
.toast{pointer-events:auto;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:var(--r);display:flex;align-items:center;gap:8px;min-height:44px;box-shadow:0 8px 24px rgba(0,0,0,.25);animation:ddin var(--dur-2) var(--ease)}
.toast .linkbtn{color:var(--bg)}
.toast-err{background:var(--bad);color:#fff}
.updatebar,.offlineline{position:fixed;left:0;right:0;top:0;z-index:95;text-align:center;padding:8px 12px;background:var(--ink);color:var(--bg);font-size:14px}
.offlineline{top:auto;bottom:0;background:var(--warn);color:#fff}
.updatebar .linkbtn{color:var(--bg)}
.skeleton{background:linear-gradient(90deg,var(--line) 25%,transparent 50%,var(--line) 75%);background-size:200% 100%;animation:sk 1.2s linear infinite;border-radius:var(--r);min-height:1em}
@keyframes sk{to{background-position:-200% 0}}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;line-height:1;padding:4px 8px;border-radius:999px;background:var(--line);color:var(--ink)}
.chip.ok{color:var(--ok)} .chip.warn{color:var(--warn)} .chip.bad{color:var(--bad)}
.field{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.field label{font-size:13px;color:var(--muted)}
.field input,.field textarea{min-height:var(--tap);padding:8px 12px;border:1px solid var(--line);background:var(--bg);border-radius:var(--r)}
.empty{text-align:center;padding:36px 16px;color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}