/* =====================================================================
   /tools/ — the small-utilities section.

   Every colour comes from the shell's existing custom properties
   (--paper, --paper-2, --tile, --ink, --ink-soft, --crimson,
   --crimson-text, --gold, --line, --line-2), which functions/_render.js
   already defines for light AND dark. Nothing here hard-codes a colour,
   so dark mode needs no second block and cannot drift out of step with
   the rest of the site.

   MOBILE FIRST. Every grid in this file starts at a single column and
   only widens at a breakpoint, because the calculator's natural shape
   is two side-by-side variants and that shape is unusable at 360px.
   Every control is at least 44px tall — comfortably past the 24px
   minimum — because the two things a reader actually touches on this
   page are a number field and a select.
   ===================================================================== */

.tl-wrap{ max-width:860px; margin:0 auto; }
.tl-main{ padding-bottom:24px; }

.tl-eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--crimson-text); margin:0 0 10px;
}
.tl-main h1{
  font-family:var(--display); font-weight:500;
  font-size:clamp(30px,5.4vw,46px); line-height:1.06; letter-spacing:-.01em;
  margin:0 0 14px; text-wrap:balance;
}
.tl-lede{
  font-family:var(--display); font-size:clamp(17px,2.3vw,20px); line-height:1.5;
  color:var(--ink-soft); max-width:56ch; margin:0 0 24px;
}
.tl-main h2{
  font-family:var(--display); font-weight:500;
  font-size:clamp(22px,3vw,28px); line-height:1.15;
  margin:38px 0 10px; text-wrap:balance;
}
.tl-main h3{
  font-size:13px; font-weight:700; letter-spacing:.06em;
  color:var(--ink); margin:22px 0 5px;
}
.tl-main p{ margin:0 0 12px; max-width:66ch; line-height:1.62; }
.tl-main ul,.tl-main ol{ margin:0 0 14px; padding-left:20px; max-width:66ch; }
.tl-main li{ margin-bottom:8px; line-height:1.6; }
.tl-main li::marker{ color:var(--gold); }
.tl-main code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em; background:var(--paper-2); border:1px solid var(--line-2);
  border-radius:4px; padding:1px 5px;
}
.tl-maths li code{ display:inline-block; margin:2px 0; }

/* ---------- the hub's tool cards ---------- */

.tl-cards{
  display:grid; grid-template-columns:1fr; gap:12px; margin:0 0 32px;
}
@media (min-width:640px){
  .tl-cards{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
}
.tl-card{
  display:flex; flex-direction:column; gap:7px;
  background:var(--tile); border:1px solid var(--line); border-radius:10px;
  padding:18px 18px 16px; text-decoration:none; color:var(--ink);
  transition:border-color .18s ease, transform .18s ease;
}
.tl-card:hover,.tl-card:focus-visible{ border-color:var(--crimson); transform:translateY(-1px); }
.tl-card b{ font-family:var(--display); font-size:21px; font-weight:500; line-height:1.15; }
.tl-card span{ font-size:14.5px; color:var(--ink-soft); line-height:1.5; }
.tl-card-go{ color:var(--crimson-text) !important; font-weight:600; font-size:13.5px !important; }

/* ---------- the calculator ---------- */

.tl-calc{
  background:var(--tile); border:1px solid var(--line); border-radius:12px;
  padding:16px; margin:0 0 14px;
}
.tl-variants{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:620px){ .tl-variants{ grid-template-columns:1fr 1fr; } }

.tl-variant{
  border:1px solid var(--line); border-radius:9px; margin:0; padding:6px 14px 14px;
  background:var(--paper);
}
.tl-variant legend{
  font-family:var(--display); font-size:19px; font-weight:500; padding:0 6px;
  display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;
}
.tl-tag{
  font-family:var(--ui); font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:999px; padding:2px 8px;
}

.tl-field{ margin-top:10px; }
.tl-field label{
  display:block; font-size:12.5px; font-weight:600; letter-spacing:.03em;
  color:var(--ink-soft); margin-bottom:4px;
}
.tl-field input,.tl-field select{
  width:100%; box-sizing:border-box; min-height:44px;
  font-family:var(--ui); font-size:16px;  /* 16px: anything smaller makes iOS zoom on focus */
  color:var(--ink); background:var(--paper-2);
  border:1px solid var(--line); border-radius:7px; padding:9px 11px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.tl-field input{ font-variant-numeric:tabular-nums; }
.tl-field input:focus,.tl-field select:focus{
  outline:none; border-color:var(--crimson);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--crimson) 22%, transparent);
}
.tl-field input[aria-invalid="true"]{ border-color:var(--crimson); }

