/* ==========================================================================
   Brand AI Tools — "The Machine Room" · BASE LAYER (.cat-*)
   services/brand-design/brand-ai-tools.php. Section styles: assets/css/brand/brand-ai-tools/<id>.css.
   Art direction: software-forward. Ink rooms with paper breathers; terminals, run logs,
   status lights in token blue. Tokens from core.css only; no gradients except fine grid/dot patterns.
   ========================================================================== */
.cat{--cat-hero-t:clamp(136px,16vh,196px);--cat-gap:clamp(20px,2.4vw,32px);--cat-gap-l:clamp(40px,6vw,96px);--cat-head-mb:clamp(40px,5vw,72px);--cat-ok:var(--blue)}
.cat :focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- rooms ---------------------------------------------------------- */
.cat-room{position:relative;background:var(--ink);color:var(--on-ink-2);overflow:hidden;isolation:isolate}
.cat-room h2,.cat-room h3{color:var(--on-ink)}
.cat-room .g{color:var(--on-ink-3)}
.cat-room .lead{color:var(--on-ink-2)}
.cat-room__grid{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%)}
.cat-paper{position:relative;background:var(--paper)}
.cat-paper--alt{background:var(--paper-2)}

/* ---------- section head: a prompt line above the heading ------------------ */
.cat-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px var(--cat-gap-l);align-items:end;margin-bottom:var(--cat-head-mb)}
.cat-head--stack{grid-template-columns:minmax(0,1fr);max-width:62ch}
.cat-head .h2{max-width:19ch}
.cat-head .lead{max-width:54ch}
.cat-prompt{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-bottom:20px;font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cat-prompt b{font-weight:500;color:var(--blue)}
.cat-prompt span{color:var(--faint);letter-spacing:.04em;text-transform:none}
.cat-room .cat-prompt{color:var(--on-ink-3)}
.cat-room .cat-prompt span{color:var(--on-ink-3)}
@media (max-width:860px){.cat-head{grid-template-columns:minmax(0,1fr);align-items:start}}

/* ---------- status light --------------------------------------------------- */
.cat-led{position:relative;display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none}
.cat-led::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--blue);opacity:0}
.cat-led--off{background:var(--on-ink-line)}
.cat-paper .cat-led--off{background:var(--line-3)}
.cat-led--wait{background:transparent;box-shadow:inset 0 0 0 1.5px var(--blue)}
.is-live .cat-led--pulse::after{animation:cat-ping 1.8s var(--e) infinite}
@keyframes cat-ping{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.6);opacity:0}}

/* ---------- shared labels -------------------------------------------------- */
.cat-mono{font-family:var(--f);font-size:var(--t-xs);letter-spacing:.02em}
.cat-illus{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border:1px dashed var(--line-3);border-radius:var(--r-pill);font-family:var(--f);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.cat-room .cat-illus{border-color:var(--on-ink-line);color:var(--on-ink-3)}
.cat-kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border:1px solid var(--line-3);border-bottom-width:2px;border-radius:5px;font-family:var(--f);font-size:10.5px;color:var(--txt);background:var(--paper)}
.cat-room .cat-kbd{border-color:var(--on-ink-line);color:var(--on-ink-2);background:var(--on-ink-card)}

/* ---------- photo frame (production photography) --------------------------- */
.cat-photo{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--ink-2)}
.cat-photo img{width:100%;height:100%;object-fit:cover}
.cat-photo figcaption{position:absolute;left:12px;bottom:12px;right:12px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-family:var(--f);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-ink)}
.cat-photo figcaption span{padding:4px 9px;border-radius:var(--r-pill);background:rgba(25,25,29,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* ---------- reduced motion: everything final ------------------------------- */
@media (prefers-reduced-motion:reduce){.cat *,.cat *::before,.cat *::after{animation-duration:.001ms;animation-iteration-count:1;transition-duration:.001ms}}