/* =============================================================================
   domainchaos.com/history/ and /prices/ — the group sheet
   -----------------------------------------------------------------------------
   Loaded after site.css, toast.css and whois.css (and, on the dark twins,
   after dark.css), and read as an extension of whois.css: these two pages use
   its primitives unchanged — .wx-btn, .wx-seg, .wx-field, .wx-card, .wx-table,
   the console, the plate, the idle catalogue, the written band — and add only
   what a timeline and a price list need that a WHOIS report did not.

   Braun, as the rest of the estate: flat faces, a 4px corner on every control,
   hairline cards, labels in small capitals, a solid ink fill for what is
   chosen, and colour only where it carries a signal. The instruments (the
   tuning scale on /history/, the calculator LCD on /prices/) paint with the
   --wx-* variety tokens of whatever carries data-variety, so the stored T3 /
   ET66 / AB1 choice follows a visitor across from the WHOIS page.

   Prefixes: hp- is shared by both pages, hh- is /history/ only, pp- is
   /prices/ only. The moon answers are in the marked html[data-dark] section
   at the bottom; nothing above it depends on them.
   ========================================================================== */

/* ------------------------------------------------------------ the source
   The sentence every figure on these pages hangs from. It sits directly under
   the console, set as a plate rather than as small print, because "one
   registrar's prices" and "a partial archive" are the two facts a reader most
   needs and is least likely to go looking for. */
.hp-src {
    display: flex; align-items: flex-start; gap: .7rem; flex-wrap: wrap;
    margin: .9rem 0 0; padding: .6rem .8rem;
    border: 1px solid var(--line); border-left: 3px solid var(--wx-mark); border-radius: var(--wx-r);
    font-size: .84rem; line-height: 1.5; color: var(--ink-77); background: var(--paper);
}
.hp-src b { color: var(--ink); font-weight: 600; }
.hp-src__k {
    flex: 0 0 auto; padding-top: .12rem;
    font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55);
}
.hp-src__v { flex: 1 1 20rem; min-width: 0; }
.hp-src[data-tone="warn"] { border-left-color: var(--unsure); background: var(--unsure-wash); }

/* ---------------------------------------------------------- busy lamps
   Two questions go out at once on /history/ — the archive and the registry —
   and they come back seconds apart. One lamp each, so the wait is legible. */
.hp-lamps { display: flex; gap: 4px; flex: 0 0 auto; }
.hp-lamp {
    display: inline-flex; align-items: center; gap: .45rem; height: 28px; padding: 0 .6rem;
    font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
    color: var(--ink-77); background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--wx-r); font-variant-numeric: tabular-nums;
}
.hp-lamp i { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; box-shadow: inset 0 0 0 1px var(--ink-55); }
.hp-lamp[data-s="busy"] i { background: var(--ink-55); box-shadow: none; animation: wx-blink .9s steps(2, jump-none) infinite; }
.hp-lamp[data-s="ok"] i   { background: var(--free); box-shadow: none; }
.hp-lamp[data-s="bad"] i  { background: var(--unsure); box-shadow: none; }
.hp-lamp[data-s="off"] { opacity: .5; }
.hp-lamp small { font-size: 1em; font-weight: 600; letter-spacing: .04em; color: var(--ink-55); }
@media (max-width: 620px) {
    .wx-busy:has(.hp-lamps) { flex-wrap: wrap; }
    .hp-lamps { order: -1; flex: 1 1 100%; }
    .hp-lamp small { display: none; }
}

/* The two-key toggle row under the console holds the instrument choice and,
   on the prices page, the jump keys. */
.hp-jump { display: flex; flex-wrap: wrap; gap: 4px; }

/* =============================================================================
   THE RESULT STAGE (both pages)
   ========================================================================== */
