/* Clearslate
   Readable one-handed at arm's length, in daylight, on a roof.
   Charcoal and stone, with burnt orange used sparingly as trim.

   Two rules the colour has to respect:
     * LEAKING must never be mistaken for the orange trim, so it stays
       a deep saturated red and the trim stays earthy.
     * The mortar tag is a warm stone rather than orange, for the same
       reason — one orange on screen, and it means "Clearslate", not
       "urgent" and not "mortar". */

:root {
  --ink:         #1b1e22;
  --paper:       #f5f4f2;
  --card:        #ffffff;
  --line:        #dedbd6;
  --line-soft:   #ebe8e3;
  --muted:       #697079;

  --charcoal:    #2b313a;
  --charcoal-2:  #3b434e;
  --charcoal-3:  #525b67;

  --ember:       #b4531f;   /* burnt orange — trim only */
  --ember-deep:  #8e3f16;
  --ember-tint:  #fbf0e8;

  --rain:        #1f5f8b;   /* wet day — a state, not a brand colour */
  --rain-deep:   #16486a;
  --rain-tint:   #e9f1f7;
  --rain-paper:  #f1f4f7;

  --leak:        #a3160f;   /* deliberately far from the ember */
  --dry:         #16614a;
  --dry-tint:    #e3f0ea;
  --mortar:      #6f5a44;
  --mortar-tint: #f0ebe4;
  --warn:        #8a6400;

  --radius:      10px;
  --radius-sm:   7px;
  --shadow:      0 1px 2px rgba(27, 30, 34, .05), 0 1px 3px rgba(27, 30, 34, .04);
}

* { box-sizing: border-box; }

/* The browser hides [hidden] with a display rule of the lowest possible
   weight, so any `display` we set on a class beats it and the element
   stays on screen. A button hidden in script would then still be
   visible and do nothing when pressed. This settles it once. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: -0.003em;
}

main { max-width: 740px; margin: 0 auto; padding: 18px 16px 72px; }

a { color: var(--ember-deep); }

/* ---------- nav ---------- */

.topnav {
  display: flex; gap: 18px; align-items: center; flex-wrap: nowrap;
  background: var(--charcoal);
  border-bottom: 3px solid var(--ember);
  padding: 13px 16px;
}
.topnav a {
  color: #fff; text-decoration: none; font-weight: 600; font-size: 16px;
  white-space: nowrap;
}
.topnav a:hover { color: #ffd9c2; }
.topnav .brand {
  margin-right: auto; font-size: 19px; font-weight: 700; letter-spacing: .2px;
}
.topnav .muted { opacity: .65; font-weight: 500; }

/* ---------- headline: what am I doing today ---------- */

.headline {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--ember);
  border-radius: var(--radius);
  padding: 16px 18px 18px;
  margin-bottom: 22px;
  box-shadow: var(--shadow);
}
/* ---------- wet day ----------
   The whole page cools down rather than one border changing, so a
   glance from the van tells you which mode you're looking at. The
   nav keeps its orange: the brand doesn't change with the weather.
   The mortar-backlog banner stays amber — that's a caution to act on,
   not a statement about the sky. */

