/* Typeset — theme.

   Two layers. The first (to the "IterateCode look" line) is the shape of
   the app, first drawn as a soft raised UI: which things are cards, wells
   and rows, and how they sit. The second dresses it flat, in iteratecode's
   palette, for day and night. The notes below describe the first layer;
   its shadows now come out as hairlines, because the second layer sets
   the --nm-* tokens they read.

   Original notes:

   One surface colour for everything, and depth from light instead of lines:
   raised things cast a dark shadow down-right and a white one up-left;
   pressed things (inputs, the current tab, the open file) are the same
   shadows turned inward. Borders mostly go away.

   Loaded as the first thing in <body>, not in <head>: library.js,
   modules.js and workspace.js append their own <style> to <head> as they
   start, and a stylesheet in <body> comes after all of those in document
   order. That lets this file restyle them at the same specificity instead
   of an arms race of !important.

   Nothing here changes what anything does. Remove the <link> and the app
   is exactly as it was. */

:root, :root body{
  /* The surface, and the two lights that shape it. */
  --nm-bg:#E6E9EF;
  --nm-well:#DFE3EA;          /* inside a pressed area */
  --nm-hi:rgba(255,255,255,.92);
  --nm-lo:rgba(158,168,187,.58);
  --nm-raise-sm:3px 3px 7px var(--nm-lo), -3px -3px 7px var(--nm-hi);
  --nm-raise:7px 7px 16px var(--nm-lo), -7px -7px 16px var(--nm-hi);
  --nm-raise-lg:12px 12px 28px var(--nm-lo), -12px -12px 28px var(--nm-hi);
  --nm-inset-sm:inset 2px 2px 5px var(--nm-lo), inset -2px -2px 5px var(--nm-hi);
  --nm-inset:inset 4px 4px 9px var(--nm-lo), inset -4px -4px 9px var(--nm-hi);
  --nm-r:22px;
  --nm-r-md:16px;
  --nm-r-sm:12px;
  --nm-font:"Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* The app's own tokens, pointed at the new palette. Most components read
     these, so this block does much of the work. */
  --desk:var(--nm-bg);
  --paper:var(--nm-bg);
  --ink:#2A2F3A;
  --faint:#646B7A;
  --rule:#D2D7E0;
  --texblue:#3453D1;
  --error:#C0392B;
  --spent:#8A91A0;
  --serif:var(--nm-font);
  --side-bg:var(--nm-bg);
  --side-hover:var(--nm-bg);
  --side-here:var(--nm-bg);
}

html, body{background:var(--nm-bg)}
body{font-family:var(--nm-font); color:var(--ink); -webkit-font-smoothing:antialiased}
::selection{background:rgba(52,83,209,.18)}

/* ── Buttons ────────────────────────────────────────────────────────────
   Raised, rounded, no border, sentence case. Pressed while held. */
button{
  font-family:var(--nm-font); font-variant:normal; letter-spacing:0; font-weight:500;
  font-size:.86rem; color:var(--ink); background:var(--nm-bg);
  border:none; border-radius:var(--nm-r-sm); padding:.5rem 1rem;
  box-shadow:var(--nm-raise-sm); transition:box-shadow .15s ease, color .15s ease;
}
button:hover{background:var(--nm-bg); color:var(--texblue)}
button:active:not([disabled]){box-shadow:var(--nm-inset-sm)}
button:focus-visible{outline:2px solid rgba(52,83,209,.55); outline-offset:3px}
button[disabled], button:disabled{opacity:.5; box-shadow:var(--nm-raise-sm)}
button.primary, #genBtn, #signUpBtn, .lib-btn.blue, .ws-btn.blue{
  background:linear-gradient(145deg, #4466E6, #2E4BC4); color:#fff;
  box-shadow:4px 4px 10px rgba(52,83,209,.35), -3px -3px 8px var(--nm-hi);
}
button.primary:hover, #genBtn:hover, #signUpBtn:hover, .lib-btn.blue:hover, .ws-btn.blue:hover{
  background:linear-gradient(145deg, #3F60DF, #2942B3); color:#fff}
button.primary:active, #genBtn:active{box-shadow:inset 3px 3px 7px rgba(20,35,110,.45)}
#genBtn.spent{background:linear-gradient(145deg, #9AA1AF, #7F8696); color:#fff;
  box-shadow:var(--nm-raise-sm)}

/* Buttons that were drawn flat on purpose stay flat: tabs, icon buttons,
   drag handles, the cards that are buttons. */
.mv-tab, .hist-tabs button, .ws-tabs button, .tab, .more,
#fileTree .row-act, .pane-label .icon-btn, .mv-citex, .mv-del, .mv-add, .mv-fragdel,
.mv-grip, .mv-name, .mv-noteclose, .proj-card, .whoami-btn, .side button, .side .side-item{
  box-shadow:none;
}

/* ── Fields ────────────────────────────────────────────────────────────
   Pressed into the surface. */
input[type=text], input[type=search], input[type=email], input[type=password],
input[type=number], input[type=url], input:not([type]), select, textarea,
#genInlinePrompt, .toolbar input[type=text], .auth-field input{
  font-family:var(--nm-font); color:var(--ink);
  background:var(--nm-bg); border:none; border-radius:var(--nm-r-sm);
  box-shadow:var(--nm-inset-sm); padding:.55rem .8rem;
}
input:focus, select:focus, textarea:focus, #genInlinePrompt:focus{
  outline:none; box-shadow:var(--nm-inset-sm), 0 0 0 2px rgba(52,83,209,.35);
}
input::placeholder, textarea::placeholder{color:#8A91A0}
select{padding-right:2rem; appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--faint) 50%),
                   linear-gradient(135deg, var(--faint) 50%, transparent 50%);
  background-position:calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat}
input[type=checkbox], input[type=radio]{accent-color:var(--texblue)}