.hp-report { padding-block: 0 clamp(44px, 6vw, 88px); }
.hp-out { gap: 1rem; }
/* Every child of the stage takes its one track. A .wx-card keeps whois.css's
   `grid-column: span 12` (right inside .wx-grid, which has twelve), and as a
   DIRECT child of this one-track stage that span conjured eleven implicit
   auto tracks: the head and the card grid were left in the first, 122px wide,
   with the name one letter to a line (measured at 1280). 1 / -1 spans the
   explicit grid only. */
.hp-out > * { grid-column: 1 / -1; }

/* The head: the name, what was found, and the export keys. */
.hp-head {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .9rem 1.4rem; align-items: start;
    padding: 1rem 1rem 1.1rem;
    border: 1px solid var(--line); border-radius: var(--wx-r); background: var(--paper);
}
.hp-head > * { min-width: 0; }
.hp-head .wx-id { gap: .55rem; }
.hp-head .wx-exp { justify-content: flex-end; }
@media (max-width: 860px) {
    .hp-head { grid-template-columns: minmax(0, 1fr); }
    .hp-head .wx-exp { justify-content: flex-start; }
}
.hp-lede { margin: 0; font-size: 1.05rem; font-weight: 300; line-height: 1.55; color: var(--ink); max-width: 66ch; }
.hp-lede b { font-weight: 600; }
.hp-head .wx-reads { grid-column: 1 / -1; }
/* The verdict spans both tracks: left in the auto column, a long sentence's
   max-content width became the column's, and squeezed the name beside it to
   one letter a line (measured at 1280 — the first proof of this page). */
.hp-head .hp-verdict, .hp-head .hp-more { grid-column: 1 / -1; }
.hp-head .wx-exp { max-width: 24rem; }

/* A verdict with a coloured edge: the one place a finding is allowed a hue. */
.hp-verdict {
    margin: 0; padding: .75rem .9rem .8rem;
    border: 1px solid var(--line); border-left: 3px solid var(--ink-55); border-radius: var(--wx-r);
    background: var(--wx-well); font-size: .92rem; line-height: 1.55; color: var(--ink-77);
}
.hp-verdict b { color: var(--ink); font-weight: 600; }
.hp-verdict__k {
    display: block; margin-bottom: .2rem;
    font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55);
}
.hp-verdict[data-tone="before"]  { border-left-color: var(--wx-mark); }
.hp-verdict[data-tone="within"]  { border-left-color: var(--free); }
.hp-verdict[data-tone="unknown"] { border-left-color: var(--unsure); background: var(--unsure-wash); }
.hp-verdict[data-tone="none"]    { border-left-color: var(--ink-55); }

/* The instrument's housing on the page. The drawing is SVG built to the
   width of this box (so its type stays at reading size on a phone rather than
   shrinking with a viewBox), painted with the variety tokens. */
.hp-inst {
    margin: 0; min-width: 0; padding: 0; border-radius: var(--wx-r);
    background: transparent;
}
.hp-inst > svg { display: block; width: 100%; height: auto; }
.hp-inst__cap {
    display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: .55rem .1rem 0;
    font-size: .74rem; color: var(--ink-55); line-height: 1.45;
}
.hp-inst__cap span { display: inline-flex; align-items: center; gap: .4rem; }
.hp-sw { display: inline-block; width: 14px; height: 8px; border-radius: 1px; flex: 0 0 auto; }
.hp-sw--ink    { background: var(--ink); }
.hp-sw--before { background: repeating-linear-gradient(135deg, var(--wx-mark) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--wx-mark); }
.hp-sw--tick   { width: 2px; height: 10px; background: var(--wx-label); }
.hp-sw--needle { width: 3px; height: 12px; background: var(--wx-mark); }

