/* The story editor (#438), in the wall editor's vocabulary: a header bar, a
   rail of sections, the form, and a preview drawn by the game's own overlay
   code. */
:root {
  --ink: var(--text);
  --panel: color-mix(in srgb, var(--text) 6%, var(--bg));
  --line: color-mix(in srgb, var(--text) 16%, transparent);
  --accent: #3e5a8e;
  --bad: #b04a3a;
  --good: #4a9a5a;
}

* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.4 system-ui, sans-serif; background: var(--bg, #14151a); color: var(--ink, #e6e8ec); }

#bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
#bar .brand { font-weight: 600; display: flex; align-items: center; gap: 6px; }
#bar .actions { display: flex; gap: 6px; margin-left: auto; align-items: center; flex-wrap: wrap; }

/* A sheet of paper with ruled lines, on the editors' 12x12 crispEdges grid. */
.ic {
  display: inline-block; width: 1.5em; height: 1.5em; flex: none;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.ic-script { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='6' height='1'/%3E%3Crect x='2' y='0' width='1' height='12'/%3E%3Crect x='8' y='1' width='1' height='1'/%3E%3Crect x='9' y='2' width='1' height='10'/%3E%3Crect x='2' y='11' width='8' height='1'/%3E%3Crect x='4' y='4' width='4' height='1'/%3E%3Crect x='4' y='6' width='4' height='1'/%3E%3Crect x='4' y='8' width='3' height='1'/%3E%3C/svg%3E"); }

button, select, input, textarea { font: inherit; color: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; }
button { cursor: pointer; }
button.primary { background: var(--accent); border-color: transparent; }
button:disabled { opacity: .4; cursor: default; }
button.small { padding: 1px 8px; font-size: .8rem; }
input, textarea { cursor: text; }
textarea { width: 100%; min-height: 8em; resize: vertical; }

#status { font-size: .8rem; font-weight: 600; letter-spacing: .06em; }
#status.ok { color: var(--good); }
#status.bad { color: var(--bad); }
#status.warn { color: var(--warn, #e0a040); }
#notice { margin: 0; padding: 6px 12px; background: #2a3a2a; }
#notice.bad { background: #3a2a2a; }

#shell { display: grid; grid-template-columns: 190px 1fr 500px; height: calc(100vh - 45px); }
#rail, #preview { background: var(--panel); padding: 10px; overflow-y: auto; }
#rail { border-right: 1px solid var(--line); }
#preview { border-left: 1px solid var(--line); }
#form { padding: 14px 18px; overflow-y: auto; }

#rail button { display: flex; justify-content: space-between; width: 100%; margin: 2px 0; text-align: left; border-color: transparent; background: none; }
#rail button.sel { background: rgba(255, 255, 255, .08); }
#rail .count { opacity: .55; font-variant-numeric: tabular-nums; }

.lab { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; opacity: .6; margin: 14px 0 6px; }
.hint { font-size: .8rem; opacity: .75; margin: 4px 0; white-space: pre-wrap; }
#problem { color: var(--bad); opacity: 1; white-space: pre-line; }
#problem.none { color: var(--good); }

.field { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.field > span { flex: 0 0 90px; opacity: .8; }
.field input, .field select { flex: 1; min-width: 0; }

/* One entry of a list: its fields in a row, its buttons at the end. */
.entry { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; margin: 6px 0; border: 1px solid var(--line); border-radius: 8px; }
.entry.sel { border-color: var(--accent); }
.entry input.id { width: 140px; font-family: ui-monospace, monospace; }
.entry input.grow, .entry select.grow { flex: 1; min-width: 160px; }
.entry .tools { display: flex; gap: 4px; margin-left: auto; }
.entry .mapid { font-family: ui-monospace, monospace; opacity: .7; }
.line { display: flex; gap: 6px; align-items: center; margin: 4px 0; width: 100%; }
.entry .line select.grow { flex: 0 0 150px; min-width: 0; }
.line input { flex: 1; }

#pv { width: 480px; height: 300px; image-rendering: pixelated; background: #000; border: 1px solid var(--line); }

/* A mission's map, picked by bare id, and its yml when shown. */
.tag { font-family: ui-monospace, monospace; font-size: .8rem; opacity: .7; }
.entry .line select.mappick { flex: 1; }
.entry textarea.yaml { font: 12px/1.45 ui-monospace, monospace; min-height: 20em; white-space: pre; }

/* Voice: Play for a recorded clip, Speak for one the browser reads. */
button.voiced { border-color: var(--good); }
button.synth { border-style: dashed; }

/* The Plot tree (#442): a rule, the dialogs it opens, what their end runs.
     on talk chair  [if not flag MET]
       | say hello
       |   YOU  HELLO.
       |   > YES.  [flag YES]
       |   when it ends  [if flag YES]  flag MET on */
h3.mission { font-size: .95rem; margin: 18px 0 6px; }
ul.tree { list-style: none; margin: 0; padding-left: 16px; border-left: 1px solid var(--line); }
ul.tree > li { margin: 6px 0; }
.rule, .dhead, .choice { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rule .on { font-family: ui-monospace, monospace; font-weight: 600; }
.cond, .step { font-family: ui-monospace, monospace; font-size: .78rem; padding: 0 6px; border-radius: 4px; border: 1px solid var(--line); }
.cond { color: #d8b45a; }
.step { opacity: .75; }
button.dlg { font-family: ui-monospace, monospace; padding: 1px 8px; border-color: var(--accent); }
.dlg.missing { color: var(--bad); font-family: ui-monospace, monospace; }
.say { display: grid; grid-template-columns: auto 9em 1fr; gap: 6px; align-items: baseline; margin: 3px 0 3px 8px; }
.say .who { font-weight: 600; opacity: .85; }
.choice { margin: 2px 0 2px 8px; opacity: .9; }

/* The map editor's rules modal, restyled for this page's vocabulary. */
#modal {
  --text: var(--ink); --muted: color-mix(in srgb, var(--ink) 60%, transparent); --err: var(--bad);
  color: var(--ink); background: var(--bg, #14151a);
  border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.1rem; max-width: 52rem;
}
#modal::backdrop { background: rgba(0, 0, 0, .55); }
#modal h2 { margin: 0 0 .9rem; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; }
#modal .buttons { display: flex; justify-content: flex-end; gap: .4rem; margin-top: 1rem; }
.storyrow { display: flex; gap: .6rem; align-items: center; margin-bottom: .6rem; font-size: .8rem; }
.rulespane { display: grid; grid-template-columns: 15rem 1fr; gap: .8rem; max-height: 60vh; overflow: auto; }
.rulelist { border-right: 1px solid var(--line); padding-right: .8rem; }
.ruleedit { min-width: 0; }
.ruleedit .none { margin: 0; font-size: .78rem; opacity: .6; }
.rulerow { display: grid; grid-template-columns: 1fr auto; gap: .3rem; align-items: center; }
.rulerow + .rulerow { border-top: 1px solid var(--line); }
.rulerow.sel { background: rgba(255, 255, 255, .1); }
.rulepick { display: flex; align-items: baseline; gap: .4rem; width: 100%; min-width: 0; padding: .22rem .35rem; border: 0; background: none; font-size: .78rem; text-align: left; }
.rulepick .ron { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, monospace; }
.rulepick .rsteps { margin-left: auto; font-size: .7rem; opacity: .6; white-space: nowrap; }
.rulepick .rbad { font-size: .7rem; color: var(--bad); white-space: nowrap; }
.tokenrow { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; min-width: 0; }
.tokenrow select, .tokenrow input { padding: .18rem .3rem; font-size: .78rem; max-width: 14rem; }
.tokenrow input { width: 6rem; }
.typed { display: flex; align-items: center; gap: .3rem; }
.why { font-size: .7rem; opacity: .6; }
.why.bad { color: var(--bad); opacity: 1; }
.why:empty { display: none; }
.tokenrow .orphan { border-color: var(--bad); }
.tokenrow .lit { font-family: ui-monospace, monospace; font-size: .78rem; opacity: .6; }
.tokenrow .nokind { font-size: .74rem; font-style: italic; color: var(--bad); }
.steprow { display: grid; grid-template-columns: 1fr auto; gap: .3rem; align-items: center; margin-bottom: .3rem; }
.once { display: flex; align-items: center; gap: .4rem; margin-top: .4rem; font-size: .78rem; }
.rulespane button.small.add { margin-top: .5rem; }
input.bad { border-color: var(--bad); }

/* Plot views (#447): Tree or Graph, and the plot's own edits. */
.plotbar { display: flex; align-items: baseline; justify-content: space-between; }
.views { display: flex; gap: 4px; }
.views button.on { background: var(--accent); border-color: transparent; }
.rule { cursor: pointer; border-radius: 4px; }
.rule:hover { background: rgba(255, 255, 255, .06); }
.inplace { margin: 4px 0 4px 8px; padding: 6px 8px; border: 1px solid var(--accent); border-radius: 6px; }
h3.mission select.small { font-size: .8rem; padding: 1px 6px; margin-left: 8px; }

/* The graph: rules grey, dialogs blue, the open one outlined. */
.graphwrap { overflow-x: auto; margin: 6px 0; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, .15); }
svg.graph { display: block; font: 11px ui-monospace, monospace; }
svg.graph .edge { fill: none; stroke: color-mix(in srgb, var(--ink) 40%, transparent); stroke-width: 1.5; }
svg.graph .elabel { fill: #d8b45a; font-size: 10px; }
svg.graph .node { cursor: pointer; }
svg.graph .node rect { fill: var(--panel); stroke: var(--line); }
svg.graph .node.dialog rect { stroke: var(--accent); }
svg.graph .node.sel rect { stroke: #d8b45a; stroke-width: 2; }
svg.graph .node.again rect { stroke-dasharray: 4 3; }
svg.graph .node.missing rect { stroke: var(--bad); }
svg.graph .node:hover rect { fill: color-mix(in srgb, var(--ink) 12%, var(--bg, #14151a)); }
svg.graph text { fill: var(--ink); }
svg.graph text.head { font-weight: 600; }
svg.graph text.sub { opacity: .7; }

/* Variables: each with where it is set and read. */
.refs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; width: 100%; }
.refs .tag { min-width: 5em; }
button.ref { font-family: ui-monospace, monospace; font-size: .75rem; }
.problem { color: var(--bad); font-size: .8rem; }