/* AARAIN digikorraldaja — application styles.
   All values come from brand.css. Do not hard-code colours or fonts here. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
}

h1, h2, h3 { letter-spacing: var(--track-tight); font-weight: 700; margin: 0; }

/* Anton is a heavy condensed display face: it earns its keep on the app name,
   big numbers and print headers, and would be unreadable as running text.
   Gruppo is thin and geometric, so it is used only for small capitalised
   labels. Everything actually read is Hind. */
.display { font-family: var(--font-display); font-weight: 400;
           letter-spacing: var(--track-display); text-transform: uppercase; }
.section-head h2 { font-family: var(--font-display); font-weight: 400;
           text-transform: uppercase; letter-spacing: .02em; font-size: var(--fs-lg); }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }

.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===========================================================================
   App shell
   =========================================================================== */

/* The title bar follows the Aarain look used elsewhere: a solid brand band
   with the logo block sitting flush at the left, not a white bar with a badge
   floating in it. Sage in the light, charcoal in the dark. */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--header-h);
  padding: 0 var(--sp-4) 0 0;
  padding-top: env(safe-area-inset-top);
  background: var(--brand-sage);
  color: #fff;
  border-bottom: 1px solid rgba(0,0,0,.10);
}
.topbar__logo {
  height: var(--header-h); width: auto; display: block; flex: none;
  border-radius: 0; margin-right: var(--sp-3); align-self: stretch;
  object-fit: cover;
}
.topbar__title {
  flex: 1 1 auto; min-width: 0; text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  font: inherit;
}
/* #ev-sub, not "any span inside": the location sits in a nested span, and
   making that a block too is what pushed the dates onto a line of their own
   and left the header looking lopsided. Location and dates belong on one
   line, ellipsised together if they ever run out of room. */
#ev-sub {
  display: flex; align-items: baseline; min-width: 0;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* The place name gives way first; the dates keep their full width. */
#ev-sub .ev-loc   { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#ev-sub .ev-dot   { flex: none; white-space: pre; }
#ev-sub .ev-dates { flex: none; }
/* A competition name can be long. Two lines on a phone, then ellipsis — and
   the whole header is tappable for the full name, location and dates. */
.topbar__title strong {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: var(--track-tight); line-height: 1.2;
}
@media (min-width: 560px) {
  .topbar__title strong { -webkit-line-clamp: 1; font-size: var(--fs-md); }
}
#ev-sub { font-size: var(--fs-xs); color: rgba(255,255,255,.82); line-height: 1.3; }

.iconbtn {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: var(--r);
  background: transparent; border: 1px solid transparent; cursor: pointer; color: var(--ink-2);
}
.iconbtn:hover { background: var(--bg); }
.topbar .iconbtn { color: #fff; }
.topbar .iconbtn:hover { background: rgba(255,255,255,.16); }
.topbar .sync { background: rgba(255,255,255,.18); color: #fff; }
.topbar .sync[data-state="offline"],
.topbar .sync[data-state="pending"],
.topbar .sync[data-state="error"] { background: rgba(0,0,0,.24); color: #fff; }
.iconbtn svg { width: 20px; height: 20px; }

:root[data-theme="dark"] .topbar { background: var(--brand-charcoal); border-bottom-color: var(--line); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topbar { background: var(--brand-charcoal); border-bottom-color: var(--line); }
}

/* Sync pill --------------------------------------------------------------- */
.sync {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 650; letter-spacing: .01em;
  background: var(--ok-bg); color: var(--ok); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
}
.sync .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sync[data-state="offline"] { background: var(--warn-bg); color: var(--warn); }
.sync[data-state="pending"] { background: var(--info-bg); color: var(--info); }
.sync[data-state="error"]   { background: var(--alert-bg); color: var(--alert); }
.sync[data-state="syncing"] .dot { animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .25; } }

/* On a phone the header is crowded: logo, a competition name that can be long,
   the sync state and the menu. When everything is fine the word "Synced" says
   nothing the green dot does not, so it steps aside and gives the name and
   dates the room. Anything that actually needs attention keeps its words. */
@media (max-width: 520px) {
  .sync[data-state="ok"] { padding: 0 8px; }
  .sync[data-state="ok"] span { display: none; }
}
/* No longer hidden on narrow phones: the location shortens with an ellipsis
   instead, so the dates stay complete and the line stays one line. */

/* Bottom navigation ------------------------------------------------------- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex; background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav button {
  flex: 1; min-height: var(--nav-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600;
  padding: 6px 2px;
}
.nav button svg { width: 22px; height: 22px; }
.nav button span { font-weight: 600; letter-spacing: .01em; }
.nav button[aria-current="true"] { color: var(--accent); }
.nav .badge {
  position: absolute; transform: translate(14px,-12px);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill);
  background: var(--alert); color: var(--surface); font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
}

.page { max-width: 1120px; margin: 0 auto; padding: var(--sp-4); }

/* ===========================================================================
   Common furniture
   =========================================================================== */

.section-head {
  display: flex; align-items: baseline; gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-3);
}
.section-head:first-child { margin-top: var(--sp-2); }
.section-head h2 { font-size: var(--fs-lg); }
.section-head .count { font-size: var(--fs-sm); color: var(--ink-3); font-weight: 600; }

.eyebrow {
  font-family: var(--font-head);
  font-size: var(--fs-xs); font-weight: 400; letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--ink-3);
}
.field > label, .lbl { font-family: var(--font-head); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}