/* Links between the tools — a quiet row of chips carrying the name. */
.hp-more { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.hp-more .wx-lbl--inline { margin-right: .4rem; }
.hp-more a.wx-chip { text-decoration: none; }

/* ------------------------------------------------ the status-code mix bar
   One flat bar per year, split by the class of answer the crawler received.
   The four colours are the house's own, in its own meanings: ink for a page
   served, the quiet ink for a redirect, amber for refused or missing, red for
   a server that failed. Numbers are always in the title and in words beside
   it; the bar never carries a figure alone. */
.hp-mix {
    display: flex; height: 10px; min-width: 5rem; width: 100%; max-width: 12rem;
    border-radius: 2px; overflow: hidden; background: var(--wx-well-2);
}
.hp-mix i { display: block; height: 100%; min-width: 2px; }
.hp-mix i[data-c="2"] { background: var(--ink); }
.hp-mix i[data-c="3"] { background: var(--ink-55); }
.hp-mix i[data-c="4"] { background: var(--unsure); }
.hp-mix i[data-c="5"] { background: var(--taken); }
.hp-mix i[data-c="x"] { background: var(--line); }
.hp-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0; font-size: .74rem; color: var(--ink-55); }
.hp-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.hp-legend i { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.hp-legend i[data-c="2"] { background: var(--ink); }
.hp-legend i[data-c="3"] { background: var(--ink-55); }
.hp-legend i[data-c="4"] { background: var(--unsure); }
.hp-legend i[data-c="5"] { background: var(--taken); }
.hp-legend i[data-c="x"] { background: var(--line); box-shadow: inset 0 0 0 1px var(--ink-55); }

/* A horizontal bar inside a table cell, to the table's own maximum. */
.hp-cbar { display: flex; align-items: center; gap: .6rem; min-width: 7rem; }
.hp-cbar b { font-weight: 500; min-width: 3.4rem; text-align: right; color: var(--ink); }
.hp-cbar span { display: block; height: 6px; border-radius: 1px; background: var(--ink); min-width: 1px; }
.hp-cbar[data-before="1"] span { background: repeating-linear-gradient(135deg, var(--wx-mark) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--wx-mark); }

/* =============================================================================
   /history/
   ========================================================================== */
.hh-yr td, .hh-yr th { padding-right: 1rem; }
.hh-yr td:first-child { font-weight: 600; white-space: nowrap; }
.hh-yr td.hh-mixcell { width: 34%; }
.hh-yr td.hh-mixcell small { margin-top: .3rem; }
.hh-yr tr[data-before="1"] td:first-child::after {
    content: 'before'; margin-left: .5rem; padding: .05rem .35rem; vertical-align: .1em;
    font-size: .52rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--wx-label); border: 1px solid currentColor; border-radius: var(--wx-r);
}
.hh-yr tr[data-reg="1"] td:first-child::after {
    content: 'registered'; margin-left: .5rem; padding: .05rem .35rem; vertical-align: .1em;
    font-size: .52rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink); border: 1px solid currentColor; border-radius: var(--wx-r);
}

.hh-changes { list-style: none; margin: 0; padding: 0; }
.hh-changes li {
    display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) auto; align-items: baseline; gap: .2rem 1rem;
    padding: .45rem 0; border-top: 1px solid var(--line-soft); font-size: .86rem;
}
.hh-changes li:first-child { border-top: 0; }
.hh-changes li[hidden] { display: none; }
@media print { .hh-changes li[hidden] { display: grid; } .hh-changes li.hh-yearrow[hidden] { display: block; } }
.hh-changes li.hh-yearrow {
    display: block; padding-top: .9rem;
    font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wx-label);
    border-top: 1px solid var(--line);
}
.hh-changes li.hh-yearrow:first-child { padding-top: .2rem; border-top: 0; }
.hh-changes time { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hh-changes time small { display: block; color: var(--ink-55); font-size: .78em; }
.hh-changes .wx-mono { color: var(--ink-55); font-size: .78rem; overflow-wrap: anywhere; }
.hh-changes .wx-flags { margin-top: .2rem; }
.hh-changes a { white-space: nowrap; }
@media (max-width: 560px) {
    .hh-changes li { grid-template-columns: minmax(0, 1fr) auto; }
    .hh-changes li > div { grid-column: 1 / -1; grid-row: 2; }
}

.hh-gaps { list-style: none; margin: 0; padding: 0; }
.hh-gaps li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; padding: .45rem 0; border-top: 1px solid var(--line-soft); font-size: .86rem; }
.hh-gaps li:first-child { border-top: 0; }
.hh-gaps b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.hh-gaps span { color: var(--ink-55); }

