/* Freelancer Planning: a crew planning board. System fonts only (no external font services). */
:root {
  --bg:#eef1ee; --surface:#fff; --sunk:#e6ebe7; --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;
  --job-ink:#1b1f1d;
  --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; --gutter:clamp(10px,1.4vw,20px); color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#121816; --surface:#1a2220; --sunk:#222b28; --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; }
}
/* Job colours: pastel fills with dark text, readable in light and dark mode */
.col-yellow { --jc:#f6d365 } .col-orange { --jc:#f5ad6e } .col-green { --jc:#9ad8a8 } .col-teal { --jc:#86d3cd }
.col-blue { --jc:#9fbff2 } .col-purple { --jc:#c8adf0 } .col-pink { --jc:#f2adcb }

* { box-sizing:border-box }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.45 var(--f-body) }
a { color:var(--accent) }
h1, h2, h3 { font-family:var(--f-display); margin:0; line-height:1.15; text-wrap:balance }
h1 { font-size:22px; font-weight:800 }
h2 { font-size:18px; 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 }

/* Top bar: name, tabs and account in one line */
header.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:stretch; gap:6px 18px; flex-wrap:wrap; padding:0 var(--gutter); background:var(--ink); color:var(--bg) }
.topbar .name { align-self:center; font:800 18px var(--f-display); color:var(--bg); text-decoration:none; padding:10px 0; white-space:nowrap }
.topbar .tabs { display:flex; gap:2px; overflow-x:auto; flex:1 }
.topbar .tabs a { display:flex; align-items:center; padding:0 12px; color:color-mix(in srgb, var(--bg) 70%, transparent); text-decoration:none; font-weight:600; font-size:14px; border-bottom:3px solid transparent; white-space:nowrap }
.topbar .tabs a:hover { color:var(--bg) }
.topbar .tabs a[aria-current="page"] { color:var(--bg); border-color:var(--marker) }
.topbar .who { display:flex; align-items:center; gap:12px; font-size:13px; color:color-mix(in srgb, var(--bg) 75%, transparent) }
.topbar .who a, .topbar .who button.link { color:var(--bg) }
.role { font:600 10px var(--f-mono); text-transform:uppercase; letter-spacing:.08em; padding:2px 6px; border-radius:4px; background:var(--marker); color:var(--job-ink) }

.wrap { padding:12px var(--gutter) 40px; display:grid; gap:12px }
main { display:grid; gap:12px; min-width:0 }
.narrowcol { max-width:960px; width:100%; display:grid; gap:14px }
.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px }
.toolbar .actions { margin-left:auto }
.toolbar .hint { max-width:60ch }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
.bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px }
.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:var(--surface); 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:9px 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], input[type=radio] { width:auto }
.grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) }
.grid2 { display:grid; gap:12px; grid-template-columns:2fr 1fr }
fieldset { border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; display:flex; flex-wrap:wrap; gap:8px 18px; margin:0 }
legend { font-weight:700; padding:0 6px; font-size:13px; color:var(--muted) }
label.check { display:flex; align-items:center; gap:6px; font-size:15px; font-weight:400; color:var(--ink); cursor:pointer }
.chips { display:flex; flex-wrap:wrap; gap:6px }
.chip { font-size:12px; padding:2px 8px; border-radius:999px; background:var(--sunk); color:var(--ink); white-space:nowrap }
.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:20px; 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 }
.legend { display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--muted) }
.legend i { display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:-2px; margin-right:5px }
.lg-nb { background:var(--nb) }
.lg-conflict { background:var(--surface); box-shadow:inset 0 0 0 2px var(--nb) }
.save-state { font-size:13px; font-weight:600; color:var(--ok) }
.save-state.bad { color:var(--warn) }

/* Job chips (grid, calendar) */
.jobchip { display:inline-flex; align-items:center; gap:4px; max-width:100%; font:600 13px var(--f-body); line-height:1.25; padding:3px 8px; border-radius:5px; border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background:var(--jc, var(--sunk)); color:var(--ink); cursor:pointer; text-align:left; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
[class*="col-"].jobchip, .ag-job[class*="col-"], td[class*="col-"] { color:var(--job-ink) }
.jobchip:hover { filter:brightness(.96) }
.jobchip.block { display:flex; flex-direction:column; align-items:stretch; width:100%; white-space:normal; gap:1px }
.jc-name { overflow-wrap:anywhere }
.jc-crew { font-weight:400; font-size:11.5px; opacity:.8; overflow-wrap:anywhere }
.jobchip.conflict { box-shadow:inset 0 0 0 2px var(--nb) }
.has-notes { font-weight:400; opacity:.65 }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; background:var(--jc, var(--line)); vertical-align:0 }
.addjob { width:24px; height:24px; flex:none; border-radius:5px; border:1px dashed var(--line); background:transparent; color:var(--muted); font:700 15px/1 var(--f-body); cursor:pointer }
.addjob:hover, .addjob:focus-visible { border-style:solid; border-color:var(--accent); color:var(--accent); background:var(--surface) }

