/* DomainHunter.si - the radar and its sub-pages (/drops, /drops/YYYY-MM-DD, /drops/released,
   /drops/clock): only what the kit in app.css lacks. The filter form, the 13-week row of
   expiry dates, the figures of the released page, the hour strip of the clock. (The row of
   page links under the h1 is the kit's .dh-subnav.) Every colour is a theme token (theme.css, solved by tools/solve_theme.py); no theme is
   named here. The two strips and the hour strip share one drawing: bars in ink at 80% standing
   on an ink rule, nothing boxed, no colour that is not a state. The calendar counts (one bar,
   one name); the 13-week row and the clock compare (a bar of eight heights, .rd-l1 to .rd-l8).
   Sizes: 11 / 12 / 13 / 20; gaps: 2 / 4 / 6 / 8 / 12 / 16 / 24. The form is on the module of 28:
   fields, selects and its one button are 28px, on one line. No motion in this file. */

/* ---------- The quiet lines of a page head ---------- */

/* The count line under the lede, and the quiet lines of a page (source, subscribe, ignored). */
.rd-count {
  margin: 8px 0 0;
}

/* Each part between the middle dots is one piece: the line breaks between parts, never inside
   a date or a figure. The parts are laid out as a wrapping row; the printed dots are taken out
   of sight (they stay for a screen reader) and each part draws its own in the gap before it,
   so a part that opens a line has its dot cut off by the edge of the line: no dot ever ends or
   opens a line pointing at nothing, and the line never runs past a narrow screen. */
.rd-count {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  overflow: hidden;
}

/* The 16px between two parts is the gap of the row, not a margin of the part: a margin after
   the last part of a line counted against the line and sent that part down on a phone. */
.rd-count > span {
  position: relative;
  white-space: nowrap;
}

.rd-count > span::before {
  content: "\00b7";
  position: absolute;
  top: 0;
  left: -16px;
  width: 16px;
  text-align: center;
}

.rd-count > .rd-dot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.rd-count > .rd-dot::before {
  content: none;
}

/* In the narrow title column the parts stand one under the other, with no dots. */
@media (min-width: 1200px) {
  .rd-count {
    display: block;
  }

  .rd-count > span {
    display: block;
  }

  .rd-count > span::before {
    content: none;
  }
}

.rd-line {
  margin: 8px 0 0;
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  line-height: 18px;
}

.rd-line + .rd-line {
  margin-top: 2px;
}

.rd-sep {
  padding: 0 4px;
  color: hsl(var(--muted-foreground));
}

/* ---------- The filter: a real form, its fields are the address ---------- */

.rd-cut {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
}

.rd-f {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

:root .dh-page .rd-f > input {
  width: 100%;
}

.rd-w-q {
  width: 10rem;
}

/* Above a phone the first field takes the room the others leave, so the first row of fields
   ends on the column's edge and the rest (list, order, the actions) make one short row. */
@media (min-width: 641px) {
  .rd-cut .rd-w-q {
    flex: 1 1 15rem;
  }
}

.rd-w-m {
  width: 7rem;
}

.rd-w-s {
  width: 4.5rem;
}

.rd-w-b {
  width: 7.5rem;
}

/* The two actions stand on the line of the fields: the button is the control at 28px, like
   the fields beside it. */
.rd-f-act {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-height: 28px;
}

/* The way back to the whole list: a quiet word with the line of a link, 4px under it. */
.rd-clear {
  border-radius: 4px;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.001em;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: hsl(var(--input));
  text-underline-offset: 4px;
}

.rd-clear:hover {
  color: hsl(var(--foreground));
  text-decoration-color: hsl(var(--foreground));
}

.rd-cut + .rd-line {
  margin-top: 12px;
}

/* ---------- A figure above its list (the calendar, the 13-week row) ---------- */

.rd-fig {
  margin-bottom: 16px;
}

.rd-fig .dh-cal-note {
  margin-top: 0;
}

/* A day label that is a link to its day page: quiet, like every link in a ledger. */
.dh-cal-n a,
.rd-wk-n a {
  border-radius: 4px;
  color: inherit;
}

.dh-cal-n a:hover,
.rd-wk-n a:hover {
  color: hsl(var(--foreground));
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* The figure over a calendar day that holds more names than it draws ("+6") is set only where
   a day is wide enough for it to stand clear of its neighbour's; narrower, the note under the
   strip says the same in words. */
[data-radar] .dh-cal-more {
  display: none;
}

@media (min-width: 1024px) {
  [data-radar] .dh-cal-more {
    display: block;
  }
}

/* The 13-week row: 91 days on one ink rule, drawn to a scale. A day's bar is one of the eight
   heights of .rd-l1 to .rd-l8 against the fullest day (the note under the row names that
   figure; each day's own count is its title). A day that holds names is one link to its day
   page, as tall as the row; Mondays carry a tick under the rule, the first of a month its name. */
.rd-wk {
  display: flex;
  align-items: flex-end;
  margin: 12px 0 24px;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid hsl(var(--foreground) / var(--dh-rule-a, 1));
}

.rd-wk-day {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 52px;
}

.rd-wk-a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  align-self: stretch;
  flex: 1 1 auto;
  border-radius: 4px;
}

.rd-wk .rd-bar {
  width: calc(100% - 2px);
  min-width: 1px;
  max-width: 8px;
}

.rd-wk-a:hover .rd-bar,
.rd-wk-a:focus-visible .rd-bar {
  background: hsl(var(--dh-mark));
}

/* Monday: a 4px tick under the rule, the way a ruler marks its units. */
.rd-wk-mon::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 4px;
  margin-top: 1px;
  background: hsl(var(--foreground) / 0.55);
}

