/* =============================================================================
   SKIN — pinthis.cloud
   Load AFTER library.css. library.css is a verbatim copy of hns.one's
   (~/hns/site/_lib/library.css, ~/hns/WEB-DESIGN-SYSTEM.md); this skin is the
   hns.one skin (a service site: dense, tables and code pulled forward) plus
   the handful of components only this site needs, at the bottom (P1–P4).
   Do not edit library.css here — change it upstream and copy it back.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   H1  SCALE AND RHYTHM
   16px base, a wider wrap (docs need the third column), a longer measure.
   -------------------------------------------------------------------------- */
:root{
  --fs-base:1rem;             /* 16px */
  --lh-body:1.6;

  --wrap:74rem;
  --gutter:1.25rem;
  --measure:70ch;
  --measure-tight:56ch;

  --section-y:var(--s7);      /* 48px — half the wildroot rhythm */
  --hero-y:var(--s7);
  --stack:var(--s4);
  --row-y:.55rem;             /* denser table rows */
  --tick-w:2.5rem;

  --fs-display:clamp(1.875rem,1.35rem + 2.2vw,2.75rem);
}
@media (max-width:52rem){
  :root{--section-y:var(--s6);--hero-y:var(--s6)}
}

/* -----------------------------------------------------------------------------
   H2  HEADINGS AND HERO
   Smaller display, more of the page given to the argument. The hero rail is
   where the trust facts go: what we run, where, and who signs it.
   -------------------------------------------------------------------------- */
h2{font-size:var(--fs-2xl)}
h3{font-size:var(--fs-lg)}
.sect-head{margin-bottom:var(--s5)}
.sect-head h2{max-width:26ch}
.lede{font-size:var(--fs-lg)}
.sect-sub{font-size:var(--fs-base)}

.hero{padding-block:var(--hero-y) calc(var(--hero-y) * .75)}
.hero h1{max-width:22ch}
.hero .lede{max-width:56ch}

/* -----------------------------------------------------------------------------
   H3  COMPONENT DENSITY
   -------------------------------------------------------------------------- */
.card{padding:var(--s4)}
.card h3{font-size:var(--fs-base)}
.card p{font-size:var(--fs-md)}
.grid{gap:var(--s3)}

.plain > li{padding:var(--s4) 0}
.plain b{font-size:var(--fs-base)}
.plain span{font-size:var(--fs-md)}

.steps > *{padding-block:var(--s4)}   /* not the shorthand: it would wipe the counter rail */
.steps h3{font-size:var(--fs-base)}
.steps p{font-size:var(--fs-md)}

.qa summary{font-size:var(--fs-base);padding:var(--s3) 0}
.qa .answer,.qa details > p,.qa details > div{font-size:var(--fs-md);
  padding-bottom:var(--s4)}

.note,.callout{padding:var(--s4) var(--s5)}

.kv{grid-template-columns:13rem minmax(0,1fr)}
.stat .v{font-size:var(--fs-xl)}

/* Tables and code are primary content here, not garnish. */
table{font-size:var(--fs-md)}
pre{font-size:var(--fs-sm);padding:var(--s3) var(--s4)}
.prose > * + *{margin-top:var(--s3)}
.prose p + p{margin-top:var(--s4)}

/* -----------------------------------------------------------------------------
   H4  HNS.ONE-ONLY COMPONENTS
   -------------------------------------------------------------------------- */

/* --- .trust: the "what it costs you in trust" block. Every service page owes
   one. Two columns: what we can see, and how you leave. -------------------- */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden}
.trust > div{background:var(--surface);padding:var(--s5)}
.trust h4{
  font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:var(--w-semi);
  letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--dim);
  margin-bottom:var(--s3);display:flex;align-items:center;gap:.45rem}
.trust h4::before{content:"◆" / "";color:var(--accent-text);font-size:.85em}
.trust p{font-size:var(--fs-md);color:var(--muted);margin:0}
.trust p + p{margin-top:var(--s3)}

/* --- .rrset: a DNS record block. Fixed columns, tabular, wraps inside its own
   scroller. This is the shape operators actually copy from. ---------------- */
.rrset{font-family:var(--font-mono);font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums}
.rrset table{table-layout:auto}
.rrset thead th{white-space:nowrap}
.rrset td{white-space:nowrap}
.rrset td.val{white-space:normal;overflow-wrap:anywhere;color:var(--muted)}

/* --- .plane: the "advanced — TLD owners" band. Quieted behind a rule rather
   than hidden, exactly as the panel does it. ------------------------------- */
.plane{border-top:1px solid var(--line);padding-top:var(--s5);margin-top:var(--s6)}
.plane > .label{display:block;margin-bottom:var(--s3)}
.plane .card,.plane .panel{background:transparent}

/* --- .endpoint: a service address with its status. Machine voice, marker and
   word, never colour alone. ------------------------------------------------ */
.endpoint{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3) 0;border-top:1px solid var(--line-soft)}
.endpoint:last-of-type{border-bottom:1px solid var(--line-soft)}
.endpoint .host{font-family:var(--font-mono);font-size:var(--fs-sm);
  font-weight:var(--w-semi);color:var(--ink)}