/* ── The left bar ────────────────────────────────────────────────────── */
.side{border-right:none; box-shadow:8px 0 18px -10px var(--nm-lo); padding-top:1rem}
.side-mark{
  background:var(--nm-bg); color:var(--texblue); border-radius:12px;
  box-shadow:var(--nm-raise-sm); width:2.3rem; height:2.3rem;
}
.side-name{font-weight:600; font-size:1.12rem; letter-spacing:-.01em}
.side-toggle{border-radius:12px}
.side-toggle:hover{box-shadow:var(--nm-raise-sm); color:var(--texblue)}
.side .side-item{border-radius:var(--nm-r-sm); font-size:.92rem; font-weight:500; margin:.08rem 0}
.side .side-item:hover{box-shadow:var(--nm-raise-sm); color:var(--ink)}
.side .side-item.here, .side .side-item.here:hover{box-shadow:var(--nm-inset-sm); font-weight:600}
.side .side-item.here .side-ico{color:var(--texblue)}
.side-new{margin-bottom:.5rem}
.side .side-new .side-ico{
  border:none; box-shadow:var(--nm-raise-sm); background:var(--nm-bg); width:2.1rem; height:2.1rem}
.side .side-new:hover{box-shadow:none}
.side .side-new:hover .side-ico{color:var(--texblue); box-shadow:var(--nm-raise)}
.side-head{font-size:.76rem; font-weight:500; letter-spacing:.02em; color:#7B8292}
.side-project input{font-weight:600; box-shadow:none; background:transparent; border-radius:0;
  padding:.2rem 0; font-size:1rem}
.side-project input:focus{box-shadow:none; border-bottom-color:var(--texblue)}
.side .side-mini{border-radius:10px}
.side .side-mini:hover{box-shadow:var(--nm-raise-sm)}
.side #fileTree li{border-radius:var(--nm-r-sm); font-weight:500; margin:.1rem 0}
.side #fileTree li:hover{background:var(--nm-bg); box-shadow:var(--nm-raise-sm)}
.side #fileTree li.active{background:var(--nm-bg); box-shadow:var(--nm-inset-sm); font-weight:600}
.side #fileTree .badge{border:none; background:var(--nm-bg); box-shadow:var(--nm-raise-sm);
  border-radius:6px; padding:.05rem .35rem; font-family:var(--nm-font); font-weight:600}
