/* Ab Initio look & feel, from the HONEYCOMB design system pages in Confluence:
   "Ab Initio Color Palette" (primitive tokens), "Color" (semantic tokens) and "Typography" (Inter, R5 type scale). */
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* primitives (--ab-global-color-*) */
  --ab-global-color-white: #FFFFFF;
  --ab-global-color-steel-050: #F7F8F9;
  --ab-global-color-steel-100: #F0F1F2;
  --ab-global-color-steel-200: #DEE2E4;
  --ab-global-color-steel-300: #C7CDD1;
  --ab-global-color-steel-400: #A7AFB6;
  --ab-global-color-steel-500: #85919A;
  --ab-global-color-steel-700: #5A6166;
  --ab-global-color-steel-800: #434C53;
  --ab-global-color-steel-900: #30363B;
  --ab-global-color-blue-100: #EBF3FB;
  --ab-global-color-blue-200: #D1E4F6;
  --ab-global-color-blue-700: #135FB3;
  --ab-global-color-blue-900: #063375;
  --ab-global-color-pink-100: #FEEEF6;
  --ab-global-color-pink-700: #AE286C;
  --ab-global-color-pink-800: #8A1D59;
  --ab-global-color-green-100: #E6F6E8;
  --ab-global-color-green-500: #1DA633;
  --ab-global-color-green-700: #0C6F2E;
  --ab-global-color-orange-100: #FFF1DC;
  --ab-global-color-orange-400: #FC9700;
  --ab-global-color-orange-700: #974B00;
  --ab-global-color-red-100: #FFEFEF;
  --ab-global-color-red-600: #EC0000;
  --ab-global-color-red-700: #C30000;

  /* semantic (--ab-local-color-*) */
  --ab-local-color-text: var(--ab-global-color-steel-900);
  --ab-local-color-text-subtle: var(--ab-global-color-steel-700);
  --ab-local-color-text-placeholder: var(--ab-global-color-steel-500);
  --ab-local-color-text-on-primary: var(--ab-global-color-white);
  --ab-local-color-link: var(--ab-global-color-blue-700);
  --ab-local-color-link-hover: var(--ab-global-color-blue-900);
  --ab-local-color-bg: var(--ab-global-color-white);
  --ab-local-color-bg-2: var(--ab-global-color-steel-050);
  --ab-local-color-bg-3: var(--ab-global-color-steel-200);
  --ab-local-color-bg-selected: var(--ab-global-color-blue-200);
  --ab-local-color-bg-hover: rgba(0, 0, 0, .12);
  --ab-local-color-bg-success: var(--ab-global-color-green-100);
  --ab-local-color-bg-warning: var(--ab-global-color-orange-100);
  --ab-local-color-bg-error: var(--ab-global-color-red-100);
  --ab-local-color-border: var(--ab-global-color-steel-300);
  --ab-local-color-border-subtle: var(--ab-global-color-steel-200);
  --ab-local-color-outline-focus: var(--ab-global-color-blue-700);
  --ab-local-color-brand: var(--ab-global-color-pink-700);
  --ab-local-color-primary: var(--ab-global-color-blue-700);
  --ab-local-color-success: var(--ab-global-color-green-500);
  --ab-local-color-warning: var(--ab-global-color-orange-400);
  --ab-local-color-error: var(--ab-global-color-red-600);

  --font: "Inter", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 8px;
}

* { box-sizing: border-box; }
/* .ab-font-body-large (16/24): body text is larger than the 14px default since this is read on phones outdoors. */
body {
  margin: 0; font-family: var(--font); font-size: 16px; line-height: 24px; letter-spacing: .1px;
  background: var(--ab-local-color-bg-2); color: var(--ab-local-color-text);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ab-local-color-link); }
a:hover { color: var(--ab-local-color-link-hover); }
:focus-visible { outline: 2px solid var(--ab-local-color-outline-focus); outline-offset: 2px; }

header.top {
  background: var(--ab-local-color-bg); color: var(--ab-local-color-text);
  border-bottom: 3px solid var(--ab-local-color-brand);
  padding: 10px 16px; display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: 5;
}
/* Explicit width AND height (620:135): Safari otherwise sizes an <img> SVG flex item at its intrinsic width. */
header.top .logo { width: 101px; height: 22px; max-width: none; display: block; flex: 0 0 auto; }
@media (max-width: 400px) {
  header.top { padding: 8px 12px; gap: 10px; }
  header.top .logo { width: 83px; height: 18px; }
  header.top h1 { font-size: 14px; padding-left: 10px; }
  .timer { font-size: 14px; }
}
header.top h1 {
  /* .ab-font-heading-xsmall */
  font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: .15px; margin: 0;
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-left: 12px; border-left: 1px solid var(--ab-local-color-border-subtle);
}
main { max-width: 680px; margin: 0 auto; padding: 16px; }
main.wide { max-width: 1200px; }