.empty {
  padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--ink-3);
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg); font-size: var(--fs-sm);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--tap); padding: 0 18px;
  border-radius: var(--r); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink);
  font-weight: 650; font-size: var(--fs-sm); cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--ink-4); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--primary:hover { filter: brightness(1.08); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--accent); padding: 0 10px; }
.btn--sm { min-height: 34px; padding: 0 12px; font-size: var(--fs-xs); }
.btn--danger { color: var(--alert); border-color: var(--alert); background: transparent; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.fab {
  position: fixed; right: 16px; z-index: 44;
  bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); border: 0; cursor: pointer;
  box-shadow: var(--sh-3); display: grid; place-items: center;
}
.fab svg { width: 26px; height: 26px; }

/* Form fields ------------------------------------------------------------- */
.field { margin-bottom: var(--sp-4); }
.field > label, .lbl {
  display: block; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.input, select.input, textarea.input {
  width: 100%; min-height: var(--tap); padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--surface); color: var(--ink);
}
textarea.input { min-height: 88px; resize: vertical; line-height: 1.45; }
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.checkline { display: flex; align-items: center; gap: 10px; min-height: var(--tap); }
.checkline input { width: 20px; height: 20px; accent-color: var(--accent); }

/* Chips ------------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Filter bar: one swipeable row instead of five stacked ones, so the
   timetable itself is still on screen on a phone. */
.chips--filter {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; padding-bottom: 2px;
  scroll-snap-type: x proximity;
}
.chips--filter::-webkit-scrollbar { display: none; }
.chips--filter > .chip { flex: none; scroll-snap-align: start; }
.chips--filter > .sep { flex: none; width: 1px; background: var(--line); margin: 2px 4px; }
@media (min-width: 860px) { .chips--filter { flex-wrap: wrap; overflow: visible; } }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--bg); border: 1px solid var(--line);
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2);
  cursor: pointer; white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--brand-100); border-color: var(--brand-300); color: var(--brand-700); }
.chip--person { background: var(--brand-100); border-color: var(--brand-200); color: var(--brand-700); cursor: default; }
.chip--me { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip--gap { background: var(--alert-bg); border-color: transparent; color: var(--alert); }
.chip__x { border: 0; background: none; cursor: pointer; color: inherit; opacity: .6; padding: 0 0 0 2px; font-size: 14px; line-height: 1; }
.chip__x:hover { opacity: 1; }

/* Status pills ------------------------------------------------------------ */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .01em;
}
.pill--todo    { background: var(--bg); color: var(--ink-3); }
.pill--doing   { background: var(--warn-bg); color: var(--warn); }
.pill--done    { background: var(--ok-bg); color: var(--ok); }
.pill--blocked { background: var(--alert-bg); color: var(--alert); }
.pill--gap     { background: var(--alert-bg); color: var(--alert); }
.pill--now     { background: var(--accent); color: var(--on-accent); }
/* A duty that runs past midnight. Marked everywhere it appears, because
   "starts 21:00" without "until 02:00 the next day" is how a night shift gets
   quietly left off somebody's evening. */
.pill--night   { background: var(--brand-050); color: var(--brand-700); border: 1px solid var(--brand-300); }

/* ===========================================================================
   Task rows
   =========================================================================== */

.tasklist { display: flex; flex-direction: column; gap: var(--sp-2); }

