/* DomainHunter.si - the page of one name (/example.si) and the sentences under a result of the
   checker. Layout only, on the kit's scale (assets/app.css); every colour is a theme token.
   Classes: nm-* (name page), ck-* (checker rows). */

/* ---------- Title ---------- */

/* The name is the title, and a name can be 63 characters long. So the h1 and the ways out of
   the page (the kit's .dh-subnav) are children of the head itself and stand above both of its
   columns: a name keeps the title size up to 40 characters at every width, and the left
   column opens with the lede. The head's own row gap is replaced by the margins below: 8px
   to the links (the kit's), 12px to the lede, 24px to the answer where it stands under. */
.nm-head {
  row-gap: 0;
}

.nm-head > .nm-title,
.nm-head > .dh-subnav {
  grid-column: 1 / -1;
}

.nm-head > .dh-head-title > .dh-lede {
  margin-top: 12px;
}

.dh-page .nm-head > .dh-col-main {
  margin-top: 24px;
}

/* From 1200px the answer stands beside the lede: its state line (20/28) shares the baseline
   of the lede's first line (14/22, 12px down). */
@media (min-width: 1200px) {
  /* the name page is filed under the checker (data-page="check"), whose head has named
     areas: this head names its own four */
  [data-page="check"] .nm-head {
    grid-template-areas: "name name" "ways ways" "title main";
    grid-template-rows: auto auto auto;
  }

  .nm-head > .nm-title {
    grid-area: name;
  }

  .nm-head > .dh-subnav {
    grid-area: ways;
  }

  .dh-page .dh-head.nm-head > .dh-col-main {
    margin-top: 0;
    padding-top: 7px;
  }
}

/* A long name breaks anywhere; over 40 characters it is set a step smaller. */
.nm-title {
  overflow-wrap: anywhere;
}

.dh-h1.nm-title-m {
  font-size: 24px;
  line-height: 28px;
}

.nm-title-tld {
  color: hsl(var(--muted-foreground));
  font-weight: 400;
}

/* ---------- The answer ---------- */

.nm-answer {
  max-width: 35rem;
}

.nm-state {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
}

/* The state is the headline of the page: the kit's mark and label, one step up the scale. */
.nm-state .dh-state,
.nm-state .dh-state > span:not(.dh-mark) {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.nm-state .dh-state {
  gap: 10px;
  align-items: center;
  white-space: normal;
}

.nm-state .dh-mark {
  width: 11px;
  height: 11px;
}

.nm-detail {
  color: hsl(var(--muted-foreground));
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
}

.nm-meaning {
  margin: 8px 0 0;
  color: hsl(var(--foreground));
  font-size: 16px;
  line-height: 24px;
}

.nm-next-k {
  margin-top: 16px;
}

.nm-next {
  margin: 4px 0 0;
}

.nm-checked {
  margin-top: 16px;
}

.nm-note {
  margin-top: 12px;
}

.nm-ask {
  margin-top: 12px;
}

/* ---------- Lifeline ----------
   An ordered list of dated ticks. Each item draws the stretch of the line that follows its own
   tick. Narrow screens: a column, the line down the left edge. From 640px: a row, the line
   along the top, each stretch as wide as its share (nm-g-N = N parts) plus its own words.
   The one drawing of the site (the kit's LIFELINE values; the guide draws the same): what has
   run is 2px of ink, amber through a quarantine; what is scheduled is 1px solid; what happens
   only if nothing changes is 1px dashed, in the same tone - so the line never thins out
   between today and a date that will come. */

.nm-lifebox {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid hsl(var(--border));
}

.nm-life {
  display: flex;
  flex-direction: column;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.nm-ev {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  padding: 0 0 16px 20px;
  font-size: 13px;
  line-height: 20px;
}

.nm-ev:last-child {
  padding-bottom: 0;
}

/* the stretch after this tick */
.nm-ev::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: -10px;
  left: 4px;
  border-left: 1px solid hsl(var(--input));
}

.nm-ev:last-child::before {
  content: none;
}

/* the tick */
.nm-ev::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 9px;
  height: 1px;
  background: hsl(var(--muted-foreground));
}

.nm-past::after {
  background: hsl(var(--foreground));
}

/* today: a disc on the line */
.nm-now::after {
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: hsl(var(--foreground));
}

.nm-done::before {
  left: 3.5px;
  border-left: 2px solid hsl(var(--foreground) / 0.8);
}

.nm-done.nm-tone-quarantine::before {
  border-left-color: hsl(var(--dh-st-quarantine));
}

.nm-tone-rule::before {
  border-left: 1px dashed hsl(var(--input));
}

.nm-ev-k {
  grid-column: 1;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}

.nm-past .nm-ev-k,
.nm-now .nm-ev-k {
  color: hsl(var(--foreground));
}

