/* SlotSheet — styles. No external fonts, no external anything. */
:root{
  --bg:#fbf8f4;
  --card:#ffffff;
  --ink:#221f1c;
  --muted:#6f6a63;
  --line:#eae2d7;
  --accent:#e4572e;
  --accent-dark:#c8451f;
  --accent-soft:#fdefe9;
  --teal:#2f7d6e;
  --teal-soft:#e8f4f0;
  --amber:#b07d18;
  --amber-soft:#fdf3dd;
  --radius:16px;
  --shadow:0 1px 2px rgba(34,31,28,.05), 0 8px 24px -18px rgba(34,31,28,.35);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font);
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  padding-bottom:64px;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.app{max-width:760px; margin:0 auto; padding:0 18px}
.app.wide{max-width:1040px}

/* ---------- header ---------- */
.topbar{display:flex; align-items:center; justify-content:space-between; padding:20px 0 10px; gap:12px}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:19px; letter-spacing:-.02em; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand .mark{width:26px;height:26px;border-radius:8px;background:var(--accent);display:grid;place-items:center;color:#fff;font-size:15px;line-height:1}
.topbar nav{display:flex; gap:16px; font-size:14px; color:var(--muted)}
.topbar nav a{color:var(--muted)}

/* ---------- generic ---------- */
h1{font-size:31px; line-height:1.15; letter-spacing:-.025em; margin:18px 0 10px}
h2{font-size:20px; letter-spacing:-.015em; margin:26px 0 10px}
h3{font-size:16px; margin:18px 0 8px}
p{margin:0 0 14px}
.lead{font-size:17.5px; color:var(--muted); margin-bottom:22px}
.small{font-size:13.5px; color:var(--muted)}
.tiny{font-size:12.5px; color:var(--muted)}
.center{text-align:center}
.mt{margin-top:18px}
.hr{height:1px;background:var(--line);margin:26px 0;border:0}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); margin-bottom:16px}
.card.tight{padding:16px}
.card.flat{box-shadow:none}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.row.between{justify-content:space-between}
.grow{flex:1 1 auto; min-width:180px}
.stack{display:flex; flex-direction:column; gap:10px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 18px; border-radius:12px; border:1px solid var(--line);
  background:#fff; color:var(--ink); font:inherit; font-weight:650; cursor:pointer;
  text-decoration:none; min-height:48px; transition:transform .06s ease, background .15s ease;
}
.btn:hover{text-decoration:none; background:#fdfbf8}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{background:var(--accent-dark)}
.btn.ghost{background:transparent}
.btn.small{padding:8px 12px; min-height:38px; font-size:14px; border-radius:10px}
.btn.tiny{padding:5px 9px; min-height:30px; font-size:13px; border-radius:8px; font-weight:600}
.btn.danger{color:#a8321a; border-color:#f0cdc3}
.btn.block{width:100%}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-weight:600;cursor:pointer}
.linkbtn:hover{text-decoration:underline}

/* ---------- forms ---------- */
label.field{display:block; margin-bottom:14px}
label.field > .lab{display:block; font-size:14px; font-weight:650; margin-bottom:6px}
label.field > .hint{display:block; font-size:12.5px; color:var(--muted); margin-top:5px}
input[type=text],input[type=email],input[type=number],input[type=url],textarea,select{
  width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:11px;
  background:#fff; font:inherit; color:var(--ink); min-height:48px;
}
textarea{min-height:78px; resize:vertical}
input:focus,textarea:focus,select:focus{outline:2px solid #f3c9bb; outline-offset:1px; border-color:#eebbaa}
input[type=number]{max-width:110px}
.check{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; margin-bottom:12px}
.check input{margin-top:3px}

/* ---------- hero / home ---------- */
.hero{padding:16px 0 6px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 6px}
.chip{background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 13px; font-size:14px; color:var(--muted)}
.tpl-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.tpl{background:#fff; border:1px solid var(--line); border-radius:14px; padding:15px; cursor:pointer; text-align:left; font:inherit; box-shadow:var(--shadow)}
.tpl:hover{border-color:#dcb9ab}
.tpl .emo{font-size:22px; display:block; margin-bottom:8px}
.tpl b{display:block; font-size:15.5px; margin-bottom:3px}
.tpl span{font-size:13px; color:var(--muted)}

/* ---------- sheet ---------- */
.sheet-head{padding:6px 0 0}
.sheet-title{font-size:29px; letter-spacing:-.025em; margin:10px 0 6px}
.byline{font-size:14.5px; color:var(--muted)}
.notice{background:var(--teal-soft); border:1px solid #cfe6df; color:#1e5b4f; padding:11px 14px; border-radius:12px; font-size:14px; margin:14px 0}
.notice.warn{background:var(--amber-soft); border-color:#f0dfb5; color:#7a5710}
.notice.err{background:#fdeceb; border-color:#f5cac6; color:#8d2b22}
.group{margin:22px 0 6px}
.group-label{font-size:13px; font-weight:750; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:8px; display:flex; gap:8px; align-items:center}
.group-label:after{content:""; flex:1; height:1px; background:var(--line)}
.slot{background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 15px; margin-bottom:10px; box-shadow:var(--shadow)}
.slot.full{background:#fcfbf9}
.slot-top{display:flex; gap:12px; align-items:flex-start; justify-content:space-between}
.slot-name{font-weight:700; font-size:16.5px; letter-spacing:-.01em}
.slot-time{color:var(--muted); font-weight:500; font-size:14.5px}
.slot-note{font-size:13.5px; color:var(--muted); margin-top:3px}
.slot-count{font-size:13.5px; color:var(--teal); font-weight:650; white-space:nowrap; text-align:right}
.slot-count.full{color:var(--muted)}
.slot-count.low{color:var(--amber)}
.people{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px}
.person{background:var(--accent-soft); color:#8c3517; border-radius:999px; padding:4px 11px; font-size:13.5px; font-weight:600}
.person.mine{background:var(--teal-soft); color:#1e5b4f}
.person.mine:after{content:" ✓"}
.person.wait{background:#f3efe9;color:var(--muted);font-weight:500}
.slot-actions{margin-top:12px; display:flex; gap:8px; flex-wrap:wrap}
.signup-form{margin-top:12px; border-top:1px dashed var(--line); padding-top:12px}
.signup-form .mini{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.closed-badge{background:#f3efe9; color:var(--muted); border-radius:999px; padding:4px 11px; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em}

/* ---------- admin ---------- */
.tabs{display:flex; gap:6px; border-bottom:1px solid var(--line); margin:18px 0 18px; overflow-x:auto}
.tab{background:none;border:0;border-bottom:2.5px solid transparent;padding:10px 13px;font:inherit;font-weight:650;color:var(--muted);cursor:pointer;white-space:nowrap}
.tab.on{color:var(--ink); border-bottom-color:var(--accent)}
.stat{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px}
.stat > div{background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px 14px;box-shadow:var(--shadow)}
.stat b{display:block;font-size:22px;letter-spacing:-.02em}
.stat span{font-size:12.5px;color:var(--muted)}
.line{display:flex;gap:10px;justify-content:space-between;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:0}
.line .who{font-weight:650}
.line .meta{font-size:13px;color:var(--muted)}
.empty{color:var(--muted); font-size:14.5px; padding:8px 0}

/* ---------- builder ---------- */
.builder-slot{border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:10px; background:#fcfaf7}
.builder-slot .mini{display:grid; grid-template-columns:1fr 1fr 92px; gap:9px; align-items:end}
.builder-group{border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:14px; background:#fff; box-shadow:var(--shadow)}
.builder-group > .ghead{display:flex; gap:10px; align-items:center; margin-bottom:12px}
.builder-group > .ghead input{font-weight:700; font-size:16.5px; border:0; border-bottom:1px dashed var(--line); border-radius:0; padding:8px 2px; min-height:40px}
.tpl-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}

/* ---------- misc ---------- */
.linkbox{display:flex; gap:8px; align-items:stretch}
.linkbox input{font-size:14px; color:var(--muted); background:#fcfaf7}
.share-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.footer{margin:44px 0 10px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:13.5px; display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between}
.modebar{background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 13px; font-size:13px; color:var(--muted); margin:12px 0 0}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:22px; background:#221f1c; color:#fff; padding:12px 18px; border-radius:12px; font-size:14.5px; z-index:50; box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.mine{display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line)}
.mine:last-child{border-bottom:0}
.mine b{display:block; font-size:15.5px}
.mine span{font-size:13px;color:var(--muted)}

@media (min-width:640px){
  h1{font-size:38px}
  .sheet-title{font-size:34px}
  .tpl-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:520px){
  .topbar{gap:8px; padding:16px 0 8px}
  /* on small screens keep just the brand and the main action; the rest lives in the footer */
  .topbar nav a:not(.btn){display:none}
  .topbar nav{gap:8px; align-items:center}
  .topbar nav .btn{white-space:nowrap; padding:9px 13px; min-height:40px; font-size:13.5px}
  .signup-form .mini{grid-template-columns:1fr}
  .builder-slot .mini{grid-template-columns:1fr 1fr}
  .builder-slot .mini > :last-child{grid-column:span 2}
  .stat{grid-template-columns:1fr 1fr}
}

/* ---------- print ---------- */
@media print{
  body{background:#fff; padding:0}
  .topbar nav,.footer,.no-print,.btn,.modebar,.toast{display:none !important}
  .card,.slot{box-shadow:none}
  .app{max-width:none;padding:0}
  .slot{break-inside:avoid}
}