/* Tooloka - section and component layer. Tokens live in style.css */

/* ---------- Sections ---------- */
.section{padding:clamp(56px,8vw,96px) 0;border-top:1px solid var(--line)}
.section--flush{border-top:0}
.section__head{max-width:64ch}
.section__head h2{font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.1}
.section__head p{margin-top:var(--sp-sm);color:var(--muted);max-width:62ch}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:var(--sp-sm)}

/* ---------- Tool rows (one wide row per tool, never a card grid) ---------- */
.tools{margin-top:var(--sp-lg);border-top:1px solid var(--line)}
.tool-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-md);align-items:center;padding:28px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.tool-row:hover .tool-row__name{color:var(--accent)}
.tool-row__name{font-family:var(--font-display);font-weight:600;font-size:1.4rem;letter-spacing:-.02em;transition:color .15s ease}
.tool-row__desc{margin-top:6px;color:var(--muted);max-width:60ch}
.tool-row__side{display:flex;align-items:center;gap:var(--sp-md)}
.chip{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 10px;white-space:nowrap}
.arrow{color:var(--accent);font-size:20px;line-height:1}
.tools__note{margin-top:var(--sp-md);color:var(--muted);font-size:15px}

/* ---------- Numbered steps (vertical, hairline separated) ---------- */
.steps{margin-top:var(--sp-lg)}
.step{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--sp-md);padding:26px 0;border-top:1px solid var(--line)}
.step__n{font-family:var(--font-mono);font-size:13px;color:var(--accent);padding-top:6px}
.step h3{font-size:1.15rem;letter-spacing:-.01em}
.step p{margin-top:6px;color:var(--muted);max-width:62ch}

/* ---------- Two column: prose left, data list right ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(32px,5vw,72px);align-items:start}
.datalist{border-top:1px solid var(--line)}
.datalist__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-md);padding:13px 0;border-bottom:1px solid var(--line);align-items:baseline}
.datalist__k{font-size:15.5px}
.datalist__v{font-family:var(--font-mono);font-size:12.5px;color:var(--muted);text-align:right}

/* ---------- Panel ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(24px,3vw,36px)}
.panel h3{font-size:1.25rem}
.panel ul{margin-top:var(--sp-sm);padding-left:0;list-style:none}
.panel li{position:relative;padding-left:22px;margin-top:10px;color:var(--muted);max-width:70ch}
.panel li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:1px;background:var(--muted)}

/* ---------- Closing band ---------- */
.band{border-top:1px solid var(--line);padding:clamp(56px,7vw,88px) 0;text-align:center}
.band h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.band p{margin:var(--sp-sm) auto 0;color:var(--muted);max-width:52ch}
.band .btn{margin-top:var(--sp-md)}

/* ---------- Tool page head ---------- */
.toolhead{padding:clamp(48px,6vw,80px) 0 var(--sp-lg)}
.toolhead h1{font-size:clamp(2.2rem,4.4vw,3.2rem);line-height:1.06}
.toolhead__lede{margin-top:var(--sp-md);color:var(--muted);font-size:1.1rem;max-width:60ch}
.toolhead__meta{margin-top:var(--sp-md);display:flex;gap:var(--sp-sm);flex-wrap:wrap}
.toolhead__actions{margin-top:var(--sp-lg)}

/* ---------- Long form ---------- */
.doc{padding:clamp(48px,6vw,72px) 0 var(--sp-xl);max-width:70ch}
.doc h1{font-size:clamp(2rem,4vw,2.7rem);line-height:1.08}
.doc h2{font-size:1.35rem;margin-top:var(--sp-lg)}
.doc h3{font-size:1.1rem;margin-top:var(--sp-md)}
.doc p,.doc ul,.doc ol{margin-top:var(--sp-sm)}
.doc ul,.doc ol{padding-left:20px}
.doc li{margin-top:8px}
.doc a{color:var(--accent)}
.doc .updated{font-family:var(--font-mono);font-size:12.5px;color:var(--muted);margin-top:var(--sp-sm)}
.doc strong{font-weight:600}

/* ---------- Contact rows ---------- */
.contact{margin-top:var(--sp-lg);border-top:1px solid var(--line);max-width:70ch}
.contact__row{display:grid;grid-template-columns:170px minmax(0,1fr);gap:var(--sp-md);padding:16px 0;border-bottom:1px solid var(--line)}
.contact__k{color:var(--muted);font-size:14.5px}
.contact__v{font-family:var(--font-mono);font-size:14px}
.contact__v a{color:var(--accent);text-decoration:none}

/* ---------- Footer nav ---------- */
.foot-nav{display:flex;gap:var(--sp-md);flex-wrap:wrap}
.foot-nav a{text-decoration:none}
.foot-nav a:hover{color:var(--ink)}

/* ---------- Collapse ---------- */
@media(max-width:860px){
  .split{grid-template-columns:1fr}
  .tool-row{grid-template-columns:1fr;align-items:start}
  .tool-row__side{margin-top:var(--sp-sm)}
  .step{grid-template-columns:1fr;gap:6px}
  .contact__row{grid-template-columns:1fr;gap:4px}
  .datalist__row{grid-template-columns:1fr;gap:2px}
  .datalist__v{text-align:left}
}