.rd-wk-n {
  position: absolute;
  top: 100%;
  margin-top: 4px;
  color: hsl(var(--muted-foreground));
  font-size: 11px;
  line-height: 16px;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.rd-wk-mon .rd-wk-n {
  margin-top: 6px;
}

.rd-wk-today .rd-wk-n {
  left: 0;
  color: hsl(var(--foreground));
  font-weight: 600;
}

/* ---------- Ledger details of the radar ---------- */

/* A column head that sorts is a real link here (the page sorts without scripts). */
:root .dh-list thead a.dh-sort {
  color: inherit;
  text-decoration-line: none;
}

:root .dh-list thead th[aria-sort] a.dh-sort {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: hsl(var(--dh-mark));
  text-decoration-skip-ink: none;
  text-underline-offset: 6px;
}

:root .dh-list thead th:not([aria-sort]) a.dh-sort:hover {
  color: hsl(var(--foreground));
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: hsl(var(--muted-foreground));
  text-underline-offset: 6px;
}

/* A name keeps the radar's columns in view: past 28 characters it is cut with an ellipsis
   (its title and its own page carry it whole). */
[data-radar] .dh-list .dh-name {
  max-width: 28ch;
}

/* A date that is a link keeps its line under the whole two-figure field of the day, so down a
   column the lines start on one edge. */
.dh-list td a > .dh-day {
  text-decoration: inherit;
}

/* The shape of a label beside its length: a fact, set as a tag in the mono face. */
.rd-shape {
  margin-right: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-feature-settings: "calt" 0;
  text-transform: uppercase;
}

/* The words that stand where a countdown stood once its moment has come. */
.rd-now {
  color: hsl(var(--dh-st-quarantine));
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
}

/* A bracket of two times in one cell; an observation older than 180 days is set quieter. */
.rd-between {
  white-space: nowrap;
}

.dh-list tbody tr.rd-old td,
.dh-list tbody tr.rd-old th {
  color: hsl(var(--muted-foreground));
}

/* A quiet word set beside a value in a row, on the row's one line: how old the row's own
   registry answer is (in the Detail cell), a registered name's status when it is not "Active"
   (beside the name). */
.rd-stale,
.rd-status {
  margin-left: 8px;
  font-family: Inter, system-ui, sans-serif;
  line-height: 1;
  white-space: nowrap;
}

/* A name and its status stay on the row's one line. */
.dh-list tbody th:has(> .rd-status) {
  white-space: nowrap;
}

/* The 30-day clock of a row without scripts: the server prints the whole days gone by in
   data-q; drops.js then sets the exact share (--dh-q) on the row itself, which wins. */
.dh-list tbody tr[data-q="1"] { --dh-q: 0.0333; }
.dh-list tbody tr[data-q="2"] { --dh-q: 0.0667; }
.dh-list tbody tr[data-q="3"] { --dh-q: 0.1; }
.dh-list tbody tr[data-q="4"] { --dh-q: 0.1333; }
.dh-list tbody tr[data-q="5"] { --dh-q: 0.1667; }
.dh-list tbody tr[data-q="6"] { --dh-q: 0.2; }
.dh-list tbody tr[data-q="7"] { --dh-q: 0.2333; }
.dh-list tbody tr[data-q="8"] { --dh-q: 0.2667; }
.dh-list tbody tr[data-q="9"] { --dh-q: 0.3; }
.dh-list tbody tr[data-q="10"] { --dh-q: 0.3333; }
.dh-list tbody tr[data-q="11"] { --dh-q: 0.3667; }
.dh-list tbody tr[data-q="12"] { --dh-q: 0.4; }
.dh-list tbody tr[data-q="13"] { --dh-q: 0.4333; }
.dh-list tbody tr[data-q="14"] { --dh-q: 0.4667; }
.dh-list tbody tr[data-q="15"] { --dh-q: 0.5; }
.dh-list tbody tr[data-q="16"] { --dh-q: 0.5333; }
.dh-list tbody tr[data-q="17"] { --dh-q: 0.5667; }
.dh-list tbody tr[data-q="18"] { --dh-q: 0.6; }
.dh-list tbody tr[data-q="19"] { --dh-q: 0.6333; }
.dh-list tbody tr[data-q="20"] { --dh-q: 0.6667; }
.dh-list tbody tr[data-q="21"] { --dh-q: 0.7; }
.dh-list tbody tr[data-q="22"] { --dh-q: 0.7333; }
.dh-list tbody tr[data-q="23"] { --dh-q: 0.7667; }
.dh-list tbody tr[data-q="24"] { --dh-q: 0.8; }
.dh-list tbody tr[data-q="25"] { --dh-q: 0.8333; }
.dh-list tbody tr[data-q="26"] { --dh-q: 0.8667; }
.dh-list tbody tr[data-q="27"] { --dh-q: 0.9; }
.dh-list tbody tr[data-q="28"] { --dh-q: 0.9333; }
.dh-list tbody tr[data-q="29"] { --dh-q: 0.9667; }
.dh-list tbody tr[data-q="30"] { --dh-q: 1; }

/* A row the filter has put aside before the server's answer arrives (drops.js). */
.dh-list tbody tr.rd-out,
.dh-cal-t.rd-out {
  display: none;
}

/* The row a calendar bar points at while the bar is pointed at (drops.js). */
.dh-list tbody tr.rd-on {
  background-color: hsl(var(--muted));
}

/* The line that says the lists were brought up to date, or could not be. It is in the page
   from the start (a status region must exist before it speaks); empty, it takes no room. */
.rd-live:empty {
  min-height: 0;
  margin: 0;
}

/* ---------- The day page: the two neighbours ---------- */

/* The year of a neighbouring day: left out on a phone (below), where the page's own title
   already carries it and the three links must share one line. */

.rd-days {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 20px;
  font-variant-numeric: tabular-nums lining-nums;
}

.rd-days span {
  color: hsl(var(--muted-foreground));
}

/* A statement that stands where a list would (an empty day, day one of the released page). */
.rd-state {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.rd-days + .rd-state,
.rd-days + .dh-meta {
  margin-top: 16px;
}

.rd-state + .dh-text {
  margin-top: 8px;
}

/* ---------- The released page: figures with their denominators ---------- */

/* Each figure hangs from a hairline, the way a ledger column hangs from its head rule. */
.rd-figs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  margin: 0;
}

/* A figure stands on the floor of its cell: when one label of a row takes two lines, the
   figures of that row still share a line. */
.rd-figs > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid hsl(var(--border));
}