body.raining { background: var(--rain-paper); }
.headline.wet { border-top-color: var(--rain); }
.raining .eyebrow { color: var(--rain); }
.raining .weatherswitch a {
  border-color: var(--rain); color: var(--rain-deep); background: var(--rain-tint);
}
.raining .weatherswitch a:hover { background: #ddeaf4; color: var(--rain-deep); }
.raining h2 { color: var(--rain-deep); border-bottom-color: #d4e2ec; }
.raining .job.dim {
  opacity: .78; border-left: 4px solid var(--rain); background: #fbfcfd;
}
.raining .tag, .raining .days { background: #fff; }

.weatherswitch { text-align: right; margin-bottom: 10px; }
.weatherswitch a {
  font-size: 14px; color: var(--charcoal-2); text-decoration: none; font-weight: 600;
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
  display: inline-block; background: var(--paper);
}
.weatherswitch a:hover { border-color: var(--ember); color: var(--ember-deep); }

.eyebrow {
  margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ember);
}
.headline-job { display: block; text-decoration: none; color: inherit; }
.headline-job .name {
  display: block; font-size: 29px; font-weight: 700; line-height: 1.12;
  letter-spacing: -0.02em;
}
.headline-job .addr { display: block; font-size: 19px; color: var(--muted); margin-top: 2px; }
.headline-job .leak, .headline-job .tag { margin-top: 10px; display: inline-block; }

/* ---------- sections ---------- */

h2 {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 30px 0 10px;
  padding-bottom: 7px; border-bottom: 1px solid var(--line);
}
h3 { font-size: 17px; margin: 16px 0 8px; }
h3.merchant {
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ember-deep); margin: 16px 0 6px;
}
.sub { margin: 0 0 12px; color: var(--muted); font-size: 14.5px; }

/* ---------- job cards ---------- */

.job {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px;
  box-shadow: var(--shadow);
}
.job.dim { opacity: .6; }
.job.cold { border-left: 4px solid var(--leak); }
.job.job-ready { border-left: 4px solid var(--dry); background: #fbfdfc; }

.jobhead { display: block; text-decoration: none; color: inherit; }
.jobhead strong { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.jobhead:hover strong { color: var(--ember-deep); }
.addr { display: block; color: var(--muted); }
.addr.big { font-size: 19px; margin: -2px 0 0; }

.meta {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: 9px 0 0; font-size: 14px; color: var(--muted);
}
.meta form { margin: 0; }
.nudge { margin: 10px 0 0; font-size: 15px; }

/* ---------- badges ---------- */

.leak {
  background: var(--leak); color: #fff; font-weight: 700; font-size: 11.5px;
  letter-spacing: .09em; padding: 4px 9px; border-radius: 4px; line-height: 1;
}
.tag, .days {
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px;
  font-size: 13px; line-height: 1; background: var(--paper);
}
.warn-tag { border-color: #e0cfa6; background: #fdf7e8; color: var(--warn); }
.type {
  font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 4px;
  line-height: 1; white-space: nowrap;
}
.type.dry    { background: var(--dry-tint);    color: var(--dry); }
.type.mortar { background: var(--mortar-tint); color: var(--mortar); }

/* ---------- tasks: tapping, not typing ---------- */

ul.tasks { list-style: none; margin: 12px 0 0; padding: 0; }
ul.tasks li {
  display: flex; gap: 11px; align-items: center; flex-wrap: wrap;
  padding: 9px 0; border-top: 1px solid var(--line-soft);
}
ul.tasks li.done { opacity: .5; }
ul.tasks li.done .taskname { text-decoration: line-through; }
/* On the job page a task is a block, not a single row: the tick line,
   its materials underneath, and a folded-away panel for changing it. */
ul.tasks.big li { display: block; font-size: 18px; }
ul.tasks.big .taskmain {
  display: flex; gap: 11px; align-items: center; flex-wrap: wrap;
}
ul.tasks form { margin: 0; }

.taskedit { margin: 4px 0 2px 58px; }
.taskedit summary {
  display: inline-block; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 600; color: var(--ember-deep);
  padding: 7px 0;
}
.taskedit summary::-webkit-details-marker { display: none; }
.taskedit summary::before { content: "▸ "; }
.taskedit[open] summary::before { content: "▾ "; }
.taskedit summary:hover { text-decoration: underline; }
.taskedit .taskrow { margin-top: 4px; }
.removerow { margin-top: 10px; }

button.destructive-ghost {
  background: #fff; color: var(--leak); border: 1px solid #e3c3c1;
  font-size: 15px; padding: 10px 16px;
}
button.destructive-ghost:hover {
  background: var(--leak); color: #fff; border-color: var(--leak);
}

/* A flex-basis of 0 let a long description collapse into a narrow
   column and wrap four times. Give it a floor, and send the materials
   note to its own line rather than fighting for the same one. */
.taskname { flex: 1 1 130px; min-width: 0; }
/* padding, not margin: a margin on a 100%-basis flex item adds to the
   width and pushes the page sideways. */
ul.tasks.big p.mat { margin: 3px 0 0; padding-left: 58px; }

/* The tick carries the word "Done" so it can't be read as anything else. */
.tick {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 13px 0 11px;
  background: #fff; color: var(--charcoal-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.tick .box {
  width: 21px; height: 21px; flex: 0 0 21px;
  border: 2px solid var(--charcoal-3); border-radius: 5px; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; color: #fff;
}
.tick:hover { border-color: var(--ember); color: var(--ember-deep); }
.tick:hover .box { border-color: var(--ember); }
.tick.on .box { background: var(--dry); border-color: var(--dry); }
.tick.on { color: var(--muted); }
.ticklabel { letter-spacing: .01em; }

.dur, .mat { font-size: 13.5px; color: var(--muted); }

/* Rained-off tasks are a read-only list — no tick, because tapping one
   would be a lie about the weather. They still get named rather than
   counted, so you can see exactly what the rain is holding up. */
ul.tasks.waiting li { padding: 7px 0; font-size: 16px; }
ul.tasks.waiting .taskname { color: var(--charcoal-2); }

/* Finishing is its own deliberate step, never a side effect of a tick. */
.finishbar {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 16px; padding: 13px 16px;
  background: var(--dry-tint); border: 1px solid #c7e0d5;
  border-radius: var(--radius);
}
.finishbar p { margin: 0; font-weight: 600; color: var(--dry); }

/* The finish button was sitting right against the "every task done"
   tag. Give the actions their own band of air, and keep the way back
   beside the way forward. */
.readyactions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 14px;
}
.readyactions form { margin: 0; }
.finishbar .readyactions { margin-top: 0; }

/* ---------- materials, plain lists ---------- */

ul.materials, ul.plain { list-style: none; margin: 0; padding: 0; }
ul.materials li, ul.plain li {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 11px 13px; margin-bottom: 6px;
}
ul.materials .mat { display: block; font-size: 18px; color: var(--ink); }
ul.materials .for { font-size: 14px; color: var(--muted); }

/* ---------- notices ---------- */

.warn {
  background: #fdf7e8; border: 1px solid #e6d7a8; border-left: 4px solid var(--warn);
  border-radius: var(--radius); padding: 13px 15px; color: #6d4f00;
}
.flash {
  background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--ember);
  border-radius: var(--radius); padding: 13px 15px; margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.flash-undo {
  display: flex; gap: 14px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
}
.flash-undo form { margin: 0; }
.empty { color: var(--muted); font-style: italic; }
/* An empty-state line is a sentence, not a row — it shouldn't wear the
   card border and read as a blank input. */
ul.materials li.empty, ul.plain li.empty {
  background: none; border: 0; padding: 0; margin: 0;
}
.problem { margin: 7px 0 0; }

.closed {
  background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--charcoal-3);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 8px;
}
.closed h2 { margin-top: 0; border: 0; padding-bottom: 0; }
.closedhead {
  display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 8px;
}
.closedhead .sub { margin-bottom: 0; }

/* ---------- forms ---------- */

form.stack { display: flex; flex-direction: column; gap: 15px; }

fieldset {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); margin: 0 0 18px; padding: 16px;
  box-shadow: var(--shadow);
}
legend {
  font-weight: 700; font-size: 15px; padding: 0 8px;
  color: var(--ember-deep);
}

label { display: block; font-size: 14px; font-weight: 600; color: var(--muted); }

input, select, textarea {
  display: block; width: 100%; font: inherit;
  padding: 11px 12px; margin-top: 5px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(180, 83, 31, .15);
}
textarea { resize: vertical; }

/* Checkboxes sat in a 13px layout box but were scaled to ~18px, so they
   spilled over the lines above and below. Size the box itself instead. */
label.check {
  display: flex; align-items: center; gap: 12px;
  font-size: 17px; font-weight: 500; color: var(--ink);
  min-height: 46px; padding: 6px 12px; margin: 2px 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); cursor: pointer;
}
label.check:hover { border-color: var(--ember); }
label.check input[type="checkbox"],
label.check input[type="radio"] {
  width: 22px; height: 22px; flex: 0 0 22px;
  margin: 0; padding: 0; transform: none;
  accent-color: var(--ember); cursor: pointer;
}

