/* The tracker's own styles. tokens.css is a verbatim copy from ~/thematchlens-design and is never
   edited here: if a colour or a size is wrong, it is changed there and copied back. Nothing below
   introduces a colour, a font or a radius that the token file does not already define. */

*, *::before, *::after { box-sizing: border-box; }
body { font: var(--t-body); color: var(--ink-2); }
h1, h2, h3 { margin: 0; color: var(--ink); letter-spacing: var(--tracking-tight); }
h1 { font: var(--t-display-l); }
h2 { font: var(--t-h2); }
h3 { font: var(--t-h3); }
p { margin: 0 0 var(--s4); max-width: 66ch; }
button, input, select, textarea { font: inherit; color: inherit; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.label { font: var(--t-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3); }
.source { font: var(--t-source); color: var(--ink-3); }
.hidden { display: none !important; }
.has-token #start { display: none; }

/* Visible the moment it is focused, and out of the way until then. */
.skip {
  position: absolute; left: var(--s4); top: -60px; z-index: 70;
  background: var(--card); color: var(--stamp); border: 1px solid var(--stamp);
  padding: var(--s3) var(--s4); font: var(--t-data);
}
.skip:focus { top: var(--s3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }

/* ---------------------------------------------------------------- buttons and fields */

.btn {
  font: var(--t-data); padding: 10px var(--s4); border: 1px solid var(--rule-strong);
  background: var(--card); color: var(--ink); border-radius: var(--radius-button); cursor: pointer;
}
.btn:hover { border-color: var(--ink-3); }
.btn-primary { background: var(--stamp); border-color: var(--stamp); color: #fff; font-weight: 600; }
.btn-primary:hover { border-color: var(--stamp); opacity: 0.92; }
.btn-quiet { border-color: transparent; background: none; color: var(--stamp); padding: 6px var(--s2); }
.btn-quiet:hover { border-color: var(--rule); }
.btn:disabled { opacity: 0.5; cursor: default; }

input[type="text"], input[type="email"], input[type="date"], input[type="number"], select, textarea {
  font: var(--t-data); padding: 10px var(--s3); background: var(--card);
  border: 1px solid var(--rule-strong); border-radius: var(--radius); color: var(--ink); width: 100%;
}
textarea { resize: vertical; min-height: 66px; line-height: 1.5; }

/* ------------------------------------------------------------------------- chrome */

.top { background: var(--card); border-bottom: 1px solid var(--rule); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding-top: var(--s4); padding-bottom: var(--s4); }
.brand { font: var(--t-h3); color: var(--ink); letter-spacing: var(--tracking-tight); }
.brand span { color: var(--stamp); }
.top-actions { display: flex; align-items: center; gap: var(--s2); }
a.brand { text-decoration: none; }

.mainnav { display: flex; gap: var(--s4); flex-wrap: wrap; }
.mainnav a {
  font: var(--t-data); color: var(--ink-2); text-decoration: none;
  padding: var(--s2) 0; border-bottom: 2px solid transparent;
}
.mainnav a:hover { color: var(--ink); }
.mainnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--stamp); font-weight: 600; }

/* The coming-soon cards and the dashboard tiles share a shape: a bordered box with a label, a
   number or a short title, and one sentence. Nothing here is a claim we cannot keep. */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s4); }
.tile { background: var(--card); border: 1px solid var(--rule); padding: var(--s5); }
.tile .n { font: var(--t-display-l); color: var(--ink); letter-spacing: var(--tracking-tight); display: block; }
.tile .t { font: var(--t-source); color: var(--ink-3); display: block; margin-top: var(--s2); }
.tile h3 { margin-bottom: var(--s3); }
.tile p { margin: 0; font: var(--t-body); color: var(--ink-2); }
.when { font: var(--t-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--stamp); border: 1px solid var(--stamp); background: var(--stamp-wash);
  padding: 2px var(--s2); display: inline-block; margin-bottom: var(--s3); }
.when-later { color: var(--ink-3); border-color: var(--rule-strong); background: none; }

@media (max-width: 720px) {
  .top .wrap { flex-wrap: wrap; }
  .mainnav { order: 3; width: 100%; gap: var(--s4); border-top: 1px solid var(--rule); padding-top: var(--s2); }
}

/* The phase strip. Looking at a phase never changes which one you are in. */
.phases { border-bottom: 1px solid var(--rule); background: var(--card); }
.phases .wrap { display: flex; gap: 0; overflow-x: auto; }
.phase-tab {
  flex: none; padding: var(--s3) var(--s4); border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--ink-3); cursor: pointer; font: var(--t-data); white-space: nowrap;
}
.phase-tab[aria-current="true"] { color: var(--ink); border-bottom-color: var(--stamp); font-weight: 600; }
.phase-tab .n { font: var(--t-label); letter-spacing: var(--tracking-label); margin-right: var(--s2); color: var(--ink-3); }
.phase-tab.is-now { color: var(--stamp); }

