/* ============================================================
   FPS — Script Management
   Light counterpart to assets/crewpay.css. Same type system and
   the same script revision colours, on paper rather than on a
   production-office monitor. Writers work on white.
   ============================================================ */

:root{
  --paper:#FFFFFF;
  --page:#F4F5F7;
  --panel:#FFFFFF;
  --raised:#F7F8FA;
  --line:#D8DDE3;
  --line-soft:#E8ECF0;

  --ink:#171A1E;
  --ink-2:#4A525B;
  --ink-3:#7B858F;

  --daylight:#1F6FB2;
  --daylight-soft:#E7F1F9;
  --tungsten:#A9761A;
  --tungsten-soft:#FBF3E0;

  /* Script revision colours — the real ones, as paper stocks */
  --rev-white:#FFFFFF;
  --rev-blue:#CFE0F2;
  --rev-pink:#F6CFDD;
  --rev-yellow:#FAEFAF;
  --rev-green:#CDE9D2;
  --rev-goldenrod:#EBD79A;
  --rev-buff:#EFE5C9;
  --rev-salmon:#F8D2C1;
  --rev-cherry:#E9BFC7;

  /* Semantic */
  --ok:#2E7D45;
  --warn:#A9761A;
  --stop:#B0334A;
  --info:#1F6FB2;

  --radius:3px;
  --shadow:0 1px 2px rgba(20,25,32,.06), 0 8px 22px rgba(20,25,32,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--page);
  color:var(--ink);
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--daylight);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--daylight);outline-offset:2px}

h1,h2,h3,h4,.display{
  font-family:"Barlow Condensed",'Arial Narrow',sans-serif;
  font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  margin:0; line-height:1.1;
}
h1{font-size:30px}
h2{font-size:21px}
h3{font-size:16px}
h4{font-size:13px;letter-spacing:.10em;color:var(--ink-3)}

.mono,code,.num,td.num,th.num{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace}
.num{font-variant-numeric:tabular-nums}
td.num,th.num{text-align:right}
.sm{font-size:12.5px;color:var(--ink-3);line-height:1.45}

/* ---------- Chrome ---------- */
.topbar{
  display:flex;align-items:center;gap:18px;
  padding:0 22px;height:56px;
  background:var(--paper);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40;
}
.brand{display:flex;align-items:baseline;gap:9px;text-decoration:none}
.brand .mark{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:21px;letter-spacing:.14em;color:var(--ink);text-transform:uppercase;
}
.brand .sub{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
}
.topnav{display:flex;gap:2px;margin-left:8px}
.topnav a{
  padding:7px 12px;border-radius:var(--radius);color:var(--ink-2);
  font-size:13px;letter-spacing:.03em;
}
.topnav a:hover{background:var(--raised);text-decoration:none;color:var(--ink)}
.topnav a.on{background:var(--daylight-soft);color:var(--daylight);font-weight:600}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.whoami{text-align:right;line-height:1.25}
.whoami .n{font-size:13px;font-weight:600}
.whoami .r{font-size:11px;color:var(--ink-3)}
.avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--daylight-soft);color:var(--daylight);
  display:grid;place-items:center;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:14px;
  border:1px solid var(--line);
}
.demo-bar{
  display:flex;align-items:center;gap:14px;
  padding:6px 22px;background:var(--tungsten-soft);
  border-bottom:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.10em;text-transform:uppercase;color:var(--tungsten);
}
.demo-bar .sp{flex:1}
.demo-bar a{color:var(--tungsten);text-decoration:underline}

