static/style.css

/* Visual language: nico-martin LFM2.5 WebGPU Space (editorial lab: paper + grid,
   hairlines, numbered smallcaps sections) × summary_audit.html (dark mode, viewer). */

:root {
  --paper: #faf9f6;
  --ink: #1a1a18;
  --muted: #8a8781;
  --hair: #e3e1db;
  --card: #ffffff;
  --soft: #f3f1ec;
  --accent: #b45309;
  --ok-bg: #e5f0e3;  --ok-ink: #2f5e2f;
  --warn-bg: #f7ecd4; --warn-ink: #8a5a10;
  --fail-bg: #f8e2e0; --fail-ink: #a13030;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161614; --ink: #e6e4df; --muted: #8f8c85; --hair: #2e2d2a;
    --card: #1d1d1a; --soft: #232320; --accent: #d98a3d;
    --ok-bg: #223a22; --ok-ink: #a8d4a4;
    --warn-bg: #3d2f12; --warn-ink: #ecd39a;
    --fail-bg: #401f1d; --fail-ink: #e8a9a2;
  }
}

* { box-sizing: border-box; }
body {
  font: 15px/1.5 -apple-system, "Helvetica Neue", sans-serif;
  color: var(--ink);
  background:
    linear-gradient(var(--hair) 1px, transparent 1px) 0 0 / 100% 56px,
    linear-gradient(90deg, var(--hair) 1px, transparent 1px) 0 0 / 56px 100%,
    var(--paper);
  background-blend-mode: soft-light, soft-light, normal;
  max-width: 960px; margin: 0 auto; padding: 0 1.2rem 4rem;
}

.eyebrow { font-size: 0.72em; letter-spacing: 0.18em; text-transform: uppercase;
           color: var(--muted); }
header.masthead { padding: 2.2rem 0 1.2rem; border-bottom: 1px solid var(--ink); }
header.masthead h1 { font-size: 2.6em; line-height: 1.05; margin: 0.25em 0 0.15em;
                     letter-spacing: -0.02em; }
header.masthead .sub { font-family: Georgia, serif; font-style: italic; color: var(--muted);
                       max-width: 40rem; }
.masthead-row { display: flex; align-items: flex-end; gap: 1.5rem; justify-content: space-between;
                position: relative; }
.bubble { position: absolute; right: 128px; top: -2px; max-width: 240px;
  background: var(--card); border: 1px solid var(--ink); border-radius: 8px;
  padding: 7px 12px; font-size: 0.82em; line-height: 1.35; z-index: 3;
  transform-origin: bottom right; animation: bubblepop 0.25s ease-out; }
.bubble::after { content: ""; position: absolute; right: -7px; bottom: 10px;
  width: 10px; height: 10px; background: var(--card);
  border-right: 1px solid var(--ink); border-top: 1px solid var(--ink);
  transform: rotate(45deg); }
@keyframes bubblepop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.botcorner.wave .arm { animation: wave 0.7s ease-in-out 3; }
@keyframes wave { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(-26deg); }
                  70% { transform: rotate(12deg); } }
@media (max-width: 640px) { .bubble { display: none; } }
/* busy = an episode is running: the librarian reads along, fast */
.botcorner.busy .pupils { animation-duration: 0.9s; }
.botcorner.busy .page,
.botcorner.busy .arm { animation-duration: 2.1s; }

/* consult = a tool call just fired: reach for the stack, magnifier out */
.botcorner.consult .arm { animation: consult 1s ease-in-out; }
@keyframes consult {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: rotate(-34deg); }
  75% { transform: rotate(-30deg); }
}
.botcorner .stackbook { transform-box: fill-box; transform-origin: center; }
.botcorner.consult .stackbook { animation: booklift 1s ease-in-out; }
@keyframes booklift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  40% { transform: translate(1px, -5px) rotate(-6deg); }
  70% { transform: translate(1px, -4px) rotate(-4deg); }
}
.botcorner .magnifier { opacity: 0; transform-box: fill-box; transform-origin: center; }
.botcorner.consult .magnifier { animation: magsweep 1s ease-in-out; }
@keyframes magsweep {
  0%, 100% { opacity: 0; transform: translate(6px, 6px) scale(0.7); }
  25% { opacity: 1; transform: translate(0, 0) scale(1); }
  45% { opacity: 1; transform: translate(-3px, 1px) scale(1); }
  65% { opacity: 1; transform: translate(2px, -1px) scale(1); }
  85% { opacity: 1; transform: translate(0, 0) scale(1); }
}

