:root{
  color-scheme:light;
  --ink:#1c2024; --paper:#fbfaf7; --line:#e3ddd1; --line-strong:#cbc3b2;
  --muted:#8c867a;
  --accent:#c2542a; --accent-soft:#f4e6dd;
  --c1:#2f6f4f; --c1b:#e4efe8;
  --c2:#1f5f86; --c2b:#e1ecf2;
  --c3:#8a5a1f; --c3b:#f2e9da;
  --c4:#7a3a72; --c4b:#efe3ed;
  --today:#fbf3d6;
  --shadow:0 1px 2px rgba(40,32,20,.06),0 4px 14px rgba(40,32,20,.05);

  /* Semantic surfaces — re-themed in dark mode below */
  --surface:#fff;          /* cards, inputs, buttons */
  --surface-2:#faf7f1;     /* header gradient bottoms */
  --surface-3:#fbfaf7;     /* soft footer fills (add buttons) */
  --hover:#f3efe7;         /* button / row hover */
  --empty:#faf8f4;         /* out-of-month day cells */
  --dotted:#ece6da;        /* dotted crew-line separators */
  --scrim:rgba(28,25,20,.42);
  --modal-shadow:0 18px 50px rgba(0,0,0,.25);
  --pchip-border:#e6cdbf;  /* crewless pending chip */
  --pchip-ink:#a8461f;
  --danger-border:#d9b3a8; --danger-ink:#a8461f; --danger-hover:#fbece6;
}

/* Dark mode follows the OS / browser preference automatically — no toggle.
   Tuned for contrast: bright text, visible grid lines, cards lifted off the
   page, and a brighter accent. */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --ink:#f3f0ea; --paper:#12141a; --line:#373d47; --line-strong:#4d535e;
    --muted:#b3ac9f;
    --accent:#f4793f; --accent-soft:#46291a;
    --today:#48401f;
    --shadow:0 1px 2px rgba(0,0,0,.45),0 6px 18px rgba(0,0,0,.38);

    --surface:#21262e;
    --surface-2:#272d36;
    --surface-3:#272d36;
    --hover:#323843;
    --empty:#181b21;
    --dotted:#333944;
    --scrim:rgba(0,0,0,.64);
    --modal-shadow:0 18px 50px rgba(0,0,0,.65);
    --pchip-border:#74492f;
    --pchip-ink:#f6ab7c;
    --danger-border:#7d4c41; --danger-ink:#f2a594; --danger-hover:#34201a;
  }
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:13px; line-height:1.4;
}
.wrap{max-width:1500px;margin:0 auto;padding:20px 24px 60px;}
/* On real screens the calendar goes full-width and fills the viewport height —
   see the "Fill the screen" block near the end of this file. */

header.top{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:18px;
}
header.top .logo{
  height:42px;width:auto;display:block;flex:0 0 auto;
}
header.top h1{
  font-family:"Georgia",serif;font-weight:600;font-size:24px;letter-spacing:-.02em;
  margin:0;color:var(--ink);padding-left:14px;border-left:1px solid var(--line-strong);
}
/* signed-in email + Sign out, pushed to the right of the header */
header.top .account{margin-left:auto;display:flex;align-items:center;gap:12px;}
header.top .who{font-size:12px;color:var(--muted);white-space:nowrap;}
header.top .signout{
  font-size:12px;color:var(--muted);text-decoration:none;white-space:nowrap;
  border:1px solid var(--line-strong);border-radius:7px;padding:6px 12px;
  transition:background .12s,color .12s;
}
header.top .signout:hover{background:var(--hover);color:var(--ink);}

.toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:18px;
}
.nav{display:flex;align-items:center;gap:6px;}
button{font-family:inherit;cursor:pointer;}
.btn{
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  border-radius:7px;padding:7px 12px;font-size:12.5px;font-weight:500;
  transition:background .12s,border-color .12s;
}
.btn:hover{background:var(--hover);}
.btn.icon{padding:7px 11px;font-size:15px;line-height:1;}
.badge{   /* unseen-activity count on the Activity button */
  display:inline-flex;align-items:center;justify-content:center;
  min-width:16px;height:16px;padding:0 4px;margin-left:6px;border-radius:8px;
  background:var(--accent);color:#fff;font-size:10px;font-weight:700;line-height:1;
}
.badge[hidden]{display:none;}   /* author display:inline-flex would otherwise beat the UA [hidden] rule */
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn.primary:hover{background:#a8461f;}
.range-label{
  font-weight:600;font-size:14px;min-width:230px;text-align:center;
}
.spacer{flex:1;}
.saving{font-size:11px;color:var(--muted);min-width:54px;}
.saving.err{color:var(--accent);}

/* Edit crews + Add job span the same 200px as the Ready/Pending sidebar below, so
   they line up as a column above it. */
.job-actions{display:flex;gap:10px;}
@media(min-width:901px){
  .job-actions{flex:0 0 200px;}
  .job-actions .btn{flex:1;}
}

.legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:11.5px;color:var(--muted);}
.legend .sw{display:inline-flex;align-items:center;gap:5px;}
.legend .dot{width:11px;height:11px;border-radius:3px;display:inline-block;}
.legend-mobile{display:none;}   /* shown only on mobile, above the calendar */

/* layout: pending sidebar + calendar */
.layout{display:flex;gap:18px;align-items:flex-start;}
#months{flex:1;min-width:0;}

.months{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;}
.months.single{grid-template-columns:1fr;}
@media(max-width:1050px){.months{grid-template-columns:1fr;}}

.month{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;}
.month h2{
  margin:0;padding:13px 16px;font-family:"Georgia",serif;font-weight:600;font-size:17px;
  border-bottom:1px solid var(--line);background:linear-gradient(var(--surface),var(--surface-2));
  text-align:center;
}
table{width:100%;border-collapse:collapse;table-layout:fixed;}
th.dow{
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  font-weight:600;padding:7px 0;border-bottom:1px solid var(--line);text-align:center;
}
td.day{
  border:1px solid var(--line);vertical-align:top;height:96px;padding:0;position:relative;
  transition:background .1s;
}
td.day.empty{background:var(--empty);}
td.day.today{background:var(--today);}
.line.dragover{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent);}
.datenum{font-size:11px;font-weight:600;color:var(--muted);padding:3px 5px 1px;flex:0 0 auto;}
td.day.today .datenum{color:var(--accent);}
/* dayinner fills the cell so the crew lines (and their chips) stretch to use the
   whole cell height instead of bunching at the top — keeps tall cells from looking
   smooshed. The fixed line/chip heights below act as a minimum. */
.dayinner{display:flex;flex-direction:column;height:100%;}
.lines{display:flex;flex-direction:column;flex:1 1 auto;}
.line{
  flex:1 1 0;min-height:18px;display:flex;align-items:stretch;font-size:10.5px;
  padding:1px 4px;border-top:1px dotted var(--dotted);overflow:hidden;white-space:nowrap;
}
.line:first-child{border-top:none;}
.line.addable{cursor:pointer;}
.line.addable:hover{background:var(--accent-soft);}
.chip{
  width:100%;flex:1 1 auto;min-height:14px;border-radius:3px;display:flex;align-items:center;gap:2px;
  padding:0 3px;font-size:10px;font-weight:600;cursor:grab;
  overflow:hidden;white-space:nowrap;
}
.chip .nm{flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;}   /* name centered between the caps */
.chip .endcap{   /* ⊢ / ⊣ pinned to the edges — bold and a bit larger */
  flex:0 0 auto;font-size:16px;line-height:1;-webkit-text-stroke:0.4px currentColor;
  transform:translateY(-0.12em);   /* the tack glyphs sit on the math axis (low); lift to optical center */
}
.chip .endcap.ghost{visibility:hidden;}   /* reserves space on the missing side so the name stays centered */
.chip.mid{   /* the → arrow on middle days — bolder and bigger */
  justify-content:center;cursor:grab;opacity:.9;font-size:18px;line-height:1;-webkit-text-stroke:0.8px currentColor;
}
.chip:active{cursor:grabbing;}
.chip.dragging{opacity:.4;}