.side #fileTree .kind{font-family:var(--nm-font); font-weight:500}
.side .budget{font-family:var(--nm-font); font-size:.66rem}
.side .budget .gauge{height:6px; border-radius:6px; background:var(--nm-bg); box-shadow:var(--nm-inset-sm)}
.side .budget .gauge i{border-radius:6px; background:linear-gradient(90deg, #5C7CFA, #3453D1)}
.side .dropzone{border:none; box-shadow:var(--nm-inset); background:var(--nm-bg); border-radius:var(--nm-r-md)}
.side-proj .side-ico::before{background:#BFC5D1}
.side-foot{border-top:none; box-shadow:0 -10px 14px -12px var(--nm-lo)}
.side-foot #accountOut button{border:none; border-radius:var(--nm-r-sm)}
.side .whoami-btn{font-weight:600}

/* ── The editor's desk ───────────────────────────────────────────────── */
.toolbar{border-bottom:none}
.toolbar.gen-bar{padding-top:1rem; padding-bottom:.4rem}
#genInlinePrompt{border-radius:999px; padding:.6rem 1.1rem}
#genBtn{border-radius:999px; padding:.55rem 1.2rem}
.undo-redo button{border-radius:999px}
.gen-inline-copy strong{font-weight:600}
main{padding:1.1rem 1.25rem 1rem; --gutter:1.25rem}
.pane{
  background:var(--nm-bg); border:none; border-radius:var(--nm-r);
  box-shadow:var(--nm-raise); padding:.45rem;
}
.pane-label{
  border-bottom:none; text-transform:none; letter-spacing:0;
  font-size:.86rem; font-weight:600; color:var(--ink); padding:.55rem .75rem .7rem;
}
#editorLabel, #outLabel{font-weight:500; color:var(--faint); font-size:.8rem}
#editorLabel::first-letter, #outLabel::first-letter{text-transform:uppercase}
.pane-label-acts #compileBtn{border-radius:999px; padding:.4rem 1.1rem; font-size:.82rem}
.editor-host, #binaryView{
  border-radius:var(--nm-r-md); box-shadow:var(--nm-inset); background:var(--nm-well); overflow:hidden;
}
.CodeMirror{background:transparent; color:#262B35}
.CodeMirror-gutters{background:transparent; border-right:none}
.CodeMirror-linenumber{color:#9BA2B0}
.CodeMirror-activeline-background{background:rgba(255,255,255,.35)}
.pdf-wrap{background:var(--nm-well); border-radius:var(--nm-r-md); box-shadow:var(--nm-inset); overflow:hidden}
.pdf-empty{color:var(--faint); font-style:normal}
.gutter::before{width:4px; border-radius:4px}
.gutter:hover::before, .gutter.dragging::before{background:#C9CFD9}
.statusbar{border-top:none; font-family:var(--nm-font); font-size:.74rem; padding:.45rem 1.4rem .6rem}
#log{border-radius:var(--nm-r-md)}

/* The tab row above the source: a segmented control. */
.mv-tabs{background:var(--nm-bg); box-shadow:var(--nm-inset-sm); border-radius:999px; padding:.25rem; gap:.15rem}
.mv-tab{
  text-transform:none; letter-spacing:0; font-family:var(--nm-font); font-size:.78rem; font-weight:500;
  border:none; border-radius:999px; padding:.32rem .8rem; color:var(--faint);
}
.mv-tab:hover{color:var(--ink)}
.mv-tab[aria-selected="true"]{background:var(--nm-bg); color:var(--ink); box-shadow:var(--nm-raise-sm); border-bottom:none}

/* A generation waiting for a decision. */
.review{
  margin:.4rem 1.25rem 0; border:none; border-radius:var(--nm-r-md);
  background:var(--nm-bg); box-shadow:var(--nm-raise);
}
.review .rev-files span{border:none; border-radius:8px; box-shadow:var(--nm-raise-sm)}

/* ── Dialogs ─────────────────────────────────────────────────────────── */
dialog{
  background:var(--nm-bg); color:var(--ink); border:none; border-radius:26px;
  box-shadow:18px 18px 40px rgba(100,110,130,.45), -10px -10px 30px rgba(255,255,255,.6);
}
dialog::backdrop{background:rgba(52,58,72,.32); backdrop-filter:blur(3px)}
#authDlg::backdrop{background:rgba(40,45,58,.5)}
dialog h2{border-bottom:none; font-weight:600; letter-spacing:-.01em}
dialog .dlg-foot{border-top:none}
.hist-head, .open-head, .acct-head{border-bottom:none}
.hist-tabs{border-bottom:none; background:var(--nm-bg); box-shadow:var(--nm-inset-sm); border-radius:999px;
  padding:.25rem; display:inline-flex; gap:.15rem; margin:0 1rem}
.hist-tabs button{border:none; border-radius:999px; padding:.3rem .8rem; font-family:var(--nm-font)}
.hist-tabs button[aria-selected="true"]{box-shadow:var(--nm-raise-sm); background:var(--nm-bg); border:none}
#genList li{border:none; border-radius:var(--nm-r-sm); margin:.35rem .8rem; box-shadow:var(--nm-raise-sm)}
#genList li.head{background:var(--nm-bg); box-shadow:var(--nm-inset-sm)}
#genList .state{border:none; box-shadow:var(--nm-raise-sm); border-radius:6px}
.gen-modes label{border:none; border-radius:var(--nm-r-sm); box-shadow:var(--nm-raise-sm)}
.gen-modes label:has(input:checked){background:var(--nm-bg); box-shadow:var(--nm-inset-sm)}
#projGrid{gap:1.6rem}
.proj-cover{border:none; border-radius:var(--nm-r-md); box-shadow:var(--nm-raise); background:#F7F8FA; overflow:hidden}
.proj-card:hover .proj-cover{box-shadow:var(--nm-raise-lg)}
.proj-card.current .proj-cover{outline:none; box-shadow:var(--nm-raise), 0 0 0 3px rgba(52,83,209,.55)}
.proj-title{font-weight:600}
.acct-list li, .acct-row{border-color:transparent}

/* ── Module view and review (modules.js) ─────────────────────────────── */
.mv-bar, .rv-bar{border-bottom:none}
.mv-section{border:none; border-radius:var(--nm-r-md); box-shadow:var(--nm-raise-sm); background:var(--nm-bg); margin:.6rem .35rem}
.mv-frag{border:none; border-radius:var(--nm-r-sm); box-shadow:var(--nm-raise-sm); background:var(--nm-bg)}
.mv-num{font-family:var(--nm-font)}
.mv-pad{border:none; border-radius:var(--nm-r-sm); box-shadow:var(--nm-raise-sm); font-family:var(--nm-font);
  text-transform:none; letter-spacing:0; font-weight:600}
.mv-note{border-radius:var(--nm-r-sm); box-shadow:4px 4px 10px var(--nm-lo)}
.mv-cite{border-radius:8px}
.rv-item{border:none; border-radius:var(--nm-r-md); box-shadow:var(--nm-raise-sm); background:var(--nm-bg); margin:.6rem .35rem}
.rv-chip{border:none; border-radius:999px; box-shadow:var(--nm-raise-sm); font-family:var(--nm-font); background:var(--nm-bg)}
.rv-chip[aria-pressed="true"], .rv-chip.on{box-shadow:var(--nm-inset-sm); color:var(--texblue)}
.rv-diff, .rv-in, .rv-out{border-radius:var(--nm-r-sm)}

/* ── Library (library.js) ────────────────────────────────────────────── */
#libraryPanel{background:var(--nm-bg)}
#libraryPanel.lib-wide{background:var(--nm-bg)}
.lib-bar{border-bottom:none}
.lib-btn{border:none; border-radius:10px; box-shadow:var(--nm-raise-sm); font-variant:normal; letter-spacing:0;
  font-family:var(--nm-font); font-weight:500}
.lib-btn.quiet{box-shadow:none}
.lib-btn.quiet:hover{box-shadow:var(--nm-raise-sm)}
.lib-grid{gap:1.5rem; padding:.6rem}
.lib-card{border:none; border-radius:var(--nm-r); background:var(--nm-bg); box-shadow:var(--nm-raise); overflow:hidden}
.lib-card:hover{box-shadow:var(--nm-raise-lg); transform:none}
.lib-thumb{background:var(--nm-well); box-shadow:var(--nm-inset-sm); border-radius:var(--nm-r-md);
  margin:.55rem .55rem 0; border:none}
.lib-cover{border-radius:var(--nm-r-sm); border:none; box-shadow:var(--nm-raise-sm); background:#F7F8FA}
.lib-cap{border-top:none}
.lib-chip{border:none; border-radius:999px; background:var(--nm-bg); box-shadow:var(--nm-inset-sm);
  font-family:var(--nm-font); padding:.12rem .5rem}
.lib-nopdf{border:none; border-radius:var(--nm-r-sm); box-shadow:var(--nm-inset-sm); background:var(--nm-bg)}
.lib-rhead{border-bottom:none}
.lib-pages{background:var(--nm-well); border-radius:var(--nm-r-md); box-shadow:var(--nm-inset)}
.lib-page{box-shadow:6px 6px 16px var(--nm-lo); border-radius:4px}
.lib-side{border-left:none}
.lib-pi{border:none; border-radius:var(--nm-r-sm); box-shadow:var(--nm-raise-sm)}
.lib-pop{border:none; border-radius:var(--nm-r-md); background:var(--nm-bg); box-shadow:var(--nm-raise)}
.lib-modal, .ws-modal{background:rgba(52,58,72,.32); backdrop-filter:blur(3px)}
.lib-dlg, .ws-dlg{
  background:var(--nm-bg); border:none; border-radius:26px;
  box-shadow:18px 18px 40px rgba(100,110,130,.45), -10px -10px 30px rgba(255,255,255,.6);
}
.lib-preview, .lib-bib{border:none; border-radius:var(--nm-r-sm); box-shadow:var(--nm-inset-sm); background:var(--nm-well)}

/* ── Versions (workspace.js) ─────────────────────────────────────────── */
.ws-btn{border:none; border-radius:10px; box-shadow:var(--nm-raise-sm); font-variant:normal; letter-spacing:0;
  font-family:var(--nm-font); font-weight:500; background:var(--nm-bg)}
.ws-row{border:none; border-radius:var(--nm-r-sm); box-shadow:var(--nm-raise-sm); padding:.6rem .8rem; margin:.5rem 0}
.ws-dlg h4{text-transform:none; letter-spacing:0; font-weight:600; color:var(--ink); font-size:.9rem}
.ws-view{border:none; border-radius:var(--nm-r-sm); box-shadow:var(--nm-inset-sm); overflow:hidden}
.ws-tabs{background:transparent}
.ws-tabs button{border-radius:999px}
.ws-tabs button[aria-selected=true]{border:none; box-shadow:var(--nm-raise-sm); background:var(--nm-bg)}
#paperSwitch{border:none; box-shadow:var(--nm-inset-sm); border-radius:10px; padding:.35rem .6rem}

/* ── Search page ─────────────────────────────────────────────────────── */
.bar{background:var(--nm-bg); border-bottom:none; box-shadow:0 10px 18px -14px var(--nm-lo)}
.tabs{border-bottom:none; background:var(--nm-bg); box-shadow:var(--nm-inset-sm); border-radius:999px;
  padding:.25rem; display:inline-flex; gap:.15rem}
.tab{border:none; border-radius:999px; padding:.4rem 1rem; font-variant:normal; letter-spacing:0; font-family:var(--nm-font)}
.tab[aria-selected=true]{box-shadow:var(--nm-raise-sm); background:var(--nm-bg); border:none}
#q{border-radius:999px; padding:.8rem 1.3rem; font-size:1rem}
#goBtn{border-radius:999px}
.work, .adder, .manual{border:none; border-radius:var(--nm-r); background:var(--nm-bg); box-shadow:var(--nm-raise); padding:1rem 1.25rem}
.badge{border:none; border-radius:999px; box-shadow:var(--nm-inset-sm); background:var(--nm-bg); font-family:var(--nm-font)}
pre.bib{border:none; border-radius:var(--nm-r-sm); box-shadow:var(--nm-inset-sm); background:var(--nm-well)}
details.syntax{border-radius:var(--nm-r-sm)}

/* ── Second pass: panels that brought their own paper colour ─────────── */
#modulePanel, #reviewPanel{
  background:var(--nm-well); border-radius:var(--nm-r-md); box-shadow:var(--nm-inset);
}
.mv-bar, .rv-bar, .rv-head, .rv-judge, .mv-lead, .mv-bibnote{background:transparent}
.mv-section, .mv-section.open > .mv-sechead{background:var(--nm-bg)}
.mv-head:hover{background:transparent}
.mv-secfoot button:hover{background:var(--nm-bg); border-style:none}
.mv-secfoot button{border:none; box-shadow:var(--nm-raise-sm); border-radius:10px}
.mv-guide, .mv-tidy{border:none; border-radius:var(--nm-r-sm); box-shadow:var(--nm-raise-sm)}
.mv-flag, .rv-verdict{border:none; border-radius:999px; box-shadow:var(--nm-raise-sm)}
.rv-edit, .rv-pastebody{border-radius:var(--nm-r-sm)}
.mv-name:hover, .mv-name:focus{background:var(--nm-bg); border-color:transparent; box-shadow:var(--nm-inset-sm); border-radius:8px}
.lib-form, .lib-empty{border:none; border-radius:var(--nm-r); box-shadow:var(--nm-raise)}
.lib-form input, .lib-form select, .lib-form textarea{border:none; box-shadow:var(--nm-inset-sm); background:var(--nm-bg)}
.lib-bar input[type=text], .lib-bar select{border:none; box-shadow:var(--nm-inset-sm); background-color:var(--nm-bg); border-radius:10px}
.lib-dlg select, .lib-dlg textarea{border:none; box-shadow:var(--nm-inset-sm); background:var(--nm-bg)}
.lib-rhead h3{font-weight:600}
.ws-row .here{border:none; border-radius:999px; box-shadow:var(--nm-inset-sm); padding:.05rem .5rem}
.ws-new input{border:none; box-shadow:var(--nm-inset-sm); background:var(--nm-bg); border-radius:10px}

/* Tab names are written in lower case; show them as names. */
.mv-tab{text-transform:capitalize}
.hist-tabs button{text-transform:none}

/* Room for raised rows' shadows inside the bar, which clips sideways. */
.side{padding-left:.8rem; padding-right:.8rem}
.side-foot{margin-left:-.8rem; margin-right:-.8rem; padding-left:.8rem; padding-right:.8rem}
body.side-collapsed .side{padding-left:.5rem; padding-right:.5rem}
body.side-collapsed .side-foot{margin-left:-.5rem; margin-right:-.5rem; padding-left:.5rem; padding-right:.5rem}
#libraryPanel:not(.lib-wide){background:var(--nm-well); border-radius:var(--nm-r-md); box-shadow:var(--nm-inset)}

/* The compile log: a pressed well, not a black terminal. */
#log{background:var(--nm-well); color:#3A4050; box-shadow:var(--nm-inset); margin:0 1.25rem .6rem; border-radius:var(--nm-r-md)}

/* A narrow window: the prompt and its buttons on one line, the long
   description left to the dialog it describes. */
@media (max-width:900px){
  .toolbar.gen-bar{grid-template-columns:minmax(0,1fr) auto; gap:.6rem}
  .gen-bar .gen-inline{grid-column:1; min-width:0}
  .gen-bar .undo-redo{grid-column:2}
  .gen-inline-copy{display:none}
  #genInlinePrompt{min-width:0; width:100%}
}
@media (max-width:600px){
  .toolbar.gen-bar{grid-template-columns:minmax(0,1fr); row-gap:.5rem}
  .gen-bar .undo-redo{grid-column:1; justify-self:end}
}

.proj-cover.blank .mt-lines{background:repeating-linear-gradient(to bottom, #D9DDE4 0 2px, transparent 2px 9px)}

/* The library's own styles reset a select's background as a shorthand,
   which would tile the arrow across the whole box. Put it back. */
.lib-bar select, .lib-form select, .lib-dlg select, .opts select, #project, .lib-sopts select{
  padding-right:2rem; background-repeat:no-repeat; background-size:5px 5px, 5px 5px;
  background-position:calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-image:linear-gradient(45deg, transparent 50%, var(--faint) 50%),
                   linear-gradient(135deg, var(--faint) 50%, transparent 50%);
}

/* ════════════════════════════════════════════════════════════════════════
   The IterateCode look, day and night.

   Everything above this line is the shape of the app: which things are
   cards, which are wells, which are rows. Everything below dresses it the
   way iteratecode.com is dressed — flat panels with hairline borders
   instead of raised soft shadows, green for the thing to press, blue for
   links and focus, 14px corners on cards, 9px on buttons and fields, 8px
   on rows — in two palettes: a light one for day and IterateCode's own
   near-black for night.

   The rules are written once, against the --ic-* colours; only the two
   palette blocks differ. data-theme on <html> picks one (the script in
   <head> decides before first paint; the moon/sun in the left bar
   switches). :root in front of a rule is there for weight, so it beats the
   component's own class; :where(:root) keeps a rule as weak as the bare
   element rule it replaces, so flat tabs and icon buttons stay flat.
   ════════════════════════════════════════════════════════════════════════ */
:root, :root body{
  color-scheme:light;
  --ic-void:#F3F5F8; --ic-void-2:#FBFCFD;
  --ic-panel:#FFFFFF; --ic-panel-2:#F2F4F7; --ic-panel-3:#E8ECF1;
  --ic-line:#E2E6EC; --ic-line-2:#D3D9E1; --ic-line-3:#B9C1CD;
  --ic-ink:#0F1420; --ic-ink-2:#344054; --ic-dim:#5B6577; --ic-dimmer:#8A93A5;
  --ic-pass:#30d158; --ic-pass-2:#24b84a; --ic-pass-hover:#3ee066; --ic-pass-ink:#15803D;
  --ic-pass-glow:rgba(48,209,88,.16); --ic-pass-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px rgba(48,209,88,.28);
  --ic-wire:#2563EB; --ic-wire-2:#0E7490; --ic-wire-glow:rgba(37,99,235,.14);
  --ic-warn:#B45309; --ic-purple:#7C3AED; --ic-danger:#DC2626;
  --ic-shade:rgba(15,23,42,.08);
  --ic-drop:0 1px 2px rgba(15,23,42,.04), 0 10px 28px -18px rgba(15,23,42,.18);
  --ic-drop-lg:0 2px 6px rgba(15,23,42,.06), 0 30px 70px -24px rgba(15,23,42,.28);
  --ic-backdrop:rgba(15,23,42,.35);
  --nm-bg:var(--ic-panel);
  --nm-well:var(--ic-void-2);
  --nm-hi:transparent;
  --nm-lo:var(--ic-shade);
  --nm-raise-sm:0 0 0 1px var(--ic-line-2);
  --nm-raise:0 0 0 1px var(--ic-line), var(--ic-drop);
  --nm-raise-lg:0 0 0 1px var(--ic-line-2), var(--ic-drop-lg);
  --nm-inset-sm:inset 0 0 0 1px var(--ic-line);
  --nm-inset:inset 0 0 0 1px var(--ic-line);
  --nm-r:14px; --nm-r-md:10px; --nm-r-sm:9px;
  --ink:var(--ic-ink);
  --faint:var(--ic-dim);
  --rule:var(--ic-line);
  --texblue:var(--ic-wire);
  --error:var(--ic-danger);
  --spent:var(--ic-line-3);
  --side-bg:var(--ic-void);
  --side-hover:var(--ic-panel-2);
  --side-here:var(--ic-panel-2);
}
:root[data-theme="dark"], :root[data-theme="dark"] body{
  color-scheme:dark;
  --ic-void:#0a0e14; --ic-void-2:#060910;
  --ic-panel:#10151f; --ic-panel-2:#161c28; --ic-panel-3:#1c2333;
  --ic-line:#232b3a; --ic-line-2:#2e3849; --ic-line-3:#3a465a;
  --ic-ink:#eef2f8; --ic-ink-2:#c5cddb; --ic-dim:#8b98ad; --ic-dimmer:#566072;
  --ic-pass:#30d158; --ic-pass-2:#1eb84a; --ic-pass-hover:#3ee066; --ic-pass-ink:#30d158;
  --ic-pass-glow:rgba(48,209,88,.14); --ic-pass-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 8px 24px rgba(48,209,88,.28);
  --ic-wire:#4a9eff; --ic-wire-2:#7cc4ff; --ic-wire-glow:rgba(74,158,255,.14);
  --ic-warn:#ffd60a; --ic-purple:#a371f7; --ic-danger:#ff6b6b;
  --ic-shade:rgba(0,0,0,.6);
  --ic-drop:0 24px 60px -30px rgba(0,0,0,.8);
  --ic-drop-lg:0 40px 120px -20px rgba(0,0,0,.75);
  --ic-backdrop:rgba(6,9,16,.72);
}
:root, :root body{background:var(--ic-void)}
@media (prefers-reduced-motion:no-preference){
  body, .side, .pane, button, .side-item{transition:background-color .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease}
}
:root ::selection{background:rgba(48,209,88,.28); color:var(--ink)}
:root input::placeholder, :root textarea::placeholder{color:var(--ic-dimmer)}

/* ── Buttons: a panel with a hairline; green when it is the one to press ── */
:where(:root) button{
  background:var(--ic-panel-2); color:var(--ink); border-radius:9px;
  box-shadow:0 0 0 1px var(--ic-line-2);
}
:where(:root) button:hover{background:var(--ic-panel-3); color:var(--ink); box-shadow:0 0 0 1px var(--ic-line-3)}
:where(:root) button:active:not([disabled]){box-shadow:0 0 0 1px var(--ic-line-3); background:var(--ic-panel)}
:where(:root) button:focus-visible{outline:2px solid var(--ic-wire); outline-offset:2px}
:root button.primary, :root #genBtn, :root #signUpBtn,
:root .lib-btn.blue, :root .ws-btn.blue, :root #compileBtn,
:root #goBtn{
  background:var(--ic-pass); color:#0a0e14; font-weight:600; border-radius:9px;
  box-shadow:var(--ic-pass-shadow);
}
:root button.primary:hover, :root #genBtn:hover, :root #signUpBtn:hover,
:root .lib-btn.blue:hover, :root .ws-btn.blue:hover, :root #compileBtn:hover,
:root #goBtn:hover{
  background:var(--ic-pass-hover); color:#0a0e14;
  box-shadow:var(--ic-pass-shadow), 0 10px 28px rgba(48,209,88,.3);
}
:root button.primary:active, :root #genBtn:active{background:var(--ic-pass-2)}
:root #genBtn.spent{background:var(--ic-panel-3); color:var(--ic-ink-2); box-shadow:0 0 0 1px var(--ic-line-2)}
:root #genInlinePrompt, :root .undo-redo button,
:root #q{border-radius:9px}
:root .lib-btn, :root .ws-btn, :root .mv-secfoot button{
  background:var(--ic-panel-2); box-shadow:0 0 0 1px var(--ic-line-2); border-radius:8px}
:root .lib-btn.quiet{background:transparent; box-shadow:none}
:root .lib-btn.quiet:hover{background:var(--ic-panel-2); box-shadow:0 0 0 1px var(--ic-line-2)}

/* ── Fields: sunk into the void, with a hairline that turns blue on focus ── */
:where(:root) :is(input[type=text], input[type=search], input[type=email], input[type=password],
  input[type=number], input[type=url], input:not([type]), select, textarea){
  background-color:var(--ic-void); color:var(--ink); border-radius:9px;
  box-shadow:inset 0 0 0 1px var(--ic-line-2);
}
:root #genInlinePrompt{background:var(--ic-void); box-shadow:inset 0 0 0 1px var(--ic-line-2)}
:root input:focus, :root select:focus, :root textarea:focus,
:root #genInlinePrompt:focus{
  box-shadow:inset 0 0 0 1px var(--ic-wire), 0 0 0 3px var(--ic-wire-glow);
}
:root .side-project input{background:transparent; box-shadow:none; border-radius:0}
:root .side-project input:focus{box-shadow:none; border-bottom-color:var(--ic-wire)}
:root .mv-note textarea, :root .lib-fpi textarea{background:transparent; box-shadow:none}
:root select{
  background-image:linear-gradient(45deg, transparent 50%, var(--faint) 50%),
                   linear-gradient(135deg, var(--faint) 50%, transparent 50%)}

/* ── The left bar: the void, a hairline edge, rows that light up ── */
:root .side{background:var(--ic-void); box-shadow:inset -1px 0 0 var(--ic-line)}
:root .side-mark{
  background:var(--ic-panel-2); color:var(--ic-pass-ink); border-radius:7px;
  box-shadow:0 0 0 1px var(--ic-line-2), 0 0 0 4px var(--ic-pass-glow);
}
:root .side-toggle{border-radius:8px; box-shadow:none; background:transparent}
:root .side-toggle:hover{background:var(--ic-panel-2); box-shadow:0 0 0 1px var(--ic-line-2); color:var(--ink)}
:root .side .side-item{border-radius:8px}
:root .side .side-item:hover{background:var(--ic-panel-2); box-shadow:none}
:root .side .side-item.here, :root .side .side-item.here:hover{
  background:var(--ic-panel-2); box-shadow:inset 0 0 0 1px var(--ic-line-2)}
:root .side .side-item.here .side-ico{color:var(--ic-pass-ink)}
:root .side .side-new .side-ico{background:var(--ic-panel-2); box-shadow:0 0 0 1px var(--ic-line-2)}
:root .side .side-new:hover{background:transparent}
:root .side .side-new:hover .side-ico{color:var(--ic-pass-ink); box-shadow:0 0 0 1px var(--ic-line-3), 0 0 0 4px var(--ic-pass-glow)}
:root .side-head{color:var(--ic-dimmer)}
:root .side .side-mini{border-radius:7px}
:root .side .side-mini:hover{background:var(--ic-panel-2); box-shadow:0 0 0 1px var(--ic-line-2); color:var(--ic-wire)}
:root .side #fileTree li{border-radius:8px}
:root .side #fileTree li:hover{background:var(--ic-panel-2); box-shadow:none}
:root .side #fileTree li.active{background:var(--ic-panel-2); box-shadow:inset 0 0 0 1px var(--ic-line-2)}
:root .side #fileTree li::before{border-color:var(--ic-dimmer)}
:root .side #fileTree li.active::before{border-color:var(--ic-pass-ink)}
:root .side #fileTree .badge{background:var(--ic-pass-glow); color:var(--ic-pass-ink); box-shadow:inset 0 0 0 1px rgba(48,209,88,.3); border-radius:5px}
:root .side .budget .gauge{background:var(--ic-panel-2); box-shadow:inset 0 0 0 1px var(--ic-line)}
:root .side .budget .gauge i{background:var(--ic-pass)}
:root .side-proj .side-ico::before{background:var(--ic-line-3)}
:root .side-proj.here .side-ico::before{background:var(--ic-pass); box-shadow:0 0 0 3px var(--ic-pass-glow)}
:root .side-foot{background:var(--ic-void); box-shadow:inset 0 1px 0 var(--ic-line)}
:root .side .dropzone{background:var(--ic-panel); box-shadow:inset 0 0 0 1px var(--ic-line-2); border-radius:10px}

/* ── The desk ── */
:root .pane{background:var(--ic-panel); border-radius:14px; box-shadow:0 0 0 1px var(--ic-line), var(--ic-drop)}
:root .editor-host, :root #binaryView,
:root .pdf-wrap, :root #modulePanel, :root #reviewPanel,
:root #libraryPanel:not(.lib-wide){
  background:var(--ic-void-2); border-radius:10px; box-shadow:inset 0 0 0 1px var(--ic-line)}
:root .pane-label{color:var(--ink)}
:root #editorLabel, :root #outLabel{color:var(--ic-dimmer); font-family:var(--mono)}
:root .gutter:hover::before, :root .gutter.dragging::before{background:var(--ic-line-2)}
:root .statusbar{color:var(--ic-dimmer); font-family:var(--mono)}
:root #log{background:var(--ic-void-2); color:var(--ic-ink-2); box-shadow:inset 0 0 0 1px var(--ic-line); border-radius:10px}
:root .gen-inline-copy strong{color:var(--ink)}

/* The tab rows: a void track, the chosen tab a panel with a hairline. */
:root .mv-tabs, :root .hist-tabs, :root .tabs{
  background:var(--ic-void-2); box-shadow:inset 0 0 0 1px var(--ic-line); border-radius:10px}
:root .mv-tab, :root .hist-tabs button, :root .tab{
  border-radius:7px; background:transparent; box-shadow:none; color:var(--faint)}
:root .mv-tab:hover, :root .hist-tabs button:hover, :root .tab:hover{color:var(--ink); background:transparent}
:root .mv-tab[aria-selected="true"], :root .hist-tabs button[aria-selected="true"],
:root .tab[aria-selected=true]{
  background:var(--ic-panel-2); color:var(--ink); box-shadow:0 0 0 1px var(--ic-line-2)}
:root .ws-tabs button[aria-selected=true]{background:var(--ic-panel-2); box-shadow:0 0 0 1px var(--ic-line-2)}
:root .ws-tabs button{border-radius:7px}

/* ── Dialogs ── */
:root dialog, :root .lib-dlg, :root .ws-dlg{
  background:var(--ic-panel); border-radius:16px;
  box-shadow:0 0 0 1px var(--ic-line-2), var(--ic-drop-lg)}
:root dialog::backdrop{background:var(--ic-backdrop); backdrop-filter:blur(4px)}
:root .lib-modal, :root .ws-modal{background:var(--ic-backdrop)}
:root #genList li, :root .ws-row, :root .rv-item,
:root .mv-section, :root .mv-frag, :root .gen-modes label{
  background:var(--ic-panel); box-shadow:0 0 0 1px var(--ic-line); border-radius:10px}
:root #genList li.head, :root .gen-modes label:has(input:checked){
  background:var(--ic-panel-2); box-shadow:inset 0 0 0 1px var(--ic-wire), 0 0 0 3px var(--ic-wire-glow)}

/* ── Cards: library, projects, search results ── */
:root .lib-card, :root .work, :root .adder, :root .manual,
:root .lib-form, :root .lib-empty{
  background:var(--ic-panel); border-radius:14px; box-shadow:0 0 0 1px var(--ic-line)}
:root .lib-card:hover, :root .work:hover{box-shadow:0 0 0 1px var(--ic-line-2), var(--ic-drop)}
:root .lib-thumb{background:var(--ic-void-2); box-shadow:inset 0 0 0 1px var(--ic-line); border-radius:10px}
:root .lib-cover, :root .proj-cover{
  background:var(--ic-panel-2); color:var(--ink); border-radius:10px; box-shadow:0 0 0 1px var(--ic-line-2)}
:root .proj-card:hover .proj-cover{box-shadow:0 0 0 1px var(--ic-line-3), var(--ic-drop)}
:root .proj-card.current .proj-cover{box-shadow:0 0 0 1px var(--ic-pass), 0 0 0 4px var(--ic-pass-glow)}
:root .proj-cover.blank .mt-lines{background:repeating-linear-gradient(to bottom, var(--ic-line-2) 0 2px, transparent 2px 9px)}
:root .lib-chip, :root .badge, :root .rv-chip,
:root .ws-row .here, :root .lib-nopdf{
  background:var(--ic-panel-2); box-shadow:inset 0 0 0 1px var(--ic-line-2); border-radius:6px; color:var(--ic-ink-2)}
:root .rv-chip.on, :root .rv-chip[aria-pressed="true"]{
  background:var(--ic-wire-glow); color:var(--ic-wire); box-shadow:inset 0 0 0 1px rgba(74,158,255,.4)}
:root .bar{background:var(--ic-void); box-shadow:inset 0 -1px 0 var(--ic-line)}
:root .lib-pages{background:var(--ic-void-2); box-shadow:inset 0 0 0 1px var(--ic-line); border-radius:10px}
:root .lib-page{box-shadow:var(--ic-drop-lg)}
:root .lib-pop{background:var(--ic-panel-2); box-shadow:0 0 0 1px var(--ic-line-2), var(--ic-drop-lg); border-radius:10px}
:root .lib-pi{border-radius:8px}
:root .lib-preview, :root .lib-bib, :root pre.bib,
:root .ws-view, :root .rv-edit, :root .rv-pastebody{
  background:var(--ic-void-2); color:var(--ic-ink-2); box-shadow:inset 0 0 0 1px var(--ic-line); border-radius:9px}
:root #paperSwitch{background-color:var(--ic-void); box-shadow:inset 0 0 0 1px var(--ic-line-2); border-radius:8px}
:root .review{background:var(--ic-panel); box-shadow:0 0 0 1px var(--ic-line-2); border-radius:12px}
:root .mv-pad, :root .mv-note{border-radius:9px}

/* ── The source: LaTeX in IterateCode's colours ── */
:root .CodeMirror{color:var(--ic-ink-2); font-family:var(--mono)}
:root .CodeMirror-cursor{border-left-color:var(--ic-pass-ink)}
:root .CodeMirror-selected{background:rgba(74,158,255,.2) !important}
:root .CodeMirror-linenumber{color:var(--ic-dimmer)}
:root .CodeMirror-activeline-background{background:rgba(255,255,255,.03)}
:root .cm-s-default .cm-tag{color:var(--ic-wire)}
:root .cm-s-default .cm-keyword{color:var(--ic-purple)}
:root .cm-s-default .cm-builtin{color:var(--ic-wire-2)}
:root .cm-s-default .cm-bracket{color:var(--ic-dimmer)}
:root .cm-s-default .cm-comment{color:var(--faint); font-style:italic}
:root .cm-s-default .cm-string, :root .cm-s-default .cm-string-2{color:var(--ic-pass-ink)}
:root .cm-s-default .cm-atom, :root .cm-s-default .cm-number{color:var(--ic-warn)}
:root .cm-s-default .cm-variable-2{color:var(--ink)}
:root .cm-s-default .cm-error{color:var(--ic-danger)}
:root .CodeMirror-matchingbracket{color:var(--ink) !important; background:rgba(48,209,88,.22)}

/* ── Status colours, from the same palette ── */
:root .rv-verdict, :root .mv-flag{border-radius:6px}
:root .rv-verdict.ok{color:var(--ic-pass-ink); background:var(--ic-pass-glow); box-shadow:inset 0 0 0 1px rgba(48,209,88,.3)}
:root .rv-verdict.out{color:var(--ic-danger); background:rgba(255,107,107,.12); box-shadow:inset 0 0 0 1px rgba(255,107,107,.3)}
:root .rv-verdict.req{color:var(--ic-warn); background:rgba(255,214,10,.08); box-shadow:inset 0 0 0 1px rgba(255,214,10,.3)}
:root .rv-verdict.rv-typed{color:var(--ic-wire); background:var(--ic-wire-glow); box-shadow:inset 0 0 0 1px rgba(74,158,255,.3)}
:root .rv-verdict.rv-pasted{color:var(--ic-purple); background:rgba(163,113,247,.12); box-shadow:inset 0 0 0 1px rgba(163,113,247,.3)}
:root .rv-verdict.rv-moved{color:var(--faint); background:var(--ic-panel-2); box-shadow:inset 0 0 0 1px var(--ic-line-2)}
:root .rv-reasons{background:rgba(255,107,107,.08)}
:root .rv-in, :root .ws-view .ins{background:rgba(48,209,88,.18)}
:root .rv-out, :root .ws-view .del{background:rgba(255,107,107,.18)}
:root .mv-guide, :root .mv-tidy, :root .mv-frag.dividing,
:root .ws-banner{background:rgba(255,214,10,.08); color:var(--ic-warn); box-shadow:inset 0 0 0 1px rgba(255,214,10,.3); border-radius:9px}
:root .mv-guide.warn{background:rgba(255,107,107,.08); color:var(--ic-danger); box-shadow:inset 0 0 0 1px rgba(255,107,107,.3)}
:root .mv-flag.review{color:var(--ic-wire); background:var(--ic-wire-glow)}
:root .budget.warn{color:var(--ic-warn)}
:root .budget.over{color:var(--ic-danger)}
:root .lib-bar input[type=text], :root .lib-bar select,
:root .lib-form input, :root .lib-form select, :root .lib-form textarea,
:root .lib-dlg select, :root .lib-dlg textarea, :root .ws-new input,
:root .libtools input[type=text], :root .adder .row > input, :root .source textarea{
  background-color:var(--ic-void); color:var(--ink); box-shadow:inset 0 0 0 1px var(--ic-line-2); border-radius:9px}

/* The Library's search results and its section header. */
:root .lib-res{background:var(--ic-panel); border:none; box-shadow:0 0 0 1px var(--ic-line); border-radius:12px}
:root .lib-res:hover{box-shadow:0 0 0 1px var(--ic-line-2), var(--ic-drop)}
:root .lib-res h4 a:hover{color:var(--ic-wire)}
:root .lib-res .acts a, :root .lib-linkish{color:var(--ic-wire)}
:root .lib-res .inlib{color:var(--ic-pass-ink)}
:root .lib-res .inlib code{font-family:var(--mono); font-size:.76rem}
:root .lib-search input{border-radius:9px; font-size:.95rem; padding:.65rem .9rem}
:root .lib-search .lib-btn.blue{padding:.55rem 1.3rem; border-radius:9px}
:root .lib-h{border-top:1px solid var(--ic-line); padding-top:1rem; margin-top:1.2rem}
:root #libraryPanel.lib-wide{background:var(--ic-void); box-shadow:none; border-radius:0}

/* The box above the paper: ask first, then Generate template and Search.
   One green button, the one Enter presses. */
:root .toolbar.gen-bar{grid-template-columns:minmax(0,1fr) auto; gap:1rem}
:root .gen-bar .gen-inline{grid-column:1; min-width:0; gap:.5rem}
:root .gen-bar .undo-redo{grid-column:2}
:root #genInlinePrompt{flex:1 1 auto; width:auto; min-width:8rem; max-width:none}
:root .gen-inline-copy{display:none}
:root #genBtn, :root #genBtn.spent, :root #searchBtn{
  background:var(--ic-panel-2); color:var(--ink); font-weight:500; white-space:nowrap;
  box-shadow:0 0 0 1px var(--ic-line-2); border-radius:9px}
:root #genBtn:hover, :root #searchBtn:hover{background:var(--ic-panel-3); color:var(--ink); box-shadow:0 0 0 1px var(--ic-line-3)}
:root #askBtn{padding-left:1.3rem; padding-right:1.3rem; white-space:nowrap}
@media (max-width:600px){
  :root .toolbar.gen-bar{grid-template-columns:minmax(0,1fr)}
  :root .gen-bar .gen-inline{flex-wrap:wrap}
  :root #genInlinePrompt{flex-basis:100%}
}
