/* Rooted Shores — farm operations.

   Light, warm and calm. This is read by staff of mixed technical confidence, in a barn, in
   daylight, on a phone, and on a TV across a room — every one of those cases is worse on a dark
   surface, which glares in sun and blooms at distance. Dark follows the OS for evening use.

   The logo's green and cyan are kept as identity but darkened, because the original tones fail
   contrast on white. */

/* The hidden attribute must win over any display we set.
 *
 * The browser's own [hidden] rule is display:none, but ANY author rule with a display beats it —
 * so `.updatebar { display: flex }` left the update notice permanently on screen, on every page,
 * announcing an update that did not exist. A bar that is always on is worse than no bar: it
 * teaches people to ignore the one time it is real. */
[hidden] { display: none !important; }


:root {
  --paper:   #F5F7F2;   /* barely-green off-white: greenhouse linen, not cream */
  --card:    #FFFFFF;
  --card-2:  #FAFBF8;
  --ink:     #211E19;
  --muted:   #6B6357;
  --faint:   #938A7C;
  --line:    #E3E2D8;
  --line-2:  #EFEEE7;

  --sprout:      #3F7A34;
  --sprout-soft: #E8F2E3;
  --water:       #1F6E86;
  --water-soft:  #E2F0F4;
  --sun:         #B4740F;
  --sun-soft:    #FBF0DC;
  --clay:        #A8412A;
  --clay-soft:   #F9E7E2;

  --radius: 12px;
  --r-s: 8px;
  --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);

  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16150F; --card: #1E1D16; --card-2: #24231B;
    --ink: #F2EFE6; --muted: #A9A192; --faint: #857D6E;
    --line: #322F25; --line-2: #2A281F;
    --sprout: #8CC97A; --sprout-soft: #22301D;
    --water: #63C2DB;  --water-soft: #162B31;
    --sun: #E0A84C;    --sun-soft: #2E2416;
    --clay: #E08363;   --clay-soft: #2F1C16;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--font); line-height: 1.55;
  -webkit-font-smoothing: antialiased; min-height: 100vh;
  font-variant-numeric: tabular-nums;
}
a { color: var(--water); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--water); outline-offset: 2px; border-radius: 4px; }
.muted { color: var(--muted); }

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

.topbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 22px; background: var(--card); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.topbar .brand { display: flex; align-items: center; gap: 9px; }
/* The BARN, not the whole logo. The full mark has the farm's name drawn into it, so at nav size
   it was an unreadable smudge sitting beside the same name set properly in type two centimetres
   to the right. Trimmed of its own whitespace, so the gap here is the only gap. */
.topbar .brand img { height: 42px; width: auto; display: block; }
.topbar .brand .name { font-weight: 650; letter-spacing: -.01em; line-height: 1.15; }
.topbar .brand .name small {
  display: block; color: var(--faint); font-size: 10px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
}
.topbar nav { display: flex; gap: 2px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.topbar nav a {
  padding: 7px 13px; border-radius: 999px; color: var(--muted);
  font-size: 14px; font-weight: 550;
}
.topbar nav a:hover { background: var(--line-2); color: var(--ink); text-decoration: none; }
.topbar nav a.active { background: var(--sprout-soft); color: var(--sprout); }
.topbar .who { color: var(--faint); font-size: 13px; padding-left: 8px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 26px 20px 72px; }

/* ---- type -------------------------------------------------------------------------------- */

h1 { font-size: 27px; font-weight: 680; letter-spacing: -.02em; margin: 0 0 4px; }
h2 { font-size: 18px; font-weight: 650; letter-spacing: -.01em; margin: 0 0 12px; }
h3 { font-size: 15px; font-weight: 620; margin: 0 0 6px; }
.lede { color: var(--muted); margin: 0 0 22px; max-width: 68ch; }

/* Letter-spaced small caps: the section markers of the barn whiteboard this replaces. */
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--faint); margin: 34px 0 12px; display: flex; align-items: center; gap: 10px;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.page-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.breadcrumb { color: var(--faint); font-size: 13px; margin-bottom: 8px; }
.breadcrumb a { color: var(--muted); }

/* ---- cards + layout ---------------------------------------------------------------------- */

.card, .panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-s);
}
.panel { padding: 20px; }
.panel + .panel { margin-top: 16px; }
.grid { display: grid; gap: 14px; }
.grid.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.g3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid.g4 { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }

/* ---- stats ------------------------------------------------------------------------------- */

