:root{
  --grey-1:#40474f;
  --grey-2:#4a4b46;
  --grey-3:#383935;
  --red:#cd163f;        /* brand accent only */
  --red-2:#ba0c2f;
  --alert:#fd6a03;      /* urgent / late (priority flag) */
  --alert-soft:#ffc093;
  --ready:#3f9d5a;      /* STARTABLE: nothing blocking, do it next — green */
  --hold:#f8c425;       /* HELD UP: waiting on another department — yellow */
  --bypass:#f8c425;     /* BYPASSED — yellow */
  --ink:#1c1c1a;
  --bg:#ffffff;
  --tan:#FDF0D5;
  --tan-2:#f6e6c4;
  --line:#d8d8d4;
  --line-strong:#40474f;
  --ok:#2f6df0;
  --purple:#7c3aed;
  --warn:#d8a72b;
  --idle:#a7a9a3;
  --shadow:0 2px 12px rgba(28,28,26,.12);
  --bar-h:66px;
  --leftcol:255px;
  --xspeed:.4s;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"Lato",system-ui,sans-serif;font-size:16px;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3,.brand{font-family:"Caladea",Georgia,serif;font-weight:700}
button{font-family:inherit;cursor:pointer}
code{font-family:"Lato",monospace;font-size:.9em}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:center;gap:22px;background:#fff;color:var(--ink);padding:0 24px;height:68px;border-bottom:2px solid var(--line-strong);position:sticky;top:0;z-index:50}
.brand{font-size:29px;letter-spacing:2px;color:var(--grey-3);cursor:pointer}
.brand-clock{font-family:"Oswald","Lato",sans-serif;font-size:20px;font-weight:600;letter-spacing:1.2px;
  color:var(--grey-3);white-space:nowrap;text-transform:uppercase;display:inline-flex;overflow:hidden;line-height:1.1}
.cl-ch{display:inline-block;overflow:hidden;height:1.1em;line-height:1.1em;white-space:pre;vertical-align:bottom}
.cl-strip{display:flex;flex-direction:column;will-change:transform}
.cl-g{display:block;height:1.1em}
.brand-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  height:52px;width:52px;object-fit:contain;cursor:pointer}
.vs-tasks,.vs-next{background:transparent;border:1.5px solid var(--line-strong);color:var(--grey-3);
  border-radius:6px;padding:7px 16px;font-family:inherit;font-weight:800;font-size:15px;cursor:pointer}
.vs-tasks:hover,.vs-next:hover{border-color:var(--red);color:var(--red)}
.vs-newjob{margin-left:auto;
  position:relative;overflow:hidden;isolation:isolate;
  background:transparent;border:1.5px solid var(--ink);color:var(--ink);
  border-radius:6px;padding:7px 16px;
  font-family:inherit;font-weight:800;font-size:15px;cursor:pointer;
  white-space:nowrap}
.vs-newjob .vs-newjob-l{
  position:relative;z-index:1;
  background-image:linear-gradient(112deg, #fff 50%, var(--ink) 50%);
  background-size:230% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  transition:background-position .15s cubic-bezier(.45,0,.2,1);
}
.vs-newjob::before{
  content:"";position:absolute;
  top:-6px;bottom:-6px;left:0;width:140%;
  background:var(--ink);
  transform:translateX(-110%) skewX(-22deg);
  transform-origin:left center;
  transition:transform .15s cubic-bezier(.45,0,.2,1);
  z-index:0;
}
.vs-newjob:hover::before{transform:translateX(-10%) skewX(-22deg)}
.vs-newjob:hover .vs-newjob-l{background-position:0 0}
.vs-pmname{position:absolute;left:50%;transform:translateX(-50%);font-family:"Caladea",serif;
  font-weight:700;font-size:30px;color:var(--grey-3);pointer-events:none;white-space:nowrap}
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s;z-index:60}
.drawer-backdrop.open{opacity:1;pointer-events:auto}
/* Content row: positioning context for the Tasks drawer. It sits below the
   view-strip, so the drawer (absolute within it) aligns to the content field
   with no fixed top offset. overflow:hidden clips the closed (off-screen) drawer. */
#contentRow{position:relative;overflow:hidden}
/* Tasks panel: slides in from the right and OVERLAYS the content (doesn't push
   it) — absolute, full height of the content row. */
.task-drawer{position:absolute;top:0;right:0;bottom:0;width:380px;z-index:5;background:#fff;
  border-left:2px solid var(--line-strong);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.45,0,.2,1);
  display:flex;flex-direction:column;overflow:hidden}
body.tasks-open .task-drawer{transform:none;box-shadow:-8px 0 28px rgba(0,0,0,.16)}
.td-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;
  border-bottom:2px solid var(--line-strong);background:var(--grey-3);color:#fff;
  font-family:"Caladea",serif;font-weight:700;font-size:20px}
.td-close{background:transparent;border:1.5px solid #fff;color:#fff;border-radius:6px;padding:4px 11px;font-weight:900;cursor:pointer}
/* Task-drawer header: sort/view dropdown (replaces the old title) + add button */
.td-head-l{display:flex;align-items:center;gap:10px;min-width:0}
.td-select{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.55);
  border-radius:6px;padding:5px 10px;font-family:"Caladea",serif;font-weight:700;font-size:17px;
  cursor:pointer;max-width:230px;transition:border-color .15s}
.td-select:hover{border-color:#fff}
.td-select option{color:var(--ink);font-family:"Lato",sans-serif;font-size:14px;font-weight:700}
.td-add,.td-edit,.td-sort{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:6px;background:transparent;border:1.5px solid #fff;color:#fff;line-height:1;
  cursor:pointer;transition:background .15s}
.td-add{font-size:22px}
.td-edit{font-size:15px}
.td-add:hover,.td-edit:hover,.td-sort:hover{background:rgba(255,255,255,.15)}
.td-sort-icn{width:18px;height:18px;display:block;filter:brightness(0) invert(1)}
.td-rename{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid #fff;border-radius:6px;
  padding:5px 10px;font-family:"Caladea",serif;font-weight:700;font-size:17px;max-width:200px;outline:none}
.td-empty{padding:24px 12px;text-align:center;color:var(--grey-2);font-size:13px}
/* priority number (right of each task) + its 1/2/3 submenu */
.td-prio-wrap{position:relative;flex:none}
.td-prio{min-width:26px;height:26px;border:1.5px solid var(--line-strong);border-radius:6px;background:#fff;
  color:var(--grey-3);font-family:inherit;font-weight:900;font-size:13px;cursor:pointer;padding:0 6px;
  transition:border-color .12s,color .12s}
.td-prio:hover{border-color:var(--red);color:var(--red)}
.td-prio-menu{display:none;position:absolute;top:calc(100% + 4px);right:0;z-index:30;background:#fff;
  border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,.2);padding:4px;gap:4px}
.td-prio-wrap.open .td-prio-menu{display:flex}
.td-prio-opt{width:28px;height:28px;border:1.5px solid var(--line-strong);border-radius:6px;background:#fff;
  color:var(--grey-3);font-family:inherit;font-weight:800;font-size:13px;cursor:pointer;
  transition:background .12s,color .12s,border-color .12s}
