/**
 * AICT "Workbench" tool-page theme  [2026-06-14]
 * Distinctive editorial/letterpress aesthetic for the tool runner — cream graph
 * paper, ink, single ember accent, Fraunces/Hanken/JetBrains-Mono type.
 * CSS-ONLY restyle of existing markup (no IDs/fields/ARIA touched). LIGHT mode
 * only — dark mode keeps its current styling. Loaded after tool-template.css.
 */
:root{
  --wb-paper:#f6efe2; --wb-paper2:#efe6d4; --wb-card:#fffdf8;
  --wb-ink:#211b16; --wb-ink-soft:#5b5046; --wb-line:#cdbfa6;
  --wb-ember:#d24516; --wb-ember-deep:#a8330c; --wb-moss:#2f5d3a;
}
@media (prefers-reduced-motion:no-preference){
  html:not([data-theme="dark"]) .aict-tool-page .wb-rise{animation:wb-rise .6s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes wb-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ===== scope: light mode, tool pages only ===== */
html:not([data-theme="dark"]) .aict-tool-page{
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  color:var(--wb-ink);
  background-color:var(--wb-paper);
  background-image:
    linear-gradient(#d8cab0 1px,transparent 1px),
    linear-gradient(90deg,#d8cab0 1px,transparent 1px),
    radial-gradient(circle at 50% -40px,rgba(210,69,22,.06),transparent 60%);
  background-size:28px 28px,28px 28px,100% 640px;
  border-radius:18px;
  border:2px solid var(--wb-ink);
  box-shadow:7px 7px 0 var(--wb-ink);
  padding:34px 30px 38px !important;
  margin-top:18px;margin-bottom:36px;
}

/* category kicker */
html:not([data-theme="dark"]) .aict-tool-page .aict-tool-category{
  font-family:'JetBrains Mono',monospace !important;
  font-size:12px !important;letter-spacing:.16em;text-transform:uppercase;
  color:var(--wb-ember-deep) !important;font-weight:700 !important;
  background:none !important;border:none !important;padding:0 !important;
  display:inline-flex;align-items:center;gap:9px;
}
html:not([data-theme="dark"]) .aict-tool-page .aict-tool-category::before{
  content:"";width:26px;height:2px;background:var(--wb-ember);display:inline-block;
}

/* tool title — Fraunces display */
html:not([data-theme="dark"]) .aict-tool-page .aict-tool-title{
  font-family:'Fraunces',Georgia,serif !important;
  font-optical-sizing:auto;font-weight:900 !important;
  font-size:clamp(2.3rem,4.6vw,3.5rem) !important;line-height:1 !important;letter-spacing:-.02em;
  color:var(--wb-ink) !important;-webkit-text-fill-color:var(--wb-ink) !important;
  margin:.3em 0 .25em !important;
}
html:not([data-theme="dark"]) .aict-tool-page .aict-tool-description{
  font-family:'Hanken Grotesk',sans-serif;color:var(--wb-ink-soft) !important;font-size:1.05rem;max-width:62ch;
}
/* The v2 hero forces white title/category/description at (0,0,4,1) inline specificity
   (intended for its original dark hero). Beat it with (0,0,5,1) so they read as ink on
   the cream workbench. Literal colors (not vars) to be bulletproof. */
html:not([data-theme="dark"]) .aict-tool-page-v2.aict-tool-page-v2 .aict-tool-header .aict-tool-title,
html:not([data-theme="dark"]) .aict-tool-page-v2.aict-tool-page-v2 .aict-tool-header h1{
  color:#211b16 !important;-webkit-text-fill-color:#211b16 !important;background:none !important;
}
html:not([data-theme="dark"]) .aict-tool-page-v2.aict-tool-page-v2 .aict-tool-header .aict-tool-description,
html:not([data-theme="dark"]) .aict-tool-page-v2.aict-tool-page-v2 .aict-tool-header > p{
  color:#5b5046 !important;-webkit-text-fill-color:#5b5046 !important;
}
html:not([data-theme="dark"]) .aict-tool-page-v2.aict-tool-page-v2 .aict-tool-header .aict-tool-category{
  color:#a8330c !important;-webkit-text-fill-color:#a8330c !important;background:none !important;border:none !important;padding:0 !important;
}

/* tactile panels: form, output, sidebar */
html:not([data-theme="dark"]) .aict-tool-page .aict-tool-form,
html:not([data-theme="dark"]) .aict-tool-page .aict-output,
html:not([data-theme="dark"]) .aict-tool-page .aict-tool-sidebar > .aict-sidebar-widget,
html:not([data-theme="dark"]) .aict-tool-page .aict-output-placeholder{
  background:var(--wb-card) !important;
  border:2px solid var(--wb-ink) !important;
  border-radius:14px !important;
  box-shadow:6px 6px 0 var(--wb-ink) !important;
}
html:not([data-theme="dark"]) .aict-tool-page .aict-output-placeholder{box-shadow:none !important;border-style:dashed !important;border-color:var(--wb-line) !important;}

/* inputs */
html:not([data-theme="dark"]) .aict-tool-page .aict-input,
html:not([data-theme="dark"]) .aict-tool-page .aict-textarea,
html:not([data-theme="dark"]) .aict-tool-page .aict-select{
  font-family:'Hanken Grotesk',sans-serif !important;
  background:var(--wb-paper) !important;color:var(--wb-ink) !important;
  border:1.5px solid var(--wb-line) !important;border-radius:10px !important;
  transition:border-color .18s,box-shadow .18s,background .18s !important;
}
html:not([data-theme="dark"]) .aict-tool-page .aict-input:focus,
html:not([data-theme="dark"]) .aict-tool-page .aict-textarea:focus,
html:not([data-theme="dark"]) .aict-tool-page .aict-select:focus{
  border-color:var(--wb-ember) !important;background:#fff !important;
  box-shadow:0 0 0 4px rgba(210,69,22,.15) !important;outline:none !important;
}
html:not([data-theme="dark"]) .aict-tool-page .aict-input::placeholder,
html:not([data-theme="dark"]) .aict-tool-page .aict-textarea::placeholder{color:#a8987f !important}

/* field labels → mono caps */
html:not([data-theme="dark"]) .aict-tool-page .aict-form-group > label,
html:not([data-theme="dark"]) .aict-tool-page label.aict-form-label{
  font-family:'JetBrains Mono',monospace !important;font-size:11px !important;
  letter-spacing:.1em;text-transform:uppercase;color:var(--wb-ink-soft) !important;font-weight:700 !important;
}

/* primary run button — ember + hard shadow + Fraunces */
html:not([data-theme="dark"]) .aict-tool-page #aict-submit-btn,
html:not([data-theme="dark"]) .aict-tool-page .aict-btn-primary{
  font-family:'Fraunces',serif !important;font-weight:600 !important;font-size:1.12rem !important;letter-spacing:-.01em;
  background:var(--wb-ember) !important;color:#fff !important;-webkit-text-fill-color:#fff !important;
  border:2px solid var(--wb-ink) !important;border-radius:11px !important;
  box-shadow:4px 4px 0 var(--wb-ink) !important;
  transition:transform .12s,box-shadow .12s,background .15s !important;
}
html:not([data-theme="dark"]) .aict-tool-page #aict-submit-btn:hover,
html:not([data-theme="dark"]) .aict-tool-page .aict-btn-primary:hover{
  background:var(--wb-ember-deep) !important;transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--wb-ink) !important;
}
html:not([data-theme="dark"]) .aict-tool-page #aict-submit-btn:active,
html:not([data-theme="dark"]) .aict-tool-page .aict-btn-primary:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--wb-ink) !important;}

/* output headings */
html:not([data-theme="dark"]) .aict-tool-page .aict-output-header h2,
html:not([data-theme="dark"]) .aict-tool-page .aict-output-content h2{
  font-family:'Fraunces',serif !important;font-weight:900 !important;letter-spacing:-.01em;color:var(--wb-ink) !important;
}
html:not([data-theme="dark"]) .aict-tool-page .aict-output-placeholder-title{font-family:'Fraunces',serif !important;font-weight:600 !important;color:var(--wb-ink) !important;}
html:not([data-theme="dark"]) .aict-tool-page .aict-output-placeholder-hint{color:var(--wb-ink-soft) !important;}

/* secondary action buttons (copy/export/etc) → letterpress mono */
html:not([data-theme="dark"]) .aict-tool-page .aict-output-actions button,
html:not([data-theme="dark"]) .aict-tool-page .aict-btn-secondary{
  font-family:'JetBrains Mono',monospace !important;font-size:11.5px !important;font-weight:700 !important;
  background:var(--wb-paper) !important;color:var(--wb-ink) !important;
  border:1.5px solid var(--wb-ink) !important;border-radius:8px !important;box-shadow:none !important;
  transition:background .14s,color .14s !important;
}
html:not([data-theme="dark"]) .aict-tool-page .aict-output-actions button:hover,
html:not([data-theme="dark"]) .aict-tool-page .aict-btn-secondary:hover{background:var(--wb-ink) !important;color:var(--wb-paper) !important;}

/* sidebar widgets */
html:not([data-theme="dark"]) .aict-tool-page .aict-sidebar-widget-title{font-family:'JetBrains Mono',monospace !important;letter-spacing:.08em;text-transform:uppercase;font-size:12px !important;color:var(--wb-ink) !important;font-weight:700 !important;}
html:not([data-theme="dark"]) .aict-tool-page .aict-sidebar-tips-list li{color:var(--wb-ink-soft) !important;}
html:not([data-theme="dark"]) .aict-tool-page .aict-sidebar-usage-cta{color:var(--wb-ember-deep) !important;font-weight:700 !important;}

/* usage bar — tactile */
html:not([data-theme="dark"]) .aict-tool-page #aict-usage-bar{
  background:var(--wb-paper2) !important;border:1.5px solid var(--wb-ink) !important;border-radius:10px !important;color:var(--wb-ink) !important;
}

/* faq / how-to headings keep the serif voice */
html:not([data-theme="dark"]) .aict-tool-page .aict-faq h2,
html:not([data-theme="dark"]) .aict-tool-page .aict-howto h2,
html:not([data-theme="dark"]) .aict-tool-page h2.aict-section-title{font-family:'Fraunces',serif !important;font-weight:900 !important;color:var(--wb-ink) !important;}