/* =============================================================================
   whois-sale.css — FOR SALE HERE                         (the sale-site addition)
   -----------------------------------------------------------------------------
   The card whois-sale.js puts under a report's head when the name is one this
   site sells. BRAUN, which on this estate means flat: a 4px corner on the
   panel and the key, 2px on the tag inside it, a hairline of solid ink rather
   than the report cards' soft line, because this is the one panel on the
   stage that is an offer and not a reading. The accent appears once, as the
   tag's FILL (--accent-fill with --on-accent type, the pair site.css keeps for
   exactly that job). Everything else is ink and paper.

   Tokens only, so the moon edition needs nothing here: dark.css redefines
   --ink, --paper, --ink-77, --ink-55, --accent-fill and --on-accent, and the
   card follows. It sits in the .wx stage's grid, whose gap spaces it.
   ========================================================================== */
.wx-sale {
    display: flex; align-items: center; gap: 1rem;
    padding: .85rem .9rem .85rem .85rem;
    border: 1px solid var(--ink); border-radius: 4px;
    background: var(--paper); color: var(--ink-77);
}
.wx-sale__tag {
    flex: 0 0 auto; align-self: stretch;
    display: inline-flex; align-items: center;
    min-height: 26px; padding: 0 .55rem; border-radius: 2px;
    background: var(--accent-fill); color: var(--on-accent);
    font-size: .625rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; line-height: 1.2; white-space: nowrap;
}
.wx-sale__body { flex: 1 1 auto; min-width: 0; }
.wx-sale__t { margin: 0; font-size: 1.05rem; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.wx-sale__t b { font-weight: 600; }
.wx-sale__p { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.wx-sale__m { margin: .25rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--ink-55); overflow-wrap: anywhere; }
/* The key: 34px, the WHOIS page's control height; 40 under a finger. Solid ink
   at rest because it is the card's one action; a hover answers with the
   outline, the same exchange the report's own ink keys make. */
.wx-sale__go {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 34px; padding: 0 .85rem;
    border: 1px solid var(--ink); border-radius: 4px;
    background: var(--ink); color: var(--paper);
    font-size: .6875rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; line-height: 1; text-decoration: none; white-space: nowrap;
    transition: background .2s var(--ease), color .2s var(--ease);
}
.wx-sale__go:hover { background: transparent; color: var(--ink); }
.wx-sale__go:focus-visible { border-radius: 4px; }
.wx-sale__go i { font-style: normal; font-size: 1.1em; }
@media (pointer: coarse) { .wx-sale__go { min-height: 40px; } }
/* Under 640px the three stack: tag, sentence, key — the key full width, the
   way the report's own export keys go on a phone. */
@media (max-width: 640px) {
    .wx-sale { flex-wrap: wrap; gap: .7rem; }
    .wx-sale__tag { align-self: flex-start; }
    .wx-sale__body { flex-basis: 100%; }
    .wx-sale__go { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .wx-sale__go { transition: none; } }
/* Paper keeps the offer, not the key: a link is not a thing paper can do. */
@media print {
    .wx-sale { break-inside: avoid; }
    .wx-sale__go { display: none; }
}
html.wx-printing .wx-sale__go { display: none; }

/* -------------------------------------------- the port's one header rule --
   Not the card: the only other thing this sheet does. The port's nav names
   two sale-page sections (Portfolio, Pricing) where domainchaos has one link
   (Generator), and the house first shows the section links at 1101px. Walked
   per pixel (tests/run.py's FIT_JS): 1.4px of slack at 1101 with the house's
   1.5rem gaps. Closing them to 1.1rem through the first band buys ~26px. */
@media (min-width: 1101px) and (max-width: 1180px) {
    .nav__links { gap: 1.1rem; }
}