/* ============================================================
   NRK NOTES — full-screen live-notes editor
   Design tokens re-skinned from the CASTINGTABLE system.
   Dark-first; light supported. Swap --accent / fonts to re-brand.
   ============================================================ */
:root{
  --accent:#ee3124; --accent-hover:#d62a1e;

  --font-sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --font-mono:"Space Mono",ui-monospace,Menlo,monospace;

  --fs-h1:clamp(1.6rem,3vw,2.2rem);
  --fs-h2:1.15rem; --fs-h3:1rem;
  --fs-body:.95rem; --fs-small:.82rem; --fs-tiny:.72rem;

  --space-1:.25rem; --space-2:.5rem; --space-3:1rem;
  --space-4:1.35rem; --space-5:2rem; --space-6:3rem;

  --radius:12px; --radius-lg:20px;
  --header-h:60px;
  --transition:.18s cubic-bezier(.4,0,.2,1);
}

/* ---- DARK (default) ---- */
:root{
  --bg:#0a0a0b; --surface:#111113; --surface-2:#0d0d0f; --elevated:#171719;
  --ink:#f4f4f5; --ink-soft:#a1a1aa; --ink-faint:#6b6b73;
  --line:rgba(255,255,255,.10); --line-soft:rgba(255,255,255,.06);
  --btn-ink:#0a0a0b; --btn-light:#f4f4f5;
  color-scheme:dark;
}
/* ---- LIGHT ---- */
:root[data-theme="light"]{
  --bg:#f2f2f0; --surface:#ffffff; --surface-2:#ffffff; --elevated:#ececea;
  --ink:#0a0a0a; --ink-soft:#52525b; --ink-faint:#8a8a93;
  --line:rgba(0,0,0,.12); --line-soft:rgba(0,0,0,.06);
  --btn-ink:#ffffff; --btn-light:#0a0a0a;
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font-sans);background:var(--bg);color:var(--ink);line-height:1.6;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--accent);color:#fff}
[hidden]{display:none!important}

.mono-label{font-family:var(--font-mono);font-size:var(--fs-tiny);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:.6rem 1.15rem;font-size:var(--fs-small);font-weight:600;border-radius:999px;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:var(--transition)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--btn-light);color:var(--btn-ink)}
.btn-primary:hover{opacity:.9}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-hover)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink-soft);background:var(--elevated)}
.btn-sm{padding:.4rem .8rem;font-size:var(--fs-tiny)}
.btn-icon{width:38px;height:38px;padding:0;border-radius:50%;background:transparent;
  border:1px solid var(--line);color:var(--ink-soft);position:relative;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.btn-icon:hover{border-color:var(--ink-soft);color:var(--ink);background:var(--elevated)}
.btn-icon .ic{display:inline-flex;align-items:center;justify-content:center}
.btn-icon svg{width:18px;height:18px;display:block}
.btn-icon .dot{position:absolute;top:6px;right:6px;min-width:15px;height:15px;padding:0 3px;
  background:var(--accent);color:#fff;border-radius:999px;font-size:.55rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono)}

/* ============================================================
   FULL-SCREEN SHELL: topbar → notepad (fills) → settings bar
   ============================================================ */
.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}

/* Top bar */
.topbar{height:var(--header-h);flex:0 0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:var(--space-3);padding:0 var(--space-3);
  border-bottom:1px solid var(--line-soft);background:var(--bg)}
.tb-left,.tb-right{display:flex;align-items:center;gap:.6rem;flex:1 1 0;min-width:0}
.tb-right{justify-content:flex-end}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:-.02em;font-size:1.05rem}
.brand .mark{width:30px;height:30px;border-radius:8px;background:var(--accent);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center}
.brand .mark::before{content:"";width:13px;height:2.5px;background:#fff;border-radius:2px;
  box-shadow:0 -4px 0 #fff,0 4px 0 #fff}
.brand span.txt{display:inline}
.tb-center{flex:0 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  line-height:1.25;min-width:0;overflow:hidden;text-align:center}
.tb-project{font-family:var(--font-mono);font-size:var(--fs-tiny);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-script{font-weight:700;font-size:var(--fs-body);cursor:text;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-project:hover,.tb-script:hover{color:var(--ink)}
.tb-project.editing,.tb-script.editing{outline:none;background:var(--elevated);border-radius:6px;
  padding:0 .35rem;color:var(--ink);overflow:visible;text-overflow:clip}
.tb-project.editing{text-transform:none}
.savestate{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-tiny);color:#37c26a;
  font-family:var(--font-mono);white-space:nowrap}
.savestate::before{content:"";width:6px;height:6px;border-radius:50%;background:#37c26a}
.savestate.saving{color:#e0b13a}.savestate.saving::before{background:#e0b13a}
.wordcount{font-family:var(--font-mono);font-size:var(--fs-tiny);color:var(--ink-faint);white-space:nowrap}

/* Notepad — fills all remaining height */
.pad{flex:1 1 auto;min-height:0;overflow-y:auto;background:var(--surface-2);
  display:flex;justify-content:center;
  scrollbar-width:none;-ms-overflow-style:none}
.pad::-webkit-scrollbar{width:0;height:0;display:none}
.editor{scrollbar-width:none;-ms-overflow-style:none}
.editor::-webkit-scrollbar{width:0;height:0;display:none}
.editor{width:100%;max-width:100%;background:transparent;border:none;outline:none;
  color:var(--ink);font-family:var(--font-sans);white-space:pre-wrap;overflow-wrap:break-word;
  padding:var(--space-6) var(--space-5);display:block}
.editor:focus{outline:none}
.editor:empty:before{content:attr(data-placeholder);color:var(--ink-faint)}
.editor img{max-width:100%;height:auto;border-radius:10px;margin:.5rem 0;display:inline-block}
.editor.dragover{box-shadow:inset 0 0 0 2px var(--accent)}
.watchbtn{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--line);background:transparent;
  color:var(--ink-soft);border-radius:999px;padding:.42rem .95rem;font-size:var(--fs-tiny);font-weight:600;
  cursor:pointer;font-family:var(--font-sans);transition:var(--transition)}
.watchbtn:hover{border-color:var(--ink-soft);color:var(--ink);background:var(--elevated)}
.watchbtn svg{width:16px;height:16px}

/* Settings bar — docked below the notepad */
.settingsbar{flex:0 0 auto;display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;
  padding:var(--space-3) var(--space-4);border-top:1px solid var(--line);background:var(--surface)}
.ctrl{display:flex;align-items:center;gap:.7rem}
.ctrl > label{font-family:var(--font-mono);font-size:var(--fs-tiny);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint)}
.ctrl .val{font-family:var(--font-mono);font-size:var(--fs-tiny);color:var(--ink);min-width:2.6em}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{border:none;background:transparent;color:var(--ink-faint);width:30px;height:28px;cursor:pointer;
  font-size:var(--fs-tiny);font-family:var(--font-mono);transition:var(--transition)}
.seg button:not(:last-child){border-right:1px solid var(--line)}
.seg button.on{background:var(--ink);color:var(--bg)}
.seg button.bold-b{font-family:var(--font-sans);font-weight:800;font-size:.85rem}

input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:999px;
  background:var(--line);width:130px;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--accent);border:2px solid var(--bg);box-shadow:0 0 0 1px var(--accent)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);border:none}

