/* ============================================================
   FPS — Theme layer
   Loaded AFTER assets/crewpay.css and assets/script.css so it wins.

   Both stylesheets are almost entirely variable-driven, so a theme
   is a set of custom properties plus a short list of corrections
   where a rule assumed a dark surface.

   Paper is the default. Night is the original production-office
   palette, kept because it is the right thing to look at in a
   dark room on a night shoot.
   ============================================================ */

/* ---------------- PAPER — the default ---------------- */
:root,
:root[data-theme="paper"]{
  /* crewpay.css surfaces */
  --bg:#FFFFFF;
  --panel:#FFFFFF;
  --panel-2:#F5F6F8;
  --raised:#F5F6F8;
  --line:#D8DDE3;
  --line-soft:#EAEDF1;

  /* script.css surfaces */
  --paper:#FFFFFF;
  --page:#FFFFFF;

  /* Ink */
  --ink:#171A1E;
  --ink-2:#454D57;
  --ink-3:#79838E;

  /* Accents */
  --daylight:#1F6FB2;
  --daylight-dim:#1F6FB2;
  --daylight-soft:#E7F1F9;
  --tungsten:#9A6A12;
  --tungsten-dim:#9A6A12;
  --tungsten-soft:#FBF3E0;

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

  /* Script revision colours — mid tints, legible as a 7px swatch
     on white and as a chip background behind dark text */
  --rev-white:#FFFFFF;
  --rev-blue:#8FC0E8;
  --rev-pink:#F0AAC3;
  --rev-yellow:#F0DC7C;
  --rev-green:#93CFA1;
  --rev-goldenrod:#DDB65E;
  --rev-buff:#E6D8B8;
  --rev-salmon:#F3B69B;
  --rev-cherry:#DB8A9B;

  --shadow:0 1px 2px rgba(20,25,32,.05), 0 8px 22px rgba(20,25,32,.06);
  color-scheme:light;
}

/* ---------------- WARM — manila, for long reads ---------------- */
:root[data-theme="warm"]{
  --bg:#FBF7EF;
  --panel:#FFFDF8;
  --panel-2:#F4EEE1;
  --raised:#F4EEE1;
  --line:#DED4C2;
  --line-soft:#EDE6D8;

  --paper:#FFFDF8;
  --page:#FBF7EF;

  --ink:#231F18;
  --ink-2:#524A3C;
  --ink-3:#867C6B;

  --daylight:#1D6698;
  --daylight-dim:#1D6698;
  --daylight-soft:#E6F0F6;
  --tungsten:#8A5D0E;
  --tungsten-dim:#8A5D0E;
  --tungsten-soft:#F6EAD1;

  --ok:#2C6E40;
  --warn:#8A5D0E;
  --stop:#A62F44;
  --info:#1D6698;

  --rev-white:#FFFDF8;
  --rev-blue:#93BFDF;
  --rev-pink:#EDA7BC;
  --rev-yellow:#EEDA83;
  --rev-green:#9BCBA4;
  --rev-goldenrod:#D9B364;
  --rev-buff:#E2D3B0;
  --rev-salmon:#EFB295;
  --rev-cherry:#D48696;

  --shadow:0 1px 2px rgba(60,48,28,.06), 0 8px 22px rgba(60,48,28,.07);
  color-scheme:light;
}

/* ---------------- SLATE — cool, higher contrast ---------------- */
:root[data-theme="slate"]{
  --bg:#EEF1F5;
  --panel:#FFFFFF;
  --panel-2:#E4E9EF;
  --raised:#E4E9EF;
  --line:#C6CED8;
  --line-soft:#DCE2EA;

  --paper:#FFFFFF;
  --page:#EEF1F5;

  --ink:#12161C;
  --ink-2:#3C4650;
  --ink-3:#6B7684;

  --daylight:#175E9B;
  --daylight-dim:#175E9B;
  --daylight-soft:#DDEAF6;
  --tungsten:#8A5E10;
  --tungsten-dim:#8A5E10;
  --tungsten-soft:#F5EAD3;

  --ok:#256B39;
  --warn:#8A5E10;
  --stop:#9E2B41;
  --info:#175E9B;

  --rev-white:#FFFFFF;
  --rev-blue:#84B8E4;
  --rev-pink:#EDA1BC;
  --rev-yellow:#ECD671;
  --rev-green:#8AC999;
  --rev-goldenrod:#D6AE53;
  --rev-buff:#DFD1AE;
  --rev-salmon:#F0AE92;
  --rev-cherry:#D58193;

  --shadow:0 1px 2px rgba(16,22,30,.07), 0 8px 22px rgba(16,22,30,.09);
  color-scheme:light;
}

