/* ============================================================================
   INTEROFFICE ANTICS — oa-theme.css
   Shared "sleek" design layer for the tools. Linked AFTER each tool's inline
   <style> so it overrides the original flat look. It keeps the deadpan-
   institutional soul (Courier "form" accents, stamps, form IDs) but adds the
   modern craft from the landing page: warm paper background, crisp white cards
   with soft shadows and rounded corners, refined type, smooth motion.

   Because every tool is built on the same CSS-variable names and class
   vocabulary, redefining the tokens here updates the whole suite from one file.
============================================================================ */

:root{
  /* Re-point the existing brand tokens to the modern palette.
     (Variable NAMES are unchanged so every var(--memo)/var(--manila) adopts these.) */
  --ink:#23211d;
  --memo:#FAF8F3;          /* page background / output cards -> warm paper */
  --manila:#ffffff;        /* input cards -> clean white */
  --manila-edge:#e3ddce;   /* card borders -> hairline */
  --blue:#1B5299;
  --red:#C0392B;
  --yellow:#F4D03F;
  --gray:#8d8a82;
  --sans:'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono:'Courier New', Courier, monospace;

  /* New helper tokens */
  --oa-ink-soft:#56524a;
  --oa-paper-2:#F3EFE6;
  --oa-line:#e3ddce;
  --oa-line-strong:#cfc6b2;
  --oa-blue-deep:#163f76;
  --oa-shadow-sm:0 1px 2px rgba(35,33,29,.05), 0 4px 14px rgba(35,33,29,.05);
  --oa-shadow-md:0 8px 30px rgba(35,33,29,.10), 0 2px 6px rgba(35,33,29,.06);
  --oa-radius:14px;
  --oa-ease:cubic-bezier(.22,.61,.36,1);
}

body{
  background:var(--memo);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.6;
}

/* Subtle ambient wash behind the page, matching the landing hero */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 520px at 82% -6%, rgba(27,82,153,.05), transparent 60%),
    radial-gradient(680px 460px at 4% 108%, rgba(192,57,43,.035), transparent 55%);
}

/* Placard wordmark — rounded, refined */
.placard{
  border:1.5px solid var(--ink); border-radius:10px;
  background:#fff; box-shadow:var(--oa-shadow-sm);
  padding:12px 30px;
}
.placard h1{ letter-spacing:5px; }
.tagline{ color:var(--blue); }

.form-id{ color:var(--gray); }

/* Cards — white, soft shadow, rounded. Covers input cards (.card) and any
   card-like containers built on the same class. */
.card{
  background:var(--manila);
  border:1px solid var(--oa-line);
  border-radius:18px;
  box-shadow:var(--oa-shadow-sm);
  padding:30px;
}
.card h2{ letter-spacing:-.4px; }
.card .sub{ color:var(--oa-ink-soft); }

/* Inputs */
textarea, input[type=text], input[type=email], input[type=number], select{
  border:1px solid var(--oa-line-strong) !important;
  border-radius:10px !important;
  background:#fff !important;
  transition:border-color .18s var(--oa-ease), box-shadow .18s var(--oa-ease);
}
textarea:focus, input:focus, select:focus{
  outline:none !important;
  border-color:var(--blue) !important;
  box-shadow:0 0 0 3px rgba(27,82,153,.14) !important;
}
.hint{ color:var(--gray); }
label{ color:var(--ink); }

/* Buttons — pill-ish, soft elevation, smooth */
.action{
  border:1.5px solid transparent !important;
  border-radius:10px !important;
  background:var(--blue) !important; color:#fff !important;
  letter-spacing:.3px !important; text-transform:none !important;
  box-shadow:0 6px 18px rgba(27,82,153,.22);
  transition:transform .18s var(--oa-ease), box-shadow .25s var(--oa-ease), background .2s;
}
.action:hover{ background:var(--oa-blue-deep) !important; transform:translateY(-2px); box-shadow:0 10px 26px rgba(27,82,153,.30); }
.action:disabled{ background:var(--gray) !important; box-shadow:none; transform:none; }

button.secondary{
  border:1.5px solid var(--oa-line-strong) !important;
  border-radius:10px !important;
  background:#fff !important; color:var(--ink) !important;
  text-transform:none !important; letter-spacing:.2px !important;
  transition:border-color .18s var(--oa-ease), background .2s, transform .18s var(--oa-ease);
}
button.secondary:hover{ border-color:var(--ink) !important; background:var(--oa-paper-2) !important; transform:translateY(-1px); }
button.secondary.danger{ border-color:var(--red) !important; color:var(--red) !important; }

/* Segmented controls — soft track, pill thumb */
.seg{
  border:1px solid var(--oa-line) !important;
  border-radius:12px !important;
  background:var(--oa-paper-2);
  padding:4px; gap:4px; overflow:hidden;
}
.seg button{
  border:none !important; border-radius:8px !important;
  background:transparent !important; color:var(--oa-ink-soft) !important;
  text-transform:none !important; letter-spacing:.2px !important;
  transition:background .2s, color .2s, box-shadow .2s;
}
.seg button.active{ background:#fff !important; color:var(--blue) !important; box-shadow:var(--oa-shadow-sm); }
.seg button:hover:not(.active){ background:transparent !important; color:var(--ink) !important; }
.seg.danger button.active{ background:var(--red) !important; color:#fff !important; }
/* checkbox-style toggles (Risk Meter, etc.) */
.chk{ border:1px solid var(--oa-line-strong) !important; border-radius:9px !important; background:#fff !important; transition:background .15s, color .15s, border-color .15s; }
.chk.on{ background:var(--red) !important; color:#fff !important; border-color:var(--red) !important; }

/* Output card — white, rounded, shadow; the stamp & attribution stay on-brand */
.output{
  background:#fff !important;
  border:1px solid var(--oa-line) !important;
  border-radius:18px !important;
  box-shadow:var(--oa-shadow-md);
}
.attribution{ background:transparent !important; border-top:1px solid var(--oa-line) !important; color:var(--gray) !important; }
.section-h{ color:var(--blue) !important; }

/* Stamp keeps its rotated red rubber-stamp character, just slightly softened */
.stamp{ border-radius:6px; }

/* Tabs (Resume Roaster) */
.tabs{ border-bottom:1px solid var(--oa-line) !important; }
.tabs button{ background:transparent !important; color:var(--oa-ink-soft) !important; border:none !important; }
.tabs button.active{ background:var(--ink) !important; color:#fff !important; border-radius:9px 9px 0 0; }

/* Result accent blocks used across tools (replies, scripts, grounding, etc.) */
.reply, .msg, .script{ border-radius:12px !important; }
.grounding, .changes, .genuine, .secrets-note{ border-radius:12px !important; }

/* Meters */
.meter-track{ border-radius:20px !important; overflow:hidden; }
.meter-fill{ border-radius:20px; }

/* Footer disclaimer */
footer{ color:var(--gray); }

/* Focus visibility everywhere */
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

/* Brag Sheet ledger rows, list items — soften dividers to hairlines */
.ledger li, .plain li, .bul li, .acc-list li, .wants li, .tips li, .qlist li,
.glossary li, .plan-feats li, .cliche, .flag, .pushback{ border-color:var(--oa-line) !important; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}