.banner {
  background: var(--stamp-wash); border-bottom: 1px solid var(--rule);
  padding: var(--s3) 0; font: var(--t-data); color: var(--ink-2);
}
.banner .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }

/* --------------------------------------------------------------------- the headline */

.headline { padding: var(--s7) 0 var(--s5); }
.headline .count { font: var(--t-display-l); color: var(--ink); letter-spacing: var(--tracking-tight); }
.headline .sub { font: var(--t-body-l); color: var(--ink-2); margin-top: var(--s2); }

.tabs { display: flex; gap: var(--s2); border-bottom: 1px solid var(--rule); margin-bottom: var(--s5); }
.tab {
  border: 0; background: none; padding: var(--s3) var(--s4); cursor: pointer;
  color: var(--ink-3); font: var(--t-data); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab[aria-current="true"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------------ the list */

.group { margin-bottom: var(--s6); }
.group-head { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s3); }
.group-head h3 { font: var(--t-h3); }
.group-head .n { font: var(--t-data); color: var(--ink-3); }
.group-toggle { border: 0; background: none; color: var(--stamp); cursor: pointer; font: var(--t-source); padding: 0; }

.card { background: var(--card); border: 1px solid var(--rule); margin-bottom: -1px; }
.card:hover { border-color: var(--rule-strong); position: relative; z-index: 1; }
.card-main { display: grid; grid-template-columns: 1fr auto; gap: var(--s4); padding: var(--s4); align-items: start; }
.card-name { font: var(--t-h3); color: var(--ink); }
.card-meta { font: var(--t-source); color: var(--ink-3); margin-top: var(--s1); }
.card-controls { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; justify-content: flex-end; }
.card-controls select, .card-controls input { width: auto; min-width: 150px; }

.state { font: var(--t-label); letter-spacing: var(--tracking-label); text-transform: uppercase; padding: 3px var(--s2); border: 1px solid; display: inline-block; }
.state-verified { color: var(--stamp); border-color: var(--stamp); background: var(--stamp-wash); }
.state-none { color: var(--ink-3); border-color: var(--rule-strong); }

.detail { border-top: 1px dashed var(--rule); padding: var(--s4); background: var(--paper); }
.field { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.field:last-child { border-bottom: 0; }
.field-label { display: flex; align-items: baseline; gap: var(--s3); }
.field-value { font: var(--t-data); color: var(--ink); }
blockquote {
  margin: var(--s2) 0 var(--s2); padding-left: var(--s3); border-left: 2px solid var(--rule-strong);
  font: var(--t-body); color: var(--ink-2);
}
.cite { display: flex; gap: var(--s3); flex-wrap: wrap; font: var(--t-source); color: var(--ink-3); }
.disagrees { color: var(--strike); border: 1px solid var(--strike); background: var(--strike-wash); padding: 2px var(--s2); font: var(--t-label); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.note-row { padding: 0 var(--s4) var(--s4); }

/* ------------------------------------------------------------------------- add, link, outcome */

.panel { background: var(--card); border: 1px solid var(--rule); padding: var(--s5); margin-bottom: var(--s5); }
.result { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.result:last-child { border-bottom: 0; }
.linkbox { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.linkbox input { font: var(--t-source); }
.warn { border-left: 3px solid var(--strike); padding-left: var(--s4); color: var(--ink-2); }
.q { margin-bottom: var(--s6); }
.q h3 { margin-bottom: var(--s3); }
.choice { display: flex; gap: var(--s3); flex-wrap: wrap; }
.choice .btn[aria-pressed="true"] { border-color: var(--stamp); background: var(--stamp-wash); color: var(--stamp); font-weight: 600; }

.toast {
  position: fixed; left: 50%; bottom: var(--s5); transform: translateX(-50%);
  background: var(--ink); color: var(--paper); padding: var(--s3) var(--s5);
  font: var(--t-data); border-radius: var(--radius-button); z-index: 60;
}

footer { border-top: 1px solid var(--rule); margin-top: var(--s8); padding: var(--s5) 0 var(--s8); }

@media (max-width: 720px) {
  :root { --gutter: 16px; }
  h1 { font: var(--t-h2); }
  .card-main { grid-template-columns: 1fr; }
  .card-controls { justify-content: flex-start; }
  .card-controls select, .card-controls input { min-width: 0; flex: 1 1 140px; }
}