.task {
  display: block; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
  cursor: pointer; box-shadow: var(--sh-1);
}
.task:hover { border-color: var(--line-strong); box-shadow: var(--sh-2); }
.task[data-status="done"] { opacity: .62; border-left-color: var(--ok); }
.task[data-status="doing"] { border-left-color: var(--warn); }
.task[data-status="blocked"] { border-left-color: var(--alert); }
.task[data-gap="1"] { border-left-color: var(--alert); background: var(--alert-bg); }
.task[data-now="1"] { border-left-color: var(--accent); box-shadow: 0 0 0 2px var(--brand-200); }

.task__top { display: flex; align-items: flex-start; gap: var(--sp-3); }
.task__time {
  flex: none; width: 62px; font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: var(--fs-sm); color: var(--ink);
}
.task__time small { display: block; font-weight: 500; font-size: var(--fs-xs); color: var(--ink-3); }
.task__body { flex: 1 1 auto; min-width: 0; }
.task__title { font-weight: 650; font-size: var(--fs-md); letter-spacing: var(--track-tight); }
.task[data-status="done"] .task__title { text-decoration: line-through; text-decoration-color: var(--ink-4); }
.task__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin-top: 5px; font-size: var(--fs-xs); color: var(--ink-3);
}
.task__zone { font-weight: 650; color: var(--brand-600); }
.task__progress {
  margin-top: 8px; height: 4px; border-radius: 2px; background: var(--line);
  overflow: hidden;
}
.task__progress i { display: block; height: 100%; background: var(--ok); border-radius: 2px; }

/* ===========================================================================
   Timetable
   =========================================================================== */

.daybar { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: var(--sp-3); }
.daybar button {
  flex: none; padding: 8px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-size: var(--fs-sm); font-weight: 650; cursor: pointer; color: var(--ink-2);
}
.daybar button[aria-current="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.daybar button small { display: block; font-weight: 500; font-size: 10px; opacity: .7; }
/* A day that has duties on it but falls outside the competition dates. It gets
   a tab like any other - hiding it is what made duties disappear - but it is
   marked, because it is usually a mistyped date. */
.daybar button[data-stray] { border-style: dashed; border-color: var(--warn); color: var(--warn); }
.daybar button[data-stray][aria-current="true"] { background: var(--warn); color: #fff; border-color: var(--warn); }
.daynote {
  background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn);
  border-radius: var(--r); padding: 10px 13px; font-size: var(--fs-sm);
  margin: 0 0 var(--sp-3);
}
.task__time--carried small { color: var(--warn); font-weight: 650; }

.timeline { position: relative; padding-left: 58px; }
.timeline__hour {
  position: relative; min-height: 54px; border-top: 1px solid var(--line);
  padding: 6px 0;
}
.timeline__hour::before {
  content: attr(data-h);
  position: absolute; left: -58px; top: -9px; width: 48px; text-align: right;
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.timeline__hour[data-now="1"] { background: linear-gradient(90deg, var(--brand-050), transparent); }
.timeline__items { display: flex; flex-direction: column; gap: 6px; }

/* ===========================================================================
   Detail sheet
   =========================================================================== */

.sheet-backdrop {
  position: fixed; inset: 0; z-index: 60; background: var(--overlay);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  width: 100%; max-width: 680px; max-height: 92vh; overflow-y: auto;
  background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-3); padding: var(--sp-4) var(--sp-4) var(--sp-7);
  animation: rise .18s ease-out;
}
@keyframes rise { from { transform: translateY(24px); opacity: .4; } }
.sheet__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 0 auto var(--sp-3); }
.sheet__head { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.sheet__head h2 { flex: 1; font-size: var(--fs-xl); }
.sheet__section { margin-top: var(--sp-5); }
.sheet__section > .lbl { margin-bottom: var(--sp-2); }

.kv { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-sm); color: var(--ink-2); }
.kv b { color: var(--ink); font-weight: 650; }

.statusrow { display: flex; gap: 6px; }
.statusrow button {
  flex: 1; min-height: 40px; border-radius: var(--r);
  border: 1px solid var(--line-strong); background: var(--surface);
  font-size: var(--fs-xs); font-weight: 700; cursor: pointer; color: var(--ink-2);
}
.statusrow button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }

/* Checklist --------------------------------------------------------------- */
.checks { display: flex; flex-direction: column; gap: 2px; }
.checkitem {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 8px; border-radius: var(--r); cursor: pointer;
  min-height: var(--tap); border: 1px solid transparent;
}
.checkitem:hover { background: var(--bg); }
/* The tick and its text are one label so the whole line is tappable; the
   buttons sit outside it, or a click on "move up" would tick the box. */
.checkitem__tick { display: flex; align-items: flex-start; gap: 12px; flex: 1; cursor: pointer; min-width: 0; }
.checkitem input { width: 22px; height: 22px; margin-top: 1px; flex: none; accent-color: var(--ok); }
.checkitem__txt { flex: 1; font-size: var(--fs-sm); word-break: break-word; }
.checkitem small { display: block; color: var(--ink-4); font-size: var(--fs-xs); margin-top: 2px; }
.checkitem[data-done="1"] .checkitem__txt { text-decoration: line-through; color: var(--ink-3); }

.checkitem__acts { display: flex; gap: 2px; flex: none; align-items: center; }
.checkitem__acts .ck {
  opacity: 0; border: 0; background: none; color: var(--ink-3); cursor: pointer;
  width: 30px; height: 30px; border-radius: var(--r); font-size: 15px; line-height: 1;
}
.checkitem:hover .checkitem__acts .ck,
.checkitem:focus-within .checkitem__acts .ck { opacity: 1; }
.checkitem__acts .ck:hover { background: var(--line); color: var(--ink); }
.checkitem__acts .ck[disabled] { opacity: .18 !important; cursor: default; }
.checkitem__acts .ck--del:hover { background: var(--alert-bg); color: var(--alert); }
.checkitem__acts .ck--ok { color: var(--ok); }
.checkitem--editing { background: var(--bg); border-color: var(--line-strong); }
.checkitem .ckedit { flex: 1; }
/* On a touch screen there is no hover, so the controls are simply always there. */
@media (hover: none) {
  .checkitem__acts .ck { opacity: 1; }
}

.addrow { display: flex; gap: 6px; margin-top: var(--sp-2); }
.addrow .input { min-height: 40px; }
.addrow .btn { min-height: 40px; padding: 0 14px; }

/* Comments ---------------------------------------------------------------- */
.comment { padding: 10px 0; border-top: 1px solid var(--line); }
.comment:first-child { border-top: 0; }
.comment__head { display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-xs); }
.comment__who { font-weight: 700; }
.comment__when { color: var(--ink-4); }
.comment__body { font-size: var(--fs-sm); white-space: pre-wrap; margin-top: 3px; }

/* ===========================================================================
   People
   =========================================================================== */

.person {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border-bottom: 1px solid var(--line); cursor: pointer;
}
.person:last-child { border-bottom: 0; }
.avatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--brand-100); color: var(--brand-700);
  display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm);
}
.avatar--sup { background: var(--ink); color: var(--surface); }
.person__body { flex: 1; min-width: 0; }
.person__name { font-weight: 650; }
.person__sub { font-size: var(--fs-xs); color: var(--ink-3); }
.person__load { font-family: var(--font-display); font-size: var(--fs-md);
  color: var(--ink-3); text-align: right; min-width: 22px; }

.linkbox {
  font-family: var(--font-mono); font-size: 12px; word-break: break-all;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 12px; margin: var(--sp-2) 0;
}

/* NaviTabi ---------------------------------------------------------------- */
.navitabi {
  border: 1px solid var(--brand-300); background: var(--brand-050);
  border-radius: var(--r-lg); padding: var(--sp-4); margin-bottom: var(--sp-4);
}
:root[data-theme="dark"] .navitabi { background: var(--surface-2); }
.navitabi h3 { font-size: var(--fs-md); margin-bottom: 4px; }
.navitabi p { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--ink-2); }
.navitabi__qr {
  display: block; width: 176px; max-width: 100%; margin-top: var(--sp-3);
  padding: 8px; background: #fff; border-radius: var(--r); border: 1px solid var(--line);
}
.navitabi__qr svg { display: block; width: 100%; height: auto; }
.navitabi__hint { margin: 8px 0 0 !important; font-size: var(--fs-xs); color: var(--ink-3); }

/* One group per competition day: the flags move overnight, so each day gets
   its own link and its own QR, side by side where there is room. */
.ntdays {
  display: grid; gap: var(--sp-3); margin-top: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.ntday {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--sp-3);
}
.ntday__h {
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px;
}
.ntday .navitabi__qr { margin: 6px 0 8px; width: 100%; }

