/* DomainHunter.si - the .si field guide (/si): only what the document layout lacks.
   The receipt line under a figure, the lifeline, the strips of marks, the three-letter grid.
   Every colour is a theme token (theme.css, solved by tools/solve_theme.py); no theme is named
   here, so both themes and the no-JavaScript path read the same rules. The tones of the grid
   are steps of ink over the page, so they follow the theme by themselves.
   Figures answer to the width of their own box (container queries), not to the window: the
   narrow arrangement is the default, so a browser without container queries still gets a
   page that fits.
   Sizes: 11 / 12 / 13 / 14 / 16; gaps: 2 / 4 / 6 / 8 / 12 / 16 / 24 / 32. No motion in this file. */

/* ---------- The text column: prose keeps its measure, figures may use the whole column ---------- */

.dh-doc section > div {
  max-width: none;
}

.dh-doc section > div > p,
.dh-doc section > div > dl,
.dh-doc section > div > ul,
.dh-doc section > div > .gd-fig {
  max-width: 35rem;
}

.dh-doc section > div > .gd-wide {
  max-width: none;
}

/* A figure: the box its parts measure themselves against. */
.gd-fig {
  container-type: inline-size;
}

/* ---------- The receipt: label, source, date, method ---------- */

.gd-src {
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  line-height: 18px;
}

/* The document's own rhythm sets 12 px between blocks; a receipt belongs to the line above. */
:root .dh-doc section p.gd-src {
  margin: 6px 0 0;
}

.dh-terms dd.gd-src {
  margin-top: 4px;
}

.gd-label {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  color: hsl(var(--foreground));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 16px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* One mark per label, told apart by shape: a block (rule), a ring (measured), a dash (reported). */
.gd-label::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  background: hsl(var(--foreground));
}

.gd-label-measure::before {
  border: 2px solid hsl(var(--dh-mark));
  border-radius: 50%;
  background: transparent;
}

.gd-label-reported::before {
  height: 2px;
  background: hsl(var(--muted-foreground));
}

/* The opening paragraph: the document's running text, before the first section. */
.gd-intro {
  max-width: 35rem;
  margin: 0 0 32px;
  color: hsl(var(--foreground) / 0.82);
  font-size: 16px;
  line-height: 24px;
}

/* The note printed when the figures are old. */
.gd-old {
  max-width: 35rem;
  margin: 0 0 32px;
  padding-left: 12px;
  border-left: 2px solid hsl(var(--dh-st-quarantine));
  color: hsl(var(--foreground));
  font-size: 14px;
  line-height: 22px;
}

/* ---------- The lifeline: three stretches, a tick where each begins ----------
   The site's one lifeline drawing (the kit's LIFELINE values; the name page draws the same):
   a tick at each event, 2px of ink for the registered years, 2px of amber through the
   quarantine, and a 1px dashed line for what follows only if nobody renews. No rings, no
   discs (the one disc of the drawing is "today", and this line has no today), no fade. */

/* Narrow: time runs down the page. */
.gd-life {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gd-life li {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0 0 16px 20px;
}

/* the stretch after this tick */
.gd-life li::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: -8px;
  left: 3.5px;
  border-left: 2px solid hsl(var(--foreground) / 0.8);
}

/* the tick */
.gd-life li::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 9px;
  height: 1px;
  background: hsl(var(--foreground));
}

.gd-life .gd-life-qua::before {
  border-left-color: hsl(var(--dh-st-quarantine));
}

/* the last stretch ends with its own words */
.gd-life .gd-life-rel::before {
  bottom: 16px;
  left: 4px;
  border-left: 1px dashed hsl(var(--input));
}

.gd-life-at,
.gd-life-t,
.gd-life-d {
  display: block;
}

.gd-life-at {
  color: hsl(var(--muted-foreground));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 16px;
  text-transform: uppercase;
}

.gd-life-t {
  margin-top: 2px;
  color: hsl(var(--foreground));
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}

.gd-life-d {
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  line-height: 18px;
}

/* Wide: time runs across. */
@container (min-width: 520px) {
  .gd-life {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, 1fr);
    padding: 4px 0 8px;
  }

  .gd-life li {
    padding: 20px 16px 0 0;
  }

  .gd-life li::before {
    top: 3.5px;
    right: 0;
    bottom: auto;
    left: 0;
    border-left: 0;
    border-top: 2px solid hsl(var(--foreground) / 0.8);
  }

  .gd-life li::after {
    top: 0;
    width: 1px;
    height: 9px;
  }

  .gd-life .gd-life-qua::before {
    border-top-color: hsl(var(--dh-st-quarantine));
  }

  .gd-life .gd-life-rel::before {
    top: 4px;
    bottom: auto;
    left: 0;
    border-left: 0;
    border-top: 1px dashed hsl(var(--input));
  }
}

/* ---------- Strips of marks (decoration; the figures stand beside them as text) ---------- */

.gd-strip {
  display: flex;
  gap: 1px;
  width: 100%;
  height: 12px;
}

.gd-strip i {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 1px;
}

/* Has name servers: ink. The rest of a band, and "no answer": a trace. */
.gd-c-on,
.gd-c-ns {
  background: hsl(var(--foreground));
}

.gd-c-off,
.gd-c-na {
  background: hsl(var(--foreground) / 0.14);
}

/* Registered without name servers: half ink. Not found: an empty outline. */
.gd-c-reg {
  background: hsl(var(--foreground) / 0.5);
}

.gd-c-nf {
  box-shadow: inset 0 0 0 1px hsl(var(--foreground));
}

.gd-key {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 3px;
  vertical-align: -1px;
}

/* Coverage by band: label, strip, figure. */
.gd-cap {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  line-height: 18px;
}

