/* PLUTO free tools — sits on retro.css and reuses its tokens: desk/panel
   contexts, the 4px space scale, bevels, zero radius. Only what the tool
   pages add lives here. Tool pages do not load retro.js (no boot curtain,
   no sound): a visitor from Google lands on the tool, ready to use. */

.tools-page .page{padding-bottom:var(--s8)}
.crumbs{font-family:var(--mono);font-size:var(--fs-micro);color:var(--fg-soft);margin:0 0 var(--s4)}
.crumbs a{color:var(--fg-dim)}
.thead{margin:0 0 var(--s6);max-width:70ch}
.t-h1{font-family:var(--sans);font-weight:700;font-size:clamp(28px,4.2vw,44px);line-height:1.1;
  letter-spacing:-.018em;margin:var(--s2) 0 var(--s4);color:var(--fg);text-wrap:balance}
.thead .h-sub a{color:var(--fg-accent)}

/* ── form parts ─────────────────────────────────────────────────── */
.tform{display:grid;gap:var(--s2)}
.tlbl{display:grid;gap:6px;font-family:var(--mono);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.04em;color:var(--fg)}
.tform .field{margin:0}
.tform textarea.tin{font-size:var(--fs-sm);line-height:1.5;resize:vertical}
.tform select.tin{font-size:var(--fs-sm)}
.t-row{margin-bottom:var(--s2)}
.tcount{margin:0 0 var(--s2);font-family:var(--mono);font-size:var(--fs-micro);color:var(--fg-dim)}
.tcount b.over{color:var(--red)}
.tstatus{margin:var(--s3) 0 0;font-family:var(--mono);font-size:var(--fs-micro);color:var(--fg-dim);min-height:1.5em}
.tstatus.err{color:var(--red)}
.sgrid{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media(min-width:720px){.sgrid{grid-template-columns:1fr 1fr}.sfull{grid-column:1/-1}}

/* ── results ────────────────────────────────────────────────────── */
.tout{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--fg-rule)}
.tout h3{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-dim);margin:var(--s5) 0 var(--s2)}
.tout h3:first-child{margin-top:0}
.trow{display:grid;grid-template-columns:62px minmax(0,1fr);gap:var(--s3);padding:var(--s2) 0;
  border-bottom:1px solid var(--fg-rule);font-size:var(--fs-sm);line-height:var(--lh-sm)}
.trow b{display:block;font-weight:600}
.trow span.d{color:var(--fg-dim);overflow-wrap:anywhere}
.trow .st{align-self:start;padding:3px 0;box-shadow:var(--bevel-in);background:var(--face-2)}
.tkv{display:grid;grid-template-columns:minmax(110px,auto) minmax(0,1fr);gap:4px var(--s4);
  font-size:var(--fs-sm);line-height:var(--lh-sm);margin:0}
.tkv dt{font-family:var(--mono);font-size:var(--fs-micro);color:var(--fg-dim);padding-top:2px}
.tkv dd{margin:0;overflow-wrap:anywhere}
.tbig{display:flex;align-items:baseline;gap:var(--s2);margin:0 0 var(--s3);font-family:var(--mono)}
.tbig b{font-size:var(--fs-grade);line-height:1;font-variant-numeric:tabular-nums}
.tbig span{color:var(--fg-dim)}
.tfix{padding:var(--s3) 0;border-bottom:1px solid var(--fg-rule);font-size:var(--fs-sm);line-height:var(--lh-sm)}
.tfix b{display:block}
.tfix .pr{font-family:var(--mono);font-size:11px;letter-spacing:.1em;margin-right:6px;color:var(--amber-ink)}
.tfix p{margin:4px 0 0;color:var(--fg-dim)}
.tlist{margin:0;padding:0;font-family:var(--mono);font-size:var(--fs-micro);line-height:1.7;overflow-wrap:anywhere}
.code{margin:var(--s2) 0 var(--s3);padding:var(--s3);max-height:420px;overflow:auto;background:var(--well);
  box-shadow:var(--bevel-in);font-family:var(--mono);font-size:12.5px;line-height:1.55;color:var(--ink);
  white-space:pre-wrap;overflow-wrap:anywhere}
.tcopy{margin-top:var(--s5)}
.tmsg{font-family:var(--mono);font-size:var(--fs-micro);color:var(--green);margin-left:var(--s2)}
.tnotes{font-size:var(--fs-micro);color:var(--fg-dim);margin:0 0 var(--s3)}
.tcta{margin-top:var(--s5);padding:var(--s4);background:var(--face-2);box-shadow:var(--bevel-in);
  display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between;
  font-size:var(--fs-sm);line-height:var(--lh-sm)}