/* job sidebar — Ready + Pending buckets stacked in one column */
.sidebar{
  flex:0 0 200px;position:sticky;top:16px;
  display:flex;flex-direction:column;gap:14px;
}
.pending{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;overflow:hidden;
}
.pending.drop{outline:2px solid var(--accent);outline-offset:-2px;background:var(--accent-soft);}
.pending-head{
  position:relative;padding:13px 30px;font-family:"Georgia",serif;font-weight:600;font-size:15px;
  text-align:center;cursor:pointer;user-select:none;
  border-bottom:1px solid var(--line);background:linear-gradient(var(--surface),var(--surface-2));
}
.pending-head .caret{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-size:14px;color:var(--muted);
}
/* Collapsed = the whole sidebar shrinks horizontally so the calendar reclaims the
   width. Both buckets collapse together: lists + add buttons hide, and on
   desktop/tablet each header becomes a slim vertical strip (Ready over Pending). */
.sidebar.collapsed .pending-list,
.sidebar.collapsed .add-pending{display:none;}
@media(min-width:901px){
  .sidebar.collapsed{flex:0 0 34px;align-self:stretch;}   /* full-height strip, not a floating pill */
  .sidebar.collapsed .pending{flex:1;}                    /* the two strips split the height */
  .sidebar.collapsed .pending-head{
    flex:1;border-bottom:none;padding:12px 4px;
    writing-mode:vertical-rl;transform:rotate(180deg);
  }
  .sidebar.collapsed .pending-head .caret{display:none;}
}
.pending-list{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:7px;min-height:70px;max-height:34vh;}
.pending-empty{color:var(--muted);font-size:11.5px;line-height:1.5;padding:6px 4px;}
.pchip{
  background:var(--accent-soft);border:1px solid var(--pchip-border);color:var(--pchip-ink);
  border-radius:7px;padding:8px 10px;font-size:12px;font-weight:600;cursor:grab;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pchip:active{cursor:grabbing;}
.pchip.dragging{opacity:.4;}
.add-pending{
  border:none;border-top:1px solid var(--line);background:var(--surface-3);color:var(--ink);
  padding:11px;font-size:12.5px;font-weight:500;width:100%;
}
.add-pending:hover{background:var(--hover);color:var(--accent);}
@media(max-width:900px){
  .layout{flex-direction:column;align-items:stretch;}
  .sidebar{flex:none;width:100%;position:static;}
}

/* modal */
.scrim{position:fixed;inset:0;background:var(--scrim);display:none;align-items:center;justify-content:center;z-index:50;padding:20px;}
.scrim.open{display:flex;}
.modal{background:var(--surface);border-radius:14px;width:100%;max-width:420px;box-shadow:var(--modal-shadow);overflow:hidden;}
.modal h3{margin:0;padding:16px 20px;font-family:"Georgia",serif;font-size:18px;border-bottom:1px solid var(--line);}
.modal .body{padding:18px 20px;display:flex;flex-direction:column;gap:14px;}
label.fld{display:flex;flex-direction:column;gap:5px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;}
input[type=text],input[type=date],select{
  font-family:inherit;font-size:13.5px;color:var(--ink);
  border:1px solid var(--line-strong);border-radius:8px;padding:9px 10px;background:var(--surface);
}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent);}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.modal .foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:space-between;align-items:center;}

