/* ============================================================================
   life kit — shared visual system.

   The language established by the garden's v2 design: system type on a six-step
   scale, elevated surfaces rather than outlines, 44pt targets, one accent that
   means one thing, warm neutrals, and a light mode measured rather than
   eyeballed.

   Light-mode values here are the corrected ones: a warm gold on white failed AA
   at #9A7B3A (3.99:1). #87692F is 5.13:1.
============================================================================ */

:root{
  --bg:        #0E0C07;
  --surface:   #191610;
  --raised:    #221E16;
  --hairline:  rgba(237,230,216,.08);

  --text:      #F2EDE3;
  --second:    rgba(242,237,227,.62);
  --tertiary:  rgba(242,237,227,.38);

  --accent:    #D8BE86;
  --accent-ink:#241C0B;

  --green:     #6E9160;
  --brick:     #C87E5F;
  --cool:      #8FB4D6;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
  --ease: cubic-bezier(.32,.72,0,1);

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px;
}

@media (prefers-color-scheme: light){
  :root{
    --bg:       #F5F1E8;
    --surface:  #FFFFFF;
    --raised:   #FAF7F0;
    --hairline: rgba(20,17,9,.10);
    --text:     #191510;
    --second:   rgba(25,21,16,.70);
    --tertiary: rgba(25,21,16,.60);
    --accent:   #87692F;
    --accent-ink:#FFFFFF;
    --green:    #46683C;
    --brick:    #9E5237;
    --cool:     #35648F;
    --shadow:   0 1px 2px rgba(20,17,9,.06), 0 8px 24px rgba(20,17,9,.07);
  }
}

*{ box-sizing: border-box }
html, body{ margin: 0; background: var(--bg); color: var(--text) }
body{
  font: 400 17px/1.47 -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Segoe UI", system-ui, sans-serif;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  min-height: 100vh;
}
.wrap{
  max-width: 460px; margin: 0 auto; padding: var(--s6) var(--s4) var(--s8);
  min-height: 100vh; display: flex; flex-direction: column;
}

/* ------------------------------------------------------------- app header */
.apphead{ display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5) }
.apphead h1{
  flex: 1; margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.024em;
}
.back{
  flex: 0 0 auto; width: 44px; height: 44px; margin-left: -10px;
  display: grid; place-items: center; border-radius: 999px;
  color: var(--second); text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.back:hover{ background: var(--raised); color: var(--text) }

/* -------------------------------------------------------------- typography */
h2{ margin: 0 0 var(--s3); font-size: 13px; font-weight: 600; color: var(--second); letter-spacing: -.006em }
.lede{ margin: 0 0 var(--s5); font-size: 17px; line-height: 1.5; color: var(--second) }
.note{ margin: var(--s3) 0 0; font-size: 13px; line-height: 1.5; color: var(--tertiary) }
.note code{ font: 500 12px/1 ui-monospace, monospace; background: var(--raised); padding: 2px 5px; border-radius: 5px }

/* -------------------------------------------------------------------- card */
.card{
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: var(--s5); margin-bottom: var(--s3);
}
.card.flush{ padding: var(--s3) var(--s5) }

/* A single hero fact — the thing the app exists to tell you. */
.hero{
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: var(--s6); margin-bottom: var(--s4); text-align: center;
}
.hero .big{ font-size: 34px; font-weight: 700; letter-spacing: -.028em; line-height: 1.1 }
.hero .sub{ margin-top: var(--s2); font-size: 17px; color: var(--second); line-height: 1.4 }

/* -------------------------------------------------------------------- rows */
.row{
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) 0; border-top: 1px solid var(--hairline);
}
.row:first-child{ border-top: 0 }
.row .body{ flex: 1; min-width: 0 }
.row b{ display: block; font-size: 17px; font-weight: 600; letter-spacing: -.014em }
.row .meta{ display: block; font-size: 14px; color: var(--second); line-height: 1.4; margin-top: 1px }
.row .mark{
  flex: 0 0 38px; height: 38px; border-radius: var(--r-sm);
  display: grid; place-items: center; background: var(--raised); color: var(--second);
}