/* Discard confirmation ---------------------------------------------------- */
.confirm {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: var(--overlay); padding: var(--sp-4);
}
.confirm__box {
  background: var(--surface); border-radius: var(--r-lg); padding: var(--sp-4);
  max-width: 380px; box-shadow: var(--sh-3);
}
.confirm__box h3 { font-size: var(--fs-md); margin-bottom: 6px; }
.confirm__box p { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--ink-2); }
.btn--danger { background: var(--alert-bg); color: var(--alert); border-color: var(--alert); }

/* Links inside comments -------------------------------------------------- */
.lnk { color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
       word-break: break-word; }
.lnk--flag { font-family: var(--font-mono); font-size: .92em; }

/* Reactions -------------------------------------------------------------- */
.reacts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; align-items: center; }
.react {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 28px; padding: 2px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: var(--fs-sm); cursor: pointer; line-height: 1;
}
.react b { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); }
.react:hover { border-color: var(--line-strong); }
.react--mine { background: var(--accent-wash); border-color: var(--accent-soft); }
.react--mine b { color: var(--accent); }
.react--add { color: var(--ink-4); font-weight: 700; padding: 2px 11px; }
.reactpick { display: inline-flex; gap: 4px; padding: 2px 4px; margin-left: 2px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); box-shadow: var(--sh-2); }
.navitabi__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.colophon {
  text-align: center; color: var(--ink-4); font-size: var(--fs-xs);
  margin: 28px 0 0; line-height: 1.7;
}

/* Sign-in ---------------------------------------------------------------- */
.codeinput {
  font-family: var(--font-mono); font-size: 20px; letter-spacing: .16em;
  text-align: center; text-transform: uppercase;
}
.loginerr {
  background: var(--alert-bg); border: 1px solid var(--alert); color: var(--alert);
  padding: 10px 12px; border-radius: var(--r); margin-bottom: 14px;
  font-size: var(--fs-sm); font-weight: 600;
}

/* Address-book suggestions ------------------------------------------------ */
.sugg { margin-top: 4px; }
.sugg__item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface-2); margin-top: 4px;
}
.sugg__item:hover { border-color: var(--accent-soft); background: var(--accent-wash); }
.sugg__item b { display: block; font-size: var(--fs-sm); }
.sugg__item small { color: var(--ink-3); font-size: var(--fs-xs); }

/* Codes ------------------------------------------------------------------- */
.codebox {
  font-family: var(--font-mono); font-size: 19px; letter-spacing: .14em;
  text-align: center; padding: 12px; border-radius: var(--r);
  background: var(--accent-wash); border: 1px solid var(--accent-soft); color: var(--ink);
}

/* Permission list --------------------------------------------------------- */
.permlist { display: flex; flex-direction: column; gap: 2px; }
.permrow {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  padding: 9px 8px; border-radius: var(--r); min-height: var(--tap);
}
.permrow:hover { background: var(--bg); }
.permrow input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--accent); }
.permrow b { display: block; font-size: var(--fs-sm); font-weight: 650; }
.permrow small { color: var(--ink-3); font-size: var(--fs-xs); }
.hint { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--ink-3); }
.person__contact { font-size: var(--fs-xs); margin-top: 2px; }
.person__contact .lnk { color: var(--accent); }

/* Stale-version bar ------------------------------------------------------ */
.stalebar {
  position: fixed; left: 0; right: 0; z-index: 90;
  top: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 14px; background: var(--warn-bg); color: var(--warn);
  font-size: var(--fs-sm); font-weight: 600; border-bottom: 1px solid var(--warn);
  flex-wrap: wrap; text-align: center;
}

/* NaviTabi: the small persistent strip ------------------------------------ */
.ntstrip {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px; margin-bottom: var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); cursor: pointer; text-align: left;
  min-height: 42px; color: var(--ink-2);
}
.ntstrip:hover { border-color: var(--accent-soft); background: var(--accent-wash); }
.ntstrip__flag { font-size: 15px; }
.ntstrip__t { flex: 1; font-size: var(--fs-sm); font-weight: 600; }
.ntstrip__go { font-size: var(--fs-xs); font-weight: 700; color: var(--accent); }
.navitabi { position: relative; }
.navitabi__x {
  position: absolute; top: 6px; right: 6px;
  width: 34px; height: 34px; border: 0; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--ink-3); border-radius: var(--r);
}
.navitabi__x:hover { background: rgba(0,0,0,.06); color: var(--ink); }