/* recent-activity feed */
.modal .body.activity-body{padding:0;gap:0;display:block;max-height:60vh;overflow-y:auto;}
.act-row{display:flex;gap:12px;justify-content:space-between;align-items:baseline;padding:9px 20px;border-top:1px solid var(--line);font-size:12.5px;}
.act-row:first-child{border-top:none;}
.act-text{color:var(--ink);line-height:1.45;}
.act-time{color:var(--muted);font-size:11px;white-space:nowrap;flex:0 0 auto;}
.act-empty{color:var(--muted);font-size:12.5px;padding:18px 20px;}

.err{color:var(--accent);font-size:12px;min-height:16px;}
.danger{background:var(--surface);border:1px solid var(--danger-border);color:var(--danger-ink);border-radius:7px;padding:8px 12px;font-size:12.5px;}
.danger:hover{background:var(--danger-hover);}
.hint{color:var(--muted);font-size:11px;margin:-6px 0 0;}

.empty-note{color:var(--muted);font-size:12px;padding:2px 0 0;}

/* crew rail flanking each month — the row is ONE rounded card; the rail and the
   month sit flush inside it (clipped by overflow), so all four outer corners are
   rounded and the crew axis reads as part of the calendar, not a separate panel. */
.month-row{
  display:flex;align-items:stretch;gap:0;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);overflow:hidden;
}
.rail{
  flex:0 0 92px;display:flex;flex-direction:column;
  background:var(--surface);
}
/* No divider border here — the month table's own edge border is the single seam
   between the crew rail and the grid, so the header strip stays seamless. */
.month-row .month{flex:1;border:none;border-radius:0;box-shadow:none;}
.rail .rail-head{
  border-bottom:1px solid var(--line);background:linear-gradient(var(--surface),var(--surface-2));
}
.rail .rail-title{
  border-bottom:1px solid var(--line);   /* empty spacer; mirrors the line under the month name */
}
/* "Crew" label now sits on the day-of-week row, styled like the SUN/MON/… headers */
.rail .rail-dow{
  height:30px;display:flex;align-items:center;justify-content:center;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;
}
.rail .rail-weeks{flex:1;display:flex;flex-direction:column;}
.rail .rail-week{
  height:96px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;
  justify-content:flex-start;box-sizing:border-box;
}
.rail .rail-week:last-child{border-bottom:none;}
.rail .rail-datepad{height:18px;flex:0 0 auto;}   /* aligns with .datenum row */
.rail .rail-lines{display:flex;flex-direction:column;flex:1 1 auto;}
.rail .rail-line{
  flex:1 1 0;min-height:18px;display:flex;align-items:center;gap:5px;
  padding:0 6px;border-top:1px dotted var(--dotted);font-size:9.5px;font-weight:600;
  overflow:hidden;white-space:nowrap;
}
.rail.right .rail-line{flex-direction:row-reverse;text-align:right;}
.rail .rail-line:first-child{border-top:none;}
.rail .rail-line .swatch{flex:0 0 auto;width:8px;height:8px;border-radius:2px;}
.rail .rail-line .lname{overflow:hidden;text-overflow:ellipsis;}

/* manage-crews modal */
.crew-edit-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.crew-edit-row .num{
  flex:0 0 22px;height:22px;border-radius:5px;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:700;color:#fff;
}
.crew-edit-row input{flex:1;}
.crew-edit-row .rm{
  flex:0 0 auto;border:1px solid var(--danger-border);background:var(--surface);color:var(--danger-ink);border-radius:6px;
  width:28px;height:28px;font-size:15px;line-height:1;cursor:pointer;padding:0;
}
.crew-edit-row .rm:hover{background:var(--danger-hover);}
.crew-edit-row .rm:disabled{opacity:.35;cursor:not-allowed;}
.add-crew-btn{
  border:1px dashed var(--line-strong);background:var(--surface-3);color:var(--ink);
  border-radius:7px;padding:8px 12px;font-size:12.5px;font-weight:500;width:100%;margin-top:4px;
}
.add-crew-btn:hover{background:var(--hover);border-color:var(--accent);color:var(--accent);}
.crew-edit-list{max-height:46vh;overflow-y:auto;padding-right:2px;}

