/* ============ app chrome (the workbench) ============ */
:root{
  --ink:#191c22; --ink-2:#21252e; --ink-3:#2b303b; --ink-4:#333a47;
  --line:#3a4150; --line-soft:#2c323d;
  --brass:#c8a45c; --brass-bright:#e0bd76; --brass-dim:#8d7741;
  --txt:#d8dbe2; --txt-dim:#888f9d; --txt-faint:#5d646f;
  --desk:#14161b; --paper:#f7f3ea;
  --ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --bar-h:50px; --status-h:30px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ink); color:var(--txt);
  font-family:var(--ui); font-size:14px; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; overflow:hidden;
}
button{font-family:inherit; font-size:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--brass); outline-offset:2px}

/* top bar */
.bar{
  height:var(--bar-h); flex:0 0 auto; display:flex; align-items:center; gap:14px;
  padding:0 14px; background:linear-gradient(var(--ink-2),var(--ink-2)) padding-box;
  border-bottom:1px solid var(--line-soft);
}
.brand{display:flex; align-items:center; gap:8px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; font-size:12.5px; color:var(--txt); white-space:nowrap}
.brand .mark{color:var(--brass); font-size:17px; line-height:1; transform:translateY(1px)}
.filename{
  background:var(--ink); border:1px solid var(--line-soft); color:var(--txt);
  border-radius:6px; padding:6px 10px; font-family:var(--mono); font-size:12.5px;
  width:200px; max-width:34vw;
}
.filename:focus{border-color:var(--brass-dim)}
.actions{margin-left:auto; display:flex; align-items:center; gap:4px}
.actions button{
  background:transparent; border:1px solid transparent; color:var(--txt-dim);
  padding:7px 11px; border-radius:6px; font-weight:500; font-size:13px;
}
.actions button:hover{color:var(--txt); background:var(--ink-3)}
.actions .menu{position:relative}
.menu-pop{
  position:absolute; right:0; top:calc(100% + 6px); background:var(--ink-3);
  border:1px solid var(--line); border-radius:8px; padding:5px; min-width:210px;
  box-shadow:0 14px 34px #0008; display:none; z-index:40;
}
.menu-pop.open{display:block}
.menu-pop button{display:block; width:100%; text-align:left; color:var(--txt); padding:9px 11px}
.menu-pop button:hover{background:var(--ink-4)}

/* work area */
.work{flex:1 1 auto; display:grid; grid-template-columns:minmax(320px, 42%) 1fr; min-height:0}
.editor-pane{display:flex; flex-direction:column; min-width:0; border-right:1px solid var(--line-soft); background:var(--ink-2)}
.toolbar{
  flex:0 0 auto; display:flex; flex-wrap:wrap; gap:3px; padding:8px 10px;
  border-bottom:1px solid var(--line-soft); background:var(--ink-2);
}
.toolbar button{
  background:var(--ink); border:1px solid var(--line-soft); color:var(--txt-dim);
  border-radius:5px; padding:5px 9px; font-size:12px; line-height:1; min-width:30px;
}
.toolbar button:hover{color:var(--brass-bright); border-color:var(--brass-dim)}
.toolbar .sep{width:1px; align-self:stretch; background:var(--line-soft); margin:2px 4px}
#editor{
  flex:1 1 auto; resize:none; border:0; outline:0; width:100%;
  background:var(--ink-2); color:#e7e3d8; padding:18px 20px;
  font-family:var(--mono); font-size:13.5px; line-height:1.65; tab-size:2;
}
#editor::placeholder{color:var(--txt-faint)}

