/* writ playground — tokens and chrome shared with site/index.html. */
:root {
  --bg: #0b0f14;
  --bg-soft: #10161d;
  --panel: #131b23;
  --line: #1e2933;
  --line-strong: #2a3845;
  --text: #dbe4ec;
  --muted: #8a99a8;
  --dim: #5c6b7a;
  --accent: #4ec9a5;
  --allow: #3fb950;
  --deny: #f85149;
  --ask: #d29922;
  --redact: #a371f7;
  --mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, "SF Mono", Menlo, monospace;
  --sans: -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif;
  --ed-line: 20px;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre, kbd, .mono { font-family: var(--mono); }
code { font-size: .92em; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 20; background: var(--accent); color: var(--bg); padding: 6px 12px; border-radius: 6px; }
.skip:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dim { color: var(--dim); }

/* nav (same as index) */
nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(11, 15, 20, .88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
nav .wrap { display: flex; align-items: center; gap: 20px; height: 56px; }
.logo { display: inline-flex; align-items: center; }
.logo img { display: block; height: 26px; width: auto; }
nav .links { margin-left: auto; display: flex; gap: 20px; font-size: 14px; }
nav .links a { color: var(--muted); }
nav .links a:hover { color: var(--text); text-decoration: none; }
nav .links a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); padding-bottom: 2px; }

/* hero */
.pg-hero { padding: 48px 0 28px; }
.kicker { color: var(--dim); font-size: 12.5px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 10px; }
.pg-hero h1 { font-family: var(--mono); font-size: clamp(26px, 4.2vw, 40px); line-height: 1.15; letter-spacing: -0.02em; }
.pg-hero .sub { color: var(--muted); font-size: 16.5px; max-width: 760px; margin-top: 14px; }
.engine { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-family: var(--mono); font-size: 12.5px; color: var(--muted);
  border: 1px solid var(--line); background: var(--panel); padding: 5px 12px; border-radius: 999px; }
.engine .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ask); }
.engine.ready .dot { background: var(--allow); }
.engine.failed .dot { background: var(--deny); }

/* layout */
.pg { padding-bottom: 40px; display: grid; gap: 20px; }
.pg-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1020px) { .pg-grid { grid-template-columns: minmax(0, 1fr); } }

.panel { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 18px; min-width: 0; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.panel-head h2 { font-family: var(--mono); font-size: 17px; display: flex; align-items: center; gap: 10px; }
.panel-head .n, .cmd-card .n {
  font-family: var(--mono); font-size: 12px; color: var(--dim);
}
.panel-head h2 .n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line-strong); color: var(--accent); }
.head-tools { margin-left: auto; display: flex; gap: 8px; }
.head-note { color: var(--muted); font-size: 13.5px; flex-basis: 100%; max-width: 900px; }
.panel-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 12px; }
.hint { color: var(--dim); font-size: 12.5px; }
kbd { font-size: 11px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; color: var(--muted); background: var(--panel); }