/* view toggle (single / side-by-side) */
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:7px;overflow:hidden;}
.seg button{
  background:var(--surface);border:none;padding:7px 12px;font-size:12.5px;font-weight:500;color:var(--ink);
  cursor:pointer;border-right:1px solid var(--line-strong);
}
.seg button:last-child{border-right:none;}
.seg button:hover{background:var(--hover);}
.seg button.active{background:var(--accent);color:#fff;}

/* ===== Single-month view: scale up for big-screen / TV display ===== */
.months.single .month h2{font-size:30px;padding:20px 24px;}
.months.single th.dow{font-size:15px;padding:14px 0;letter-spacing:.1em;}
.months.single td.day{height:140px;}
.months.single .datenum{font-size:18px;padding:7px 10px 3px;}
.months.single .line{min-height:26px;font-size:15px;padding:1px 8px;}
.months.single .chip{min-height:22px;font-size:14px;padding:0 8px;border-radius:4px;}
.months.single .chip .endcap{font-size:22px;-webkit-text-stroke:0.6px currentColor;}
.months.single .chip.mid{font-size:25px;-webkit-text-stroke:1px currentColor;}

/* matching crew rail in single view */
.months.single .rail{flex:0 0 168px;}
.months.single .rail .rail-title{font-size:14px;padding:20px 10px;}
.months.single .rail .rail-line{min-height:26px;font-size:14px;padding:0 12px;gap:8px;}
.months.single .rail .rail-line .swatch{width:12px;height:12px;}

/* ===== Fill the screen (desktop / tablet, ≥1051px) =====
   Both single and side-by-side views go full-width and stretch to fill the
   viewport height: the months row becomes a 1fr grid track, each month's table
   flexes into the space, and the cell rows (and crew lines) grow with it. It
   grows past the viewport and scrolls only when a tall crew list needs more
   room. The JS rail sync measures the stretched rows and matches them. */
@media(min-width:1051px){
  .wrap{max-width:none;}
  /* Fill the viewport height by sizing each week-row as a fraction of the screen
     (--weeks is set per month from JS). A viewport-relative height is definite and
     recomputes live on resize — a flex-distributed table row does not, which is why
     the cells used to freeze when you dragged the window. Cells still grow past this
     to fit a tall crew list, in which case the page scrolls instead of clipping. */
  td.day{height:calc((100vh - 274px) / var(--weeks, 6));}
  .months.single td.day{height:calc((100vh - 327px) / var(--weeks, 6));}
  /* Lower the single-view line floors so it can shrink on smaller windows too; on a
     big display the calc above still makes the cells large, so these never bite there. */
  .months.single .line{min-height:18px;}
  .months.single .chip{min-height:14px;}
  .months.single .rail .rail-line{min-height:18px;}
}

/* ===== Mobile (phones) ===== */
@media(max-width:680px){
  .wrap{padding:12px 12px 40px;}
  header.top{margin-bottom:12px;gap:10px;}
  header.top .logo{height:34px;}
  header.top h1{font-size:20px;padding-left:10px;}
  header.top .who{display:none;}   /* hide the long email on phones; keep Sign out */

  .toolbar{gap:8px;margin-bottom:14px;}
  .legend-mobile{display:flex;width:100%;margin:0 0 10px;}   /* crew key above the calendar (rail is hidden on phones) */
  .seg{display:none;}            /* side-by-side isn't useful on a phone */
  .spacer{display:none;}
  .range-label{min-width:0;flex:1;text-align:left;}

  .months{grid-template-columns:1fr;gap:14px;}
  .rail{display:none;}           /* hide the crew label rail to reclaim width — the
                                    .month-row card border/radius still frames the month */
  td.day{height:auto;min-height:74px;}

  /* the buckets become compact wrapping rows above the calendar */
  .pending-list{flex-direction:row;flex-wrap:wrap;max-height:none;}
  .pchip{flex:0 0 auto;}
}