@font-face {
  font-family: "Vazirmatn";
  src: url("/fonts/vazirmatn-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #f5f3ee;
  --card: #ffffff;
  --ink: #1d2328;
  --muted: #5f6b73;
  --line: #e3dfd6;
  --accent: #0f766e;
  --accent-ink: #ffffff;
  --accent-soft: #e3f1ef;
  --live: #d9480f;
  --live-soft: #fdebe1;
  --warn: #9a3412;
  --ring: #12b886;
  --hand: #fff4d6;
  --hand-ink: #8a5a00;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14181b;
    --card: #1d2327;
    --ink: #eef1f2;
    --muted: #9aa7ae;
    --line: #2d363b;
    --accent: #2bb3a3;
    --accent-ink: #0b1513;
    --accent-soft: #1b3431;
    --live: #ff8a50;
    --live-soft: #3a2519;
    --warn: #ffb08a;
    --ring: #38d9a9;
    --hand: #3a3018;
    --hand-ink: #ffd27a;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Vazirmatn", Tahoma, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
  min-height: 100dvh;
}
button, input { font: inherit; color: inherit; }

.wrap {
  max-width: 460px;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}

.brand { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 18px; }
.brand h1 { font-size: 26px; font-weight: 800; margin: 0; letter-spacing: 0; }
.brand span { color: var(--muted); font-size: 14px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 14px;
}
.card h2 { font-size: 17px; margin: 0 0 4px; font-weight: 700; }
.hint { color: var(--muted); font-size: 14px; margin: 0 0 12px; }

.btn {
  appearance: none;
  border: 0;
  border-radius: 12px;
  padding: 12px 18px;
  min-height: 48px;
  font-weight: 700;
  cursor: pointer;
  background: var(--accent);
  color: var(--accent-ink);
  width: 100%;
  touch-action: manipulation;
}
.btn:disabled { opacity: .55; cursor: default; }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--line); }
.btn.small { width: auto; min-height: 40px; padding: 8px 14px; font-size: 14px; }
.btn:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.linkrow { display: flex; gap: 8px; align-items: center; }
.linkbox {
  flex: 1;
  min-width: 0;
  direction: ltr;
  text-align: left;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12.5px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

label { display: block; font-weight: 700; margin-bottom: 6px; }
input[type=text] {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  margin-bottom: 12px;
}
.err { color: var(--warn); font-size: 14px; margin: 8px 0 0; min-height: 1em; }
.err.quiet { margin: 0 0 12px; }
.err.quiet:empty { display: none; }

.top { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 14px; gap: 8px; }
.top h1 { font-size: 20px; margin: 0; font-weight: 800; }
.chip {
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}
.chip.bad { background: var(--live-soft); color: var(--warn); }

.speak {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 132px;
  border-radius: 20px;
  border: 2px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  margin-bottom: 14px;
  touch-action: manipulation;
  transition: background .15s, border-color .15s;
}
.speak b { font-size: 26px; font-weight: 800; }
.speak small { color: var(--muted); font-size: 14px; }
.speak[aria-pressed="true"] { background: var(--live-soft); border-color: var(--live); }
.speak[aria-pressed="true"] b { color: var(--live); }
.speak:disabled { opacity: .6; cursor: default; }

.unlock {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  background: var(--live-soft); color: var(--warn);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; font-size: 14px;
}

.people { list-style: none; padding: 0; margin: 0; }
.people li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.people li:first-child { border-top: 0; }
.avatar {
  flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  font-weight: 800;
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow .12s;
}
.people li.speaking .avatar { box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--ring); }
.pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; }
.wave { font-size: 12px; color: var(--ring); font-weight: 700; }

.net { color: var(--muted); font-size: 13px; text-align: center; margin: 6px 0 12px; }
.foot { display: flex; justify-content: center; }

/* ---------- the floor ---------- */
.floor { text-align: center; }
.floor .lead { font-weight: 700; font-size: 17px; margin: 0 0 4px; }
.floor .lead.live { color: var(--live); }
.floor .hint { margin-bottom: 14px; }
.bigbtn { min-height: 64px; font-size: 20px; border-radius: 16px; margin-top: 6px; }
.bigbtn.ready { background: var(--live); color: #fff; min-height: 76px; font-size: 24px; }
.countdown { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
.notice {
  background: var(--live-soft); color: var(--warn);
  border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; font-weight: 700;
}
.btn.danger { background: var(--live); color: #fff; }
.btn.tiny { width: auto; min-height: 36px; padding: 4px 12px; font-size: 13px; border-radius: 10px; }

.controls .hint { margin-bottom: 10px; }
.controls .row, .confirm { display: flex; gap: 8px; flex-wrap: wrap; }
.controls .row > * { flex: 1 1 auto; }
#lock[aria-pressed="true"] { background: var(--live-soft); color: var(--warn); border-color: var(--live); }

.people li { flex-wrap: wrap; }
.who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.badges { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.badges:empty { display: none; }
.badge {
  font-size: 12px; white-space: nowrap; border-radius: 999px; padding: 0 8px;
  background: var(--accent-soft); color: var(--accent);
}
.badge.hand { background: var(--hand); color: var(--hand-ink); font-weight: 700; }
.badge.live { background: var(--live-soft); color: var(--live); font-weight: 700; }
.badge.warn { background: var(--live-soft); color: var(--warn); }
.acts { display: flex; gap: 6px; flex-wrap: wrap; margin-inline-start: auto; }
.people li[data-hand]:not([data-hand="0"]) .avatar { background: var(--hand); color: var(--hand-ink); }

/* ---------- attendance ---------- */
.tablewrap { overflow-x: auto; margin: 6px 0 14px; }
table.att { width: 100%; border-collapse: collapse; font-size: 14px; }
table.att th { text-align: start; color: var(--muted); font-weight: 700; padding: 6px 4px; }
table.att td { padding: 8px 4px; border-top: 1px solid var(--line); }
table.att td .tag { margin-inline-start: 6px; }
.st { font-weight: 700; }
.st-present { color: var(--accent); }
.st-late, .st-left_early { color: var(--warn); }
.st-absent { color: var(--muted); }