.nm-ev-d {
  grid-column: 2;
  grid-row: 1;
  color: hsl(var(--foreground));
  text-align: right;
  white-space: nowrap;
}

.nm-ev-n {
  grid-column: 1 / -1;
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  line-height: 18px;
}

@media (min-width: 640px) {
  .nm-life {
    flex-direction: row;
    align-items: flex-start;
  }

  .nm-ev {
    display: flex;
    flex-direction: column;
    flex: 0 1 0;
    min-width: max-content;
    padding: 20px 24px 0 0;
  }

  .nm-ev:last-child {
    flex: 0 0 auto;
    padding-right: 0;
  }

  .nm-g-1 { flex-grow: 1; }
  .nm-g-2 { flex-grow: 2; }
  .nm-g-3 { flex-grow: 3; }
  .nm-g-4 { flex-grow: 4; }
  .nm-g-5 { flex-grow: 5; }
  .nm-g-6 { flex-grow: 6; }
  .nm-g-7 { flex-grow: 7; }
  .nm-g-8 { flex-grow: 8; }
  .nm-g-9 { flex-grow: 9; }
  .nm-g-10 { flex-grow: 10; }
  .nm-g-11 { flex-grow: 11; }
  .nm-g-12 { flex-grow: 12; }

  .nm-ev::before {
    top: 4px;
    right: 0;
    bottom: auto;
    left: 0;
    border-left: 0;
    border-top: 1px solid hsl(var(--input));
  }

  .nm-ev::after {
    top: 0;
    width: 1px;
    height: 9px;
  }

  .nm-now::after {
    top: 0;
    left: -4px;
    width: 9px;
    height: 9px;
  }

  .nm-ev:first-child.nm-now::after {
    left: 0;
  }

  .nm-done::before {
    top: 3.5px;
    left: 0;
    border-left: 0;
    border-top: 2px solid hsl(var(--foreground) / 0.8);
  }

  .nm-done.nm-tone-quarantine::before {
    border-top-color: hsl(var(--dh-st-quarantine));
  }

  .nm-tone-rule::before {
    border-left: 0;
    border-top: 1px dashed hsl(var(--input));
  }

  .nm-ev-d {
    text-align: left;
  }

  .nm-ev-k,
  .nm-ev-n {
    white-space: nowrap;
  }
}

/* ---------- Facts and "Other places to look" ---------- */

.nm-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.nm-col {
  min-width: 0;
}

/* Side by side only where a fact with a second item beside its value (a state and its
   reason, a host and what it is) still stands on one line: from 1280px, the facts a little
   the wider of the two. Narrower, the facts take the whole column and stay one line each. */
@media (min-width: 1280px) {
  .nm-cols {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: 48px;
  }
}

/* One column: the two lists keep the reading measure of the answer above them. */
@media (max-width: 1279px) {
  .nm-col {
    max-width: 35rem;
  }
}

.nm-facts {
  margin: 12px 0 0;
  border-top: 1px solid hsl(var(--foreground) / var(--dh-rule-a, 1));
}

.nm-fact {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  column-gap: 16px;
  /* the pitch of a ledger row: 4 + 20 + 3 and the rule */
  padding: 4px 0 3px;
  border-bottom: 1px solid hsl(var(--border));
  font-size: 13px;
  line-height: 20px;
}

.nm-fact dt {
  color: hsl(var(--muted-foreground));
  font-weight: 400;
}

.nm-fact dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 12px;
  min-width: 0;
  margin: 0;
  color: hsl(var(--foreground));
  overflow-wrap: anywhere;
}

.nm-fact dd .dh-state {
  vertical-align: baseline;
}

.nm-key {
  font-weight: 600;
}

.nm-none {
  color: hsl(var(--muted-foreground));
}

.nm-side {
  font-size: 12px;
}

/* A smaller item beside a 13/20 value sits on a 16px line, so the row keeps the 28px pitch
   of every ledger (set on the baseline of the value, a taller line box around 12px text
   reached under the 20px line and made the row a pixel taller). */
.nm-side,
.nm-fact dd .nm-detail {
  line-height: 16px;
}

.nm-before {
  margin: 12px 0 0;
  padding: 0;
  border-top: 1px solid hsl(var(--foreground) / var(--dh-rule-a, 1));
  list-style: none;
}

.nm-before li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 4px 0 3px;
  border-bottom: 1px solid hsl(var(--border));
  font-size: 13px;
  line-height: 20px;
}

.nm-before a {
  justify-self: start;
  font-weight: 500;
}

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

/* ---------- Seen by this site ---------- */

.nm-seen,
.nm-seen-none {
  max-width: 760px;
}

/* "Nothing to show" here is one sentence under its heading, not the foot of a list: it takes
   no rule of its own (a rule the width of the sentence's box read as a stray hairline). */
