/* Organiser area. Same palette and type as the public page, but everything is
   deliberately large: it is used standing at a door, on a phone, one-handed. */
:root{
  --robe:#5B1220;
  --robe-deep:#430C17;
  --saffron:#F2A900;
  --saffron-deep:#D99400;
  --paper:#F8F5F6;
  --ink:#24161A;
  --muted:#6B5A5F;
  --line:#D9CFD2;
  --lapis:#23407A;
  --error:#A3122A;
  --ok:#1B6B3A;
  --display:"Alegreya", Georgia, "Times New Roman", serif;
  --body:"Alegreya Sans", "Segoe UI", Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:1.125rem;line-height:1.5;
}
a{color:var(--lapis)}
:focus-visible{outline:3px solid var(--lapis);outline-offset:2px}

/* ---------- chrome ---------- */
.top{background:var(--robe);color:#FBF3F0;padding:1rem 1.25rem}
.top-in{max-width:60rem;margin:0 auto;display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center}
.top h1{font-family:var(--display);font-weight:700;font-size:1.5rem;margin:0;flex:1;min-width:10rem}
.top form{margin:0}
.logout{
  font:inherit;font-size:1rem;font-weight:700;background:none;color:#FBF3F0;
  border:1.5px solid rgba(255,255,255,.5);border-radius:8px;padding:.5rem .9rem;cursor:pointer;
}
.logout:hover{background:rgba(255,255,255,.12)}

nav.tabs{background:var(--robe-deep);padding:0 1.25rem}
nav.tabs ul{max-width:60rem;margin:0 auto;padding:0;list-style:none;display:flex;overflow-x:auto}
nav.tabs a{
  display:block;padding:.85rem 1rem;color:#F0DCDC;text-decoration:none;
  font-weight:700;font-size:1.05rem;white-space:nowrap;border-bottom:4px solid transparent;
}
nav.tabs a[aria-current="page"]{color:#fff;border-bottom-color:var(--saffron)}

main{max-width:60rem;margin:0 auto;padding:1.5rem 1.25rem 5rem}
h2{font-family:var(--display);font-weight:700;font-size:1.65rem;margin:2rem 0 .75rem}
h2:first-child{margin-top:0}

.flash{border-left:5px solid var(--ok);background:#E7F3EB;padding:.9rem 1.1rem;margin:0 0 1.5rem;border-radius:0 8px 8px 0}
.flash.error{border-left-color:var(--error);background:#FBE9EC}

/* ---------- stats ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.85rem;margin:0 0 1.75rem;padding:0;list-style:none}
.card{background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:1rem}
.card .n{display:block;font-family:var(--display);font-weight:700;font-size:2.25rem;line-height:1}
.card .k{display:block;color:var(--muted);font-size:1rem;margin-top:.25rem}
.card.accent{background:var(--robe);border-color:var(--robe);color:#FBF3F0}
.card.accent .k{color:#E6C3C0}

.bar{display:block;width:100%;height:1.6rem;margin:.5rem 0 .4rem}
.bar .track{fill:#fff;stroke:var(--line);stroke-width:1.5}
.bar .fill{fill:var(--saffron)}
.bar-note{color:var(--muted);font-size:1rem;margin:0 0 1.75rem}

.chart{background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:1rem;overflow-x:auto}
.chart svg{display:block;max-width:100%;height:auto}
.chart .axis{fill:var(--muted);font-family:var(--body);font-size:11px}
.chart .value{fill:var(--ink);font-family:var(--body);font-size:11px;font-weight:700}
.chart rect{fill:var(--robe)}

/* ---------- search ---------- */
.search{display:flex;gap:.6rem;margin:0 0 1.5rem;flex-wrap:wrap}
.search input[type=search]{
  flex:1;min-width:12rem;font:inherit;background:#fff;color:var(--ink);
  border:1.5px solid var(--line);border-radius:8px;padding:.8rem .9rem;
}
.btn{
  font:inherit;font-weight:700;background:var(--saffron);color:var(--ink);
  border:0;border-radius:8px;padding:.8rem 1.2rem;cursor:pointer;text-decoration:none;display:inline-block;
}
.btn:hover{background:var(--saffron-deep)}
.btn.ghost{background:none;color:var(--robe);border:1.5px solid var(--robe)}
.btn.ghost:hover{background:var(--robe);color:#fff}
.btn.danger{background:var(--error);color:#fff}
.btn.danger:hover{background:#7d0d20}

/* ---------- registration list ---------- */
.rows{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.row{background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:1rem}
.row.off{background:#F2ECED;color:var(--muted)}
.row .who{font-weight:700;font-size:1.2rem;word-break:break-word}
.row .mail{word-break:break-all}
.row .meta{color:var(--muted);font-size:1rem;margin:.3rem 0 .75rem;display:flex;flex-wrap:wrap;gap:.35rem .9rem}
.tag{display:inline-block;border-radius:999px;padding:.05rem .6rem;font-size:.95rem;font-weight:700}
.tag.cancelled{background:#FBE9EC;color:var(--error)}
.tag.here{background:#E7F3EB;color:var(--ok)}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.actions form{margin:0;display:flex;gap:.4rem;align-items:center}
.actions input[type=number]{
  font:inherit;width:4.5rem;background:#fff;color:var(--ink);
  border:1.5px solid var(--line);border-radius:8px;padding:.55rem .5rem;text-align:center;
}
.actions .small{font-size:1rem;padding:.55rem .9rem}
.empty{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- door check-in ---------- */
.counter{
  position:sticky;top:0;z-index:2;background:var(--paper);
  border-bottom:1.5px solid var(--line);padding:.9rem 0 1rem;margin:0 0 1rem;
}
.counter .n{font-family:var(--display);font-weight:700;font-size:2.5rem;line-height:1}
.counter .k{color:var(--muted);font-size:1.05rem}
.door{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.door form{margin:0}
.door button{
  width:100%;display:flex;align-items:center;gap:.9rem;text-align:left;
  font:inherit;background:#fff;color:var(--ink);cursor:pointer;
  border:2px solid var(--line);border-radius:12px;padding:1rem 1.1rem;min-height:4.25rem;
}
.door button:hover{border-color:var(--robe)}
.door .mark{
  flex:0 0 2.4rem;height:2.4rem;border-radius:50%;border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700;color:transparent;
}
.door .name{font-weight:700;font-size:1.2rem;line-height:1.2;word-break:break-word}
.door .sub{color:var(--muted);font-size:1rem}
.door .here button{border-color:var(--ok);background:#EDF7F1}
.door .here .mark{background:var(--ok);border-color:var(--ok);color:#fff}

/* ---------- login and purge ---------- */
.narrow{max-width:26rem}
.field{margin-bottom:1.25rem}
label{display:block;font-weight:700;font-size:1.05rem;margin-bottom:.4rem}
input[type=password],input[type=text]{
  width:100%;font:inherit;background:#fff;color:var(--ink);
  border:1.5px solid var(--line);border-radius:8px;padding:.85rem .9rem;
}
.err{color:var(--error);font-weight:700;margin:0 0 1rem}
.warn{border-left:5px solid var(--error);background:#FBE9EC;padding:1rem 1.1rem;border-radius:0 8px 8px 0;margin:0 0 1.5rem}

@media (min-width:45rem){
  .row{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center}
  .row .actions{justify-content:flex-end}
}

/* ---------- ticket door ----------
   One payment can be several people, so a row counts up to a total instead of
   flipping a tick, and it has to stay readable at arm's length in a doorway. */
.tickets{gap:.85rem}
.tk{
  background:#fff;border:2px solid var(--line);border-radius:12px;padding:.9rem 1rem;
  display:grid;gap:.75rem;
}
.tk.partial{border-color:var(--saffron);background:#FFF9EC}
.tk.done{border-color:var(--ok);background:#EDF7F1}
.tk.blocked{border-color:var(--error);background:#FBE9EC}
.tk.stale{opacity:.55}
.tk-name{font-weight:700;font-size:1.15rem;line-height:1.25;word-break:break-word}
.tk-email{font-weight:400;color:var(--muted);font-size:1rem;word-break:break-all}
.tk-meta{color:var(--muted);font-size:.95rem;margin-top:.15rem;display:flex;flex-wrap:wrap;gap:.3rem .8rem;align-items:center}
/* The one number the person at the door is reading, so it is the one that is big. */
.tk-count{font-size:1.15rem;margin-top:.3rem}
.tk-count strong{font-family:var(--display);font-size:1.5rem;line-height:1}
.tk.done .tk-count{color:var(--ok)}
.tk.partial .tk-count{color:#8A5A00}
.tk-note{font-style:italic}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.95rem}
.tag.test{background:#ECE7E8;color:var(--muted)}
.tag.odd{background:#FFF1D2;color:#8A5A00}

.tk-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.tk-actions form{margin:0}
.btn.big{font-size:1.15rem;padding:.95rem 1.4rem;min-height:3.25rem}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn[aria-busy="true"]{opacity:.7}

/* Secondary on purpose: at a door you search by e-mail and admit; writing a name
   down is a nicety for whoever searches next, not part of the queue. */
.tk-name-form{display:flex;gap:.4rem;align-items:center;margin:0}
.tk-name-form input[type=text]{
  flex:1;min-width:7rem;max-width:16rem;font:inherit;font-size:.95rem;background:#fff;color:var(--muted);
  border:1.5px solid var(--line);border-radius:8px;padding:.45rem .6rem;width:auto;
}
.tk-name-form input[type=text]:focus{color:var(--ink)}
.tk-name-form .btn{font-size:.95rem;padding:.45rem .8rem}
.actions input.text-sm{width:9rem;font-size:1rem;padding:.55rem .6rem;text-align:left}

.flags{margin:0 0 1.75rem;padding-left:1.2rem;color:var(--muted)}
.flags li{margin-bottom:.4rem}
.flags strong{color:var(--ink)}

.upload{background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:1.1rem;margin-bottom:1.5rem}
.upload textarea{
  width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.95rem;
  background:#fff;color:var(--ink);border:1.5px solid var(--line);border-radius:8px;padding:.7rem;
}
.upload input[type=file]{font:inherit;font-size:1rem}

@media (min-width:45rem){
  .tk{grid-template-columns:1fr auto;align-items:center}
  .tk-actions{justify-content:flex-end}
  .tk-name-form{grid-column:1 / -1}
}