/* Brand: deep forest on bone.
   The token is still called --amber for historical reasons; it is the single
   accent colour, whatever hue it currently holds. Change it here and the site,
   the board, the admin and the printed sheet all follow.

   Original note, kept because the reasoning still holds:
   Brand: high-vis amber on charcoal. The visual vernacular of the trades —
   hazard tape, hi-vis vests, tool cases. Heavy type, hard edges, no whitespace
   for its own sake. */
:root {
  --ink: #15191a;
  --steel: #232a27;
  --ink-2: #5c6560;
  --line: #e0e3df;
  --bg: #f4f2ee;
  --panel: #ffffff;

  --amber: #2f6b46;
  --amber-hi: #3a8359;
  --amber-soft: #e3eee7;
  /* Text that sits ON the accent. Flip this with --amber. */
  --on-amber: #ffffff;

  --accent: #1f4d31;        /* links and quieter accents */
  --accent-soft: var(--amber-soft);
  --ok: #2f6b46;

  --radius: 6px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Archivo", "Inter", -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 32px 16px 96px; }
.wrap.wide { max-width: 1040px; }

h1 {
  font-family: var(--display);
  font-size: 2.45rem; font-weight: 600; line-height: 1.06;
  margin: 0 0 10px; letter-spacing: -0.028em;
}
h2 {
  font-family: var(--display);
  font-size: 1.6rem; font-weight: 600; line-height: 1.18;
  margin: 38px 0 12px; letter-spacing: -0.02em;
}
h3 { font-size: 1.02rem; font-weight: 600; margin: 20px 0 6px; letter-spacing: -0.012em; }
p  { margin: 0 0 14px; }
a  { color: var(--accent); }

.muted { color: var(--ink-2); }
.small { font-size: 0.875rem; }
.lede { font-size: 1.1rem; color: var(--ink-2); margin-bottom: 24px; }

/* nav ---------------------------------------------------------------- */
.nav {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
}
.nav-inner {
  max-width: 1040px; margin: 0 auto;
  display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap;
}
.nav .brand { font-weight: 700; letter-spacing: -0.01em; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: 0.9rem; }
.nav a:hover { color: var(--accent); }

/* panels -------------------------------------------------------------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}
.panel h2:first-child, .panel h3:first-child { margin-top: 0; }

/* forms --------------------------------------------------------------- */
label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 0.94rem; }
.help { font-size: 0.85rem; color: var(--ink-2); margin: -2px 0 6px; font-weight: 400; }
.field { margin-bottom: 18px; }

input[type=text], input[type=tel], input[type=email], input[type=number],
input[type=date], input[type=time], select, textarea {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; font-size: 0.95rem; background: #fff; color: var(--ink);
}
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent);
}

.choices { display: grid; gap: 8px; }
.choice {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 13px; cursor: pointer; background: #fff; font-weight: 500;
}
.choice:hover { border-color: var(--accent); }
.choice input { margin-top: 3px; }

