/* =============================================================================
   domainchaos.com — the Expiry Watchlist and Drop Watch            dc-watch.css
   -----------------------------------------------------------------------------
   Loaded after site.css, toast.css, dark.css (on the moon edition) and
   whois.css, and read as an extension of whois.css: the keys, segments,
   fields, cards, lamps and variety tokens are that sheet's, reused as they
   are. What is here is only what the two watch pages add — the board rows, the
   import tray, the drop cards, and the small drop-countdown instrument, whose
   colours come from the same --wx-* tokens as the WHOIS instruments, so the
   T3 / ET66 / AB1 switch changes it with everything else.

   The four rules of whois.css hold here too: 4px on every control, one
   control height per row, a chosen control is the ink filled, labels in
   small tracked capitals. The moon answers are in the marked html[data-dark]
   section at the bottom; nothing above it depends on them.
   ========================================================================== */

/* ------------------------------------------------------------- the console */
.dcw-console .wx-q__go { min-width: 8rem; }
.dcw-improw { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dcw-improw p { margin: 0; font-size: .76rem; color: var(--ink-55); flex: 1 1 16rem; }

/* The import tray: the textarea and the parser's live reading of it. */
.dcw-import { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1rem; padding-top: .2rem; }
.dcw-import[hidden] { display: none; }
@media (max-width: 860px) { .dcw-import { grid-template-columns: minmax(0, 1fr); } }
.dcw-import .wx-area { min-height: 10rem; }
.dcw-import__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .55rem; }
.dcw-console.is-over { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* ---------------------------------------------------------------- the board */
.dcw-band { padding-block: 0 clamp(44px, 6vw, 88px); }
.dcw-top { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 1rem 1.4rem; align-items: stretch; }
@media (max-width: 760px) { .dcw-top { grid-template-columns: minmax(0, 1fr); } }
.dcw-next { margin: 0; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.dcw-next .wx-inst { min-height: 9rem; }
.dcw-next .wx-inst > svg { max-height: 15rem; }
.dcw-next figcaption { font-size: .78rem; color: var(--ink-55); line-height: 1.45; }
.dcw-next figcaption b { color: var(--ink); font-weight: 600; }
.dcw-next[hidden] { display: none; }
.dcw-top--solo { grid-template-columns: minmax(0, 1fr); }

.dcw-reads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--wx-r); align-self: start; }
.dcw-read { padding: .7rem .85rem; min-width: 0; border-left: 1px solid var(--line-soft); border-top: 1px solid var(--line-soft); }
.dcw-read:nth-child(3n + 1) { border-left: 0; }
.dcw-read:nth-child(-n + 3) { border-top: 0; }
.dcw-read__k { display: block; font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55); }
.dcw-read__v { display: block; margin-top: .2rem; font-size: 1.55rem; font-weight: 200; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dcw-read__v small { display: block; margin-top: .2rem; font-size: .74rem; font-weight: 500; letter-spacing: 0; line-height: 1.3; color: var(--ink-55); }
.dcw-read[data-tone="bad"] .dcw-read__v  { color: var(--taken); }
.dcw-read[data-tone="warn"] .dcw-read__v { color: var(--unsure); }
@media (max-width: 520px) {
    .dcw-reads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dcw-read { border-left: 1px solid var(--line-soft); border-top: 1px solid var(--line-soft); }
    .dcw-read:nth-child(3n + 1) { border-left: 1px solid var(--line-soft); }
    .dcw-read:nth-child(2n + 1) { border-left: 0; }
    .dcw-read:nth-child(-n + 3) { border-top: 1px solid var(--line-soft); }
    .dcw-read:nth-child(-n + 2) { border-top: 0; }
}

.dcw-warns { display: grid; gap: 6px; }
.dcw-warns:empty { display: none; }
.dcw-warn {
    margin: 0; padding: .6rem .8rem; font-size: .84rem; line-height: 1.5; color: var(--ink-77);
    border: 1px solid var(--unsure); border-left-width: 3px; border-radius: var(--wx-r); background: var(--unsure-wash);
}
.dcw-warn[data-tone="bad"] { border-color: var(--taken); background: var(--taken-wash); }
.dcw-warn b { color: var(--ink); font-weight: 600; }

.dcw-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.dcw-tools .wx-exp { margin-left: auto; }
@media (max-width: 900px) { .dcw-tools .wx-exp { margin-left: 0; } }
.dcw-tools .wx-row__grp { gap: .45rem; }
.dcw-seg-hide[hidden] { display: none; }
.dcw-expnote { margin: -.3rem 0 0; font-size: .78rem; color: var(--ink-55); }
.dcw-expnote:empty { display: none; }

/* One row per name: a hairline, a lamp, the name, the big number. */
.dcw-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.dcw-row { border-bottom: 1px solid var(--line); padding: .7rem 0 .75rem; display: grid; gap: .55rem; min-width: 0; position: relative; }
.dcw-row::before { content: ''; position: absolute; left: -1rem; top: -1px; bottom: -1px; width: 3px; background: transparent; }
.dcw-row[data-tone="bad"]::before  { background: var(--taken); }
.dcw-row[data-tone="warn"]::before { background: var(--unsure); }
@media (max-width: 620px) { .dcw-row::before { left: -.75rem; } }
.dcw-row.is-hit { animation: dcw-hit 1.6s var(--ease) 1; }
@keyframes dcw-hit { 0% { background: var(--wx-well-2); } 100% { background: transparent; } }

.dcw-row__main {
    display: grid; align-items: center; gap: .4rem 1.1rem;
    grid-template-columns: auto minmax(0, 1fr) minmax(7.5rem, auto) auto;
}
.dcw-row__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; }
@media (max-width: 760px) {
    .dcw-row__main { grid-template-columns: auto minmax(0, 1fr) auto; }
    .dcw-row__side { grid-column: 2 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
}
.dcw-row__id { min-width: 0; }
.dcw-row__d { font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.dcw-row__d:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.dcw-row__m { display: block; font-size: .78rem; color: var(--ink-55); overflow-wrap: anywhere; margin-top: .05rem; }
.dcw-row__exp { text-align: right; min-width: 0; }
.dcw-days { display: block; font-size: 1.6rem; font-weight: 200; letter-spacing: -.035em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dcw-days small { font-size: .42em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-55); margin-left: .3rem; }
.dcw-row[data-tone="bad"] .dcw-days  { color: var(--taken); }
.dcw-row[data-tone="warn"] .dcw-days { color: var(--unsure); }
.dcw-row__date { display: block; margin-top: .25rem; font-size: .74rem; color: var(--ink-55); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dcw-row__flags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
@media (max-width: 760px) { .dcw-row__flags { justify-content: flex-start; } }
.dcw-row__act { display: flex; gap: 4px; }
.dcw-row__act .wx-btn { height: 28px; padding: 0 .6rem; font-size: .6rem; }
@media (pointer: coarse) { .dcw-row__act .wx-btn { height: 36px; } }
.dcw-row__line { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--ink-77); }
.dcw-row__line b { color: var(--ink); font-weight: 600; }
.dcw-row__line--warn { padding: .45rem .65rem; border-left: 2px solid var(--taken); background: var(--taken-wash); }
.dcw-row__line--amber { padding: .45rem .65rem; border-left: 2px solid var(--unsure); background: var(--unsure-wash); }
.dcw-row__life { min-width: 0; min-height: 0; }
.dcw-row__life .wxa-timeline { max-width: 100%; }
.dcw-row__life[data-pending="1"] { min-height: 66px; }
.dcw-row__meta { margin: 0; font-size: .72rem; color: var(--ink-55); display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-variant-numeric: tabular-nums; }
.dcw-row__meta a { color: var(--ink-77); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.dcw-row__meta a:hover { color: var(--ink); text-decoration-color: currentColor; }
.dcw-changes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dcw-changes li { font-size: .78rem; color: var(--ink-77); padding-left: .9rem; position: relative; }
.dcw-changes li::before { content: ''; position: absolute; left: 0; top: .5em; width: 5px; height: 5px; border-radius: 1px; background: var(--ink-55); }
.dcw-changes li[data-new="1"] { color: var(--ink); font-weight: 600; }
.dcw-changes li[data-new="1"]::before { background: var(--wx-mark); }
.dcw-changes time { color: var(--ink-55); font-weight: 400; margin-right: .4rem; font-variant-numeric: tabular-nums; }

/* The armed state of a destructive key: the second press is the one that acts. */
.wx-btn[data-armed="1"] { background: var(--taken); border-color: var(--taken); color: #fff; }

/* ------------------------------------------------------------ drop watch */
.dcd-stage { gap: 1rem; }
.dcd-card { border: 1px solid var(--line); border-radius: var(--wx-r); background: var(--paper); min-width: 0; position: relative; overflow: hidden; }
.dcd-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--line); }
.dcd-card[data-phase="active"]::before { background: var(--ink-55); }
.dcd-card[data-phase="expiring"]::before, .dcd-card[data-phase="grace"]::before { background: var(--unsure); }
.dcd-card[data-phase="redemption"]::before, .dcd-card[data-phase="pending-delete"]::before { background: var(--taken); }
.dcd-card[data-phase="released"]::before { background: var(--free); }
.dcd-card.is-hit { animation: dcw-hit 1.6s var(--ease) 1; }
.dcd-top { display: grid; grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); gap: 1.2rem 1.6rem; padding: 1.1rem 1rem .9rem; }
@media (max-width: 860px) { .dcd-top { grid-template-columns: minmax(0, 1fr); } }
.dcd-inst { margin: 0; min-width: 0; align-self: start; }
.dcd-inst > svg { display: block; width: 100%; height: auto; }
.dcd-id { min-width: 0; display: flex; flex-direction: column; gap: .6rem; }
.dcd-id .wx-name { font-size: clamp(1.6rem, 3.8vw, 2.5rem); }
.dcd-head { margin: 0; font-size: 1.12rem; font-weight: 300; line-height: 1.5; color: var(--ink); max-width: 60ch; }
.dcd-head b { font-weight: 600; }
.dcd-sub { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--ink-77); max-width: 64ch; }
.dcd-count { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dcd-count > div { padding: .6rem 1rem .6rem 0; min-width: 0; }
.dcd-count > div + div { padding-left: 1rem; border-left: 1px solid var(--line-soft); }
.dcd-count b { display: block; font-size: 2rem; font-weight: 200; letter-spacing: -.04em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.dcd-count span { display: block; font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55); }
.dcd-count small { display: block; font-size: .76rem; color: var(--ink-55); margin-top: .1rem; font-variant-numeric: tabular-nums; }

/* The phase track: six keys, the current one lit in the variety's colour. */
.dcd-track { list-style: none; margin: 0; padding: 0 1rem; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
.dcd-track li {
    display: flex; align-items: center; justify-content: center; text-align: center; min-width: 0;
    height: var(--wx-h); padding: 0 .3rem; border-radius: var(--wx-r);
    font-size: .56rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.15;
    color: var(--ink-55); border: 1px solid var(--line); background: var(--paper);
}
.dcd-track li[data-past="1"] { color: var(--ink-77); background: var(--wx-well-2); border-color: transparent; }
.dcd-track li[data-on="1"] { background: var(--wx-key-lit); color: var(--wx-key-lit-ink); border-color: transparent; }
.dcd-track li[data-on="1"][data-k="released"] { background: var(--wx-key-lit-2); color: var(--wx-key-lit-2-ink); }
@media (max-width: 560px) { .dcd-track { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.dcd-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem 1.6rem; padding: .9rem 1rem; }
@media (max-width: 860px) { .dcd-grid { grid-template-columns: minmax(0, 1fr); } }
.dcd-grid > * { min-width: 0; }
.dcd-win td:first-child { color: var(--ink-77); }
.dcd-win tr[data-on="1"] td { font-weight: 600; }
.dcd-win 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; }
.dcd-win tr.dcd-release td { border-top: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.dcd-rule { margin: .6rem 0 0; font-size: .78rem; line-height: 1.55; color: var(--ink-55); }
.dcd-codes { display: flex; flex-wrap: wrap; gap: 4px; }
.dcd-code {
    display: inline-flex; align-items: center; gap: .35rem; height: 26px; padding: 0 .55rem;
    font-family: var(--wx-mono); font-size: .72rem; color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--wx-r); background: var(--paper);
}
.dcd-code[data-sev="bad"]  { border-color: var(--taken); color: var(--taken); }
.dcd-code[data-sev="warn"] { border-color: var(--unsure); color: var(--unsure); }
.dcd-code[data-new="1"] { box-shadow: inset 0 -2px 0 var(--wx-mark); }
.dcd-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: .75rem 1rem; border-top: 1px solid var(--line); background: var(--wx-well); }
.dcd-acts__sep { width: 1px; height: 20px; background: var(--line); margin: 0 .35rem; }
@media (max-width: 520px) { .dcd-acts__sep { display: none; } }
.dcd-acts .wx-lbl--inline { margin-right: .2rem; }
.dcd-foot { margin: 0; padding: .55rem 1rem .7rem; font-size: .72rem; color: var(--ink-55); border-top: 1px solid var(--line-soft); }

/* ----------------------------------------------- the drop-countdown instrument
   Drawn by dc-watch.js as plain SVG with these classes, so every colour is a
   --wx-* token and the variety / edition switch recolours it with no redraw. */
.dcd-i { font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums; }
.dcd-i .b-body  { fill: var(--wx-body); stroke: var(--wx-ring); stroke-width: 1; }
.dcd-i .b-face  { fill: var(--wx-face); }
.dcd-i .b-ring  { fill: var(--wx-face); stroke: var(--wx-line); stroke-width: 1; }
.dcd-i .b-ink   { fill: var(--wx-ink); }
.dcd-i .b-ink2  { fill: var(--wx-ink-2); }
.dcd-i .b-bink  { fill: var(--wx-body-ink); }
.dcd-i .b-line  { stroke: var(--wx-line); stroke-width: 1; fill: none; }
.dcd-i .b-tick  { stroke: var(--wx-ink); fill: none; }
.dcd-i .b-tickf { fill: var(--wx-ink); }
.dcd-i .b-grille { fill: var(--wx-grille); }
.dcd-i .b-needle { stroke: var(--wx-mark); stroke-width: 2; stroke-linecap: round; }
.dcd-i .b-hand  { fill: var(--wx-ink); }
.dcd-i .b-sec   { stroke: var(--wx-accent); stroke-width: 1.6; stroke-linecap: round; }
.dcd-i .b-secf  { fill: var(--wx-accent); }
.dcd-i .b-warn  { fill: var(--wx-warn); }
.dcd-i .b-bad   { fill: var(--wx-bad); }
.dcd-i .b-ok    { fill: var(--wx-ok); }
.dcd-i .b-win   { fill: var(--wx-mark); }
.dcd-i .b-dash  { stroke: var(--wx-ink-2); stroke-width: 1.4; stroke-dasharray: 2 4; fill: none; }
.dcd-i .b-key   { fill: var(--wx-key); }
.dcd-i .b-keyk  { fill: var(--wx-key-ink); }
.dcd-i .b-lit   { fill: var(--wx-key-lit); }
.dcd-i .b-litk  { fill: var(--wx-key-lit-ink); }
.dcd-i .b-lit2  { fill: var(--wx-key-lit-2); }
.dcd-i .b-lit2k { fill: var(--wx-key-lit-2-ink); }
.dcd-i .b-on    { fill: var(--wx-ink); }
.dcd-i .b-off   { fill: var(--wx-ink); opacity: .07; }
.dcd-i .b-glass { fill: rgba(255, 255, 255, .07); stroke: rgba(255, 255, 255, .16); }
.dcd-i .b-secg  { transform-box: view-box; transform-origin: 110px 110px; animation: dcd-sweep 60s linear infinite; }
@keyframes dcd-sweep { from { transform: rotate(var(--s0, 0deg)); } to { transform: rotate(calc(var(--s0, 0deg) + 360deg)); } }
@media (prefers-reduced-motion: reduce) {
    .dcd-i .b-secg { animation: none; transform: rotate(var(--s0, 0deg)); }
    .dcw-row.is-hit, .dcd-card.is-hit { animation: none; }
}

/* ------------------------------------------------------- the written band */
.dcw-guide .wx-art ul { margin: 0 0 1rem; padding-left: 1.1rem; }
.dcw-guide .wx-art li { margin-bottom: .45rem; line-height: 1.6; font-size: .96rem; }
.dcw-guide .wx-art li::marker { color: var(--accent); }

/* ------------------------------------------------------------------ print
   The board or the drop cards, on A4, nothing else. */
@media print {
    .dcw-band { padding: 0 !important; }
    .wx-hero, .dcw-guide, .wx-never, .dcw-tools, .dcw-row__act, .dcd-acts, .wxa-meter, .wx-meterbox,
    .dcw-import, .dcw-expnote, .wx-box__h .wx-tex { display: none !important; }
    .wx-panel { display: block !important; padding: 0 !important; }
    .dcw-row, .dcd-card, .dcw-read, .dcd-track { break-inside: avoid; }
    .dcw-row.is-hit, .dcd-card.is-hit { animation: none; }
    .dcd-i .b-secg { animation: none; }
    .dcw-row__life { min-height: 0 !important; }
}

/* =============================================================================
   html[data-dark] — THE MOON ANSWERS for this sheet's own literals
   ========================================================================== */
html[data-dark] .wx-btn[data-armed="1"] { color: #1A0505; }
html[data-dark] .dcd-i .b-glass { fill: rgba(255, 255, 255, .08); stroke: rgba(255, 255, 255, .2); }
html[data-dark] .dcd-i .b-off { opacity: .1; }