.gd-bands {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.gd-bands li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3em;
  align-items: center;
  gap: 2px 12px;
  margin: 0;
  /* 3 + 22 + 3: the module of 28 */
  padding: 3px 0;
  font-size: 14px;
  line-height: 22px;
}

.gd-bands li:last-child {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid hsl(var(--border));
  font-weight: 600;
}

.gd-bands-k {
  grid-column: 1 / -1;
  color: hsl(var(--foreground));
}

.gd-bands-n {
  color: hsl(var(--foreground));
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  text-align: right;
}

/* The census in one line of a hundred marks, and its four counts. */
.gd-census-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 24px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
  line-height: 20px;
}

.gd-census-n {
  color: hsl(var(--foreground));
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
}

@container (min-width: 520px) {
  .gd-bands li {
    grid-template-columns: minmax(0, 15em) minmax(0, 1fr) 3em;
  }

  .gd-bands-k {
    grid-column: auto;
  }

  .gd-census-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- The three-letter grid ---------- */

.gd-grid-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.gd-grid-wrap:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.gd-grid {
  width: 100%;
  min-width: 664px;
  border-collapse: separate;
  border-spacing: 1px;
  table-layout: fixed;
  color: hsl(var(--foreground));
  font-size: 11px;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 20px;
}

.gd-grid caption {
  caption-side: top;
  padding: 0 0 8px;
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  line-height: 18px;
  text-align: left;
}

/* The caption stays in view while the grid scrolls sideways (100cqw = the figure's width). */
.gd-grid-cap {
  display: block;
  position: sticky;
  left: 0;
  max-width: min(100%, calc(100vw - 48px));
  max-width: min(100%, 100cqw);
}

.gd-grid th,
.gd-grid td {
  height: 20px;
  padding: 0;
  border-radius: 3px;
  font-weight: 400;
  text-align: center;
}

.gd-grid th {
  color: hsl(var(--foreground));
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 600;
}

.gd-grid .gd-corner,
.gd-grid tbody th,
.gd-grid tfoot th {
  width: 20px;
}

/* The row letter stays in view while the grid scrolls sideways. */
.gd-grid tbody th,
.gd-grid tfoot th {
  position: sticky;
  left: 0;
  background: hsl(var(--background));
}

.gd-grid tfoot th,
.gd-grid thead .gd-sum {
  color: hsl(var(--muted-foreground));
  font-family: inherit;
  font-weight: 500;
}

.gd-grid thead .gd-sum {
  width: 40px;
}

.gd-grid td.gd-sum {
  color: hsl(var(--muted-foreground));
}

.gd-grid tbody td.gd-sum {
  padding-right: 2px;
  text-align: right;
}

.gd-grid tfoot td,
.gd-grid tfoot th {
  border-top: 1px solid hsl(var(--border));
  border-radius: 0;
}

.gd-grid td.gd-total {
  padding-right: 2px;
  color: hsl(var(--foreground));
  font-weight: 600;
  text-align: right;
}

/* Five tone steps: nothing, then more ink. The last step turns the cell over. The three
   shares of ink are solved for each theme (--dh-tone-1/2/3, tools/solve_theme.py), so the
   figures on the third step keep the ink contrast of the gate in both. */
.gd-s0 {
  color: hsl(var(--muted-foreground));
}

.gd-key.gd-s0 {
  box-shadow: inset 0 0 0 1px hsl(var(--border));
}

.gd-s1 {
  background: hsl(var(--foreground) / var(--dh-tone-1));
}

.gd-s2 {
  background: hsl(var(--foreground) / var(--dh-tone-2));
}

.gd-s3 {
  background: hsl(var(--foreground) / var(--dh-tone-3));
}

.gd-grid td.gd-s3,
.gd-grid td.gd-s4 {
  font-weight: 600;
}

.gd-s4 {
  background: hsl(var(--foreground));
  color: hsl(var(--background));
}

/* A row being pointed at: its letter takes the mark, so a long row can be followed. */
.gd-grid tbody tr:hover th {
  box-shadow: inset 2px 0 0 hsl(var(--dh-mark));
}

.gd-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 18px;
}

.gd-legend li {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

/* ---------- The two ledgers (registrars, sales) ---------- */

.gd-list tbody td {
  white-space: nowrap;
}

/* Six columns in a 680 px text column: the detail and source cells give up their floor width. */
.dh-list.gd-list tbody td.dh-detail,
.dh-list.gd-list tbody td.dh-source {
  min-width: 0;
}

.gd-status {
  display: inline-flex;
  align-items: center;
  color: hsl(var(--foreground));
  white-space: nowrap;
}

/* In a ledger cell the status sits on the 20px line of the cell, so the row keeps the 28px
   pitch (an inline flex box set on the baseline added a pixel). */
.dh-list.gd-list td .gd-status {
  vertical-align: top;
}

/* The source here is a publication, not a host: the text face, not the mono one. */
.dh-list.gd-list tbody td.dh-source > a:first-child {
  font-family: inherit;
}

/* verified: a full dot. reported: a ring. */
.gd-status::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border: 2px solid hsl(var(--dh-mark));
  border-radius: 50%;
  background: hsl(var(--dh-mark));
}

.gd-status-reported {
  color: hsl(var(--muted-foreground));
}

.gd-status-reported::before {
  border-color: hsl(var(--muted-foreground));
  background: transparent;
}

/* Phones: nothing under 12px. */
@media (max-width: 640px) {
  .gd-label,
  .gd-life-at,
  .gd-grid td,
  .gd-grid th {
    font-size: 12px;
  }
}

@media print {
  .gd-grid-wrap {
    overflow: visible;
  }
}