/* =============================================================================
   /prices/
   ========================================================================== */
.pp-read {
    display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: 1.2rem 1.6rem; align-items: start;
}
@media (max-width: 900px) { .pp-read { grid-template-columns: minmax(0, 1fr); } }
.pp-read > * { min-width: 0; }
.pp-inst { margin: 0; min-width: 0; }
.pp-inst > svg { display: block; width: 100%; height: auto; max-width: 30rem; }
.pp-keys { display: flex; flex-wrap: wrap; gap: 3px; margin-top: .7rem; }
.pp-name {
    margin: 0; font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 200; letter-spacing: -.045em; line-height: 1.02;
    color: var(--ink); overflow-wrap: anywhere;
}
.pp-name b { font-weight: 600; }
.pp-sum { margin: .35rem 0 0; font-size: 1rem; font-weight: 300; line-height: 1.55; color: var(--ink-77); max-width: 60ch; }
.pp-sum b { color: var(--ink); font-weight: 600; }

.pp-cost { width: 100%; border-collapse: collapse; font-size: .84rem; font-variant-numeric: tabular-nums; }
.pp-cost th { text-align: left; font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55); padding: .4rem .7rem .4rem 0; border-bottom: 1px solid var(--line); }
.pp-cost td { padding: .42rem .7rem .42rem 0; border-bottom: 1px solid var(--line-soft); color: var(--ink); }
.pp-cost tr:last-child td { border-bottom: 0; }
.pp-cost td + td, .pp-cost th + th { text-align: right; }
.pp-cost tr[data-on="1"] td { font-weight: 600; }
.pp-cost tr[data-on="1"] td:first-child::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: .45rem; border-radius: 1px; background: var(--wx-mark); vertical-align: middle; }

/* The overview strip: five figures, the house's counting row. */
.pp-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--wx-r); background: var(--paper); }
.pp-stat { padding: .7rem .8rem .75rem; min-width: 0; }
.pp-stat + .pp-stat { border-left: 1px solid var(--line-soft); }
.pp-stat b { display: block; font-size: 1.6rem; font-weight: 200; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.pp-stat span { display: block; margin-top: .15rem; font-size: .56rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55); }
.pp-stat small { display: block; margin-top: .2rem; font-size: .74rem; color: var(--ink-55); line-height: 1.35; }
@media (max-width: 900px) {
    .pp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; }
    .pp-stat + .pp-stat { border-left: 0; }
    .pp-stat { border-top: 1px solid var(--line-soft); margin-top: -1px; }
    .pp-stat:nth-child(2n) { border-left: 1px solid var(--line-soft); }
    .pp-stat:first-child { grid-column: 1 / -1; }
    .pp-stat:first-child ~ .pp-stat:nth-child(2n) { border-left: 0; }
    .pp-stat:first-child ~ .pp-stat:nth-child(2n+1) { border-left: 1px solid var(--line-soft); }
}

/* The trap ranking: one row per ending, a two-part bar — what the first
   year costs, and what renewing adds on top — to a common scale. */