.tcta p{margin:0;max-width:56ch}
.tchip{display:inline-block;margin:0 6px 6px 0;padding:2px 8px;background:var(--face-2);box-shadow:var(--bevel-in);
  font-family:var(--mono);font-size:12px}
.kgroup{padding:var(--s3) 0;border-bottom:1px solid var(--fg-rule)}
.kgroup b{font-family:var(--mono);font-size:var(--fs-sm)}
.kgroup ul{margin:6px 0 0;padding:0;font-size:var(--fs-sm);line-height:1.6;color:var(--fg-dim)}

/* ── SERP preview: Google's own sizes (Arial 20px title / 14px text) ── */
.serp-wrap{display:grid;gap:var(--s5);margin-top:var(--s5);grid-template-columns:minmax(0,1fr)}
@media(min-width:1000px){.serp-wrap{grid-template-columns:minmax(0,640px) 360px}}
.serp-dev{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);margin:0 0 6px}
.serp{background:#fff;color:#202124;padding:16px 18px;font-family:Arial,Helvetica,sans-serif;
  box-shadow:var(--bevel-in);overflow:hidden}
.serp-d{max-width:640px}
.serp-m{max-width:360px}
.serp .s-site{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:14px;line-height:20px;color:#202124}
.serp .s-ico{width:26px;height:26px;flex:none;border-radius:50%;background:#f1f3f4;border:1px solid #dadce0;
  display:grid;place-items:center;font-size:12px;color:#5f6368}
.serp .s-url{font-size:12px;line-height:18px;color:#4d5156;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.serp .s-title{margin:0 0 4px;color:#1a0dab;font-size:20px;line-height:26px;font-weight:400}
.serp-d .s-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:600px}
.serp-m .s-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:18px;line-height:24px}
.serp .s-desc{margin:0;color:#4d5156;font-size:14px;line-height:22px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.serp-m .s-desc{-webkit-line-clamp:3}

/* ── next step + cards ──────────────────────────────────────────── */
.tnext{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;justify-content:space-between;
  margin:var(--s5) 0 0;padding:var(--s5);border:1px solid var(--fg-rule);background:rgba(10,20,16,.18)}
.tnext p{margin:0;max-width:62ch;color:var(--fg-dim);font-size:var(--fs-sm);line-height:var(--lh-sm)}
.tnext b{color:var(--fg)}
.tgroup{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-dim);margin:var(--s6) 0 var(--s3)}
.tgrid{display:grid;gap:var(--s3);grid-template-columns:1fr;margin:0;padding:0}
@media(min-width:640px){.tgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.tgrid{grid-template-columns:1fr 1fr 1fr}}
.tcard{display:flex;flex-direction:column;gap:6px;height:100%;padding:var(--s4);text-decoration:none;
  background:var(--face);color:var(--ink);box-shadow:var(--bevel-out),var(--lift-1);outline:1px solid var(--edge)}
.tcard:hover{background:var(--face-hi)}
.tcard b{font-family:var(--sans);font-weight:600;font-size:var(--fs-md);line-height:1.3}
.tcard span{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--dim)}
.tcard-main{background:var(--face-hi);outline:2px solid var(--amber-bar)}
.tsteps{list-style:decimal;padding-left:1.4em;max-width:70ch;display:grid;gap:var(--s3);
  font-size:var(--fs-base);line-height:var(--lh-base);color:var(--fg-dim)}
.tsteps b{color:var(--fg)}
.tsteps a,.note.tall a{color:var(--fg-accent)}
.note.tall{margin-top:var(--s5)}

/* ── FAQ ────────────────────────────────────────────────────────── */
.faq{max-width:78ch;display:grid;gap:var(--s2)}
.faq-q{border:1px solid var(--fg-rule);background:rgba(10,20,16,.14)}
.faq-q summary{cursor:pointer;padding:var(--s3) var(--s4);font-weight:600;color:var(--fg);list-style-position:outside;min-height:44px}
.faq-q[open] summary{border-bottom:1px solid var(--fg-rule)}
.faq-q p{padding:var(--s3) var(--s4) var(--s4);margin:0;color:var(--fg-dim);font-size:var(--fs-sm);line-height:var(--lh-sm)}

/* ── main scan: on-screen fixes, next step, share ─────────────── */
.scan-next{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--fg-rule)}
.scan-next h3{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);margin:0 0 var(--s2)}
.scan-share{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-top:var(--s4)}

@media(max-width:560px){
  .tnext .btn,.tcta .btn{width:100%}
  .t-row{grid-template-columns:1fr}
  .tkv{grid-template-columns:1fr}
  .tkv dt{padding-top:var(--s2)}
}