/* Better still where the browser can: label and figure are two rows shared by the whole row of
   cells, so the figures start on one line whichever label, or count, takes a second one. */
@supports (grid-template-rows: subgrid) {
  .rd-figs > div {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    row-gap: 0;
  }

  .rd-figs > div > dd {
    margin-top: 0;
  }
}

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

.rd-figs dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 6px;
  margin: auto 0 0;
  padding-top: 4px;
  color: hsl(var(--foreground));
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}

/* The count a percentage stands for: one piece, on the figure's line or whole under it. */
.rd-of {
  white-space: nowrap;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
}

.rd-figs + .dh-overline,
.rd-figs + .rd-line {
  margin-top: 24px;
}

.dh-overline + .rd-figs {
  margin-top: 8px;
}

/* One grid for both rows of figures (four, then five): the fifth track of the first row stays
   empty, so every rule and figure of the second row stands under one of the first. */
@media (min-width: 640px) {
  .rd-figs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* The pages of a long list. */
.rd-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-top: 12px;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
  line-height: 20px;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- The clock: 24 hours, twice (Ljubljana, then UTC beneath) ---------- */

.rd-clock-wrap {
  margin-top: 12px;
}

.rd-clock {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-variant-numeric: tabular-nums lining-nums;
}

.rd-clock th {
  width: 88px;
  padding: 0 8px 0 0;
  color: hsl(var(--muted-foreground));
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  vertical-align: bottom;
  white-space: nowrap;
}

.rd-clock td {
  padding: 0;
  text-align: center;
}

/* The bars stand on an ink rule; a bar's height is one of eight steps of 6px. */
.rd-clock .rd-bars td,
.rd-clock .rd-bars th {
  height: 56px;
  border-bottom: 1px solid hsl(var(--foreground) / var(--dh-rule-a, 1));
  vertical-align: bottom;
}

.rd-clock .rd-bars th {
  padding-bottom: 4px;
}

.rd-bar {
  display: block;
  width: calc(100% - 4px);
  max-width: 14px;
  margin: 0 auto;
  background: hsl(var(--foreground) / 0.8);
}

.rd-l1 { height: 6px; }
.rd-l2 { height: 12px; }
.rd-l3 { height: 18px; }
.rd-l4 { height: 24px; }
.rd-l5 { height: 30px; }
.rd-l6 { height: 36px; }
.rd-l7 { height: 42px; }
.rd-l8 { height: 48px; }

/* An hour the one known fact rules out: the ground steps back (--dh-ruled, a tone solved to
   stand off the canvas in both themes), nothing is coloured. */
.rd-clock .rd-bars td.rd-x {
  background-color: hsl(var(--dh-ruled));
}

.rd-clock .rd-hours td,
.rd-clock .rd-hours th {
  padding-top: 4px;
  color: hsl(var(--muted-foreground));
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
  vertical-align: top;
}

.rd-clock .rd-gap td,
.rd-clock .rd-gap th {
  height: 16px;
}

/* The key under the strip: the swatch of a ruled-out hour. */
.rd-key {
  display: inline-block;
  width: 12px;
  height: 8px;
  margin-right: 6px;
  background-color: hsl(var(--dh-ruled));
  box-shadow: inset 0 0 0 1px hsl(var(--border));
  vertical-align: 0;
}

/* The headline sentence of the clock. */
.rd-headline {
  max-width: 35rem;
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.rd-headline + .dh-text {
  margin-top: 8px;
}

.rd-facts {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

/* One line of 13/20 on the pitch of a ledger row: 4 + 20 + 3 and the rule. */
.rd-facts li {
  padding: 4px 0 3px;
  border-top: 1px solid hsl(var(--border));
  color: hsl(var(--foreground) / 0.82);
  font-size: 13px;
  line-height: 20px;
}

.rd-facts li:first-child {
  border-top: 0;
  padding-top: 0;
}

.rd-facts li:last-child {
  padding-bottom: 0;
}

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
  .rd-cut {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .rd-w-q,
  .rd-w-m,
  .rd-w-s,
  .rd-w-b {
    width: 100%;
  }

  .rd-f-act {
    grid-column: 1 / -1;
    min-height: 40px;
  }

  .rd-yr {
    display: none;
  }

  /* Nothing under 12px on a phone (the kit does the same for its own 11px step). */
  .rd-figs dt,
  .rd-wk-n,
  .rd-clock th,
  .rd-clock .rd-hours td,
  .rd-status,
  .rd-now {
    font-size: 12px;
  }

  /* How old a row's answer is: left to wider screens, like the Detail column it sits in. */
  .rd-stale {
    display: none;
  }

  /* The order's longest choice needs the form's whole width. */
  .rd-w-o {
    grid-column: 1 / -1;
  }

  .rd-figs dt {
    letter-spacing: 0.06em;
  }

  .rd-shape {
    margin-right: 6px;
  }

  /* Domain, countdown and date fit a phone without sideways scroll: a long name is cut
     with an ellipsis (its title and its own page carry it whole). */
  [data-radar] .dh-list .dh-name {
    max-width: 14ch;
  }

  /* Beside a status word the name gives way a little more. */
  [data-radar] .dh-list th:has(> .rd-status) .dh-name {
    max-width: 10ch;
  }

  /* 24 hours across a phone: every third hour is named, the row label gives way (but keeps
     8px of air before the first hour). */
  .rd-clock th {
    width: 80px;
    padding-right: 8px;
    letter-spacing: 0;
  }

  .rd-clock .rd-hr-minor {
    visibility: hidden;
  }

  .rd-bar {
    width: calc(100% - 2px);
  }

  .rd-headline,
  .rd-state {
    font-size: 16px;
    line-height: 24px;
  }
}