/* The admin layer.
 *
 * Every colour is a token from tokens.css (guardrail 10) — there is not a raw
 * value in this file and `scripts/check.js` fails the build if one appears.
 *
 * Two things drive the layout: the design's slim `--ink` band at the top, and
 * the fact that an organiser reads this on a phone in a dust storm as often as
 * on a laptop. Every control clears the `--tap-min` floor, the two-column split
 * collapses to one below the phone breakpoint, and nothing scrolls sideways.
 */

/* --- the band ------------------------------------------------------------- */

.aband {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}

.aband-who {
  font-size: var(--size-small);
  font-weight: var(--weight-semibold);
  min-width: 0;
}

.aband-out {
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-slot);
  background: none;
  color: var(--bg);
  font: inherit;
  font-size: var(--size-small);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.aband-out:hover { background: var(--soft); }

/* --- tabs ----------------------------------------------------------------- */

.atabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-5);
}

.atab {
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--soft);
  font: inherit;
  font-size: var(--size-small);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.atab.is-on { color: var(--ink); border-bottom-color: var(--ink); }

/* --- signing in ----------------------------------------------------------- */

.asignin { max-width: 460px; }
.asignin .display { margin: 0 0 var(--space-2); }
.asignin-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  margin: var(--space-4) 0;
}

.aerror {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-slot);
  background: var(--gap-bg);
  color: var(--gap);
  font-size: var(--size-small);
  font-weight: var(--weight-semibold);
}

/* --- the shared vocabulary ------------------------------------------------- */

.kicker {
  font-size: var(--size-kicker);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--soft);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
  /* Air above as well as below: a kicker that follows a field — the "or
   * somebody new" divider in the assign sheet — otherwise sits on the input. */
  margin: var(--space-4) 0 var(--space-3);
}
.apanel > .kicker:first-child { margin-top: 0; }
.kicker--gap { color: var(--gap); }

.apanel { margin-bottom: var(--space-6); }
.ahead { margin-bottom: var(--space-5); }
.ahead .display { margin: 0 0 var(--space-1); }
.ahead .lede { margin: 0 0 var(--space-3); color: var(--soft); font-size: var(--size-small); }

.anote { color: var(--soft); font-size: var(--size-micro); margin: 0; }
.is-gap { color: var(--gap); font-weight: var(--weight-semibold); }
.is-live { color: var(--live); font-weight: var(--weight-semibold); }
.is-soon { color: var(--soon); font-weight: var(--weight-semibold); }

.ameter {
  height: 11px;
  border-radius: var(--radius-pill);
  background: var(--card);
  overflow: hidden;
}
.ameter-fill { height: 100%; border-radius: var(--radius-pill); }

.afield { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.afield-label { font-size: var(--size-micro); color: var(--soft); }

.ainput {
  min-height: var(--tap-min);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  /* 16px so iOS does not zoom the page when a field takes focus. */
  font-size: var(--size-body);
}

.aform {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  margin-top: var(--space-3);
}
.aform .afield { flex: 1 1 170px; }
.aform-row { align-items: center; }

.achips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* Rows of chips that stand on their own — the territory and day pickers — need
 * air under them, which chips inside a person row do not. */
.astack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.aspaced { margin-bottom: var(--space-5); }

.asetting {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(120px, 1fr) auto;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--size-small);
}
.asetting-name { display: flex; flex-direction: column; min-width: 0; }

@media (max-width: 560px) {
  .asetting { grid-template-columns: 1fr auto; }
  .asetting-name { grid-column: 1 / -1; }
}

.achip {
  min-height: 42px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--soft);
  font: inherit;
  font-size: var(--size-small);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  white-space: nowrap;
}
.achip.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.achip.is-premium { background: var(--t-prem-t); color: var(--t-prem-deep); border-color: var(--t-prem); }
.achip.is-off { opacity: 0.5; text-decoration: line-through; }

.askeleton {
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--card);
  color: var(--soft);
  animation: breathe 1.6s ease-in-out infinite;
}

/* --- lists ---------------------------------------------------------------- */

.alist { display: flex; flex-direction: column; gap: var(--space-1); }

.arow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  min-height: 46px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--size-small);
  text-decoration: none;
}
.arow-main { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 0; }
.arow-right { font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }

.agap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  align-items: center;
  min-height: 46px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-slot);
  background: var(--gap-bg);
  color: var(--ink);
  font-size: var(--size-small);
  text-decoration: none;
  line-height: 1.35;
}
.agap-label { flex: 1 1 60%; min-width: 0; }
.agap-flag { font-size: var(--size-micro); font-weight: var(--weight-semibold); color: var(--gap); }

.abadge {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--t-prem-t);
  color: var(--t-prem-deep);
  font-size: var(--size-micro);
  font-weight: var(--weight-bold);
}

/* --- territory boxes ------------------------------------------------------- */

.aterr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: var(--space-3);
}

.aterr {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 112px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
}
.aterr-head { display: flex; align-items: center; gap: var(--space-2); }
.aterr-emoji { font-size: 18px; }
.aterr-name { font-family: var(--font-display); font-size: var(--size-h2); }
.aterr-times { flex: 1; font-size: var(--size-micro); color: var(--soft); line-height: 1.35; }
.aterr-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--size-micro);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

/* --- people --------------------------------------------------------------- */

.acols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-6);
}

.aperson { border-bottom: 1px solid var(--line); }

.aperson-head {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-2) 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--size-small);
  text-align: left;
  cursor: pointer;
}
.aperson-caret { color: var(--soft); width: 12px; flex: none; }
.aperson-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.aperson-name { font-weight: var(--weight-medium); }
.aperson-right { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.aperson-weight { font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
.aperson-dues { font-size: var(--size-micro); font-weight: var(--weight-semibold); }

.aperson-more {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  margin: 0 0 var(--space-3);
  border-radius: var(--radius-slot);
  background: var(--card);
}

.afilters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-3);
  max-width: 560px;
  margin-bottom: var(--space-5);
}

/* --- the seat grid --------------------------------------------------------- */

.ashift {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}
.ashift-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
  margin-bottom: var(--space-2);
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
}

.aseats { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.aseat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: var(--tap-min);
  min-width: 108px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-slot);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: var(--size-micro);
  text-align: left;
  cursor: pointer;
}
.aseat-key { font-weight: var(--weight-semibold); }
.aseat-name { font-size: var(--size-micro); }
.aseat.is-closed { border-style: dashed; color: var(--soft); background: var(--card); }

.ashift-days { display: flex; flex-direction: column; gap: var(--space-3); }
.ashift-day { display: flex; flex-direction: column; gap: var(--space-1); }

.astat { display: flex; flex-direction: column; }
.astat-value { font-family: var(--font-display); font-size: var(--size-h2); }
.astat-label { font-size: var(--size-micro); color: var(--soft); }

@media (max-width: 768px) {
  .acols { grid-template-columns: 1fr; gap: var(--space-5); }
  .aterr-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}