/* Urgency is the one place colour carries meaning beyond the accent. */
.u-overdue{ color: var(--brick) !important }
.u-now    { color: var(--accent) !important }
.u-soon   { color: var(--text) }
.u-ok     { color: var(--second) }
.mark.overdue{ background: color-mix(in srgb, var(--brick) 22%, var(--surface)); color: var(--brick) }
.mark.now    { background: var(--accent); color: var(--accent-ink) }

.pillrow{ display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3) }
.pill{
  min-height: 44px; display: inline-flex; align-items: center; gap: var(--s2);
  padding: 0 var(--s4); border-radius: 999px; border: 0;
  background: var(--raised); color: var(--text);
  font-family: inherit; font-weight: 500; font-size: 15px; line-height: 1; letter-spacing: -.008em; cursor: pointer;
  transition: background-color .2s var(--ease), transform .18s var(--ease);
}
.pill:active{ transform: scale(.96) }
.pill.on{ background: var(--accent); color: var(--accent-ink); font-weight: 600 }

/* ------------------------------------------------------------------ inputs */
input, select, textarea{
  width: 100%; min-height: 44px; background: var(--raised); border: 0;
  border-radius: var(--r-sm); color: var(--text);
  font-family: inherit; font-weight: 400; font-size: 17px; line-height: 1.4; padding: 11px var(--s3);
}
input:focus, textarea:focus, select:focus{
  outline: none;
  background: color-mix(in srgb, var(--accent) 10%, var(--raised));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent);
}
label.field{ display: block; margin-bottom: var(--s3) }
label.field > span{ display: block; font-size: 13px; font-weight: 600; color: var(--second); margin-bottom: var(--s1) }
.fieldrow{ display: flex; gap: var(--s2) }
.fieldrow > *{ flex: 1 }
.fieldrow > .narrow{ flex: 0 0 108px }

button.act{
  min-height: 44px; padding: 0 var(--s5); border: 0; border-radius: var(--r-sm);
  background: var(--accent); color: var(--accent-ink);
  font-family: inherit; font-weight: 600; font-size: 17px; line-height: 1; letter-spacing: -.011em; cursor: pointer;
  transition: transform .18s var(--ease), opacity .2s;
}
button.act:active{ transform: scale(.97) }
button.act.ghost{ background: var(--raised); color: var(--text) }
button.act.wide{ width: 100% }
button.act[disabled]{ opacity: .5; cursor: default }

:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm) }

/* ------------------------------------------------------------------- empty */
.empty{
  text-align: center; padding: var(--s8) var(--s5); color: var(--second);
  font-size: 15px; line-height: 1.55;
}
.empty .mark{
  width: 52px; height: 52px; margin: 0 auto var(--s4); border-radius: var(--r-md);
  display: grid; place-items: center; background: var(--raised); color: var(--tertiary);
}

/* ------------------------------------------------------------------- toast */
#toast{
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translate(-50%, 14px); opacity: 0; pointer-events: none; z-index: 60;
  background: var(--accent); color: var(--accent-ink);
  padding: 12px 20px; border-radius: 999px; font-family: inherit; font-weight: 600; font-size: 15px; line-height: 1;
  box-shadow: var(--shadow);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
#toast.on{ opacity: 1; transform: translate(-50%, 0) }

#updateBar{
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  max-width: 436px; margin: 0 auto; z-index: 50;
  display: flex; align-items: center; gap: var(--s3);
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--r-md); padding: var(--s3) var(--s4);
  box-shadow: var(--shadow); font-size: 15px;
}
#updateBar span{ flex: 1 }
#updateBar button{
  border: 0; border-radius: var(--r-sm); padding: 10px var(--s4);
  background: var(--accent-ink); color: var(--accent);
  font-family: inherit; font-weight: 600; font-size: 15px; line-height: 1; cursor: pointer;
}

@media (prefers-reduced-motion: reduce){ *{ transition: none !important; animation: none !important } }

/* --------------------------------------------------------------- line rows --
   An itemised list — a receipt's purchases, a bill's charges, a seed packet's
   readings. Shared because three apps show the same shape: a name that may run
   long, a figure that must stay put, and sometimes a way to strike a row out.

   The name column is the only one allowed to shrink (min-width:0 — a grid item
   otherwise refuses to go below its content and pushes the price off the
   screen). Prices are tabular so the column reads as a column. */