.nm-seen-none,
.nm-facts-none {
  margin: 12px 0 0;
  padding: 0;
  border-top: 0;
}

.nm-seen {
  margin-top: 12px;
}

/* one line per change, as in every ledger */
.nm-seen .dh-list tbody td {
  white-space: nowrap;
}

/* ---------- Checker: the two sentences under a result ----------
   A result is two table rows: the ledger row (ck-row) and, under it, what the answer means and
   the next step (ck-more). The pair shares one rule, under the second row. */

.dh-list tbody tr.ck-row td,
.dh-list tbody tr.ck-row th {
  border-bottom-color: transparent;
}

.dh-list tbody tr.ck-more td {
  padding-top: 0;
  padding-bottom: 8px;
  vertical-align: top;
}

.dh-list tbody tr.ck-more:hover,
.dh-list tbody tr.ck-more:hover td:first-child {
  background-color: transparent;
  box-shadow: none;
}

/* width 0 + a min-width: the sentences take the width the columns already have and never
   widen the table; they stay inside the reading measure and inside the screen when the table
   itself scrolls sideways. */
.ck-say {
  width: 0;
  min-width: min(100%, 44rem, calc(100vw - 56px));
  margin: 0;
  color: hsl(var(--foreground) / 0.82);
  font-size: 12px;
  line-height: 18px;
  white-space: normal;
}

.ck-next {
  color: hsl(var(--muted-foreground));
}

/* ---------- Checker: a list that never outgrows its box ----------
   The measure is the list's own box (a container), not the window: the sidebar may be open or
   folded, and the page column stops at 1180px. The default is the narrow arrangement - Domain,
   State, Expires / release by, Source - so a browser without container queries, a phone and a
   page without scripts get a list that fits: the name gives way first (an ellipsis; the whole
   name is in its title), and State is never pushed off the screen.
   From 719px of box the columns are fixed: each has the width its longest ordinary value needs,
   the name takes what is left, and a long name, reason or registry host is cut inside its own
   cell. Detail joins at 893px, Registered and Checked at 1110px (the sum of the columns plus
   a 16-character name each time), so the list needs no sideways scroll at any of them. */

.ck-wrap {
  container-type: inline-size;
}

.dh-list .ck-col-m,
.dh-list .ck-col-w {
  display: none;
}

/* 216px = the name cell's own padding and copy button (48) and the widest State column of a
   phone (168, where "Not found" is said short). The first line is for a browser without
   container units. Between a phone and the fixed columns the State column is 189px wide. */
.ck-list .dh-name {
  max-width: min(30ch, calc(100vw - 252px));
  max-width: min(30ch, calc(100cqw - 216px));
}

@container (min-width: 560px) {
  .ck-list .dh-name {
    max-width: min(30ch, calc(100cqw - 237px));
  }
}

/* Source: the registry host, a dot, "registrar". The host is the part that gives way. */
.ck-src {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}

.ck-src > * {
  flex: none;
}

.ck-src > .dh-host {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@container (min-width: 719px) {
  .ck-list {
    table-layout: fixed;
  }

  .ck-list .ck-c-state { width: 189px; }
  .ck-list .ck-c-detail { width: 174px; }
  .ck-list .ck-c-reg { width: 97px; }
  .ck-list .ck-c-date { width: 159px; }
  .ck-list .ck-c-when { width: 120px; }
  .ck-list .ck-c-source { width: 200px; }

  /* The name column is given what is left, in so many words. A sentence row spans seven
     columns whatever the heads show, so a name column left to itself shared the room with
     the columns that are not shown and a name was cut to a few letters. 548 = 189 + 159 + 200. */
  .ck-list thead th:first-child { width: calc(100cqw - 548px); }

  .ck-list tbody td.dh-detail,
  .ck-list tbody td.dh-when {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ck-list .dh-namecell > a {
    min-width: 0;
  }

  .ck-list .dh-name {
    display: block;
    max-width: none;
  }
}

@container (min-width: 893px) {
  .dh-list .ck-col-m {
    display: table-cell;
  }

  /* 722 = 548 + 174 (Detail) */
  .ck-list thead th:first-child { width: calc(100cqw - 722px); }
}

@container (min-width: 1110px) {
  .dh-list .ck-col-w {
    display: table-cell;
  }

  /* 939 = 722 + 97 (Registered) + 120 (Checked) */
  .ck-list thead th:first-child { width: calc(100cqw - 939px); }
}

@media (max-width: 640px) {
  /* 124px holds the longest label, "Latest release date", on one line */
  .nm-fact {
    grid-template-columns: 124px minmax(0, 1fr);
  }

  /* a name over 24 characters: one step down, so it takes two lines at most */
  .dh-h1.nm-title-l,
  .dh-h1.nm-title-m {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.02em;
  }

  .dh-list tbody tr.ck-more td:first-child {
    display: none;
  }
}