.pp-traps { list-style: none; margin: 0; padding: 0; counter-reset: trap; }
.pp-trap {
    display: grid; grid-template-columns: 1.8rem minmax(5.5rem, 8rem) minmax(0, 1fr) auto; align-items: center; gap: .3rem .9rem;
    padding: .45rem 0; border-top: 1px solid var(--line-soft); counter-increment: trap;
}
.pp-trap:first-child { border-top: 0; }
.pp-trap::before {
    content: counter(trap, decimal-leading-zero);
    font-size: .625rem; font-weight: 700; letter-spacing: .12em; color: var(--wx-label); font-variant-numeric: tabular-nums;
}
.pp-trap .wx-rowbtn { font-size: .95rem; overflow-wrap: anywhere; }
.pp-trap__n { text-align: right; font-size: .82rem; color: var(--ink-77); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-trap__n b { color: var(--ink); font-weight: 600; }
.pp-trap__n small { display: block; color: var(--ink-55); font-size: .9em; }
.pp-bar { display: flex; height: 10px; min-width: 0; border-radius: 2px; overflow: hidden; background: var(--wx-well); }
.pp-bar i { display: block; height: 100%; }
.pp-bar i.pp-bar__reg { background: var(--ink-55); }
.pp-bar i.pp-bar__add { background: var(--wx-key-lit); box-shadow: inset 0 0 0 1px var(--wx-ring); }
.pp-bar i.pp-bar__cut { background: var(--free); }
@media (max-width: 560px) {
    .pp-trap { grid-template-columns: 1.6rem minmax(0, 1fr) auto; }
    .pp-bar { grid-column: 2 / -1; grid-row: 2; }
}

/* The table tools row, and the table. */
.pp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px .9rem; }
.pp-tools .wx-field { flex: 1 1 13rem; }
.pp-tools .wx-exp { margin-left: auto; }
@media (max-width: 700px) { .pp-tools .wx-exp { margin-left: 0; } }
.pp-count { font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55); font-variant-numeric: tabular-nums; white-space: nowrap; }

.pp-table td, .pp-table th { padding-right: 1rem; }
.pp-table th.pp-num, .pp-table td.pp-num { text-align: right; }
.pp-table th.pp-num .wx-sort { flex-direction: row-reverse; }
.pp-table td.pp-num { white-space: nowrap; }
.pp-table tbody tr:hover td { background: var(--wx-well); }
.pp-table tbody tr[aria-selected="true"] td { background: var(--wx-well-2); }
.pp-table tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--wx-mark); }
.pp-table td:first-child { white-space: nowrap; padding-left: .4rem; }
.pp-up   { color: var(--taken); }
.pp-down { color: var(--free); }
.pp-flat { color: var(--ink-55); }
.pp-table .wx-flag { margin-left: .4rem; height: 17px; font-size: .5rem; }

.pp-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pp-pager .wx-btn { min-width: 2.6rem; padding: 0 .6rem; }
.pp-pager .wx-btn[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pp-pager__gap { padding: 0 .3rem; color: var(--ink-55); font-size: .8rem; }
.pp-pager__n { margin-left: auto; font-size: .74rem; color: var(--ink-55); font-variant-numeric: tabular-nums; }

/* =============================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .hp-lamp[data-s="busy"] i { animation: none; }
}

/* =============================================================================
   PRINT — the reading, not the controls
   ========================================================================== */
@media print {
    .hp-page .wx-hero, .hp-page .wx-guide, .hp-page .wx-never, .hp-page .wx-idle,
    .hp-more, .pp-tools, .pp-pager, .pp-keys, .hp-page .wx-exp, .hp-page .wx-card__tools { display: none !important; }
    .hp-report { padding: 0 !important; }
    .hp-src { margin: 0 0 8px; }
    .hp-head, .hp-verdict, .pp-read, .pp-stats, .pp-trap, .hh-changes li, .hh-gaps li { break-inside: avoid; }
    .hp-page .wx-card { break-inside: auto; }
    .hp-page .wx-scroll { overflow: visible; }
}

/* =============================================================================
   html[data-dark] — THIS SHEET'S MOON ANSWERS
   -----------------------------------------------------------------------------
   Almost nothing, and deliberately: every rule above reads a token, and
   dark.css and whois.css have already answered the tokens. What is left is
   the one literal-free wash that reads too faint on the moon ground.
   ========================================================================== */
html[data-dark] .hp-src { background: rgba(255, 255, 255, .03); }
html[data-dark] .hp-src[data-tone="warn"] { background: var(--unsure-wash); }
html[data-dark] .hp-lamp { background: rgba(255, 255, 255, .03); }