/* ---------------- NIGHT — the original ---------------- */
:root[data-theme="night"]{
  --bg:#101317;
  --panel:#171B21;
  --panel-2:#1D222A;
  --raised:#242A33;
  --line:#2E3640;
  --line-soft:#232A32;

  --paper:#171B21;
  --page:#101317;

  --ink:#E7EBEF;
  --ink-2:#B4BEC9;
  --ink-3:#7F8B98;

  --daylight:#5AA9E6;
  --daylight-dim:#2E5F86;
  --daylight-soft:#1B2B39;
  --tungsten:#E4A93C;
  --tungsten-dim:#7A5D22;
  --tungsten-soft:#2A2113;

  --ok:#7DC28B;
  --warn:#E4A93C;
  --stop:#C4536A;
  --info:#5AA9E6;

  --rev-white:#F2F4F6;
  --rev-blue:#6FA8DC;
  --rev-pink:#EC93B3;
  --rev-yellow:#F2D24B;
  --rev-green:#7DC28B;
  --rev-goldenrod:#D6A649;
  --rev-buff:#E0D2AB;
  --rev-salmon:#F09A7A;
  --rev-cherry:#C4536A;

  --shadow:0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.35);
  color-scheme:dark;
}

/* ============================================================
   Corrections for light surfaces.
   Every rule below exists because the original stylesheet
   assumed white text would land on something dark.
   ============================================================ */
