/* 47 / SKOPIA. Type, rules and state colour. Nothing else. */

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --ground: #f4f1ea;
  --ink: #1b1d1e;
  --rule: #cfc9bc;
  --quiet: #4c5154;
  --good: #2f6f52;
  --run: #8a6410;
  --back: #9a4f1c;
  --bad: #a52a25;
  --unknown: #8c8f91;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --ground: #0e1112;
    --ink: #e6e1d6;
    --rule: #2b3033;
    --quiet: #9ba2a6;
    --good: #6fae8e;
    --run: #d8b25a;
    --back: #c98452;
    --bad: #d0605a;
    --unknown: #7d8489;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0e1112;
  --ink: #e6e1d6;
  --rule: #2b3033;
  --quiet: #9ba2a6;
  --good: #6fae8e;
  --run: #d8b25a;
  --back: #c98452;
  --bad: #d0605a;
  --unknown: #7d8489;
}

:root {
  /* Three sizes only (DESIGN 4). */
  --t1: 1rem;
  --t2: 0.8125rem;
  --t3: 0.6875rem;
  --sans: system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --touch: 44px;
  --rail: 12rem;
  --column: 72rem;
  --edge: 1rem;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t1);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.defs {
  position: absolute;
  width: 0;
  height: 0;
}

#hatch path {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1;
}

.m {
  font-family: var(--mono);
}

/* `hidden` has to beat every display rule in this file, including the ones written after it:
   .step-detail is a grid, so the attribute lost the cascade and every lane drew an empty
   bordered panel under its track. */
[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

/* The wordmark is the only brand element, with the clock beside it (DESIGN 4). Its own class,
   because .mark also names a step mark on a lane track. */
.topbar {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: var(--edge) var(--edge) 0.5rem;
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  font-family: var(--mono);
  font-size: var(--t3);
  letter-spacing: 0.2em;
}

.clock {
  font-size: var(--t3);
  color: var(--quiet);
}

/* Silence band: full width, at the top of every view (DESIGN 2). */
.band {
  margin: 0;
  padding: 0.5rem var(--edge);
  border-bottom: 1px solid var(--rule);
  background: var(--ink);
  color: var(--ground);
  font-size: var(--t2);
}

.wrap {
  padding: 0 0 var(--touch);
}

.view-title {
  margin: 0;
  padding: 0.75rem var(--edge) 0.5rem;
  font-size: var(--t3);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--quiet);
}

.view-sub {
  margin: 0;
  padding: 0.75rem var(--edge) 0.25rem;
  font-size: var(--t3);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--quiet);
}

.rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.row {
  display: grid;
  grid-template-columns: 4px 1fr;
  align-items: start;
  border-bottom: 1px solid var(--rule);
}

.row > .body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 0.75rem;
  padding: 0.5rem var(--edge) 0.5rem 0.75rem;
  min-width: 0;
}

.id {
  flex: 0 0 11rem;
  font-family: var(--mono);
}

/* Times and ages are drawn in the monospace face, so a column of them lines up. */
.when {
  flex: 0 0 11rem;
  font-family: var(--mono);
}

.line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
}

.name {
  font-family: var(--mono);
  font-size: var(--t1);
}