.card {
  background: var(--ab-local-color-bg); border: 1px solid var(--ab-local-color-border-subtle);
  border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
}
/* .ab-font-heading (H2) / .ab-font-heading-xsmall (H4) */
.card h2 { margin: 0 0 8px; font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: .25px; }
.card h3 { margin: 12px 0 4px; font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: .15px; }
/* .ab-font-body (14/22) */
.muted { color: var(--ab-local-color-text-subtle); font-size: 14px; line-height: 22px; }
label { display: block; font-weight: 500; margin: 12px 0 4px; font-size: 14px; line-height: 22px; }
input[type=text], input[type=tel], input[type=password], input[type=number], select, textarea {
  width: 100%; padding: 10px 12px; font: inherit; color: inherit;
  border: 1px solid var(--ab-local-color-border); border-radius: 4px; background: var(--ab-local-color-bg);
}
input::placeholder { color: var(--ab-local-color-text-placeholder); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ab-local-color-outline-focus); outline-offset: -1px; border-color: transparent; }

button, .btn {
  display: inline-block; font: inherit; font-weight: 500; font-size: 14px; line-height: 22px; letter-spacing: .1px;
  padding: 10px 16px; border-radius: 4px; border: 1px solid transparent;
  background: var(--ab-local-color-primary); color: var(--ab-local-color-text-on-primary);
  cursor: pointer; text-decoration: none; text-align: center;
}
button:hover, .btn:hover { background: var(--ab-global-color-blue-900); color: var(--ab-local-color-text-on-primary); }
button.secondary, .btn.secondary {
  background: var(--ab-local-color-bg); color: var(--ab-local-color-text); border-color: var(--ab-local-color-border);
}
button.secondary:hover, .btn.secondary:hover { background: var(--ab-global-color-steel-100); color: var(--ab-local-color-text); }
button.small { padding: 4px 10px; font-size: 13px; }
button.block { width: 100%; margin-top: 14px; padding: 12px 16px; font-size: 16px; }
button:disabled { opacity: .5; cursor: default; }
.error { color: var(--ab-global-color-red-700); font-weight: 500; margin-top: 8px; font-size: 14px; }

.teams { display: grid; gap: 8px; }
.team-opt {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 0;
  border: 1px solid var(--ab-local-color-border); border-radius: var(--radius); cursor: pointer;
  background: var(--ab-local-color-bg); font-weight: 400; font-size: 16px;
}
.team-opt input { display: none; }
.team-opt:hover { border-color: var(--ab-local-color-primary); }
.team-opt.sel { border: 2px solid var(--ab-local-color-primary); background: var(--ab-global-color-blue-100); padding: 9px 11px; }
.team-opt.taken { opacity: .45; cursor: not-allowed; }
.team-opt.taken:hover { border-color: var(--ab-local-color-border); }
.team-opt .emoji { font-size: 26px; }

.timer {
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: 16px; white-space: nowrap;
  color: var(--ab-local-color-brand);
}
.timer.late { color: var(--ab-global-color-red-700); }
.progress { display: flex; gap: 4px; margin: 6px 0 2px; }
.progress span { flex: 1; height: 6px; border-radius: 3px; background: var(--ab-local-color-bg-3); }
.progress span.done { background: var(--ab-local-color-success); }
.progress span.cur { background: var(--ab-local-color-brand); }
.stage-label {
  /* .ab-font-body-small, uppercase eyebrow in brand colour */
  text-transform: uppercase; letter-spacing: .08em; font-size: 12px; line-height: 20px;
  color: var(--ab-local-color-brand); font-weight: 600;
}
.ref-img { width: 100%; border-radius: var(--radius); margin-top: 8px; display: block; }
.preview { width: 100%; border-radius: var(--radius); margin-top: 10px; display: none; }

.pill { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 12px; line-height: 20px; font-weight: 600; }
.pill.pending { background: var(--ab-local-color-bg-warning); color: var(--ab-global-color-orange-700); }
.pill.approved { background: var(--ab-local-color-bg-success); color: var(--ab-global-color-green-700); }
.pill.rejected { background: var(--ab-local-color-bg-error); color: var(--ab-global-color-red-700); }

.history { display: grid; gap: 8px; }
.history .row { display: flex; gap: 10px; align-items: center; font-size: 14px; line-height: 22px; }
.history img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; }
.tabs { display: flex; gap: 8px; margin: 10px 0; }
.tabs button { flex: 1; }

table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 22px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--ab-local-color-border-subtle); vertical-align: top; }
th { font-size: 12px; line-height: 20px; color: var(--ab-local-color-text-subtle); font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

details summary { cursor: pointer; }
.big-done { text-align: center; font-size: 56px; line-height: 1.2; }
.center { text-align: center; }
.flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

input[type=file] { width: 100%; font: inherit; font-size: 14px; color: var(--ab-local-color-text-subtle); }
input[type=file]::file-selector-button {
  font: inherit; font-weight: 500; margin-right: 12px; padding: 10px 16px; border-radius: 4px; cursor: pointer;
  background: var(--ab-local-color-bg); color: var(--ab-local-color-primary); border: 1px solid var(--ab-local-color-primary);
}
input[type=file]::file-selector-button:hover { background: var(--ab-global-color-blue-100); }