.wrap{max-width:1280px;margin:0 auto;padding:22px}
.wrap.wide{max-width:1500px}
.crumb{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.10em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;
}
.crumb a{color:var(--ink-3)}
.pagehead{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.pagehead .sub{color:var(--ink-3);font-size:13px;padding-bottom:3px}
.pagehead .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rule{height:1px;background:var(--line);margin:14px 0 18px}

/* ---------- Cards ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card .hd{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line-soft)}
.card .hd .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.card .bd{padding:14px}
.card .ft{padding:10px 14px;border-top:1px solid var(--line-soft);background:var(--raised);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.card.flush .bd{padding:0}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g-2-1{grid-template-columns:2fr 1fr}
.g-1-2{grid-template-columns:1fr 2fr}
@media(max-width:1000px){.g2,.g3,.g4,.g-2-1,.g-1-2{grid-template-columns:1fr}}

.stat{padding:13px 14px}
.stat .lab{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.stat .val{font-family:"Barlow Condensed",sans-serif;font-size:29px;font-weight:600;line-height:1.05;margin-top:3px}
.stat .val.good{color:var(--ok)} .stat .val.warn{color:var(--warn)} .stat .val.stop{color:var(--stop)}
.stat .note{font-size:11.5px;color:var(--ink-3);margin-top:2px}

/* ---------- Chips ---------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 8px;border-radius:2px;border:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  background:var(--raised);color:var(--ink-2);
}
.chip.plain{background:transparent}
.chip.mech{background:var(--rev-blue);border-color:#A9C6E4;color:#17456F}
.chip.craft{background:var(--rev-yellow);border-color:#DCCB77;color:#6A5807}
.chip.note{background:var(--raised);color:var(--ink-3)}
.chip.ok{background:var(--rev-green);border-color:#A5D2AE;color:#1E5C31}
.chip.warn{background:var(--rev-goldenrod);border-color:#D3BC77;color:#6B5312}
.chip.stop{background:var(--rev-cherry);border-color:#D69AA6;color:#83243A}
.chip.open{background:var(--rev-salmon);border-color:#E7B198;color:#8C3F1C}
.chip.done{background:var(--rev-green);border-color:#A5D2AE;color:#1E5C31}
.chip.rev{background:var(--rev-white)}
.chip.rev.blue{background:var(--rev-blue);border-color:#A9C6E4}
.chip.rev.pink{background:var(--rev-pink);border-color:#E4A9BF}
.chip.rev.yellow{background:var(--rev-yellow);border-color:#DCCB77}
.chip.rev.green{background:var(--rev-green);border-color:#A5D2AE}
.chip.rev.goldenrod{background:var(--rev-goldenrod);border-color:#D3BC77}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;text-decoration:none;white-space:nowrap;
}
.btn:hover{background:var(--raised);text-decoration:none;border-color:#BEC6CE}
.btn.pri{background:var(--daylight);border-color:var(--daylight);color:#fff}
.btn.pri:hover{background:#1a5f99}
.btn.gold{background:var(--tungsten);border-color:var(--tungsten);color:#fff}
.btn.gold:hover{background:#8f6413}
.btn.ghost{background:transparent;color:var(--ink-2)}
.btn.sm{padding:4px 9px;font-size:12px}
.btn[disabled],.btn.off{opacity:.45;pointer-events:none}
.pill-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse}
th{
  text-align:left;padding:8px 12px;
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:1px solid var(--line);background:var(--raised);
  position:sticky;top:0;
}
td{padding:9px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top;font-size:13.5px}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--raised)}
td.tight,th.tight{width:1%;white-space:nowrap}
tfoot td{border-top:1px solid var(--line);font-weight:600}

/* ---------- Forms ---------- */
input[type=text],input[type=search],textarea,select{
  width:100%;padding:8px 10px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  font-family:inherit;font-size:14px;
}
textarea{resize:vertical}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--daylight);box-shadow:0 0 0 3px var(--daylight-soft)}
.fl{display:block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.field{margin-bottom:12px}

/* ---------- Notices ---------- */
.notice{
  padding:10px 13px;border-radius:var(--radius);
  border:1px solid var(--line);border-left:3px solid var(--ink-3);
  background:var(--raised);font-size:13px;color:var(--ink-2);
}
.notice strong{color:var(--ink)}
.notice.info{border-left-color:var(--daylight);background:var(--daylight-soft)}
.notice.gold{border-left-color:var(--tungsten);background:var(--tungsten-soft)}
.notice.good{border-left-color:var(--ok);background:#EAF4ED}
.notice.warn{border-left-color:var(--warn);background:var(--tungsten-soft)}
.notice.stop{border-left-color:var(--stop);background:#FBECEF}

.empty{padding:34px 20px;text-align:center;color:var(--ink-3)}
.empty h3{color:var(--ink-2);margin-bottom:5px}

/* ---------- Script list ---------- */
.scriptrow{display:flex;gap:16px;padding:14px;border-bottom:1px solid var(--line-soft);align-items:flex-start}
.scriptrow:last-child{border-bottom:none}
.scriptrow:hover{background:var(--raised)}
.scriptrow .cover{
  width:64px;height:88px;flex:none;border:1px solid var(--line);border-radius:2px;
  display:grid;place-items:center;background:var(--raised);
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:22px;
  letter-spacing:.06em;color:var(--ink-3);
}
.scriptrow .meta{flex:1;min-width:0}
.scriptrow .t{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:22px;letter-spacing:.03em;text-transform:uppercase}
.scriptrow .facts{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px}
.scriptrow .facts div{font-size:12px;color:var(--ink-3)}
.scriptrow .facts b{color:var(--ink-2);font-weight:600}
.scriptrow .act{display:flex;flex-direction:column;gap:6px;align-items:flex-end}

/* ---------- Screenplay page ---------- */
.pagewrap{background:var(--page);padding:18px;max-height:74vh;overflow:auto}
.sheet{
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
  max-width:640px;margin:0 auto 18px;padding:44px 56px 52px;
  font-family:"Courier Prime","Courier New",Courier,monospace;
  font-size:13px;line-height:1.0;color:#111;
}
.sheet .sp{height:13px}
.el{white-space:pre-wrap;position:relative;border-radius:2px}
.el[contenteditable="true"]:focus{outline:2px solid var(--daylight);outline-offset:2px;background:#FCFDFF}
.el.slug{text-transform:uppercase;font-weight:700;margin-top:13px}
.el.act{margin-top:13px}
.el.chr{margin-top:13px;padding-left:200px;text-transform:uppercase}
.el.par{padding-left:150px;padding-right:120px}
.el.dlg{padding-left:100px;padding-right:80px}
.el.trn{margin-top:13px;text-align:right;text-transform:uppercase}
.el.sht{margin-top:13px;text-transform:uppercase;font-weight:700}
.el.stub{color:#9AA3AC;font-style:italic;margin-top:13px}
.scnum{
  position:absolute;left:-40px;font-weight:700;color:#111;
}
.scnum.r{left:auto;right:-40px}
.hit{background:#FAEFAF;box-shadow:0 0 0 2px #E3CE63;border-radius:2px}
.hit.active{background:#F6CFDD;box-shadow:0 0 0 2px #D98BA9}
.pgbrk{
  text-align:right;font-family:"IBM Plex Mono",monospace;font-size:10px;
  color:var(--ink-3);border-top:1px dashed var(--line);margin:20px 0 0;padding-top:4px;
}

/* Element palette */
.elbar{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.elbar .btn.sm{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em}
.elbar .btn.sm.on{background:var(--daylight-soft);border-color:var(--daylight);color:var(--daylight)}

/* ---------- Scene board ---------- */
.board{display:flex;flex-direction:column;gap:0}
.scene{
  display:flex;gap:12px;align-items:flex-start;
  padding:9px 12px;border-bottom:1px solid var(--line-soft);
  background:var(--paper);cursor:grab;
}
.scene:hover{background:var(--raised)}
.scene.dragging{opacity:.4}
.scene.over{box-shadow:inset 0 2px 0 var(--daylight)}
.scene.moved{background:#FFFBF0}
.scene .grip{color:var(--ink-3);font-size:14px;line-height:1.2;cursor:grab;user-select:none;padding-top:2px}
.scene .no{
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500;
  min-width:46px;color:var(--ink);padding-top:2px;
}
.scene .no s{color:var(--ink-3);font-weight:400}
.scene .no i{color:var(--tungsten);font-style:normal}
.scene .body{flex:1;min-width:0}
.scene .slug{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.01em;text-transform:uppercase}
.scene .cast{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.scene .len{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3);min-width:46px;text-align:right;padding-top:2px}
.scene .flag{min-width:20px;text-align:center;padding-top:1px}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--line)}
.dot.craft{background:var(--warn)} .dot.mech{background:var(--info)} .dot.note{background:var(--ink-3)}

/* ---------- Review ---------- */
.itemrow{display:flex;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line-soft);align-items:flex-start}
.itemrow:last-child{border-bottom:none}
.itemrow:hover{background:var(--raised)}
.itemrow .ref{font-family:"IBM Plex Mono",monospace;font-size:11.5px;min-width:38px;color:var(--ink-2);padding-top:2px}
.itemrow .m{flex:1;min-width:0}
.itemrow .m .q{
  font-family:"Courier Prime","Courier New",monospace;font-size:12px;
  background:var(--raised);border-left:2px solid var(--line);
  padding:4px 8px;margin:5px 0;color:var(--ink-2);
}
.itemrow .act{display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.itemrow.done{opacity:.5}
.itemrow.done .m > b{text-decoration:line-through}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:0;flex-wrap:wrap}
.tabs a,.tabs button{
  padding:9px 14px;border:none;background:transparent;cursor:pointer;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:15px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:2px solid transparent;text-decoration:none;
}
.tabs a:hover,.tabs button:hover{color:var(--ink);text-decoration:none}
.tabs a.on,.tabs button.on{color:var(--ink);border-bottom-color:var(--daylight)}
.tabs .count{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--ink-3);margin-left:5px}

.track{height:6px;background:var(--line-soft);border-radius:3px;overflow:hidden;display:flex}
.track i{display:block;height:100%}
.track i.done{background:var(--ok)}
.track i.part{background:var(--tungsten)}
.track i.open{background:var(--stop)}

.bar{display:flex;align-items:center;gap:8px}
.bar .lab{font-size:12px;color:var(--ink-2);min-width:150px}
.bar .t{flex:1;height:9px;background:var(--line-soft);border-radius:2px;overflow:hidden}
.bar .t i{display:block;height:100%;background:var(--daylight)}
.bar .v{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-2);min-width:52px;text-align:right}

kbd{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  border:1px solid var(--line);border-bottom-width:2px;border-radius:3px;
  padding:1px 5px;background:var(--raised);color:var(--ink-2);
}

/* ---------- Print / document output ---------- */
.doc{
  background:#fff;max-width:820px;margin:0 auto 22px;
  padding:52px 62px;border:1px solid var(--line);box-shadow:var(--shadow);
  font-size:13px;line-height:1.5;
}
.doc .cs-head{
  font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.42em;
  text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--ink);
  padding-bottom:8px;margin-bottom:26px;
}
.doc .cs-for{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:20px}
.doc h1{font-size:34px;margin-bottom:4px}
.doc h2{font-size:17px;margin:26px 0 10px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.doc h3{font-size:13px;margin:18px 0 7px;color:var(--ink-2)}
.doc p{margin:0 0 10px}
.doc table{margin:10px 0 16px}
.doc th{position:static;background:var(--raised)}
.doc .kv{display:grid;grid-template-columns:150px 1fr;gap:5px 14px;font-size:12.5px;margin-bottom:22px}
.doc .kv dt{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.doc .kv dd{margin:0}
.doc .cs-foot{
  margin-top:34px;padding-top:10px;border-top:1px solid var(--ink);
  font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-3);text-align:center;
}
.doc .conf{
  font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-3);text-align:center;margin-top:30px;
}

@media print{
  .topbar,.demo-bar,.noprint,.crumb,.pagehead .right{display:none !important}
  body{background:#fff}
  .wrap{padding:0;max-width:none}
  .doc{border:none;box-shadow:none;margin:0;padding:0;max-width:none}
  .sheet{border:none;box-shadow:none;margin:0;max-width:none;padding:0}
  .pagewrap{background:#fff;padding:0;max-height:none;overflow:visible}
  .card{border:none;box-shadow:none}
  th{background:#fff}
  a{color:#000;text-decoration:none}
  @page{size:A4;margin:20mm}
}