.tl-rate{
  margin:12px 0 0 !important; font-size:13px; color:var(--ink-soft);
  border-top:1px dashed var(--line); padding-top:9px;
}
.tl-rate span{
  font-family:var(--display); font-size:24px; color:var(--ink);
  font-variant-numeric:tabular-nums; margin-right:5px;
}

.tl-opts{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:14px; }
@media (min-width:620px){ .tl-opts{ grid-template-columns:1fr 1fr; } }

.tl-actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:14px;
}
.tl-reset{
  min-height:44px; padding:10px 18px; border-radius:999px; cursor:pointer;
  font-family:var(--ui); font-size:13.5px; font-weight:600;
  color:var(--ink-soft); background:transparent; border:1px solid var(--line);
  transition:.18s ease;
}
.tl-reset:hover,.tl-reset:focus-visible{ color:var(--crimson); border-color:var(--crimson); }
.tl-privacy{ margin:0 !important; font-size:12.5px; color:var(--ink-soft); flex:1 1 200px; }

/* ---------- the result ---------- */

.tl-result{ margin:0 0 8px; }

.tl-verdict{
  display:flex; flex-direction:column; gap:4px; max-width:none !important;
  border:1px solid var(--line); border-left-width:4px; border-radius:0 10px 10px 0;
  background:var(--paper-2); padding:14px 16px; margin:0 0 12px !important;
}
.tl-verdict strong{
  font-family:var(--display); font-weight:500; font-size:clamp(20px,3.4vw,26px); line-height:1.15;
}
.tl-verdict span{ font-size:14px; color:var(--ink-soft); line-height:1.5; }
.tl-verdict--significant{ border-left-color:var(--gold); }
.tl-verdict--significant strong{ color:var(--crimson-text); }
.tl-verdict--not-significant{ border-left-color:var(--ink-soft); }
.tl-verdict--none,.tl-verdict--invalid{ border-left-color:var(--line); }
.tl-verdict--invalid strong{ color:var(--ink-soft); }