.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.stat .k { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.stat .v { font-size: 30px; font-weight: 640; letter-spacing: -.02em; margin-top: 4px; line-height: 1.1; }
.stat .u { font-size: 12px; color: var(--muted); margin-top: 2px; }
.stat.good .v { color: var(--sprout); }
.stat.warn .v { color: var(--clay); }

/* ---- progress: one visual language for "how far along" ----------------------------------- */

.bar { height: 8px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--sprout); border-radius: 999px; transition: width .5s ease; }
.bar.water > span { background: var(--water); }
.bar.sun > span { background: var(--sun); }
.bar-row { display: flex; align-items: center; gap: 12px; }
.bar-row .bar { flex: 1; }
.bar-row .pct { font-size: 13px; font-weight: 640; color: var(--muted); min-width: 44px; text-align: right; }

.split { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--line-2); }
.split > span { display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 6px; }

/* ---- pills ------------------------------------------------------------------------------- */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 620; padding: 3px 10px; border-radius: 999px;
  background: var(--line-2); color: var(--muted); white-space: nowrap;
}
.pill.green { background: var(--sprout-soft); color: var(--sprout); }
.pill.blue  { background: var(--water-soft);  color: var(--water); }
.pill.amber { background: var(--sun-soft);    color: var(--sun); }
.pill.red   { background: var(--clay-soft);   color: var(--clay); }

/* Goal -> project -> task lineage. Shown, not merely stored: people work better when they can see
   what their work is for, and it costs one join. */
.lineage { font-size: 12px; color: var(--faint); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lineage a { color: var(--muted); }
.lineage .sep { color: var(--line); }

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

label { display: block; font-size: 12px; font-weight: 650; color: var(--muted); margin-bottom: 5px; }
input, select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--card); color: var(--ink); font-family: var(--font); font-size: 14px;
}
/* Not everything with a border is a text field. The blanket width:100% above stretched every
   checkbox across its row, which pushed the name beside it onto the next line — the people
   picker on a project read as a column of empty boxes with names underneath them. */
input[type="checkbox"], input[type="radio"] {
  width: auto; padding: 0; margin: 0; vertical-align: middle;
}
textarea { min-height: 70px; resize: vertical; }

/* Tick-as-many-as-you-need lists: chips that wrap, not a stack of full-width rows. */
.peoplepick { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 4px 0 0; }
.peoplepick .pick {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  font-size: 13.5px; font-weight: 500; color: var(--ink); cursor: pointer;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--water); box-shadow: 0 0 0 3px var(--water-soft); }
.field { margin-bottom: 12px; }
.field label { margin-bottom: 5px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1; min-width: 140px; }
.row > .shrink { flex: 0 0 auto; min-width: 0; }

button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font); font-size: 14px; font-weight: 620; padding: 9px 16px;
  border-radius: var(--r-s); border: 1px solid var(--line);
  background: var(--card); color: var(--ink); cursor: pointer; text-decoration: none;
  transition: background .15s, filter .15s;
}
button:hover, .btn:hover { background: var(--line-2); text-decoration: none; }
button.primary, .btn.primary { background: var(--sprout); border-color: var(--sprout); color: #fff; }
button.primary:hover, .btn.primary:hover { filter: brightness(1.08); background: var(--sprout); }
button.ghost, .btn.ghost { background: transparent; color: var(--muted); }
button.ghost:hover { background: var(--line-2); color: var(--ink); }
button.quiet { border-color: transparent; background: transparent; color: var(--muted); }
button.quiet:hover { background: var(--line-2); }
button.danger { color: var(--clay); border-color: var(--clay-soft); background: transparent; }
button.danger:hover { background: var(--clay-soft); }
button.small, .btn.small { padding: 5px 11px; font-size: 13px; }
.num-control { display: flex; gap: 8px; align-items: center; }
.num-control input { width: 100px; }

details.adder > summary {
  cursor: pointer; font-size: 14px; font-weight: 620; color: var(--water);
  padding: 8px 0; list-style: none;
}
details.adder > summary::-webkit-details-marker { display: none; }
details.adder > summary::before { content: "+ "; font-weight: 700; }
details.adder[open] > summary::before { content: "− "; }

/* ---- tables ------------------------------------------------------------------------------ */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--faint); padding: 0 12px 9px 0;
  border-bottom: 1px solid var(--line);
}
td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line-2); vertical-align: top; }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; padding-right: 0; }
td .state { font-size: 11px; padding: 2px 9px; border-radius: 999px; background: var(--line-2); color: var(--muted); }
.state.acked { background: var(--sprout-soft); color: var(--sprout); }
.state.failed { background: var(--clay-soft); color: var(--clay); }
.state.pending, .state.sent { background: var(--sun-soft); color: var(--sun); }