.btn {
  display: inline-block; border: 0; border-radius: 999px;
  background: var(--amber); color: var(--on-amber);
  font: inherit; font-weight: 800; font-size: 0.95rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 13px 26px; cursor: pointer; text-decoration: none;
  box-shadow: 0 2px 0 rgba(0,0,0,0.18);
}
.btn:hover { background: var(--amber-hi); }
.btn.ghost {
  background: transparent; color: var(--ink);
  border: 2px solid var(--ink); box-shadow: none;
}
.btn.ghost:hover { background: var(--ink); color: #fff; }
.btn.small { padding: 8px 16px; font-size: 0.8rem; }
.btn.danger { background: #7a2420; color: #fff; }

.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row > .grow { flex: 1 1 200px; }

/* tables --------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); }

.tag {
  display: inline-block; font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: 3px; background: var(--amber); color: var(--on-amber);
}
.tag.t2 { background: #e5e9ec; color: var(--ink-2); }

.notice {
  background: var(--amber-soft); border-left: 4px solid var(--amber);
  padding: 12px 14px; margin-bottom: 16px; font-size: 0.92rem;
}

/* slot picker ---------------------------------------------------------- */
.day { margin-bottom: 18px; }
.day h3 { margin: 0 0 8px; font-size: 0.95rem; }
.slots { display: flex; flex-wrap: wrap; gap: 8px; }
.slot {
  border: 1px solid var(--line); background: #fff; border-radius: var(--radius);
  padding: 9px 14px; font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer;
}
.slot:hover { border-color: var(--accent); color: var(--accent); }

/* ---------------------------------------------------------------------
   THE BOARD — a week grid you read like a calendar, with a briefing
   behind every block. Print matters as much as screen: page 1 is the
   grid that goes on the dash, then one briefing per page.
   --------------------------------------------------------------------- */
.board-page .wrap { max-width: 1180px; }
.board-top h1 { font-size: 2.1rem; margin-bottom: 6px; }
.board-top .lede { margin-bottom: 18px; font-size: 1rem; }
.print-head { display: none; }

.cal {
  --hpx: 58px;                      /* one hour, in pixels */
  display: grid;
  grid-template-columns: 62px repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: auto auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

/* day headers ------------------------------------------------------- */
.cal-corner { border-bottom: 1px solid var(--line); }
.cal-head {
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 8px 10px 7px;
  min-width: 0;
}
.cal-head.off { background: #f7f6f3; }
.ch-dow {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-2);
}
.ch-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ch-date {
  font-family: var(--display);
  font-size: 1.7rem; font-weight: 700; line-height: 1.1;
}
.ch-date.today {
  background: var(--amber); color: var(--on-amber);
  border-radius: 999px; padding: 0 9px;
}
.ch-wx { font-size: 0.8rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.ch-load {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.ch-load .open { color: var(--ok); }

/* the time rail ------------------------------------------------------ */
.cal-gutter { border-right: 1px solid var(--line); }
.cal-hr {
  height: var(--hpx);
  position: relative;
  padding-right: 8px;
  text-align: right;
}
.cal-hr span {
  position: relative; top: -0.55em;
  font-size: 0.72rem; font-weight: 700; color: var(--ink-2);
  background: var(--panel); padding-left: 4px;
}
.cal-hr:first-child span { top: 0; }

/* day columns -------------------------------------------------------- */
.cal-col {
  position: relative;
  height: calc(var(--span) * var(--hpx) / 60);
  border-left: 1px solid var(--line);
  min-width: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      var(--line) 0, var(--line) 1px,
      transparent 1px, transparent var(--hpx)
    );
}
.cal-col.off { background-color: #f7f6f3; }

.cal-lunch {
  position: absolute; left: 0; right: 0;
  top: calc(var(--s) * var(--hpx) / 60);
  height: calc(var(--d) * var(--hpx) / 60);
  background: repeating-linear-gradient(
    135deg, rgba(90,100,108,0.055) 0 5px, transparent 5px 10px);
  border-top: 1px dotted #c8ced3;
  border-bottom: 1px dotted #c8ced3;
  pointer-events: none;
}

.cal-now {
  position: absolute; left: 0; right: 0; z-index: 4;
  top: calc(var(--s) * var(--hpx) / 60);
  border-top: 2px solid #c2600c;
  pointer-events: none;
}
.cal-now::before {
  content: ""; position: absolute; left: -4px; top: -5px;
  width: 8px; height: 8px; border-radius: 50%; background: #c2600c;
}

/* the blocks --------------------------------------------------------- */
.ev {
  position: absolute; z-index: 2; overflow: hidden;
  top:    calc(var(--s) * var(--hpx) / 60 + 1px);
  height: calc(var(--d) * var(--hpx) / 60 - 3px);
  left:   calc(var(--lane) / var(--lanes) * 100%);
  width:  calc(100% / var(--lanes) - 4px);
  margin-left: 2px;
  display: flex; flex-direction: column; gap: 1px;
  padding: 4px 7px;
  border-radius: 3px;
  border-left: 3px solid var(--amber);
  background: var(--amber-soft);
  color: var(--ink);
  text-decoration: none;
  line-height: 1.22;
}
.ev:hover { background: #d7e7dd; }
.ev-time { font-size: 0.7rem; font-weight: 800; color: var(--accent); }
.ev-who  { font-size: 0.84rem; font-weight: 700; }
.ev-what {
  font-size: 0.75rem; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A phone booking is occupied time we know nothing about. It should read as
   full — never as whitespace — but visibly duller than a job that came
   through the form. That gap is the sales argument, drawn. */
.ev.t2 {
  background: #eef1f3;
  border: 1px solid #dfe4e8;
  border-left: 3px solid #b6bec4;
}
.ev.t2:hover { background: #e5eaee; }
.ev.t2 .ev-time { color: var(--ink-2); }
.ev.t2 .ev-who { font-weight: 600; }

.cal-key {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-size: 0.82rem; color: var(--ink-2);
  margin: 12px 2px 26px;
}
.cal-key .sw {
  display: inline-block; width: 22px; height: 11px;
  vertical-align: -1px; margin-right: 5px; border-radius: 2px;
}
.cal-key .sw.t1 { background: var(--amber-soft); border-left: 3px solid var(--amber); }
.cal-key .sw.t2 { background: #fff; border: 1px solid var(--line); border-left: 3px solid #b6bec4; }

/* the briefing drawer ------------------------------------------------- */
.brief { display: none; }
.brief:target {
  display: block;
  position: fixed; inset: 0; z-index: 50;
}
.brief-scrim {
  position: absolute; inset: 0;
  background: rgba(20,24,27,0.42);
  display: block;
}
.brief-card {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(560px, 100%);
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: -8px 0 28px rgba(20,24,27,0.18);
  overflow-y: auto;
  padding: 22px 26px 40px;
}
.bf-head {
  position: relative;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 12px; margin-bottom: 16px;
}
.bf-when { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.bf-day  { font-size: 0.95rem; font-weight: 700; }
.bf-time { font-size: 0.88rem; color: var(--ink-2); }
.bf-who  {
  font-family: var(--display); text-transform: uppercase;
  font-size: 1.9rem; margin: 2px 0 6px; line-height: 1.05;
}
.bf-sub { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bf-tel { font-weight: 700; font-size: 0.92rem; text-decoration: none; }
.bf-close {
  position: absolute; top: -6px; right: -6px;
  font-size: 1.6rem; line-height: 1; text-decoration: none;
  color: var(--ink-2); padding: 4px 8px;
}
.bf-close:hover { color: var(--ink); }
.bf-thin { margin-bottom: 14px; }

.jobsheet {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 28px; margin-bottom: 20px;
}
.jobsheet {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 28px; margin-bottom: 20px;
}
.js-head { display: flex; justify-content: space-between; gap: 16px;
  border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 14px; }
.js-when { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; }
.js-who  { font-size: 1.05rem; font-weight: 600; }
.js-dur  { text-align: right; font-size: 0.85rem; color: var(--ink-2); white-space: nowrap; }
.js-block { margin-bottom: 14px; }
.js-block h4 {
  margin: 0 0 6px; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-2);
}
.js-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
.js-kv { display: flex; gap: 8px; font-size: 0.9rem; padding: 3px 0; border-bottom: 1px dotted var(--line); }
.js-kv .k { color: var(--ink-2); flex: 0 0 44%; }
.js-kv .v { font-weight: 600; }
.js-photos { display: flex; gap: 8px; flex-wrap: wrap; }
.js-photos img { width: 150px; height: 112px; object-fit: cover; border: 1px solid var(--line); }
.return-sheet { border: 2px dashed var(--ink-2); border-radius: var(--radius); padding: 14px; margin-top: 16px; }
.return-sheet h4 { margin-top: 0; }
.rs-line { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 12px; font-size: 0.9rem; }
.rs-line .lbl { flex: 0 0 120px; color: var(--ink-2); }
.rs-line .fill { flex: 1; border-bottom: 1px solid var(--ink-2); height: 20px; }
.writein { min-height: 150px; }
.writein .fill { border-bottom: 1px solid var(--line); height: 30px; margin-bottom: 4px; }

/* town cards ---------------------------------------------------------- */
.towns-h { margin-top: 34px; }
.towncard {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 24px; margin-bottom: 16px;
}
.tc-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 14px;
}
.tc-head h2 { margin: 0; font-size: 1.7rem; }
.tc-kicker {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-2);
}
.tag.draft { background: #7a2420; color: #fff; }
.tag.ok    { background: #dcebe1; color: var(--ok); }
.tc-warn {
  background: var(--amber-soft); border-left: 4px solid var(--amber);
  padding: 10px 13px; font-size: 0.88rem; margin: 0 0 14px;
}
.tc-block { margin-bottom: 14px; break-inside: avoid; page-break-inside: avoid; }
.tc-block h4, .js-block h4 {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 6px; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-2);
}
.ic { font-size: 0.95rem; line-height: 1; }
.rules { margin: 0; padding-left: 18px; font-size: 0.9rem; }
.rules li { margin-bottom: 4px; }
.rules-none { font-size: 0.9rem; color: var(--ink-2); font-style: italic; margin: 0; }
.tc-src { font-size: 0.78rem; color: var(--ink-2); margin: 12px 0 0;
  border-top: 1px dotted var(--line); padding-top: 8px; }
/* Only the URL may be broken mid-token — break-all on the whole line was
   splitting "Sep 2026" across two lines as "Sep 202 / 6". */
.tc-src a { overflow-wrap: anywhere; }

/* the pointer on each briefing ---------------------------------------- */
.townstrip {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  border: 1px solid var(--line); border-left: 3px solid var(--amber);
  background: var(--amber-soft);
  padding: 9px 12px; margin: 14px 0; font-size: 0.86rem;
}
.townstrip.draft   { border-left-color: #c2600c; }
.townstrip.unknown { border-left-color: #7a2420; background: #fbf0f0; }
.ts-town { font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }

/* leave-by ------------------------------------------------------------- */
.leaveby {
  display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: baseline;
  border: 2px solid var(--ink); border-radius: var(--radius);
  padding: 8px 12px; margin-bottom: 12px;
}
.lb-label {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-2);
}
.lb-time { font-family: var(--display); font-size: 1.6rem; font-weight: 700; line-height: 1; }
.lb-note { font-size: 0.82rem; color: var(--ink-2); flex: 1 1 100%; }

/* places --------------------------------------------------------------- */
.places { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }
.places li {
  display: flex; flex-wrap: wrap; gap: 3px 8px; align-items: baseline;
  padding: 4px 0; border-bottom: 1px dotted var(--line);
}
.pl-name { font-weight: 700; }
.pl-meta { color: var(--ink-2); font-size: 0.82rem; }
.pl-early {
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--amber); color: var(--on-amber); padding: 1px 6px; border-radius: 2px;
}
.yours { margin: 0 0 6px; font-size: 0.9rem; }

/* Inside the drawer the column is narrow — one pair per row reads better.
   Paper is wide again, so print puts it back to two. */
.brief-card .js-grid { grid-template-columns: 1fr; }

@media (max-width: 860px) {
  .cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cal {
    --hpx: 50px;
    min-width: calc(54px + var(--cols) * 118px);
    grid-template-columns: 54px repeat(var(--cols), 118px);
  }
  .ch-date { font-size: 1.4rem; }
  .ch-load { font-size: 0.66rem; }
  .ev { padding: 3px 5px; }
  .ev-who { font-size: 0.8rem; }
  .ev-what { display: none; }
  .brief-card { width: 100%; top: 8%; border-left: 0; border-top: 3px solid var(--amber); }
}

@media print {
  body { background: #fff; }
  .nav, .noprint { display: none !important; }
  .wrap, .board-page .wrap { padding: 0; max-width: none; }
  a { color: inherit; text-decoration: none; }
  .print-head {
    display: block; font-size: 0.85rem; color: #000;
    border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 10px;
  }

  /* Page 1: the week. This is the sheet that goes on the dash.
     The hour height is whatever makes the working day fill one landscape
     page — a short day should not print as a band across the top. */
  .cal {
    --hpx: min(56px, calc(560px / var(--hours)));
    border-color: #000;
    page-break-after: always; break-after: page;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .cal-key { display: none; }

  /* Then one briefing per page, drawer chrome stripped off. */
  .brief { display: block; position: static; }
  .brief-card {
    position: static; width: auto; overflow: visible;
    border: 0; box-shadow: none; padding: 0 0 12px;
    page-break-after: always; break-after: page;
  }
  .brief-card .js-grid { grid-template-columns: 1fr 1fr; }
  .bf-head { border-bottom-color: #000; }

  /* Never split a section or the write-back box across two sheets — half a
     return sheet is a return sheet nobody fills in. */
  .js-block, .return-sheet, .bf-head, .js-kv, .leaveby, .townstrip {
    break-inside: avoid; page-break-inside: avoid;
  }

  /* Town cards sit between the grid and the briefings: read the town once,
     then work through the jobs in it. */
  .towns-h { display: none; }
  .towncard {
    border: 0; border-radius: 0; padding: 0 0 12px;
    page-break-after: always; break-after: page;
  }
  .tc-head { border-bottom-color: #000; }
  /* Don't let the source footer orphan onto a sheet of its own. */
  .tc-src { break-before: avoid; page-break-before: avoid; }
  .places li { border-bottom-color: #bbb; }

  .jobsheet {
    border: 0; border-radius: 0; padding: 0 0 12px;
    page-break-after: always; break-after: page;
  }
  .writein-sheet { page-break-after: auto; break-after: auto; }
  .js-photos img { width: 180px; height: 135px; }
}