/* thought bubble: shown while a model turn is in flight (it really is thinking) */
.thought[hidden] { display: none; }
.thought { position: absolute; right: 108px; top: 6px; background: var(--card);
  border: 1px solid var(--muted); border-radius: 50%; padding: 8px 12px; z-index: 2;
  display: flex; gap: 4px; align-items: center; }
.thought::before, .thought::after { content: ""; position: absolute; background: var(--card);
  border: 1px solid var(--muted); border-radius: 50%; }
.thought::before { width: 8px; height: 8px; right: -10px; bottom: -6px; }
.thought::after { width: 4px; height: 4px; right: -17px; bottom: -13px; }
.thought span { width: 5px; height: 5px; border-radius: 50%; background: var(--muted);
  animation: thinkdots 1.2s infinite; }
.thought span:nth-child(2) { animation-delay: 0.2s; }
.thought span:nth-child(3) { animation-delay: 0.4s; }
@keyframes thinkdots { 0%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@media (max-width: 640px) { .thought { display: none; } }
@media (prefers-reduced-motion: reduce) { .thought span { animation: none; } }
.masthead-text { min-width: 0; }
.botcorner { width: 120px; flex: 0 0 auto; color: var(--ink); opacity: 0.85; }
.botcorner .pupils { animation: scanline 3.2s infinite; }
@keyframes scanline {                 /* read left-to-right, snap back like a carriage return */
  0%   { transform: translateX(-1.6px); }
  78%  { transform: translateX(1.8px); }
  84%  { transform: translateX(-1.6px); }
  100% { transform: translateX(-1.6px); }
}
.botcorner .page { transform-origin: 58px 90px; animation: pageflip 6.4s infinite; }
@keyframes pageflip {
  0%, 55%  { transform: rotate(0deg); opacity: 1; }
  70%      { transform: rotate(-38deg); opacity: 1; }
  78%      { transform: rotate(-64deg); opacity: 0; }
  79%, 100%{ transform: rotate(0deg); opacity: 0; }
  54.9%    { opacity: 1; }
}
.botcorner .arm { transform-origin: 58px 68px; animation: scribble 6.4s infinite; }
@keyframes scribble {
  0%, 55%, 100% { transform: rotate(0deg); }
  62% { transform: rotate(9deg); }
  70% { transform: rotate(-4deg); }
  76% { transform: rotate(6deg); }
}
@media (max-width: 640px) { .botcorner { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .botcorner .pupils, .botcorner .page, .botcorner .arm { animation: none; }
}

section.block { border: 1px solid var(--hair); background: var(--card);
                border-radius: 4px; margin: 1.4rem 0; }
section.block > .block-head { display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--hair); }
.block-num { border: 1px solid var(--hair); border-radius: 50%; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7em; color: var(--muted); }
.block-body { padding: 14px 16px; }

button { padding: 7px 16px; cursor: pointer; border: 1px solid var(--ink);
         border-radius: 3px; background: transparent; color: var(--ink); font: inherit;
         font-size: 0.85em; letter-spacing: 0.06em; text-transform: uppercase; }
button:hover { background: var(--soft); }
button:disabled { opacity: 0.45; cursor: default; }
select, input[type=text] { padding: 7px 10px; font: inherit; border: 1px solid var(--hair);
  border-radius: 3px; min-width: 230px; background: var(--card); color: inherit; }
.meta { color: var(--muted); font-size: 0.85em; }
.reject { color: var(--fail-ink); font-size: 0.9em; }

.caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  border: 1px solid var(--hair); border-radius: 3px; margin: 6px 0 10px; }
.caps > div { padding: 5px 10px; border-right: 1px solid var(--hair); font-size: 0.78em; }
.caps > div:last-child { border-right: none; }
.caps b { display: block; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.85em;
          color: var(--muted); font-weight: 500; }
.caps.spec { margin: 1rem 0 0.2rem; background: var(--card); }
.caps.spec a { color: inherit; }
footer.gate { margin-top: 2.2rem; border-top: 1px solid var(--hair); padding-top: 0.9rem;
              display: grid; gap: 5px; max-width: 34rem; }
footer.gate a { color: inherit; }
.gatebar { height: 5px; border: 1px solid var(--hair); border-radius: 3px;
           background: var(--card); overflow: hidden; }
.gatebar-fill { height: 100%; width: 0%; background: var(--ink);
                transition: width 0.8s ease-out; }
.health { font-size: 0.9em; }
.health.ok   { color: var(--ok-ink); }
.health.warm { color: var(--warn-ink); }
.health.bad  { color: var(--fail-ink); }

.gen { border: 1px solid var(--hair); border-radius: 4px; padding: 12px 14px;
       margin: 12px 0; background: var(--card); }