/* focus mode — hide the app's own toolbars for a clean note view */
.app.focus .topbar,.app.focus .settingsbar{display:none}
.focus-exit{position:fixed;right:16px;bottom:16px;z-index:35;width:44px;height:44px;
  background:var(--surface);border-color:var(--line);color:var(--ink-soft);
  box-shadow:0 8px 24px rgba(0,0,0,.35);opacity:.55;transition:opacity var(--transition)}
.focus-exit:hover{opacity:1;background:var(--elevated);color:var(--ink)}

/* ============================================================
   DRAWERS: left = projects/scripts, right = run notes
   ============================================================ */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);z-index:40}
.drawer{position:fixed;top:0;bottom:0;width:320px;max-width:86vw;z-index:41;background:var(--bg);
  display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);overflow-y:auto;
  transition:transform var(--transition)}
.drawer-left{left:0;border-right:1px solid var(--line);transform:translateX(-101%)}
.drawer-right{right:0;border-left:1px solid var(--line);transform:translateX(101%)}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between}
.drawer-head h2{font-size:var(--fs-h3)}
.drawer-close{border:none;background:transparent;color:var(--ink-faint);font-size:1.1rem;cursor:pointer;
  width:30px;height:30px;border-radius:8px}
.drawer-close:hover{background:var(--elevated);color:var(--ink)}

/* project search / sort */
.side-controls{display:flex;gap:var(--space-2)}
.field{flex:1;display:flex;align-items:center;gap:.5rem;background:var(--surface-2);border:1px solid var(--line);
  border-radius:10px;padding:.5rem .7rem}
:root[data-theme="light"] .field{background:var(--elevated)}
.field input{flex:1;background:transparent;border:none;outline:none;color:var(--ink);font-size:var(--fs-small)}
.field input::placeholder{color:var(--ink-faint)}
.field .ico{color:var(--ink-faint);font-size:.9rem}
.select{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;color:var(--ink);
  font-size:var(--fs-small);padding:.5rem .6rem;cursor:pointer}
:root[data-theme="light"] .select{background:var(--elevated)}
.new-btn{width:100%;border:1px dashed var(--line);background:transparent;color:var(--ink-soft);
  border-radius:12px;padding:.75rem;font-size:var(--fs-small);font-weight:600;cursor:pointer;transition:var(--transition)}
.new-btn:hover{border-color:var(--accent);color:var(--ink)}