/* First-run introduction --------------------------------------------------- */
.intro { text-align: center; padding: var(--sp-3) var(--sp-2) 0; }
.intro__icon { font-size: 40px; line-height: 1; margin-bottom: var(--sp-3); }
.intro__t {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: var(--fs-xl); letter-spacing: .02em; margin-bottom: var(--sp-2);
}
.intro__b {
  font-size: var(--fs-md); color: var(--ink-2); margin: 0 auto var(--sp-5);
  max-width: 34em; line-height: 1.55;
}
.introdots { display: flex; justify-content: center; gap: 6px; margin-bottom: var(--sp-4); }
.introdot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.introdot--on { background: var(--accent); width: 20px; border-radius: var(--r-pill); }
.intro__nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.intro__nav .btn--primary { flex: 1; }
.intro__skip {
  display: block; margin: var(--sp-4) auto 0; padding: 8px 14px;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-3); font-size: var(--fs-sm); text-decoration: underline;
}
.intro__skip:hover { color: var(--ink); }

/* Add-to-home-screen instructions ----------------------------------------- */
.install {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface-2); padding: 14px; text-align: left;
}
.install__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.install__dev { font-weight: 700; font-size: var(--fs-sm); }
.install__guess { font-size: var(--fs-xs); color: var(--ink-4); }
.install__note {
  margin: 8px 0 0; padding: 8px 10px; border-radius: var(--r-xs);
  background: var(--warn-bg); color: var(--warn);
  font-size: var(--fs-xs); font-weight: 600;
}
.install__steps { margin: 10px 0 0; padding-left: 20px; font-size: var(--fs-sm); color: var(--ink-2); }
.install__steps li { margin: 5px 0; }
.install__why { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--ink-3); }
.install__pick { margin-top: 12px; align-items: center; }
.install__other { font-size: var(--fs-xs); color: var(--ink-3); margin-right: 2px; }
.intro__extra { margin: 0 0 var(--sp-4); text-align: left; }

/* Toast ------------------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 80;
  bottom: calc(var(--nav-h) + 20px + env(safe-area-inset-bottom));
  background: var(--ink); color: var(--surface);
  padding: 11px 18px; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; box-shadow: var(--sh-3);
  max-width: 90vw; text-align: center;
}

/* ===========================================================================
   Wider screens
   =========================================================================== */

@media (min-width: 860px) {
  body { padding-bottom: 0; }
  .nav {
    position: sticky; top: var(--header-h); bottom: auto;
    border-top: 0; border-bottom: 1px solid var(--line);
    justify-content: center; gap: var(--sp-2); padding: 0 var(--sp-4);
  }
  .nav button {
    flex: 0 0 auto; flex-direction: row; gap: 8px; min-height: 48px;
    padding: 0 16px; font-size: var(--fs-sm); border-bottom: 2px solid transparent;
  }
  .nav button[aria-current="true"] { border-bottom-color: var(--accent); }
  .nav .badge { position: static; transform: none; }
  .fab { bottom: 28px; right: 28px; }
  .sheet-backdrop { align-items: center; }
  .sheet { border-radius: var(--r-xl); max-height: 86vh; }
  .page { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
}

/* ===========================================================================
   Print — duty sheets to pin up in the arena tent
   =========================================================================== */

/* ===========================================================================
   The print view
   ---------------------------------------------------------------------------
   Shown inside the app rather than in a second window, because a home-screen
   app has no tabs and no back button — the old print window could only be
   escaped by force-quitting.
   =========================================================================== */
#printroot:empty { display: none; }
#printroot {
  position: fixed; inset: 0; z-index: 80; overflow: auto;
  background: #fff; color: #000;
}
.pbar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding-top: calc(var(--sp-3) + env(safe-area-inset-top));
}
.pbar__hint { font-size: var(--fs-xs); color: var(--ink-3); }
.pbody { padding: var(--sp-4); max-width: 210mm; margin: 0 auto; }
/* While the print view is open the app underneath must not scroll away. */
body.is-printing { overflow: hidden; }

