:root {
  --paper: #faf7f1;      /* cream, from the BanglaLLM BanglaSafe page */
  --panel: #f3eee4;
  --sheet: #ffffff;
  --ink: #1b1917;
  --muted: #655d51;
  --rule: #e7dfd2;
  --bottle: #0b5d3b;     /* office-file green */
  --pen: #1f5fb4;        /* fountain-pen blue */
  --stamp-red: #b3261e;
  --stamp-green: #1e7a46;
  --amber: #8a5a00;
  --f-ui: "Anek Bangla", "Noto Sans Bengali", "Bangla Sangam MN", system-ui, sans-serif;
  --f-formal: "Tiro Bangla", "Noto Serif Bengali", "Bangla MN", serif;
  --radius-sm: 6px;
  --radius-lg: 14px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--f-ui); }
img, canvas, select, input, textarea { max-width: 100%; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* Language: Bangla first with a quiet English line, or English only. */
.en { display: block; font-size: 0.78em; color: var(--muted); font-weight: 400; }
html[data-lang="en"] .bn, html[data-lang="en"] .bn-only { display: none !important; }
html[data-lang="bn"] .en-only { display: none !important; }
html[data-lang="en"] .en { display: inline; font-size: inherit; color: inherit; font-weight: inherit; }

button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--pen); outline-offset: 2px; }

/* ---------- hero ---------- */
.hero { padding: 18px 0 28px; border-bottom: 3px double var(--bottle); }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; }
@media (min-width: 920px) { .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; } }
.brand-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.brand { margin: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; font: 400 28px/1 var(--f-formal); color: var(--bottle); }
html[data-lang="en"] .brand .bn { display: inline !important; }
.brand-en { font: 700 15px var(--f-ui); color: var(--muted); }
.lang-switch { display: inline-flex; padding: 3px; border: 1px solid var(--rule); border-radius: 999px; background: var(--sheet); }
.lang-switch button { font: 600 14px var(--f-ui); color: var(--muted); background: transparent; border: 0; border-radius: 999px; padding: 5px 13px; cursor: pointer; white-space: nowrap; }
.lang-switch button[aria-checked="true"] { background: var(--bottle); color: #fff; }
.hero h1 { margin: 20px 0 10px; max-width: 16ch; font: 400 clamp(34px, 6.2vw, 58px)/1.1 var(--f-formal); color: var(--ink); }
html[data-lang="en"] .hero h1 { max-width: 18ch; font: 800 clamp(32px, 5.6vw, 54px)/1.08 var(--f-ui); letter-spacing: -0.015em; }
.lede { margin: 0 0 18px; max-width: 56ch; font-size: 18px; color: var(--muted); }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
button.cta { width: auto; margin: 0; padding: 12px 22px; font-size: 17px; }

.hero-art { display: flex; justify-content: center; min-width: 0; }
.more-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; font-size: 15px; font-weight: 700; }
.more-links a { color: var(--pen); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- storyboard: the six harness steps played on the paper, 12 s loop, 2 s per step ---------- */
.story { width: 100%; max-width: 460px; display: grid; gap: 10px; justify-items: center; }
.story-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--bottle); text-align: center; }
.mini-paper {
  position: relative; width: min(230px, 60vw); aspect-ratio: 3 / 4; padding: 30px 24px 26px;
  background: #fffdf6 repeating-linear-gradient(transparent 0 23px, #dfe7f1 23px 24px);
  border: 1px solid var(--rule); border-radius: var(--radius-sm); box-shadow: 0 22px 44px -26px rgba(27, 25, 23, 0.5);
  animation: float 6s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: rotate(2.5deg) translateY(0); } 50% { transform: rotate(1deg) translateY(-10px); } }
