/* Rooted Shores — the crew app.

   Loaded on top of app.css and using its tokens, deliberately. A farmhand who taps the barn
   tablet and then their own phone should meet one product, not two; inventing a second palette
   here would buy novelty with recognition, which is the wrong trade for a tool somebody uses at
   6am in the rain.

   What IS different is the ergonomics. This is one hand, one thumb, sun on the glass, gloves half
   off. So: one column, nothing below 44px, and the whole screen answers one question — what am I
   meant to do next, and can I mark it done.

   The signature is the requirement chip. A task that needs a photo or a reading says so on its
   own row BEFORE anyone starts it, in amber, and the chip is the control: tapping it opens the
   camera. When it has been satisfied it goes green and the tick becomes available. Chips are
   normally decoration; here they are the gate, and they are the reason nobody has to discover
   after the fact that the job was not finished. */

:root {
  --tap: 52px;                  /* the floor for anything a thumb has to hit */
  --bar: 62px;                  /* the tab bar, before the safe-area inset */
}

/* ---- shell ------------------------------------------------------------------------------- */

/* The light palette, re-declared on the crew shell itself so the dark-mode media query in
   app.css (which targets :root) cannot reach it. One app, one look, in the yard and in the
   kitchen at ten at night. */
body.crew {
  /* Sampled from the mockups: a warm cream page, not the greenhouse-linen of the office pages. */
  --paper:   #FEFCF6;
  --card:    #FFFFFF;
  --card-2:  #FAF9F3;
  --ink:     #23211C;
  --muted:   #6F6C63;
  --faint:   #9C978B;
  --line:    #EFEDE3;
  --line-2:  #F4F2EA;
  --deep:    #245A28;   /* headings and section titles */
  --amber:   #E7B434;   /* the second badge colour */
  --sprout:      #3F7A34;
  --sprout-soft: #E8F2E3;
  --water:       #1F6E86;
  --water-soft:  #E2F0F4;
  --sun:         #B4740F;
  --sun-soft:    #FBF0DC;
  --clay:        #A8412A;
  --clay-soft:   #F9E7E2;
  --shadow:   0 1px 2px rgba(33,30,25,.05), 0 6px 20px rgba(33,30,25,.06);
  --shadow-s: 0 1px 2px rgba(33,30,25,.06);
  color-scheme: light;
  background: var(--paper);
  /* `none`, not `contain`: a short page must not rubber-band either. A screen that moves under
     the thumb reads as "there is more down there" when there is not. */
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;

  /* app.css sets `min-height: 100vh` on every page, which is right on a laptop and wrong here.
     On a phone `100vh` is the height of the window with the browser's toolbars HIDDEN, so a page
     whose content fits the screen is still one toolbar taller than the screen — and every short
     page in this app could be scrolled by exactly that much, for nothing. `dvh` is the viewport
     as it actually is at this moment. The vh line stays underneath it for anything too old to
     know dvh, where being able to scroll a little is the lesser fault. */
  min-height: 100vh;
  min-height: 100dvh;
}
/* No tab bar to reserve room for any more; the corner menu costs nothing. */

/* The header scrolls away with everything else.

   It used to be stuck to the top, which on the home screen meant the date and the weather rode
   down the page over the list — a permanent two-line band saying what day it is, in a screen
   whose whole job is the next thing to do. A date is worth reading once. The bar it was pinned
   to also had to be opaque and blurred to stop the list showing through it, which put a hard
   edge across the picture underneath. Letting it go took all of that with it. */
/* Every page's first line starts at the same height. `align-items: center` was putting it
   wherever that page's header happened to be tall enough to allow: the date on the day screen
   began 6px higher than the heading on the weather page, because one header was 90px tall and the
   other 52px and both were centring their contents. Aligning to the TOP makes the measurement the
   padding, which is the same number everywhere. */
.crewtop {
  position: relative; z-index: 2;
  display: flex; align-items: flex-start; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
}
.crewtop .avatar { width: 36px; height: 36px; font-size: 14px; flex: none; }
.crewtop h1 { font-size: 18px; margin: 0; line-height: 1.2; letter-spacing: -.01em; }
.crewtop .sub { font-size: 12.5px; color: var(--muted); line-height: 1.2; }
/* One back arrow, the same on every page. It used to be the "←" CHARACTER, which carries its own
   metrics and sits high and left of the middle of its circle however the circle is centred — so
   the button looked unstyled next to everything else on the screen, which is drawn. */
.crewtop .back {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 50%; background: var(--card); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
  /* Optically centred on the FIRST LINE of the title rather than on the whole header — a header
     with a sub-line under it would otherwise drop the arrow half a line below the words it
     belongs to. The 38px circle against a ~25px line is the -6. */
  align-self: flex-start; margin-top: -6px;
}
.crewtop .back svg {
  width: 19px; height: 19px; display: block; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.crewtop .back:active { background: var(--line-2); }

.crewwrap { max-width: 560px; margin: 0 auto; padding: 14px 14px 24px; }

/* ---- bottom tabs ------------------------------------------------------------------------- */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  display: grid; place-items: center; gap: 2px; height: var(--bar);
  color: var(--muted); text-decoration: none; font-size: 11.5px; font-weight: 600;
}
.tabbar a:hover { text-decoration: none; }
.tabbar a .ic { font-size: 20px; line-height: 1; }
.tabbar a.on { color: var(--sprout); }
.tabbar a .count {
  display: inline-block; margin-left: 5px; vertical-align: 1px;
  background: var(--clay); color: #fff; border-radius: 9px; font-size: 10.5px;
  padding: 0 5px; min-width: 16px; text-align: center; font-weight: 700;
}

/* ---- a project ---------------------------------------------------------------------------- */

.eyebrow.crew {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  margin: 22px 2px 8px; font-weight: 700;
}
.eyebrow.crew:first-child { margin-top: 4px; }

.jobcard {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-s);
  padding: 14px 15px; margin-bottom: 10px; color: inherit; text-decoration: none;
}
.jobcard:hover { text-decoration: none; }
.jobcard:active { transform: scale(.995); }
.jobcard h2 { font-size: 17.5px; margin: 0 0 2px; letter-spacing: -.01em; line-height: 1.25; }
.jobcard .meta { font-size: 13px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.jobcard .bar { height: 6px; border-radius: 3px; background: var(--line-2); margin-top: 11px; }
.jobcard .bar i { display: block; height: 100%; border-radius: 3px; background: var(--sprout); }
.jobcard.up { border-style: dashed; background: var(--card-2); }

/* ---- a task ------------------------------------------------------------------------------- */

.task {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 10px; overflow: hidden;
}
.task.done { background: var(--sprout-soft); border-color: transparent; }
.task.mine { border-left: 3px solid var(--sprout); }

.task .head { display: flex; gap: 12px; padding: 13px 14px; align-items: flex-start; }
.task .title { font-size: 16.5px; font-weight: 600; line-height: 1.3; flex: 1; }
.task.done .title { color: var(--muted); }
.task .who { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

/* The tick. Big, round, and on the left where a thumb reaches without shifting grip. */
.tick {
  flex: none; width: 34px; height: 34px; border-radius: 50%; padding: 0;
  border: 2px solid var(--line); background: var(--card); color: transparent;
  font-size: 17px; font-weight: 700; display: grid; place-items: center; cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.tick:disabled { opacity: .45; cursor: not-allowed; }
.task.done .tick { background: var(--sprout); border-color: var(--sprout); color: #fff; }

/* ---- the chips that gate it ---------------------------------------------------------------- */

.needs { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px 12px 60px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  padding: 7px 11px; border-radius: 999px; border: 1px solid transparent;
  background: var(--sun-soft); color: var(--sun); cursor: pointer;
}
.chip.met { background: var(--sprout-soft); color: var(--sprout); }
.chip.flat { background: var(--line-2); color: var(--muted); cursor: default; }
.chip input[type=file] { display: none; }

.task .panel-in {
  border-top: 1px solid var(--line-2); background: var(--card-2); padding: 12px 14px;
}
.task .panel-in label { font-size: 12.5px; color: var(--muted); display: block; margin-bottom: 5px; }
.task .panel-in input[type=text], .task .panel-in textarea {
  width: 100%; font-size: 16px;             /* 16px or iOS zooms the whole page on focus */
  padding: 11px 12px; border-radius: var(--r-s); border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font-family: inherit;
}
/* No tick column any more — the row of actions at the foot of the box does that job — so the
   text starts where the title starts. */
.task .detail { font-size: 14px; color: var(--muted); padding: 0 14px 12px; line-height: 1.5; }
.task .answer {
  font-size: 14px; padding: 0 14px 12px; color: var(--ink);
}
.task .answer b { color: var(--muted); font-weight: 600; }

.shots { display: flex; gap: 9px; padding: 0 14px 12px; flex-wrap: wrap; }
.shots img { width: 58px; height: 58px; object-fit: cover; border-radius: var(--r-s); }

/* ---- buttons, sized for a thumb ------------------------------------------------------------ */

.crew .btn-big {
  display: block; width: 100%; min-height: var(--tap); font-size: 16.5px; font-weight: 650;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--card);
  color: var(--ink); font-family: inherit; cursor: pointer;
}
.crew .btn-big.go { background: var(--sprout); border-color: var(--sprout); color: #fff; }
.crew .btn-big.ghost { background: transparent; }
/* The same control as a LINK. A <button> centres its own label and an <a> does not, so every big
   link on these screens came out left-aligned and underlined — and each page that noticed patched
   it with its own inline style. One rule instead. */
.crew a.btn-big {
  display: grid; place-items: center; text-decoration: none; padding: 12px 14px; text-align: center;
}

.flash {
  background: var(--sprout-soft); color: var(--sprout); border-radius: var(--r-s);
  padding: 10px 13px; font-size: 14px; font-weight: 600; margin-bottom: 12px;
}
.flash.warn { background: var(--sun-soft); color: var(--sun); }

.nothing {
  text-align: center; padding: 44px 20px; color: var(--muted);
}
.nothing strong { display: block; color: var(--ink); font-size: 17px; margin-bottom: 6px; }

/* ---- sign in ------------------------------------------------------------------------------- */

.signin { max-width: 380px; margin: 0 auto; padding: 8vh 20px 40px; text-align: center; }
.signin img.mark { width: 64px; height: 64px; border-radius: 16px; }
.signin h1 { font-size: 23px; margin: 14px 0 4px; letter-spacing: -.02em; }
.signin p.lede { color: var(--muted); font-size: 14.5px; margin: 0 0 22px; }
.signin input[name=username] {
  width: 100%; font-size: 17px; padding: 14px 15px; text-align: center;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--card);
  color: var(--ink); font-family: inherit;
}
.signin .err {
  background: var(--clay-soft); color: var(--clay); border-radius: var(--r-s);
  padding: 10px 13px; font-size: 14px; font-weight: 600; margin-bottom: 14px;
}

/* ---- the install nudge ---------------------------------------------------------------------- */

/* Bottom sheet rather than a banner at the top: on iOS the Share button it points at is at the
   bottom of the screen, and an arrow that points off the top of the phone explains nothing. */
.install {
  position: fixed; left: 10px; right: 10px; z-index: 40;
  bottom: calc(var(--bar) + env(safe-area-inset-bottom) + 10px);
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 15px 16px;
  max-width: 540px; margin: 0 auto;
}
.install h3 { margin: 0 0 4px; font-size: 15.5px; }
.install p { margin: 0 0 12px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.install .row { display: flex; gap: 8px; }
.install .row button { flex: 1; min-height: 44px; border-radius: var(--r-s); font-size: 14.5px;
  font-weight: 650; font-family: inherit; border: 1px solid var(--line); background: transparent;
  color: var(--ink); cursor: pointer; }
.install .row button.go { background: var(--sprout); border-color: var(--sprout); color: #fff; }
.install kbd {
  font: inherit; font-weight: 700; background: var(--water-soft); color: var(--water);
  border-radius: 5px; padding: 1px 6px;
}

@media (prefers-reduced-motion: reduce) {
  .jobcard:active { transform: none; }
  .tick { transition: none; }
}

/* ---- the project clock ---------------------------------------------------------------------- */

/* First control on a job, full width, one tap. Time against a project is only ever recorded if
   starting it is easier than not bothering. */
.clock { margin: 0 0 12px; }
.clock .reading {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--sprout); margin-bottom: 7px;
}
.clock .reading.other { color: var(--muted); font-weight: 500; }
.clock .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--sprout); flex: none;
  animation: tick 2s ease-in-out infinite;
}
@keyframes tick { 50% { opacity: .35; } }
.clock.on .btn-big { border-color: var(--sprout); color: var(--sprout); font-weight: 650; }

/* ---- the way back to the plan ---------------------------------------------------------------- */

.safetylink {
  display: flex; align-items: center; gap: 11px; margin: 0 0 14px;
  padding: 11px 14px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); color: inherit; text-decoration: none;
}
.safetylink:hover { text-decoration: none; }
.safetylink.stale { border-color: var(--clay); background: var(--clay-soft); }
.safetylink .ic { display: grid; place-items: center; width: 22px; color: var(--muted); }
.safetylink .ic svg { width: 17px; height: 17px; }
.safetylink.stale .ic { color: var(--clay); }
.safetylink .lbl { flex: 1; font-size: 14.5px; font-weight: 600; }
.safetylink .lbl em { display: block; font-style: normal; font-size: 12.5px; font-weight: 500;
  color: var(--muted); }
.safetylink .go { color: var(--faint); font-size: 20px; }

/* ---- gear marks, and the index that explains them --------------------------------------------- */

.task { position: relative; }
/* In the corner of the box rather than in the line of the title: inline, they broke the column of
   names the eye runs down, and they were read as part of the sentence. */
.task .gear {
  position: absolute; top: 10px; right: 12px; display: flex; gap: 7px; color: var(--muted);
}
.task .gear svg { width: 17px; height: 17px; display: block; }
.task.done .gear { opacity: .4; }
.task .head { padding-right: 96px; }

.legend {
  margin: 18px 2px 0; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  color: var(--muted); font-size: 12.5px;
}
.legend .k {
  width: 100%; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); font-weight: 700;
}
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: grid; place-items: center; }
.legend svg { width: 15px; height: 15px; display: block; }

