/* Mental Kombat. Typography and chrome from kleban.computer, colour cycle from Borealis. */

@font-face {
    font-family: 'Berkeley Mono';
    src: url('fonts/BerkeleyMono-Regular.woff2') format('woff2'),
         url('fonts/BerkeleyMono-Regular.woff') format('woff');
    font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Berkeley Mono';
    src: url('fonts/BerkeleyMono-Bold.woff2') format('woff2'),
         url('fonts/BerkeleyMono-Bold.woff') format('woff');
    font-weight: bold; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Berkeley Mono';
    src: url('fonts/BerkeleyMono-Italic.woff2') format('woff2'),
         url('fonts/BerkeleyMono-Italic.woff') format('woff');
    font-weight: normal; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'PragmataPro Mono';
    src: url('fonts/PragmataProMonoVF_Liga_0903.woff2') format('woff2');
    font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
    --primary-text-color: #24292e;
    --secondary-text-color: #586069;
    --link-color: #0366d6;
    --background-color: #ffffff;
    --code-background: #faf9f6;
    --border-color: #f5cd6e;
    --heading-color: #24292e;

    /* Borealis colour cycle */
    --red: #D53130;
    --teal: #018292;
    --orange: #FE8113;
    --blue: #289CBE;
    --pink: #E787B2;
    --yellowgreen: #C1BF34;
    --brown: #805A55;
    --purple: #898094;
    --spine: #4d4d73;          /* Borealis axes.edgecolor 0.3,0.3,0.45 */
    --gridline: #d9d9ed;
}

html, html * {
    font-variant-ligatures: common-ligatures;
    font-feature-settings: "liga" 1, "calt" 1, "dlig" 1, "hlig" 1 !important;
    text-rendering: optimizeLegibility;
}

html {
    font-family: 'Berkeley Mono', ui-monospace, monospace;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    color: var(--primary-text-color);
    background-color: var(--background-color);
    max-width: 104ch;
    padding: 2ch;
    margin: auto;
    font-size: 14px;
}
body { margin: 0; padding: 0; }

h1, h2, h3 {
    font-family: 'Berkeley Mono', monospace;
    color: var(--heading-color);
    margin-top: 2em; margin-bottom: 1em; line-height: 1.25;
}
h1 { margin-top: 0.5em; }
h1:before { content: "▓ "; }
h2 { margin-top: 2.5em; }
h2:before { content: "▒ "; }
h3:before { content: "░ "; }
h3 { font-size: 1.3rem; }

p { margin-top: 0; margin-bottom: 1em; }
a { color: var(--link-color); text-decoration: underline; }
.muted { color: var(--secondary-text-color); }

ul { list-style-type: none; padding-left: 1em; margin-top: 0; margin-bottom: 1em; }
ul li { position: relative; padding-left: 1.5em; }
ul li:before { content: "»"; position: absolute; left: 0; }

pre, code {
    font-family: 'Berkeley Mono', monospace;
    background-color: var(--code-background);
}
code { padding: 0.2em; font-size: 1.05em; }
pre {
    padding: 16px; overflow: auto; font-size: 0.85em; line-height: 1.45;
    margin: 0 0 1em;
    border: 1px solid var(--border-color);
    border-top: 2px dotted #ddd;
    border-left: 4px solid #ffb700;
}
pre code { background: transparent; padding: 0; }