.tl-rows{ display:grid; grid-template-columns:1fr; gap:1px; margin:0 0 12px;
  background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
@media (min-width:700px){ .tl-rows{ grid-template-columns:1fr 1fr; } }
.tl-row{
  background:var(--tile); padding:12px 14px;
  display:grid; grid-template-columns:1fr auto; gap:2px 12px; align-items:baseline;
}
.tl-row dt{ font-size:12.5px; font-weight:600; color:var(--ink-soft); letter-spacing:.02em; }
.tl-row dd{ margin:0; }
.tl-figure{
  font-family:var(--display); font-size:clamp(20px,3vw,25px); line-height:1.1;
  font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap;
}
.tl-hint{ grid-column:1 / -1; font-size:12.5px; color:var(--ink-soft); line-height:1.45; }

.tl-summary{
  font-size:13.5px; color:var(--ink-soft); line-height:1.55;
  border-left:2px solid var(--line); padding-left:12px; margin:0 0 6px !important;
}
.tl-summary:empty{ display:none; }

/* ---------- prose furniture ---------- */

.tl-steps li{ line-height:1.6; }

.tl-siblings{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin-top:36px; padding-top:18px; border-top:1px solid var(--line);
}
.tl-siblings-l{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
}
.tl-siblings a{
  font-size:13px; color:var(--ink-soft); text-decoration:none;
  border:1px solid var(--line); border-radius:999px; padding:8px 13px;
  transition:.18s ease;
}
.tl-siblings a:hover,.tl-siblings a:focus-visible{ color:var(--crimson); border-color:var(--crimson); }

@media (prefers-reduced-motion: reduce){
  .tl-card,.tl-reset,.tl-siblings a{ transition:none; }
  .tl-card:hover,.tl-card:focus-visible{ transform:none; }
}

/* =====================================================================
   ANAGRAM GENERATOR (ag-) — /tools/anagram-generator/

   The tool sits above the fold and the sheet under it is meant to look
   like paper, because printing it is one of the two things people came
   to do. See functions/_tools.js for the page and
   feed/anagram-maker-core.js for the model both halves render from.
   ===================================================================== */

.ag-form{
  border:1px solid var(--line); border-radius:14px; background:var(--tile);
  padding:18px 18px 14px;
}
.ag-field label{
  display:block; font-size:11px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px;
}
.ag-field textarea{
  font:inherit; font-family:var(--display); font-size:18px; line-height:1.5;
  width:100%; box-sizing:border-box; padding:11px 13px; resize:vertical;
  border:1px solid var(--line); border-radius:10px;
  background:var(--paper); color:var(--ink);
}
.ag-field textarea:focus{ outline:none; border-color:var(--crimson); }

.ag-words-wrap{ margin-top:15px; }
.ag-words-h{
  font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 8px;
}
.ag-hint{
  font-weight:500; letter-spacing:0; text-transform:none; font-size:12px;
  margin-left:8px; opacity:.85;
}
.ag-words{ display:flex; flex-wrap:wrap; gap:7px; }
.ag-chip{
  display:inline-flex; align-items:center; gap:5px;
  border:1px solid var(--line); border-radius:9px; padding:4px 6px 4px 9px;
  background:var(--paper); font-size:13px;
}
.ag-chip.on{ border-color:var(--crimson); background:color-mix(in srgb, var(--crimson) 8%, transparent); }
.ag-chip.off{ opacity:.42; }
.ag-chip label{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.ag-chip.off label{ cursor:not-allowed; }
.ag-chip input{ accent-color:var(--crimson); margin:0; }
.ag-chip-word{ font-weight:600; letter-spacing:.02em; }
.ag-roll{
  font:inherit; font-size:14px; line-height:1; cursor:pointer; padding:3px 5px;
  border:1px solid transparent; border-radius:6px; background:transparent; color:var(--ink-soft);
}
.ag-roll:hover:not(:disabled),.ag-roll:focus-visible:not(:disabled){ color:var(--crimson); border-color:var(--crimson); }
.ag-roll:disabled{ opacity:.3; cursor:default; }

.ag-drop{
  font-size:12.5px; margin:11px 0 0; padding:7px 12px; border-radius:0 8px 8px 0;
  border-left:3px solid var(--gold); color:var(--ink-soft);
}

.ag-actions{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-top:16px; }
.ag-btn{
  font:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
  padding:9px 16px; border-radius:999px; border:1px solid var(--crimson);
  background:var(--crimson); color:var(--crimson-text); transition:.18s ease;
}
.ag-btn:hover,.ag-btn:focus-visible{ filter:brightness(1.08); }
.ag-btn--ghost{ background:transparent; color:var(--ink-soft); border-color:var(--line); }
.ag-btn--ghost:hover,.ag-btn--ghost:focus-visible{ color:var(--crimson); border-color:var(--crimson); filter:none; }
.ag-count{ font-size:12.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.ag-privacy{ font-size:12px; color:var(--ink-soft); margin:11px 0 0; }

/* ---------- the sheet ---------- */

.ag-sheet{
  margin-top:20px; padding:24px 24px 18px;
  border:1px solid var(--line); border-radius:12px; background:var(--paper);
}
.ag-sheet-h{
  font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 14px;
}
.ag-swatch{
  display:inline-block; width:.85em; height:.85em; vertical-align:-.06em;
  border-bottom:2px solid var(--crimson);
}
.ag-line{
  font-family:var(--display); font-size:clamp(19px, 2.6vw, 25px); line-height:2.1;
  margin:0; color:var(--ink);
}
.ag-gap{ white-space:nowrap; }
.ag-jumble{
  display:inline-block; padding:0 .18em; border-bottom:2px solid var(--crimson);
  font-family:var(--ui); font-size:.78em; font-weight:700;
  letter-spacing:.22em; text-indent:.22em; text-transform:uppercase;
  color:var(--crimson);
}
.ag-key{ margin-top:22px; padding-top:14px; border-top:1px dashed var(--line); }
.ag-key summary{
  cursor:pointer; font-size:12.5px; font-weight:600; color:var(--ink-soft);
}
.ag-key summary:hover{ color:var(--crimson); }
.ag-key-list{
  margin:11px 0 0; padding-left:1.3em;
  font-size:14px; line-height:1.9; color:var(--ink-soft);
  columns:2; column-gap:28px;
}
.ag-key-list b{ letter-spacing:.14em; color:var(--crimson); }
@media (max-width:520px){ .ag-key-list{ columns:1; } }

/* ---------- printing ----------
   SCOPED, and NOT the site's feed/paper.css. That stylesheet hides
   `body > *:not(.pk-sheets)` and is why the printables printed one blank
   page for months; /tools/ pages do not load it and must not start.
   Everything is hidden by visibility rather than display so the sheet
   keeps its place on the page instead of collapsing to the top. */
@media print{
  .tl-wrap > .tl-main > *{ display:none !important; }
  .tl-wrap > .tl-main > .ag-sheet{ display:block !important; }
  .tl-wrap > .tl-main > h1{ display:block !important; font-size:20pt; margin:0 0 4pt; }
  header,footer,nav,script{ display:none !important; }
  .ag-sheet{ border:none; padding:0; margin:0; background:none; }
  .ag-line{ font-size:17pt; line-height:2.4; }
  .ag-key{ break-inside:avoid; }
  .ag-key summary{ list-style:none; }
  .ag-key summary::-webkit-details-marker{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .ag-btn,.ag-roll{ transition:none; }
}