/* The OSSA pages: one stylesheet, no fonts fetched. The viewer is dark,
   as spectrograms are easier to read on dark. */

:root {
  --bg: #111317;
  --panel: #1a1d23;
  --text: #d9dde4;
  --muted: #8b93a1;
  --accent: #ff8c28;
  --grid: rgba(217, 221, 228, 0.12);
  --frame: rgba(217, 221, 228, 0.35);
  --nodata: #26292f;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 system-ui, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); }

header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 16px 6px;
}

header h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

header .home {
  font-weight: 700;
  text-decoration: none;
}

header .meta { color: var(--muted); }

.toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 6px 16px;
  background: var(--panel);
}

.toolbar input[type="number"] {
  width: 5em;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--frame);
  border-radius: 4px;
  padding: 2px 4px;
}

.toolbar button {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--frame);
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
}

.toolbar button.on { border-color: var(--accent); color: var(--accent); }

.icon {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* One line, its width set by the space left and not by its text: a longer
   readout must not wrap the toolbar, or the plot moves under the pointer. */
.toolbar output {
  flex: 1 1 0;
  min-width: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.4em;
}

#viewer {
  flex: 1;
  position: relative;
  min-height: 320px;
  overflow: hidden;
  --grid: rgba(217, 221, 228, 0.12);
}

#plot {
  display: block;
  position: absolute;
  inset: 0;
  cursor: crosshair;
  touch-action: none;
}

#plot.dragging { cursor: grabbing; }

#tip {
  position: absolute;
  z-index: 1;
  max-width: 440px;
  padding: 6px 8px;
  border: 1px solid var(--frame);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
  white-space: pre-line;
  pointer-events: none;
}

#tip[hidden] { display: none; }

#labeler {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 8px;
  width: 340px;
  max-height: calc(100% - 20px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--frame);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
}

#labeler[hidden] { display: none; }
#labeler .what { margin-bottom: 6px; }
#labeler .what div:first-child { font-weight: 600; }
#labeler .moved, #labeler .status, #labeler .hint { color: var(--muted); }
#labeler .message { color: #ff9a8a; margin-top: 4px; }
#labeler .row { display: block; margin: 4px 0; }
#labeler .verdicts { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }

#labeler button,
#labeler input,
#labeler select {
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--frame);
  border-radius: 4px;
  padding: 2px 6px;
}

#labeler button { cursor: pointer; }
#labeler button.on { border-color: #ffd84d; color: #ffd84d; }
#labeler .options { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
#labeler .options button { text-align: left; }
#labeler .options button div:first-child { font-weight: 600; }
#labeler button:disabled { opacity: 0.5; cursor: default; }
#labeler .tones { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; color: var(--muted); }
#labeler ol.steps { margin: 4px 0 6px; padding-left: 18px; color: var(--muted); }
#labeler ol.steps li { margin: 2px 0; }
#labeler .tone { padding: 0 6px; border: 1px solid var(--frame); border-radius: 4px; }
#labeler .tone.on { border-color: #ffd84d; color: var(--text); }
#labeler .tone[data-tone="0"]::before,
#labeler .tone[data-tone="1"]::before,
#labeler .tone[data-tone="2"]::before,
#labeler .tone[data-tone="3"]::before { content: "+ "; font-weight: 700; }
#labeler .tone[data-tone="0"]::before { color: #ffffff; }
#labeler .tone[data-tone="1"]::before { color: #7fe7ff; }
#labeler .tone[data-tone="2"]::before { color: #ffb066; }
#labeler .tone[data-tone="3"]::before { color: #b6f27a; }
#labeler button.link { border: 0; background: none; padding: 0; color: var(--accent); }
#labeler input.note, #labeler form input { width: 100%; box-sizing: border-box; margin: 3px 0; }
#labeler select { max-width: 100%; }

/* The legend: over the plot, beside its time axis, until put away. */
#legend {
  position: absolute;
  z-index: 3;
  left: 86px;
  bottom: 40px;
  width: min(1040px, calc(100% - 100px));
  max-height: calc(100% - 60px);
  overflow-y: auto;
  padding: 12px 16px 10px;
  border: 1px solid var(--frame);
  border-radius: 8px;
  background: rgba(26, 29, 35, 0.96);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-size: 12px;
  line-height: 1.45;
}

#viewer:has(#labeler:not([hidden])) #legend { width: min(1040px, calc(100% - 460px)); }
#legend[hidden] { display: none; }

#legend .legend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

#legend h2 { margin: 0; font-size: 14px; font-weight: 600; }

#legend h3 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#legend .legend-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 28px;
}

#legend .stack { display: grid; gap: 16px; align-content: start; }

@media (max-width: 820px) {
  #legend .legend-grid { grid-template-columns: minmax(0, 1fr); }
}

#legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
#legend li { display: flex; align-items: center; gap: 9px; }
#legend b { font-weight: 600; }
#legend .note { margin: -4px 0 6px; color: var(--muted); }
#legend .swatch { flex: 0 0 auto; width: 40px; height: 14px; }
#legend .sw { fill: none; stroke-width: 2; stroke-linecap: round; }
#legend .sw.heard { stroke: rgba(90, 205, 255, 0.95); }
#legend .sw.off { stroke: rgba(90, 205, 255, 0.8); stroke-width: 1.5; stroke-dasharray: 8 4; }
#legend .sw.faint { stroke: rgba(90, 205, 255, 0.35); stroke-width: 1.25; }
#legend .sw.track { stroke: rgba(255, 140, 40, 0.95); stroke-width: 1.75; stroke-dasharray: 6 4; }
#legend .sw.steady { stroke: rgba(210, 210, 210, 0.5); stroke-width: 1.5; stroke-dasharray: 2 4; }
#legend .sw.mark { stroke: rgba(255, 105, 220, 0.95); }
#legend .sw.selected { stroke: #ffd84d; stroke-width: 2.5; }
#legend .sw.tones { stroke: rgba(170, 230, 255, 0.75); stroke-width: 1; stroke-dasharray: 6 3; }
#legend .sw.fit { stroke: rgba(255, 105, 220, 0.95); stroke-width: 1.25; stroke-dasharray: 4 4; }

#legend dl.keys {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 5px 12px;
  align-items: baseline;
  margin: 0;
}

#legend dt { white-space: nowrap; }
#legend dd { margin: 0; color: var(--muted); }
#legend dt .icon { margin-right: 3px; color: var(--muted); }

#legend kbd {
  display: inline-block;
  min-width: 1.7em;
  margin: 0 1px;
  padding: 0 5px;
  border: 1px solid var(--frame);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: center;
}

#legend .glyphs { margin-top: 10px; }
#legend .glyph {
  display: inline-block;
  width: 1.3em;
  font-weight: 700;
  text-align: center;
}

#legend .scale { margin-top: 12px; }
#legend .scale canvas { display: block; width: 100%; height: 10px; border-radius: 3px; }

#legend .scale .ends {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

#legend .legend-foot { margin: 12px 0 0; color: var(--muted); }

#legend button.close {
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

#legend button.close:hover { color: var(--text); }

/* What is for a mouse and what for a finger: a phone or a tablet has no
   hover and a coarse pointer. */
@media (hover: hover), (pointer: fine) {
  .touch-only { display: none !important; }
}

@media (hover: none) and (pointer: coarse) {
  .mouse-only { display: none !important; }
}

/* The display settings stay in the toolbar on a wide screen; on a narrow one
   they fold behind their button. */
.toolbar .display { display: contents; }
#display-toggle { display: none; }

#labeler button.close {
  position: absolute;
  top: 4px;
  right: 4px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
}

#labeler button.close:hover { color: var(--text); }
#labeler .what { padding-right: 22px; }
#labeler .nudge { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; }
#labeler .nudge button { min-width: 2.2em; }
#labeler button.small { padding: 0 6px; margin-right: 2px; }

@media (max-width: 700px) {
  body { height: 100dvh; }

  header { gap: 2px 12px; padding: 8px 12px 4px; }
  header h1 { font-size: 16px; }

  header .meta {
    flex-basis: 100%;
    min-width: 0;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
  }

  header .meta.open { white-space: normal; }

  .toolbar { gap: 6px 10px; padding: 6px 12px; }
  .toolbar button { padding: 5px 10px; }
  #display-toggle { display: inline-block; }
  .toolbar .display { display: none; }

  .toolbar.show-display .display {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    flex-basis: 100%;
    order: 5;
    padding: 4px 0;
  }

  .toolbar output { flex-basis: 100%; order: 10; text-align: left; font-size: 12px; }

  #viewer { min-height: 240px; }

  /* The labelling panel as a sheet along the bottom; the plot keeps the
     width and gives up the sheet's height (viewer.js, plot()). */
  #labeler {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 46%;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 10px 10px 0 0;
    font-size: 14px;
  }

  #labeler button, #labeler input, #labeler select { min-height: 36px; padding: 4px 10px; }
  #labeler button.link, #labeler button.close { min-height: 0; padding: 2px 6px; }
  #labeler .nudge button { min-width: 44px; }
  #labeler button.small { min-height: 30px; }

  #legend {
    left: 6px;
    right: 6px;
    bottom: 6px;
    width: auto;
    max-height: calc(100% - 12px);
    font-size: 13px;
  }

  #viewer:has(#labeler:not([hidden])) #legend { width: auto; }
  #tip { max-width: calc(100% - 16px); }
}

.page { padding: 8px 16px 24px; }
.page .lead { max-width: 900px; color: var(--muted); }
.page .muted { color: var(--muted); font-size: 12px; }
.page td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.corrections td { vertical-align: top; font-size: 13px; }
.state { color: var(--muted); }
.state.ok { color: #7ee787; }

table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

th, td {
  text-align: left;
  padding: 6px 14px 6px 0;
  border-bottom: 1px solid var(--grid);
}

th { color: var(--muted); font-weight: 500; }