/* Planning grid, laid out like the spreadsheet */
.sheet-wrap { overflow:auto; max-height:calc(100vh - 112px); border:1px solid var(--line); border-radius:var(--r); background:var(--surface) }
table.sheet { border-collapse:separate; border-spacing:0; width:100%; font-size:14px; table-layout:fixed }
.sheet th, .sheet td { border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:0; height:32px }
.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:6px 4px; text-align:center; border-bottom:2px solid var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.sheet .c-day { width:46px; padding:0 6px; color:var(--muted) }
.sheet .c-date { width:64px; padding:0 6px; font-family:var(--f-mono); font-size:12.5px; white-space:nowrap }
.sheet td.c-day, .sheet td.c-date { position:sticky; background:var(--surface); z-index:2; vertical-align:top; padding-top:7px }
.sheet td.c-day, .sheet th.c-day { left:0 }
.sheet td.c-date, .sheet th.c-date { left:46px }
.sheet th.c-day, .sheet th.c-date { position:sticky; z-index:4 }
.sheet .c-prod { width:clamp(140px,11vw,210px); padding:3px 4px }
.sheet td.c-prod { display:table-cell }
.sheet td.c-prod > * { vertical-align:middle }
.sheet td.c-prod .jobchip { max-width:calc(100% - 30px) }
.sheet td.c-prod .addjob { margin-left:4px; opacity:0 }
.sheet tbody:hover .addjob, .sheet .addjob:focus-visible, .sheet tbody.empty-day .addjob { opacity:1 }
@media (hover:none) { .sheet .addjob { opacity:.6 } }
/* freelancer columns share the remaining width equally (fixed table layout) */
.sheet .c-note { width:clamp(140px,11vw,240px) }
.sheet td.c-note { vertical-align:top; padding:0 }
.sheet textarea.note { display:block; width:100%; height:100%; min-height:32px; border:0; border-radius:0; resize:none; background:transparent; padding:6px 8px; font-size:13px; font-style:italic; color:var(--ink) }
.sheet select.cell { width:100%; height:31px; border:0; border-radius:0; background:transparent; color:inherit; padding:0 4px; font:inherit; font-size:13.5px; text-align:center; text-align-last:center; cursor:pointer; appearance:none; -webkit-appearance:none }
.sheet select.cell:hover { background:color-mix(in srgb, var(--ink) 6%, transparent) }
.sheet select.cell:focus { outline:2px solid var(--accent); outline-offset:-2px }
.sheet select.cell option { color:var(--ink); background:var(--surface) }
.sheet td[class*="col-"] { background:var(--jc) }
.sheet td.nb { background:var(--nb); color:var(--nb-ink); font-weight:700 }
.sheet td.conflict { box-shadow:inset 0 0 0 3px var(--nb) }
.sheet tbody.we td.c-day, .sheet tbody.we td.c-date { font-weight:700; color:var(--ink) }
.sheet tbody.today td.c-day, .sheet tbody.today td.c-date { background:var(--marker-soft) }
.sheet tbody.sunday tr:last-child td, .sheet tbody.sunday td[rowspan] { border-bottom:12px solid var(--line) }
.sheet tbody:target td.c-day, .sheet tbody:target td.c-date { background:var(--marker) }

/* 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:5px 8px }
.cal-day { position:relative; background:var(--surface); min-height:max(104px, calc((100vh - 170px) / 6)); padding:5px; display:flex; flex-direction:column; gap:3px; min-width:0 }
.cal-day.we { background:color-mix(in srgb, var(--surface) 65%, var(--sunk)) }
.cal-day.out { background:var(--sunk) }
.cal-day.out .cal-num { opacity:.5 }
.cal-day:target { box-shadow:inset 0 0 0 2px var(--marker) }
.cal-head { display:flex; align-items:center; justify-content:space-between; gap:4px }
.cal-num { font:700 14px var(--f-display); font-variant-numeric:tabular-nums; color:var(--ink); text-decoration:none; padding:0 4px; border-radius:4px; align-self:flex-start }
a.cal-num:hover { text-decoration:underline }
.cal-day.today .cal-num { background:var(--marker); color:var(--job-ink) }
.cal-wdm { display:none }
.cal-day .addjob { opacity:0 }
.cal-day:hover .addjob, .cal-day .addjob:focus-visible { opacity:1 }
@media (hover:none) { .cal-day .addjob { opacity:.6 } }
.cal-nb { font-size:11.5px; font-weight:600; color:var(--warn); overflow-wrap:anywhere }
.cal-note { font-size:11.5px; font-style:italic; color:var(--muted); overflow-wrap:anywhere; border-top:1px dashed var(--line); padding-top:2px }
/* Freelancer calendar: the empty part of a day toggles NB; jobs open My planning */
.cal-toggle { position:absolute; inset:0; margin:0 }
.cal-toggle button { width:100%; height:100%; background:transparent; border:0; cursor:pointer }
.cal-toggle button:hover { background:color-mix(in srgb, var(--nb) 8%, 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 }
.mine-cal .cal-day > a.jobchip { pointer-events:auto; z-index:1 }
.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 } }

