/* ---------------------------------------------------------------------------
   The dashboard. Same materials as the participant side, denser: mono for
   every number, hairlines instead of boxes, and two chart colours that carry
   pipeline identity consistently wherever a number is drawn.

   Chart colours are validated for colour-vision deficiency and contrast
   against both surfaces; identity is never colour alone - every mark is
   labelled too.
--------------------------------------------------------------------------- */

:root {
  --p1: #2f62b0;
  --p2: #9a6b12;
  --tie: #9aa2ab;
}
@media (prefers-color-scheme: dark) {
  :root {
    --p1: #5a8fd6;
    --p2: #b4842a;
    --tie: #78818b;
  }
}

.wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- bar and tabs ------------------------------------------------------- */

.admin-bar {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 10;
  padding-top: env(safe-area-inset-top, 0px);
}
.admin-bar-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: .7rem 20px;
}
.wordmark {
  font-family: var(--mono);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.wordmark span { color: var(--ink-faint); }

.tabs {
  display: flex;
  gap: .15rem;
  flex-wrap: wrap;
  margin-right: auto;
}
.tab {
  font-family: var(--ui);
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: .35rem .6rem .3rem;
  cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* --- views ------------------------------------------------------------- */

.view { padding: 1.8rem 0 3.5rem; }
.view > h1 {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: .4rem 0 1.4rem;
}

.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem 1.25rem;
  margin: 0 0 1.1rem;
}
.card > h2 {
  font-size: .9375rem;
  font-weight: 700;
  margin: 0 0 .2rem;
}
.card > h2.subhead {
  margin-top: 1.9rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--rule-soft);
}
.card .note {
  font-size: .8125rem;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}

/* --- stat tiles: four plain numbers, no plot --------------------------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .8rem;
  margin: 0 0 1.1rem;
}
.tile {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .9rem 1rem 1rem;
}
.tile .num {
  display: block;
  font-family: var(--mono);
  font-size: 1.875rem;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.tile .lbl {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tile .sub {
  display: block;
  font-size: .8125rem;
  color: var(--ink-soft);
  margin-top: .3rem;
}

@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } }

/* --- legend ------------------------------------------------------------ */

.legend {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  font-size: .8125rem;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.swatch {
  display: inline-block;
  vertical-align: -1px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: 0 0 auto;
}
.swatch-p1 { background: var(--p1); }
.swatch-p2 { background: var(--p2); }
.swatch-tie { background: var(--tie); }

/* --- dot plot: two means on a fixed 1-5 scale -------------------------- */

.dotplot { margin: 0 0 .4rem; }
.dotplot-row { padding: .55rem 0 .9rem; }
.dotplot-row + .dotplot-row { border-top: 1px solid var(--rule-soft); }
.dotplot-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .875rem;
  font-weight: 500;
  margin: 0 0 .55rem;
}
/* The two means are labelled directly, so the dots never have to be decoded
   from the legend alone. */
.dot-values {
  display: flex;
  gap: .9rem;
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 400;
  color: var(--ink-soft);
}
.dot-values span { display: inline-flex; align-items: center; gap: .35rem; }
.track {
  position: relative;
  height: 20px;
  margin: 0 0 .2rem;
  border-right: 1px solid var(--rule-soft);
  /* The scale is 1 to 5 and says so; the ticks are the only grid. */
  background:
    linear-gradient(to right, var(--rule-soft) 0 1px, transparent 1px) repeat-x,
    linear-gradient(to bottom, transparent calc(50% - 1px), var(--rule-soft) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  background-size: 25% 100%, 100% 100%;
}
.dot {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  /* A surface ring keeps two nearly equal means readable where they overlap. */
  box-shadow: 0 0 0 2px var(--paper);
  transform: translate(-50%, -50%);
}
.dot-p1 { background: var(--p1); }
.dot-p2 { background: var(--p2); }
.scale-marks {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: .625rem;
  color: var(--ink-faint);
}

/* --- share bar --------------------------------------------------------- */

.share {
  display: flex;
  gap: 2px;
  height: 22px;
  margin: .5rem 0 .5rem;
}
.share > span {
  display: block;
  border-radius: 2px;
  min-width: 2px;
}
.share .seg-p1 { background: var(--p1); }
.share .seg-p2 { background: var(--p2); }
.share .seg-tie { background: var(--tie); }
/* Coverage is a magnitude, not an identity, so it steps one ink rather than
   borrowing the pipeline hues. */
.share .seg-full { background: var(--ink); }
.share .seg-part { background: var(--ink-faint); }
.share .seg-none { background: var(--rule); }
.share-labels {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: .6875rem;
  color: var(--ink-soft);
  flex-wrap: wrap;
}

.rows { display: grid; gap: 1.3rem; }
.rows-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .rows-2 { grid-template-columns: 1fr; } }