/* project list */
.plist,.slist,.note-list{list-style:none;display:flex;flex-direction:column;gap:.3rem}
.pitem{position:relative;border-radius:12px;padding:.7rem .8rem .7rem 1rem;cursor:pointer;transition:var(--transition)}
.pitem:hover,.pitem.active{background:var(--elevated)}
.pitem.active::before{content:"";position:absolute;left:0;top:.6rem;bottom:.6rem;width:3px;border-radius:2px;background:var(--accent)}
.pitem-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.pitem-name{font-weight:600;font-size:var(--fs-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pitem-meta{font-family:var(--font-mono);font-size:var(--fs-tiny);color:var(--ink-faint);margin-top:.2rem}
.pitem-actions{display:flex;gap:.15rem;align-items:center;opacity:0;transition:var(--transition)}
.pitem:hover .pitem-actions{opacity:1}
.pitem-count{font-size:var(--fs-tiny);color:var(--ink-faint);font-family:var(--font-mono)}
.icobtn{width:26px;height:26px;border:none;background:transparent;color:var(--ink-faint);cursor:pointer;
  border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.85rem}
.icobtn:hover{background:var(--surface);color:var(--ink)}
.icobtn.danger:hover{color:var(--accent)}

.crumb{display:flex;align-items:center;gap:.4rem;color:var(--ink-soft);font-size:var(--fs-small);
  cursor:pointer;padding:.5rem .6rem;border-radius:9px;transition:var(--transition);width:max-content}
.crumb:hover{background:var(--elevated);color:var(--ink)}
.subtitle{font-weight:700;font-size:var(--fs-body)}
.sitem{display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;border-radius:10px;cursor:pointer;transition:var(--transition)}
.sitem:hover,.sitem.active{background:var(--elevated)}
.sitem .num{width:22px;height:22px;flex:0 0 auto;border-radius:6px;background:var(--surface-2);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:var(--fs-tiny);color:var(--ink-faint)}
:root[data-theme="light"] .sitem .num{background:var(--elevated)}
.sitem.active .num{background:var(--accent);border-color:var(--accent);color:#fff}
.sitem .sname{flex:1;font-size:var(--fs-small);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* run notes */
.note-add{display:flex;gap:.5rem}
.note-add input{flex:1;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  padding:.6rem .7rem;color:var(--ink);font-size:var(--fs-small);outline:none}
:root[data-theme="light"] .note-add input{background:var(--elevated)}
.note-add input::placeholder{color:var(--ink-faint)}
.note{background:var(--surface);border:1px solid var(--line-soft);border-radius:12px;padding:.7rem .8rem}
:root[data-theme="light"] .note{background:var(--elevated)}
.note-txt{font-size:var(--fs-small)}
.note-meta{display:flex;justify-content:space-between;align-items:center;margin-top:.4rem}
.note-ts{font-family:var(--font-mono);font-size:var(--fs-tiny);color:var(--ink-faint)}
.empty{color:var(--ink-faint);font-size:var(--fs-small);text-align:center;padding:var(--space-4) 0}

/* ---------- Modal ---------- */
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:60;padding:var(--space-4)}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--space-5);width:min(420px,100%)}
.modal h3{font-size:var(--fs-h2);margin-bottom:var(--space-3)}
.modal input{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  padding:.7rem .8rem;color:var(--ink);font-size:var(--fs-body);outline:none;margin-bottom:var(--space-4)}
:root[data-theme="light"] .modal input{background:var(--elevated)}
.modal-actions{display:flex;justify-content:flex-end;gap:.6rem}

/* share this run modal */
.share-modal{width:min(560px,100%);padding:0;overflow:hidden}
.share-head{display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--line-soft)}
.share-head h3{margin:0;font-size:1.3rem}
.share-body{padding:var(--space-5)}
.share-seg{display:grid;grid-template-columns:1fr 1fr;width:100%;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;height:auto}
.share-seg button{border:none;background:transparent;color:var(--ink-soft);
  padding:.9rem 1rem;font-size:var(--fs-body);font-weight:600;cursor:pointer;font-family:var(--font-sans);
  width:auto;height:auto;transition:var(--transition)}
.share-seg button:first-child{border-right:1px solid var(--line)}
.share-seg button.on{background:var(--btn-light);color:var(--btn-ink)}
.share-note{color:var(--ink-faint);font-size:var(--fs-small);margin:var(--space-4) 0 var(--space-3)}
.share-lab{display:block;color:var(--ink-soft);font-size:var(--fs-small);margin-bottom:.4rem}
.share-linkrow input{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  padding:.75rem .85rem;color:var(--ink);font-size:var(--fs-small);font-family:var(--font-mono);outline:none;margin:0}
:root[data-theme="light"] .share-linkrow input{background:var(--elevated)}
.share-modal .modal-actions{padding:var(--space-4) var(--space-5);border-top:1px solid var(--line-soft)}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .brand span.txt{display:none}
  .settingsbar{gap:var(--space-3);justify-content:space-between}
  input[type=range]{width:90px}
  .wordcount{display:none}
}