.gen h3 { margin: 0 0 8px; font-size: 0.78em; letter-spacing: 0.16em;
          text-transform: uppercase; color: var(--muted); font-weight: 600; }
details.tool { margin: 6px 0; border-left: 2px solid var(--hair); padding-left: 10px; }
details.tool summary { cursor: pointer; font-family: ui-monospace, monospace;
                       font-size: 0.83em; color: var(--muted); }
.actor { font-family: -apple-system, sans-serif; font-size: 0.85em; letter-spacing: 0.1em;
         text-transform: uppercase; color: var(--accent); }
.obs-label { font-size: 0.72em; letter-spacing: 0.1em; text-transform: uppercase;
             color: var(--muted); margin: 6px 0 0; }
details.tool[open] summary { color: var(--ink); }
details.tool pre { margin: 6px 0 2px; padding: 8px 10px; background: var(--soft);
  border-radius: 3px; font-size: 0.78em; overflow: auto; white-space: pre-wrap;
  word-break: break-word; max-height: 260px; }
.assistant { color: var(--muted); font-size: 0.85em; font-style: italic; margin: 4px 0; }
details.think { margin: 5px 0; border-left: 2px dotted var(--hair); padding-left: 10px; }
details.think summary { cursor: pointer; font-size: 0.78em; letter-spacing: 0.08em;
                        text-transform: uppercase; color: var(--muted); }
details.think pre { margin: 6px 0 2px; padding: 8px 10px; background: var(--soft);
  border-radius: 3px; font-size: 0.78em; color: var(--muted); white-space: pre-wrap;
  word-break: break-word; max-height: 220px; overflow-y: auto; font-style: italic; }
.nudge { color: var(--accent); font-size: 0.78em; letter-spacing: 0.08em;
         text-transform: uppercase; }
.coverage { display: inline-block; background: var(--warn-bg); color: var(--warn-ink);
            border-radius: 3px; padding: 0 6px; font-size: 0.75em; margin-left: 6px; }
.spin { display: inline-block; animation: pulse 1.2s infinite; color: var(--muted); }
@keyframes pulse { 50% { opacity: 0.25; } }

.tldr { margin: 10px 0 6px; padding: 12px 14px; background: var(--soft);
        border-radius: 3px; border-left: 3px solid var(--ink);
        font-family: Georgia, serif; font-size: 1.05em; position: relative; }
.tldr.stamped { padding-right: 132px; }   /* text never runs under the stamp */
.stamp { position: absolute; top: 8px; right: 14px; transform: rotate(-8deg);
  color: #a33327; border: 2px solid #a33327; border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--soft), inset 0 0 0 2px #a33327;
  padding: 3px 10px; font: 600 0.62em/1.3 -apple-system, sans-serif;
  letter-spacing: 0.18em; text-transform: uppercase; text-align: center;
  opacity: 0.82; pointer-events: none; mix-blend-mode: multiply;
  animation: stampin 0.45s cubic-bezier(0.2, 2.2, 0.4, 1); }
@media (prefers-color-scheme: dark) {
  .stamp { color: #e07a6d; border-color: #e07a6d;
           box-shadow: inset 0 0 0 1px var(--soft), inset 0 0 0 2px #e07a6d;
           mix-blend-mode: normal; }
}
@keyframes stampin {
  0%   { transform: rotate(-20deg) scale(2.4); opacity: 0; }
  60%  { transform: rotate(-8deg) scale(0.96); opacity: 0.9; }
  100% { transform: rotate(-8deg) scale(1); opacity: 0.82; }
}
@media (prefers-reduced-motion: reduce) { .stamp { animation: none; } }
.tldr.refusal { color: var(--muted); font-style: italic; background: transparent;
                border: 1px dashed var(--hair); border-left-style: dashed; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 2px; }
.chip { border-radius: 3px; padding: 1px 8px; font-size: 0.78em;
        font-family: ui-monospace, monospace; }
.chip.ok   { background: var(--ok-bg);   color: var(--ok-ink); }
.chip.warn { background: var(--warn-bg); color: var(--warn-ink); }
.chip.fail { background: var(--fail-bg); color: var(--fail-ink); }
.chip.muted{ background: var(--soft);    color: var(--muted); }

.rate { display: flex; gap: 10px; margin: 12px 0; align-items: center; }
.rate button.picked { background: var(--ink); color: var(--paper); }
.viewer { margin-top: 10px; }
.viewer summary { cursor: pointer; font-size: 0.8em; letter-spacing: 0.12em;
                  text-transform: uppercase; color: var(--muted); }
.viewer iframe { width: 100%; height: 420px; border: 1px solid var(--hair);
                 border-radius: 4px; margin-top: 8px; }