/* controls */
select, input[type="text"], textarea {
  font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 7px 10px; min-width: 0;
}
select { padding-right: 28px; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.head-tools select { max-width: 320px; font-size: 13.5px; }
textarea.mono, input.mono { font-family: var(--mono); font-size: 13px; line-height: 1.5; }
select:focus, input:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(78, 201, 165, .15); }
.btn { font: inherit; font-size: 14px; cursor: pointer; border-radius: 8px; padding: 8px 16px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); white-space: nowrap; }
.btn:hover:not(:disabled) { border-color: var(--muted); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #06231b; font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: #63d6b4; border-color: #63d6b4; }
.btn.ghost { background: transparent; color: var(--muted); }
.btn.danger { color: var(--deny); border-color: rgba(248, 81, 73, .45); background: rgba(248, 81, 73, .06); }
.btn.danger:hover:not(:disabled) { border-color: var(--deny); }
.btn.allow { color: var(--allow); border-color: rgba(63, 185, 80, .5); }
.btn.deny { color: var(--deny); border-color: rgba(248, 81, 73, .5); }

/* editor */
.editor { display: grid; grid-template-columns: auto minmax(0, 1fr); height: 440px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg); overflow: hidden; }
.editor.focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(78, 201, 165, .12); }
.ed-gutter { font-family: var(--mono); font-size: 13px; line-height: var(--ed-line); color: var(--dim); text-align: right; padding: 12px 8px 12px 12px; user-select: none; overflow: hidden; border-right: 1px solid var(--line); min-width: 44px; }
.ed-gutter span { display: block; }
.ed-gutter span.err { color: var(--deny); font-weight: 700; }
.ed-gutter span.hit { color: var(--text); }
.ed-body { position: relative; min-width: 0; }
.ed-hl, .ed-body textarea {
  position: absolute; inset: 0; margin: 0; border: 0; border-radius: 0;
  font-family: var(--mono); font-size: 13px; line-height: var(--ed-line); tab-size: 2;
  padding: 12px 14px; white-space: pre; overflow: auto; background: transparent;
}
.ed-hl { color: var(--text); pointer-events: none; overflow: hidden; }
.ed-body textarea { color: transparent; caret-color: var(--text); resize: none; box-shadow: none; }
.ed-body textarea:focus { box-shadow: none; }
.ed-body textarea::selection { background: rgba(78, 201, 165, .28); color: transparent; }
.ed-hl .l { display: block; min-height: var(--ed-line); }
.ed-hl .l.err { background: rgba(248, 81, 73, .12); box-shadow: inset 3px 0 0 var(--deny); }
.ed-hl .l.hit { background: rgba(78, 201, 165, .08); box-shadow: inset 3px 0 0 var(--accent); }
.ed-hl .l.hit.v-deny { background: rgba(248, 81, 73, .09); box-shadow: inset 3px 0 0 var(--deny); }
.ed-hl .l.hit.v-ask { background: rgba(210, 153, 34, .1); box-shadow: inset 3px 0 0 var(--ask); }
.ed-hl .l.hit.v-redact { background: rgba(163, 113, 247, .1); box-shadow: inset 3px 0 0 var(--redact); }
.ed-hl .l.hit.v-allow { background: rgba(63, 185, 80, .08); box-shadow: inset 3px 0 0 var(--allow); }
.t-cm { color: var(--dim); font-style: italic; }
.t-k { color: #7cc4f5; }
.t-s { color: #a5d6a7; }
.t-op { color: var(--redact); }
.t-f { color: #e6c07b; }
.t-n { color: #f0a07a; }
.t-v-allow { color: var(--allow); font-weight: 600; }
.t-v-deny { color: var(--deny); font-weight: 600; }
.t-v-ask { color: var(--ask); font-weight: 600; }
.t-v-redact { color: var(--redact); font-weight: 600; }
.t-id { color: var(--text); font-weight: 600; }

.compile { margin-top: 10px; font-family: var(--mono); font-size: 13px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); min-height: 38px; }
.compile.ok { color: var(--allow); }
.compile.bad { color: var(--deny); border-color: rgba(248, 81, 73, .45); background: rgba(248, 81, 73, .06); }
.compile .msg { color: var(--text); }
.compile button.jump { font: inherit; background: none; border: 0; color: var(--deny); text-decoration: underline; cursor: pointer; padding: 0; }
.rules { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rule-chip { font-family: var(--mono); font-size: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 999px; padding: 3px 10px 3px 8px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.rule-chip:hover { border-color: var(--line-strong); color: var(--text); }
.rule-chip .sw { width: 7px; height: 7px; border-radius: 50%; }
.rule-chip.hit { color: var(--text); border-color: var(--accent); }
.rule-chip.default { border-style: dashed; cursor: default; }

/* chips */
.chip { font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; padding: 3px 11px; border-radius: 999px; border: 1px solid currentColor; display: inline-block; text-transform: lowercase; }
.chip.allow, .sw.allow { color: var(--allow); } .sw.allow { background: var(--allow); }
.chip.deny, .sw.deny { color: var(--deny); } .sw.deny { background: var(--deny); }
.chip.ask, .sw.ask { color: var(--ask); } .sw.ask { background: var(--ask); }
.chip.redact, .sw.redact { color: var(--redact); } .sw.redact { background: var(--redact); }
.chip.sm { font-size: 11px; padding: 1px 8px; }

/* call form */
.call-form { display: grid; gap: 12px; }
.call-form label { display: grid; gap: 5px; font-size: 12.5px; color: var(--muted); }
.row3 { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 10px; }
.row2 { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 10px; }
@media (max-width: 640px) { .row3, .row2 { grid-template-columns: 1fr; } }
.row-args { display: grid; gap: 5px; }
.row-args > label { font-size: 12.5px; color: var(--muted); }
.row-args textarea { resize: vertical; }
.row-args textarea[aria-invalid="true"] { border-color: var(--deny); }
.field-err { color: var(--deny); font-size: 12.5px; min-height: 0; }
.field-err:empty { display: none; }
details.more summary { cursor: pointer; color: var(--muted); font-size: 13px; }
details.more summary:hover { color: var(--text); }
.run-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* verdict */
.verdict-area { margin-top: 16px; }
.placeholder { color: var(--dim); font-size: 14px; border: 1px dashed var(--line-strong); border-radius: 10px; padding: 16px; }
.verdict { border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); overflow: hidden; }
.verdict.k-allow { border-color: rgba(63, 185, 80, .45); }
.verdict.k-deny { border-color: rgba(248, 81, 73, .5); }
.verdict.k-ask { border-color: rgba(210, 153, 34, .5); }
.verdict.k-redact { border-color: rgba(163, 113, 247, .5); }
.v-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.v-top code { color: var(--text); }
.v-top .loc { font-family: var(--mono); font-size: 12.5px; background: none; border: 0; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.v-top .rec { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--dim); }
.v-body { padding: 12px 14px; display: grid; gap: 12px; }
.v-reason { font-size: 14.5px; }
.v-reason .lbl, .v-sub { color: var(--dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; display: block; margin-bottom: 3px; }
.saw { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; font-family: var(--mono); font-size: 12.5px; }
.saw dt { color: var(--dim); }
.saw dd { color: var(--text); overflow-wrap: anywhere; }
.saw dd.none { color: var(--dim); }
.map-note { font-size: 12.5px; color: var(--muted); }
.redact-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .redact-cols { grid-template-columns: 1fr; } }
.redact-cols pre, .ask-box pre { font-size: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; overflow: auto; max-height: 180px; white-space: pre-wrap; overflow-wrap: anywhere; }
.redact-cols .mark { color: var(--redact); font-weight: 700; }
.ask-box { background: var(--bg); border: 1px solid rgba(210, 153, 34, .45); border-radius: 8px; padding: 12px; font-family: var(--mono); font-size: 12.5px; display: grid; gap: 4px; }
.ask-box .warn { color: var(--ask); font-weight: 700; }
.ask-box .irr { color: var(--deny); }
.ask-box .indent { padding-left: 2ch; overflow-wrap: anywhere; }
.ask-actions { display: flex; gap: 8px; margin-top: 8px; padding-left: 2ch; flex-wrap: wrap; }
.ask-actions .btn { font-family: var(--mono); font-size: 13px; padding: 5px 12px; }
.outcome { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.outcome b.allow { color: var(--allow); } .outcome b.deny { color: var(--deny); }
.err-box { color: var(--deny); font-family: var(--mono); font-size: 13px; padding: 12px 14px; border: 1px solid rgba(248, 81, 73, .45); border-radius: 10px; background: rgba(248, 81, 73, .06); }

/* ledger */
.ledger-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ledger-tools .tamper { display: flex; gap: 8px; flex-wrap: wrap; }
.ledger-tools .spacer { flex: 1; }
.term { margin-top: 12px; font-family: var(--mono); font-size: 13px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; overflow-wrap: anywhere; }
.term .prompt { color: var(--dim); user-select: none; }
.term .ok { color: var(--allow); }
.term .bad { color: var(--deny); font-weight: 700; }
.term .why { color: var(--muted); display: block; margin-top: 2px; }
.chain-wrap { overflow-x: auto; margin-top: 14px; padding-bottom: 6px; scrollbar-color: var(--line-strong) transparent; }
.chain { list-style: none; display: flex; align-items: stretch; gap: 0; min-height: 132px; padding: 2px; }
.chain .empty { color: var(--dim); font-size: 14px; border: 1px dashed var(--line-strong); border-radius: 10px; padding: 16px; align-self: center; width: 100%; }
.chain li.blk { display: flex; align-items: center; }
.link { width: 30px; height: 2px; background: var(--line-strong); position: relative; flex: none; }
.link::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: var(--line-strong); border-right: 0; }
.link.ok { background: var(--allow); } .link.ok::after { border-left-color: var(--allow); }
.link.broken { background: var(--deny); } .link.broken::after { border-left-color: var(--deny); }
.block { font: inherit; text-align: left; cursor: pointer; width: 168px; flex: none; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 10px; padding: 9px 11px; color: var(--text); display: grid; gap: 4px; position: relative; }
.block:hover { border-color: var(--muted); }
.block[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(78, 201, 165, .22); }
.block .b-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; }
.block .b-idx { color: var(--muted); font-weight: 700; }
.block .b-kind { color: var(--dim); font-size: 11px; }
.block .b-tool { font-family: var(--mono); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block .b-hash { font-family: var(--mono); font-size: 10.5px; color: var(--dim); white-space: nowrap; }
.block .b-hash b { color: var(--muted); font-weight: 400; }
.block .flag { position: absolute; top: -9px; right: 8px; font-family: var(--mono); font-size: 10px; padding: 0 6px; border-radius: 999px; background: var(--bg); border: 1px solid; }
.block.edited .flag { color: var(--ask); border-color: var(--ask); }
.block.v-ok { border-color: rgba(63, 185, 80, .5); }
.block.v-broken { border-color: var(--deny); background: rgba(248, 81, 73, .08); box-shadow: 0 0 0 2px rgba(248, 81, 73, .25); }
.block.v-broken .flag { color: var(--deny); border-color: var(--deny); }
.block.v-after { opacity: .5; }
.block.fresh { animation: pop .45s ease-out; }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .block.fresh { animation: none; } html { scroll-behavior: auto; } }
.record-detail { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.rd-head { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px; }
.record-detail pre { font-size: 12px; line-height: 1.5; padding: 10px 12px; max-height: 300px; overflow: auto; }
.record-detail pre .jk { color: #7cc4f5; }
.record-detail pre .js { color: #a5d6a7; }
.record-detail pre .jn { color: #f0a07a; }
.record-detail pre .jh { color: var(--accent); }

/* replay */
.replay-form { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
@media (max-width: 760px) { .replay-form { grid-template-columns: 1fr; } }
.replay-form label, .paste label { display: grid; gap: 5px; font-size: 12.5px; color: var(--muted); }
.paste { margin-top: 12px; display: grid; gap: 10px; }
.rp-summary { margin-top: 14px; font-family: var(--mono); font-size: 13px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
.rp-summary .hl { color: var(--deny); font-weight: 700; }
.rp-summary .okc { color: var(--allow); }
.table-wrap { overflow-x: auto; margin-top: 10px; }
table.rp { width: 100%; border-collapse: collapse; font-size: 13px; }
table.rp th { text-align: left; color: var(--dim); font-weight: 500; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; padding: 6px 8px; border-bottom: 1px solid var(--line-strong); }
table.rp td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.rp td.idx { font-family: var(--mono); color: var(--dim); }
table.rp td.call { font-family: var(--mono); font-size: 12px; max-width: 420px; overflow-wrap: anywhere; }
table.rp td.call .tool { color: var(--text); }
table.rp td.call .args { color: var(--muted); }
table.rp td.rule { font-family: var(--mono); font-size: 12px; color: var(--muted); }
table.rp tr.blocked td { background: rgba(248, 81, 73, .07); }
table.rp tr.blocked td:first-child { box-shadow: inset 3px 0 0 var(--deny); }
table.rp tr.changed:not(.blocked) td:first-child { box-shadow: inset 3px 0 0 var(--ask); }
table.rp .arrow { color: var(--dim); padding: 0 4px; }
table.rp .tag { font-size: 11px; color: var(--deny); font-weight: 700; white-space: nowrap; }
table.rp .ran { font-size: 11px; color: var(--dim); }

/* for real */
.real { padding: 36px 0 12px; border-top: 1px solid var(--line); margin-top: 16px; }
.real h2 { font-family: var(--mono); font-size: 22px; margin-bottom: 8px; }
.real .lead { color: var(--muted); max-width: 720px; margin-bottom: 22px; }
.real-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.cmd-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: grid; gap: 8px; align-content: start; }
.cmd-card .n { text-transform: uppercase; letter-spacing: .1em; }
.cmd { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 8px 8px 12px; }
.cmd code { color: var(--accent); font-size: 13px; overflow-wrap: anywhere; }
.copy { font: inherit; font-size: 11.5px; color: var(--muted); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 6px; padding: 2px 8px; cursor: pointer; flex: none; }
.copy:hover { color: var(--text); }
.copy.done { color: var(--allow); border-color: var(--allow); }
.cmd-card p { color: var(--muted); font-size: 13.5px; }
.real .fine, footer .fine { color: var(--dim); font-size: 13px; margin-top: 16px; }

/* footer */
footer { border-top: 1px solid var(--line); padding: 32px 0 56px; color: var(--dim); font-size: 13.5px; margin-top: 24px; }
footer .cols { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: baseline; }
footer a { color: var(--muted); }
.noscript { text-align: center; color: var(--ask); padding: 16px; }

@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  nav .links { gap: 14px; font-size: 13px; }
  nav .links a:nth-child(-n+3) { display: none; }
  .editor { height: 360px; }
  .panel { padding: 14px; }
  .head-tools { margin-left: 0; width: 100%; }
  .head-tools select { max-width: none; width: 100%; }
}