/* ---- one row of actions per task -------------------------------------------------------------- */

.acts { display: flex; gap: 8px; padding: 0 12px 12px; }
.acts.shot-row { padding-bottom: 8px; }
.acts form { flex: 1; display: flex; }
/* One button shape, wherever it is used — the composer's camera button is the same object as a
   task's, and scoping the look to .acts left it as unstyled left-aligned text. */
.act {
  flex: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-s); border: 1px solid var(--line); background: var(--card);
  color: var(--ink); font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  text-align: center; padding: 0 10px;
}
.act.done { background: var(--sprout); border-color: var(--sprout); color: #fff; }
.act.done:disabled { opacity: .4; }
.act.met { background: var(--sprout-soft); border-color: transparent; color: var(--sprout); }
.act input[type=file] { display: none; }
.task.done .acts { padding-top: 2px; }

/* Unclaimed is a fact, not a warning: it should not be the loudest thing in the box. */
.task .who.nobody { color: var(--faint); }

/* ---- photos on a task ------------------------------------------------------------------------- */

.shots .shot { position: relative; }
.shots .shot form { position: absolute; top: -5px; right: -5px; }
.shots .shot button {
  width: 22px; height: 22px; border-radius: 50%; padding: 0; line-height: 1;
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  font-size: 14px; cursor: pointer; display: grid; place-items: center;
}

.clockbar {
  display: flex; align-items: center; gap: 9px; margin: 4px 0 14px; padding: 11px 14px;
  border-radius: var(--radius); background: var(--sprout-soft); color: var(--sprout);
  border: 1px solid transparent; text-decoration: none; font-size: 14px; font-weight: 600;
}
.clockbar:hover { text-decoration: none; }
.clockbar strong { font-weight: 750; }
.clockbar span:nth-child(2) { flex: 1; }
.clockbar .go { font-size: 19px; opacity: .6; }

/* The project's own mark in the top bar. This lived in a <style> block inside the project
   template, which meant the safety screen — which uses the same markup — drew it as a black
   square, and it vanished from the project page when that block did. */
.picon {
  flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center;
  color: var(--sprout);
}
/* Line art, like the board's: these paths carry no fill of their own, so left alone the project
   mark drew as a solid black square in the top bar. */
.picon svg.i {
  width: 24px; height: 24px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---- start with a photo ----------------------------------------------------------------------- */

.startshot {
  display: block; margin: -4px 0 12px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--sun-soft); border: 1px dashed var(--sun); color: var(--sun);
  text-decoration: none;
}
.startshot:hover { text-decoration: none; }
.startshot b { display: block; font-size: 14.5px; font-weight: 700; }
.startshot em { font-style: normal; font-size: 12.5px; opacity: .85; }

/* ---- what's been happening --------------------------------------------------------------------- */

.composer {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 11px; margin-bottom: 12px;
}
.composer textarea {
  width: 100%; font-size: 16px;                /* 16px or iOS zooms the page on focus */
  border: 0; background: transparent; color: var(--ink); font-family: inherit; resize: vertical;
  padding: 2px 2px 6px;
}
.composer textarea:focus { outline: none; }
.composer .row { display: flex; gap: 8px; border-top: 1px solid var(--line-2); padding-top: 9px; }
.composer .act { flex: 1; min-height: 42px; }
.composer .act.post { background: var(--sprout); border-color: var(--sprout); color: #fff; }

.update {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 13px; margin-bottom: 9px;
}
.update .meta { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.update .meta .name { font-weight: 650; color: var(--ink); }
.update .meta .when { margin-left: auto; }
.update .meta .on {
  flex-basis: 100%; color: var(--faint); margin-left: 29px; margin-top: -2px;
}
.update p { margin: 7px 0 0; font-size: 14.5px; line-height: 1.5; }
.update .shots { padding: 9px 0 0; }
.update .shots img { width: 76px; height: 76px; }

/* The feed's own avatar. The shell's is styled by the top bar rule, so out here it drew as a
   blank hole where somebody's initials should be. */
.update .avatar {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--line-2); color: var(--muted);
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
}

/* ---- handing a job over ------------------------------------------------------------------------- */

.handover { padding: 6px 2px 20px; }
.handover h2 { font-size: 21px; margin: 0 0 6px; letter-spacing: -.02em; }
.handover .lede { color: var(--muted); font-size: 14.5px; margin: 0 0 16px; line-height: 1.5; }
.handover textarea {
  width: 100%; font-size: 16px; padding: 12px 13px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-family: inherit; resize: vertical; margin-bottom: 10px;
}
.handover textarea:focus { outline: none; border-color: var(--sprout); }
.handover .shot { display: grid; place-items: center; cursor: pointer; }
.handover .skip {
  display: block; text-align: center; margin-top: 16px; color: var(--muted); font-size: 14.5px;
}

/* ---- the corner actions ------------------------------------------------------------------------ */

.topacts { display: flex; gap: 8px; flex: none; }
.tact {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line); color: var(--muted);
  text-decoration: none;
}
.tact:hover { text-decoration: none; }
.tact svg { width: 18px; height: 18px; display: block; }
.tact svg.i { fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.tact.stale { border-color: var(--clay); background: var(--clay-soft); color: var(--clay); }

/* ---- what is already done ----------------------------------------------------------------------- */

.donebox { margin: 2px 0 6px; }
.donebox summary {
  list-style: none; cursor: pointer; padding: 9px 4px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
}
.donebox summary::-webkit-details-marker { display: none; }
.donebox summary::after { content: " ▾"; }
.donebox[open] summary::after { content: " ▴"; }
.donebox ul { list-style: none; margin: 0 0 6px; padding: 8px 12px; background: var(--sprout-soft);
  border-radius: var(--radius); }
.donebox li {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
  font-size: 13px; color: var(--muted);
}
.donebox li .what { flex: 1; min-width: 0; text-decoration: line-through; }
.donebox li em { font-style: normal; font-size: 11.5px; color: var(--sprout); font-weight: 650; }
.donebox li button {
  width: 26px; height: 26px; padding: 0; border-radius: 50%; flex: none;
  border: 1px solid transparent; background: transparent; color: var(--muted);
  font-size: 13px; cursor: pointer;
}

/* ---- signing in: the two seconds after the fourth digit ---------------------------------------- */

.pinstate {
  margin: 8px 0 0; font-size: 13.5px; font-weight: 600; color: var(--muted);
  animation: breathe 1.1s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: .4; } }

/* Working: the dots keep moving so the wait has a heartbeat rather than being a frozen screen. */
.pindots.working i { animation: pulse 1s ease-in-out infinite; }
.pindots.working i:nth-child(2) { animation-delay: .12s; }
.pindots.working i:nth-child(3) { animation-delay: .24s; }
.pindots.working i:nth-child(4) { animation-delay: .36s; }
@keyframes pulse { 50% { transform: scale(.62); opacity: .45; } }

/* Wrong: the dots throw it off, the way a lock does. */
.pindots.wrong { animation: nope .45s ease; }
.pindots.wrong i { background: var(--clay); }
@keyframes nope {
  20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

.pinpad.off { opacity: .45; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .pinstate, .pindots.working i, .pindots.wrong { animation: none; }
}

/* A wait is not an error. It is amber while it runs down and green when it clears, so the screen
   answers "can I try yet" without anybody tapping to find out. */
.err.wait { background: var(--sun-soft); color: var(--sun); }
.err.wait.ready { background: var(--sprout-soft); color: var(--sprout); }

/* ---- the clock, as one line -------------------------------------------------------------------- */

.clockbar2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.clockbar2 button {
  flex: 1; min-height: var(--tap); border-radius: var(--radius); font-family: inherit;
  font-size: 16.5px; font-weight: 650; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.clockbar2 button.go { background: var(--sprout); border-color: var(--sprout); color: #fff; }
.clockbar2.on {
  background: var(--sprout-soft); border-radius: var(--radius); padding: 8px 10px 8px 14px;
}
.clockbar2.on button { flex: 0 0 auto; min-height: 42px; padding: 0 20px; }
.clockbar2 .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--sprout); flex: none;
  animation: tick 2s ease-in-out infinite;
}
.clockbar2 .reading {
  flex: 1; font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 700;
  color: var(--sprout);
}
.clockbar2 .elsewhere { font-size: 12.5px; color: var(--muted); flex: none; max-width: 40%; }

/* ---- where it's at ----------------------------------------------------------------------------- */

.latest {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 11px 13px; margin: 0 0 14px;
  color: inherit; text-decoration: none;
}
.latest:hover { text-decoration: none; }
.latest .meta { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.latest .meta .name { font-weight: 650; color: var(--ink); }
.latest .meta .when { margin-left: auto; }
.latest .avatar {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: var(--line-2); color: var(--muted); font-size: 10.5px; font-weight: 700;
}
.latest p {
  margin: 7px 0 0; font-size: 14.5px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.latest .strip { display: flex; gap: 6px; margin-top: 9px; }
.latest .strip img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-s); }
.latest .more { display: block; margin-top: 9px; font-size: 12.5px; color: var(--sprout);
  font-weight: 650; }

/* ---- what's finished, one line ------------------------------------------------------------------ */

.donelink {
  display: flex; align-items: center; gap: 9px; padding: 11px 13px; margin: 2px 0 14px;
  border-radius: var(--radius); background: var(--sprout-soft); color: var(--sprout);
  text-decoration: none; font-size: 14px; font-weight: 650;
}
.donelink:hover { text-decoration: none; }
.donelink em {
  flex: 1; min-width: 0; font-style: normal; font-weight: 500; font-size: 13px; opacity: .85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.donelink .go { font-size: 19px; opacity: .6; }

.donerow {
  display: flex; align-items: flex-start; gap: 10px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 13px;
  margin-bottom: 8px;
}
.donerow .what { flex: 1; min-width: 0; }
.donerow .title { font-size: 15px; font-weight: 600; }
.donerow .meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.donerow .ans { font-size: 13px; margin-top: 5px; }
.donerow button {
  flex: none; min-height: 36px; padding: 0 12px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  font-family: inherit; font-size: 13px; cursor: pointer;
}

/* the composer's own page */
.thumbs { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.thumbs img { width: 68px; height: 68px; object-fit: cover; border-radius: var(--r-s); }

/* A photograph is sent the moment it is taken, so the thumbnail has to say which of three states
   it is in. Sending is dimmed and striped; sent carries a tick; one that could not go carries a
   dot and the words say it will ride along with Save. Without this, "it's uploading" is a claim
   somebody has to take on trust while standing in a field with one bar. */
.thumbs .tile { position: relative; width: 68px; height: 68px; }
.thumbs .tile img { width: 100%; height: 100%; display: block; }
.thumbs .tile .state {
  position: absolute; right: 3px; bottom: 3px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 800; line-height: 1;
  background: var(--card); color: var(--muted); box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.thumbs .tile.sending img { opacity: .45; }
.thumbs .tile.sending .state { color: var(--water); }
.thumbs .tile.sent .state { background: var(--sprout); color: #fff; }
.thumbs .tile.failed .state { background: var(--sun); color: #fff; }
.sendnote { font-size: 12.5px; color: var(--muted); margin: 8px 2px 0; }

@keyframes rs-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
.thumbs .tile.sending .state { animation: rs-pulse 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .thumbs .tile.sending .state { animation: none; } }

/* the + in the corner reads as an action, not a link */
.tact.add { border-color: var(--sprout); color: var(--sprout); }

/* ---- the day's routines ------------------------------------------------------------------------ */

.routine {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 10px; overflow: hidden;
}
.routine.live { border-color: var(--sprout); }
.routine summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px;
  padding: 14px 15px; font-size: 16.5px; font-weight: 650;
}
.routine summary::-webkit-details-marker { display: none; }
.routine .ttl { flex: 1; }
.routine .who { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.routine .count {
  font-size: 12.5px; font-weight: 700; color: var(--muted);
  background: var(--line-2); border-radius: 999px; padding: 3px 9px;
}
.routine .count.all { background: var(--sprout-soft); color: var(--sprout); }
.routine .blurb { margin: 0 15px 10px; font-size: 13px; color: var(--muted); }

.ritem { display: flex; gap: 11px; padding: 10px 15px; border-top: 1px solid var(--line-2); }
.ritem .body { flex: 1; min-width: 0; }
.ritem .title { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.ritem.done .title { color: var(--muted); text-decoration: line-through; }
.ritem .detail { font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.ritem .meta { font-size: 12px; color: var(--faint); margin-top: 3px; display: flex;
  align-items: center; gap: 8px; }
.ritem .gear { display: inline-flex; gap: 5px; }
.ritem .gear i { display: grid; place-items: center; }
.ritem .gear svg { width: 14px; height: 14px; display: block; color: var(--muted); }
.ritem .tick { width: 30px; height: 30px; font-size: 15px; }
.ritem.done .tick { background: var(--sprout); border-color: var(--sprout); color: #fff; }

.rclock { padding: 11px 15px 14px; border-top: 1px solid var(--line-2);
          display: flex; gap: 8px; }
.rclock form { flex: 1; display: flex; }
.rclock button {
  width: 100%; min-height: 46px; border-radius: var(--r-s); font-family: inherit;
  font-size: 15px; font-weight: 650; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.rclock button.go { background: var(--sprout); border-color: var(--sprout); color: #fff; }
.rclock button.hand { color: var(--muted); }
.rclock form:has(.hand) { flex: 0 0 auto; }

/* ---- the two prompts ---------------------------------------------------------------------------- */

/* Both of these clear themselves, which is the only reason either is allowed on the page. The
   switch nudge is for a routine with THIS person's name on it and goes when they switch; the
   cover card goes off everybody's phone the moment one person taps it. A prompt that cannot be
   answered is wallpaper by Wednesday. */
.nudge {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
  background: var(--sprout-soft); border: 1px solid transparent; border-radius: var(--radius);
  padding: 13px 14px;
}
.nudge b { display: block; font-size: 15.5px; color: var(--sprout); line-height: 1.3; }
.nudge em { display: block; font-style: normal; font-size: 13px; color: var(--muted);
            margin-top: 3px; line-height: 1.45; }
.nudge > div { flex: 1; min-width: 0; }
.nudge button {
  flex: none; min-height: 44px; padding: 0 16px; border-radius: var(--r-s);
  font-family: inherit; font-size: 15px; font-weight: 650; cursor: pointer;
  background: var(--sprout); border: 1px solid var(--sprout); color: #fff;
}
.nudge.cover { background: var(--sun-soft); }
.nudge.cover b { color: var(--sun); }
.nudge.cover button { background: var(--sun); border-color: var(--sun); }


/* ---- the corner menu --------------------------------------------------------------------------- */

.crewtop .menu {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 50%; border: 1px solid var(--line); background: var(--card);
  color: var(--muted); text-decoration: none;
}
.crewtop .menu svg {
  width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round;
}

/* ---- one line per job -------------------------------------------------------------------------- */

/* The whole point of the redesign. A job is a short name and a circle to tap; everything the job
   HAS — the sentence explaining it, the gear, the question it asks — is behind the row, opened by
   tapping it. The old list put all of that on screen at once and came to 4,800 pixels. */
.jobs { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 14px; }
/* A row that happens to be a link is still a row: the browser's blue is for prose, not for a
   list of jobs. */
.jobs a, .jobs a:hover { color: inherit; text-decoration: none; }
.job { border-top: 1px solid var(--line-2); }
.job:first-child { border-top: 0; }

/* `jobrow`, not `row`: app.css owns `.row` as a form-layout utility that gives every child
   `min-width: 140px`, which stretched the little tick form to 140px and pushed the name into the
   middle of the row. A shared class name is a collision waiting for a redesign. */
.jobrow {
  display: flex; align-items: center; gap: 12px; padding: 0 14px 0 12px;
  list-style: none;           /* Safari draws a disclosure triangle on a summary otherwise */
}
.jobrow::-webkit-details-marker { display: none; }
.jobrow > form { flex: 0 0 auto; display: flex; }
.job .tick {
  flex: none; width: 27px; height: 27px; border-radius: 50%; padding: 0; font-size: 14px;
  border: 2px solid var(--line); background: var(--card); color: transparent;
  display: grid; place-items: center; cursor: pointer;
}
.job.done .tick { background: var(--sprout); border-color: var(--sprout); color: #fff; }
.job .open {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 15px 0; background: none; border: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer; text-decoration: none;
}
.job .name {
  flex: 1; min-width: 0; font-size: 16px; font-weight: 600; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.job.done .name { color: var(--muted); text-decoration: line-through; }
.job .tag { font-size: 12px; color: var(--faint); flex: none; }
.job .gear { display: inline-flex; gap: 5px; flex: none; }
.job .gear svg { width: 15px; height: 15px; display: block; color: var(--faint); }
.job .chev { color: var(--line); font-size: 17px; flex: none; }

.job .more {
  padding: 0 14px 14px 51px; font-size: 14px; color: var(--muted); line-height: 1.5;
}
.job .more p { margin: 0 0 10px; }
.job .more input[type=text] {
  width: 100%; font-size: 16px; padding: 10px 12px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: var(--card); color: var(--ink); font-family: inherit;
}
.job .more .act { margin-top: 8px; }

.blockhead {
  display: flex; align-items: baseline; gap: 8px; margin: 20px 2px 8px;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  font-weight: 700;
}
.blockhead .rest { margin-left: auto; letter-spacing: 0; text-transform: none; font-size: 12.5px;
  font-weight: 600; color: var(--muted); text-decoration: none; }

/* what somebody is on, said once, without a clock */
.onnow {
  display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; padding: 13px 15px;
  border-radius: var(--radius); background: var(--sprout); color: #fff;
  text-decoration: none; font-size: 15.5px; font-weight: 650;
}
.onnow:hover { text-decoration: none; }
.onnow .go { margin-left: auto; opacity: .8; font-size: 19px; }
.onnow em { font-style: normal; font-weight: 500; opacity: .85; font-size: 13px; display: block; }

body.crew .eggform { margin-bottom: 0; }
body.crew .eggform + * { margin-top: 0; }

/* ---- the egg round ----------------------------------------------------------------------------- */

/* Nine rows and two columns of numbers have to fit a phone with room for the total and the button.
   Tight, not cramped: the number cells are still the biggest things on the row, because they are
   what a thumb is aiming at. */
.eggrows { display: grid; gap: 5px; margin-bottom: 10px; }
.egghead {
  display: grid; grid-template-columns: 1fr 92px 92px; gap: 8px; padding: 0 8px 2px 14px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint); text-align: center;
}
.egghead span:first-child { text-align: left; }
/* Nine rows, a total and a button have to fit ONE screen with nothing to scroll to. They did not
   — the page came out 56px taller than the phone, so it could be dragged to reveal the bottom of
   a button and then some blank paper, which reads as "there is more down here" when there is not.
   Every number below is a few pixels off a row, taken nine times. */
.eggrow {
  display: grid; grid-template-columns: 1fr 92px 92px; gap: 8px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 3px 8px 3px 14px;
}
/* The letter that is painted on the coop door, and nothing else. */
.eggrow .who { font-size: 21px; font-weight: 800; color: var(--deep); }
.eggrow .who.wide { font-size: 16px; }
.numcell {
  text-align: center; font-size: 20px; font-weight: 700; font-family: inherit;
  padding: 9px 8px; border-radius: var(--r-s); border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.numcell:active { background: var(--line-2); }
.numcell.floor { color: var(--muted); }
/* A figure still sitting in the phone's queue, waiting for signal. Marked rather than warned
   about: it is written down and it will go, and a coop out of range is a normal morning. */
.numcell.saving { opacity: .55; }
.numcell.unsaved { border-color: var(--sun); border-style: dashed; }
.eggtotal .waiting { flex: 1; font-size: 12.5px; color: var(--sun); }

/* The pad. Fixed to the foot, above the tab bar, and the page gets padding under it so the last
   coop is never hidden behind the thing being used to fill it in. */
.numpad {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--card); border-top: 1px solid var(--line);
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(33,30,25,.10);
}
body.crew.padded { padding-bottom: 340px; }
body.crew.padded .footbar { display: none; }
.padtop {
  display: flex; align-items: center; gap: 12px; padding: 2px 4px 10px;
}
.padwhat { flex: 1; min-width: 0; font-size: 13.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.padval { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.paddone {
  flex: none; border: 0; background: var(--sprout); color: #fff; font-family: inherit;
  font-size: 15px; font-weight: 700; padding: 9px 18px; border-radius: var(--r-s); cursor: pointer;
}
.padkeys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.padkeys button {
  min-height: 58px; font-size: 24px; font-weight: 700; font-family: inherit;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: 12px; cursor: pointer;
}
.padkeys button:active { background: var(--line-2); }
.padkeys .k-wide { font-size: 15px; font-weight: 650; color: var(--muted); }
.eggtotal {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin: 0 4px 8px; font-size: 14px; color: var(--muted);
}
.eggtotal b { font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }

.onnow.plain { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.onnow.plain em { opacity: 1; color: var(--muted); }

/* ---- taking a job on --------------------------------------------------------------------------- */

/* Not a clock. The old control counted the minutes up, which is the app watching somebody work;
   what matters is whose the job is, and that the crew can see it. */
.taking { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.taking button {
  flex: 1; min-height: var(--tap); border-radius: var(--radius); font-family: inherit;
  font-size: 16.5px; font-weight: 650; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.taking button.go { background: var(--sprout); border-color: var(--sprout); color: #fff; }
.taking.on {
  background: var(--sprout-soft); border-radius: var(--radius); padding: 9px 10px 9px 15px;
}
.taking.on button { flex: 0 0 auto; min-height: 42px; padding: 0 16px; }
.taking .mine { flex: 1; font-size: 15.5px; font-weight: 700; color: var(--sprout); }
.taking .mine em {
  display: block; font-style: normal; font-size: 12.5px; font-weight: 500; opacity: .85;
}
.taking .elsewhere { font-size: 12.5px; color: var(--muted); flex: none; max-width: 45%; }

.job.mine { border-left: 3px solid var(--sprout); }
.job .more .gate { color: var(--sun); margin: 8px 0 0; font-size: 13px; }
.job .more label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
.job .more form { margin-top: 10px; }
.job .more .shots { padding: 0; margin-top: 10px; }

/* A whole round, folded into one line. Open, its jobs sit inside without a second border. */
.job.round .roundjobs { padding: 0 0 6px; }
.job.round .roundjobs .jobs { border: 0; border-radius: 0; margin: 0; background: none; }
.job.round .roundjobs .jobrow { padding-left: 24px; }

/* A job carried over from a day that has passed. Stated, not scolded. */
.job .tag.late { color: var(--sun); }


/* ---- settings: a door, and nothing that counts anybody's minutes ------------------------------ */

.settingrow {
  display: flex; align-items: center; padding: 17px 4px; border-bottom: 1px solid var(--line-2);
  color: var(--ink); text-decoration: none; font-size: 17px;
}
.settingrow:hover { text-decoration: none; }
.settingrow .go { margin-left: auto; color: var(--faint); font-size: 20px; }
.signout { margin-top: 26px; }
.signout button {
  width: 100%; min-height: 52px; border-radius: 14px; border: 1px solid var(--line);
  background: transparent; color: var(--muted); font-family: inherit; font-size: 16px;
  cursor: pointer;
}
.quiet { margin: 10px 4px 0; font-size: 13.5px; color: var(--faint); line-height: 1.5; }

/* The header carries the round, not a person. Bigger, because it is the only orientation on the
   screen and it is read at arm's length. */
.crewtop h1 { font-size: 21px; letter-spacing: -.015em; }

/* The negative top margin here was pulling "Later today" up against whatever ended above it —
   it was compensating for a trailing gap that the day screen no longer has now that the lists
   are sectioned. A fold needs air above it or it reads as a caption on the last card. */
.restofit { margin: 14px 0 26px; }
.restofit summary {
  list-style: none; cursor: pointer; padding: 12px 4px; font-size: 15px; color: var(--muted);
}
.restofit summary::-webkit-details-marker { display: none; }
.restofit summary::after { content: " ›"; }
.restofit[open] summary::after { content: " ⌄"; }

/* ---- the sky, in the corner -------------------------------------------------------------------- */

/* ---- the sky ------------------------------------------------------------------------------- */

/* The corner: one icon, tappable, no reading required. */
.skybtn {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; background: var(--card); border: 1px solid var(--line);
  color: var(--water); text-decoration: none;
}
.skybtn:hover { text-decoration: none; }
.skybtn svg.i {
  width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
/* ---- printing labels ---------------------------------------------------------------------------- */

.prints { display: grid; gap: 10px; margin-top: 6px; }
.printrow {
  display: flex; align-items: center; gap: 12px; padding: 14px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  text-decoration: none; color: var(--ink);
}
.printrow:hover { text-decoration: none; }
.printrow .pic { font-size: 24px; flex: none; }
.printrow .x { flex: 1; min-width: 0; }
.printrow b { display: block; font-size: 16.5px; font-weight: 650; }
.printrow em { display: block; font-style: normal; font-size: 13px; color: var(--muted);
               margin-top: 2px; }
.printrow .go { flex: none; color: var(--faint); font-size: 20px; }

/* The page behind it. Now, then the next day by the hour, then the week by the day — the order
   somebody asks the questions in. */
.wxnow { text-align: center; padding: 10px 0 4px; }
.wxnow .mark svg.i {
  width: 62px; height: 62px; fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; color: var(--water);
}
.wxnow .deg {
  font-size: 74px; font-weight: 300; letter-spacing: -.04em; color: var(--deep); line-height: 1;
}
.wxnow .deg span { font-weight: 200; }
.wxnow .what { font-size: 18px; font-weight: 650; color: var(--ink); margin-top: 6px; }
.wxnow .feel { font-size: 14.5px; color: var(--muted); margin-top: 2px; }

.wxstrip {
  display: flex; gap: 2px; overflow-x: auto; margin: 18px -14px 0; padding: 12px 14px;
  background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.wxstrip::-webkit-scrollbar { display: none; }
.wxstrip .h {
  flex: none; width: 58px; display: grid; justify-items: center; gap: 6px; padding: 6px 0;
  border-radius: 14px;
}
.wxstrip .h.now { background: var(--wash); }
.wxstrip .h .t { font-size: 12.5px; font-weight: 650; color: var(--muted); }
.wxstrip .h svg.i {
  width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; color: var(--water);
}
.wxstrip .h .d { font-size: 16px; font-weight: 700; color: var(--ink); }
.wxstrip .h .p { font-size: 11.5px; font-weight: 650; color: var(--water); min-height: 14px; }

.wxh {
  font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--deep); margin: 24px 2px 10px;
}

.wxdays {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
}
.wxdays .d {
  display: grid; grid-template-columns: 62px 26px 34px 34px 1fr 34px;
  align-items: center; gap: 8px; padding: 11px 14px; border-top: 1px solid var(--line-2);
}
.wxdays .d:first-child { border-top: 0; }
.wxdays .nm { font-size: 15px; font-weight: 650; color: var(--ink); }
.wxdays svg.i {
  width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; color: var(--water);
}
.wxdays .p { font-size: 12px; font-weight: 650; color: var(--water); }
.wxdays .lo { font-size: 14.5px; color: var(--faint); text-align: right; }
.wxdays .hi { font-size: 14.5px; font-weight: 700; color: var(--ink); text-align: right; }
.wxdays .range { position: relative; height: 5px; border-radius: 3px; background: var(--line-2); }
.wxdays .range i {
  position: absolute; top: 0; bottom: 0; border-radius: 3px;
  background: linear-gradient(90deg, #8FB8D8, var(--amber));
}

.wxgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wxgrid > div {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px;
}
.wxgrid .k {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--faint);
}
.wxgrid .v { display: block; font-size: 17px; font-weight: 650; color: var(--ink); margin-top: 3px; }

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

body.crew.hasfoot { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
.footbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
.footbar a {
  display: grid; place-items: center; gap: 3px; height: 66px;
  color: var(--faint); text-decoration: none; font-size: 11.5px; font-weight: 600;
}
.footbar a:hover { text-decoration: none; }
.footbar a svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.footbar a.on { color: var(--sprout); }

/* THEIR OWN FIGURE, as a ring that fills with the number inside it. A bare number in a tab bar
   reads as a badge — an unread count, something waiting to be cleared — and this is not that. The
   ring is the picture, the number is the reading, and one glance says both. */
.footbar a.score { position: relative; }
.footbar a.score .ring circle { fill: none; stroke-width: 2.2; }
.footbar a.score .ring .track { stroke: var(--line-2); }
.footbar a.score .ring .fill {
  stroke: var(--sprout); stroke-linecap: round;
  transition: stroke-dashoffset .4s ease;
}
/* Drawn inside the ring, in the ring's own coordinates, so it cannot drift off centre when the
   bar's height or the label's font changes underneath it. */
.footbar a.score .ring .pctnum {
  fill: var(--ink); stroke: none;
  font-size: 9.5px; font-weight: 800; letter-spacing: -.03em;
  text-anchor: middle; dominant-baseline: central;
}
.footbar a.score.on .ring .pctnum { fill: var(--sprout); }
/* The sign finishes the reading the ring starts, so it sits closer than a word would. */
.footbar a.score .pctword { font-size: 11px; letter-spacing: .02em; }

/* The whole list under the box, small: it is there so nobody adds a second bag of the same
   pellet, not to be worked from. */
.buylist { margin: 4px 0 18px; }
.buylist .l {
  display: flex; gap: 8px; align-items: baseline; padding: 6px 4px;
  border-bottom: 1px solid var(--line-2); font-size: 13.5px; color: var(--ink);
}
.buylist .l:last-child { border-bottom: 0; }
.buylist .l.urgent .w { color: #A8412A; }
.buylist .w { flex: 1; min-width: 0; }
.buylist .m { flex: none; color: var(--muted); }
.buylist .who { flex: none; font-size: 11.5px; color: var(--faint); }
.buylist .l.gone { color: var(--faint); text-decoration: line-through; }

/* ---- a project, cut to three things ------------------------------------------------------------ */

.bar { height: 8px; border-radius: 4px; background: var(--line-2); margin: 2px 0 8px; }
.bar i { display: block; height: 100%; border-radius: 4px; background: var(--sprout); }
.barnote { margin: 0 2px 22px; font-size: 13.5px; color: var(--muted); }

/* A second job with your name on it is still yours, but only one thing can be THE next thing —
   so the ones after it are quiet cards, not a row of green shouting at once. Scoped to `.also`
   rather than :not(.first), which leaked onto the home screen's card and bleached it. */
.focus + .focus { margin-top: -14px; }
.focus.also { background: var(--card); color: var(--ink); border: 1px solid var(--line);
  box-shadow: none; }
.focus.also .lede { color: var(--muted); }
.focus.also h2 { font-size: 22px; }
.focus.also p { color: var(--muted); opacity: 1; }
.focus.also .tap, .focus.also button { background: var(--sprout); color: #fff; }

.claimrow {
  display: flex; align-items: center; gap: 10px; padding: 12px 4px;
  border-bottom: 1px solid var(--line-2);
}
.claimrow span { flex: 1; font-size: 16px; }
.claimrow button {
  flex: none; min-height: 40px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.thenrow.doneone { color: var(--muted); }
.thenrow.doneone span { text-decoration: line-through; }

/* ---- putting a job down ------------------------------------------------------------------------ */

.leaving { padding: 20px 2px; }
.leaving h2 { font-size: 25px; margin: 0 0 8px; letter-spacing: -.02em; }
.leaving p { margin: 0 0 22px; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.leaving .tap {
  display: grid; place-items: center; width: 100%; min-height: 56px; border-radius: 14px;
  border: 0; background: var(--sprout); color: #fff; font-family: inherit; font-size: 17px;
  font-weight: 700; cursor: pointer;
}
/* The quiet answer. A button rather than a link now — it posts — but it must not look like the
   one being recommended, so it keeps the link's weight. */
.leaving .stay {
  display: block; width: 100%; text-align: center; margin-top: 16px; padding: 14px;
  color: var(--muted); font-size: 16px; text-decoration: none;
  background: none; border: 0; font-family: inherit; cursor: pointer;
}
.leaving .tap { text-decoration: none; }


/* What to wear, said in words on the card somebody is already reading. The icons and their index
   were a legend to learn before the first job; four words are not. */
.focus .wearline { font-size: 14px; font-weight: 600; opacity: .9; margin-top: 8px; }
.focus.also .wearline { color: var(--sprout); opacity: 1; }


/* ================================================================================================
   The skin, from Adam's mockups
   ================================================================================================

   A cream page, white cards with a lot of air, one small picture per row, and a pill on the right
   that says what KIND of thing this is. Nothing on it is a number about a person.

   The pictures are emoji (see core/glyph): the mockups' own illustrations are emoji, every phone
   has them, and they cost nothing to load in a barn with two bars of signal.
   ============================================================================================= */

.crewtop { border-bottom: 0; background: transparent; backdrop-filter: none; padding-bottom: 4px; }
.crewtop h1 { font-size: 27px; font-weight: 800; color: var(--deep); letter-spacing: -.02em; }
.crewtop .sub { font-size: 15px; color: var(--muted); margin-top: 1px; }

/* The band: the farm, painted, BEHIND the date and the weather.

   This IS the artwork from Adam's mockup — lifted out of it, not imitated. Two attempts at
   redrawing it (a cropped photograph of the farm's own barn, then a vector landscape) both missed,
   and the second missed in the way that matters: a flat vector of hills and blobs is not a
   watercolour, and no amount of tuning gradients was going to make it one. The mockup's phone
   screen is 745px wide, so its band is already at phone resolution; the weather pill was painted
   out of it (the page cream is flat there, so a fill is exact rather than a guess) and nothing
   else was touched.

   Small: 15KB, a fifth of the barn photograph that used to be here.

   SHORT. 745x140 rendered to the width of the column is 74px tall on a 393px phone. The strip it
   replaced was 150px of picture UNDERNEATH a 96px header — 246px before the first job. This is
   74px, and the date and the weather sit on it rather than above it.

   It is a pseudo-element rather than a background on <body> so the mask below can fade its bottom
   edge without fading the whole page with it. */
body.crew.day { position: relative; }
body.crew.day::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  /* Dropped by the height of the date, so the hills begin UNDER it rather than behind it. In the
     mockup there is a whole "Today" heading and a weather pill above the horizon; this app's
     header is one line, so without the offset the ridge line runs straight through the words. */
  top: calc(16px + env(safe-area-inset-top));
  /* Tied to the content column, not the window: on anything wider than a phone a full-bleed band
     becomes an enormous landscape with a narrow list of jobs sitting in the middle of it. */
  width: min(100%, 560px); aspect-ratio: 745 / 140;
  background: url("/static/img/farm-band.jpg") top center / 100% 100% no-repeat;
  /* The picture's top and left are its own cream — the same cream as the page, so they need no
     help. Only the bottom would meet the list on an edge, so only the bottom is faded, and it is
     faded over a third of the height: a short fade still reads as a line. */
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  z-index: 0; pointer-events: none;
}
/* The header sits ON the picture and is given its height, so the list starts below the band
   rather than on top of a hillside. 745x140 makes the art 0.188 of the column's width, plus the
   offset above. */
body.crew.day .crewtop {
  align-items: flex-start;
  min-height: calc(min(100vw, 560px) * 0.188 + 16px + env(safe-area-inset-top));
}
/* Only the home screen carries it. On a job page the picture would be scenery behind a form. */

/* ---- a section, and the rows in it ------------------------------------------------------------ */

.sect { display: flex; align-items: center; gap: 13px; margin: 22px 2px 12px; }
.sect .badge {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--sprout); color: #fff; font-size: 20px;
}
.sect .badge.amber { background: var(--amber); }
.sect h2 { margin: 0; font-size: 19px; font-weight: 750; color: var(--deep); letter-spacing: -.01em; }
.sect p { margin: 1px 0 0; font-size: 13.5px; color: var(--muted); }

.rows { display: grid; gap: 9px; }
.jobcard2 {
  display: flex; align-items: center; gap: 13px; padding: 13px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 15px;
  color: inherit; text-decoration: none;
}
.jobcard2:hover { text-decoration: none; }
.jobcard2.is-done { background: #F4F7EE; border-color: transparent; }
/* A name that happens to be a link is still a name: the browser's blue is for prose. */
.jobcard2 a, .jobcard2 a:hover { color: inherit; text-decoration: none; }
/* A FIXED COLUMN for the emoji, so every name starts at the same x.
   Emoji are variable-width — a ladder is not as wide as a hen — so with the badge sized to its
   own glyph each name began wherever the one before it happened to end, and a list of jobs read
   as a ragged left edge. This is the same on the routine list, which uses these rows too. */
.jobcard2 .pic { font-size: 23px; line-height: 1; flex: none;
                 width: 28px; text-align: center; }
/* Left, and said out loud. A <button> and an <input> both centre their text by default,
   and two of the three things wearing this class are one or the other. */
.jobcard2 .name { flex: 1; min-width: 0; font-size: 16.5px; font-weight: 600;
                  line-height: 1.25; text-align: left; }

/* Tapping the WORDS of a job ticks it. Everything except the chevron is inside this form, and the
   name is the submit button — so the target is the whole row rather than a 27px box aimed at
   while holding a bucket. `text-align:left` and the reset below stop it reading as a button. */
.jobcard2 .tickrow {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 13px; margin: 0;
}
.jobcard2 .tickrow button.name {
  /* display AND justify-content, both said out loud, because `text-align: left` alone did
     nothing here and quietly looked like it should have.

     This element is a <button>. It was computing to display:flex, and text-align has no effect on
     a flex container's contents — the text becomes an anonymous flex item and lines up by
     justify-content, which defaults to centre on a button. So the tickable rows were centred and
     the non-tickable ones (plain <span>) were left, and setting text-align harder never once
     moved it. Three rounds of "the task names still are not left aligned" were this.

     display:block makes it lay out exactly like the <span> in the other branch, which is the real
     goal: the two row shapes must be indistinguishable. justify-content stays as a belt-and-braces
     for anything that puts the flex back. */
  display: block; justify-content: flex-start;
  background: none; border: 0; padding: 12px 0; margin: -12px 0; text-align: left;
  font-family: inherit; color: inherit; cursor: pointer;
}
.jobcard2 .tickrow button.name:active { opacity: .55; }
.jobcard2.is-done .tickrow button.name { color: var(--muted); }
/* A row that OPENS rather than ticks — one that asks for a number, a note or a photograph. Same
   row shape and same targets as the rest; what says it is different is the pill on the end, which
   is either "Asks" or the answer once it is in. A row that behaves differently with nothing on it
   to say so is a row somebody taps twice and then distrusts. */
.jobcard2 a.tickrow.opens { color: inherit; text-decoration: none; padding: 12px 0; margin: -12px 0; }
.jobcard2 a.tickrow.opens:active { opacity: .55; }
/* The chevron keeps a target of its own, and a generous one: it is the only thing on the row that
   does something different from the rest of it. */
.jobcard2 .go { padding: 14px 2px 14px 14px; margin: -14px -2px -14px 0; }
.jobcard2.is-done .name { color: var(--muted); }
.jobcard2 .go { color: #CFCBBE; font-size: 20px; flex: none; }

/* Finished, and still on the list. A line through the name and the whole row stepped back — the
   picture too, because a full-colour emoji beside a grey struck name is the brightest thing in a
   list of work still to do, which is precisely backwards.

   `line-through` rather than only greying: grey alone reads as "disabled" or "not yours", and on
   a phone in daylight it mostly reads as nothing at all. */
.jobcard2.struck { background: #F6F7F1; border-color: transparent; box-shadow: none; }
.jobcard2.struck .name { color: var(--faint); text-decoration: line-through;
  text-decoration-color: rgba(120,116,106,.55); text-decoration-thickness: 1.5px; }
.jobcard2.struck .pic { filter: grayscale(.75); opacity: .55; }
.jobcard2.struck .go { color: #DEDBD1; }

/* A project row. No tick box, because a project is not something anybody finishes standing in a
   doorway — opening it is starting it, and the list of what to tick is inside. The warmer fill is
   the tell that this row behaves differently from the ones above it. */
.jobcard2.nobox { background: var(--card-2); }
.jobcard2.nobox .pic { font-size: 25px; margin-left: 2px; width: 28px; }

/* The box. Square with a soft corner, the way the mockups draw it — a circle reads as a radio
   button, which is a choice between things rather than a job finished. */
.box {
  /* border-box, said out loud, because this class lands on a <button> AND on a <span>. A button
     gets border-box from the browser's own stylesheet and a span does not, so the same "27px plus
     a 2px border" came out 27 wide on some rows and 31 on others, and the picture and the name
     after it moved with it. THAT is the ragged left edge on the project and routine pages: not
     the names, the tick box in front of them. */
  box-sizing: border-box;
  width: 27px; height: 27px; flex: none; padding: 0; border-radius: 8px; cursor: pointer;
  border: 2px solid #CBD9C2; background: #fff; color: transparent;
  display: grid; place-items: center; font-size: 15px; font-weight: 800;
}
.box.on { background: var(--sprout); border-color: var(--sprout); color: #fff; }
.box:disabled { opacity: .5; cursor: not-allowed; }

.pill {
  flex: none; font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
  background: var(--line-2); color: var(--muted); white-space: nowrap;
}
.pill.done  { background: #E4E9CC; color: #3B5A21; }
.pill.next  { background: #E4E9CC; color: #3B5A21; }
.pill.oneoff{ background: #E2ECF7; color: #2C5D86; }
/* A row can carry two of these now — how many readings a job has collected, and who else is on it —
   and two full-width pills beside a name pushed the chevron off the edge of a 414px phone. They give
   way before the row does. */
.jobcard2 .pill { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill.job   { background: #FBEFD3; color: #8A6212; }
.pill.urgent{ background: #FBE3E0; color: #A8412A; }

/* ---- a project ---------------------------------------------------------------------------------- */

/* THE BADGE SITS AT THE TOP OF THE NAME — Adam's call, 2026-08-17, and this is the second time this
   line has moved, so the reasoning is worth keeping.
   Centred, it hangs level with the middle of a two-line title, which is where the eye reads it as
   having slipped between the lines. Top-aligned, the picture and the first line of the name start
   together and the name grows downward from it, which is how the mark reads on every other row in
   this app. The couple of pixels of padding line the text up with the badge's own top edge rather
   than with its line box. */
.projhead { display: flex; align-items: flex-start; gap: 14px; margin: 6px 0 18px; }
.projhead > div { padding-top: 3px; }
.projhead .pic {
  width: 62px; height: 62px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: #EDF3E7; font-size: 30px;
}
/* Tighter leading, so a two-line name reads as one block beside the badge rather than as two
   lines the badge is between. */
.projhead h1 { margin: 0; font-size: 25px; font-weight: 800; color: var(--deep);
               letter-spacing: -.02em; line-height: 1.14; text-wrap: balance; }
.projhead p { margin: 3px 0 0; font-size: 15px; color: var(--muted); line-height: 1.35; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
/* Belt and braces: an empty chip row takes no space even if one is ever rendered. */
.chips:empty { display: none; }
.chips .chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px;
  font-size: 13.5px; font-weight: 650; background: #E7EFF7; color: #2C5D86;
}
.chips .chip.warm { background: #FBE9E2; color: #A8412A; }

.progress { display: flex; align-items: center; gap: 12px; margin: 0 2px 20px; }
.progress .track { flex: 1; height: 9px; border-radius: 5px; background: #EBE8DC; }
.progress .track i { display: block; height: 100%; border-radius: 5px; background: var(--sprout); }
.progress .pct { font-size: 14.5px; font-weight: 750; color: var(--deep); }
.progress .lbl { font-size: 14.5px; color: var(--muted); }

.groupline {
  margin: 20px 2px 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--deep); opacity: .8;
}

.notes {
  margin-top: 22px; padding: 15px 16px; border-radius: 15px; background: #F2F6EC;
  border: 1px solid #E4EBDB;
}
.notes h3 { margin: 0 0 6px; font-size: 15.5px; color: var(--deep); }
.notes p { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.5; }

/* ---- adding a job, and handing one out ---------------------------------------------------------- */

/* An empty box at the foot of the list, shaped like the rows above it, because the thing being
   made is one of those. Dashed rather than solid: it is not a job yet. */
.jobcard2.addrow { border-style: dashed; background: transparent; margin-top: 9px; }
.jobcard2.addrow .box { border-style: dashed; }
.jobcard2.addrow input.name {
  border: 0; background: none; font-family: inherit; font-size: 16.5px; font-weight: 600;
  color: var(--ink); padding: 0; min-width: 0;
}
.jobcard2.addrow input.name::placeholder { color: var(--faint); font-weight: 500; }
.jobcard2.addrow input.name:focus { outline: none; }
.addgo {
  flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: var(--sprout); color: #fff; font-size: 21px; line-height: 1; cursor: pointer;
}

.assignto { margin-top: 18px; }
.assignto > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 52px; border-radius: 14px; border: 1px dashed var(--line);
  font-size: 16px; font-weight: 650; color: var(--muted); background: var(--card);
}
.assignto > summary::-webkit-details-marker { display: none; }
.assignto .caret { font-size: 15px; transition: transform .15s; }
.assignto[open] .caret { transform: rotate(180deg); }
.whotoday { display: grid; gap: 8px; margin-top: 10px; }
.whotoday button {
  width: 100%; display: flex; align-items: baseline; gap: 10px; text-align: left;
  min-height: 52px; padding: 10px 15px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--card); font-family: inherit; cursor: pointer;
}
.whotoday button b { font-size: 16.5px; font-weight: 650; color: var(--ink); }
.whotoday button em { font-style: normal; font-size: 13.5px; color: var(--muted); }

/* ---- one routine, on its own screen ------------------------------------------------------------- */

.rblurb { margin: 2px 2px 12px; font-size: 14.5px; color: var(--muted); line-height: 1.45; }
/* How far through, as a line rather than a number: nobody needs "37%", they need to see there is
   more than half of it left. */
.rowsprog { height: 6px; border-radius: 3px; background: #EDEADF; margin: 0 2px 14px; overflow: hidden; }
.rowsprog i { display: block; height: 100%; border-radius: 3px; background: var(--sprout);
  transition: width .2s; }

/* ---- footer, as drawn --------------------------------------------------------------------------- */
/*
   The highlight used to be an `inset: 8px 14px 22px` rectangle on a `z-index: -1` pseudo-element:
   a tall slab that reached almost the full width of the tab, stopped well above the label, and
   sat behind the bar's own background rather than on it. Wide tabs (there are three, not the
   drawing's four) stretched it into a lozenge nothing like the pill in the mockup.

   So it is now sized to its contents instead of to the tab: a pill of fixed width, centred,
   wrapping the icon and the word together. Three tabs or five, it looks the same.
*/
.footbar {
  background: #FEFBF6;
  border-top: 1px solid #F0EEE4;
  padding-top: 6px;
}
/* The icon and its word are ONE thing, so they sit close: 2px, not the 5 that had the label
   floating a line below its icon and the pair reading as two rows of a very short list.
   `align-content: center` keeps the pair centred in the tab now that the gap no longer pads it. */
.footbar a {
  position: relative; height: 60px; gap: 2px; align-content: center;
  font-size: 11px; font-weight: 650; letter-spacing: .01em;
  color: #9A968B; line-height: 1.15;
}
.footbar a svg { width: 24px; height: 24px; stroke-width: 1.7; display: block; }
/* The pill: content-sized, behind the icon and the label, and drawn on the bar rather than under
   it — a stacking context of its own, so no negative z-index is needed to keep it off the text. */
/* The pill is 74px WHERE THERE IS ROOM FOR 74px. In a CSA week the bar carries six stops instead
   of five, and on a 360px phone that is 60px a tab — a fixed 74 then overlaps its neighbours and
   the highlight reads as covering two tabs at once. `min()` keeps the shape everywhere else and
   lets it shrink only where it has to. */
.footbar a::before {
  content: ""; position: absolute; z-index: 0;
  left: 50%; transform: translateX(-50%);
  top: 5px; width: min(74px, calc(100% - 6px)); height: 50px; border-radius: 16px;
  background: transparent; transition: background .15s;
}
/* Six stops also means six words. "Labels" is the longest and wraps first; letting the label
   shrink a hair below the icon keeps every one of them on a single line. */
.footbar a { min-width: 0; }
.footbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.footbar a > * { position: relative; z-index: 1; }
.footbar a.on { color: var(--deep); font-weight: 750; }
.footbar a.on::before { background: #EDF2DF; }
.footbar a.on svg { stroke-width: 1.9; }
/* Pressing one should feel like pressing something, on a screen with no hover to fall back on. */
.footbar a:active::before { background: #F3F5EA; }

/* ---- one job, on its own screen ----------------------------------------------------------------- */

.asklabel { display: block; margin: 4px 2px 8px; font-size: 15px; color: var(--muted); }
.askbox {
  width: 100%; font-size: 17px; padding: 14px 15px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-family: inherit; margin-bottom: 14px;
}
.bigdone {
  display: grid; place-items: center; width: 100%; min-height: 58px; border-radius: 16px;
  border: 0; background: var(--sprout); color: #fff; font-family: inherit; font-size: 18px;
  font-weight: 750; cursor: pointer;
}
.bigdone.undo { background: transparent; border: 1px solid var(--line); color: var(--muted);
  font-size: 16px; font-weight: 600; }
.bigphoto {
  display: grid; place-items: center; width: 100%; min-height: 56px; margin-top: 10px;
  border-radius: 16px; border: 1px solid var(--line); background: var(--card);
  font-size: 16.5px; font-weight: 650; cursor: pointer;
}

/* Giving a job away. Quiet, at the foot of the page — it is not what most days need, and a big
   button for it would read as "put this down". */
.handoff {
  display: block; text-align: center; margin: 22px 0 4px; padding: 13px;
  border-radius: 14px; border: 1px dashed var(--line); background: var(--card-2);
  color: var(--muted); font-size: 14.5px; font-weight: 600; text-decoration: none;
}
.handoff:hover { text-decoration: none; }

/* A person, on a row that is about a person. Initials rather than an emoji: the little blue
   silhouette belongs to no palette and reads as a placeholder for a missing photo. */
.whopic {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sprout-soft); color: var(--sprout); font-size: 13px; font-weight: 800;
}

/* The one-off form, and the row that opens it. Both borrow from the add-a-job row inside a
   project: writing a job on somebody's day is the same act whether or not a project holds it. */
.jobcard2.addrow .addlink { color: var(--faint); font-weight: 500; }
.oneoff { padding: 4px 2px 24px; }
.oneoff .asklabel { display: block; margin: 18px 0 7px; }
.oneoff .askbox { width: 100%; }
.oneoff .tickline {
  display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card);
  font-size: 15.5px; cursor: pointer;
}
.oneoff .tickline input { width: 22px; height: 22px; flex: none; accent-color: var(--sprout); }
.oneoff .tickline em { color: var(--muted); font-style: normal; font-size: 14px; }
.oneoff .bigdone { margin-top: 22px; }

/* The plus on the "add a one-off job" row. Deliberately NOT .box: the day screen carries no tick
   boxes, and a square in the same place at the same size would read as one. */
.jobcard2.addrow .plus {
  box-sizing: border-box; width: 27px; height: 27px; flex: none; border-radius: 8px;
  border: 2px dashed #CBD9C2; color: var(--faint); display: grid; place-items: center;
  font-size: 16px; font-weight: 700; line-height: 1;
}

/* "Where it got to" — the last note, at the top of a job somebody is picking back up. Quiet paper
   rather than a callout: it is context to read on the way past, not a warning. */
.lastsaid {
  display: block; text-decoration: none; color: inherit; margin: 0 0 16px;
  padding: 13px 15px; border-radius: var(--r-s); background: var(--card-2);
  border: 1px solid var(--line-2);
}
.lastsaid .who { display: block; font-size: 12.5px; color: var(--faint); margin-bottom: 3px; }
.lastsaid .what {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 15px; line-height: 1.45;
}


/* THE TASK MODAL — a job asking for what it needs without losing your place in the list. */
.taskmodal {
  border: 0; padding: 0; border-radius: 18px 18px 0 0; width: 100%; max-width: 560px;
  margin: auto auto 0; background: var(--card); color: var(--ink);
}
.taskmodal::backdrop { background: rgba(24, 22, 18, .55); }
.tmbody { padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); }
.tmloading { color: var(--muted); margin: 0; }
.tmtitle { margin: 0 0 6px; font-size: 20px; line-height: 1.3; }
.tmdetail { margin: 0 0 14px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.tmform .asklabel { display: block; margin: 4px 0 8px; }
.tmform .askbox { width: 100%; }

/* The photographs already taken, each with a way to take it back. A picture of somebody's boot is
   the normal case and there was no way to undo it. */
.tmshots { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 4px; }
.tmshots .shot { position: relative; width: 88px; height: 88px; }
.tmshots .shot img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block;
  border: 1px solid var(--line-2);
}
.tmshots .shot .x {
  position: absolute; top: -7px; right: -7px; width: 26px; height: 26px; border-radius: 50%;
  border: 0; background: var(--ink); color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.tmshots .addshot {
  width: 88px; height: 88px; border-radius: 10px; border: 2px dashed var(--line);
  display: grid; place-items: center; align-content: center; gap: 2px; cursor: pointer;
  color: var(--muted);
}
.tmshots .addshot span { font-size: 21px; line-height: 1; }
.tmshots .addshot em { font-style: normal; font-size: 12px; }

.tmwarn {
  margin: 14px 0 0; padding: 11px 13px; border-radius: 10px; font-size: 14.5px; line-height: 1.45;
  background: var(--sun-soft); color: #6B5518;
}
.tmrow { display: flex; gap: 11px; margin-top: 20px; }
.tmrow button {
  flex: 1; min-height: 52px; border-radius: 13px; font-family: inherit; font-size: 16.5px;
  font-weight: 650; cursor: pointer;
}
.tmcancel { border: 1px solid var(--line); background: var(--card); color: var(--muted); }
.tmdone { border: 0; background: var(--sprout); color: #fff; }
.tmdone:disabled { opacity: .6; }

/* The name is a <button> here too, so it needs the same un-buttoning as the tickable one — and
   the same display:block, for the same reason: text-align does nothing to a flex container. */
.jobcard2 button.name {
  display: block; justify-content: flex-start; text-align: left;
  background: none; border: 0; padding: 12px 0; margin: -12px 0;
  font-family: inherit; font-size: 16.5px; font-weight: 600; line-height: 1.25;
  color: inherit; cursor: pointer;
}

/* "Saved on this phone" — a line that appears, says what happened, and goes. Above the bottom
   nav, because that is where the thumb already is. */
.outnote {
  position: fixed; left: 14px; right: 14px; bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 60; padding: 13px 15px; border-radius: 12px; background: var(--ink); color: #fff;
  font-size: 14.5px; line-height: 1.4; box-shadow: 0 6px 22px rgba(0,0,0,.28);
}

/* ---- what the farm has not been told yet -----------------------------------------------------

   The app now works with no signal at all, which is the only way it is any use in a coop. The
   price of that is a screen that could quietly claim more than it knows, so two marks pay it.

   The dashed sun-coloured edge is not new: the egg pad and the feed round have said "written down,
   not through" that way since they were built, and one mark for one meaning across the whole app
   is worth more than a cleverer second one. A tick still looks like a tick — the work IS done, and
   telling somebody their own tick does not count would be a lie in the other direction. */
.unsent { border-color: var(--sun) !important; border-style: dashed !important; }

/* Counted in the page, under the header, not floating over the work. It is a statement about what
   is on the screen rather than an interruption, and it takes its own space so it can never sit on
   top of a control. */
.outbar {
  display: flex; align-items: center; gap: 10px;
  margin: 0 14px 10px; padding: 10px 12px;
  border: 1px dashed var(--sun); border-radius: var(--r-s, 12px);
  background: var(--sun-soft); color: var(--sun);
  font-size: 13.5px; line-height: 1.35;
}
.outbar span { flex: 1; min-width: 0; }
.outbar button {
  font: inherit; font-weight: 700; border: 1px solid var(--sun); border-radius: 9px;
  padding: 8px 12px; min-height: 40px; background: transparent; color: var(--sun);
  white-space: nowrap;
}

/* WHEN THIS PAGE WAS TRUE. Grey and small on purpose: it is not a fault, it is the app declining
   to pretend. It only ever appears when a page came out of the tin and the farm could not be
   reached to check it. */
.asof {
  margin: 0 14px 10px; font-size: 12.5px; color: var(--muted);
}

/* THE NEW-BUILD BAR.
   Sits above the tab bar and clears the home indicator, because a control a thumb cannot reach is
   not offered. Dark like the toast beside it: this is the app speaking about itself, not a piece
   of the farm's work, and it must read at arm's length in daylight. */
.crewupdate {
  position: fixed; left: 14px; right: 14px; bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 70; display: flex; align-items: center; gap: 10px;
  padding: 11px 12px 11px 15px; border-radius: 12px;
  background: var(--ink); color: #fff; font-size: 14.5px;
  box-shadow: 0 6px 22px rgba(0,0,0,.28);
}
.crewupdate span { flex: 1; min-width: 0; }
/* 44px tall, not the 40 the padding alone gave it: this is tapped with a thumb, outdoors, often
   with a glove half off, and it is the button we WANT pressed. */
.crewupdate button {
  font: inherit; font-weight: 700; border: 0; border-radius: 9px; padding: 11px 13px;
  min-height: 44px; background: var(--sprout); color: #fff; white-space: nowrap;
}
/* The dismiss is deliberately the quieter of the two: not taking an update is the choice that
   should need a moment's aim, and the tap target is still a full 44px. */
.crewupdate button#crewUpdateNo {
  background: transparent; color: #fff; opacity: .6; font-size: 20px;
  padding: 0 6px; min-width: 44px; min-height: 44px;
}

/* ---- looking at somebody else's app ---------------------------------------------------------
   Sticky rather than fixed: it takes its own space at the top and pushes the app down, so it can
   never sit over a control the way a floating bar would. Amber and not green, because everything
   green in here is a thing you can do and this is the one bar that says you cannot. */
.asifbar {
  position: sticky; top: 0; z-index: 80;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px 9px 15px;
  background: #8a5a00; color: #fff; font-size: 14px;
  padding-top: calc(9px + env(safe-area-inset-top));
}
.asifbar span { flex: 1; min-width: 0; }
.asifbar b { font-weight: 750; }
.asifbar button {
  font: inherit; font-weight: 700; border: 0; border-radius: 9px; padding: 9px 12px;
  min-height: 40px; background: rgba(255,255,255,.18); color: #fff; white-space: nowrap;
}

/* ---- the feed round -------------------------------------------------------------------------
   Ten spaces, one screen. Laid out like the egg round because it is the same kind of walk — one
   row a house, thumb-sized targets, nothing that opens the phone's keyboard — but the right-hand
   half is a stepper rather than a pad: a bag count is nought, one or two, and the whole entry is
   "one more than that". */
.feedrows { display: flex; flex-direction: column; gap: 6px; }
.feedrow {
  display: grid; grid-template-columns: 1fr 132px; gap: 8px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 3px 8px 3px 4px;
}
/* The row is the tick. Nine times in ten the answer is "I looked and it was fine", and that has
   to cost one thumb anywhere on the name rather than a hit on a small box. */
.lookcell {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: inherit; text-align: left; border: 0; background: none; color: inherit;
  padding: 10px 6px 10px 10px; min-height: 52px; cursor: pointer;
}
.lookcell .box {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  border: 2px solid var(--line); color: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; line-height: 1;
}
.lookcell .who { font-size: 17px; font-weight: 700; min-width: 0; }
.lookcell .pellet { margin-left: auto; font-size: 11.5px; color: var(--faint); white-space: nowrap; }
.feedrow.is-done { background: var(--sprout-soft); border-color: var(--sprout); }
.feedrow.is-done .box { background: var(--sprout); border-color: var(--sprout); color: #fff; }
.feedrow.is-done .who { color: var(--deep, inherit); }
/* Two different states, and they must not look alike.

   `.unsent` — on the phone, waiting for signal. A dashed amber edge: a barn out of signal is a
   normal morning and the tap is not lost.

   `.unsaved` — the farm looked at it and would not take it. Solid clay, because that one needs
   somebody to do something about it, and drawing it the same as "waiting" is how a refusal gets
   read as weather. */
.feedrow.unsent { border-color: var(--sun); border-style: dashed; }
.feedrow.unsaved { border-color: var(--clay); border-style: solid; border-width: 2px; }

.bagcell {
  display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 2px;
  border: 1px solid var(--line); border-radius: var(--r-s); background: var(--paper);
}
.bagcell button {
  font: inherit; font-size: 22px; font-weight: 700; line-height: 1;
  border: 0; background: none; color: var(--muted);
  min-height: 46px; cursor: pointer; border-radius: var(--r-s);
}
.bagcell button:active { background: var(--line-2); }
.bagcell .bagn {
  text-align: center; font-size: 20px; font-weight: 800; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.bagcell.has { border-color: var(--sun); background: var(--sun-soft); }
.bagcell.has .bagn { color: var(--sun); }
/* A house with no hanging feeder. It holds the column open so the ten rows still line up, and
   says why there is nothing to tap rather than leaving a hole somebody reads as a bug. */
.bagcell.byhand {
  display: flex; align-items: center; justify-content: center; min-height: 46px;
  border-style: dashed; background: none; color: var(--faint);
  font-size: 12px; letter-spacing: .04em;
}
.feednote { font-size: 13px; color: var(--muted); margin: 14px 2px 18px; }

/* One row on the round's own list that stands for all twenty. */
.jobcard2.feedlink .name { font-weight: 650; }
.jobcard2.feedlink .tally { margin-left: auto; font-size: 12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; }

/* ---- saying something about a job -------------------------------------------------------------
   Where it got to, whether it is stuck, and what anybody else on the same job has already said.
   It sits UNDER the job's own controls: the first thing somebody wants on this screen is to do the
   work or tick it off, and the second is to say something about it. */
.crew .sayblock { margin-top: 22px; }
.crew .sayblock .sayform { margin-bottom: 14px; }
.crew .sayrow { display: flex; gap: 8px; margin-top: 10px; }
.crew .sayrow .bigdone { flex: 1; }
/* Stuck is not a mistake and not a success: it is a flag, and it should look like neither the
   green Done nor a red error. */
.crew .bigdone.warn { background: var(--sun); border-color: var(--sun); color: #fff; }
.crew .stalled {
  background: var(--sun-soft); border: 1px solid var(--sun); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 14px; font-size: 14px;
}
.crew .stalled strong { color: var(--sun); }
.crew .stalled p { margin: 6px 0 0; }
.crew .wants { margin: 0 0 10px; }
.crew .said {
  border-top: 1px solid var(--line); padding: 12px 2px; font-size: 14.5px;
}
.crew .said .who { font-size: 12.5px; color: var(--faint); }
.crew .said p { margin: 4px 0 0; }
.crew .said img { margin-top: 8px; width: 100%; max-width: 320px; border-radius: var(--r-s); }
.crew .said.isflag { border-left: 3px solid var(--sun); padding-left: 10px; }

/* ---- a job that collects a table ---------------------------------------------------------------
   Two halves, and they are different shapes on purpose.

   WHAT IS RECORDED is a table, because that is what it is: rows of the same few numbers, read down a
   column to spot the one that looks wrong. It is dense, tabular-figured and scrolls sideways rather
   than wrapping, because a measurement that wraps is two measurements to the eye.

   WHAT IS BEING TYPED is a stack of labelled fields, because it is being typed one-handed in a field
   with a tape in the other. The first version put the pickers inside the table's own cells, which
   meant a dropdown of twenty-two points in a 40px column — legible on a laptop, unusable in a coop.
   Every control here is at least the 44px thumb floor. */
.crew .dataentry { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
/* The table sits UNDER the boxes now, so its heading needs air above it rather than none. */
.crew .dataentry h3 { margin: 20px 0 10px; font-size: 15px; color: var(--deep); }
/* Sideways rather than squeezed: five columns of numbers on a 360px phone is what this is for. */
.crew .dscroll { overflow-x: auto; margin: 0 -2px 16px; }
.crew .dtable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.crew .dtable th {
  text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); font-weight: 700; padding: 0 10px 6px 0; white-space: nowrap;
}
.crew .dtable td {
  padding: 7px 10px 7px 0; font-size: 16px; border-top: 1px solid var(--line-2);
  white-space: nowrap;
}
.crew .dtable .rowend { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.crew .dtable .dwho { font-size: 12px; color: var(--faint); }
/* Small, quiet, and still a 40px target. Taking a row off is a correction, not a main action. */
.crew .dtable .ddrop {
  font: inherit; font-size: 20px; line-height: 1; color: var(--faint);
  background: none; border: 0; padding: 8px 4px; cursor: pointer;
}
.crew .dtable .ddrop:active { color: var(--clay); }

.crew .drow { display: flex; flex-wrap: wrap; gap: 12px; }
.crew .dfield { flex: 1 1 46%; min-width: 132px; display: block; }
.crew .dlabel {
  display: block; font-size: 12.5px; font-weight: 650; color: var(--muted); margin-bottom: 4px;
}
.crew .dlabel em { font-style: normal; font-weight: 400; color: var(--faint); }
.crew .drow select, .crew .drow input {
  font: inherit; width: 100%; min-height: 48px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--card); color: var(--ink);
}
.crew .drow .bigdone { flex: 1 1 100%; }

/* WHAT THE TAPES ADD UP TO — the count, the pairs that disagree, and the next one worth walking.
   Quiet type on a tinted card: it is the app doing arithmetic behind the work, not an instruction. */
.crew .netsum {
  margin-top: 16px; padding: 12px 14px; border-radius: var(--r-s);
  background: var(--line-2); font-size: 14px; line-height: 1.45;
}
.crew .netsum p { margin: 0 0 6px; }
.crew .netsum .tally strong { font-size: 17px; }
.crew .netsum .lead { color: var(--muted); margin-top: 10px; }
.crew .netsum ul { margin: 0; padding-left: 18px; }
.crew .netsum li { margin-bottom: 3px; }
/* A pair read twice, differently. Amber: something is owed, and somebody standing there can fix it
   in a way nobody in an office next week can. */
.crew .netsum .off {
  padding: 8px 10px; border-radius: var(--r-s);
  background: var(--sun-soft); border: 1px solid var(--sun);
}

/* ADDING A POINT, from the field. Quiet and shut: the round of measuring is what this screen is
   for, and an open box under the Save button is a box somebody types a measurement into. Open, it
   is the same 48px controls as the rest — typed with a tape in the other hand, like all of it. */
.crew .addpoint { margin-top: 16px; border-top: 1px solid var(--line-2); padding-top: 10px; }
.crew .addpoint > summary {
  font-size: 14px; font-weight: 650; color: var(--muted);
  padding: 10px 2px; cursor: pointer; list-style: none;
}
.crew .addpoint > summary::-webkit-details-marker { display: none; }
.crew .addpoint > summary::before { content: "+ "; color: var(--faint); }
.crew .addpoint[open] > summary::before { content: "– "; }
/* Stacked, full width. Side by side, the name of a corner is typed into a box too narrow to read
   it back in and the button wraps onto two lines. */
.crew .addpoint form { display: flex; flex-wrap: wrap; gap: 10px; }
.crew .addpoint .dlabel { flex: 1 1 100%; margin-bottom: 0; }
.crew .addpoint input {
  font: inherit; flex: 1 1 100%; min-height: 48px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--card); color: var(--ink);
}
/* Quieter than Save: adding a point is a thing you do once in an afternoon, and the round of
   measuring is what the green button on this screen is for. */
.crew .addpoint button {
  font: inherit; font-weight: 650; flex: 1 1 100%; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--card); color: var(--deep); cursor: pointer;
}
.crew .addpoint button:active { background: var(--line-2); }

/* Asked for and not said yet. Amber rather than green: it is a thing still owed, not a thing done,
   and it goes away by itself the moment somebody says something. */
.crew .owedrows { margin-bottom: 10px; }
.crew .jobcard2.owed { border-color: var(--sun); background: var(--sun-soft); }

/* "I am stuck", on the project composer. Set apart from Save by a rule and a colour: they are two
   different things to say and the difference has to survive a thumb in a hurry. */
.crew .stuckform {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.crew .stuckform textarea { width: 100%; font: inherit; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card);
  color: var(--ink); }
.crew .btn-big.warn { background: var(--sun); border-color: var(--sun); color: #fff; }


/* ---- what the barn board is saying about you ---------------------------------------------------
   Opening a job or a round starts a clock, and the wall in the barn reads that clock to say who is
   on what. The app never mentioned it, so the crew had no way of knowing that opening the thing they
   were actually doing is what tells everybody else — which is the useful half of the mechanism.

   A STATEMENT, NOT A CONTROL. No minutes, no Stop, nothing to press: this is the app saying what has
   been communicated. Green pip because green means "on" everywhere else in this app; the plain card
   because a coloured panel here would compete with the nudge, which IS a control. */
.onboard {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  padding: 11px 14px; border-radius: var(--r-s);
  background: var(--card); border: 1px solid var(--line);
  box-shadow: inset 3px 0 0 var(--sprout);
}
.onboard .pip {
  flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sprout);
  box-shadow: 0 0 0 4px var(--sprout-soft);
}
.onboard .x { flex: 1; min-width: 0; }
.onboard b { display: block; font-size: 15.5px; line-height: 1.3; }
.onboard em {
  display: block; font-style: normal; font-size: 13px; color: var(--muted);
  margin-top: 3px; line-height: 1.45;
}
.onboard .say {
  flex: none; align-self: center; min-height: 40px; display: grid; place-items: center;
  padding: 0 13px; border-radius: var(--r-s); text-decoration: none;
  font-size: 14px; font-weight: 650; color: var(--sprout); background: var(--sprout-soft);
}
/* Nothing open, so the wall has nothing to show for this person. The same fact the other way up,
   and the only place it is ever said is the day list. */
.onboard.off { box-shadow: inset 3px 0 0 var(--line); }
.onboard.off .pip { background: transparent; border: 2px solid var(--faint); box-shadow: none; }
.onboard.off b { color: var(--muted); }

/* ---- how the last few shifts went (/crew/how) ---------------------------------------------------
   ONE person's own figure. There is no comparison on this page and no second name, so nothing here
   is styled as a rank or a bar against anybody: a number, what it is out of, and the days behind
   it. The big figure borrows the weather page's proportions because it is read the same way — one
   glance, at arm's length. */
.howfig { text-align: center; padding: 14px 0 6px; }
.howfig .pct {
  font-size: 74px; font-weight: 300; letter-spacing: -.04em; color: var(--deep); line-height: 1;
}
.howfig .pct span { font-weight: 200; }
.howfig .of { font-size: 16px; font-weight: 650; color: var(--ink); margin: 8px 18px 0;
  line-height: 1.35; }
.howfig .also { font-size: 14px; color: var(--muted); margin-top: 5px; }

.howdays {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
}
.howdays .d { padding: 12px 14px 13px; border-top: 1px solid var(--line-2); }
.howdays .d:first-child { border-top: 0; }
.howdays .head { display: flex; align-items: center; gap: 10px; }
.howdays .when { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 650; color: var(--ink); }
.howdays .what { list-style: none; margin: 8px 0 0; padding: 0; }
.howdays .what li {
  display: flex; align-items: baseline; gap: 8px; padding: 3px 0;
  font-size: 14px; color: var(--ink);
}
/* Finished is the quiet state. The eye should land on what did not get done, which is the only
   part of this page anybody can act on. */
.howdays .what li.ok { color: var(--muted); }
.howdays .what .mk { flex: none; width: 12px; text-align: center; color: var(--sprout); }
.howdays .what li.ok .mk { color: var(--sprout); }
.howdays .what li:not(.ok) .mk { color: var(--faint); }
.howdays .what .nm { flex: 1; min-width: 0; }
.howdays .what .left { flex: none; font-size: 12.5px; color: var(--muted); }


/* ---- a job that asks for pairs of numbers ---------------------------------------------------- */
/* "Chicken washed / unfit" is one question with two halves, and stacked down a phone it read as two
   unrelated ones. The heading is the thing being counted; the boxes are what about it. */
.dgroup { margin: 16px 0 0; }
/* The thing being counted, over the two things asked about it. Set above the pair rather than
   level with them: at the same weight the heading read as a third box's label. */
.dgroup .dlabel {
  display: block; font-size: 17px; font-weight: 700; color: var(--ink);
  text-transform: none; letter-spacing: 0;
}
.dpair { display: flex; gap: 10px; margin-top: 6px; }
.dcell { flex: 1; min-width: 0; display: block; }
.dcell .dsub {
  display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px;
  letter-spacing: .02em;
}
.dcell input {
  width: 100%; text-align: center; font: inherit; font-size: 26px; font-weight: 700;
  padding: 10px 0; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); color: var(--ink);
}
.dcell input:disabled { color: var(--muted); background: var(--card); }


/* ---- what the crew said: the whole farm's updates, on a phone -----------------------------------
   Manager-only screen (see /crew/updates). Everything is under .saidcard / .said* so it cannot
   reach any other screen in this app. */

.dayhead {
  margin: 18px 2px 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}
.dayhead:first-child { margin-top: 4px; }

/* The whole card is the door to the job. On a phone a small "open" link beside a paragraph is a
   target nobody hits; the card is the target. */
.saidcard {
  display: block; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 14px; margin-bottom: 10px;
}
.saidcard:active { background: var(--card-2); }
.saidwho { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14.5px; }
.saidwho .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.saidwho .quiet { color: var(--faint); font-size: 13px; }
.saidabout { margin-top: 3px; font-size: 13px; color: var(--muted); }
/* pre-wrap: these arrive as lists — "1. Dump the dirt into..." — and a paragraph flattens them. */
.saidbody {
  margin-top: 7px; font-size: 15.5px; line-height: 1.5; color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.saidshot {
  display: block; margin-top: 10px; width: 100%; max-height: 260px;
  object-fit: cover; border-radius: 10px; border: 1px solid var(--line);
}
.saidmore { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 2px 40px; }
.saidmore a {
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600;
  text-decoration: none;
}


/* ---- before you go: the end-of-day nudge on the day list ---------------------------------------
   Warm rather than red. It is a reminder, not a fault, and a screen that shouts at somebody who
   has just finished a nine-hour shift teaches them to tap past it. */
.beforeyougo {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit;
  background: var(--sun-soft, #FBF0DC); border: 1px solid #E8D2A4; border-radius: 14px;
  padding: 13px 14px; margin: 0 0 14px;
}
.beforeyougo:active { filter: brightness(.98); }
.beforeyougo .pic { font-size: 22px; flex: 0 0 auto; }
.beforeyougo .says { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.4; }
.beforeyougo .says strong { display: block; font-size: 15.5px; margin-bottom: 1px; }
.beforeyougo .go { font-size: 22px; color: var(--faint); flex: 0 0 auto; }


/* ---- the farm's day, under your own (manager home) --------------------------------------------- */
.eyebrow2 {
  margin: 22px 2px 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}
/* Who has it, under the name. A count would be a number; these are the people to ring. */
.jobcard2 .who2 {
  display: block; font-size: 12.5px; font-weight: 500; color: var(--muted);
  margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- "seen it": the x on somebody else's update ------------------------------------------------
   A read receipt, not a delete — the note stays for everybody else. Small and quiet: it is the
   least important thing on a card whose point is the sentence. */
.readit { margin-left: auto; }
.readit button {
  border: 0; background: transparent; color: var(--faint);
  font-size: 19px; line-height: 1; padding: 6px 8px; cursor: pointer; border-radius: 8px;
}
.readit button:active { background: var(--line-2); color: var(--ink); }

/* On the manager's feed the card is a link, so the x is positioned over it rather than inside. */
.saidwrap { position: relative; }
.saidread { position: absolute; top: 6px; right: 6px; z-index: 2; }
.saidread button {
  border: 1px solid var(--line); background: var(--card); color: var(--faint);
  font-size: 17px; line-height: 1; width: 34px; height: 34px; border-radius: 10px;
  cursor: pointer; padding: 0;
}
.saidread button:active { background: var(--line-2); color: var(--ink); }
/* Room for it, so a long name does not run under the button. */
.saidwrap .saidwho { padding-right: 40px; }

/* ---- what's up ---------------------------------------------------------------------------------
   Four blocks of numbers on a phone, read at arm's length in a barn. The figure is the biggest
   thing in its block and the labels stay out of its way; nothing here is pressable, so nothing is
   drawn to look as though it is. */
.nowhead { padding: 4px 2px 10px; }
.nowhead h1 { margin: 0; font-size: 1.5rem; }
.nowhead .lede { margin: 2px 0 0; color: var(--faint); }

/* NINE CARDS DOWN ONE SCREEN. Each one was costing thirty pixels of air before it said
   anything, and nine of those is a third of a phone. The card is still a card; it just does not
   hold the numbers at arm's length. */
.nowblock { background: var(--card); border-radius: 14px; padding: 11px 14px; margin-bottom: 9px; }
/* SENTENCE CASE, and no tracking. Nine tracked-out capitalised labels down a page read as nine
   headings competing with the numbers under them, which are the reason anybody opened it. This
   is a caption on a figure, so it is written like one. */
.nowtitle { font-size: .84rem; letter-spacing: 0; text-transform: none;
            color: var(--faint); margin-bottom: 8px; }
.nowblock .bignum { font-size: 2.6rem; line-height: 1.05; font-weight: 600; }
.nowsub { margin-top: 6px; color: var(--faint); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.nowsub strong { color: var(--ink); font-weight: 600; }

.nowrow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
          padding: 7px 0; border-bottom: 1px solid var(--line-2); }
.nowrow:last-of-type { border-bottom: 0; }
.nowrow .what { color: var(--ink); }
/* `nowrap` is right for "6 bags" and wrong for the farm store, whose value is a sentence:
   "Eggs 17, Fairy eggs 4, Duck eggs 2, Pickles 8" ran straight off the side of the card. A
   number cannot break anyway, so the rule buys nothing that min-width does not, and a long value
   now wraps inside the card instead of leaving it. */
.nowrow .val { font-weight: 600; text-align: right; min-width: 0; }
.nowrow .what { flex: 0 0 auto; }
.nowrow .val small { font-weight: 400; color: var(--faint); }
/* Short of feed is the one thing on this page worth a colour. Same test as the stock page. */
.nowrow.islow .val { color: var(--clay); }
.nowwho { color: var(--faint); font-size: .85rem; margin: -2px 0 6px; }
.nowempty { margin: 0; color: var(--faint); }
/* What is on the shelf, one thing per line. A label, then the things under it, because the value
   is a list of counts rather than a single measurement. */
.nowlist { padding: 7px 0; border-bottom: 1px solid var(--line-2); }
.nowlist:last-of-type { border-bottom: 0; }
.nowlist .lab { color: var(--faint); font-size: .9rem; margin-bottom: 4px; }
.nowlist .bit { font-weight: 600; padding: 1px 0; }

/* ---- the week, on Adam's phone only -------------------------------------------------------------
   The day's blocks above and the week's below are different questions, so they get a rule between
   them rather than running on as one long column of cards. */
.statrule { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; color: var(--faint);
            font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.statrule::before, .statrule::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }

/* A person, what it was, and the count. Same skeleton as .nowrow with a name column in front, so
   the two kinds of block read as one page. */
.statrow { display: flex; align-items: baseline; gap: 10px; padding: 8px 0;
           border-bottom: 1px solid var(--line-2); }
.statrow:last-of-type { border-bottom: 0; }
.statrow .dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.statrow .who { font-weight: 600; white-space: nowrap; }
/* The middle column is the one that may be long, so it is the one that shrinks. */
.statrow .what { flex: 1; min-width: 0; color: var(--faint); font-size: .9rem;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.statrow .val { font-weight: 600; text-align: right; white-space: nowrap; }
.statrow .val small { font-weight: 400; color: var(--faint); }
/* Over and under are both worth seeing, and they are not the same news, so they are not the same
   colour. Neither is red: an hours gap is a thing to ask about, not an alarm. */
.statrow .val.over  { color: var(--sun, #c98a1e); }
.statrow .val.under { color: var(--clay); }

/* THE WEEK'S EGGS AS SEVEN BARS. A number per day in a column is seven numbers nobody compares;
   the shape is the whole point, and the figures are written under it for the day that matters. */
.eggweek { display: flex; gap: 6px; align-items: flex-end; }
.eggday { flex: 1; min-width: 0; text-align: center; }
.eggday .bar { height: 74px; display: flex; align-items: flex-end;
               background: var(--line-2); border-radius: 6px; overflow: hidden; }
.eggday .bar span { display: block; width: 100%; background: var(--sprout, #7fb069);
                    border-radius: 6px 6px 0 0; min-height: 2px; }
.eggday .dnum { font-weight: 600; margin-top: 5px; font-size: .95rem; }
.eggday .dsplit { color: var(--faint); font-size: .74rem; }
.eggday .dsplit small { opacity: .6; padding: 0 1px; }
.eggday .dday { color: var(--faint); font-size: .72rem; text-transform: uppercase; }
.statfoot { margin: 10px 0 0; color: var(--faint); font-size: .85rem; }

/* Amber, matching the Labels page: nothing is lost, the queue is holding it. */
.warnblock { background: #fdf3e0; border: 1px solid #e8cf9e; }

/* ---- the notes desk ----------------------------------------------------------------------------
   A box and what came back. Typed one-handed walking across a yard, so the box is big and the
   send button is a thumb's width; everything under it is read, not pressed, except the undos. */
.desk { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.desk textarea { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 12px;
                 background: var(--card); color: var(--ink); font: inherit; resize: vertical; }
.desk button { align-self: flex-end; min-width: 7.5rem; }

.deskmsg { background: var(--card); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.deskmsg.mine { background: var(--sprout-soft); }
.deskmsg .body { white-space: pre-wrap; }
.deskdid { margin: 8px 0 0; padding-left: 1.1rem; color: var(--muted); }
.deskdid li { padding: 2px 0; }
.deskrefused { margin-top: 8px; color: var(--clay); font-size: .9rem; }

.undohead { margin-top: 10px; font-size: .85rem; color: var(--faint); }
.deskundo { list-style: none; margin: 4px 0 0; padding: 0; }
.undoline { display: flex; align-items: center; justify-content: space-between; gap: 10px;
            padding: 5px 0; border-bottom: 1px solid var(--line-2); }
.undoline:last-child { border-bottom: 0; }
.undoline .what { color: var(--muted); font-size: .9rem; }
.undoline .undo { background: none; border: 1px solid var(--line); border-radius: 8px;
                  padding: 3px 12px; color: var(--ink); font: inherit; font-size: .85rem; }
.undoline .undone { color: var(--faint); font-size: .85rem; }