@media print {
  /* Only the sheets go on paper. Everything else — including the toolbar that
     gets you back — stays on screen. */
  body.is-printing > *:not(#printroot) { display: none !important; }
  #printroot { position: static; overflow: visible; }
  .pbar { display: none !important; }
  .pbody { padding: 0; max-width: none; }

  .topbar, .nav, .fab, .sheet-backdrop, .no-print, .toast { display: none !important; }
  body { background: #fff; color: #000; padding: 0; font-size: 11pt; }
  .page { max-width: none; padding: 0; }
  .card, .task { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  .print-sheet { break-after: page; padding-bottom: 12mm; }
  .print-sheet:last-child { break-after: auto; }
  .print-head { display: flex; align-items: center; gap: 10px; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 10px; }
  .print-head img { height: 22px; }
  .checkitem input { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border: 1.5px solid #000; border-radius: 2px; }
  a { color: #000; text-decoration: none; }
}
.print-only { display: none; }
@media print { .print-only { display: block; } }

/* ===========================================================================
   Timetable as a real schedule (tablets and computers)
   ---------------------------------------------------------------------------
   A start time on its own is not a schedule. Here a duty is drawn as long as
   it actually lasts, and duties happening at the same time stand side by side
   instead of in a queue — which is the only way to see, at a glance, that six
   people are needed at nine and nobody at eleven.
   =========================================================================== */

.tgrid { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); }
.tgrid__hours { flex: none; width: 52px; }
.tgrid__h {
  position: relative; font-size: var(--fs-xs); color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.tgrid__h span { position: absolute; top: -7px; right: 0; }
.tgrid__area { position: relative; flex: 1; min-width: 0; }
.tgrid__lines { position: absolute; inset: 0; }
.tgrid__line { border-top: 1px solid var(--line); }
.tgrid__line span { display: none; }

.tev {
  position: absolute; overflow: hidden; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent-soft);
  border-radius: var(--r); padding: 5px 8px;
  display: flex; flex-direction: column; gap: 1px;
  font: inherit; color: inherit;
  box-shadow: var(--sh-1);
}
.tev:hover { border-color: var(--accent); z-index: 3; box-shadow: var(--sh-2); }
.tev__t { font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tev__n { font-size: var(--fs-sm); font-weight: 650; line-height: 1.2;
          overflow: hidden; text-overflow: ellipsis; }
.tev__m { font-size: var(--fs-xs); color: var(--ink-3); overflow: hidden; }
.tev__gap { color: var(--alert); font-style: normal; font-weight: 650; }
.tev[data-small="1"] { flex-direction: row; align-items: baseline; gap: 6px; padding: 2px 8px; }
.tev[data-small="1"] .tev__t { flex: none; }
.tev[data-small="1"] .tev__n { white-space: nowrap; }
.tev[data-gap="1"]   { border-left-color: var(--alert); background: var(--alert-bg); }
.tev[data-status="done"] { opacity: .62; border-left-color: var(--ok); }
.tev[data-now="1"]   { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash); }

.tnow { position: absolute; left: 0; right: 0; border-top: 2px solid var(--alert); z-index: 4; }
.tnow span {
  position: absolute; top: -9px; left: -50px; font-size: var(--fs-xs);
  color: #fff; background: var(--alert); border-radius: var(--r-pill); padding: 1px 6px;
  font-variant-numeric: tabular-nums;
}

/* Duties that run past midnight, in their own lane above the hours — the way
   a calendar keeps all-day events out of the grid. A twelve-hour night watch
   drawn to scale would otherwise make the day three screens tall. */
.tlane { display: flex; flex-direction: column; gap: 4px; margin: 0 0 var(--sp-3) 60px; }
.tlane__ev {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: var(--brand-050); border: 1px solid var(--brand-300);
  border-left: 3px solid var(--brand-600);
  border-radius: var(--r); padding: 7px 10px;
}
.tlane__ev b { font-size: var(--fs-sm); font-weight: 650; }
.tlane__ev span { font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tlane__ev.is-gap { border-left-color: var(--alert); }
.tlane__ev:hover { border-color: var(--accent); }

/* How long a duty lasts, said in words where a bar will not fit. */
.pill--len { background: var(--bg); color: var(--ink-3); }

/* The duty you have just saved, so the eye finds it again. */
.task--just, .tev.task--just {
  animation: justsaved 2.2s ease-out;
}
@keyframes justsaved {
  0%, 55% { box-shadow: 0 0 0 3px var(--accent-soft); }
  100%    { box-shadow: none; }
}

@media print {
  .tgrid, .tlane, .tnow { display: none !important; }
}