/* preview */
.preview-pane{min-width:0; overflow:auto; background:var(--desk)}
.desk{padding:34px 24px 80px; min-height:100%;
  background:
    radial-gradient(120% 80% at 50% -10%, #1c1f26 0%, var(--desk) 60%);
}
.preview{display:flex; flex-direction:column; align-items:center; gap:26px; counter-reset:folio}

/* status bar */
.status{
  height:var(--status-h); flex:0 0 auto; display:flex; align-items:center; gap:18px;
  padding:0 16px; background:var(--ink-2); border-top:1px solid var(--line-soft);
  font-size:12px; color:var(--txt-dim);
}
.status .warn{color:var(--brass-bright)}
.status .dot{width:5px;height:5px;border-radius:50%;background:var(--txt-faint);display:inline-block;margin-right:7px;vertical-align:middle}

/* drawers */
.scrim{position:fixed; inset:0; background:#000a; opacity:0; pointer-events:none; transition:.18s; z-index:50}
.scrim.show{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; top:0; right:0; height:100%; width:380px; max-width:92vw; z-index:60;
  background:var(--ink-2); border-left:1px solid var(--line); transform:translateX(100%);
  transition:transform .2s ease; overflow:auto; box-shadow:-20px 0 50px #0006;
}
.drawer.open{transform:none}
.drawer h2{margin:0; padding:18px 20px; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brass); border-bottom:1px solid var(--line-soft); position:sticky; top:0; background:var(--ink-2)}
.drawer .body{padding:18px 20px}
.field{margin-bottom:18px}
.field>label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--txt-dim); margin-bottom:7px}
.field select, .field input[type=number], .field input[type=text], .field textarea{
  width:100%; background:var(--ink); border:1px solid var(--line-soft); color:var(--txt);
  border-radius:6px; padding:8px 10px; font-family:var(--ui); font-size:13px;
}
.field textarea{font-family:var(--mono); font-size:12px; line-height:1.5; min-height:96px; resize:vertical}
.toggles{display:flex; flex-direction:column; gap:2px}
.tog{display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line-soft)}
.tog label{font-size:13px; color:var(--txt)}
.tog input{appearance:none; width:38px; height:21px; background:var(--ink-4); border-radius:11px; position:relative; cursor:pointer; transition:.15s; flex:0 0 auto}
.tog input:checked{background:var(--brass-dim)}
.tog input::after{content:""; position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:#e8e8e8; transition:.15s}
.tog input:checked::after{left:19px; background:var(--brass-bright)}
.hint{font-size:11.5px; color:var(--txt-faint); margin-top:6px; line-height:1.5}

/* help */
.cheat{font-size:13px; line-height:1.62; color:var(--txt)}
.cheat h3{color:var(--brass); font-size:11px; text-transform:uppercase; letter-spacing:.07em; margin:20px 0 8px}
.cheat code{font-family:var(--mono); font-size:12px; background:var(--ink); border:1px solid var(--line-soft);
  padding:1px 5px; border-radius:4px; color:var(--brass-bright)}
.cheat table{width:100%; border-collapse:collapse; margin:4px 0}
.cheat td{padding:5px 8px 5px 0; vertical-align:top; border-bottom:1px solid var(--line-soft)}
.cheat td:first-child{white-space:nowrap; width:44%}

/* on-screen sheet stacking (page doc renders without this) */
.desk .preview{display:flex;flex-direction:column;align-items:center;gap:26px}

/* library panel */
.lib-list{display:flex;flex-direction:column;gap:5px}
.lib-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:var(--ink);border:1px solid var(--line-soft);border-radius:6px}
.lib-row .name{font-family:var(--mono);font-size:12px;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-row .ops button{background:transparent;border:1px solid var(--line-soft);color:var(--txt-dim);border-radius:5px;padding:4px 8px;font-size:12px;margin-left:4px;cursor:pointer}
.lib-row .ops button:hover{color:var(--brass-bright);border-color:var(--brass-dim)}
.lib-save-btn{background:var(--ink);border:1px solid var(--line-soft);color:var(--txt);border-radius:6px;padding:8px 12px;cursor:pointer}
.lib-save-btn:hover{border-color:var(--brass-dim);color:var(--brass-bright)}
.row-inline{display:flex;gap:8px}