.mini-line { position: relative; display: block; height: 6px; margin: 8px 0 15px; border-radius: 4px; background: #b7c4da; }
.w40 { width: 40%; } .w55 { width: 55%; } .w70 { width: 70%; } .w80 { width: 80%; } .w85 { width: 85%; } .w90 { width: 90%; }
.mini-sig { position: absolute; left: 24px; bottom: 18px; font: 19px "Homemade Apple", cursive; color: var(--pen); transform: rotate(-5deg); }
.mini-scan {
  position: absolute; left: 6%; right: 6%; height: 18%; top: 6%; border-radius: 6px; opacity: 0;
  background: linear-gradient(180deg, rgba(31, 95, 180, 0) 0%, rgba(31, 95, 180, 0.22) 70%, rgba(31, 95, 180, 0.55) 100%);
  border-bottom: 2px solid var(--pen); animation: scan 12s ease-in-out infinite;
}
@keyframes scan { 0% { top: 6%; opacity: 0; } 1.5% { opacity: 1; } 15% { top: 76%; opacity: 1; } 16.6%, 100% { top: 76%; opacity: 0; } }
.mini-tag {
  position: absolute; top: 8px; right: 10px; padding: 0 8px; border: 1px solid currentColor; border-radius: 999px; background: #fff;
  font-size: 11px; font-weight: 700; color: var(--stamp-green); white-space: nowrap; opacity: 0; animation: tag 12s ease-out infinite;
}
@keyframes tag { 0%, 17% { opacity: 0; transform: translateY(-6px); } 20% { opacity: 1; transform: none; } 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
.mark { position: absolute; left: calc(100% + 7px); top: 50%; translate: 0 -50%; font-style: normal; font-weight: 800; font-size: 15px; line-height: 1; opacity: 0; }
.mark.ok { color: var(--stamp-green); }
.mark.bad { color: var(--stamp-red); }
.m1 { animation: m1 12s ease-out infinite; } .m2 { animation: m2 12s ease-out infinite; }
.m3 { animation: m3 12s ease-out infinite; } .m4 { animation: m4 12s ease-out infinite; }
@keyframes m1 { 0%, 34% { opacity: 0; scale: 0.3; } 36% { opacity: 1; scale: 1.3; } 38%, 95% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; } }
@keyframes m2 { 0%, 37% { opacity: 0; scale: 0.3; } 39% { opacity: 1; scale: 1.3; } 41%, 95% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; } }
@keyframes m3 { 0%, 40% { opacity: 0; scale: 0.3; } 42% { opacity: 1; scale: 1.3; } 44%, 95% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; } }
@keyframes m4 { 0%, 43% { opacity: 0; scale: 0.3; } 45% { opacity: 1; scale: 1.3; } 47%, 95% { opacity: 1; scale: 1; } 99%, 100% { opacity: 0; } }
.lens {
  position: absolute; left: calc(100% - 12px); top: 50%; width: 34px; height: 34px; translate: -8px -50%; opacity: 0;
  border: 3px solid var(--pen); border-radius: 50%; background: rgba(31, 95, 180, 0.08); animation: lens 12s ease-in-out infinite;
}
.lens::after { content: ""; position: absolute; right: -9px; bottom: -3px; width: 12px; height: 3px; border-radius: 2px; background: var(--pen); rotate: 45deg; }
@keyframes lens { 0%, 50% { opacity: 0; translate: -8px -50%; } 53% { opacity: 1; } 58% { translate: 6px -50%; } 63% { translate: -2px -50%; } 66% { opacity: 1; } 67.5%, 100% { opacity: 0; } }
.mini-bubble {
  position: absolute; left: 14px; right: 14px; bottom: 56px; padding: 5px 8px; border-radius: 10px; background: var(--pen);
  color: #fff; font-size: 12px; font-weight: 700; text-align: center; white-space: nowrap; opacity: 0; animation: bubble 12s ease-out infinite;
}
.mini-bubble::after { content: ""; position: absolute; left: 22px; bottom: -6px; border: 6px solid transparent; border-top-color: var(--pen); border-bottom: 0; }
@keyframes bubble { 0%, 67% { opacity: 0; scale: 0.7; } 70% { opacity: 1; scale: 1; } 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
.mini-stamp {
  position: absolute; left: 50%; translate: -50% -50%; padding: 5px 12px; border: 4px double currentColor; border-radius: 8px;
  font: 800 20px/1.1 var(--f-ui); font-variation-settings: "wdth" 78; white-space: nowrap;
  background: rgba(255, 255, 255, 0.72); mix-blend-mode: multiply; opacity: 0;
}
.mini-stamp.bad { top: 40%; rotate: -11deg; color: var(--stamp-red); animation: stamp-bad 12s ease-out infinite; }
.mini-stamp.good { top: 64%; rotate: -5deg; color: var(--stamp-green); animation: stamp-good 12s ease-out infinite; }
@keyframes stamp-bad { 0%, 46% { opacity: 0; scale: 1.8; } 48.5% { opacity: 1; scale: 0.95; } 50% { opacity: 0.92; scale: 1; } 83% { opacity: 0.92; } 86%, 95% { opacity: 0.2; } 99%, 100% { opacity: 0; } }
@keyframes stamp-good { 0%, 84% { opacity: 0; scale: 1.8; } 86.5% { opacity: 1; scale: 0.95; } 88%, 95% { opacity: 0.92; scale: 1; } 99%, 100% { opacity: 0; } }

/* ---------- rail (storyboard and live run) ---------- */
.rail { position: relative; width: 100%; --pos: 0%; }
.rail-track { position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 21px; height: 3px; }
.rail-line { position: absolute; inset: 0; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--rule) 0 8px, transparent 8px 13px); }
.rail-dot {
  position: absolute; top: 50%; left: var(--pos); width: 14px; height: 14px; translate: -50% -50%; border-radius: 50%;
  background: var(--stamp-red); box-shadow: 0 0 0 4px rgba(179, 38, 30, 0.18); transition: left 0.6s ease;
}
.rail-nodes { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.node { display: grid; justify-items: center; }
.node-btn { display: grid; justify-items: center; gap: 4px; min-width: 50px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.node.ai { --c: var(--pen); color: var(--pen); }
.node.code { --c: var(--stamp-green); color: var(--stamp-green); }
.node-icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sheet);
  border: 2px solid currentColor; transition: background 0.3s, transform 0.3s;
}
.node.code .node-icon { border-radius: 12px; }
.node-icon svg { width: 21px; height: 21px; color: var(--c); }
.node-label { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.rail-legend { display: flex; gap: 14px; justify-content: center; margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.lg::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; vertical-align: 1px; }
.lg.ai::before { background: var(--pen); }
.lg.code::before { background: var(--stamp-green); border-radius: 2px; }

.story .rail-dot { transition: none; animation: story-dot 12s ease-in-out infinite; }
@keyframes story-dot {
  0%, 13% { left: 0%; } 16.67%, 30% { left: 20%; } 33.33%, 46.6% { left: 40%; } 50%, 63.3% { left: 60%; }
  66.67%, 80% { left: 80%; } 83.33%, 97% { left: 100%; } 100% { left: 0%; }
}
.story .node-icon { animation: story-node 12s linear infinite; animation-delay: calc(var(--i) * 2s); }
.story .node-icon svg { animation: story-svg 12s linear infinite; animation-delay: calc(var(--i) * 2s); }
@keyframes story-node {
  0%, 15% { background: var(--c); transform: scale(1.12); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 18%, transparent); }
  16.67%, 100% { background: var(--sheet); transform: scale(1); box-shadow: none; }
}
@keyframes story-svg { 0%, 15% { color: #fff; } 16.67%, 100% { color: var(--c); } }
.node-btn:focus-visible .node-icon { outline: 3px solid var(--pen); outline-offset: 3px; }

.story-caps { display: grid; width: 100%; min-height: 64px; }
.cap {
  grid-area: 1 / 1; display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-sm); opacity: 0;
  animation: cap-show 12s linear infinite; animation-delay: calc(var(--i) * 2s);
}
@keyframes cap-show { 0% { opacity: 0; transform: translateY(4px); } 1.5%, 15% { opacity: 1; transform: none; } 16.67%, 100% { opacity: 0; } }
.cap-step { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 800; }
.cap-step.ai { background: var(--pen); }
.cap-step.code { background: var(--stamp-green); border-radius: 6px; }
.cap-text { font-size: 15px; font-weight: 600; line-height: 1.4; }
.cap-tech { display: block; margin-top: 3px; font: 500 12px/1.4 ui-monospace, Menlo, Consolas, monospace; color: var(--muted); }
.story-controls { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: center; }
.story-toggle { padding: 4px 14px; font-size: 14px; }
.story-hint { font-size: 13px; color: var(--muted); }

/* Live rail in the workspace: still until a check runs, then mirrors it. */
.rail.idle .rail-dot { display: none; }
.rail.idle .node { opacity: 0.7; }
.rail.live .node { opacity: 0.45; }
.rail.live .node.running, .rail.live .node.done, .rail.live .node.failed { opacity: 1; }
.rail.live .node.running .node-icon { animation: running 1s ease-in-out infinite; }
@keyframes running { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 35%, transparent); } 50% { transform: scale(1.1); box-shadow: 0 0 0 8px transparent; } }
.rail.live .node.done .node-icon { background: var(--c); }
.rail.live .node.done .node-icon svg { color: #fff; }
.rail.live .node.skipped { opacity: 0.25; }
.rail.live .node.failed { --c: var(--stamp-red); color: var(--stamp-red); }
.slip .rail { margin: 10px 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }

@media (prefers-reduced-motion: reduce) {
  .mini-paper, .mini-scan, .mini-tag, .mark, .lens, .mini-bubble, .mini-stamp, .story .rail-dot, .story .node-icon,
  .story .node-icon svg, .cap, .rail.live .node.running .node-icon { animation: none; }
  .mini-tag, .mark, .mini-bubble, .mini-stamp.good { opacity: 1; }
  .mini-stamp.bad { opacity: 0.2; }
  .story .rail-dot { display: none; }
  .story[data-step="0"] .cap[data-i="0"] { opacity: 1; }
  .story[data-step="1"] .cap[data-i="1"] { opacity: 1; }
  .story[data-step="2"] .cap[data-i="2"] { opacity: 1; }
  .story[data-step="3"] .cap[data-i="3"] { opacity: 1; }
  .story[data-step="4"] .cap[data-i="4"] { opacity: 1; }
  .story[data-step="5"] .cap[data-i="5"] { opacity: 1; }
}

.how { margin-top: 18px; max-width: 760px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 10px 14px; }
.how summary { cursor: pointer; font-weight: 700; color: var(--bottle); }
.how-steps { margin: 10px 0 6px; padding-left: 22px; }
.how-steps li { margin-bottom: 6px; }
.how-steps b { color: var(--bottle); }
.how-rule { margin: 6px 0 0; font-weight: 700; }

/* ---------- engine ---------- */
.engine { display: grid; grid-template-columns: 1fr; gap: 6px; padding-top: 16px; }
.engine-label { margin: 0; font-weight: 700; white-space: nowrap; }
.engine-label .en { display: inline; margin-left: 6px; }
.engine-note { margin: 0; font-size: 14px; color: var(--muted); }
.note-line { display: block; font-size: 12.5px; }

/* Chips replace native selects: each choice is its own button, so long Bangla titles never get cut on a phone. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: flex; align-items: center; gap: 10px; text-align: left; font: 600 16px/1.3 var(--f-ui); color: var(--ink);
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 8px 12px; cursor: pointer;
}
.chip .sub { display: block; font-size: 13px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.chip[aria-checked="true"] { border-color: var(--bottle); box-shadow: inset 0 0 0 2px var(--bottle); background: #f1f6f2; }
.chip:disabled { cursor: not-allowed; opacity: 0.6; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot.on { background: var(--stamp-green); }
.dot.off { background: #b9b0a2; }

/* ---------- workspace ---------- */
.layout { display: grid; grid-template-columns: 1fr; gap: 22px; padding-top: 16px; padding-bottom: 28px; }
.input-pane, .output-pane { min-width: 0; }
@media (min-width: 920px) {
  .layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  /* The input column stretches to the results' height so the stamped document can stay pinned beside them. */
  .input-pane { align-self: stretch; }
  .dock { position: sticky; top: 12px; }
  .dock .sheet img { max-height: calc(100vh - 150px); width: auto; margin: 0 auto; }
}

.tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; background: var(--sheet); }
.tabs button { font: 600 16px/1.3 var(--f-ui); color: var(--ink); background: transparent; border: 0; padding: 10px 6px; cursor: pointer; white-space: nowrap; }
.tabs button + button { border-left: 1px solid var(--rule); }
.tabs button[aria-selected="true"] { background: var(--bottle); color: #fff; }
.tabs button[aria-selected="true"] .en { color: #d7eadf; }
[role="tabpanel"] { padding-top: 14px; }

.drop {
  display: grid; justify-items: center; text-align: center; gap: 4px; padding: 22px 16px;
  border: 2px dashed var(--bottle); border-radius: var(--radius-lg); background: var(--panel); cursor: pointer;
}
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-icon {
  width: 46px; height: 46px; border-radius: 14px; margin-bottom: 4px;
  background: var(--bottle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center / 26px no-repeat;
}
.drop-title { font-weight: 700; font-size: 19px; color: var(--bottle); }
.drop-title .en { font-size: 0.72em; }
.drop-sub { font-size: 14px; color: var(--muted); }
.drop:focus-within { outline: 3px solid var(--pen); outline-offset: 3px; }
.hint { font-size: 14px; color: var(--muted); margin: 8px 2px 0; }

.field-row { display: grid; gap: 4px; margin-bottom: 10px; font-weight: 600; }
.card-chips { display: grid; gap: 10px; }
.chip-group { display: grid; gap: 6px; }
.chip-group-title { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--bottle); }
.card-chip { width: 100%; flex-direction: column; align-items: flex-start; gap: 4px; }
.card-chip .card-title { white-space: nowrap; min-width: 0; }
.card-chip .aud { font-size: 13px; font-weight: 600; color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; padding: 0 8px; white-space: nowrap; }
.card-source { margin: 2px 0 0; font-size: 13.5px; font-weight: 400; color: var(--muted); }

.maker-fields { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 560px) { .maker-fields { grid-template-columns: 1fr 1fr; } }
.maker-fields label { display: grid; gap: 2px; font-size: 15px; font-weight: 600; min-width: 0; }
.maker-fields label.wide { grid-column: 1 / -1; }
.maker-fields input, .maker-fields textarea {
  font: 500 22px/1.2 "Caveat", cursive; color: var(--pen); padding: 6px 10px; width: 100%;
  border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--sheet);
}
.maker-fields textarea { resize: vertical; min-height: 64px; }
.maker-signatures { display: grid; gap: 10px; margin-top: 12px; }
.sig { display: grid; gap: 4px; font-size: 15px; font-weight: 600; }
.sig-hint { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.sig-pad-wrap { position: relative; }
.sig canvas { display: block; width: 100%; height: 90px; background: var(--sheet); border: 1px solid var(--rule); border-bottom: 2px solid var(--ink); border-radius: var(--radius-sm); touch-action: none; cursor: crosshair; }
.sig-clear { position: absolute; top: 6px; right: 6px; font: 500 13px var(--f-ui); background: var(--paper); border: 1px solid var(--rule); border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.check-row { display: flex; gap: 10px; align-items: center; margin-top: 12px; font-weight: 600; }
.check-row input { width: 20px; height: 20px; accent-color: var(--bottle); }
.check-row .en { display: inline; margin-left: 4px; }
.maker-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }

button.ghost, button.primary { font: 700 16px/1.25 var(--f-ui); border-radius: var(--radius-lg); padding: 10px 12px; cursor: pointer; white-space: nowrap; }
button.ghost { background: var(--sheet); color: var(--bottle); border: 1px solid var(--bottle); }
button.primary { background: var(--bottle); color: #fff; border: 0; }
button.primary .en { color: #d7eadf; }
#check-btn { width: 100%; margin-top: 12px; padding: 14px; font-size: 18px; }
button.primary:disabled { background: #9fb3a6; cursor: not-allowed; }

/* The sheet preview carries the verdict stamp. */
.dock { margin-top: 16px; }
.sheet { position: relative; margin: 0; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 8px; box-shadow: 0 1px 0 var(--rule), 0 6px 0 -3px var(--sheet), 0 7px 0 -3px var(--rule); }
.sheet img { display: block; width: 100%; height: auto; }
.stamp {
  position: absolute; left: 50%; top: 42%; translate: -50% -50%; rotate: -9deg;
  padding: 10px 20px; border: 5px double currentColor; border-radius: 10px;
  font: 800 clamp(22px, 5vw, 36px)/1.15 var(--f-ui); font-variation-settings: "wdth" 78; text-align: center; white-space: nowrap;
  background: rgba(255, 255, 255, 0.74); mix-blend-mode: multiply; animation: press 420ms cubic-bezier(.2, .9, .3, 1.2) both;
}
.stamp.bad { color: var(--stamp-red); }
.stamp.good { color: var(--stamp-green); }
.stamp.warn { color: var(--amber); }
.stamp.unknown { color: var(--muted); }
@keyframes press { from { scale: 1.7; opacity: 0; } 65% { scale: 0.96; opacity: 1; } to { scale: 1; opacity: 0.92; } }
@media (prefers-reduced-motion: reduce) { .stamp { animation: none; } }

/* ---------- routing slip: the steps really are a sequence, so they are numbered ---------- */
.slip { background: var(--sheet); border: 1px solid var(--rule); border-left: 4px dashed var(--bottle); border-radius: var(--radius-sm); padding: 12px 16px; }
.slip h2 { margin: 0 0 4px; font: 400 21px/1.3 var(--f-formal); color: var(--bottle); }
.slip h2 .en { display: inline; font: 500 14px var(--f-ui); margin-left: 6px; }
html[data-lang="en"] .slip h2 { font: 700 19px/1.3 var(--f-ui); }
.trace { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.trace:empty::before { content: "একটি ফর্ম দিলে এখানে প্রতিটি ধাপ দেখা যাবে।"; color: var(--muted); font-size: 15px; }
html[data-lang="en"] .trace:empty::before { content: "Each step appears here when you check a document."; }
.trace li { counter-increment: step; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 0 10px; padding: 7px 0; border-top: 1px solid var(--rule); }
.trace li:first-child { border-top: 0; }
.trace li::before {
  content: counter(step); grid-row: 1 / span 2; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 13px; border: 2px solid var(--bottle); color: var(--bottle);
}
.trace .t-title { font-weight: 700; min-width: 0; white-space: nowrap; }
.trace .t-title .en { font-size: 13px; white-space: normal; }
.trace .t-state { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.trace .t-meta { grid-column: 2 / -1; font-size: 13px; color: var(--muted); min-width: 0; }
.trace .t-meta:empty { display: none; }
.trace .t-meta .who { color: var(--pen); font-weight: 600; }
.trace li.waiting { opacity: 0.55; }
.trace li.running .t-state { color: var(--amber); }
.trace li.done .t-state { color: var(--stamp-green); }
.trace li.skipped { opacity: 0.5; padding: 4px 0; }
.trace li.skipped::before { width: 20px; height: 20px; font-size: 11.5px; }
html[data-lang="bn"] .trace li.skipped .t-title .en { display: none; }
.trace details { margin-top: 2px; }
.trace summary { cursor: pointer; color: var(--pen); }
.trace pre {
  margin: 6px 0 0; max-height: 220px; overflow: auto; padding: 8px; background: #f6f3ec; border-radius: var(--radius-sm);
  font: 12.5px/1.45 ui-monospace, Menlo, Consolas, monospace; white-space: pre;
}

/* ---------- result ---------- */
.result { margin-top: 16px; }
.result:empty { display: none; }
.badge { display: inline-block; font-size: 13px; font-weight: 600; color: var(--amber); border: 1px solid var(--amber); border-radius: 999px; padding: 0 10px; margin-bottom: 6px; }
.verdict { margin: 0; font: 400 clamp(26px, 4vw, 34px)/1.2 var(--f-formal); }
html[data-lang="en"] .verdict { font: 800 clamp(24px, 3.6vw, 30px)/1.2 var(--f-ui); }
.verdict.bad { color: var(--stamp-red); }
.verdict.good { color: var(--stamp-green); }
.verdict.warn { color: var(--amber); }
.verdict.unknown { color: var(--muted); }
.verdict-sub { margin: 2px 0 8px; color: var(--muted); font-size: 15px; }
.listen-btn { margin: 2px 0 6px; padding: 6px 16px; font-size: 15px; }
.result h3 { margin: 18px 0 6px; font-size: 18px; }
.h3-sub { display: block; font-size: 13.5px; font-weight: 400; color: var(--muted); }
.problems, .docs, .route { margin: 0; padding: 0; list-style: none; }
.problems li { background: var(--sheet); border-left: 4px solid var(--stamp-red); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; }
.problems.manual li { border-left-color: var(--amber); }
.problems .where { font-size: 14px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.problems .rid { font-size: 12.5px; border: 1px solid var(--rule); border-radius: 999px; padding: 0 8px; white-space: nowrap; }
.problems .fix { margin: 2px 0; font-size: 18px; font-weight: 600; }
.problems .fix .en { font-size: 14.5px; font-weight: 400; margin-top: 2px; }
html[data-lang="en"] .problems .fix .en { font-size: inherit; font-weight: 600; }
.problems .seen { font-size: 13.5px; color: var(--pen); margin: 4px 0 0; }
.docs li { padding: 6px 0 6px 26px; position: relative; border-top: 1px solid var(--rule); }
.docs li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 12px; height: 12px; border: 2px solid var(--bottle); border-radius: 3px; }
.route { counter-reset: office; }
.route li { counter-increment: office; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 10px; padding: 8px 0; border-top: 1px solid var(--rule); }
.route li::before { content: counter(office); grid-row: 1 / span 2; width: 26px; height: 26px; border-radius: 6px; background: var(--bottle); color: #fff; display: grid; place-items: center; font-weight: 700; }
.route .office { font-weight: 700; }
.passed { margin-top: 14px; font-size: 15px; }
.passed summary { cursor: pointer; color: var(--stamp-green); font-weight: 600; }
.passed ul { margin: 6px 0 0; padding-left: 20px; }
.run-meta { margin-top: 16px; font-size: 13.5px; color: var(--muted); }
.error { background: #fbeceb; border-left: 4px solid var(--stamp-red); padding: 10px 12px; border-radius: var(--radius-sm); }

.letter-box { position: relative; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 12px; }
.letter { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 18px/1.65 "Tiro Bangla", "Noto Serif Bengali", serif; color: var(--ink); }
.letter .hole { background: #ffe9a3; color: #6b4a00; border-radius: 3px; padding: 0 2px; }
.letter-box .copy-btn { float: right; margin: 0 0 8px 8px; padding: 6px 14px; font-size: 14px; }
.letter-note { margin: 8px 0 0; font-size: 14px; color: var(--muted); }

.foot { padding-bottom: 32px; font-size: 14px; color: var(--muted); }
@media (max-width: 919px) {
  /* On a phone the storyboard stays compact so the app itself is reachable quickly. */
  .mini-paper { width: min(210px, 58vw); padding: 26px 20px 22px; }
  .mini-line { height: 5px; margin: 7px 0 13px; }
  .mini-stamp { font-size: 17px; padding: 4px 10px; border-width: 3px; }
  .mini-sig { font-size: 15px; left: 20px; bottom: 14px; }
  .mini-bubble { font-size: 10.5px; left: 10px; right: 10px; bottom: 46px; }
}

@media (max-width: 919px) {
  .node-icon { width: 38px; height: 38px; }
  .node-icon svg { width: 18px; height: 18px; }
  .rail-track { top: 18px; }
  .node-label { font-size: 12px; }
}
/* Pressing feels physical on touch screens. */
button:active:not(:disabled) { transform: translateY(1px) scale(0.99); }

/* Review mode: the editor folds away once a check starts. */
.input-pane.reviewing .tabs, .input-pane.reviewing [role="tabpanel"] { display: none; }
.input-pane.reviewing .dock { margin-top: 0; }
.edit-btn { width: 100%; margin-bottom: 10px; text-align: left; }

/* ---------- story and architecture ---------- */
.deep { padding-top: 26px; padding-bottom: 8px; }
.deep h2 { margin: 0 0 10px; font: 400 clamp(24px, 3.4vw, 32px)/1.2 var(--f-formal); color: var(--bottle); }
html[data-lang="en"] .deep h2 { font: 800 clamp(22px, 3vw, 28px)/1.2 var(--f-ui); }
.story-text { max-width: 68ch; font-size: 17px; }
.story-text p { margin: 0 0 12px; }
.arch-lede { margin: 0 0 12px; color: var(--muted); }
.arch { display: grid; gap: 6px; }
.layer { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 12px; }
.layer-name { margin: 0 0 8px; font: 700 13px/1.4 ui-monospace, Menlo, Consolas, monospace; color: var(--bottle); }
.boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.box { padding: 8px 10px; border: 1px solid var(--rule); border-left: 4px solid var(--muted); border-radius: var(--radius-sm); background: var(--paper); font-weight: 700; font-size: 15px; }
.box small { display: block; margin-top: 2px; font-weight: 400; font-size: 13px; color: var(--muted); }
.box.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; }
.box.ai { border-left-color: var(--pen); }
.box.code { border-left-color: var(--stamp-green); }
.arch-arrow { margin: 0; text-align: center; font: 600 12.5px/1.4 ui-monospace, Menlo, Consolas, monospace; color: var(--muted); }
.pipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.pipe li { padding: 8px 10px; border: 1px solid var(--rule); border-top: 4px solid var(--muted); border-radius: var(--radius-sm); background: var(--paper); }
.pipe li.ai { border-top-color: var(--pen); }
.pipe li.code { border-top-color: var(--stamp-green); }
.pipe b { display: block; font-size: 15px; }
.pipe .tag { display: inline-block; margin: 2px 0 4px; padding: 0 6px; border-radius: 4px; font: 700 11px/1.6 ui-monospace, Menlo, Consolas, monospace; color: #fff; background: var(--muted); }
.pipe li.ai .tag { background: var(--pen); }
.pipe li.code .tag { background: var(--stamp-green); }
.pipe small { display: block; font-size: 13px; color: var(--muted); }
.arch-note { margin: 8px 0 0; font-size: 13.5px; font-weight: 700; color: var(--bottle); }

/* Excalidraw architecture diagram: dark canvas, scaled to the column; tap opens it full size. */
.arch-figure { margin: 0 0 14px; padding: 8px; background: #121212; border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.arch-figure img { display: block; width: 100%; height: auto; border-radius: 4px; }
.arch-figure figcaption { margin-top: 6px; font-size: 13px; color: #cfc8bb; }