.state {
  font-size: var(--t2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.age {
  font-size: var(--t2);
  color: var(--quiet);
}

.text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.detail {
  font-size: var(--t2);
  color: var(--quiet);
}

.label {
  font-size: var(--t3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--quiet);
}

.summary {
  margin: 0;
  padding: 0.75rem var(--edge);
  list-style: none;
  font-size: var(--t2);
  color: var(--quiet);
}

.summary li {
  padding: 0.125rem 0;
}

.plain,
.more {
  margin: 0;
  padding: 0.75rem var(--edge);
  font-size: var(--t2);
  color: var(--quiet);
}

/* State colour is never the only carrier: the bar plus the state word (DESIGN 4). */
.bar-cell {
  width: 4px;
  align-self: stretch;
  min-height: var(--touch);
}

.bar-cell svg {
  display: block;
  width: 4px;
  height: 100%;
}

.bar-cell rect {
  fill: currentColor;
}

.bar-cell rect.bar-hatch {
  fill: none;
}

.st-good {
  color: var(--good);
}

.st-run {
  color: var(--run);
}

.st-back {
  color: var(--back);
}

.st-bad {
  color: var(--bad);
}

.st-unknown {
  color: var(--unknown);
}

.st-quiet {
  color: var(--quiet);
}

.st-hollow {
  color: var(--rule);
}

/* A stale board must never look healthy (DESIGN 2). */
.sil .bar-cell,
.sil .st-good,
.sil .st-run,
.sil .st-back,
.sil .st-bad,
.sil .st-unknown,
.sil .track {
  filter: grayscale(1);
}

/* A stale board must never look healthy (DESIGN 2), and --unknown is hatched in the colour
   table itself (DESIGN 4). The hatch goes on the mark bodies, not on their group: fill is
   inherited, so a fill on the <g> never beats .mark-body's own fill and the mark stayed solid. */
.sil .bar-cell rect.bar-hatch,
.sil .mark.hatched .mark-body {
  fill: url(#hatch);
}

.mark.st-unknown .mark-body {
  fill: url(#hatch);
}

/* Filters and controls. */
.filters {
  display: grid;
  gap: 0.5rem var(--edge);
  padding: 0.5rem var(--edge);
  border-bottom: 1px solid var(--rule);
}

.field {
  display: grid;
  gap: 0.25rem;
  padding: 0.5rem var(--edge);
}

.control {
  min-height: var(--touch);
  padding: 0 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t2);
}

.control[type="checkbox"] {
  min-width: var(--touch);
  min-height: var(--touch);
  accent-color: var(--ink);
}

.switch {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  align-items: center;
  border-bottom: 1px solid var(--rule);
}

.switch .cell {
  padding: 0 0.75rem;
}

.switch input {
  margin: 0 var(--edge) 0 0;
}

.device {
  display: grid;
  grid-template-columns: 4px 1fr;
  align-items: center;
  border-bottom: 1px solid var(--rule);
}

.device .cell {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem var(--edge) 0.5rem 0.75rem;
}

.grow {
  flex: 1 1 12rem;
}

.signin {
  display: grid;
  gap: 0.5rem var(--edge);
  max-width: 22rem;
  padding: 0 var(--edge);
}

.signed-out .band {
  display: none;
}

/* The fixed bar: bottom on a phone, a left rail on a wide screen. */
.bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ground);
  border-top: 1px solid var(--rule);
}

.bar-list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bar-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  flex: 1 1 0;
  border-right: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--t2);
}

.bar-list li:last-child .bar-item {
  border-right: 0;
}

.bar-item[aria-current="page"] {
  background: var(--ink);
  color: var(--ground);
}

@media (min-width: 72rem) {
  .bar {
    top: 0;
    bottom: 0;
    right: auto;
    width: var(--rail);
    border-top: 0;
    border-right: 1px solid var(--rule);
  }

  .bar-list {
    flex-direction: column;
    height: 100%;
  }

  .bar-item {
    flex: 0 0 var(--touch);
    justify-content: flex-start;
    padding: 0 var(--edge);
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  .wrap {
    margin-left: var(--rail);
    padding-bottom: 0;
    max-width: var(--column);
  }

  .topbar {
    padding-left: var(--edge);
  }

  /* The header and the band are outside .wrap, so on a wide screen the fixed rail sat on top of
     the wordmark. They move right by the rail's width. */
  .topbar,
  .band {
    margin-left: var(--rail);
  }
}

.filters {
  grid-template-columns: 1fr;
}

@media (min-width: 72rem) {
  .filters {
    grid-template-columns: 12rem 1fr auto;
    align-items: end;
  }
}

/* Lane tracks (DESIGN 3). The scroll box is the only thing allowed to be wider than the row:
   a 100% flex basis is resolved against a container that is itself content-sized, which is how
   a track's own width came to size the whole page on a phone. A zero basis cannot. */
.track-scroll {
  flex: 1 1 0;
  overflow-x: auto;
  min-width: 0;
  max-width: 100%;
}

.track {
  display: block;
}

.track .baseline,
.track .tick {
  stroke: var(--rule);
  stroke-width: 1;
}

.track .round-id,
.track .outcome {
  font-family: var(--mono);
  font-size: var(--t3);
  fill: var(--quiet);
}

.mark {
  cursor: pointer;
}

.mark-body {
  fill: currentColor;
}

.mark.st-hollow .mark-body {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.mark-hit {
  fill: none;
  pointer-events: all;
}

.step-detail {
  display: grid;
  gap: 0.125rem 0.75rem;
  padding: 0.5rem 0 0.25rem;
  border-top: 1px solid var(--rule);
}

.findings {
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.finding {
  display: flex;
  gap: 0.75rem;
  padding: 0.125rem 0;
}

/* One pulse, and only on the running step (DESIGN 3). */
.pulse {
  animation: pulse 2s linear infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }

  100% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulse {
    animation: none;
  }
}

/* Capture and Inbox views */
.capture-form {
  padding: 0 var(--edge);
}

.capture-text {
  width: 100%;
  min-height: 8rem;
  resize: vertical;
  font-family: var(--sans);
  line-height: 1.4;
}

.capture-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.capture-actions .control {
  min-height: var(--touch);
}

.att-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t3);
  color: var(--ink);
  text-decoration: none;
}

.recording-pulse {
  color: var(--bad);
  font-family: var(--mono);
  font-size: var(--t2);
  margin-left: 0.5rem;
}