/* A field that belongs to the tick above it — indented and marked with
   the trim colour so it reads as a consequence of the tick rather than
   another question in the list. */
.subfield {
  margin: 4px 0 2px; padding-left: 13px;
  border-left: 3px solid var(--ember);
}

/* Where the work came from, carried in the trim colour wherever it
   shows: it's a fact about the customer, not about the roof. */
.referral-tag {
  border-color: var(--ember); color: var(--ember-deep);
  background: var(--ember-tint); font-weight: 600;
}

button {
  font: inherit; font-weight: 600; padding: 13px 20px; min-height: 46px;
  background: var(--charcoal); color: #fff;
  border: 1px solid var(--charcoal); border-radius: var(--radius-sm);
  cursor: pointer;
}
button:hover { background: var(--charcoal-2); }

button.primary {
  background: var(--ember); border-color: var(--ember);
}
button.primary:hover { background: var(--ember-deep); border-color: var(--ember-deep); }

/* Finishing is completion, so it takes the same green as the stripe
   down the side of a ready card. Orange stays for moving work forward
   (promoting a quote); green means done. It is also deliberately
   smaller than the Done ticks — it is the last press of a job, not
   the one you make all day with a glove on. */
button.finish {
  background: var(--dry); border-color: var(--dry);
  font-size: 15px; font-weight: 600;
  padding: 10px 17px; min-height: 42px;
}
button.finish:hover { background: #11503c; border-color: #11503c; }

button.small, a.small {
  font-size: 14px; font-weight: 600; padding: 9px 15px; min-height: 40px;
  display: inline-flex; align-items: center;
  text-decoration: none; background: #fff; color: var(--charcoal);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
button.small:hover, a.small:hover { border-color: var(--ember); color: var(--ember-deep); background: #fff; }

button.ghost {
  background: #fff; color: var(--charcoal); border: 1px solid var(--charcoal-3);
  font-size: 15px; padding: 10px 16px;
}
button.ghost:hover { background: var(--ember-tint); border-color: var(--ember); color: var(--ember-deep); }

.taskrow { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; }
.taskrow input, .taskrow select { width: auto; flex: 1 1 150px; margin-top: 0; }
.taskrow button { flex: 0 0 auto; }

.searchbar { display: flex; gap: 9px; margin-bottom: 18px; }
.searchbar input { margin-top: 0; }
.searchbar button { flex: 0 0 auto; }

/* ---------- customer suggestions ---------- */

.suggestions {
  border: 1px solid var(--ember); border-radius: var(--radius-sm);
  background: var(--ember-tint); padding: 9px; margin: 8px 0 2px;
}
.suggestions-head {
  margin: 0 0 7px; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ember-deep);
}
.suggestion {
  display: block; width: 100%; text-align: left;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 6px; min-height: 46px;
  font: inherit; font-weight: 500; cursor: pointer;
}
.suggestion:last-child { margin-bottom: 0; }
.suggestion:hover { background: #fff; border-color: var(--ember); }
.suggestion .s-name { display: block; font-weight: 700; font-size: 16px; }
.suggestion .s-addr { display: block; font-size: 14px; color: var(--muted); }

/* ---------- postcode lookup ---------- */

.pc-note {
  display: flex; gap: 7px; align-items: center; flex-wrap: wrap;
  margin: 8px 0 2px; font-size: 14px;
}
.pc-head { color: var(--muted); font-weight: 600; }
.pc-option {
  background: #fff; color: var(--ember-deep);
  border: 1px solid var(--ember); border-radius: 999px;
  padding: 7px 13px; min-height: 38px;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.pc-option:hover { background: var(--ember-tint); }
.pc-problem { color: var(--leak); font-weight: 600; }

/* ---------- footer ---------- */

.foot {
  max-width: 760px; margin: 34px auto 26px; padding: 0 16px;
  font-size: 13.5px; color: var(--muted); text-align: center;
}
.foot a { color: var(--muted); }
.foot a:hover { color: var(--ember-deep); }

/* ---------- sharing a job or survey ---------- */

.sharebar {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  margin: 12px 0 0;
}
.sharenote { font-size: 14px; color: var(--dry); font-weight: 600; }

/* ---------- promoting a quote ---------- */

.promote {
  display: flex; gap: 14px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  background: var(--ember-tint); border: 1px solid #ecd9c9;
  border-radius: var(--radius); padding: 14px 16px; margin: 4px 0 18px;
}
.promote p { margin: 0; font-weight: 600; }

/* ---------- deleting ---------- */

.rowactions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.rowactions form { margin: 0; }

.dangerzone { margin-top: 36px; }
.dangerzone h2 { color: var(--leak); border-bottom-color: #e9c9c7; }

a.destructive-link { color: var(--leak); border-color: #e3c3c1; }
a.destructive-link:hover { color: #fff; background: var(--leak); border-color: var(--leak); }

.danger {
  background: var(--card); border: 1px solid var(--line);
  border-top: 4px solid var(--leak); border-radius: var(--radius);
  padding: 20px; margin-top: 10px; box-shadow: var(--shadow);
}
.danger h1 { margin: 0 0 14px; font-size: 25px; letter-spacing: -0.02em; }
.danger .target { margin: 0 0 14px; }
.danger .target strong { font-size: 20px; display: block; }
.danger-note {
  background: #fdf1f0; border: 1px solid #f0d4d2; border-radius: var(--radius-sm);
  padding: 12px 14px; margin: 0 0 18px; color: #7a1410;
}
.danger-actions {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap-reverse;
  justify-content: space-between;
}
.danger-actions form { margin: 0; }
button.destructive {
  background: var(--leak); border-color: var(--leak);
}
button.destructive:hover { background: #7f110b; border-color: #7f110b; }

/* ---------- login ---------- */

.login { max-width: 370px; margin: 11vh auto; padding: 0 16px; }
.login h1 {
  font-size: 34px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px;
}
.login h1::after {
  content: ""; display: block; width: 52px; height: 4px;
  background: var(--ember); border-radius: 2px; margin-top: 12px;
}
.login form { display: flex; flex-direction: column; gap: 15px; margin-top: 26px; }

/* ---------- narrow screens ---------- */

@media (max-width: 460px) {
  .headline-job .name { font-size: 25px; }
  .headline-job .addr { font-size: 17px; }
  .taskrow input, .taskrow select { flex: 1 1 100%; }
  /* Six items now, so the nav needs tightening to stay on one line. */
  .topnav { gap: 9px; padding: 10px 11px; }
  .topnav a { font-size: 14px; }
  .topnav .brand { font-size: 16px; letter-spacing: 0; }
  .statcell { font-size: 12.5px; padding: 8px 3px; }
  .statcell b { font-size: 16px; }
  [id] { scroll-margin-top: 86px; }
  /* Twelve months on a phone: keep the month gap but give the bars room. */
  .plot { gap: 5px; }
  .mlabel { font-size: 11px; }
  .closedhead, .flash-undo, .promote {
    flex-direction: column; align-items: stretch;
  }
  .closedhead button, .promote button { width: 100%; justify-content: center; }
  /* The finish button stays its own size even on a phone — it is meant
     to look like a smaller, calmer action than the Done ticks. */
  .finishbar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .danger-actions { flex-direction: column-reverse; align-items: stretch; }
  .danger-actions button, .danger-actions a { width: 100%; justify-content: center; }
  /* No room to indent under the tick on a phone. */
  .taskedit { margin-left: 0; }
  ul.tasks.big p.mat { padding-left: 0; }
}

/* Job value as a band. Deliberately quiet — it's a tiebreaker in the
   ordering, not a headline. Clearslate manages job load; money lives
   in whatever the roofer already invoices with. */
.tag.val-high   { border-color: #c9d6cd; background: var(--dry-tint); color: var(--dry); }
.tag.val-medium { border-color: var(--line); background: var(--paper); color: var(--muted); }
.tag.val-low    { border-color: var(--line); background: var(--paper); color: var(--muted); }

/* ---------- sticky header: nav + headline counts ----------
   Kept deliberately thin. Nav and counts together take about 74px,
   which is roughly 9% of a phone screen — a permanent cost, so it
   buys its place by being three numbers rather than three cards. */

.topbar { position: sticky; top: 0; z-index: 30; }

.statbar {
  display: flex; align-items: stretch;
  background: var(--card); border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  box-shadow: 0 1px 3px rgba(27, 30, 34, .06);
}
.statcell {
  /* Grow from the natural label width, not an equal share: "54 jobs
     com 2026" needs more room than "3 jobs" and was being clipped. */
  flex: 1 1 auto; min-width: 0; text-align: center;
  padding: 9px 4px; font-size: 13.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-right: 1px solid var(--line-soft);
}
.statcell:last-child { border-right: 0; }
.statcell b {
  color: var(--ink); font-size: 17px; font-weight: 700; margin-right: 3px;
  letter-spacing: -0.01em;
}
.statbar:hover .statcell b { color: var(--ember-deep); }

/* Anything the jump link targets has to clear the sticky band. */
[id] { scroll-margin-top: 92px; }

/* Jump to the survey list rather than scrolling past everything.
   Full width under the Today box so the two line up, with the arrow
   pushed to the far edge rather than leaving dead space mid-button. */
.jumplink {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  margin: -12px 0 20px; padding: 11px 16px; min-height: 46px;
  font-size: 15px; font-weight: 600; text-decoration: none;
  color: var(--charcoal); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.jumpleft { display: inline-flex; align-items: center; gap: 9px; }
.jumparrow { font-size: 17px; color: var(--muted); }
.jumplink:hover { border-color: var(--ember); color: var(--ember-deep); }
.jumplink:hover .jumparrow { color: var(--ember); }
.jumpcount {
  background: var(--charcoal); color: #fff; border-radius: 999px;
  padding: 1px 9px; font-size: 13px;
}
.jumplink:hover .jumpcount { background: var(--ember); }

/* ---------- summary chart ----------
   Two series, so a legend is always present. The hues passed the
   colour-blind separation check as a pair; the brand green did not,
   which is why the second series is blue rather than green. */

.chartcard {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow);
}
.chartcard h2 { margin-top: 0; }

.legend { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 14px; font-size: 14px; }
.legend .key { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.legend strong { color: var(--ink); }
.swatch { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
.sw-jobs    { background: #c2541b; }
.sw-surveys { background: #1f6f9c; }

.chart { margin: 4px 0 2px; }
.plot {
  display: flex; align-items: flex-end; gap: 9px;
  height: 170px; border-bottom: 1px solid var(--line);
}
.mgroup { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; height: 100%; }
/* The pair touches and the months are held apart, so the eye compares
   month against month. Safe to let the two fills meet here because the
   hues are far enough apart to pass the colour-blind separation check
   on their own — they do not need a gap to stay readable. */
.bars { flex: 1 1 auto; display: flex; align-items: flex-end; gap: 0; }
.bar {
  flex: 1 1 0; min-width: 0; border-radius: 3px 3px 0 0;
  transition: filter .12s ease;
}
.bar-jobs    { background: #c2541b; }
.bar-surveys { background: #1f6f9c; }
.bar:hover   { filter: brightness(1.12); }
.mlabel {
  flex: 0 0 auto; padding-top: 7px; text-align: center;
  font-size: 12px; font-weight: 600; color: var(--muted);
}

.tableview { margin-top: 16px; }
.tableview summary {
  cursor: pointer; list-style: none; font-size: 14px; font-weight: 600;
  color: var(--ember-deep); padding: 7px 0;
}
.tableview summary::-webkit-details-marker { display: none; }
.tableview summary::before { content: "▸ "; }
.tableview[open] summary::before { content: "▾ "; }
.tableview table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 15px; }
.tableview th, .tableview td {
  text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line-soft);
}
.tableview th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
                color: var(--muted); }
.tableview tfoot td { font-weight: 700; border-bottom: 0; }

.caveat {
  margin: 14px 0 0; font-size: 14px; color: var(--muted);
  border-left: 3px solid var(--line); padding-left: 11px;
}

/* Only drop the year on the genuinely small screens — there is room
   for "54 done in 2026" at 390px. */
@media (max-width: 359px) {
  .statcell .yr { display: none; }
  .statcell { font-size: 12px; }
}