/* Job dialog */
dialog.dlg { width:min(560px, calc(100vw - 24px)); max-height:calc(100vh - 24px); border:0; border-radius:12px; padding:18px; background:var(--surface); color:var(--ink); box-shadow:0 20px 60px rgba(0,0,0,.35) }
dialog.dlg::backdrop { background:rgba(10,15,13,.45) }
.dlg-head { display:flex; justify-content:space-between; align-items:center }
.swatches { gap:8px }
.sw { position:relative; display:block; cursor:pointer }
.sw input { position:absolute; opacity:0; inset:0; cursor:pointer }
.sw span { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--jc, var(--sunk)); border:2px solid color-mix(in srgb, var(--ink) 15%, transparent); color:var(--muted); font-weight:700 }
.sw input:checked + span { border-color:var(--ink); box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--ink) }
.sw input:focus-visible + span { outline:2px solid var(--accent); outline-offset:3px }
.crewpick { max-height:200px; overflow:auto }
.nbmark { font:700 11px var(--f-mono); background:var(--nb); color:var(--nb-ink); padding:1px 5px; border-radius:3px }

/* My planning (freelancer agenda) */
.agenda { display:grid; gap:10px; max-width:1100px }
.ag-day { display:grid; grid-template-columns:64px minmax(0,1fr); gap:12px; align-items:start }
.ag-date { display:grid; justify-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:6px 0; line-height:1.1 }
.ag-day.today .ag-date { background:var(--marker); border-color:var(--marker); color:var(--job-ink) }
.ag-day:target .ag-date { outline:3px solid var(--marker) }
.ag-wd, .ag-mon { font:600 11px var(--f-mono); text-transform:uppercase; letter-spacing:.06em }
.ag-num { font:800 24px var(--f-display) }
.ag-jobs { display:grid; gap:8px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 520px)) }
.ag-job { background:var(--surface); border:1px solid var(--line); border-left:8px solid var(--jc, var(--line)); border-radius:var(--r); padding:10px 14px; display:grid; gap:4px; color:var(--ink) }
.ag-job[class*="col-"] { color:var(--ink) }
.ag-crew { font-size:14px; color:var(--muted) }
.ag-notes { font-size:14px; background:var(--sunk); border-radius:6px; padding:8px 10px; overflow-wrap:anywhere }
.ag-warn { grid-column:1/-1; font-size:13px; font-weight:600; color:var(--warn) }

/* Hours */
.hours-layout { display:grid; gap:14px; grid-template-columns:minmax(280px, 420px) minmax(0, 1fr); align-items:start }
.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) }

@media (max-width:900px) {
  .hours-layout { grid-template-columns:1fr }
}
@media (max-width:640px) {
  header.topbar { gap:0 12px }
  .topbar .tabs { order:3; flex-basis:100%; }
  .topbar .tabs a { padding:8px 10px }
  .topbar .who .role, .topbar .who > span:not(.role) { display:none }
  .toolbar .actions { margin-left:0 }
  .grid2 { grid-template-columns:1fr }
  .cal { grid-template-columns:1fr }
  .cal-wd, .cal-day.out, .cal-day.quiet { display:none }
  .cal-day { min-height:0 }
  .cal-wdm { display:inline; font-weight:400; color:var(--muted) }
  .cal-day .addjob { opacity:1 }
  .sheet-wrap { max-height:calc(100vh - 150px) }
  .ag-day { grid-template-columns:52px minmax(0,1fr); gap:8px }
  .ag-jobs { grid-template-columns:1fr }
  .log { grid-template-columns:1fr 1fr }
  .log .what, .log .wide, .log .btn { grid-column:1/-1 }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important } }

/* Empty extra freelancer columns in the grid */
.sheet .pad { background:color-mix(in srgb, var(--surface) 70%, var(--sunk)) }

/* MyPlanning: hours and km on each job */
.ag-hours { display:grid; grid-template-columns:76px 76px minmax(0,1fr) auto auto; gap:8px; align-items:end; border-top:1px solid var(--line); padding-top:8px; margin-top:4px }
.ag-hours label { font-size:12px }
.ag-hours input { padding:6px 8px; font-size:14px }
.ag-hours .chip { align-self:center }
.card.missing { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:10px 14px; border-color:var(--warn) }
.card.missing .chip { text-decoration:none }
@media (max-width:640px) {
  .ag-hours { grid-template-columns:1fr 1fr }
  .ag-hours .ag-note { grid-column:1/-1 }
}