/* Puzzle Rivet helper kit: tokens, shell and shared components for helper pages (see kit/README.md).
   Our own palette: sage paper, pine ink, rivet green, copper marks. Rounded cards, quiet type, little motion.
   Type is in rem so the reader's text size (up to 200%) scales everything; dark mode follows the system. */
:root{
  --k-paper:#f3f4ef;--k-card:#fffffc;--k-ink:#1d2621;--k-muted:#56625b;--k-line:#d5dad3;--k-line-strong:#8c978f;
  --k-accent:#1e6b4b;--k-accent-ink:#ffffff;--k-accent-soft:#e3ede6;--k-mark:#9a4f2a;--k-mark-soft:#f6e9e1;
  --k-danger:#8b2e27;--k-danger-soft:#f7e6e4;--k-focus:#8a4f00;
  --k-radius:18px;--k-radius-sm:12px;--k-tap:44px;--k-gap:14px;--k-shadow:0 1px 2px rgba(29,38,33,.06),0 6px 18px rgba(29,38,33,.06);
  --k-field:#ffffff;--k-accent-hover:#174f39;--k-placeholder:#5f6b63;
  --k-font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--k-speed:140ms;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --k-paper:#111713;--k-card:#19211c;--k-ink:#e6ebe5;--k-muted:#a7b3ab;--k-line:#2c3830;--k-line-strong:#66756b;
  --k-accent:#6cc79a;--k-accent-ink:#0b1a12;--k-accent-soft:#1d3327;--k-mark:#efa47c;--k-mark-soft:#3a2519;
  --k-danger:#f19b91;--k-danger-soft:#3a1f1c;--k-focus:#f2b860;--k-field:#0f1411;--k-accent-hover:#8fd8b2;--k-placeholder:#97a39b;
  --k-shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.3);color-scheme:dark;
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--k-paper);-webkit-text-size-adjust:100%}
body{margin:0;color:var(--k-ink);font:1rem/1.55 var(--k-font)}
a{color:var(--k-accent)}
:focus-visible{outline:3px solid var(--k-focus);outline-offset:2px}
.k-shell{max-width:760px;margin:0 auto;padding:12px 14px 40px}
.k-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--k-line);margin-bottom:18px}
.k-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--k-tap);min-width:var(--k-tap);padding:0 4px;font-weight:650;text-decoration:none}
.k-nav .k-brand{color:var(--k-ink);font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-size:.92rem;margin-right:auto}
.k-nav div{display:flex;flex-wrap:wrap;gap:4px 10px}
.k-head{margin:0 0 16px}
.k-eyebrow{margin:0;color:var(--k-accent);font-size:.74rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase}
.k-head h1{margin:4px 0 6px;font-size:clamp(1.9rem,8vw,2.8rem);line-height:1.08;font-weight:750;letter-spacing:-.01em}
.k-lede{margin:0;color:var(--k-muted);font-size:1.04rem}
.k-note{margin:12px 0 0;padding:10px 12px;border-radius:var(--k-radius-sm);background:var(--k-accent-soft);color:var(--k-ink);font-size:.9rem}
.k-card{background:var(--k-card);border:1px solid var(--k-line);border-radius:var(--k-radius);box-shadow:var(--k-shadow);padding:16px;margin:0 0 var(--k-gap)}
.k-card h2{margin:0 0 4px;font-size:1.12rem;font-weight:720}
.k-card>p{margin:0 0 12px;color:var(--k-muted)}
.k-step{display:inline-grid;place-items:center;width:1.65em;height:1.65em;margin-right:8px;border-radius:50%;background:var(--k-accent-soft);color:var(--k-accent);font-size:.85rem;font-weight:800;vertical-align:2px}
/* input */
.k-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,6.25rem),1fr));gap:8px}
.k-input{width:100%;min-width:0;min-height:var(--k-tap);border:1.5px solid var(--k-line-strong);border-radius:var(--k-radius-sm);background:var(--k-field);color:var(--k-ink);font:600 1rem var(--k-font);text-transform:uppercase;padding:8px 6px;text-align:center}
.k-input::placeholder{color:var(--k-placeholder);opacity:1;font-weight:500;text-transform:none}
.k-input:focus{border-color:var(--k-accent)}
.k-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--k-tap);min-width:var(--k-tap);padding:8px 16px;border:1.5px solid var(--k-accent);border-radius:999px;background:var(--k-field);color:var(--k-accent);font:700 .95rem var(--k-font);cursor:pointer;transition:background var(--k-speed),color var(--k-speed)}
.k-btn:hover{background:var(--k-accent-soft)}
.k-btn-primary{background:var(--k-accent);border-color:var(--k-accent);color:var(--k-accent-ink)}
.k-btn-primary:hover{background:var(--k-accent-hover);border-color:var(--k-accent-hover)}
.k-btn-quiet{border-color:var(--k-line-strong);color:var(--k-ink)}
.k-btn[disabled]{opacity:.45;cursor:not-allowed}
.k-error{margin:10px 0 0;color:var(--k-danger);font-weight:650}
.k-error:empty{display:none}
.k-status{margin:10px 0 0;color:var(--k-muted);font-size:.92rem;min-height:1.4em}
/* chips: tap-to-select words */
.k-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,6.25rem),1fr));gap:8px}
.k-chip{min-height:3.25rem;border:1.5px solid var(--k-line-strong);border-radius:var(--k-radius-sm);background:var(--k-field);color:var(--k-ink);font:700 .9rem var(--k-font);letter-spacing:.02em;padding:6px;overflow-wrap:anywhere;cursor:pointer;transition:transform var(--k-speed)}
.k-chip[aria-pressed="true"]{background:var(--k-ink);border-color:var(--k-ink);color:var(--k-paper)}
.k-chip.is-done{background:var(--k-accent-soft);border-color:var(--k-accent);color:var(--k-accent)}
.k-chip.is-shared{box-shadow:inset 0 0 0 3px var(--k-mark)}
.k-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.k-list li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;border-radius:var(--k-radius-sm);padding:4px 4px 4px 12px;background:var(--k-paper);font-weight:650}
.k-list li.is-wrong{background:var(--k-danger-soft)}
.k-list .k-tag{font-size:.78rem;font-weight:750;color:var(--k-muted);text-transform:uppercase;letter-spacing:.06em}
.k-field{display:grid;gap:6px;margin-top:14px;font-weight:650}
.k-select{width:100%;max-width:100%;min-height:var(--k-tap);border:1.5px solid var(--k-line-strong);border-radius:var(--k-radius-sm);background:var(--k-field);color:var(--k-ink);font:600 1rem var(--k-font);padding:6px 10px}
/* tiered hints */
.k-tiers{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.k-tier{border:1px solid var(--k-line);border-radius:var(--k-radius-sm);padding:12px 14px;background:var(--k-paper)}
.k-tier h3{margin:0 0 4px;font-size:.98rem}
.k-tier h3 span{color:var(--k-accent);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin-right:6px}
.k-tier p{margin:0}
.k-tier.is-new{animation:k-in var(--k-speed) ease-out}
@keyframes k-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* result card */
.k-result{display:grid;gap:8px;margin-top:10px}
.k-group{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 10px;border-radius:var(--k-radius-sm);background:var(--k-card);border:1px solid var(--k-line);padding:10px 12px}
.k-group b{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:8px;background:var(--k-accent);color:var(--k-accent-ink);font-size:.85rem}
.k-group .k-words{font-weight:700;letter-spacing:.02em}
.k-group .k-words mark{background:none;color:var(--k-mark);text-decoration:underline 2px;text-underline-offset:3px}
.k-group small{grid-column:2;color:var(--k-muted)}
.k-group.is-guess{border-style:dashed}
/* content, faq, footer */
.k-prose h2{font-size:1.12rem;margin:0 0 8px}
.k-prose p,.k-prose li{color:var(--k-muted)}
.k-faq details{border-top:1px solid var(--k-line)}
.k-faq summary{display:flex;align-items:center;min-height:var(--k-tap);padding:8px 0;font-weight:700;cursor:pointer}
.k-faq details p{margin:0 0 12px;color:var(--k-muted)}
.k-foot{padding:6px 2px;color:var(--k-muted);font-size:.9rem}
.k-foot .k-fine{font-size:.8rem;color:var(--k-muted)}
.k-foot p{margin:6px 0}
.k-foot nav{display:flex;flex-wrap:wrap;gap:12px}
.k-foot nav a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--k-tap);min-width:var(--k-tap);font-weight:650}
.k-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (min-width:640px){.k-shell{padding:20px 22px 56px}.k-card{padding:20px 22px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.k-list li .k-btn{flex-shrink:0;margin-left:auto}