/* Freelancer Planning: a crew planning board. System fonts only (no external font services). */
:root {
  --bg:#eef1ee; --surface:#fff; --sunk:#e4e9e5; --ink:#18201e; --muted:#5a6863; --line:#d2d9d4;
  --accent:#2c5a4d; --accent-ink:#fff; --marker:#d99a1c; --marker-soft:#f6e5bd;
  --warn:#b2412c; --warn-soft:#f6dcd5; --ok:#2f7a4f; --ok-soft:#d8eedf;
  --nb:#e2392c; --nb-ink:#ffffff; --nb-soft:#fbe1de;
  --f-display:"Avenir Next Condensed","Roboto Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:8px; color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#121816; --surface:#1a2220; --sunk:#0e1311; --ink:#e6ece9; --muted:#9aa9a3; --line:#2c3834;
    --accent:#7fc0ab; --accent-ink:#0e1916; --marker:#e9b244; --marker-soft:#3d3018;
    --warn:#f08a74; --warn-soft:#3f221c; --ok:#79c995; --ok-soft:#1b3326;
    --nb:#c9372b; --nb-ink:#ffffff; --nb-soft:#3a1f1c; color-scheme:dark; }
}
* { box-sizing:border-box }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 var(--f-body) }
a { color:var(--accent) }
.wrap { max-width:1040px; margin:0 auto; padding:20px 16px 48px; display:grid; gap:18px }
main { display:grid; gap:14px; min-width:0 }
header.top { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px; border-bottom:2px solid var(--ink); padding-bottom:12px }
.brand { display:grid; gap:6px }
.brand .name { font-family:var(--f-display); font-weight:800; font-size:clamp(26px,5vw,36px); line-height:1; color:var(--ink); text-decoration:none; letter-spacing:-.01em }
.role { justify-self:start; font:600 11px var(--f-mono); text-transform:uppercase; letter-spacing:.08em; padding:2px 8px; border-radius:4px; background:var(--ink); color:var(--bg) }
.who { display:flex; flex-wrap:wrap; align-items:center; gap:14px; font-size:14px; color:var(--muted) }
h1, h2, h3 { font-family:var(--f-display); margin:0; line-height:1.15; text-wrap:balance }
h1 { font-size:24px; font-weight:800 }
h2 { font-size:19px; font-weight:700 }
h3 { font-size:16px; font-weight:700 }
p { margin:0 }
.muted { color:var(--muted) }
.small { font-size:13px }
.mono { font-family:var(--f-mono); font-size:13px; font-variant-numeric:tabular-nums }
.mono.big { font-size:17px; font-weight:600 }
nav.tabs { display:flex; gap:4px; overflow-x:auto; border-bottom:1px solid var(--line) }
nav.tabs a { font-weight:600; padding:10px 14px; color:var(--muted); text-decoration:none; border-bottom:3px solid transparent; white-space:nowrap }
nav.tabs a[aria-current="page"] { color:var(--ink); border-color:var(--marker) }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
.bar { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px }
.bar > div:first-child { display:grid; gap:4px }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.btn { display:inline-block; font:600 14px var(--f-body); border-radius:6px; padding:8px 14px; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); cursor:pointer; text-decoration:none; line-height:1.3 }
.btn.ghost { background:transparent; color:var(--ink); border-color:var(--line) }
.btn.danger { background:transparent; color:var(--warn); border-color:var(--warn) }
.btn.sm { padding:5px 10px; font-size:13px }
button.link { background:none; border:0; padding:0; font:inherit; color:var(--accent); text-decoration:underline; cursor:pointer }
form.inline { display:inline }
.flash { padding:10px 14px; border-radius:6px; background:var(--ok-soft); color:var(--ok); font-weight:600 }
.flash.err { background:var(--warn-soft); color:var(--warn) }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; display:grid; gap:12px; align-content:start; min-width:0 }
.card.narrow { max-width:440px; width:100%; justify-self:center; margin-top:20px }
.card.highlight { border:2px solid var(--marker) }
.stack { display:grid; gap:14px }
label { display:grid; gap:4px; font-size:13px; font-weight:600; color:var(--muted); min-width:0 }
input, textarea, select { font:15px var(--f-body); color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:8px 10px; width:100%; min-width:0 }
input[type=checkbox] { width:auto }
.grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) }
fieldset { border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; display:grid; gap:10px; margin:0 }
legend { font-weight:700; padding:0 6px }
.crew { display:flex; flex-wrap:wrap; gap:10px 22px }
label.check { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:15px; font-weight:400; color:var(--ink); cursor:pointer }
.danger-zone { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--line); padding-top:14px }
h2.day { font-size:17px; margin-top:8px; display:flex; align-items:center; gap:8px }
.tag { font:600 11px var(--f-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--muted) }
.job { display:grid; grid-template-columns:100px minmax(0,1fr) auto; gap:12px; align-items:start; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px }
.job.mine { border-left:5px solid var(--marker); padding-left:10px }
.job .time { font-family:var(--f-mono); font-size:13px; font-variant-numeric:tabular-nums; padding-top:2px }
.job .body { display:grid; gap:4px; min-width:0; overflow-wrap:anywhere }
.notes { font-size:14px }
.chips { display:flex; flex-wrap:wrap; gap:6px }
.chip { font-size:12px; padding:2px 8px; border-radius:999px; background:var(--sunk); color:var(--ink); font-weight:400; white-space:nowrap }
.chip.you { background:var(--marker-soft); font-weight:600 }
.chip.warn { background:var(--warn-soft); color:var(--warn); font-weight:600 }
.chip.ok { background:var(--ok-soft); color:var(--ok); font-weight:600 }
.empty { border:1px dashed var(--line); border-radius:var(--r); padding:24px; color:var(--muted); text-align:center }
.list { display:grid; gap:8px }
.row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:10px 14px }
.row.off { opacity:.6 }
.line { font-size:14px }
.log { display:grid; grid-template-columns:minmax(0,1.4fr) 90px 90px minmax(0,1fr) auto; gap:10px; align-items:end; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px }
.log .what { display:grid; gap:2px; justify-items:start; align-self:center; min-width:0 }
.scroll { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface) }
table { border-collapse:collapse; width:100%; font-size:13px }
th, td { padding:7px 10px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap }
td.wrap { white-space:normal; min-width:160px }
th { font:600 11px var(--f-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); background:var(--sunk) }
.num { text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums }
tfoot td { font-weight:700; background:var(--sunk) }
.board th.d { text-align:center; padding:6px 4px; min-width:34px }
.board th.d.we { color:var(--ink) }
.board td.c { padding:0; text-align:center; border-left:1px solid var(--line); height:34px }
.board td.c span, .board td.c a.add { display:block; margin:4px; border-radius:4px; height:24px; line-height:24px; font:600 11px var(--f-mono); text-decoration:none }
.board td.c a.add:hover { background:var(--sunk) }
.board td.name { position:sticky; left:0; background:var(--surface); font-weight:600; z-index:1 }
.na { background:var(--warn-soft); color:var(--warn) }
.bk { background:var(--marker-soft); color:var(--ink) }
.both { background:var(--warn); color:var(--surface) }
.legend { display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--muted) }
.legend i { display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:-2px; margin-right:5px }
.cards { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) }
/* Month calendar */
.cal { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border:1px solid var(--line); border-radius:var(--r); background:var(--line); gap:1px; overflow:hidden }
.cal-wd { background:var(--sunk); font:600 11px var(--f-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:6px 8px }
.cal-day { position:relative; background:var(--surface); min-height:108px; padding:6px 6px 26px; display:flex; flex-direction:column; gap:3px; min-width:0 }
.cal-day.we { background:color-mix(in srgb, var(--surface) 70%, var(--sunk)) }
.cal-day.out { background:var(--sunk) }
.cal-day.out .cal-num { color:var(--muted); opacity:.6 }
.cal-head { display:flex; align-items:baseline; justify-content:space-between; gap:4px }
.cal-num { font:700 14px var(--f-display); font-variant-numeric:tabular-nums }
.cal-wdm { display:none }
.cal-day.today .cal-num { align-self:flex-start; background:var(--marker); color:var(--ink); border-radius:4px; padding:0 6px }
.cal-away { font-size:11px; font-weight:600; color:var(--warn); text-decoration:none; white-space:nowrap }
.cal-job { display:flex; justify-content:space-between; gap:4px; font-size:12px; line-height:1.3; padding:3px 6px; border-radius:4px; background:var(--sunk); color:var(--ink); text-decoration:none; overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
a.cal-job:hover { background:var(--line) }
.cal-job.mine { background:var(--marker-soft); font-weight:600; border-left:3px solid var(--marker) }
.cal-job.problem { background:var(--warn-soft); color:var(--warn); font-weight:600 }
.cal-crew { font-family:var(--f-mono); font-size:11px; opacity:.75; flex:none }
.cal-add { position:absolute; left:6px; right:6px; bottom:4px; height:18px; line-height:18px; text-align:center; border-radius:4px; color:var(--muted); text-decoration:none; font-weight:700; opacity:0 }
.cal-day:hover .cal-add, .cal-add:focus-visible { opacity:1; background:var(--sunk) }
@media (hover:none) { .cal-add { opacity:.5 } }

.cal-day a.cal-num { color:var(--ink); text-decoration:none }
.cal-day a.cal-num:hover { text-decoration:underline }
.cal-note { font-size:11px; font-style:italic; color:var(--muted); overflow-wrap:anywhere }
.cal-job strong { font-weight:600 }
.cal-job .cal-crew { font-family:var(--f-body); font-size:11px; color:var(--muted); white-space:normal }
.cal:not(.mine-cal) .cal-job { display:block; white-space:normal }
.cal-nb { font-size:11px; font-weight:600; color:var(--warn); overflow-wrap:anywhere }
/* Freelancer calendar: the whole day is a button that toggles NB */
.mine-cal .cal-day { padding-bottom:6px; min-height:96px }
.cal-toggle { position:absolute; inset:0; margin:0 }
.cal-toggle button { width:100%; height:100%; background:transparent; border:0; cursor:pointer; border-radius:0 }
.cal-toggle button:hover { background:color-mix(in srgb, var(--nb) 10%, transparent) }
.cal-toggle button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px }
.mine-cal .cal-day > :not(.cal-toggle) { position:relative; pointer-events:none }
.cal-day.is-nb { background:var(--nb-soft) }
.cal-nbtag { align-self:flex-start; font:700 12px var(--f-mono); background:var(--nb); color:var(--nb-ink); padding:2px 8px; border-radius:4px }
.cal-hint { margin-top:auto; font-size:11px; color:var(--muted); opacity:0; transition:opacity .15s }
.cal-day:hover .cal-hint { opacity:1 }
@media (hover:none) { .cal-hint { display:none } }

/* Planning grid, laid out like the spreadsheet */
.wrap:has(.grid-wrap) { max-width:none }
.grid-wrap { max-height:calc(100vh - 230px); overflow:auto }
table.sheet { border-collapse:separate; border-spacing:0; width:max-content; min-width:100%; font-size:14px }
.sheet th, .sheet td { border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:0; white-space:nowrap }
.sheet thead th { position:sticky; top:0; z-index:3; background:var(--sunk); color:var(--ink); font:700 14px var(--f-display); text-transform:none; letter-spacing:0; padding:8px 6px; text-align:center; border-bottom:2px solid var(--ink) }
.sheet .c-day, .sheet .c-date { position:sticky; background:var(--surface); z-index:2; padding:0 8px; font-variant-numeric:tabular-nums }
.sheet .c-day { left:0; width:52px; min-width:52px; color:var(--muted) }
.sheet .c-date { left:52px; width:72px; min-width:72px; font-family:var(--f-mono); font-size:13px }
.sheet thead .c-day, .sheet thead .c-date { z-index:4; background:var(--sunk) }
.sheet .c-note { width:200px; min-width:200px }
.sheet .c-p { width:118px; min-width:118px }
.sheet tr.we td.c-day, .sheet tr.we td.c-date { font-weight:700; color:var(--ink) }
.sheet tr.today td.c-day, .sheet tr.today td.c-date { background:var(--marker-soft) }
.sheet tr.sep td { height:14px; background:var(--line); border-right:0; position:static }
.sheet input.cell { width:100%; border:0; border-radius:0; background:transparent; padding:6px 8px; text-align:center; font-size:14px; color:inherit }
.sheet input.note { text-align:left; font-style:italic }
.sheet input.cell:focus { outline:2px solid var(--accent); outline-offset:-2px; background:var(--surface); color:var(--ink) }
.sheet td.na { background:var(--nb); color:var(--nb-ink); font-weight:700 }
.sheet td.both { background:var(--nb); color:var(--nb-ink); box-shadow:inset 0 0 0 3px var(--ink) }
.legend .na { background:var(--nb) }
.legend .both { background:var(--nb); box-shadow:inset 0 0 0 2px var(--ink) }
.save-state { margin-left:auto; font-weight:600; color:var(--ok) }
.save-state.bad { color:var(--warn) }

@media (max-width:640px) {
  .cal { grid-template-columns:1fr }
  .cal-wd, .cal-day.out, .cal-day.quiet { display:none }
  .cal-day, .mine-cal .cal-day { min-height:0 }
  .cal-wdm { display:inline; font-weight:400; color:var(--muted) }
  .cal-job { white-space:normal }
  .job { grid-template-columns:1fr }
  .log { grid-template-columns:1fr 1fr }
  .log .what, .log .wide, .log .btn { grid-column:1/-1 }
}