.lines{ display: grid; gap: 0; margin-top: var(--s2) }

.line{
  display: grid; grid-template-columns: 1fr auto auto; align-items: baseline;
  gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--hairline);
}
.line:last-child{ border-bottom: 0 }

.lname{ min-width: 0; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere }
.lname i{ font-style: normal; color: var(--tertiary); font-size: 13px }

.lprice{
  font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* A 44px target on a 15px glyph: the row is not tall enough to hit reliably
   otherwise, and this one deletes something. */
.lx{
  appearance: none; border: 0; background: none; color: var(--tertiary);
  font-size: 20px; line-height: 1; cursor: pointer;
  min-width: 44px; min-height: 44px; margin: calc(var(--s3) * -1) 0;
  border-radius: var(--r-sm);
}
.lx:hover{ color: var(--brick) }
.lx:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px }

.line.total{
  border-top: 1px solid var(--hairline); border-bottom: 0;
  margin-top: var(--s1); padding-top: var(--s3);
}
.line.total .lname{ color: var(--second) }

/* A note that is telling you something is off, not just explaining the screen.
   Colour alone would not carry it, so it also takes a rule down its edge. */
.note.warn{
  color: var(--brick); border-left: 2px solid var(--brick);
  padding-left: var(--s3); margin-top: var(--s3);
}

/* ------------------------------------------------------------ figure row --
   Two to four headline numbers side by side, each with its unit under it.
   Energy grew these first as private styles in its own <style> block; Renting
   needed the same shape and silently got none of it — the figures stacked into
   a column and the fact list ran its label into its body with a bullet in
   front. Shared here under neutral names so the next app that needs them does
   not have to discover that the hard way. */
.figs{
  display: flex; flex-wrap: wrap; gap: var(--s5);
  margin: var(--s4) 0 0;
}
.fig{ min-width: 0 }
.fig .v{
  font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.fig .k{ display: block; margin-top: 2px; font-size: 13px; color: var(--second) }

/* A list of facts, each a bold lead line and an explanation under it. Not
   bulleted: the lead line already marks where each one starts, and a bullet in
   front of a two-line entry reads as clutter. */
.facts{ margin: var(--s4) 0 0; padding: 0; list-style: none }
.facts li{
  padding: var(--s3) 0; border-top: 1px solid var(--hairline);
  font-size: 15px; line-height: 1.5; color: var(--second);
}
.facts li:first-child{ border-top: 0 }
.facts li b{
  display: block; color: var(--text); font-weight: 600; font-size: 16px;
  margin-bottom: 2px;
}

/* A column of full-width actions. Receipts and Energy each grew their own copy
   of this; it belongs here. `a.act.wide` as well as button, because an action
   that leaves the app is a link and should still look like the others. */
.stack{ display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s4) }
a.act.wide{ width: 100%; box-sizing: border-box; text-align: center; text-decoration: none }

/* Two actions side by side — cancel and confirm. The confirm is second so it
   sits under the thumb on a phone. */
.wide2{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s4) }
.wide2 .act{ width: 100% }

.act.danger{ color: var(--brick) }

/* ------------------------------------------------------- numbered steps --
   Instructions to carry out somewhere else — on a phone, in another app. The
   number is the point: it tells you where you are in a sequence you are
   performing, which a bullet cannot. */
.steps{ margin: var(--s4) 0 0; padding-left: 1.4em }
.steps li{ margin-bottom: var(--s3); font-size: 15px; line-height: 1.55; color: var(--second) }
.steps li b{ color: var(--text); font-weight: 600 }
.steps li::marker{ color: var(--tertiary); font-variant-numeric: tabular-nums }

/* A value to be copied by hand into another app. Monospace because a token is
   read character by character, and the distinction between l, 1 and I decides
   whether it works. */
.pick-code{
  font: 500 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--raised); padding: 2px 6px; border-radius: 5px;
  overflow-wrap: anywhere;
}
.token{
  display: block; margin-top: var(--s3); padding: var(--s3) var(--s4);
  font: 600 17px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em; background: var(--raised); border-radius: var(--r-md);
  overflow-wrap: anywhere; user-select: all;
}