/* ---- empty states: an invitation to act, never a shrug ----------------------------------- */

.empty {
  padding: 30px 22px; text-align: center; color: var(--muted);
  border: 1px dashed var(--line); border-radius: var(--radius); background: var(--card-2);
}
.empty strong { display: block; color: var(--ink); font-weight: 620; margin-bottom: 4px; }

.note { font-size: 13px; color: var(--muted); line-height: 1.5; }
.err { color: var(--clay); font-size: 13px; margin: 8px 0 0; }
.flash { padding: 11px 14px; border-radius: var(--r-s); font-size: 14px; margin-bottom: 16px; }
.flash.ok  { background: var(--sprout-soft); color: var(--sprout); }
.flash.bad { background: var(--clay-soft); color: var(--clay); }

/* ---- reconciliation: neutral by design --------------------------------------------------- */

.recon {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.recon .cell { background: var(--card); padding: 14px 16px; }
.recon .cell.result { background: var(--card-2); }
.recon .cell.flagged { background: var(--clay-soft); }
.recon .k { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.recon .v { font-size: 22px; font-weight: 640; margin-top: 3px; }
.recon .cell.flagged .v { color: var(--clay); }

/* ---- device panel (existing components, restyled) ---------------------------------------- */

.devices { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.card { overflow: hidden; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.card-head .title { font-weight: 640; }
.card-head .kind { color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.card-head a.title { color: var(--ink); }
.card-head a.title:hover { color: var(--water); }

.status { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: var(--muted); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
.dot.online { background: var(--sprout); box-shadow: 0 0 0 3px var(--sprout-soft); }
.dot.no_stream, .dot.stale_data { background: var(--sun); box-shadow: 0 0 0 3px var(--sun-soft); }
.dot.offline, .dot.never { background: var(--faint); }

.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); }
.tile { background: var(--card); padding: 14px 16px; min-height: 78px; }
.tile .k { color: var(--faint); font-size: 11px; font-weight: 650; letter-spacing: .06em; }
.tile .v { font-size: 26px; font-weight: 640; margin-top: 4px; letter-spacing: -.02em; }
.tile .v .u { font-size: 14px; color: var(--muted); font-weight: 550; margin-left: 4px; }
.tile.bool .v.on { color: var(--sprout); }
.tile.bool .v.off { color: var(--faint); }

.controls { padding: 12px 16px 16px; border-top: 1px solid var(--line); display: grid; gap: 10px; background: var(--card-2); }
.control { display: flex; align-items: center; gap: 12px; }
.control .lbl { font-size: 14px; flex: 1; }
.control .pending { font-size: 11px; color: var(--sun); }

.switch { position: relative; width: 52px; height: 30px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; background: var(--line); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; transition: .18s; }
.slider::before { content: ""; position: absolute; height: 22px; width: 22px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .18s; box-shadow: var(--shadow-s); }
.switch input:checked + .slider { background: var(--sprout); border-color: var(--sprout); }
.switch input:checked + .slider::before { transform: translateX(22px); }
.switch.busy .slider { opacity: .5; }

.enroll-card { background: var(--water-soft); border: 1px dashed var(--water); border-radius: var(--radius); padding: 16px; margin-top: 14px; }
.enroll-card code { font-family: var(--mono); color: var(--water); font-size: 13px; word-break: break-all; }
.enroll-card pre { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; }
.code-pill { display: inline-block; font-family: var(--mono); font-size: 20px; letter-spacing: 1px; color: var(--sprout); background: var(--card); border: 1px solid var(--line); padding: 8px 14px; border-radius: var(--r-s); font-weight: 650; }

.sparkline { display: block; width: 100%; height: 40px; margin-top: 8px; }

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

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: 100%; max-width: 380px; text-align: center; }
.login-card img { height: 80px; margin-bottom: 6px; }
.login-card .panel { text-align: left; margin-top: 18px; }

/* ---- staff kiosk: big targets, muddy hands, one shared tablet ---------------------------- */

.kiosk { max-width: 900px; margin: 0 auto; padding: 26px 18px 60px; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.person {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 12px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); cursor: pointer; text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-s); transition: transform .12s, box-shadow .12s;
}
.person:hover { transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.avatar {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 21px; letter-spacing: -.02em;
}
.person .nm { font-weight: 620; font-size: 15px; text-align: center; }
.person .rl { font-size: 12px; color: var(--faint); }
.person.on { border-color: var(--sprout); box-shadow: 0 0 0 3px var(--sprout-soft); }

.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 300px; margin: 20px auto 0; }
.pinpad button { font-size: 24px; font-weight: 620; padding: 18px 0; }
.pindots { display: flex; gap: 12px; justify-content: center; margin: 18px 0 4px; }
.pindots i { width: 14px; height: 14px; border-radius: 50%; background: var(--line); display: block; }
.pindots i.on { background: var(--sprout); }

.activity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.activity {
  padding: 20px 16px; border-radius: var(--radius); border: 2px solid var(--line);
  background: var(--card); font-weight: 620; font-size: 16px; cursor: pointer; text-align: left;
}
.activity:hover { background: var(--line-2); }
.activity.current { border-color: var(--sprout); background: var(--sprout-soft); color: var(--sprout); }
.activity .sub { display: block; font-size: 12px; font-weight: 550; color: var(--faint); margin-top: 3px; }

@media (max-width: 640px) {
  .wrap { padding: 18px 14px 60px; }
  h1 { font-size: 23px; }
  .topbar { padding: 10px 14px; }
  .topbar nav a { padding: 6px 10px; font-size: 13px; }
}

/* ---- plot map: beds drawn as the strips they actually are -------------------------------- */

.plotmap { display: flex; gap: 5px; align-items: stretch; overflow-x: auto; padding-bottom: 4px; }
.bed {
  flex: 1 1 0; min-width: 62px; min-height: 120px; text-decoration: none; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 7px; background: var(--card-2);
  padding: 9px 7px; display: flex; flex-direction: column; gap: 3px; align-items: center;
  text-align: center; transition: transform .1s, box-shadow .1s;
}
.bed:hover { transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.bed .bnum { font-size: 11px; font-weight: 700; color: var(--faint); }
.bed .bcrop { font-size: 13px; font-weight: 620; line-height: 1.2; }
.bed .bwhen { font-size: 11px; color: var(--muted); margin-top: auto; }
.bed .bempty { font-size: 12px; color: var(--faint); font-style: italic; margin-top: auto; }


/* ---- update notice ------------------------------------------------------------------------- */
.updatebar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; z-index: 80;
  background: var(--ink); color: var(--paper);
  padding: 11px 12px 11px 18px; border-radius: 999px; font-size: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
}
.updatebar button {
  background: var(--sprout); color: #fff; border: none; font: inherit; font-weight: 650;
  padding: 7px 15px; border-radius: 999px; cursor: pointer; width: auto;
}
.updatebar button.dismiss {
  background: transparent; color: var(--paper); opacity: .6; padding: 4px 9px; font-size: 19px;
  line-height: 1;
}
.updatebar button.dismiss:hover { opacity: 1; }
@media (max-width: 520px) { .updatebar { left: 12px; right: 12px; transform: none; border-radius: 14px; } }


/* ---- board: it updates itself, and says so when it cannot ----------------------------------- */
.boardstale {
  position: fixed; right: 16px; top: 16px; z-index: 90;
  background: var(--clay); color: #fff; padding: 8px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 650;
}


/* ---- pinning a project to the barn board ---------------------------------------------------
   A star in the corner rather than a button in the row: the button wrapped the pill line onto two
   lines on every card, and the state it shows is binary, so a control the size of a word was doing
   the job of a control the size of a glyph. */
.pcard { position: relative; }
.pinstar { position: absolute; top: 10px; right: 12px; margin: 0; }
.pinstar button {
  background: none; border: none; padding: 2px 4px; width: auto;
  font-size: 22px; line-height: 1; cursor: pointer; color: var(--line-2);
  transition: color .12s;
}
.pinstar button:hover { color: var(--faint); }
.pinstar button.on { color: #E0A33C; }

/* ---- the settings menu -------------------------------------------------------------------
   A <details> rather than a scripted dropdown: it opens with a click and closes with Escape on
   its own, keyboard included, and it still works if the JavaScript on a page has thrown. */
.topbar nav details.menu { position: relative; display: inline-block; }
.topbar nav details.menu > summary {
  list-style: none; cursor: pointer; padding: 6px 10px; border-radius: 7px;
  color: var(--muted); font-size: 14px; white-space: nowrap;
}
.topbar nav details.menu > summary::-webkit-details-marker { display: none; }
.topbar nav details.menu > summary::after { content: " ▾"; opacity: .55; }
.topbar nav details.menu > summary:hover { color: var(--ink); background: var(--card-2); }
.topbar nav details.menu > summary.active { color: var(--sprout); font-weight: 650; }
.topbar nav .menupop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 170px;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
}
.topbar nav .menupop a { padding: 8px 10px; border-radius: 6px; }