.td-prio-opt:hover{border-color:var(--red)}
.td-prio-opt.on{background:var(--ink);border-color:var(--ink);color:#fff}
.td-item.td-dragging{opacity:.5}
.td-list{flex:1;min-height:0;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.td-item{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;cursor:pointer;background:#fff}
.td-item:hover{border-color:var(--ink)}
.td-item.urgent{border-left:5px solid var(--alert)}
.td-rank{font-size:13px;font-weight:900;color:var(--grey-2);min-width:20px;text-align:center}
.td-dot{width:13px;height:13px;border-radius:50%;flex:none}
.td-dot.s-done{background:var(--ready)}
.td-dot.s-active{background:var(--ok)}
.td-dot.s-late{background:var(--ok)}
.td-dot.s-rejected{background:var(--red)}
.td-dot.s-blocked{background:var(--idle)}
.td-dot.s-bypass{background:var(--purple)}
.td-dot.s-pending{background:var(--purple)}
.td-main{flex:1;min-width:0}
.td-task{font-weight:800;font-size:14px;color:var(--ink)}
.td-sub{font-size:12px;color:var(--grey-2);display:flex;align-items:center;gap:8px;min-width:0}
.td-job{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-date{flex:none;border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-family:inherit;font-size:11px;
  font-weight:700;color:var(--grey-2);background:#fff;cursor:pointer}
.td-date::-webkit-calendar-picker-indicator{border:1.5px solid var(--ink);border-radius:4px;padding:1px;cursor:pointer}
.td-urgent{font-size:10px;font-weight:900;color:#fff;background:var(--alert);border-radius:20px;padding:2px 8px;flex:none}
.brand-pm{font-family:"Caladea",serif;font-weight:700;font-size:33px;color:var(--red);letter-spacing:1px}
.topbar-right{display:flex;align-items:center;gap:18px;margin-left:auto}
.role-switch{display:flex;align-items:center;gap:8px;font-size:16px;color:var(--grey-2)}
.role-switch select{background:#fff;color:var(--ink);border:1px solid var(--line-strong);border-radius:6px;padding:7px 9px;font-size:15px;font-family:inherit}
/* Topbar role display button — replaces the "Viewing as" label + select. */
.role-display{background:transparent;border:1.5px solid var(--ink);color:var(--ink);
  border-radius:8px;padding:8px 16px;font-family:inherit;font-weight:800;font-size:14px;
  letter-spacing:1.4px;text-transform:uppercase;cursor:pointer;
  transition:border-color .15s}
/* Red diagonal sweep on hover (.btn-sweep recipe); the label flips white via
   .btn-sweep:hover .btn-sweep-l, and the border matches so it reads as solid. */
.role-display.btn-sweep-red:hover{border-color:var(--red)}
/* Account icon — circular button to the right of the role display. */
.account-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:50%;
  background:transparent;border:1.5px solid var(--line-strong);color:var(--grey-3);
  cursor:pointer;transition:border-color .15s,color .15s}
.account-btn:hover{border-color:var(--red);color:var(--red)}
.account-btn svg{display:block}
/* Role picker — centered in the viewport, with a translucent backdrop behind.
   Options stack vertically inside the glass card. */
.role-picker-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0.35);z-index:199;
}
/* Outer container only positions/centers; the visible card is a child so it
   can reuse the login card-collapse without fighting the centering transform. */
.role-picker{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:200;
}
.role-picker-card{
  position:relative;
  background:rgba(255,255,255,0.85);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  border:1px solid rgba(28,28,26,0.18);
  border-radius:18px;
  box-shadow:0 30px 70px rgba(0,0,0,0.30), 0 6px 16px rgba(0,0,0,0.10);
  padding:42px 56px 48px;
  display:flex;flex-direction:column;gap:0;
  min-width:520px;
  overflow:hidden;   /* dismissed roles vanish as they slide past the card edge */
}
/* Red accent bar across the top of the popup. Sibling of the card (not inside
   it) so it survives the card's vertical collapse and then squeezes flat. */
.role-picker-bar{
  position:absolute;left:0;right:0;top:0;height:5px;
  background:var(--red);z-index:5;
  border-radius:18px 18px 0 0;
  transform-origin:50% 50%;
  transition:top .175s cubic-bezier(0,0,.35,1),
             border-radius .175s,
             transform .2s cubic-bezier(0,0,.35,1);
}
/* Cross-page transition — mirrors login.js's slide / collapse / collapseH.
   The collapse setup only applies under .pk-anim so the same-page "slide
   options out" choreography isn't clipped at rest. */
.role-picker.pk-anim .role-picker-card{
  overflow:hidden;
  transform-origin:50% 100%;
  clip-path:inset(0 0 0 0);
  transition:clip-path .175s cubic-bezier(0,0,.35,1),
             transform .225s cubic-bezier(0,0,.35,1);
}
.role-picker.pk-anim.pk-slide .role-picker-card{clip-path:inset(calc(100% - 5px) 0 0 0)}
.role-picker.pk-anim.pk-slide .role-picker-bar{top:calc(100% - 5px);border-radius:0 0 18px 18px}
.role-picker.pk-anim.pk-collapse .role-picker-card{transform:scaleY(0)}
.role-picker.pk-anim.pk-collapseH .role-picker-bar{transform:scaleX(0)}
/* "Role Select" header, sits directly above the role buttons. */
.role-picker-title{
  text-align:center;font-family:inherit;font-weight:800;font-size:15px;
  letter-spacing:2px;text-transform:uppercase;color:var(--ink);
  margin:0 0 18px;
}
/* Option buttons use the diagonal red sweep recipe (.btn-sweep + sweep-red).
   The default-white background fades behind the sweep panel on hover; on
   click the .clicked state keeps the sweep panel pinned across the button
   so it stays visibly red until the picker closes. */
.role-picker-opt{
  background:#fff;border:1.5px solid var(--ink);color:var(--ink);
  border-radius:10px;
  padding:14px 32px;
  margin:0 0 12px;
  font-family:inherit;font-weight:800;font-size:15px;letter-spacing:1.4px;
  text-transform:uppercase;cursor:pointer;
  width:100%;text-align:center;
}
.role-picker-opt:last-child{margin-bottom:0}
.role-picker-opt:hover{border-color:var(--red)}
/* Current role: black panel pinned across, white label (the active selection). */
.role-picker-opt.selected{border-color:var(--ink)}
.role-picker-opt.selected::before{background:var(--ink);transform:translateX(-10%) skewX(-22deg)}
.role-picker-opt.selected .btn-sweep-l{color:#fff}
/* Just-clicked role: red panel slides in from the left, label flips white. */
.role-picker-opt.selecting{border-color:var(--red)}
.role-picker-opt.selecting::before{animation:role-opt-select 300ms cubic-bezier(.45,0,.2,1) forwards}
.role-picker-opt.selecting .btn-sweep-l{color:#fff;transition:color .25s ease}
@keyframes role-opt-select{
  from{transform:translateX(-110%) skewX(-22deg)}
  to  {transform:translateX(-10%)  skewX(-22deg)}
}
/* Unselected roles slide out to the right, then collapse their height so the
   chosen role drops to the bottom and frees space for the animation. */
.role-picker-opt.dismissed{
  animation:role-opt-dismiss 300ms cubic-bezier(.5,0,.7,.4) forwards;
  pointer-events:none;
}
@keyframes role-opt-dismiss{
  0%  {transform:translateX(0);opacity:1}
  100%{transform:translateX(130%);opacity:0}
}
.role-picker-opt.collapsed{
  max-height:0;margin:0;padding-top:0;padding-bottom:0;border-width:0;overflow:hidden;
  transition:max-height .3s ease, margin .3s ease, padding .3s ease, border-width .3s ease;
}

/* Fence-post loading animations. One pattern is picked per picker-open and
   repeats every cycle:
     SIMPLE     — 7 posts rise in a chain, then each hops up and drops back
                  down through the ground in sequence.
     CHAIN-LINK — left + right posts rise almost together; top + bottom
                  horizontal rails slide in from the left about halfway
                  through the posts' rise; diagonal chain-link mesh fills the
                  gap. Then: mesh slides out, top rail slides out followed by
                  the bottom rail, and both posts replay their entry hop in
                  reverse to descend into the ground (left first, right
                  slightly delayed). */
.role-picker-fence{
  display:flex;align-items:flex-end;justify-content:center;
  gap:2px;
  height:64px;max-height:0;overflow:hidden;
  margin:0;
  position:relative;
  transition:max-height .35s ease, margin .35s ease;
}
.role-picker-fence.show{max-height:80px;margin:0 0 8px}
/* ----- SIMPLE pattern posts -----
   Both rise and hop-slide animations are chained on one .go class with
   per-post delays (set inline via --rd / --sd CSS vars). This avoids the
   flicker that came from removing one animation class and adding another
   mid-flight — the post stays continuously animated from below-ground
   through settle through hop-slide-off. */
.fence-post{
  width:14px;height:46px;
  background:var(--red);border-radius:2px 2px 0 0;
  transform:translateY(120%);   /* below ground by default */
}
.fence-post.go{
  animation:
    fence-rise     600ms cubic-bezier(.36,.66,.42,1) var(--rd, 0ms)  forwards,
    fence-hop-drop 500ms cubic-bezier(.5,0,.7,.4)     var(--sd, 0ms)  forwards;
}
@keyframes fence-rise {
  0%   { transform:translateY(120%); }   /* below ground */
  45%  { transform:translateY(-28%); }   /* peak — overshoot above full height */
  68%  { transform:translateY(8%); }     /* small thud into ground */
  82%  { transform:translateY(-6%); }    /* tiny rebound */
  100% { transform:translateY(0); }      /* settle at ground */
}
@keyframes fence-hop-drop {
  0%   { transform:translateY(0); }      /* at ground */
  28%  { transform:translateY(-32%); }   /* slight hop up */
  100% { transform:translateY(140%); }   /* falls straight down through the ground, off-screen */
}
@keyframes fence-post-exit {
  0%   { transform:translateY(0); }      /* at ground */
  50%  { transform:translateY(-28%); }   /* jump straight up — no duck-down first */
  100% { transform:translateY(120%); }   /* then fall away below ground */
}

/* ----- CHAIN-LINK pattern: posts are absolutely positioned in the fence ----- */
.fence-cl-post{
  position:absolute;bottom:0;
  width:14px;height:46px;
  background:var(--red);border-radius:2px 2px 0 0;
  transform:translateY(120%);
}
.fence-cl-post.fcp-left  { left:24%; }
.fence-cl-post.fcp-right { right:24%; }
.fence-cl-post.rising  { animation:fence-rise 600ms cubic-bezier(.36,.66,.42,1) forwards; }
/* Exit: jump straight up from the ground, then fall away below — no initial
   duck-down dip (the old fence-rise-reverse dipped to +8% at its 68% frame
   before jumping up). */
.fence-cl-post.sinking { animation:fence-post-exit 600ms cubic-bezier(.36,.66,.42,1) forwards; }

/* Horizontal rails (top and bottom) that bracket the chain link mesh */
.fence-cl-rail{
  position:absolute;
  left:24%;right:24%;
  height:4px;background:var(--red);border-radius:2px;
  transform:translateX(-200%);
}
.fence-cl-rail.fcr-top    { bottom:38px; }
.fence-cl-rail.fcr-bottom { bottom:6px; }
.fence-cl-rail.sliding-in  { animation:fence-rail-in  400ms cubic-bezier(.3,.7,.4,1) forwards; }
.fence-cl-rail.sliding-out { animation:fence-rail-out 400ms cubic-bezier(.5,0,.7,.4) forwards; }
@keyframes fence-rail-in  { 0% { transform:translateX(-200%); } 100% { transform:translateX(0); } }
@keyframes fence-rail-out { 0% { transform:translateX(0); }     100% { transform:translateX(200%); } }

/* Chain link diagonal lattice — built from individual line elements (not
   a gradient) so each diagonal can slide in / out independently along its
   own diagonal direction. All lines are equidistant horizontally and
   identical in length so the lattice reads as a regular chain-link pattern.
   Each line's animation is a single chain on .go: slide in → wait → slide
   out, with per-line delay set via --d so the wave reads left-to-right on
   both entry and exit. */
.fence-cl-mesh{
  position:absolute;
  left:24%;right:24%;
  bottom:6px;height:36px;
  overflow:hidden;
}
.fcm-line{
  position:absolute;
  background:var(--red);
  height:1px;
  width:52px;            /* slightly longer than the 36px mesh diagonal so it spans rail-to-rail */
  left:var(--x, 0%);
  transform-origin:0 0;
}
/* Up-slanting line: anchored at left:x, top:36 (bottom rail), rotated -45deg
   so the rect extends up-and-right ending at (x+36, 0) (top rail). */
.fcm-up{
  top:36px;
  transform:rotate(-45deg) translateX(-110%);
}
/* Down-slanting line: anchored at left:x, top:0 (top rail), rotated +45deg
   so the rect extends down-and-right ending at (x+36, 36) (bottom rail). */
.fcm-down{
  top:0;
  transform:rotate(45deg) translateX(-110%);
}
.fcm-up.go   { animation:fcm-cycle-up   1350ms linear var(--d, 0ms) forwards; }
.fcm-down.go { animation:fcm-cycle-down 1350ms linear var(--d, 0ms) forwards; }
/* Each line's keyframes contain its full life: enter, wait, exit. The %
   timings inside the 1350ms total: 0–19% slide in, 19–81% wait in place,
   81–100% slide out. Slide direction matches the line's own diagonal axis.
   Per-keyframe easing: slide-in eases OUT (quick start, slows as it lands);
   slide-out eases IN (slow start, accelerates away). */
@keyframes fcm-cycle-up {
  0%   { transform:rotate(-45deg) translateX(-110%); animation-timing-function:ease-out; }  /* off-stage (lower-left); slide in, decelerating */
  19%  { transform:rotate(-45deg) translateX(0); animation-timing-function:linear; }         /* in place — wait */
  81%  { transform:rotate(-45deg) translateX(0); animation-timing-function:ease-in; }         /* still in place; slide out, accelerating */
  100% { transform:rotate(-45deg) translateX(110%); }                                         /* slid out (upper-right) */
}
@keyframes fcm-cycle-down {
  0%   { transform:rotate(45deg) translateX(-110%); animation-timing-function:ease-out; }    /* off-stage (upper-left); slide in, decelerating */
  19%  { transform:rotate(45deg) translateX(0); animation-timing-function:linear; }           /* in place — wait */
  81%  { transform:rotate(45deg) translateX(0); animation-timing-function:ease-in; }           /* slide out, accelerating */
  100% { transform:rotate(45deg) translateX(110%); }                                           /* slid out (lower-right) */
}
.role-picker-loading{
  text-align:center;
  font-family:inherit;
  font-weight:800;
  font-size:13px;
  letter-spacing:3px;
  text-transform:lowercase;
  color:var(--red);
  max-height:0;margin:0;overflow:hidden;
  opacity:0;                           /* hidden until a role is clicked */
  transition:opacity .36s ease .25s;   /* .25s delay after load starts, then a .36s fade-in (no slide) */
}
.role-picker-loading.active{max-height:40px;margin:0 0 10px;opacity:1}
.topbar-filter{display:flex;align-items:center;gap:10px}
.topbar-filter .filter-ui{margin:0}
.topbar-filter .vs-filter{margin-left:0}
.topbar-filter .vs-all{margin-left:0}
.btn{background:transparent;color:var(--ink);border:1.5px solid var(--ink);border-radius:6px;padding:9px 14px;font-size:14px;font-weight:800}
.btn:hover{border-color:#555;color:#555}
.btn-ghost{background:transparent;border:1.5px solid var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--grey-2);color:var(--grey-2)}

/* ---------- shell: left panel slides from full width into the column ---------- */
#shell{display:flex;min-height:calc(100vh - 122px);overflow:hidden}
#leftPanel{
  flex:0 0 100%;max-width:100%;
  overflow-y:auto;overflow-x:hidden;
  background:#fff;
  transition:flex-basis var(--xspeed) cubic-bezier(.45,0,.2,1), padding var(--xspeed) ease;
}
#shell.browse #leftPanel{padding:26px 30px}
#shell.hybrid #leftPanel{flex:0 0 var(--leftcol);padding:12px 10px;border-right:2px solid var(--line-strong);
  background-color:#34362f;
  background-image:linear-gradient(rgba(36,38,33,.28), rgba(36,38,33,.28)), url("assets/galvanized.jpg");
  background-size:cover;background-position:center center;background-repeat:no-repeat}
#detailPanel{flex:1 1 auto;min-width:0;overflow:hidden;position:relative}
#shell.browse #detailPanel{flex:0 0 0}
/* Job View: pin the shell to the viewport so each pane scrolls INTERNALLY
   (otherwise the left jobs column stretches the whole page). Thin custom
   scrollbars on both panes (dark galvanized bg -> light thumbs). */
#shell.hybrid{height:calc(100vh - 122px)}
#shell.hybrid #detailPanel{overflow-y:auto}
#shell.hybrid #leftPanel,#shell.hybrid #detailPanel{
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent}
#shell.hybrid #leftPanel::-webkit-scrollbar,
#shell.hybrid #detailPanel::-webkit-scrollbar{width:7px}
#shell.hybrid #leftPanel::-webkit-scrollbar-track,
#shell.hybrid #detailPanel::-webkit-scrollbar-track{background:transparent}
#shell.hybrid #leftPanel::-webkit-scrollbar-thumb,
#shell.hybrid #detailPanel::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.25);border-radius:4px}
#shell.hybrid #leftPanel::-webkit-scrollbar-thumb:hover,
#shell.hybrid #detailPanel::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.4)}
#shell.hybrid #detailPanel{
  background-color:#2a2b27;
  background-image:linear-gradient(rgba(16,17,14,.5), rgba(16,17,14,.5)), url("assets/galvanized.jpg");
  background-size:cover;background-position:center center;background-repeat:no-repeat}

.x-pane{transition:transform var(--xspeed) ease, opacity calc(var(--xspeed)*.8) ease}
.x-pane.enter-right{opacity:0;transform:translateX(40px)}
.x-pane.shown{opacity:1;transform:none}
.browse-wrap{max-width:1320px;margin:0 auto}

/* left column header / back */
.view-strip{position:sticky;top:68px;z-index:40;display:flex;align-items:center;gap:14px;
  background:#fff;border-bottom:2px solid var(--line-strong);padding:10px 24px;min-height:54px}
.vs-title{font-family:"Caladea",serif;font-weight:700;font-size:26px;color:var(--grey-3)}
.vs-titlebtn{
  position:relative;overflow:hidden;isolation:isolate;
  background:transparent;border:2px solid var(--ink);color:var(--grey-3);
  padding:4px 20px;border-radius:8px;
  font-family:"Caladea",serif;font-weight:700;font-size:22px;line-height:1.25;
  cursor:pointer;white-space:nowrap;
}
.vs-titlebtn .vs-titlebtn-l{
  position:relative;z-index:1;
  background-image:linear-gradient(112deg, #fff 50%, var(--grey-3) 50%);
  background-size:230% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  transition:background-position .15s cubic-bezier(.45,0,.2,1);
}
.vs-titlebtn::before{
  content:"";position:absolute;
  top:-6px;bottom:-6px;left:0;width:140%;
  background:var(--red);
  transform:translateX(-110%) skewX(-22deg);
  transform-origin:left center;
  transition:transform .15s cubic-bezier(.45,0,.2,1);
  z-index:0;
}
.vs-titlebtn:hover::before{transform:translateX(-10%) skewX(-22deg)}
.vs-titlebtn:hover .vs-titlebtn-l{background-position:0 0}
.vs-titlebtn.vs-titlebtn-warm::before{transition:none;transform:translateX(-10%) skewX(-22deg)}
.vs-titlebtn.vs-titlebtn-warm .vs-titlebtn-l{transition:none;background-position:0 0}
.filter-ui{display:flex;align-items:center;gap:10px}
.view-strip .filter-ui{margin-left:14px}
.filter-ui .vs-filter,.filter-ui .vs-all{margin-left:0}
.lp-foot{position:sticky;bottom:0;margin:14px -10px -12px;padding:10px 12px;
  background:rgba(20,21,18,.92);border-top:2px solid var(--line-strong)}
.lp-foot .vs-filter{flex:1;min-width:0}
.vs-filter{margin-left:14px;background:#fff;color:var(--ink);border:1.5px solid var(--line-strong);
  border-radius:6px;padding:7px 10px;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer}
.vs-filter:hover,.vs-filter:focus{border-color:var(--red)}
.vs-filter:hover{color:var(--red)}
.vs-filter option{color:var(--ink)}
.vs-sort{background:#fff;color:var(--ink);border:1.5px solid var(--line-strong);
  border-radius:6px;padding:7px 10px;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer}
.vs-sort:hover,.vs-sort:focus{border-color:var(--red)}
.vs-sort:hover{color:var(--red)}
.vs-sort option{color:var(--ink)}
.sort-ui{display:flex;align-items:center}
.vs-search{background:#fff;color:var(--ink);border:1.5px solid var(--line-strong);
  border-radius:6px;padding:7px 12px;font-family:inherit;font-size:15px;font-weight:600;
  min-width:220px;outline:none;margin-left:14px}
.vs-search::placeholder{color:var(--idle);font-weight:500}
.vs-search:hover,.vs-search:focus{border-color:var(--red)}
.vs-all{margin-left:10px;background:#fff;color:var(--ink);border:1.5px solid var(--line-strong);
  border-radius:6px;padding:7px 16px;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer}
.vs-all:hover{border-color:var(--red);color:var(--red)}
.vs-all.active{background:var(--ink);border-color:var(--ink);color:#fff}
.back-btn{background:transparent;border:1.5px solid var(--line-strong);color:var(--grey-3);
  border-radius:7px;padding:6px 12px;font-size:18px;font-weight:900;line-height:1}
.back-btn:hover{border-color:var(--red);color:var(--red)}

/* ---------- red swirl ring for view-strip controls ---------- */
/* Search / job# sort / Tasks / name-select get the conic swirl on hover (red),
   same recipe as the stage-dot milestone buttons. Buttons (Tasks / All) carry
   the ring directly; <select> and <input> can't host pseudo-elements, so they
   sit inside a .swirl-host span that carries it instead. */
.swirl-red{--a1:0deg;--a2:0deg;--swirl:var(--red);position:relative}
.swirl-red::after{
  content:"";position:absolute;inset:-3px;border-radius:9px;padding:2px;
  background:conic-gradient(from 0deg,
    transparent 0deg,
    transparent calc(360deg - var(--a2)),
    var(--swirl) calc(360deg - var(--a2)), var(--swirl) calc(360deg - var(--a1)),
    transparent calc(360deg - var(--a1)), transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
  transition:--a2 var(--d2,.25s) cubic-bezier(.16,.7,.3,1), --a1 var(--d1,.1s) linear;
}
/* Wrapper host for form controls — hugs the control so the ring traces it. */
.swirl-host{display:inline-flex;position:relative;vertical-align:middle}
.swirl-host > select,
.swirl-host > input{margin:0}
/* The wrapped search box keeps the 14px left gap its bare input used to have. */
.view-strip > .swirl-host{margin-left:14px}
/* Buttons inset the ring's containing block by their own border/padding, so the
   shared -3px hugs the edge. The hosts have neither, so -3px reads as a gap —
   pull the ring in so it hugs the control like the Tasks button does. */
.swirl-host.swirl-red::after{inset:-2px;border-radius:8px}

/* ---------- calendar button + popup (view-strip) ---------- */
.vs-cal{background:transparent;border:1.5px solid var(--line-strong);color:var(--grey-3);
  border-radius:6px;padding:7px 12px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.vs-cal:hover{border-color:var(--red);color:var(--red)}
.vs-cal svg{display:block}
.cal-popup{position:fixed;z-index:120;width:300px;background:#fff;
  border:1px solid var(--line);border-top:4px solid var(--red);border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);padding:14px}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.cal-title{flex:1;text-align:center;font-family:"Caladea",serif;font-weight:700;font-size:19px;color:var(--grey-3)}
.cal-nav{background:transparent;border:1.5px solid var(--line-strong);color:var(--grey-3);
  border-radius:6px;width:30px;height:30px;font-size:20px;line-height:1;cursor:pointer;flex:none;
  display:flex;align-items:center;justify-content:center;transition:border-color .12s,color .12s}
.cal-nav:hover{border-color:var(--red);color:var(--red)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-dow{text-align:center;font-size:11px;font-weight:800;color:var(--grey-2);
  text-transform:uppercase;letter-spacing:.5px;padding:4px 0}
.cal-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  background:transparent;border:1.5px solid transparent;border-radius:7px;
  font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;
  transition:border-color .12s,color .12s,background .12s}
.cal-cell.cal-empty{cursor:default}
.cal-cell:not(.cal-empty):hover{border-color:var(--red);color:var(--red)}
.cal-today{background:transparent;border-color:var(--ink);color:var(--ink)}
.cal-sel,.cal-sel:hover{background:var(--red);border-color:var(--red);color:#fff}
.cal-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.cal-detach{display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:1.5px solid var(--line-strong);color:var(--grey-3);
  border-radius:6px;padding:6px 12px;font-family:inherit;font-weight:800;font-size:12px;cursor:pointer;
  transition:border-color .12s,color .12s}
.cal-detach:hover{border-color:var(--red);color:var(--red)}
.cal-detach svg{display:block}
.cal-today-btn{background:transparent;border:1.5px solid var(--ink);color:var(--ink);
  border-radius:6px;padding:6px 16px;font-family:inherit;font-weight:800;font-size:13px;cursor:pointer;
  transition:border-color .12s,color .12s}
.cal-today-btn:hover{border-color:var(--red);color:var(--red)}

/* ---------- job groups / bars ---------- */
.pm-groups{display:flex;flex-direction:column;gap:18px}
.pm-group{border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.pm-group-head{display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--grey-3);color:#fff;font-family:"Caladea",serif;font-weight:700;font-size:20px;cursor:pointer}
.pmh-text{display:flex;flex-direction:row;align-items:flex-end;gap:10px;line-height:1}
#shell.browse .pm-group-head{padding:5px 16px;color:#fff;text-shadow:none;
  background:linear-gradient(90deg, #2c2d29 0%, #2c2d29 25%, transparent 78%)}
#shell.browse .pm-name{font-size:34px}
#shell.browse .pm-group-head .count{text-shadow:none;color:#d3d5cc;font-size:14px}
.pm-group-head .count{font-family:"Lato";font-weight:700;font-size:14px;color:#cdcdc8}
.pm-group-head .caret{margin-left:auto;color:#cdcdc8;transition:transform .15s}
.pm-group.collapsed .caret{transform:rotate(-90deg)}
.pm-group.collapsed .jobs{display:none}
.jobs{display:flex;flex-direction:column;padding:9px;gap:8px;background:#fff}
.job-bar-wrap{display:flex;flex-direction:column}
.job-bar{position:relative;display:flex;align-items:center;gap:15px;min-height:var(--bar-h);background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px 15px 4px 22px;transition:border-color .15s,border-radius .2s;cursor:pointer}
.job-bar-wrap.open .job-bar{border-radius:8px 8px 0 0;border-bottom-color:transparent}
.bar-expand{margin-left:auto;background:transparent;border:0;color:var(--grey-2);
  cursor:pointer;padding:6px 12px;flex:none;font-family:inherit;
  display:flex;align-items:center;justify-content:center;
  transition:color .15s}
.bar-expand:hover{color:var(--ok)}
.bar-expand .caret{
  display:inline-block;width:16px;height:16px;
  border-right:3.5px solid currentColor;
  border-bottom:3.5px solid currentColor;
  transform:rotate(45deg);
  margin-top:-6px;
  transition:transform .2s ease;
}
.job-bar-wrap.open .bar-expand .caret{
  transform:rotate(-135deg);
  margin-top:6px;
}
.bar-drawer{
  max-height:0;overflow:hidden;
  background:#f8f7f3;
  border:0 solid var(--line);
  border-radius:0 0 8px 8px;
  margin-top:-1px;
  transition:max-height .25s ease,padding .25s ease,border-width .25s ease;
  padding:0 18px;
}
.job-bar-wrap.open .bar-drawer{
  max-height:320px;padding:12px 18px 14px;
  border-width:0 1px 1px 1px;
}
.bd-inner{display:flex;gap:10px;flex-wrap:wrap}
.bd-block{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:8px 13px;flex:0 0 auto;min-width:150px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.bd-dot{width:14px;height:14px;border-radius:50%;background:#fff;border:2.5px solid var(--idle);box-sizing:border-box;flex:none}
.bd-dot.s-active{border-color:var(--ok)}
.bd-dot.s-late{border-color:var(--ok);background:var(--ok)}
.bd-dot.s-rejected{border-color:var(--red)}
.bd-dot.s-bypass{border-color:var(--purple);background:var(--purple)}
.bd-dot.s-pending{border-color:var(--purple)}
.bd-dot.s-done{border-color:var(--ready);background:var(--ready)}
.bd-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.bd-title{font-size:10px;font-weight:800;color:var(--grey-2);text-transform:uppercase;letter-spacing:.4px}
.bd-value{font-size:13px;color:var(--ink);font-weight:700;white-space:nowrap;text-transform:capitalize}
.job-bar:hover{border-color:var(--grey-2)}
/* left ribbon: white in a grey frame; fills with the urgent color when urgent */
.job-bar::before{content:"";position:absolute;left:-2px;top:-1px;bottom:-1px;width:11px;
  background:linear-gradient(180deg,#8c8e85 0%,#ebede7 45%,#bcbeb6 70%,#8c8e85 100%);
  border:1.5px solid var(--grey-2);border-radius:8px 0 0 8px;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.38),inset 1px 0 0 rgba(0,0,0,.14);
  transition:background .5s ease,border-color .5s ease,box-shadow .5s ease}
.job-bar.late::before,.job-bar.urgent::before{
  background:linear-gradient(180deg,#fd6a03 0%,#ffa861 45%,#fd7e1c 70%,#fd6a03 100%);
  border-color:var(--alert);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.16),inset 1px 0 0 rgba(0,0,0,.06)}
.job-bar.selected{box-shadow:inset 0 0 0 2px var(--red)}
.job-bar.dragging{opacity:.6}
.drag-handle{cursor:grab;color:var(--idle);font-size:20px;line-height:1;user-select:none;padding:0 2px}
.bar-stat{display:none;width:13px;height:13px;border-radius:50%;flex:none;background:var(--idle)}
.bar-stat.s-done{background:var(--ok)}
.bar-stat.s-active{background:var(--ready)}
.bar-stat.s-late{background:var(--bypass)}
.bar-stat.s-blocked{background:var(--idle)}
.bar-title{display:flex;flex-direction:column;gap:3px;flex:0 0 340px;min-width:0}
.bar-note{position:relative;flex:0 0 400px;display:flex;align-items:stretch;align-self:stretch}
.bar-note-input{flex:1 1 auto;align-self:stretch;width:100%;min-height:0;
  background:#fff;border:1px solid #d8d8d4;border-radius:6px;
  padding:8px 12px;font-family:inherit;font-size:13px;color:var(--ink);line-height:1.3;
  text-align:left;vertical-align:top;resize:none;overflow-y:auto;
  white-space:pre-wrap;word-wrap:break-word;
  transition:border-color .15s,background .15s,box-shadow .15s}
.bar-note-input::placeholder{color:#d8d8d4;font-style:italic}
.bar-note-input:hover{border-color:var(--grey-2)}
.bar-note-input:focus{outline:none;border-color:#d8d8d4;
  position:absolute;top:0;left:0;right:0;z-index:20;
  min-height:60px;overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.22)}
.ttl-line{display:flex;align-items:baseline;gap:9px;min-width:0}
.job-id{font-weight:900;font-size:15px;color:var(--grey-2);flex:none}
.job-name{font-weight:700;font-size:18px;color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.job-meta{font-size:14px;color:var(--grey-2);display:flex;align-items:center;gap:9px}
.bar-mid{display:flex;align-items:center;gap:9px;flex:none;justify-content:flex-end}
.job-bar .stage-strip{flex:0 0 auto}
.chip{font-size:14px;font-weight:700;padding:4px 11px;border-radius:20px;white-space:nowrap}
.chip-calc{background:#e2efe7;color:#1f5a38;border:1px solid #b6d3c1}
.chip-note{background:var(--tan);color:#7a5410;border:1px solid var(--tan-2);cursor:help}
.chip-late,.chip-urgent{background:var(--alert);color:#fff}
.chip-sm{font-size:11px;padding:2px 8px;font-weight:800}
.meta-start{font-weight:800;color:var(--grey-3)}
/* contracts view */
.ct-gate{max-width:380px;margin:8vh auto 0;display:flex;flex-direction:column;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--line);border-top:4px solid var(--red);border-radius:12px;
  padding:34px 30px;box-shadow:var(--shadow);text-align:center}
.ct-lock{font-size:34px}
.ct-gsub{font-size:14px;color:var(--grey-2);margin-bottom:4px}
.ct-gate .ct-pin{width:100%}
.ct-gate .ct-btn{width:100%;border-color:var(--ink);color:var(--ink)}
.ct-gate .ct-btn:hover{background:var(--ink);color:#fff}
.ct-gate .ct-h{background:none;color:var(--grey-3);font-size:24px;padding:0;
  border-left:3px solid var(--red);padding-left:10px;margin-bottom:6px}
.ct-lockbtn{margin-left:auto;background:transparent;border:1.5px solid var(--line-strong);
  color:var(--grey-2);border-radius:6px;padding:6px 12px;font-family:inherit;font-weight:700;font-size:13px;cursor:pointer}
.ct-lockbtn:hover{border-color:var(--red);color:var(--red)}
.ct-screen{max-width:760px;margin:0 auto}
.ct-pass{display:flex;align-items:center;gap:12px;margin-bottom:16px;justify-content:flex-end}
.ct-pass label{font-weight:800;font-size:14px;color:var(--grey-2)}
.ct-pin{border:1.5px solid var(--line-strong);border-radius:6px;padding:9px 12px;font-family:inherit;font-size:15px}
.ct-h{font-family:"Caladea",serif;font-weight:700;font-size:34px;color:#fff;padding:5px 16px;margin-bottom:14px;
  background:linear-gradient(90deg, #2c2d29 0%, #2c2d29 25%, transparent 78%)}
.ct-empty{color:var(--grey-2);font-size:15px;font-style:italic}
.ct-row{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);
  border-radius:9px;padding:14px 18px;margin-bottom:10px;box-shadow:var(--shadow)}
.ct-d{flex:1;min-width:0}
.ct-id{font-weight:800;font-size:16px;color:var(--ink)}
.ct-csub{font-size:13px;color:var(--grey-2);margin-top:3px}
.ct-btn{flex:none;background:transparent;border:1.5px solid var(--ready);color:var(--ready);
  border-radius:7px;padding:10px 16px;font-family:inherit;font-weight:800;font-size:14px;cursor:pointer}
.ct-btn:hover{background:var(--ready);color:#fff}
.ct-row-signed{background:var(--tan);border-color:var(--tan-2);opacity:.92}
.ct-tag{font-size:13px;font-weight:900;color:var(--ok);background:#fff;border:1.5px solid var(--ok);border-radius:20px;padding:4px 12px}
.ct-undo{background:transparent;border:1.5px solid var(--grey-2);color:var(--grey-2);
  border-radius:6px;padding:7px 12px;font-family:inherit;font-weight:700;font-size:13px;cursor:pointer}
.ct-undo:hover{border-color:var(--red);color:var(--red)}
.chip-row{display:flex;gap:7px;align-items:center}
.notes-btn{flex:none;margin-left:12px;background:transparent;border:1.5px solid var(--grey-2);
  color:var(--grey-2);border-radius:6px;padding:6px 12px;font-size:19px;line-height:1;cursor:pointer}
.notes-btn:hover{border-color:var(--ok);color:var(--ok)}

/* all-jobs bar right cluster: updates / last done / next step */
.bar-right{display:flex;align-items:center;gap:11px;flex:none}
.upd-area{display:inline-flex;align-items:center;justify-content:center;
  position:relative;
  min-width:48px;box-sizing:border-box;
  font-family:"Oswald","Lato",sans-serif;font-size:20px;font-weight:600;letter-spacing:1.2px;
  border-radius:7px;padding:9px 10px;white-space:nowrap;
  border:4px solid var(--idle);color:var(--idle);background:transparent;
  cursor:default;align-self:center;line-height:1.1}
.upd-area.has{border-color:var(--ok);color:var(--ok);cursor:pointer}
/* On hover the badge's solid border is hidden instantly; the animated ring
   below — sized to sit right over where the border was — stands in for it. */
.upd-area.has:hover{border-color:transparent}

/* Two-round border animation on hover.
   Round 1 (::before): a WHITE leading edge sweeps around, erasing the blue
   border to transparent behind it. Round 2 (::after, delayed): a BLUE leading
   edge sweeps around, drawing the blue border back. --uw/--ub are the sweep
   angles (0deg -> 360deg). Both pseudos are hidden at rest and only run while
   hovered; ::after's `forwards` holds the redrawn blue ring until hover ends. */
@property --uw{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --ub{syntax:'<angle>';inherits:false;initial-value:0deg}
.upd-area::before,
.upd-area::after{
  content:"";position:absolute;inset:-4px;border-radius:7px;padding:4px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;opacity:0;
}
/* Round 1 — two white edges 180deg apart, each erasing its own half
   (transparent behind the edge, blue ahead). --uw sweeps 0->180 so the pair
   covers the full ring. min() clamps each white band to its half so the
   gradient stops stay in non-decreasing order. */
.upd-area::before{
  background:conic-gradient(from 0deg,
    transparent 0deg,
    transparent var(--uw),
    #fff var(--uw),
    #fff min(calc(var(--uw) + 14deg), 180deg),
    var(--ok) min(calc(var(--uw) + 14deg), 180deg),
    var(--ok) 180deg,
    transparent 180deg,
    transparent calc(180deg + var(--uw)),
    #fff calc(180deg + var(--uw)),
    #fff min(calc(180deg + var(--uw) + 14deg), 360deg),
    var(--ok) min(calc(180deg + var(--uw) + 14deg), 360deg),
    var(--ok) 360deg);
}
/* Round 2 — two blue edges 180deg apart, each redrawing its own half (blue
   behind the lighter leading edge, transparent ahead). --ub sweeps 0->180. */
.upd-area::after{
  background:conic-gradient(from 0deg,
    var(--ok) 0deg,
    var(--ok) var(--ub),
    #cfe0ff var(--ub),
    #cfe0ff min(calc(var(--ub) + 14deg), 180deg),
    transparent min(calc(var(--ub) + 14deg), 180deg),
    transparent 180deg,
    var(--ok) 180deg,
    var(--ok) calc(180deg + var(--ub)),
    #cfe0ff calc(180deg + var(--ub)),
    #cfe0ff min(calc(180deg + var(--ub) + 14deg), 360deg),
    transparent min(calc(180deg + var(--ub) + 14deg), 360deg),
    transparent 360deg);
}
.upd-area.has:hover::before{animation:upd-erase .1375s linear forwards}
.upd-area.has:hover::after {animation:upd-redraw .1375s linear .125s forwards}
@keyframes upd-erase{
  0%  {--uw:0deg;opacity:1}
  85% {opacity:1}
  100%{--uw:180deg;opacity:0}
}
@keyframes upd-redraw{
  0%  {--ub:0deg;opacity:0}
  8%  {opacity:1}
  100%{--ub:180deg;opacity:1}
}
.upd-pop{position:fixed;z-index:70;width:300px;max-width:80vw;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--ok);border-radius:9px;box-shadow:0 8px 26px rgba(0,0,0,.2);
  padding:13px 15px;opacity:0;transform:translateX(-6px);pointer-events:none;transition:opacity .15s,transform .15s;
  display:flex;flex-direction:column;gap:7px}
.upd-pop.show{opacity:1;transform:none;pointer-events:auto}
.up-head{font-weight:900;font-size:14px;color:var(--ink)}
.up-sub{font-size:12px;color:var(--grey-2);margin-bottom:4px}
.up-item{
  --a1:0deg;--a2:0deg;
  display:flex;gap:9px;align-items:flex-start;width:100%;text-align:left;
  background:transparent;border:1.5px solid #d8d8d4;border-radius:8px;
  padding:9px 11px;
  font-size:13px;color:var(--ink);line-height:1.35;cursor:pointer;font-family:inherit;
  position:relative;
}
.up-item::after{
  content:"";position:absolute;inset:-2px;border-radius:9px;padding:1.5px;
  background:conic-gradient(from 0deg,
    rgba(47,109,240,0) 0deg,
    rgba(47,109,240,0) calc(360deg - var(--a2)),
    #2f6df0 calc(360deg - var(--a2)), #2f6df0 calc(360deg - var(--a1)),
    rgba(47,109,240,0) calc(360deg - var(--a1)), rgba(47,109,240,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
  transition:--a2 var(--d2,.25s) cubic-bezier(.16,.7,.3,1), --a1 var(--d1,.1s) linear;
}
.up-item:hover{color:var(--ok)}
.up-dot{width:10px;height:10px;border-radius:50%;background:var(--ok);flex:none;margin-top:3px}
.up-go{font-size:11px;color:var(--grey-2);margin-top:4px;font-weight:700}
.next-step-btn{background:transparent;border:1.5px solid var(--grey-2);color:var(--grey-2);border-radius:6px;padding:6px 11px;font-size:13px;font-weight:800;white-space:nowrap}
.next-step-btn:hover{border-color:#3f9d5a;color:#3f9d5a}

/* compact mode (when collapsed into the left column) */
#shell.hybrid .pm-group{border:0;border-radius:0;box-shadow:none;background:transparent}
#shell.hybrid .pm-groups{gap:6px}
#shell.hybrid .pm-group-head{background:linear-gradient(90deg,#2c2d29 0%,#2c2d29 25%,transparent 78%);color:#fff;font-size:14px;padding:9px 11px;border-radius:6px;cursor:default}
#shell.hybrid .pm-group-head .count{color:#c4c6bd}
#shell.hybrid .pm-group-head .caret{display:none}
#shell.hybrid .jobs{padding:0;gap:6px;background:transparent}
#shell.hybrid .job-bar{flex-wrap:wrap;gap:3px 8px;min-height:0;padding:9px 11px 9px 20px;overflow:hidden;transition:border-color .5s ease,box-shadow .5s ease}
#shell.hybrid .job-bar::before{left:0;top:0;bottom:0;border:0;border-radius:0;
  background:linear-gradient(180deg,#a9aba4 0%,#d3d5cf 45%,#c1c3bc 70%,#a9aba4 100%);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.18), inset 1px 0 0 rgba(0,0,0,.08)}
#shell.hybrid .job-bar.urgent::before{
  background:linear-gradient(180deg,#fd6a03 0%,#ffa861 45%,#fd7e1c 70%,#fd6a03 100%);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.16),inset 1px 0 0 rgba(0,0,0,.06)}
#shell.hybrid .job-bar:hover{border-color:var(--grey-2)}
#shell.hybrid .job-bar.selected{border-color:#bcbeb6;box-shadow:inset 0 0 0 2px #bcbeb6}
#shell.hybrid .job-bar.urgent:hover,
#shell.hybrid .job-bar.urgent.selected{border-color:var(--alert)}
#shell.hybrid .job-bar.urgent.selected{box-shadow:inset 0 0 0 2px var(--alert)}
#shell.hybrid .job-bar .drag-handle,
#shell.hybrid .job-bar .job-meta,
#shell.hybrid .job-bar .stage-strip,
#shell.hybrid .job-bar .chip-row,
#shell.hybrid .job-bar .notes-btn,
#shell.hybrid .job-bar .bar-note,
#shell.hybrid .job-bar .bar-expand,
#shell.hybrid .job-bar .bar-mid{display:none}
#shell.hybrid .job-bar-wrap .bar-drawer{display:none}
#shell.hybrid .job-bar .bar-stat{display:none}
#shell.hybrid .job-bar .bar-title{min-width:0;flex:1}
#shell.hybrid .job-bar .ttl-line{flex-wrap:wrap;gap:2px 8px}
#shell.hybrid .job-bar .job-name{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- All-Jobs view: galvanized-steel texture background ---------- */
#shell.browse .pm-group{background:transparent;border:2px solid #fff;box-shadow:none}
#shell.browse .jobs{background:rgba(18,19,16,.28)}
#shell.browse #leftPanel{
  background-color:#34362f;
  background-image:linear-gradient(rgba(36,38,33,.28), rgba(36,38,33,.28)), url("assets/galvanized.jpg");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

/* ---------- stage strip (labels are task buttons in browse) ---------- */
@property --a1{syntax:'<angle>';inherits:true;initial-value:0deg}
@property --a2{syntax:'<angle>';inherits:true;initial-value:0deg}
.stage-strip{position:relative;padding:5px 6px 4px}
.stage-dots{display:flex;gap:4px;position:relative;align-items:stretch}
.stage-dot{
  --a1:0deg;--a2:0deg;
  --swirl:#000;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;
  background:transparent;border:1.5px solid #d8d8d4;border-radius:8px;
  flex:0 0 92px;cursor:pointer;
  padding:4px 4px;
  position:relative;
  font-family:inherit;color:var(--ink);
  transition:color .15s;
}
.stage-dot.s-active{--swirl:var(--ok)}
.stage-dot.s-late{--swirl:var(--ok)}
.stage-dot.s-rejected{--swirl:var(--red)}
.stage-dot.s-bypass{--swirl:var(--purple)}
.stage-dot.s-pending{--swirl:var(--purple)}
.stage-dot.s-done{--swirl:var(--ready)}
.dot-light{width:17px;height:17px;border-radius:50%;background:#fff;border:2.5px solid var(--idle);box-sizing:border-box;position:relative;flex:none}
.dot-light.s-active{border-color:var(--ok)}
.dot-light.s-late{border-color:var(--ok);background:var(--ok)}
.dot-light.s-rejected{border-color:var(--red)}
.dot-light.s-bypass{border-color:var(--purple);background:var(--purple)}
.dot-light.s-pending{border-color:var(--purple)}
.dot-light.s-done{border-color:var(--ready);background:var(--ready)}
.stage-lbl{
  width:100%;min-height:34px;display:flex;align-items:center;justify-content:center;flex:1 1 auto;
  font-size:16px;color:inherit;line-height:1.18;font-family:inherit;text-align:center;
  background:transparent;border:0;padding:0;
  white-space:normal;overflow-wrap:break-word;
}
/* ring border now wraps the whole stage-dot button — color follows the dot's state */
.stage-dot::after{
  content:"";position:absolute;inset:-2px;border-radius:9px;padding:1.5px;
  background:conic-gradient(from 0deg,
    transparent 0deg,
    transparent calc(360deg - var(--a2)),
    var(--swirl) calc(360deg - var(--a2)), var(--swirl) calc(360deg - var(--a1)),
    transparent calc(360deg - var(--a1)), transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
  transition:--a2 var(--d2,.25s) cubic-bezier(.16,.7,.3,1), --a1 var(--d1,.1s) linear;
}
.stage-dot:hover{color:var(--ink)}
.stage-dot.sel{color:var(--red);font-weight:900;border-color:var(--red)}

/* ---------- single card ---------- */
.single-card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--red);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;margin:14px}
.sc-head{display:flex;align-items:flex-start;gap:15px;padding:18px 24px;background:var(--grey-3);color:#fff}
.sc-head .t1{font-family:"Caladea",serif;font-size:26px;display:flex;align-items:center;gap:10px;position:relative}
.t1-actions{position:relative;display:inline-flex;align-items:center}
.t1-caret{background:transparent;border:0;color:#fff;font-size:18px;line-height:1;cursor:pointer;padding:2px 4px}
.t1-caret:hover{color:var(--alert-soft)}
.t1-menu{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--line-strong);
  border-radius:8px;box-shadow:0 8px 22px rgba(0,0,0,.22);padding:5px;display:none;z-index:30;min-width:160px}
.t1-menu.open{display:block}
.t1-menu button{display:block;width:100%;text-align:left;background:transparent;border:0;
  padding:9px 12px;font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;border-radius:6px}
.t1-menu button:hover{background:var(--tan)}
.sc-head .t2{font-size:16px;color:#cdcdc8;margin-top:4px}
/* Mark Urgent toggle next to the super's name — a filled pill in the urgent-flag
   font (Lato 800, all caps). Light-grey fill + dark text by default; orange fill
   + white text ("URGENT") when active. */
.urg-btn{margin-left:12px;padding:3px 11px;
  background:var(--idle);border:1.5px solid var(--idle);border-radius:20px;cursor:pointer;
  font-family:"Lato",sans-serif;font-size:12px;font-weight:800;text-transform:uppercase;
  color:var(--ink);vertical-align:middle;white-space:nowrap;
  transition:color .5s ease,background .5s ease,border-color .5s ease,opacity .15s}
.urg-btn:hover{opacity:.85}
.urg-btn.on{background:var(--alert);border-color:var(--alert);color:#fff}
.sc-head .next-step{margin-left:auto;display:flex;align-items:center;gap:10px}
/* Date button (DateApp icon) — right of the title block, stretched to span the
   title+subtitle height. White outline + white icon on the dark header; fills red
   when the Project Timeline drawer is open. */
/* small square that hugs the icon (icon + equal padding), vertically centered */
.date-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;align-self:center;
  padding:6px;border-radius:7px;
  background:transparent;border:1.5px solid #fff;cursor:pointer;transition:background .15s,border-color .15s}
.date-btn:hover{background:rgba(255,255,255,.12)}
.date-btn.on{background:var(--red);border-color:var(--red)}
/* fixed-size square icon (SVG is 1:1); the button hugs it via equal padding */
.date-btn-icn{width:32px;height:auto;display:block;filter:brightness(0) invert(1)}
/* Date dropdown — full-width accordion between the project title header and the
   task area. Collapsed via grid-template-rows:0fr; opens to 1fr. Holds the
   Project Timeline panel (top-left header + a large black rounded subarea). */
.date-drop{display:grid;grid-template-rows:0fr;background:#fff;
  transition:grid-template-rows .3s cubic-bezier(.45,0,.2,1)}
.date-drop.open{grid-template-rows:1fr;border-bottom:1px solid var(--line)}
.date-drop-inner{overflow:hidden;min-height:0}
.pt-panel{padding:18px 24px}
.pt-header{font-family:"Caladea",serif;font-weight:700;font-size:20px;color:var(--grey-3);
  border-left:3px solid var(--red);padding-left:10px}
/* ---- Project Timeline applet (timeline.js) ---- */
.tl-root{margin-top:16px}
.tl-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.tl-note{font-size:12px;font-style:italic;font-weight:600;color:var(--grey-2)}
.tl-checkbox{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;
  color:var(--grey-2);text-transform:uppercase;letter-spacing:.4px;cursor:pointer;user-select:none}
.tl-checkbox input{accent-color:var(--red);cursor:pointer;width:15px;height:15px}
/* Chart: 5 phase lanes. The 2px border + the 4 internal lane dividers read as
   the 6 horizontal lines / 5 lanes. */
.tl-chart{position:relative;border:2px solid var(--ink);border-radius:14px;overflow:hidden;background:#fff}
/* gridlines + weekend shading + month labels, behind the lanes */
.tl-grid{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.tl-weekend{position:absolute;top:0;bottom:0;background:rgba(0,0,0,.06)}
.tl-dayline{position:absolute;top:0;bottom:0;border-left:1px dotted rgba(0,0,0,.22)}
.tl-monthline{position:absolute;top:0;bottom:0;border-left:1px solid var(--ink)}
.tl-month-lbl{position:absolute;bottom:3px;transform:translateX(-50%);
  font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--grey-2);
  background:rgba(255,255,255,.85);padding:0 4px;border-radius:3px;white-space:nowrap}
.tl-axis{height:20px}
.tl-lane{position:relative;z-index:1;height:62px;border-bottom:1px solid var(--line)}
.tl-lane:last-child{border-bottom:0}
.tl-block{position:absolute;top:7px;bottom:7px;min-width:10px;box-sizing:border-box;
  background:transparent;border:2px solid var(--ink);border-radius:7px;
  display:flex;align-items:center;padding:0;overflow:hidden;
  cursor:grab;user-select:none}
.tl-block.tl-dragging,.tl-block.tl-resizing{cursor:grabbing}
.tl-block-locked{box-shadow:inset 0 0 0 1px #fff}
/* solid fill up to the DTC day, a caution band on that day, hollow (border only) after */
.tl-fill{position:absolute;top:0;bottom:0;left:0;width:0}
/* solid-black cap = the Expected-End day's cell (bar extends 1 day to cover it).
   Clipped to the bar's rounded right corners by .tl-block's overflow:hidden. */
.tl-endcap{position:absolute;top:0;bottom:0;width:0;background:var(--ink)}
.tl-caution{position:absolute;top:0;bottom:0;display:none;min-width:6px;z-index:1;cursor:ew-resize;
  box-sizing:border-box;border:1px solid #000;
  background:repeating-linear-gradient(45deg,#1c1c1a 0 5px,#fff 5px 10px)}
.tl-block-l{position:relative;z-index:2;color:#fff;font-weight:800;font-size:20px;
  margin-left:8px;padding:1px 8px;border-radius:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
/* right-edge resize grip */
.tl-resize{position:absolute;top:0;right:0;bottom:0;width:9px;cursor:ew-resize;border-radius:0 6px 6px 0}
.tl-resize:hover{background:rgba(255,255,255,.25)}
/* cursor date tooltip over the chart */
.tl-tip{position:fixed;z-index:300;pointer-events:none;display:none;
  background:var(--grey-3);color:#fff;font-size:11px;font-weight:800;
  padding:3px 8px;border-radius:6px;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.tl-tip.show{display:block}
.tl-fields{margin-top:14px;display:flex;flex-direction:column}
.tl-row{display:grid;
  grid-template-columns:22px minmax(86px,150px) 120px 276px 112px 44px 160px 112px auto 1fr;
  gap:8px;align-items:center;padding:7px 6px;border-bottom:1px dashed var(--line)}
/* per-row task controls (priority 1/2/3 + due date + Add task) */
.tl-taskcell{display:flex;align-items:center;gap:6px}
.tl-row:last-child{border-bottom:0}
.tl-row-head{border-bottom:1.5px solid var(--line)}
.tl-row-head .tl-cell{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--grey-2)}
.tl-row-head .tl-h-c{text-align:center}   /* header centered over its centered control (date inputs, lock) */
.tl-hint{font-weight:600;text-transform:none;letter-spacing:0;color:var(--idle);font-style:italic}
.tl-cell{font-size:13px;color:var(--ink);min-width:0}
/* vertical divider that starts a column group (Expected start, DTC, Duration, X).
   align-self:stretch makes the border span the full row height despite the row's
   align-items:center; the cells it lands on are already vertically centered. */
.tl-divL{align-self:stretch;border-left:1px solid var(--line);padding-left:9px}
/* tools: reorder grip + delete */
.tl-tools{display:flex;align-items:center;gap:4px}
.tl-grip{cursor:grab;color:var(--idle);font-size:15px;line-height:1;user-select:none}
.tl-grip:active{cursor:grabbing}
.tl-trash{background:transparent;border:0;cursor:pointer;font-size:14px;line-height:1;padding:2px;opacity:.6}
.tl-trash:hover{opacity:1}
.tl-xcell{display:flex;justify-content:flex-end;align-items:center}
.tl-x{font-size:15px;font-weight:800;color:var(--grey-2)}
.tl-x:hover{color:var(--red)}
/* phase name (swatch + clickable name) */
.tl-name{display:flex;align-items:center;gap:7px}
.tl-swatch{width:11px;height:11px;border-radius:3px;flex:none}
.tl-namebtn{background:transparent;border:0;cursor:pointer;font-family:inherit;font-weight:800;font-size:13px;
  color:var(--ink);text-align:left;padding:2px 5px;border-radius:5px;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-namebtn:hover{background:#f0eee8;color:var(--red)}
/* project-item phase = colored pill (tint bg + colored border set inline per
   phase color). Custom phases stay plain text. */
.tl-namebtn-linked{border:1.5px solid;border-radius:999px;padding:2px 11px}
.tl-dur{display:flex;align-items:center;gap:10px}
.tl-slider{width:150px;flex:none;accent-color:var(--red);cursor:pointer}
/* DTC slider: the filled (red) portion is to the RIGHT of the thumb, not the
   left. --p (thumb position %) is set by paintDtcSlider() in timeline.js;
   custom properties inherit into the track pseudo-elements. */
.tl-slider-dtc{-webkit-appearance:none;appearance:none;height:14px;background:transparent}
.tl-slider-dtc::-webkit-slider-runnable-track{height:6px;border-radius:3px;
  background:linear-gradient(to right, var(--line) 0 var(--p,0%), var(--red) var(--p,0%) 100%)}
.tl-slider-dtc::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-4px;
  width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--ink);cursor:pointer}
.tl-slider-dtc::-moz-range-track{height:6px;border-radius:3px;
  background:linear-gradient(to right, var(--line) 0 var(--p,0%), var(--red) var(--p,0%) 100%)}
.tl-slider-dtc::-moz-range-progress{background:transparent}
.tl-slider-dtc::-moz-range-thumb{width:14px;height:14px;border:2px solid var(--ink);border-radius:50%;background:#fff;cursor:pointer}
.tl-dur-l{font-size:12px;font-weight:700;color:var(--grey-2);white-space:nowrap}
.tl-dep{color:var(--grey-2)}
.tl-dateinput{width:100%;border:1.5px solid var(--line-strong);border-radius:7px;padding:6px 9px;
  font-family:inherit;font-size:13px;font-weight:700;color:var(--ink);text-align:center;outline:none}
.tl-dateinput:focus{border-color:var(--ok)}
.tl-dateinput.tl-drop{border-style:solid;border-color:var(--red);background:rgba(205,22,63,.07)}
/* the Add-task due-date field as a drop target */
.atm-date.tl-drop{border-color:var(--red);background:rgba(205,22,63,.07)}
/* phase reorder: ghost chip (phase color + name) follows the cursor; the source
   row dims; the row you'd drop onto shows a red left-edge indicator. */
.tl-drag-ghost{position:fixed;display:inline-flex;align-items:center;gap:7px;background:#fff;
  border:1.5px solid var(--ink);border-radius:7px;padding:5px 11px;font-family:inherit;
  font-weight:800;font-size:13px;color:var(--ink);box-shadow:0 8px 22px rgba(0,0,0,.28);
  white-space:nowrap;pointer-events:none;z-index:9999}
.tl-drag-sw{width:12px;height:12px;border-radius:3px;flex:none}
.tl-row.tl-row-dragging{opacity:.4}
.tl-row.tl-row-over{background:rgba(205,22,63,.06);box-shadow:inset 3px 0 0 var(--red)}
.tl-crit-cell{display:flex;align-items:center;gap:6px}
.tl-crit-cell .tl-dateinput{flex:1;min-width:0}
.tl-crit{font-weight:800;color:var(--grey-3)}
.tl-lockcell{display:flex;justify-content:center;align-items:center}
.tl-lockbox{width:20px;height:20px;border:2px solid var(--ink);border-radius:5px;background:transparent;
  cursor:pointer;padding:0;transition:background .12s}
.tl-lockbox:hover{background:rgba(205,22,63,.12)}
.tl-lockbox.on{background:var(--red)}
.tl-dateinput:disabled{opacity:.5;cursor:not-allowed;background:#f4f3f0}
.tl-addbtn{margin-top:10px;background:transparent;border:1.5px dashed var(--line-strong);color:var(--grey-2);
  border-radius:8px;padding:8px 14px;font-family:inherit;font-weight:800;font-size:13px;cursor:pointer;width:100%}
.tl-addbtn:hover{border-color:var(--red);color:var(--red)}
.tl-addbtn:disabled{opacity:.5;cursor:not-allowed}
.tl-addbtn:disabled:hover{border-color:var(--line-strong);color:var(--grey-2)}
/* phase-name options menu (opens above the name) */
.tl-namemenu{position:fixed;z-index:320;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.24);padding:5px;min-width:180px;
  display:flex;flex-direction:column;gap:2px}
.tl-nameopt{background:transparent;border:0;text-align:left;font-family:inherit;font-size:13px;font-weight:700;
  color:var(--ink);padding:8px 12px;border-radius:6px;cursor:pointer}
.tl-nameopt:hover{background:#f0eee8;color:var(--red)}
.tl-nameadd{border-top:1px solid var(--line);margin-top:2px;color:var(--ok);font-weight:800}
.tl-nameadd:hover{background:rgba(47,109,240,.08);color:var(--ok)}
.tl-nameinput{font-family:inherit;font-weight:800;font-size:13px;color:var(--ink);
  border:1.5px solid var(--ok);border-radius:5px;padding:2px 6px;width:140px;outline:none}
.date-cal{max-width:420px;margin:18px auto 0}
.next-btn{position:relative;overflow:hidden;isolation:isolate;
  background:transparent;color:#fff;border:1.5px solid #fff;border-radius:7px;
  padding:11px 18px;font-weight:900;font-size:17px;cursor:pointer}
.next-btn:hover{border-color:#fff}
.next-hint{font-size:13px;color:#cdcdc8;margin-top:6px;max-width:280px}
.sc-stage{padding:10px 26px 4px;background:#fff}
.sc-body{display:grid;grid-template-columns:.5fr 1.65fr .5fr}
@media(max-width:1080px){.sc-body{grid-template-columns:1fr}}
.notes-panel{border-left:1px solid var(--line)}
.notes-area{width:100%;min-height:150px;resize:vertical;border:1px solid var(--line);border-radius:7px;
  padding:10px 12px;font-family:inherit;font-size:14px;color:var(--ink);background:#fff;line-height:1.4}
.notes-area:focus{outline:2px solid var(--ready);outline-offset:-1px}
.notes-actions{display:flex;gap:8px;margin-top:8px;justify-content:flex-end}
.notes-actions .btn-ghost{border-radius:18px;padding:6px 14px}
.notes-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.note-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:8px;padding:11px 12px;cursor:text}
.note-text{font-size:13px;white-space:pre-wrap;color:var(--ink);line-height:1.4}
.note-placeholder .note-text{color:var(--idle);font-style:italic}
.note-tools{position:absolute;top:6px;right:6px;display:flex;gap:4px;opacity:0;transition:opacity .15s}
.note-card:hover .note-tools,.note-tools.show{opacity:1}
.note-tool{background:transparent;border:1px solid var(--line);color:var(--grey-2);border-radius:6px;
  padding:2px 7px;font-size:13px;line-height:1.2;cursor:pointer;font-family:inherit}
.note-tool:hover{border-color:var(--grey-3);color:var(--grey-3)}
.note-confirm{background:var(--red);border:1px solid var(--red);color:#fff;border-radius:6px;
  padding:3px 10px;font-size:11px;font-weight:800;cursor:pointer;font-family:inherit}
.note-confirm:hover{background:var(--red-2);border-color:var(--red-2)}
.note-edit-input{width:100%;border:0;outline:none;background:transparent;font-family:inherit;
  font-size:13px;color:var(--ink);line-height:1.4;resize:none;min-height:48px;padding:0;display:block}
.pbox-none{padding:18px 24px;color:var(--grey-2);font-size:14px;font-style:italic}
.gallery{border-top:1px solid var(--line);padding:16px 24px;background:#fff}
.gal-head{font-family:"Caladea",serif;font-weight:700;font-size:18px;color:var(--ink);
  border-left:3px solid var(--red);padding-left:9px;margin-bottom:12px}
.gal-row{display:flex;gap:12px;flex-wrap:wrap}
.gal-tile{width:130px;height:96px}
.checklist{padding:18px 10px 18px 22px;border-right:1px solid var(--line)}
.checklist h3,.docpane h3,.panel h3{font-size:18px;margin-bottom:12px;color:var(--ink);border-left:3px solid var(--red);padding-left:9px}
.checklist{position:relative}
.cl-item{position:relative;display:flex;align-items:flex-start;gap:11px;padding:10px 9px;border-radius:7px;cursor:pointer}
.cl-state{position:relative;z-index:1}
/* .cl-item hover = the red swirl ring (.swirl-red + wireSwish, wired in jobCard) — no grey fill */
.cl-item.sel{background:transparent;outline:2px solid var(--grey-3);outline-offset:-2px;border-radius:9px}
.cl-state{width:18px;height:18px;border-radius:50%;flex:none;margin-top:2px;background:#fff;border:2.5px solid var(--idle);box-sizing:border-box;cursor:pointer;transition:transform .12s,box-shadow .12s}
.cl-state:hover{transform:scale(1.2);box-shadow:0 0 0 3px rgba(167,169,163,.25)}
.cl-state.s-done:hover{box-shadow:0 0 0 3px rgba(63,157,90,.28)}
.cl-state.s-active:hover,.cl-state.s-late:hover{box-shadow:0 0 0 3px rgba(47,109,240,.28)}
.cl-state.s-rejected:hover{box-shadow:0 0 0 3px rgba(205,22,63,.28)}
.cl-state.s-bypass:hover,.cl-state.s-pending:hover{box-shadow:0 0 0 3px rgba(124,58,237,.28)}

/* state picker popover (above clicked cl-state dot) */
.state-picker{
  position:fixed;z-index:100;
  display:flex;gap:12px;padding:10px 14px;
  background:#fff;border:1px solid var(--line);border-radius:30px;
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}
.state-picker::after{
  content:"";position:absolute;
  bottom:-9px;left:50%;transform:translateX(-50%);
  width:0;height:0;border:9px solid transparent;
  border-top-color:#fff;border-bottom:0;
}
.state-picker::before{
  content:"";position:absolute;
  bottom:-11px;left:50%;transform:translateX(-50%);
  width:0;height:0;border:10px solid transparent;
  border-top-color:var(--line);border-bottom:0;
}
.sp-dot{
  width:24px;height:24px;border-radius:50%;
  border:2.75px solid var(--idle);background:#fff;box-sizing:border-box;
  cursor:pointer;transition:transform .12s,box-shadow .12s;
  position:relative;padding:0;font-family:inherit;
}
.sp-dot:hover{transform:scale(1.18);box-shadow:0 0 0 3px rgba(167,169,163,.25)}
.sp-dot.s-active{border-color:var(--ok)}
.sp-dot.s-late{border-color:var(--ok);background:var(--ok)}
.sp-dot.s-rejected{border-color:var(--red)}
.sp-dot.s-bypass{border-color:var(--purple);background:var(--purple)}
.sp-dot.s-pending{border-color:var(--purple)}
.sp-dot.s-done{border-color:var(--ready);background:var(--ready)}
.sp-dot.s-done:hover{box-shadow:0 0 0 3px rgba(63,157,90,.28)}
.sp-dot.s-active:hover,.sp-dot.s-late:hover{box-shadow:0 0 0 3px rgba(47,109,240,.28)}
.sp-dot.s-rejected:hover{box-shadow:0 0 0 3px rgba(205,22,63,.28)}
.sp-dot.s-bypass:hover,.sp-dot.s-pending:hover{box-shadow:0 0 0 3px rgba(124,58,237,.28)}
.cl-state.s-active{border-color:var(--ok)}
.cl-state.s-late{border-color:var(--ok);background:var(--ok)}
.cl-state.s-rejected{border-color:var(--red)}
.cl-state.s-bypass{border-color:var(--purple);background:var(--purple)}
.cl-state.s-pending{border-color:var(--purple)}
.cl-state.s-done{border-color:var(--ready);background:var(--ready)}
.cl-main{flex:1;min-width:0}
.cl-label-row{display:flex;align-items:center;gap:12px}
.cl-label{font-weight:700;font-size:17px}
.cl-label.future{color:#a9aba3;font-weight:600}
.cl-item.cl-future .cl-todo-item{color:#aeb0a8}
.cl-item.cl-future .cl-todo-dot{border-color:var(--idle);background:transparent}
.cl-item.cl-future .cl-todo-dot::after{display:none}
.st-sel{flex:none;width:120px;background:#fff;border:1.5px solid var(--line-strong);border-radius:6px;padding:5px 7px;font-family:inherit;font-size:12px;font-weight:700;color:var(--ink);cursor:pointer}
.cl-todo{display:grid;grid-template-rows:1fr;overflow:hidden;margin-top:9px;
  transition:grid-template-rows .28s cubic-bezier(.45,0,.2,1),margin-top .25s ease}
.cl-todo-inner{min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:5px 6px}
.cl-item.collapsed .cl-todo{grid-template-rows:0fr;margin-top:0}
.cl-arrow{margin-left:auto;align-self:flex-start;background:transparent;border:0;color:var(--grey-2);
  font-size:18px;line-height:1;cursor:pointer;padding:0 4px;transition:transform .2s;margin-top:2px}
.cl-item.collapsed .cl-arrow{transform:rotate(-90deg)}
.cl-todo-item{display:flex;align-items:flex-start;gap:10px;background:none;border:0;padding:3px 0;
  font-size:14px;color:var(--ink);cursor:pointer;text-align:left;font-family:inherit;width:100%}
.cl-todo-l{flex:1;min-width:0;white-space:normal;word-break:break-word;line-height:1.3}
.cl-todo-dot{margin-top:2px}
.cl-todo-item:hover{text-decoration:underline}
.cl-todo-item.has-update{outline:1.5px solid var(--ok);outline-offset:3px;border-radius:6px;animation:pulseBlue 2.2s ease-in-out infinite}
@keyframes pulseBlue{0%,100%{box-shadow:0 0 0 0 rgba(47,109,240,0)}50%{box-shadow:0 0 0 6px rgba(47,109,240,.30)}}
.cl-todo-dot{width:14px;height:14px;border-radius:50%;flex:none;background:transparent;border:2px solid var(--idle);box-sizing:border-box;position:relative}
.cl-todo-dot.hold{border-color:var(--hold)}
.cl-todo-dot.ready{border-color:var(--ready)}
.cl-todo-dot.blocked{border-color:var(--idle)}
.cl-todo-dot.hold{border-color:var(--bypass)}
.cl-todo-dot.hold::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--bypass)}
.cl-todo-dot.rejected{border-color:var(--hold)}
.cl-todo-dot.done{border-color:var(--ok)}
.cl-todo-dot.done::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--ok)}
.cl-sub{font-size:14px;color:var(--grey-2);margin-top:3px}
.cl-sub.waiting{color:var(--hold)}
.cl-time{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;flex:none;margin-left:auto;padding-left:14px}
.ct-ago{font-size:12px;font-weight:800;color:var(--grey-2)}
.ct-sub{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;color:var(--grey-2);margin-top:2px}
.ct-est{font-size:12px;color:#b9bbb2}
.ct-real{font-size:12px;font-weight:800;color:var(--grey-3)}
.src-icon{font-size:13px;font-weight:900;padding:2px 7px;border-radius:4px;background:var(--tan-2);color:#5d5a52;margin-left:7px}
.src-data{background:#cfe3d6;color:#1f5a38}
.src-bypass{background:#e8c987;color:#6a4a0c}
.docpane{padding:18px 24px;background:var(--tan)}
.docpane .ctx{font-size:14px;color:var(--grey-2);margin-bottom:14px}
.doc-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.doc-row{display:flex;align-items:center;gap:10px;font-size:16px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:9px 11px}
.doc-row .fx{color:var(--red);font-weight:900}
.act-row{display:flex;flex-wrap:wrap;gap:8px}
.act-row .btn,.act-row .btn-ghost{padding:8px 12px;font-size:14px;border-radius:6px}

/* sub-process panels */
.sc-sections{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
@media(max-width:1080px){.sc-sections{grid-template-columns:1fr}}
.panel{padding:18px 22px;border-right:1px solid var(--line)}
.panel:last-child{border-right:0}
@media(max-width:1080px){.panel{border-right:0;border-bottom:1px solid var(--line)}}
.panel h3 .sub{font-family:"Lato";font-weight:700;font-size:13px;color:var(--grey-2);margin-left:8px}
.wo-part{display:flex;align-items:center;gap:10px;padding:7px 4px;font-size:15px;border-bottom:1px dashed var(--line)}
.wo-part:last-child{border-bottom:0}
.wo-dot{width:14px;height:14px;border-radius:50%;background:var(--idle);flex:none}
.wo-dot.done{background:var(--ok)}
.round{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:9px}
.round-head{display:flex;align-items:center;justify-content:space-between;font-weight:900;font-size:14px;margin-bottom:9px}
.round-head .rtag{font-size:11px;font-weight:700;color:var(--grey-2)}
.mini3{display:flex;align-items:flex-start}
.mini3 .seg{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;position:relative}
.mini3 .seg::before{content:"";position:absolute;top:7px;left:-50%;width:100%;height:3px;background:var(--line);z-index:0}
.mini3 .seg:first-child::before{display:none}
.mini3 .seg.fill::before{background:var(--ok)}
.mini-dot{width:15px;height:15px;border-radius:50%;background:var(--idle);z-index:1;border:2px solid #fff;box-shadow:0 0 0 1px var(--idle)}
.mini-dot.s-done{background:var(--ok);box-shadow:0 0 0 1px #1f43c9}
.mini-dot.s-active{background:var(--ready);box-shadow:0 0 0 1px #2f7644}
.mini-dot.s-blocked{background:var(--idle)}
.mini-dot.s-late{background:var(--hold);box-shadow:0 0 0 1px #bd9c00}
.mini3 .seg .ml{font-size:11px;color:var(--grey-2);text-align:center}
.add-round{background:#fff;border:1px dashed var(--grey-2);color:var(--grey-2);border-radius:7px;padding:8px;width:100%;font-size:13px;font-weight:700;margin-top:2px}
.add-round:hover{background:var(--tan)}
.dz{cursor:pointer}
.dz.dragover{border-color:var(--ready)!important;color:var(--ready)!important;background:rgba(47,109,240,.10)!important}
.mat-sub{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.4px;color:var(--grey-2);margin:12px 0 7px}
.mat-lane{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:7px;padding:9px 11px;margin-bottom:7px;font-size:14px}
.mat-dot{width:13px;height:13px;border-radius:50%;flex:none;background:var(--idle)}
.mat-dot.s-done{background:var(--ok)}
.mat-dot.s-active{background:var(--ready)}
.mat-dot.s-blocked{background:var(--idle)}
.mat-dot.s-late{background:var(--hold)}
.mat-l{flex:1}
.mat-est{font-size:12px;font-weight:800;color:var(--grey-2)}
.co{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:7px;padding:9px 11px;margin-bottom:8px;font-size:14px}
.co .co-dot{width:13px;height:13px;border-radius:50%;flex:none;background:var(--idle)}
.co .co-dot.proposed{background:var(--warn)}
.co .co-dot.po{background:#5aa6c9}
.co .co-dot.billed{background:var(--ok)}
.co .co-dot.bypass{background:var(--bypass)}
.co .co-d{flex:1;min-width:0}
.co .co-s{font-size:11px;font-weight:900;color:var(--grey-2);text-transform:uppercase}
.co-empty{font-size:13px;color:var(--grey-2);padding:6px 2px}
.co .co-dot.unbilled{background:#fff;border:2.5px solid var(--ok)}

/* task view = panel-styled, right side of the task list */
.taskview{background:#fff}
.taskview .panel{border-right:0}
.taskpanel .ctx{font-size:14px;color:var(--grey-2);margin:-4px 0 14px}
.taskview{padding:12px}
.tv-title{font-family:"Caladea",serif;font-weight:700;font-size:24px;color:var(--grey-3);
  padding:4px 6px 10px;border-bottom:1px solid var(--line);margin-bottom:12px}
.taskview .panel + .panel{border-top:0}
.sub-panel{padding:0;background:#fff;border:1px solid var(--ink);border-radius:10px;
  box-shadow:var(--shadow);margin:0 0 12px;overflow:hidden}
/* Combined task panel.
   - One bordered container with rounded corners.
   - Collapsed: container is just the title — looks like a rounded button.
   - Expanded: the button "drops down" — its border extends to enclose the
     form buttons inside the same rounded shape. The title's bottom edge
     gets a white 1px divider line so the title still reads as the header
     without a hard ink line separating it from the form buttons.
   - Hover the title: red conic-gradient ring spins inside the title (same
     recipe as .stage-dot via wireSwish; pm.js passes speed=2 to slow it).
   - Submissions pool in .task-summaries below the .task-divider. */
.task-panel{display:block;margin:0;
  background:#fff;border:1.5px solid var(--ink);border-radius:10px;
  box-shadow:var(--shadow);overflow:hidden}
.task-panel-h{
  --a1:0deg;--a2:0deg;--swirl:var(--red);
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:14px 22px;
  background:transparent;border:0;
  font-family:"Caladea",serif;font-weight:700;font-size:23px;color:var(--ink);
  cursor:pointer;position:relative;text-align:left;
  transition:color .15s;
}
.task-panel.open .task-panel-h{border-bottom:1px solid #fff}
.task-panel-h::after{
  content:"";position:absolute;inset:0;padding:1.5px;border-radius:8px;
  background:conic-gradient(from 0deg,
    transparent 0deg,
    transparent calc(360deg - var(--a2)),
    var(--swirl) calc(360deg - var(--a2)), var(--swirl) calc(360deg - var(--a1)),
    transparent calc(360deg - var(--a1)), transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
  transition:--a2 var(--d2,.5s) cubic-bezier(.16,.7,.3,1), --a1 var(--d1,.2s) linear;
}
.task-panel-l{flex:1;font:inherit;color:inherit}
.task-panel-caret{font-size:18px;color:var(--grey-2);transition:transform .2s ease;
  display:inline-block;margin-left:10px;line-height:1;transform:rotate(-90deg)}
.task-panel.open .task-panel-caret{transform:rotate(0deg)}
.task-panel-body{display:none;padding:14px 22px}
.task-panel.open .task-panel-body{display:flex;flex-direction:column;gap:10px}
/* Sweep timing inside the task-panel body keeps the regular 0.2s on both
   hover-in and hover-out (0.75× the rest of the app — same as before). */
.task-panel-body .morph.btn-sweep::before{transition:transform .2s cubic-bezier(.45,0,.2,1)}
.task-panel-body .morph.btn-sweep .btn-sweep-l{transition:background-position .2s cubic-bezier(.45,0,.2,1), color .2s ease, transform .2s ease}
/* When the form is closing back into a button, close() temporarily adds
   .no-sweep-anim to the morph. While that class is present:
     - the sweep ::before is invisible (opacity 0) and has no transition, so
       there's no slide-in or slide-out visible during the close, even if the
       cursor happens to be over the morph;
     - the label's color/transform transitions are also disabled so the text
       doesn't briefly fade colors.
   The class is removed ~600ms later; normal hover behavior resumes. */
.morph.no-sweep-anim::before,
.morph.no-sweep-anim:hover::before{opacity:0;transition:none}
.morph.no-sweep-anim .btn-sweep-l,
.morph.no-sweep-anim:hover .btn-sweep-l{color:var(--ink) !important;transition:none}
/* Plain submit button (used for subtasks that don't have a FORM_FIELDS
   schema, e.g. Mark Field Complete / Billings).
   Mimics a closed morph visually so it sits alongside form buttons cleanly. */
.task-plain-btn{
  display:block;width:100%;
  background:transparent;color:var(--ink);
  border:1.5px solid var(--ink);border-radius:6px;
  padding:9px 14px;
  font-family:inherit;font-size:14px;font-weight:800;text-align:center;
  cursor:pointer;
}
.task-panel-body .task-plain-btn.btn-sweep::before{transition:transform .2s cubic-bezier(.45,0,.2,1)}
.task-panel-body .task-plain-btn.btn-sweep .btn-sweep-l{transition:background-position .2s cubic-bezier(.45,0,.2,1), color .2s ease}
.task-divider{height:1px;background:var(--line);margin:14px 6px}
.task-summaries{display:flex;flex-direction:column;gap:10px}
.taskview .sub-panel{border:1px solid var(--ink)}
.taskview .sub-panel + .sub-panel{border-top:1px solid var(--ink)}
.sub-stack{display:flex;flex-direction:column;gap:10px}
.sub-stack .sub-panel{margin:0}
.sub-subhead{font-size:11px;font-weight:800;color:var(--grey-2);text-transform:uppercase;
  letter-spacing:.5px;margin:2px 0 -2px;padding-bottom:4px;border-bottom:1px dashed #d8d8d4}
.sub-head{display:flex;align-items:center;gap:12px;width:100%;background:transparent;border:0;
  padding:14px 22px;cursor:pointer;font-family:inherit;text-align:left}
.sub-head:hover{background:#f4f3f0}
.sub-h{flex:1;font-family:"Caladea",serif;font-weight:700;font-size:23px;color:var(--ink)}
.sub-arrow{color:var(--grey-2);font-size:18px;transition:transform .18s;display:inline-block}
.sub-panel.open .sub-arrow{transform:rotate(90deg)}
.sub-body{display:none;padding:0 22px 14px 22px}
.sub-panel.open .sub-body{display:block}
.sub-acts{display:flex;gap:8px}
.upload-set{display:flex;flex-direction:column;gap:8px}
.upload-row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:7px;padding:8px 11px}
.upload-lbl{flex:none;min-width:54px;color:var(--grey-2);font-weight:700}
.upload-input{flex:1;font-family:inherit;font-size:12px}
.tile-row{display:flex;flex-wrap:wrap;gap:14px}
.tile-cell{display:flex;flex-direction:column;align-items:center;gap:6px}
.tile-name{font-size:11px;font-weight:800;color:var(--grey-2);text-transform:uppercase;letter-spacing:.5px}
.tile{--tile-color:var(--grey-2);
  width:78px;height:78px;
  position:relative;overflow:hidden;isolation:isolate;
  border:1px solid var(--grey-2);border-radius:14px;background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  padding:6px;text-align:center}
.tile.filled{--tile-color:#fff;border-color:var(--ink);background:var(--ink)}
.tile.filled .tile-plus{background-image:url('assets/file.svg');filter:invert(1)}
.gal-tile .tile-plus{background-image:url('assets/image_plus.svg')}
.gal-tile.filled .tile-plus{background-image:url('assets/image.svg')}
.tile-x{
  position:absolute;top:4px;right:4px;z-index:5;
  background:transparent;border:0;color:#fff;
  font-size:18px;font-weight:900;line-height:1;
  width:20px;height:20px;padding:0;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-family:inherit;border-radius:50%;
  transition:background .15s,transform .15s;
}
.tile-x:hover{background:rgba(255,255,255,.18);transform:scale(1.1)}
.tile::before{
  content:"";position:absolute;
  top:-6px;bottom:-6px;left:0;width:140%;
  background:var(--ink);
  transform:translateX(-110%) skewX(-22deg);
  transform-origin:left center;
  transition:transform .15s cubic-bezier(.45,0,.2,1);
  z-index:0;
}
.tile:hover::before,.tile.dragover::before{transform:translateX(-10%) skewX(-22deg)}
.tile-fname{
  position:relative;z-index:1;
  background-image:linear-gradient(112deg, #fff 50%, var(--tile-color) 50%);
  background-size:230% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  transition:background-position .15s cubic-bezier(.45,0,.2,1);
}
.tile-plus{
  display:inline-block;position:relative;z-index:1;
  width:40px;height:40px;font-size:0;line-height:0;
  background-image:url('assets/file_plus.svg');
  background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat;
  transition:filter .15s ease;
}
.tile:hover .tile-plus,.tile.dragover .tile-plus{filter:invert(1)}
.tile:hover .tile-fname,
.tile.dragover .tile-fname{background-position:0 0}
.tile-fname{font-size:11px;font-weight:800;word-break:break-all;line-height:1.15}
.movable-window{position:fixed;top:120px;left:50%;transform:translateX(-50%);
  width:440px;max-width:92vw;max-height:calc(100vh - 40px);background:#fff;border:1px solid var(--line-strong);
  border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.32);z-index:1000;display:none;
  flex-direction:column}
.movable-window.open{display:flex}
.mw-head{display:flex;align-items:center;justify-content:space-between;background:var(--grey-3);color:#fff;
  padding:11px 14px;border-radius:10px 10px 0 0;cursor:move;user-select:none;
  font-family:"Caladea",serif;font-weight:700;font-size:17px}
.mw-close{background:transparent;border:1.5px solid #fff;color:#fff;border-radius:6px;padding:2px 10px;font-weight:900;cursor:pointer}
.mw-head{flex:none}
.mw-body{padding:16px 18px;font-size:14px;color:var(--ink);overflow-y:auto;flex:1 1 auto}
.mw-h{font-family:"Caladea",serif;font-weight:700;font-size:14px;color:var(--ink)}
.mw-subh{font-size:11px;font-weight:700;color:var(--grey-2);letter-spacing:.3px}
/* required marker — a red asterisk next to the label (was the word "required") */
.mw-req{font-style:normal;font-weight:800;font-size:14px;line-height:1;color:var(--red);margin-left:4px}
/* server-stamped fields (Date Submitted to Contracts): grey tag next to the title
   + a greyed, disabled control */
.mw-fos{font-size:11px;font-weight:700;color:var(--grey-2);font-style:italic;margin-left:8px}
.mw-auto{background:#f3f3f0;color:var(--grey-2);cursor:not-allowed}
.mw-actions .btn-ghost{border-radius:22px;padding:8px 18px}
/* reusable diagonal sweep button — same recipe as .vs-titlebtn / .vs-newjob,
   with color variants (-black / -blue / -red) for the sweep panel */
.btn-sweep{position:relative;overflow:hidden;isolation:isolate}
.btn-sweep .btn-sweep-l{
  position:relative;z-index:1;
  display:inline-block;
  /* Wipe the label color in lockstep with the sweep panel (same recipe as
     .vs-titlebtn): a 2-stop gradient clipped to the text, shifted on hover.
     112deg matches the panel's -22deg skew so the color boundary tracks the
     sweep edge across the text instead of fading uniformly. */
  background-image:linear-gradient(112deg, #fff 50%, var(--ink) 50%);
  background-size:230% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  transition:background-position .15s cubic-bezier(.45,0,.2,1), transform .2s ease;
}
/* Excluded from the wipe — role-picker options switch to solid white when
   selected/selecting, so they keep a solid fill (the base :hover rule below
   still flips them white on hover).
   NOTE: morph form buttons + the inline Cancel/Save/Submit USED to be excluded
   here too, but now use the wipe like everything else. Their stateful solid
   colors (the morph label's "Submitted!" blue + the close animation) are
   restored to solid fill by the .morph-label rules further down. */
.role-picker-opt .btn-sweep-l{
  background:none;
  -webkit-text-fill-color:currentColor;
  color:var(--ink);
  transition:color .15s ease, transform .2s ease;
}
.btn-sweep::before{
  content:"";position:absolute;
  top:-6px;bottom:-6px;left:0;width:140%;
  transform:translateX(-110%) skewX(-22deg);
  transform-origin:left center;
  transition:transform .15s cubic-bezier(.45,0,.2,1);
  z-index:0;
}
.btn-sweep:hover::before{transform:translateX(-10%) skewX(-22deg)}
/* color:#fff drives the excluded (solid-fill) labels; background-position
   drives the wipe on everything else. */
.btn-sweep:hover .btn-sweep-l{color:#fff;background-position:0 0}
.btn-sweep-black::before{background:var(--ink)}
.btn-sweep-blue::before{background:var(--ok)}
.btn-sweep-red::before{background:var(--red)}
.btn-sweep-green::before{background:var(--ready)}
.btn-sweep-white::before{background:#fff}
/* White sweep starts with a white label (on a dark bg) and wipes to grey as
   the white panel slides over — reversed gradient vs the default ink->white. */
.btn-sweep-white .btn-sweep-l{background-image:linear-gradient(112deg, var(--grey-2) 50%, #fff 50%)}
/* hover border matches the panel color so the button reads as solid on sweep */
.morph.btn-sweep-black:hover{border-color:var(--ink);color:var(--ink)}
.btn.btn-sweep-blue:hover{border-color:var(--ok);color:var(--ink)}
.btn.btn-sweep-green:hover{border-color:var(--ready);color:var(--ink)}
.btn-ghost.btn-sweep-red:hover{border-color:var(--red);color:var(--ink)}
/* Save button (used in openMovableWindow) — standalone green styling. */
.mw-actions .btn-save{background:transparent;border:1.5px solid var(--ready);color:var(--ready);
  border-radius:6px;padding:8px 18px;font-weight:800;cursor:pointer}
.mw-actions .btn-save:hover{background:var(--ready);color:#fff}
/* unify Submit / Cancel shape and typography */
.inline-acts .btn,.inline-acts .btn-ghost{
  border:1.5px solid var(--ink);
  border-radius:6px;padding:9px 14px;font-size:14px;font-weight:800;
  color:var(--ink);background:transparent;
  min-width:160px;text-align:center;
}

/* morph button: collapsed = a button; open = it expands and becomes the form */
.morph{display:block;cursor:pointer;user-select:none;background:transparent;color:var(--ink);
  border:1.5px solid var(--ink);border-radius:6px;padding:9px 14px;font-family:inherit;
  font-size:14px;font-weight:800;text-align:center;
  transition:padding .32s cubic-bezier(.45,0,.2,1),border-radius .3s ease,
             border-color .25s ease,color .25s ease,text-align .25s ease,background .25s ease}
.morph:hover{border-color:#555;color:#555}
.morph.open{cursor:default;padding:14px 16px;text-align:left;background:#fff;color:var(--ink);
  border-color:var(--line-strong);border-radius:10px}
.morph.open:hover{border-color:var(--line-strong);color:var(--ink)}
.morph-label{display:block;transition:font-size .25s ease,color .25s ease,opacity .3s ease}
.morph-label.submitted{color:var(--ok);font-weight:900}
.morph-label.fade-out,.morph-label.fade-in{opacity:0}
.morph.open .morph-label{font-family:"Caladea",serif;font-size:17px;color:var(--ink);font-weight:700}
.morph.open::before{display:none}
.morph.open .morph-label.btn-sweep-l{color:var(--ink)}
.morph-label.btn-sweep-l.submitted{color:var(--ok)}
/* Restore SOLID fill for the morph label's stateful moments so the wipe's
   transparent text doesn't swallow the color: the "Submitted!" blue flash and
   the close animation. (The open state already opts out of the wipe because
   .btn-sweep is stripped from the morph while it's open.) */
.morph.btn-sweep .morph-label.btn-sweep-l.submitted,
.morph.no-sweep-anim .morph-label.btn-sweep-l{
  background:none;
  -webkit-text-fill-color:currentColor;
}
.morph-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.45,0,.2,1)}
.morph.open .morph-body{grid-template-rows:1fr}
.morph-inner{overflow:hidden;min-height:0;display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.morph.open .morph-inner{padding-top:12px;border-top:1px solid var(--line);margin-top:8px}
.morph-inner > .mw-section,
.morph-inner > .mw-subsection,
.morph-inner > .mw-note,
.morph-inner > .mw-full,
.morph-inner > .inline-acts{grid-column:1 / -1}
.morph-inner label{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:800;color:var(--grey-2)}
/* Thin divider above each section header. Skip it for the section that
   sits immediately after the NEW SUBMISSION pill (no need to separate
   from the pill). */
.morph-inner > .mw-section{border-top:1px solid var(--line);padding-top:10px;margin-top:6px}
.morph-inner > .new-sub-pill + .mw-section{border-top:0;padding-top:0;margin-top:6px}
.morph-inner .mw-section{font-family:"Caladea",serif;font-weight:700;font-size:17px;color:var(--grey-3);
  border-left:3px solid var(--red);padding-left:10px;margin:14px 0 6px}
.morph-inner .mw-section:first-child{margin-top:4px}
.morph-inner .mw-subsection{font-size:11px;font-weight:800;color:var(--grey-2);text-transform:uppercase;
  letter-spacing:.5px;margin:10px 0 -2px;padding-bottom:4px;border-bottom:1px dashed #d8d8d4}
.morph-inner .mw-note{font-size:12px;font-weight:800;color:var(--red);letter-spacing:.4px;
  margin:-4px 0 4px;text-transform:uppercase}
/* Read-only TRUE/FALSE readout (the 'flag' field type). */
.morph-inner .mw-flag{font-size:15px;font-weight:900;letter-spacing:1px;margin:2px 0 4px}
.morph-inner .mw-flag-true{color:var(--ready)}
.morph-inner .mw-flag-false{color:var(--red)}
/* NEW SUBMISSION pill at the top of every morph form body. Rounded blue
   chip, bold blue text, all caps. Sits between the form title and the
   first section. justify-self:start prevents it from stretching to fill
   the morph-inner grid row width via .mw-full. */
.morph-inner .new-sub-pill{
  justify-self:start;
  background:rgba(47,109,240,.12);
  color:var(--ok);
  border:1.5px solid var(--ok);
  border-radius:999px;
  padding:5px 16px;
  font-size:12px;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
  margin-bottom:4px;
}
.morph-inner .mw-fld-sub{font-size:12px;font-weight:600;color:var(--grey-2);
  font-style:italic;letter-spacing:0;margin-top:-2px;text-transform:none}
.morph-inner .mw-check .mw-fld-sub{margin:2px 0 0 24px;display:block}
.morph-inner .mw-file-field{cursor:pointer}
/* Compact multi-file rows: each cell sized to the tile width (78px) so the
   tiles sit shoulder-to-shoulder. flex-wrap lets rows fill the available
   width (the run-count classes -2 / -3 are kept on the container in case we
   want to force a column count later, but the default packs tight). */
/* CSS grid layout fills as many 96px columns as the container width allows
   and auto-flows files into rows. Bottom border on each cell creates a
   continuous horizontal line below each row (rows align on grid). */
.morph-inner .mw-file-grid{display:grid;grid-template-columns:repeat(auto-fill, 96px);
  column-gap:6px;row-gap:0;justify-content:start;align-items:stretch}
.morph-inner .mw-file-grid .mw-file-field{width:96px;
  padding:0 0 10px;margin-bottom:10px;
  border-bottom:1px solid var(--line)}
.morph-inner .mw-file-grid .mw-file-field > span:first-child{
  display:block;width:96px;word-wrap:break-word;overflow-wrap:break-word;
  line-height:1.2;
}
/* Push the tile to the bottom of its cell so all tiles in a row line up,
   regardless of how many lines the label above them wraps to. */
.morph-inner .mw-file-grid .mw-file-tile{margin-top:auto}
.morph-inner .mw-file-tile{width:96px;height:96px;margin-top:6px;align-self:flex-start}
.morph-inner input,.morph-inner textarea,.morph-inner select{font-family:inherit;font-size:16px;
  border:1px solid #d8d8d4;border-radius:6px;padding:9px 11px;color:var(--ink);background:#fff;
  transition:border-color .15s}
.morph-inner input:focus,.morph-inner textarea:focus,.morph-inner select:focus{
  outline:none;border-color:var(--ok)}
.morph-inner textarea{min-height:78px;resize:vertical}
.morph-inner .mw-check{flex-direction:row;align-items:center;gap:8px}
.morph-inner .mw-check input{width:auto}
.inline-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}
.inline-wrap{display:flex;flex-direction:column;gap:10px}
/* a form row: the form (flex:1) with its "+" add-to-todo control on the right */
.inline-formrow{display:flex;align-items:flex-start;gap:8px}
.inline-formrow > *:first-child{flex:1 1 auto;min-width:0}
.inline-formrow + .inline-formrow{margin-top:10px}
.atm-host{position:relative;flex:none;display:inline-flex}
/* invisible stand-in for a "+" so a form with no add-task button still reserves
   the same right-edge footprint (keeps its button aligned with the "+" rows). */
.atm-host-ghost{visibility:hidden;pointer-events:none}
/* the "+" matches the adjacent form button's height (same 9px vertical padding +
   1.5px border) and uses the btn-sweep diagonal sweep on hover (black panel; the
   icon flips white). The .btn-sweep base supplies position/overflow + the ::before. */
.atm-plus{flex:none;display:inline-flex;align-items:center;justify-content:center;padding:9px;
  border:1.5px solid var(--ink);border-radius:6px;background:transparent;cursor:pointer}
/* The "+" icon wipes ink->white in lockstep with the black sweep panel, same
   recipe as the text labels: the plus.svg is used as a MASK and the 2-stop
   112deg gradient (clipped to the glyph) is slid on hover. 0.2s + same easing
   as the task-panel morph buttons beside it so the row sweeps uniformly. */
.atm-plus-icn{width:17px;height:17px;display:block;position:relative;z-index:1;
  /* plus.svg inlined as a data-URI mask so it works under file:// too (an
     external SVG mask fails to load there and masks the icon out entirely). */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 1H6V6L1 6V10H6V15H10V10H15V6L10 6V1Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 1H6V6L1 6V10H6V15H10V10H15V6L10 6V1Z'/%3E%3C/svg%3E") center / contain no-repeat;
  background-image:linear-gradient(112deg, #fff 50%, var(--ink) 50%);
  background-size:230% 100%;
  background-position:100% 0;
  transition:background-position .2s cubic-bezier(.45,0,.2,1)}
.atm-plus:hover{border-color:var(--ink)}
.atm-plus:hover .atm-plus-icn{background-position:0 0}
.task-panel-body .atm-plus.btn-sweep::before{transition:transform .2s cubic-bezier(.45,0,.2,1)}
/* popover opens above the "+" */
.atm-pop{display:none;position:absolute;bottom:calc(100% + 8px);right:0;z-index:40;
  background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.22);
  padding:8px;gap:8px;align-items:center;white-space:nowrap}
.atm-pop.open{display:flex}
.atm-prio{display:inline-flex;gap:4px}
.atm-p{width:28px;height:28px;border:1.5px solid var(--line-strong);border-radius:6px;background:#fff;
  color:var(--grey-3);font-family:inherit;font-weight:800;font-size:13px;cursor:pointer;
  transition:background .12s,color .12s,border-color .12s}
.atm-p:hover{color:var(--red)}
.atm-p.on{background:var(--ink);border-color:var(--ink);color:#fff}
.atm-date{border:1.5px solid var(--line-strong);border-radius:6px;padding:5px 8px;font-family:inherit;font-size:13px;color:var(--ink)}
/* the in-field calendar icon = a rounded-square bordered button that opens the picker */
.atm-date::-webkit-calendar-picker-indicator{border:1.5px solid var(--ink);border-radius:5px;padding:2px;cursor:pointer}
/* Add task: black border + black text at rest; the btn-sweep-red panel slides in on
   hover (red fill), the border goes red and the label wipes white. */
.atm-add{margin-left:4px;border:1.5px solid var(--ink);background:transparent;border-radius:6px;
  padding:7px 13px;font-family:inherit;font-weight:800;font-size:13px;cursor:pointer}
.atm-add:hover{border-color:var(--red)}
/* the ring that sweeps around the cursor while hovering the "+" before the menu opens */
@property --atm-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.atm-ring{position:fixed;z-index:300;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;pointer-events:none;
  --atm-a:0deg;background:conic-gradient(var(--red) var(--atm-a), rgba(205,22,63,.18) var(--atm-a));
  -webkit-mask:radial-gradient(transparent 10px,#000 11px);mask:radial-gradient(transparent 10px,#000 11px);
  animation:atm-ring-sweep .2s linear forwards}
@keyframes atm-ring-sweep{to{--atm-a:360deg}}
.sub-summary{display:grid;grid-template-columns:1fr 1fr;gap:14px;border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.05);
  cursor:pointer;transition:border-color .12s}
.sub-summary:hover{border-color:var(--grey-2)}
/* Compact section is ALWAYS visible. When expanded, the .sum-expanded block
   drops in *below* the compact section (additive — the compact info doesn't
   move or get replaced). The right column (Updates + Chat) shows only when
   expanded; collapsed mode is 1-column. */
.sub-summary.collapsed{grid-template-columns:1fr}
.sub-summary.collapsed .sum-expanded{display:none}
.sub-summary.collapsed .sum-right{display:none}
.sub-summary:not(.collapsed) .sum-expanded{
  margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);
}
/* Right side of the expanded card is itself split: Updates (left), Chat (right). */
.sum-right{display:grid;grid-template-columns:1fr 1fr;gap:14px;
  border-left:1px dashed var(--line);padding-left:14px}
.sum-r-col + .sum-r-col{border-left:1px dashed var(--line);padding-left:14px}
.sum-r-placeholder{font-size:13px;color:var(--grey-2);font-style:italic;padding:8px 0}
/* Mock file buttons in the compact summary view — show name with icon,
   visually like a button but disabled (not yet clickable). */
.sum-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sum-file-mock{display:inline-flex;align-items:center;gap:6px;
  background:#fafaf6;border:1.5px solid var(--ink);border-radius:7px;
  padding:6px 12px;font-family:inherit;font-size:12px;font-weight:700;
  color:var(--ink);cursor:not-allowed;opacity:.85}
.sum-file-icn{font-size:14px}
.sum-file-nm{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Clickable file chip (package item cards) — same look as .sum-file-mock but live. */
.sum-file{display:inline-flex;align-items:center;gap:6px;
  background:#fff;border:1.5px solid var(--ink);border-radius:7px;
  padding:6px 12px;font-family:inherit;font-size:12px;font-weight:700;
  color:var(--ink);cursor:pointer;transition:border-color .15s,color .15s}
.sum-file:hover{border-color:var(--red);color:var(--red)}
.sum-left,.sum-right{min-width:0}
.sum-right{border-left:1px dashed var(--line);padding-left:14px}
.sum-r-h{font-size:12px;font-weight:800;color:var(--grey-2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}
.sum-upd{font-size:13px;color:var(--ink);padding:6px 0;border-bottom:1px dashed var(--line)}
.sum-upd:last-child{border-bottom:0}
.sum-upd-t{font-size:10px;color:var(--grey-2);margin-top:2px}
.sum-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.sum-head-l{font-weight:800;font-size:14px;color:var(--ok)}
.sum-edit{background:transparent;border:1.5px solid var(--ink);border-radius:6px;
  padding:4px 14px;font-family:inherit;font-size:12px;font-weight:800;color:var(--ink);
  cursor:pointer;flex:0 0 auto;line-height:1.25}
.sum-edit.btn-sweep:hover{border-color:var(--ink);color:var(--ink)}
.sum-row{display:grid;grid-template-columns:110px 1fr;gap:8px;padding:4px 0;font-size:13px;
  border-bottom:1px dashed var(--line)}
.sum-row:last-of-type{border-bottom:0}
.sum-k{color:var(--grey-2);font-weight:700}
.sum-v{color:var(--ink);word-break:break-word;white-space:pre-wrap}
.sum-foot{font-size:11px;color:var(--grey-2);margin-top:8px}
.sum-ago{color:var(--grey-2);margin-left:6px}
/* NEXT STEPS #2 — package-form item cards (real submitted project_items).
   One pooled column per form (so a form re-render doesn't clobber siblings),
   a neutral status pill, and the "View on Monday" deep link (hidden until the
   push layer sets item.monday.url). */
.pkg-summaries{display:flex;flex-direction:column;gap:10px}
.sum-status{font-size:11px;font-weight:800;padding:2px 9px;border-radius:20px;
  background:var(--grey-1,#f1f1ee);color:var(--grey-3,#383935);text-transform:capitalize;
  flex:0 0 auto;white-space:nowrap}
.sum-monday{display:inline-block;margin-top:10px;font:700 12px Lato,sans-serif;
  color:var(--red);text-decoration:none}
.sum-monday:hover{text-decoration:underline}
/* ---------- Messages area (NEXT STEPS #4) — hangs off the card bottom ---------- */
.msg-area{margin-top:12px;border-top:1px solid var(--line);
  /* pull to the card edges so it reads as an attached footer, not inset body */
  margin-left:-14px;margin-right:-14px;margin-bottom:-14px;
  padding:0 14px;background:rgba(0,0,0,0.015);border-radius:0 0 11px 11px}
.msg-bar{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;
  padding:10px 0;cursor:pointer;font:800 12px Lato,sans-serif;color:var(--grey-2);
  text-transform:uppercase;letter-spacing:.5px}
.msg-bar-l{flex:0 0 auto}
.msg-count{flex:0 0 auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--red);color:#fff;font-size:11px;font-weight:800;display:inline-flex;
  align-items:center;justify-content:center}
.msg-count:empty{display:none}
.msg-caret{margin-left:auto;transition:transform .15s}
.msg-area.open .msg-caret{transform:rotate(180deg)}
.msg-body{display:none;padding-bottom:12px}
.msg-area.open .msg-body{display:block}
.msg-thread{display:flex;flex-direction:column;gap:8px;max-height:240px;overflow-y:auto;
  padding:4px 0 10px}
.msg-empty{font:600 12px Lato,sans-serif;color:var(--grey-2);font-style:italic;padding:6px 0}
.msg-row{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--line);
  border-radius:9px;padding:7px 10px;max-width:86%;align-self:flex-start}
.msg-row.mine{align-self:flex-end;background:var(--tan);border-color:var(--tan-2)}
.msg-meta{display:flex;gap:8px;align-items:baseline}
.msg-author{font:800 12px Lato,sans-serif;color:var(--ink)}
.msg-time{font:600 11px Lato,sans-serif;color:var(--grey-2)}
.msg-text{font:500 13px/1.35 Lato,sans-serif;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.msg-file{margin-top:3px;align-self:flex-start;background:none;border:0;padding:0;cursor:pointer;
  font:700 12px Lato,sans-serif;color:var(--red)}
.msg-file:hover{text-decoration:underline}
.msg-composer{display:flex;gap:8px;align-items:flex-end}
.msg-input{flex:1 1 auto;resize:vertical;min-height:38px;max-height:120px;
  font-family:inherit;font-size:13px;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:8px;padding:9px 11px;transition:border-color .15s}
.msg-input:focus{outline:none;border-color:var(--ok)}
.msg-send{flex:0 0 auto;background:transparent;border:2px solid var(--ink);color:var(--ink);
  border-radius:8px;padding:8px 18px;font:800 13px Lato,sans-serif;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s}
.msg-send:hover{border-color:var(--red);background:var(--red);color:#fff}
/* Optimistic (not yet server-confirmed) message — local-* id. Subtle fade until
   the package merge swaps in the real row. */
.msg-row.msg-local{opacity:.78}
.mw-form{display:flex;flex-direction:column;gap:11px}
.mw-form label{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:800;color:var(--grey-2)}
.mw-form input,.mw-form textarea,.mw-form select{font-family:inherit;font-size:16px;border:1px solid #d8d8d4;border-radius:6px;padding:9px 11px;color:var(--ink);background:#fff;transition:border-color .15s}
.mw-form input:focus,.mw-form textarea:focus,.mw-form select:focus{outline:none;border-color:var(--ok)}
.mw-form textarea{min-height:78px;resize:vertical}
.mw-check{flex-direction:row!important;align-items:center;gap:8px}
.mw-check input{width:auto}
.mw-actions{display:flex;gap:8px;margin-top:10px;justify-content:flex-end}
.trk-item{display:flex;align-items:flex-start;gap:10px;padding:7px 4px;font-size:14px;border-bottom:1px dashed var(--line)}
.trk-item:last-child{border-bottom:0}
.trk-dot{width:13px;height:13px;border-radius:50%;flex:none;margin-top:3px;background:var(--idle)}
.trk-dot.s-done{background:var(--ok)}
.trk-dot.s-await{background:var(--hold)}
.trk-dot.s-blocked{background:var(--idle)}
.trk-l{flex:1}

/* bottom: 5 boxes */
.pbox-wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:16px 24px;border-top:1px solid var(--line);background:#fff}
@media(max-width:1180px){.pbox-wrap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.pbox-wrap{grid-template-columns:1fr}}
.pbox{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:9px;padding:12px 13px;background:#fff}
.pbox-head{display:flex;justify-content:space-between;align-items:baseline;font-weight:800;font-size:14px;color:var(--grey-3)}
.pbox-head span{font-size:13px;color:var(--grey-2)}
.pbox-track{height:7px;background:var(--line);border-radius:5px;overflow:hidden}
.pbox-fill{height:100%;background:var(--ready);border-radius:5px;transition:width .25s}
.pbox-fill.full{background:var(--ok)}
.pbox-fill.zero{background:transparent}
.pbox-data{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--grey-2)}
.pbox-est{font-size:12px;display:flex;flex-direction:column;gap:2px}
.pbox-est .c{color:#b9bbb2;font-weight:800;margin-right:5px}
.pbox-est .a{color:var(--grey-3);font-weight:800;margin-right:5px}
.pbox-actions{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding-top:4px}
.pbx-btn{background:transparent;border:1.5px dashed var(--grey-2);color:var(--grey-2);border-radius:7px;padding:7px;font-size:12px;font-weight:800;cursor:pointer}
.pbx-btn:hover{border-color:#3f9d5a;color:#3f9d5a}

.sc-foot{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:15px 24px;background:var(--grey-1);color:#fff}
.est{display:flex;align-items:center;gap:8px;font-size:16px}
.est b{font-size:18px}
.est .calc{color:#bfe6cd}
.est .man{color:#ececec}
.est-sep{width:1px;height:24px;background:#5c5d56}
.note-field{flex:1;min-width:240px;display:flex;align-items:center;gap:9px;font-size:16px;color:#f6dca0}
.note-field .ico{color:var(--warn)}
.dp-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--idle);font-size:18px}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--grey-3);color:#fff;padding:12px 22px;border-radius:8px;font-size:17px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:all .22s;border-left:4px solid var(--red);max-width:560px}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- mapping page ---------- */
.map-page{max-width:1100px;margin:0 auto;padding:26px 30px}
.map-toolbar{display:flex;align-items:center;gap:18px;margin:16px 0;color:var(--ink)}
.map-toolbar select{background:#fff;color:var(--ink);border:1px solid var(--line-strong);border-radius:6px;padding:8px 11px;font-family:inherit;font-size:15px}
.map-dir{color:var(--grey-2);font-size:14px}
.map-table{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.map-row{display:grid;grid-template-columns:1fr 60px 1fr 120px;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);font-size:16px}
.map-row.head{background:var(--grey-3);color:#fff;font-family:"Caladea",serif;font-weight:700}
.map-row:last-child{border-bottom:0}
.map-arrow{text-align:center;color:var(--red);font-weight:900;font-size:18px}
.map-tag{font-size:13px;font-weight:900;padding:3px 9px;border-radius:20px;text-align:center}
.map-tag.ok{background:#d6e9dd;color:#1f5a38}
.map-tag.ro{background:var(--tan-2);color:#5d5a52}
.map-tag.conflict{background:var(--red-2);color:#fff}

/* ---------- PO & Receiving (Materials sub-panel) ---------- */
.po-recv{display:flex;flex-direction:column;gap:2px;padding:6px 0 4px}
.po-row{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:8px 0;font-size:13px;border-bottom:1px dashed var(--line)}
.po-row:last-of-type{border-bottom:0}
.po-k{font-weight:800;color:var(--grey-2);text-transform:uppercase;font-size:11px;letter-spacing:.4px;align-self:center}
.po-v{color:var(--ink);word-break:break-word}
.po-status-row{display:flex;gap:18px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.po-status{display:flex;align-items:center;gap:8px}
.po-status-l{font-weight:800;font-size:11px;color:var(--grey-2);text-transform:uppercase;letter-spacing:.4px}
.po-status-v{padding:3px 12px;border-radius:20px;font-size:12px;font-weight:800;text-transform:capitalize}
.po-status-v.done{background:#cfe3d6;color:#1f5a38;border:1px solid #95c6a9}
.po-status-v.partial{background:#fff0c4;color:#7a5410;border:1px solid #e8c987}
.po-status-v.pending{background:#eee;color:var(--grey-2);border:1px solid #d4d4d0}

/* ---------- RFIs (Create + cards) ---------- */
.rfi-create{display:flex;flex-direction:column;gap:10px;padding:6px 0 4px}
.rfi-upload{--tile-color:var(--grey-2);
  display:flex;align-items:center;justify-content:center;gap:10px;
  position:relative;overflow:hidden;isolation:isolate;
  border:1px solid var(--grey-2);border-radius:8px;
  padding:14px 16px;background:#fff;cursor:pointer}
.rfi-upload.filled{--tile-color:var(--ok);border-color:var(--ok);background:#eaf5ee}
.rfi-upload::before{
  content:"";position:absolute;
  top:-6px;bottom:-6px;left:0;width:140%;
  background:var(--ink);
  transform:translateX(-110%) skewX(-22deg);
  transform-origin:left center;
  transition:transform .15s cubic-bezier(.45,0,.2,1);
  z-index:0;
}
.rfi-upload:hover::before,.rfi-upload.dragover::before{transform:translateX(-10%) skewX(-22deg)}
.rfi-upload-icon,.rfi-upload-text{
  position:relative;z-index:1;
  background-image:linear-gradient(112deg, #fff 50%, var(--tile-color) 50%);
  background-size:230% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  transition:background-position .15s cubic-bezier(.45,0,.2,1);
}
.rfi-upload:hover .rfi-upload-icon,.rfi-upload:hover .rfi-upload-text,
.rfi-upload.dragover .rfi-upload-icon,.rfi-upload.dragover .rfi-upload-text{background-position:0 0}
.rfi-upload-icon{font-size:20px;line-height:1}
.rfi-upload-text{font-size:13px;font-weight:700;word-break:break-all}
.rfi-create-btn{align-self:flex-start;padding:9px 18px}
.rfi-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:11px;margin-top:10px}
.rfi-head{display:flex;align-items:center;gap:12px}
.rfi-id{font-weight:900;font-size:14px;color:var(--ink);flex:none}
.rfi-subject-input{flex:1;min-width:0;font-family:inherit;font-size:14px;font-weight:700;
  color:var(--grey-3);border:1px solid transparent;border-radius:6px;padding:5px 8px;background:transparent}
.rfi-subject-input:hover{border-color:var(--line)}
.rfi-subject-input:focus{outline:none;border-color:var(--ok);background:#fff}
select.rfi-status{padding:3px 26px 3px 12px;border-radius:20px;font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.4px;font-family:inherit;cursor:pointer;border:1px solid var(--line)}
select.rfi-status.open{background:#fff0c4;color:#7a5410;border-color:#e8c987}
select.rfi-status.answered{background:#cfe3d6;color:#1f5a38;border-color:#95c6a9}
select.rfi-status.closed{background:#eee;color:var(--grey-2);border-color:#d4d4d0}
.rfi-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.rfi-field{display:flex;flex-direction:column;gap:4px}
.rfi-k{font-size:11px;font-weight:800;color:var(--grey-2);text-transform:uppercase;letter-spacing:.4px}
.rfi-input{font-family:inherit;font-size:13px;border:1px solid var(--line);border-radius:6px;padding:6px 9px;color:var(--ink);background:#fff}
.rfi-input:focus{outline:none;border-color:var(--ok)}
.rfi-attach{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;padding-top:8px;border-top:1px dashed var(--line)}
.rfi-att-l{font-weight:800;color:var(--grey-2);font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.rfi-att-item{background:var(--tan);color:#7a5410;padding:3px 9px;border-radius:5px;font-size:12px;font-weight:700;border:1px solid var(--tan-2)}
.rfi-responses{padding-top:8px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:7px}
.rfi-resp-h{font-size:11px;font-weight:800;color:var(--grey-2);text-transform:uppercase;letter-spacing:.4px}
.rfi-resp{background:#f9f7f1;border-left:3px solid var(--ok);border-radius:0 6px 6px 0;padding:8px 11px}
.rfi-resp-meta{font-size:11px;font-weight:700;color:var(--grey-2);margin-bottom:3px}
.rfi-resp-text{font-size:13px;color:var(--ink);white-space:pre-wrap;line-height:1.4}
.rfi-resp-empty{font-size:12px;color:var(--grey-2);font-style:italic;padding:2px 0}
.rfi-add-resp{align-self:flex-start;border-radius:18px;padding:6px 14px;font-size:12px;font-weight:700;margin-top:2px}

/* ---------- custom scrollbars (dark grey long pill) ---------- */
html,body{scrollbar-width:auto;scrollbar-color:var(--grey-2) transparent}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar{width:14px !important;height:14px !important;background:transparent}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track{
  background:rgba(74,75,70,.15) !important;
  border-radius:999px !important;
  margin:6px 2px !important;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb{
  background:var(--grey-2) !important;
  border-radius:999px !important;
  min-height:80px;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover{background:var(--grey-3) !important}
*::-webkit-scrollbar-thumb:active{background:var(--ink) !important}
*::-webkit-scrollbar-corner{background:transparent}

.bar-note-input{scrollbar-width:auto;scrollbar-color:var(--grey-2) transparent}
.bar-note-input::-webkit-scrollbar{width:10px !important;height:10px !important}
.bar-note-input::-webkit-scrollbar-track{
  background:rgba(74,75,70,.12) !important;
  border-radius:999px !important;
  margin:4px 2px !important;
}
.bar-note-input::-webkit-scrollbar-thumb{
  background:var(--grey-2) !important;
  border-radius:999px !important;
  min-height:30px;
}
.bar-note-input::-webkit-scrollbar-thumb:hover{background:var(--grey-3) !important}

/* ---------- Login page ---------- */
/* Login page only — body overrides for full-screen splash */
body[data-page="login"]{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  background:#f0eee8;
  position:relative;
  overflow:hidden;
}
body[data-page="login"] html,body[data-page="login"]{overflow:hidden}
.bg{
  position:fixed;inset:0;z-index:-1;
  background:#f0eee8 url("assets/gate.png") center bottom / cover no-repeat;
}
/* full-screen diagonal RED sweep — carries the Crusader shield in the center.
   200vw wide so the panel's midpoint aligns with the viewport's midpoint when
   transformed to its final position. */
.screen-sweep{
  position:fixed;
  top:-50vh;bottom:-50vh;
  left:0;width:200vw;
  background:var(--red);
  z-index:1000;
  transform:translateX(-120%) skewX(-22deg);
  transform-origin:left center;
  transition:transform .55s linear;
  pointer-events:none;
  will-change:transform;
}
.screen-sweep.active{transform:translateX(-25%) skewX(-22deg)}
/* Shield sits fixed at viewport center. The wrapper clips it from the right
   so the shield is gradually "uncovered" in sync with the red sweep — at any
   moment, only the portion of the shield that the sweep has already covered
   is visible. */
.sweep-shield-wrap{
  position:fixed;inset:0;
  z-index:1001;
  pointer-events:none;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .55s linear;
}
.sweep-shield-wrap.active{clip-path:inset(0 0 0 0)}
.sweep-shield{
  position:absolute;
  /* 50vw / 50vh anchors to the visual viewport so the shield's pixel x/y
     match pm.html's intro shield exactly, regardless of scrollbar width
     differences between the two pages. */
  top:50vh;left:50vw;
  width:340px;height:340px;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 8px 24px rgba(0,0,0,0.25));
}
/* Fake scrollbar — slides in from the right at the start of the red sweep so
   the scrollbar column is reserved by the time we redirect to pm.html and
   the layout doesn't shift. Classic Windows-style: dark grey column, lighter
   thumb near the top, small chevron carets at top and bottom. 10px wide. */
.fake-scrollbar{
  position:fixed;
  top:0;right:0;bottom:0;
  width:17px;
  z-index:1100;
  transform:translateX(80px);
  transition:transform .25s cubic-bezier(.25,.7,.25,1);
  pointer-events:none;
  display:flex;
  flex-direction:column;
  background:#383935;
}
.fake-scrollbar.in{transform:translateX(0)}
.fake-scrollbar-btn{
  flex:0 0 17px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#FFFFFF;
}
.fake-scrollbar-btn::before{
  content:"";
  width:6px;height:6px;
  border-top:1.5px solid #383935;
  border-right:1.5px solid #383935;
  filter:drop-shadow(0 1px 1px #383935);
}
.fake-scrollbar-up::before{transform:translateY(1px) rotate(-45deg)}
.fake-scrollbar-down::before{transform:translateY(-1px) rotate(135deg)}
.fake-scrollbar-track{
  flex:1;
  position:relative;
}
.fake-scrollbar-thumb{
  position:absolute;
  left:0;right:0;
  bottom:0;
  height:46%;
  min-height:80px;
  background:#FFFFFF;
}
.card-frame{
  position:relative;
  width:100%;max-width:440px;margin:0 24px;
}
.login-card{
  position:relative;
  width:100%;
  background:rgba(255,255,255,0.5);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  border:1px solid rgba(28,28,26,0.12);
  border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.08);
  padding:45px 44px 36px;
  overflow:hidden;
  transform-origin:50% 100%;
  clip-path:inset(0 0 0 0);
  transition:clip-path .175s cubic-bezier(0,0,.35,1),
             transform .225s cubic-bezier(0,0,.35,1);
}
/* red bar — separate element so it can outlive the card's vertical collapse */
.red-bar{
  position:absolute;left:0;right:0;
  top:0;height:5px;background:var(--red);
  z-index:5;
  border-radius:14px 14px 0 0;
  transform-origin:50% 50%;
  transition:top .175s cubic-bezier(0,0,.35,1),
             border-radius .175s,
             transform .2s cubic-bezier(0,0,.35,1);
}
/* Phase 1 (slide, 175ms, ease-out): red bar drops to bottom, card clip-path shrinks from top */
.card-frame.slide .login-card{clip-path:inset(calc(100% - 5px) 0 0 0)}
.card-frame.slide .red-bar{
  top:calc(100% - 5px);
  border-radius:0 0 14px 14px;
}
/* Phase 2 (collapse, 225ms, ease-out): card scaleY(0) — red bar survives as sibling */
.card-frame.collapse .login-card{transform:scaleY(0)}
/* Phase 3 (collapseH, 200ms, ease-out): red bar squeezes horizontally to a point and disappears */
.card-frame.collapseH .red-bar{transform:scaleX(0)}
/* Login page brand-row override — login uses a vertically-stacked layout */
body[data-page="login"] .brand-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:6px}
body[data-page="login"] .brand-row .brand-logo{
  position:static;
  width:62px;height:62px;object-fit:contain;
  transform:none;
}
.brand-name{
  font-family:"Caladea",Georgia,serif;font-weight:700;
  font-size:30px;letter-spacing:2px;color:var(--grey-3);
}
.brand-name .brand-pm{
  font-size:34px;color:var(--red);letter-spacing:1px;margin-left:4px;
}
/* ---------- New Job popup (create-job modal; login/role-picker aesthetic) ---------- */
.njp-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.35);z-index:199}
.njp{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:200}
.njp-card{position:relative;background:rgba(255,255,255,0.92);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  border:1px solid rgba(28,28,26,0.18);border-radius:18px;
  box-shadow:0 30px 70px rgba(0,0,0,0.30),0 6px 16px rgba(0,0,0,0.10);
  padding:40px 54px 44px;min-width:480px;overflow:hidden}
.njp-bar{position:absolute;left:0;right:0;top:0;height:5px;background:var(--red);
  border-radius:18px 18px 0 0;z-index:5}
.njp-title{text-align:center;font-family:"Caladea",serif;font-weight:700;font-size:26px;
  color:var(--ink);margin:0 0 4px}
.njp-sub{text-align:center;font-size:12px;font-weight:800;color:var(--grey-3);
  text-transform:uppercase;letter-spacing:1px;margin-bottom:20px}
.njp-card .field{margin-bottom:4px}
.njp-card .field input{width:100%;box-sizing:border-box;text-align:center}
.njp-card .field input::placeholder{text-align:center}
.njp-err{min-height:16px;color:var(--red);font-size:12px;font-weight:700;
  text-align:center;margin:6px 0 6px}
/* Both buttons scoped under .njp-actions so they beat .login-btn (defined LATER
   in this file) on tied specificity — otherwise login-btn's margin-top/width win
   and the pair misaligns. align-items:stretch + identical box (padding 13px 0,
   font 20px, 2px border) => equal height. */
.njp-actions{display:flex;gap:10px;margin-top:6px;align-items:stretch}
.njp-actions .njp-cancel{flex:1 1 0;background:transparent;border:2px solid var(--grey-3);
  color:var(--grey-3);border-radius:8px;padding:13px 0;margin:0;
  font-family:"Caladea",serif;font-weight:700;font-size:20px;line-height:1.2;cursor:pointer;
  transition:border-color .15s,color .15s}
.njp-actions .njp-cancel:hover{border-color:var(--red);color:var(--red)}
.njp-actions .njp-create{flex:1 1 0;width:auto;margin:0;padding:13px 0;line-height:1.2}
.njp-actions .njp-create .login-btn-l{display:inline-block}   /* inline-block so the confirm slide can transform */
/* armed = the "Confirm Create" state: pin the red sweep filled (mirrors hover). */
.njp-actions .njp-create.armed::before{transform:translateX(-10%) skewX(-22deg)}
.njp-actions .njp-create.armed .login-btn-l{color:#fff}
.njp-actions .njp-create.armed{border-color:var(--red)}

.subtitle{
  text-align:center;font-size:13px;font-weight:700;color:var(--grey-3);
  letter-spacing:1.2px;text-transform:uppercase;margin-bottom:26px;
}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.field label{
  font-size:12px;font-weight:800;color:#383935;
  text-transform:uppercase;letter-spacing:.5px;
}
.field input, .field select{
  font-family:inherit;font-size:15px;color:var(--ink);
  background:#fff;border:1.5px solid #d8d8d4;border-radius:7px;
  padding:11px 13px;
  transition:border-color .15s;
}
.field input:focus, .field select:focus{
  outline:none;border-color:var(--ok);
}
.login-btn{
  position:relative;overflow:hidden;isolation:isolate;
  width:100%;display:block;
  background:transparent;border:2px solid var(--ink);color:var(--ink);
  border-radius:8px;padding:13px 0;margin-top:17px;
  font-family:"Caladea",serif;font-weight:700;font-size:20px;letter-spacing:1px;
  cursor:pointer;text-align:center;white-space:nowrap;
  transition:color .15s ease;
}
.login-btn .login-btn-l{
  position:relative;z-index:1;
  transition:color .15s ease;
}
.login-btn::before{
  content:"";position:absolute;
  top:-6px;bottom:-6px;left:0;width:140%;
  background:var(--red);
  transform:translateX(-110%) skewX(-22deg);
  transform-origin:left center;
  transition:transform .2s cubic-bezier(.45,0,.2,1);
  z-index:0;
}
.login-btn:hover::before{transform:translateX(-10%) skewX(-22deg)}
.login-btn:hover .login-btn-l{color:#fff}
.login-btn:hover{border-color:var(--red)}
.foot{
  text-align:center;font-size:11px;color:#6a6f67;
  margin-top:17px;letter-spacing:.4px;
}

/* ---------- Intro overlay ---------- */
/* Intro overlay — mirrors the end state of login.html's sweep, then retreats
   to the left, revealing the dashboard from the right. */
.intro-sweep{
  position:fixed;
  top:-50vh;bottom:-50vh;
  left:0;width:200vw;
  background:#cd163f;
  z-index:10000;
  transform:translateX(-25%) skewX(-22deg);
  transform-origin:left center;
  transition:transform .6s cubic-bezier(.6,0,.25,1);
  pointer-events:none;
  will-change:transform;
}
.intro-sweep.gone{transform:translateX(-160%) skewX(-22deg)}
.intro-shield-wrap{
  position:fixed;inset:0;
  z-index:10001;
  pointer-events:none;
  clip-path:inset(0 0 0 0);
  transition:clip-path .6s cubic-bezier(.6,0,.25,1);
}
.intro-shield-wrap.gone{clip-path:inset(0 100% 0 0)}
.intro-shield{
  position:absolute;
  /* 50vw / 50vh anchors to the visual viewport so the shield's pixel x/y
     match login.html's sweep shield exactly, regardless of scrollbar width
     differences between the two pages. */
  top:50vh;left:50vw;
  width:340px;height:340px;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 8px 24px rgba(0,0,0,0.25));
}

/* ---------- Contracts page background ---------- */
/* Body needs transparent bg so .ct-bg (z-index:-1) shows through. */
body[data-page="contracts"]{background:transparent}
/* Galvanized-steel background — mirrors the all-jobs view in pm.html */
.ct-bg{
  position:fixed;inset:0;z-index:-1;
  background-color:#34362f;
  background-image:linear-gradient(rgba(36,38,33,.28), rgba(36,38,33,.28)), url("assets/galvanized.jpg");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
/* Contracts page main container — when contracts is its own page it needs
   to host the contracts UI directly (not nested in #leftPanel). */
#contractsMain{
  min-height:calc(100vh - 68px);
  padding:26px 30px;
}

/* ---------- Contracts: all-jobs view (contract bars) ---------- */
.cbar-list{display:flex;flex-direction:column;gap:9px;padding:14px}
.cbar-wrap{display:block}
.job-bar.cbar{
  display:flex;align-items:center;gap:18px;
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--idle);
  border-radius:9px;
  padding:14px 20px;min-height:64px;
  box-shadow:var(--shadow);cursor:pointer;
  transition:border-color .12s, transform .12s;
}
.job-bar.cbar:hover{border-color:var(--red);transform:translateX(2px)}
.cbar-title{flex:0 0 360px;display:flex;flex-direction:column;gap:3px;min-width:0}
.cbar-id{font-family:"Lato",sans-serif;font-weight:900;font-size:15px;color:var(--ink);letter-spacing:.4px}
.cbar-id-pending{color:var(--red)}
.cbar-name{font-family:"Caladea",serif;font-weight:700;font-size:19px;color:var(--grey-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbar-meta{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--grey-2)}
.cbar-meta-l{font-weight:800;color:var(--grey-3);letter-spacing:.3px;text-transform:uppercase;font-size:11px;margin-right:4px}

/* ---------- Contracts: job-view (single-card) ---------- */
/* ct-detail shell mode = full-width detail (hides #leftPanel sidebar). The
   styling otherwise inherits .single-card / .sc-head / .sc-body / .checklist /
   .taskview from the pm dashboard so the two job views read as the same UI. */
#shell.ct-detail #leftPanel{display:none}
#shell.ct-detail #detailPanel{flex:1 1 auto;overflow:auto;padding:0}
.single-card.ct-card{margin:14px}
/* Contracts body grid: narrower left sidebar (~60% of pm's .5fr proportion). */
.ct-body{grid-template-columns:.3fr 1.65fr !important}
@media(max-width:1080px){.ct-body{grid-template-columns:1fr !important}}
.ct-taskview{padding:12px}
/* Checklist rows: subtle red wash on hover only. The SELECTED row gets a
   black border outline (no red highlight) so the "circled by black" effect
   sits on the row itself. */
.ct-cl-row{padding:9px 6px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;gap:12px;
  border:1.5px solid transparent;
  transition:background .12s, border-color .12s}
.ct-cl-row:hover{background:rgba(205,22,63,.05)}
.ct-cl-selected{background:transparent;border-color:var(--ink)}
.ct-cl-selected .cl-label{color:var(--ink);font-weight:800}

/* View strip lock button (contracts page) */
.view-strip .ct-lockbtn{background:transparent;border:1.5px solid var(--line-strong);color:var(--grey-3);
  border-radius:6px;padding:6px 16px;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;
  transition:border-color .12s, color .12s}
.view-strip .ct-lockbtn:hover{border-color:var(--red);color:var(--red)}
.vs-spacer{flex:1}

/* Pending Job Review body */
.ct-pending{padding:6px 0}
.ct-pending-msg{font-size:15px;color:var(--grey-2);margin-bottom:18px}
.ct-pending-summary{display:flex;flex-direction:column;gap:8px;background:#fafaf6;border:1px solid var(--line);border-radius:8px;padding:14px 18px}
.ct-ps-row{display:flex;gap:14px;font-size:14px;align-items:baseline}
.ct-ps-k{flex:0 0 110px;text-transform:uppercase;font-size:11px;font-weight:800;color:var(--grey-3);letter-spacing:.4px}
.ct-ps-v{color:var(--ink);font-weight:600}

/* ---------- Contracts Review form ---------- */
/* Contracts review form — visual styling now mirrors the pm.html morph forms:
   simple section headers with a divider line above (not a rounded card), and
   inputs/labels with the same border + typography as pm. */
.crv-form{padding:6px 0 14px;display:flex;flex-direction:column;gap:0}
.crv-sec{padding:10px 0 14px 0;background:transparent;border:0}
.crv-sec + .crv-sec{border-top:1px solid var(--line);padding-top:14px;margin-top:6px}
.crv-h{font-family:"Caladea",serif;font-weight:700;font-size:17px;color:var(--grey-3);
  padding:0 0 6px 0;margin:0 0 10px 0;
  border-bottom:1px dashed var(--line);letter-spacing:0;text-transform:none}
.crv-row{display:flex;align-items:center;gap:14px;padding:8px 0;flex-wrap:wrap}
/* No dashed separator between rows — sections themselves provide the divider. */
.crv-label{flex:0 0 320px;font-weight:800;font-size:14px;color:var(--grey-2)}
.crv-row-r{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.crv-yesno{display:flex;gap:6px}
.crv-yn-opt{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;
  border:1.5px solid var(--line-strong);border-radius:6px;cursor:pointer;
  font-size:13px;font-weight:700;color:var(--grey-3);background:#fff;
  user-select:none;transition:all .12s}
.crv-yn-opt:hover{border-color:var(--ok)}
.crv-yn-opt input{margin:0;cursor:pointer}
.crv-yn-opt-on{background:var(--ok);color:#fff;border-color:var(--ok)}
.crv-date-l{font-size:14px;font-weight:800;color:var(--grey-2);margin-left:6px}
/* Inputs match the pm morph input look: same border weight, padding, font-size */
.crv-date,.crv-text{background:#fff;border:1.5px solid #d8d8d4;border-radius:7px;
  padding:8px 11px;font-family:inherit;font-size:15px;color:var(--ink);outline:none;
  transition:border-color .15s}
.crv-date:focus,.crv-text:focus{border-color:var(--ok)}
.crv-text{min-width:280px}
.crv-ta{width:100%;background:#fff;border:1.5px solid #d8d8d4;border-radius:7px;
  padding:10px 13px;font-family:inherit;font-size:15px;color:var(--ink);
  resize:vertical;outline:none;transition:border-color .15s}
.crv-ta:focus{border-color:var(--ok)}

/* ---------- Dev page (dev.html) ---------- */
/* Content area fits exactly under the 68px topbar + 54px second bar. */
body[data-page="dev"] #shell{height:calc(100vh - 122px);min-height:0}
/* The active view-switch button reads as "selected" with a solid BLACK fill +
   white label (not the red sweep). The sweep panel is suppressed while active;
   non-selected buttons still preview red on hover. */
.vs-titlebtn.dev-active{background:var(--ink);border-color:var(--ink)}
.vs-titlebtn.dev-active::before{display:none}
.vs-titlebtn.dev-active .vs-titlebtn-l{background-position:0 0}
/* Wrapper inside #shell for whichever tool is showing. Panels are centered and
   sized to 70% of the screen width; both tools share the same window + entry
   footprint. */
.dev-wrap{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;
  gap:16px;padding:24px 30px}
/* Shared panel + entry-box width (70% of the viewport). */
.dev-db-window,.dev-term,.dev-entry{width:70vw}
/* Database Tool — rounded "window" (results area) + query entry just below it. */
.dev-db-window{flex:none;height:340px;background:#fff;border:1.5px solid var(--line-strong);
  border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.08);padding:20px 22px;overflow:auto}
/* Shared text entry box used below both tools. */
.dev-entry{flex:none;border:1.5px solid var(--line-strong);border-radius:12px;padding:13px 16px;
  font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);background:#fff}
.dev-entry::placeholder{color:var(--idle);font-weight:500}
.dev-entry:focus{outline:none;border-color:var(--red)}
/* Server Logs — terminal-style window (no title bar / traffic-light dots).
   Same fixed height as the Database Tool window so the two views match. */
.dev-term{flex:none;height:340px;display:flex;flex-direction:column;background:#0e1116;
  border:1.5px solid #000;border-radius:14px;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.28)}
.dev-term-body{flex:1 1 auto;min-height:0;overflow:auto;padding:14px 16px;background:#0e1116;
  font-family:"Consolas","SF Mono","Menlo",monospace;font-size:13px;line-height:1.7;color:#c8d0da}
.dev-term-line{white-space:pre-wrap;word-break:break-word}
.dev-term-time{color:#5c6470}
.dev-term-info{color:#8ab4f8}
.dev-term-ok{color:#27c93f}
.dev-term-warn{color:#ffbd2e}
.dev-term-err{color:#ff6b6b}
.dev-term-prompt{color:#27c93f;font-weight:700}
.dev-term-cursor{display:inline-block;width:8px;height:14px;background:#c8d0da;
  vertical-align:text-bottom;animation:dev-term-blink 1.1s step-end infinite}
@keyframes dev-term-blink{50%{opacity:0}}
.crv-acts{display:flex;justify-content:flex-end;gap:8px;padding-top:10px;border-top:1px solid var(--line);margin-top:6px}
.crv-acts .btn{border:1.5px solid var(--ink);border-radius:6px;padding:9px 14px;
  font-size:14px;font-weight:800;background:transparent;color:var(--ink);
  min-width:160px;text-align:center;cursor:pointer}
.crv-wrap{display:flex;flex-direction:column;gap:14px}
.crv-submissions{display:flex;flex-direction:column;gap:10px;margin-top:6px}