/* ---------- tables ---------- */
table {
    display: table !important; width: 100%;
    border-spacing: 0; border-collapse: collapse; text-align: left;
    font-family: 'PragmataPro Mono', 'Berkeley Mono', monospace;
    border: .08333rem solid #bfbfbf; border-left: 4px solid #bfbfbf;
    margin-bottom: 1em; font-size: 1em;
    box-shadow: 2px 2px #ddd; border-top: 2px dotted #ddd;
}
th, td { border: .08333rem solid #bfbfbf !important; padding: .3rem .4rem 0 !important; }
/* A cell holding a control needs real padding: the zero bottom above is tuned for text,
   and leaves a button sitting flush against the cell border. */
td:has(> button), td:has(> .btn) { padding: .35rem .4rem !important; }
th { font-weight: bold; border-top: none !important; border-bottom: .08333rem solid black !important; }
tr:nth-child(even) { background-color: #eee; }
.table-yellow { border-left: 4px solid #ffb700; }
.table-blue   { border-left: 4px solid #1660c1; }
.table-red    { border-left: 4px solid #e7040f; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- SKU badges ---------- */
.sku {
    font-weight: 400; line-height: 1.2rem;
    padding-right: .2rem; padding-left: .3rem;
    letter-spacing: .1rem; text-transform: uppercase;
    border: 1px dotted #000; white-space: nowrap;
}
.sku-red    { color: #ff4136; border-color: #ff4136; }
.sku-blue   { color: #005eec; border-color: #005eec; }
.sku-green  { color: #00a96c; border-color: #00a96c; }
.sku-gold   { color: #ffb700; border-color: #ffb700; }
.sku-gray   { color: #777;    border-color: #777; }
.sku.bg-gold  { background: #ffb700; color: #000; }
.sku.bg-black { background: #000; color: #fff; border-color: #000; }

/* ---------- panels ---------- */
.panel {
    border: .08333rem solid #bfbfbf; border-left: 4px solid #bfbfbf;
    border-top: 2px dotted #ddd; box-shadow: 2px 2px #ddd;
    padding: 1em; margin-bottom: 1em; background: #fff;
}
.panel-red  { border-left-color: var(--red); }
.panel-teal { border-left-color: var(--teal); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.grid-wide { display: grid; grid-template-columns: 3fr 2fr; gap: 1em; }
@media (max-width: 760px) { .grid2, .grid-wide { grid-template-columns: 1fr; } }
.grid-wide pre { white-space: pre-wrap; word-break: break-word; }

/* ---------- the stage ---------- */
#stage {
    width: 100%; height: auto; display: block;
    border: .08333rem solid #bfbfbf; border-left: 4px solid var(--spine);
    border-top: 2px dotted #ddd; box-shadow: 2px 2px #ddd;
    background: #fff;
}

.hpwrap { margin: 0.6em 0; }
.hpbar {
    height: 14px; border: 1px solid var(--spine); background: #fff;
    position: relative; overflow: hidden;
}
.hpfill { height: 100%; transition: width 0.12s linear; }
.hpfill.a { background: var(--red); }
.hpfill.b { background: var(--teal); }
.hplabel { display: flex; justify-content: space-between; font-size: 0.9em; }

.controls { display: flex; gap: 0.5em; align-items: center; flex-wrap: wrap; margin: 1em 0; }
button {
    font-family: 'Berkeley Mono', monospace; font-size: 1em;
    background: #fff; color: var(--primary-text-color);
    border: 1px solid #000; box-shadow: 2px 2px #ddd;
    padding: 0.3em 0.8em; cursor: pointer;
}
button:hover { background: var(--border-color); }
button:disabled { color: #aaa; border-color: #aaa; cursor: default; box-shadow: none; }
input[type=range] { accent-color: var(--spine); }

/* ---------- probability bars ---------- */
.dist { font-size: 0.85em; }
.distrow { display: grid; grid-template-columns: 11ch 1fr 5ch; gap: 0.4em; align-items: center; }
.distbar { height: 9px; background: var(--gridline); }
.distbar > span { display: block; height: 100%; }
.distrow.pick { font-weight: bold; }

.tick { font-family: 'PragmataPro Mono', monospace; font-size: 0.85em; }
hr { height: 0; margin: 1rem 0 3rem; border: none; border-top: 2px dotted #ddd; }
footer { margin-top: 3em; color: var(--secondary-text-color); font-size: 0.85em; }

/* ---------- app chrome ---------- */
.topbar { display: flex; justify-content: space-between; align-items: baseline; gap: 1em;
          flex-wrap: wrap; border-bottom: 2px dotted #ddd; }
.topbar h1 { margin: 0.5em 0; }
.topbar .muted { font-size: 0.9em; }

.btn, button { font-family: 'Berkeley Mono', monospace; font-size: 1em;
    background: #fff; color: var(--primary-text-color);
    border: 1px solid #000; box-shadow: 2px 2px #ddd;
    padding: 0.3em 0.8em; cursor: pointer; text-decoration: none; display: inline-block; }
.btn:hover, button:hover { background: var(--border-color); }
button.link { border: none; box-shadow: none; padding: 0; color: var(--link-color);
    text-decoration: underline; background: none; }
button.link:hover { background: none; color: #000; }

.field { margin: 0 0 2.2em; }
.field label { display: block; margin-bottom: 0.3em; font-weight: bold; }
.field label .muted { font-weight: normal; }
textarea, input[type=text], input:not([type]), select {
    width: 100%; font-family: 'Berkeley Mono', monospace; font-size: 1em;
    padding: 0.5em; border: 1px solid #bfbfbf; border-left: 4px solid var(--spine);
    box-shadow: 2px 2px #ddd; background: var(--code-background); box-sizing: border-box; }
textarea:focus, input:focus, select:focus { outline: none; border-left-color: var(--orange); }
select { background: #fff; }
.cap { font-size: 0.8em; color: var(--secondary-text-color); text-align: right; }
/* Amber at 80%, red past the cap: a hard stop with no approach warning is how you lose a sentence
   you already wrote. */
.cap.near { color: var(--orange); }
.cap.over { color: var(--red); font-weight: bold; }
.err { color: var(--red); }

.panel-gray { border-left-color: #777; }
tr.is-me { background: #fff8e1 !important; font-weight: bold; }
.table-gray { border-left: 4px solid #777; }

blockquote { font-style: italic; margin: 1em 0; padding: 0.5em 1em;
    border-left: 0.2em solid var(--border-color); color: #46484a; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 50;
    display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 4vh 2ch; }
.modal[hidden], [hidden] { display: none !important; }
.modal-inner { background: #fff; max-width: 100ch; width: 100%; padding: 1.5em 2em 2em;
    border: 1px solid #000; box-shadow: 6px 6px #bbb; position: relative; }
.modal-x { position: absolute; top: 1em; right: 1em; }
.modal-inner h3:first-of-type { margin-top: 0.5em; }

/* ---------- rules panel ---------- */
.rules { margin-top: 1.5em; }
.rules .lede { font-size: 1.1em; margin-bottom: 1.2em; }
.rulegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4em; margin-bottom: 0.5em; }
@media (max-width: 900px) { .rulegrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rulegrid { grid-template-columns: 1fr; } }
.rulegrid h3 { margin: 0 0 0.4em; font-size: 1em; border-bottom: 2px dotted #ddd; padding-bottom: 0.3em; }
.rules .rulegrid h3:before, .rules summary h3:before { content: none !important; }
.rulegrid p { font-size: 0.92em; margin: 0; }

.rules details { margin: 1em 0 0; padding: 0.5em 1em; background: rgba(0,0,0,0.02);
    border: .08333rem solid #bfbfbf; border-left: 4px solid #bfbfbf; border-top: 2px dotted #ddd; }
.rules summary { font-weight: bold; cursor: pointer; padding: 0.4em 0; list-style: none; outline: none; }
.rules summary::-webkit-details-marker { display: none; }
.rules summary::before { content: "[ + ] "; }
.rules details[open] > summary::before { content: "[ - ] "; }
.rules details table { margin-top: 0.8em; }
.rules details ul { margin-top: 0.8em; }

td.stop { color: #00a96c; }
td.hit  { color: #D53130; font-weight: bold; }

/* ---------- replay player ---------- */
#replay { width: 100%; height: auto; display: block; background: #fff;
    border: .08333rem solid #bfbfbf; border-left: 4px solid var(--spine);
    border-top: 2px dotted #ddd; box-shadow: 2px 2px #ddd; margin-bottom: 0.6em; }
#rp-seek { accent-color: var(--spine); margin-bottom: 0.5em; }
.modal-inner .controls { margin: 0.4em 0; }

/* ---------- multi-page chrome ---------- */
.topbar { display: flex; align-items: baseline; gap: 1.5em; flex-wrap: wrap;
    border-bottom: 2px dotted #ddd; padding-bottom: 0.6em; margin-bottom: 1.5em; }
.topbar .brand { font-weight: bold; font-size: 1.25em; text-decoration: none;
    color: var(--heading-color); }
.topbar .brand:before { content: "▓ "; }
.topbar nav { display: flex; gap: 1.1em; flex-wrap: wrap; }
.topbar nav a { text-decoration: none; color: var(--secondary-text-color); }
.topbar nav a:hover { color: var(--primary-text-color); }
.topbar nav a.here { color: var(--primary-text-color); font-weight: bold;
    border-bottom: 2px solid var(--orange); }
.topbar #whoami { margin-left: auto; font-size: 0.9em; }

/* ---------- hero ---------- */
.hero { text-align: center; margin: 1em 0 3em; }
.hero-title { font-size: 2.6em; margin: 0.2em 0 0.1em; letter-spacing: 0.04em; }
.hero-title:before { content: none; }
.hero-tag { font-size: 1.3em; color: var(--red); font-weight: bold; margin: 0 0 1.2em;
    letter-spacing: 0.02em; }
.hero-sub { color: var(--secondary-text-color); max-width: 68ch; margin: 1em auto; }
#hero { width: 100%; height: auto; display: block; background: #fff; margin: 0 auto;
    border: .08333rem solid #bfbfbf; border-left: 4px solid var(--spine);
    border-top: 2px dotted #ddd; box-shadow: 2px 2px #ddd; }
.hero-cta { display: flex; gap: 0.8em; justify-content: center; flex-wrap: wrap; margin-top: 1.5em; }
.btn-big { padding: 0.6em 1.4em; font-size: 1.05em; font-weight: bold; }
.btn-ghost { background: #fff; color: var(--secondary-text-color); border-color: #bfbfbf; }
.btn-ghost:hover { background: #f5f5f5; color: var(--primary-text-color); }

/* ---------- how it works ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2em; margin-bottom: 2em; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { border-left: 4px solid var(--teal); padding-left: 0.9em; }
.step-n { font-size: 1.6em; font-weight: bold; color: var(--teal); line-height: 1; }
.step h3 { margin: 0.3em 0 0.4em; font-size: 1em; }
.step h3:before { content: none; }
.step p { font-size: 0.92em; margin: 0; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 2em; }
@media (max-width: 700px) { .split { grid-template-columns: 1fr; } }
.split h3:first-child { margin-top: 0; }

/* The nav tab is the page title, so the lede is the first thing on the page and has to
   carry the space the heading used to. */
.lede { font-size: 1.1em; margin: 1.8em 0 1.5em; }
.panel-gold { border-left-color: var(--yellowgreen); }
.notice { margin-bottom: 1.5em; }

.rules-list { counter-reset: rule; list-style: none; padding-left: 0; margin: 0 0 2em; }
.rules-list li { counter-increment: rule; position: relative; padding-left: 7.5ch;
    margin-bottom: 0.5em; }
.rules-list li:before { content: "RULE " counter(rule); position: absolute; left: 0;
    font-size: 0.78em; letter-spacing: .08em; color: var(--red); font-weight: bold; top: 0.25em; }

.topbar .bal { margin-right: 1em; }

.hero-kicker { font-size: 0.95em; letter-spacing: .14em; text-transform: uppercase;
    color: var(--secondary-text-color); margin: 0.6em 0 0.3em; }
.creed { max-width: 72ch; margin: 2em auto; }
.creed p { margin-bottom: 0.8em; }
.creed p:last-child { margin-bottom: 0; }

/* ---------- the opponent's slot on the fighter page ---------- */
.opponent-slot { border: 2px dashed var(--red); background: rgba(213,49,48,0.04);
    padding: 1em 1.2em; margin: 0 0 1.2em; }
.slot-label { font-weight: bold; color: var(--red); letter-spacing: .04em;
    text-transform: uppercase; font-size: 0.82em; margin-bottom: 0.5em; }
.opponent-slot p { margin-bottom: 0.6em; font-size: 0.92em; }
.slot-example { font-style: italic; color: var(--secondary-text-color);
    border-left: 3px solid var(--red); padding-left: 0.8em; margin: 0; }

.creed-lead { font-size: 1.25em; font-weight: bold; margin-bottom: 0.4em; }
.creed-kicker { border-top: 2px dotted #ddd; padding-top: 0.9em; margin-top: 1em;
    line-height: 1.7; }

.standing { display: flex; gap: 2em; flex-wrap: wrap; align-items: center;
    padding-bottom: 0.8em; margin-bottom: 0.9em; border-bottom: 2px dotted #ddd; }
.standing strong { font-size: 1.15em; }
.status { font-weight: bold; letter-spacing: .09em; padding: 0.28em 0.7em; font-size: 0.92em; }
.status-ready { background: #00a96c; color: #fff; }
.status-down  { background: var(--red); color: #fff; }
.status-none  { background: #777; color: #fff; }

.field label { line-height: 1.5; }
.opponent-slot { margin-bottom: 2.2em; }

/* ---------- fighter form ---------- */
/* The state chip in the nav bar: a link to the page where you change it. */
.chip-link { text-decoration: none; border: 0; margin-right: 0.9em; }
.chip-link:hover .sku { filter: brightness(0.92); }

/* The house rules: a plain numbered list. These are the three facts that cost you money if you
   learn them by losing, so they sit at the top of the page. */
.houserules { margin: 2.2em 0 2.5em; padding-left: 1.6em; }
.houserules li { margin-bottom: 1.1em; line-height: 1.55; }

/* Defence and attack are two different jobs, so they are two blocks rather than one list of
   look-alike boxes. */
.block { margin: 0 0 3em; }
.block-title { font-size: 1.25em; margin: 0 0 0.3em; }
.block-title:before { content: none; }
.block-lede { color: var(--secondary-text-color); margin: 0 0 1.6em; line-height: 1.5; }
.block-attack .block-title { color: var(--orange); }

/* The handle and the button belong on one line: the button acts on the field beside it, and a
   wrapping label pushed it onto a row of its own. */
.signin-row { display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap; }
.signin-row label { flex-basis: 100%; margin: 0 0 0.2em; }
.signin-row input { flex: 1 1 14em; width: auto; min-width: 10em; margin: 0; }
.signin-row button { flex: none; }

/* ---------- the match page ---------- */
/* Title and subtitle on one line: the subtitle is a caption, not a paragraph. */
.matchhead { display: flex; align-items: baseline; gap: 1em; flex-wrap: wrap; }
.matchhead h1 { margin: 0.5em 0 0.3em; }
.matchhead .muted { font-size: 0.92em; }

/* One row, one baseline. The scrubber takes the slack so the buttons stay put as it grows. */
.transport { display: flex; align-items: center; gap: 0.5em; flex-wrap: nowrap;
    margin: 0.7em 0 0; padding: 0.6em 0; }
.transport button { padding: 0.3em 0.7em; }
.transport .tp-play { min-width: 8.5em; text-align: left; }
.transport #rp-seek { flex: 1 1 auto; min-width: 6em; margin: 0; }
.transport #rp-pos { flex: none; white-space: nowrap; font-size: 0.85em; }
/* Four short options; the browser's default select is far wider than "0.5x" needs. */
.transport select { flex: none; width: 5.2em; padding: 0.25em 0.3em; font-family: inherit;
    font-size: 0.9em; border: 1px solid #bfbfbf; background: #fff; }
@media (max-width: 680px) {
    .transport { flex-wrap: wrap; }
    .transport #rp-seek { order: 10; flex-basis: 100%; }
}

.think { margin-top: 1.2em; }
.think h3 { margin: 0 0 0.6em; font-size: 1.05em; }
.think h3:before { content: none; }

/* The state your fighter read, split into the parts it was actually assembled from. Undelimited
   prose is what the model sees; a player looking for what went wrong needs the opposite. */
.statepart { border-left: 3px solid #d7dae4; padding: 0.1em 0 0.1em 0.9em; margin: 0 0 0.9em; }
.statepart:last-child { margin-bottom: 0; }
.statepart-label { font-size: 0.75em; letter-spacing: .08em; text-transform: uppercase;
    color: var(--secondary-text-color); margin: 0 0 0.3em; }
.statepart pre { margin: 0; border: 0; background: transparent; padding: 0; font-size: 0.9em;
    white-space: pre-wrap; }
.statepart-true { border-left-color: var(--teal); }
.statepart-true .statepart-label { color: var(--teal); }
.statepart-lie { border-left-color: var(--red); background: rgba(213,49,48,0.05);
    padding: 0.5em 0.9em; }
.statepart-lie .statepart-label { color: var(--red); font-weight: bold; }
.statepart-mine { border-left-color: var(--orange); }

/* The live match canvas, same proportions as the replay stage. */
#live-stage { width: 100%; height: auto; display: block; margin-top: 0.8em;
    border: .08333rem solid #bfbfbf; background: #fff; }

/* Money moving in your favour or against it, in the fight history. */
.gain { color: #00a96c; font-weight: bold; }
.loss { color: var(--red); font-weight: bold; }

/* The move list and the state lines: collapsed by default, because they are reference you consult
   while writing, not something to read every visit. */
.ref { margin: 0 0 1em; font-size: 0.92em; }
.ref summary { cursor: pointer; color: var(--link-color); padding: 0.3em 0; }
.reflist { margin: 0.6em 0 0; padding: 0.8em 1em; background: var(--code-background);
    border-left: 3px solid #d7dae4; }
.reflist dt { font-weight: bold; margin-top: 0.7em; }
.reflist dt:first-child { margin-top: 0; }
.reflist dd { margin: 0.15em 0 0; color: var(--secondary-text-color); line-height: 1.45; }
.slot-why { font-size: 0.9em; margin: 0.7em 0 0; line-height: 1.45; }

/* The engine's report, shown as a block in the stack: it is the first thing the model reads, and
   the only part of the state that is true. Teal, against the red of the slot where the lie lands. */
.engine-slot { border: 2px dashed var(--teal); background: rgba(40,156,190,0.04);
    padding: 0.9em 1.1em; margin-bottom: 2.2em; }
.engine-slot p { margin-bottom: 0; font-size: 0.92em; }
.slot-label-true { color: var(--teal); }

/* The state your fighter reads, drawn as one stack in the order the model sees it: the rail on
   the left is what makes the sandwich legible -- the lie lands inside your text, not after it. */
.stack { border-left: 3px solid #d7dae4; padding-left: 1.4em; }
.stack .field:last-child { margin-bottom: 0; }

/* One dropdown with one real answer does not deserve the top of the page. */
.field-model { margin-top: 2.5em; padding-top: 1.6em; border-top: 1px dotted #d7dae4; }
.field-model .field-title { font-size: 0.95em; }
.field-model select { max-width: 22em; }

/* The lock control belongs beside the state it changes, not at the end of a sentence. */
.standing-btn { margin-left: auto; }
.standing-rule { margin: 0.9em 0 0; font-size: 0.92em; }
.standing-rule summary { cursor: pointer; color: var(--secondary-text-color); }
.standing-rule p { margin: 0.6em 0 0; color: var(--secondary-text-color); line-height: 1.5; }

/* The save bar sticks to the bottom of the viewport while the form is on screen, so the control
   that commits your work is never below the fold. It only draws attention once something is
   actually unsaved. */
.savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center;
    gap: 0.9em; flex-wrap: wrap; margin: 2em 0 0; padding: 0.9em 0;
    background: var(--background-color); border-top: 2px solid #d7dae4;
    /* The bar floats over the form, so the form needs room to scroll clear of it. */
    box-shadow: 0 -0.6em 0.6em -0.4em rgba(0,0,0,0.06); }
#fighter-form { padding-bottom: 1em; }
.savebar button { font-weight: bold; }
.savebar.dirty { border-top-color: var(--orange); }
.savebar.dirty button { border-color: var(--orange); color: var(--orange); }
.savebar .dirty-note { color: var(--orange); font-size: 0.92em; }

.standing-note { margin: 0.9em 0 0; line-height: 1.5; }
/* The button sits on its own row above a rule, so it reads as a control rather than as a word in
   a sentence. The explanation sits beside it, not around it. */
.standing-action { margin-top: 1.1em; padding-top: 0.9em; border-top: 1px dotted #d7dae4;
    display: flex; align-items: baseline; gap: 0.9em; flex-wrap: wrap; }
.standing-action .btn { flex: none; }
.standing-action .muted { flex: 1 1 18em; font-size: 0.92em; line-height: 1.45; }

.field-title { font-size: 1.05em; margin: 0 0 0.5em; }
.field-title:before { content: none; }
.field-title label { font-weight: bold; display: inline; margin: 0; }
.field-note { font-size: 0.9em; color: var(--secondary-text-color); margin: -0.2em 0 0.5em; }

/* Everything else on this page is what YOUR fighter reads. The taunt is the one thing that leaves
   and lands in someone else's head, so it carries the attacking colour the slot above it uses. */
/* The taunt is the only field that leaves your page, so it is the only orange one. */
.field-title.outgoing label { color: var(--orange); }
.field-outgoing textarea { border-left-color: var(--orange); background: rgba(254,129,19,0.05); }
.field-outgoing textarea:focus { border-left-color: var(--orange); }