html:not([data-theme="night"]) .btn:hover{ color:var(--ink); background:var(--panel-2) }
html:not([data-theme="night"]) .btn.pri,
html:not([data-theme="night"]) .btn.pri:hover{ color:#fff }
html:not([data-theme="night"]) .btn.pri:hover{ background:#17588F }
html:not([data-theme="night"]) .btn.gold,
html:not([data-theme="night"]) .btn.gold:hover{ color:#fff }
html:not([data-theme="night"]) .btn.gold:hover{ background:#7E570D }
html:not([data-theme="night"]) .topnav a.on{ color:#fff }
html:not([data-theme="night"]) .steps div.on{ color:#fff }
html:not([data-theme="night"]) .steps div.done{ color:var(--ok) }

/* a white revision swatch needs an edge to exist at all */
html:not([data-theme="night"]) .chip.draft::before,
html:not([data-theme="night"]) .band.draft{ box-shadow:inset 0 0 0 1px rgba(23,26,30,.28) }
html:not([data-theme="night"]) .chip.rev{ box-shadow:inset 0 0 0 1px rgba(23,26,30,.10) }

/* the portal tile flag sat on a dark pill */
html:not([data-theme="night"]) .gate .flag{
  background:rgba(255,255,255,.92); color:var(--ink-2);
}
html:not([data-theme="night"]) .gate .art{ background:var(--panel-2) }

/* signature pad and document viewer are paper in every theme;
   in night they need their own border so they do not float */
[data-theme="night"] .docview,[data-theme="night"] .sigpad{ border-color:var(--line) }

/* script.css chips carry their own dark text — hold it on every light theme */
html:not([data-theme="night"]) .chip.ok{ color:#1E5C31 }
html:not([data-theme="night"]) .chip.warn{ color:#6B5312 }
html:not([data-theme="night"]) .chip.stop{ color:#7C2136 }
html:not([data-theme="night"]) .chip.mech{ color:#17456F }
html:not([data-theme="night"]) .chip.craft{ color:#6A5807 }

/* night has to put script.css's paper-tinted chips back on ink */
[data-theme="night"] .chip.ok,
[data-theme="night"] .chip.warn,
[data-theme="night"] .chip.stop,
[data-theme="night"] .chip.mech,
[data-theme="night"] .chip.craft,
[data-theme="night"] .chip.done,
[data-theme="night"] .chip.open,
[data-theme="night"] .chip.rev{ color:#101317 }

/* ============================================================
   The theme control
   ============================================================ */
.themebtn{
  width:32px;height:32px;flex:none;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--raised);border:1px solid var(--line);
  color:var(--ink-2);padding:0;
}
.themebtn:hover{border-color:var(--daylight);color:var(--daylight)}
.themebtn svg{width:16px;height:16px;display:block}
.themewrap{position:relative;display:flex;align-items:center}
.themewrap.floating{position:fixed;top:16px;right:20px;z-index:90}

.thememenu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:95;
  min-width:212px;padding:6px;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.thememenu[hidden]{display:none}
.thememenu .hd{
  font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);padding:6px 8px 7px;
}
.thememenu button{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:7px 8px;border:none;border-radius:2px;background:transparent;
  color:var(--ink);cursor:pointer;text-align:left;
  font-family:"Barlow Condensed",sans-serif;font-size:14.5px;
  letter-spacing:.06em;text-transform:uppercase;
}
.thememenu button:hover{background:var(--panel-2)}
.thememenu button .sw{
  width:22px;height:22px;border-radius:3px;flex:none;
  border:1px solid var(--line);position:relative;overflow:hidden;
}
.thememenu button .sw::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:9px;
}
.thememenu button .nm{flex:1}
.thememenu button .tk{
  font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--daylight);
  letter-spacing:.1em;visibility:hidden;
}
.thememenu button[aria-checked="true"] .tk{visibility:visible}
.thememenu .note{
  font-size:11.5px;color:var(--ink-3);padding:6px 8px 4px;
  border-top:1px solid var(--line-soft);margin-top:4px;line-height:1.4;
}

@media print{ .themewrap{display:none !important} }

/* ---------- work list ladder ----------
   Red not allocated · orange in progress · amber awaiting sign-off
   · green signed off. Orange and amber are close on purpose — they
   are adjacent rungs — so every one carries its label in words. */
:root, :root[data-theme="paper"]{ --wl-red:#B0334A; --wl-orange:#C2600F; --wl-amber:#A9761A; --wl-green:#2E7D45; }
:root[data-theme="warm"]{  --wl-red:#A62F44; --wl-orange:#B0570D; --wl-amber:#8A5D0E; --wl-green:#2C6E40; }
:root[data-theme="slate"]{ --wl-red:#9E2B41; --wl-orange:#B45710; --wl-amber:#8A5E10; --wl-green:#256B39; }
:root[data-theme="night"]{ --wl-red:#C4536A; --wl-orange:#E2823C; --wl-amber:#E4A93C; --wl-green:#7DC28B; }

.chip.red{    background:rgba(176,51,74,.14);  color:var(--wl-red);    border-color:var(--wl-red) }
.chip.orange{ background:rgba(194,96,15,.16);  color:var(--wl-orange); border-color:var(--wl-orange) }
.chip.amber{  background:rgba(169,118,26,.16); color:var(--wl-amber);  border-color:var(--wl-amber) }
.chip.green{  background:rgba(46,125,69,.14);  color:var(--wl-green);  border-color:var(--wl-green) }

.task{display:flex;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line-soft);align-items:flex-start}
.task:last-child{border-bottom:none}
.task:hover{background:var(--raised)}
.task.red{box-shadow:inset 4px 0 0 var(--wl-red)}
.task.orange{box-shadow:inset 4px 0 0 var(--wl-orange)}
.task.amber{box-shadow:inset 4px 0 0 var(--wl-amber)}
.task.green{box-shadow:inset 4px 0 0 var(--wl-green);opacity:.72}
.task .m{flex:1;min-width:0}
.task .m .t{font-weight:600;font-size:14px}
.task .who{min-width:150px}
.task .act{display:flex;flex-direction:column;gap:5px;align-items:flex-end;min-width:132px}
.task .ref{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ink-3);min-width:56px;padding-top:3px}
.task .due{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3)}
.task .due.late{color:var(--wl-red);font-weight:600}

.who-pill{display:inline-flex;align-items:center;gap:7px}
.who-pill .av{
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--panel-2);border:1px solid var(--line);
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:11px;color:var(--ink-2);
}
.who-pill .av.senior{background:var(--daylight-soft);color:var(--daylight);border-color:var(--daylight)}
.who-pill .none{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--wl-red);border:1px dashed var(--wl-red);border-radius:2px;padding:2px 7px;
}
.ladder{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.ladder > div{flex:1;padding:10px 12px;border-right:1px solid var(--line-soft)}
.ladder > div:last-child{border-right:none}
.ladder .n{font-family:"Barlow Condensed",sans-serif;font-size:26px;font-weight:600;line-height:1}
.ladder .k{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.ladder .s{font-size:11px;color:var(--ink-3);margin-top:3px}
.ladder .red .n{color:var(--wl-red)} .ladder .orange .n{color:var(--wl-orange)}
.ladder .amber .n{color:var(--wl-amber)} .ladder .green .n{color:var(--wl-green)}
.ladder > div.on{background:var(--raised)}
.ladder > div{cursor:pointer}

.personcard{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.personcard .ph{display:flex;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line-soft);background:var(--panel-2)}
.personcard .pb{padding:0}
.loadbar{display:flex;height:7px;border-radius:2px;overflow:hidden;background:var(--line-soft);margin-top:5px}
.loadbar i{display:block;height:100%}