.endpoint .what{color:var(--muted);font-size:var(--fs-md)}
.endpoint .tag{margin-left:auto}

/* --- docs shell is live on this site. ------------------------------------ */
.docs{padding-block:var(--s6) var(--s8)}

/* Four service cards across a 64rem measure leaves ~13rem each, which wraps
   two-word headings and pushes the status tag onto its own line. Three up
   reads; the fourth wraps to a second row and that is fine. */
@media (min-width:60rem){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.card h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:.45rem}
.card h3 .tag{margin-left:0}

/* =============================================================================
   PINTHIS-ONLY COMPONENTS
   ========================================================================== */

/* --- P1 .plans: the price list. One card per plan, the price is the display
   number, the list is marker AND word. The recommended plan is ruled in
   accent, not shouted. ----------------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--s4)}
.plan{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.plan.pick{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.plan h3{font-size:var(--fs-base);display:flex;align-items:baseline;gap:.5rem}
.plan .price{font-size:var(--fs-2xl);font-weight:var(--w-semi);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.plan .price small{font-size:var(--fs-sm);font-weight:var(--w-normal);color:var(--muted)}
.plan .checks{margin:0}
.plan .checks > li{padding:.35rem 0;font-size:var(--fs-md)}
.plan .btn{margin-top:auto}
.plan .who{font-size:var(--fs-sm);color:var(--dim)}

/* --- P2 checkout: a radio list of plans, then the two fields. ------------ */
.choice{display:grid;gap:var(--s2)}
.choice label{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s3);align-items:center;
  padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);cursor:pointer;font-weight:var(--w-normal);text-transform:none;
  letter-spacing:0;font-size:var(--fs-base);color:var(--ink)}
.choice label:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.choice input{width:auto;min-height:0;margin:0;accent-color:var(--accent)}
.choice .sub{display:block;font-size:var(--fs-sm);color:var(--muted)}
.choice .amt{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.namebox{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.namebox input{flex:1 1 12rem;min-width:0}
.namebox .suffix{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--muted)}
.avail{min-height:1.5em;font-size:var(--fs-sm);color:var(--muted)}
.avail.ok{color:var(--ok)}
.avail.bad{color:var(--bad)}
.checkout{max-width:36rem}
.checkout .field{margin-top:var(--s4)}
.checkout .btn{margin-top:var(--s4)}

/* --- P3 account: usage meter, the key box. ------------------------------ */
.meter{height:.5rem;border-radius:999px;background:var(--line-soft);overflow:hidden;margin-top:.35rem}
.meter > i{display:block;height:100%;background:var(--accent);border-radius:999px}
.meter.warn > i{background:var(--warn)}
.keybox{border:1px dashed var(--accent);border-radius:var(--r-lg);padding:var(--s4) var(--s5);
  background:var(--accent-soft)}
.keybox h3{margin-bottom:var(--s2)}
.keybox p{font-size:var(--fs-md)}
.keybox .btn{margin-top:var(--s3)}
.token{font-family:var(--font-mono);font-size:var(--fs-sm);word-break:break-all;
  padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}

/* --- P4 (?) disclosure: one small control, detail hidden until asked. ---- */
.why{display:inline;margin-left:.25rem}
.why > summary{display:inline;list-style:none;cursor:pointer;color:var(--accent-text);
  font-size:var(--fs-sm);font-weight:var(--w-semi);text-decoration:underline dotted}
.why > summary::-webkit-details-marker{display:none}
.why > summary::before,.why > summary::after{content:none}
.why[open] > summary{text-decoration:none}
.why > .more{display:block;margin-top:var(--s2);font-size:var(--fs-md);color:var(--muted)}
/* --- Names: what each points at, and the addresses that reach it. ------ */
.name .name-head{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s2)}
.name .name-head .mono{font-size:var(--fs-base);font-weight:var(--w-semi)}
.name p{font-size:var(--fs-md);margin-bottom:var(--s2)}
.name .actions{margin-top:var(--s2)}
.links{font-size:var(--fs-sm)}
.links a,.links button{margin-right:var(--s2)}
table .links{display:block;margin-top:.15rem}
a.tag{text-decoration:none}
/* --- Pin something: the drop zone and its progress. ------------------- */
.drop{display:grid;gap:var(--s2);justify-items:center;text-align:center;cursor:pointer;
  padding:var(--s6) var(--s4);border:2px dashed var(--line);border-radius:var(--r-lg);background:var(--surface);
  transition:border-color .12s,background .12s}
.drop b{font-size:var(--fs-base)}
.drop span{font-size:var(--fs-md);color:var(--muted)}
.drop:hover,.drop:focus-visible,.drop.over{border-color:var(--accent);background:var(--accent-soft);outline:none}
.drop.busy{pointer-events:none;opacity:.7}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--accent-text);text-decoration:underline;cursor:pointer;min-height:0}
.linkish:disabled{opacity:.5;cursor:default}
.progress{display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:center;margin-top:var(--s3)}
.progress .meter{margin:0}
.progress .n{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
#pinbox .field{margin-top:var(--s3)}
#pinbox .namebox{margin-top:var(--s2)}
#pinbox .namebox input{flex-basis:22rem}
[hidden]{display:none !important}