/* --- tables ------------------------------------------------------------ */

.table-scroll { overflow-x: auto; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
table.data th {
  text-align: left;
  font-family: var(--mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 .6rem .5rem 0;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
table.data td {
  padding: .55rem .6rem .55rem 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
table.data td.num, table.data th.num { font-family: var(--mono); text-align: right; padding-right: 1rem; }
table.data tbody tr:hover { background: var(--paper-sunk); }
table.data .id { font-family: var(--mono); font-size: .8125rem; }
table.data .snippet {
  color: var(--ink-soft);
  max-width: 38ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .15rem .4rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  white-space: nowrap;
}
.pill-live { border-color: var(--ink); color: var(--ink); }
.pill-pending { border-color: var(--stamp); color: var(--stamp); }
.pill-off { color: var(--ink-faint); }

.dots { display: inline-flex; gap: 2px; }
.dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rule);
}
.dots i.on { background: var(--ink); }

/* --- toolbar ----------------------------------------------------------- */

.toolbar {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}
.toolbar input[type="search"] {
  font-family: var(--ui);
  font-size: .875rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .45rem .6rem;
  min-width: 14rem;
}
.toolbar .count { margin-left: auto; }

/* --- editor ------------------------------------------------------------ */

.editor {
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem 1.2rem;
  margin: .6rem 0 1.2rem;
}
.editor h3 {
  font-size: .9375rem;
  margin: 0 0 .9rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.editor label {
  display: block;
  font-size: .8125rem;
  font-weight: 500;
  margin: 0 0 .35rem;
}
.editor .f { margin: 0 0 1rem; }
.editor .hint { font-size: .75rem; color: var(--ink-soft); margin: .3rem 0 0; }
.editor textarea { min-height: 4.5rem; width: 100%; }
.editor .f-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.editor .f-row .f { flex: 1 1 8rem; }
.editor input[type="number"] {
  font-family: var(--mono);
  font-size: .875rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .45rem .5rem;
  width: 7rem;
}
.editor-foot {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  padding-top: .9rem;
  border-top: 1px solid var(--rule);
}
.editor-foot .danger { color: var(--stamp); margin-left: auto; }

.pipe-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .12rem .35rem;
  border-radius: 2px;
  color: var(--paper);
}
.pipe-tag-p1 { background: var(--p1); }
.pipe-tag-p2 { background: var(--p2); }
@media (prefers-color-scheme: dark) {
  .pipe-tag { color: #10131a; }
}

/* --- login ------------------------------------------------------------- */

.login {
  max-width: 24rem;
  margin: 4rem auto;
}
.login h1 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: .3rem 0 1rem;
}
.login input[type="password"] {
  font-family: var(--ui);
  font-size: .9375rem;
  color: var(--ink);
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .55rem .7rem;
  width: 100%;
  margin-bottom: .9rem;
}

/* --- import/export ----------------------------------------------------- */

.io-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .io-grid { grid-template-columns: 1fr; } }

.cols {
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--ink-soft);
  margin: .6rem 0 0;
  padding-left: 1.1rem;
}
.cols li { margin: .2rem 0; }

.result {
  font-size: .875rem;
  margin: .9rem 0 0;
  padding: .7rem .8rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
}
.result ul { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--ink-soft); }

.switch {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 0 0 1.1rem;
  font-size: .9375rem;
}
.switch input { margin: .3rem 0 0; width: 1rem; height: 1rem; flex: 0 0 auto; }
.switch .hint { margin: .2rem 0 0; }

.empty {
  font-size: .9375rem;
  color: var(--ink-soft);
  padding: 1.5rem 0;
}