/* The tracking page, dressed like the shop and the Designer: cream paper, ink, mint, Anton headings
   and Inter text. Same colors and fonts as apps/designer/public/designer.css; change both together. */

@font-face {
  font-family: "Anton";
  src: url("/static/fonts/anton.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #141414;
  --muted: #5c574d;
  --line: #d8d0bf;
  --cream: #f4efe4;
  --paper: #fbf8f2;
  --charcoal: #1a1a1a;
  --mint: #8edcbc;
  --mint-deep: #1e7a57;
  --mint-soft: #e3f5ec;
  --red: #b3261e;
  --red-soft: #fbe5e3;
  --display: "Anton", Impact, "Arial Narrow", sans-serif;
  --text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Film grain for the dark header, and a torn paper edge under it (the shop's hero has both). */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='16' viewBox='0 0 120 16'%3E%3Cpath d='M0 16V9l6-3 5 4 6-5 7 4 6-5 6 4 5-2 6 5 6-4 7 2 6-5 6 4 7-2 6 4 6-5 6 3 6-4 5 3 6-3 6 3v10z'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 16px/1.5 var(--text);
  color: var(--ink);
  background: var(--cream);
}
a { color: var(--mint-deep); }

header.site {
  position: relative;
  padding: 18px 16px 30px;
  text-align: center;
  background: var(--charcoal) var(--grain);
}
header.site::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 16px;
  background: var(--cream);
  -webkit-mask: var(--torn) repeat-x left bottom / 120px 16px;
  mask: var(--torn) repeat-x left bottom / 120px 16px;
}
/* A placeholder wordmark until KeepTix's logo files arrive. */
header.site .logo { display: inline-block; vertical-align: top; font: italic 700 26px/28px var(--display); color: #fff; }
main { max-width: 640px; margin: 0 auto; padding: 22px 16px 48px; }

h1, h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05; }
h1 { font-size: 44px; margin: 2px 0 4px; }
h2 { font-size: 24px; margin: 0 0 8px; }
.card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 5px 5px 0 var(--ink);
  padding: 20px;
  margin-bottom: 20px;
}
.message h1 { font-size: 36px; margin-bottom: 10px; }
.message p { margin: 0; }

/* The status: service, headline, when, progress, note, tracking number. */
.service { margin: 0; color: var(--muted); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.status.attention h1 { color: var(--red); }
.when { margin: 0; font-weight: 700; }

.steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 22px 0 4px; padding: 0; }
.steps li {
  position: relative;
  padding: 30px 2px 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
/* The line from the step before to this one. */
.steps li + li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: -50%;
  width: 100%;
  height: 4px;
  background: var(--line);
}
.steps .dot {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border: 3px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
}
.steps li.done::before, .steps li.now::before { background: var(--ink); }
.steps li.done .dot { background: var(--ink); border-color: var(--ink); }
.steps li.now { color: var(--ink); }
.steps li.now .dot { background: var(--mint); border-color: var(--ink); box-shadow: 0 0 0 4px var(--mint-soft); }
.attention .steps li.now .dot { background: var(--red-soft); border-color: var(--red); box-shadow: none; }

.note { margin: 20px 0 0; padding: 12px 14px; background: var(--mint-soft); border-left: 4px solid var(--mint-deep); border-radius: 8px; }
.note p { margin: 0; }
.note p + p { margin-top: 8px; }
.attention .note { background: var(--red-soft); border-left-color: var(--red); }

.number { margin: 18px 0 0; padding-top: 14px; border-top: 2px dashed var(--line); }
.number span { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.number code { font: 15px/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace; word-break: break-all; }

/* The carrier's scans, newest first. */
.activity { list-style: none; margin: 0; padding: 0; }
.activity li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px dashed var(--line); }
.activity li:first-child { border-top: 0; padding-top: 4px; }
.activity .at { font-size: 13px; color: var(--muted); }
.activity .at span { display: block; }
.activity .what strong { display: block; }
.activity .what span { display: block; font-size: 14px; color: var(--muted); }
.activity li:first-child .what strong { color: var(--mint-deep); }
.empty { margin: 0; color: var(--muted); }
.checked { margin: 14px 0 0; font-size: 13px; color: var(--muted); }

.help { text-align: center; color: var(--muted); font-size: 14px; margin: 4px 0 0; }
.flag { margin: 0 0 16px; padding: 10px 14px; border: 2px dashed var(--ink); border-radius: 8px; font-weight: 700; text-align: center; }

/* The sample page's links to each service and stage. */
.sample { margin-bottom: 20px; font-size: 14px; }
.sample p { margin: 0 0 8px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.pills a { padding: 4px 10px; border: 2px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.pills a.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

@media (max-width: 520px) {
  h1 { font-size: 36px; }
  .card { padding: 16px; box-shadow: 4px 4px 0 var(--ink); }
  .steps li { font-size: 11px; letter-spacing: 0.02em; }
  .activity li { grid-template-columns: 78px minmax(0, 1fr); gap: 10px; }
}