/* SEED — Rhizotron. The dashboard is a root-observation window: dark loam behind glass,
   growth traced in dated pens. Read DESIGN.md before changing the world. */

@font-face {
  font-family: "Bricolage";
  src: url("/fonts/bricolage.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* Loam and glass */
  --loam: #2b211a;
  --loam-deep: #1f1813;
  --soil: #3d3026;
  --soil-hi: #4a3a2e;
  --grid: rgba(233, 236, 223, 0.055);
  --bone: #e9ecdf;          /* grease pencil */
  --bone-2: #c9c4b2;        /* secondary annotation, still >= 4.5:1 on loam */
  --bone-3: #9d9583;        /* tertiary, large text / marks only */

  /* Dated pens (today is always chartreuse) */
  --pen-today: #b9e34b;
  --pen-1: #3f73d6;
  --pen-2: #e5582f;
  --pen-3: #9a6bd1;
  --pen-4: #d6a23a;
  --pen-1-ink: #7fa4ef;     /* lighter versions for text on loam */
  --pen-2-ink: #f08a68;
  --pen-3-ink: #c3a2ec;
  --pen-4-ink: #e8c070;

  --fail: var(--bone);     /* failure is line form (a strike), never a date pen */

  /* One face, one ladder */
  --f: "Bricolage", ui-sans-serif, system-ui, sans-serif;
  --t-1: 0.75rem;   /* 12 */
  --t-2: 0.875rem;  /* 14 */
  --t-3: 1rem;      /* 16 */
  --t-4: 1.25rem;   /* 20 */
  --t-5: 1.75rem;   /* 28 */
  --t-6: 2.5rem;    /* 40 */

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --tray-h: 76px;

  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--f);
  font-size: var(--t-3);
  line-height: 1.45;
  font-optical-sizing: auto;
  color: var(--bone);
  background-color: var(--loam);
  /* soil grain (procedural) + acetate grid, fixed like glass over soil */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.75  0 0 0 0 0.62  0 0 0 0 0.48  0 0 0 0.09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='640' preserveAspectRatio='none'><path d='M0 150 C 180 132 330 176 520 158 S 790 140 900 162 L900 228 C 760 214 600 246 430 232 S 140 218 0 236Z' fill='rgba(61,48,38,0.30)'/><path d='M0 318 C 210 330 380 300 560 316 S 800 332 900 312 L900 340 C 720 352 520 332 330 344 S 90 336 0 346Z' fill='rgba(61,48,38,0.2)'/><path d='M0 468 C 160 452 360 486 600 470 S 820 456 900 474 L900 548 C 700 534 470 566 260 550 S 60 540 0 556Z' fill='rgba(74,58,46,0.16)'/></svg>"),
    radial-gradient(120% 70% at 50% 110%, #3a2c22 0%, var(--loam) 55%, var(--loam-deep) 100%);
  background-size: 220px 220px, 38px 38px, 38px 38px, 1100px 640px, 100% 100%;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-variant-numeric: tabular-nums;
}

::selection { background: var(--pen-today); color: var(--loam-deep); }
input, textarea { caret-color: var(--pen-today); }
:focus-visible { outline: 2px solid var(--pen-today); outline-offset: 3px; border-radius: 6px; }
* { scrollbar-width: thin; scrollbar-color: var(--soil-hi) transparent; }
a { color: var(--bone); text-underline-offset: 3px; text-decoration-color: var(--bone-3); }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.45; }

/* ---------- top line ---------- */
.head {
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(var(--loam-deep) 0%, var(--loam-deep) 82%, rgba(31, 24, 19, 0));
  padding-bottom: var(--s-3);
}
.topline {
  padding: calc(var(--safe-t) + var(--s-3)) var(--s-4) var(--s-3);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-3);
  max-width: 760px; margin: 0 auto;
}
.mark { display: flex; align-items: center; gap: var(--s-2); font-weight: 760; letter-spacing: 0.02em; font-size: var(--t-4); }
.mark svg { width: 22px; height: 22px; }
.budget { justify-self: center; font-size: var(--t-2); color: var(--bone-2); white-space: nowrap; }
.budget b { color: var(--bone); font-weight: 650; }
.alive { display: flex; align-items: center; gap: 6px; font-size: var(--t-2); color: var(--bone-2); }
.alive i { width: 9px; height: 9px; border-radius: 50%; background: var(--pen-today); }
.alive.asleep i { background: var(--bone-3); animation: none; }
.alive.down i { background: transparent; box-shadow: inset 0 0 0 2px var(--bone); }

.views { display: flex; gap: var(--s-1); padding: 0 var(--s-3); overflow-x: auto; max-width: 760px; margin: 0 auto; scrollbar-width: none; }
.views a {
  flex: none; text-decoration: none; font-size: var(--t-2); color: var(--bone-2);
  padding: 7px 12px; border-radius: 999px; border: 1px solid transparent;
}
.views a[aria-current="page"] { color: var(--bone); border-color: rgba(233, 236, 223, 0.28); background: rgba(233, 236, 223, 0.06); }

main { padding-bottom: calc(var(--tray-h) + var(--safe-b) + var(--s-6)); }

/* ---------- root window ---------- */
.window { position: relative; max-width: 1100px; margin: 0 auto; }
.window::after { /* the glass: a faint diagonal sheen over the soil */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(233, 236, 223, 0.035) 0%, rgba(233, 236, 223, 0) 28%, rgba(233, 236, 223, 0) 62%, rgba(233, 236, 223, 0.025) 78%, rgba(233, 236, 223, 0) 100%);
}
.window svg.roots { display: block; width: 100%; overflow: visible; }
.roots .trunk { stroke: var(--bone); stroke-width: 3.2; fill: none; stroke-linecap: round; opacity: 0.9; }
.roots .lat { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.roots .lat.pending { stroke-dasharray: 1 6; }
.roots .lat.waiting { stroke-dasharray: 9 6; }
.roots .lat.ink { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ink 1.6s var(--ease) forwards; }
.roots .lat.ink.pending, .roots .lat.ink.waiting { animation: none; stroke-dashoffset: 0; }
@keyframes ink { to { stroke-dashoffset: 0; } }
.roots .strike { stroke: var(--fail); stroke-width: 2.4; stroke-linecap: round; }
.roots .knot { fill: var(--loam); stroke: var(--bone); stroke-width: 2; }
.roots .node { stroke: var(--loam-deep); stroke-width: 2; }
.roots .node.hollow { fill: var(--loam) !important; stroke-width: 2.4; }
.roots .hit { fill: transparent; cursor: pointer; }
.roots .label { font-size: 14px; fill: var(--bone); font-weight: 550; }
.roots .meta { font-size: 12px; fill: var(--bone-2); }
.roots .meta.warn { fill: var(--bone); font-weight: 600; }
.roots .note { font-size: 14px; fill: var(--bone); font-style: normal; }
.roots .note.dim { fill: var(--bone-2); font-size: 12px; }
.roots .daymark { font-size: 12px; fill: var(--bone-2); letter-spacing: 0.02em; }
.roots .live .halo { opacity: 0.22; animation: halo 2.6s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes halo { 0%, 100% { transform: scale(0.7); opacity: 0.32; } 50% { transform: scale(1.35); opacity: 0.08; } }
.roots .tipline { stroke-width: 2.4; stroke-linecap: round; }
.roots .dayline { stroke: var(--grid); stroke-width: 1; stroke-dasharray: 2 4; }
.roots .tipline { stroke-dasharray: 3 5; animation: grow 1.2s linear infinite; }
@keyframes grow { to { stroke-dashoffset: -16; } }


.legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding: var(--s-4); font-size: var(--t-1); color: var(--bone-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend svg { width: 26px; height: 8px; }

.empty { padding: var(--s-7) var(--s-5); text-align: center; color: var(--bone-2); max-width: 34ch; margin: 0 auto; }
.empty h2 { font-size: var(--t-4); color: var(--bone); margin: 0 0 var(--s-2); font-weight: 650; }

/* ---------- thumb tray ---------- */
.tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: var(--s-3) max(var(--s-4), calc((100vw - 760px) / 2 + var(--s-4))) calc(var(--s-3) + var(--safe-b));
  display: flex; gap: var(--s-3); align-items: center;
  background: linear-gradient(rgba(31, 24, 19, 0), rgba(31, 24, 19, 0.94) 30%, var(--loam-deep));
}
.tags-btn {
  flex: 1; min-height: 52px; display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-4); border-radius: 16px; text-align: left;
  background: var(--soil); box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(233, 236, 223, 0.06);
}
.tags-btn .tagicon { width: 26px; height: 26px; flex: none; }
.tags-btn .what { font-size: var(--t-2); color: var(--bone-2); line-height: 1.25; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tags-btn .what b { color: var(--bone); font-weight: 650; font-size: var(--t-3); display: block; }
.tags-btn.has { background: var(--soil-hi); }
.count {
  margin-left: auto; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px;
  display: grid; place-items: center; font-weight: 700; font-size: var(--t-2);
  background: var(--pen-today); color: var(--loam-deep);
}
.plant-btn {
  min-height: 52px; padding: 0 var(--s-5); border-radius: 16px; font-weight: 650;
  display: flex; align-items: center; gap: var(--s-2);
  background: var(--bone); color: var(--loam-deep);
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.8);
  transition: transform 160ms var(--ease);
}
.plant-btn:active, .tags-btn:active { transform: scale(0.97); }
.plant-btn svg { width: 20px; height: 20px; }

/* ---------- sheets ---------- */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(15, 11, 8, 0.6); animation: fade 220ms var(--ease); }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 88vh; overflow-y: auto;
  padding: var(--s-3) var(--s-4) calc(var(--s-6) + var(--safe-b));
  background: var(--loam-deep); border-radius: 22px 22px 0 0;
  box-shadow: 0 -16px 40px -12px rgba(0, 0, 0, 0.8);
  animation: rise 320ms var(--ease);
  overscroll-behavior: contain;
}
.sheet .grab { width: 44px; height: 5px; border-radius: 3px; background: var(--soil-hi); margin: 0 auto var(--s-4); }
.sheet h2 { font-size: var(--t-5); line-height: 1.15; margin: 0 0 var(--s-4); font-weight: 700; text-wrap: balance; }
.sheet h3 { font-size: var(--t-4); margin: var(--s-6) 0 var(--s-3); font-weight: 650; }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } }
@media (min-width: 760px) {
  .sheet { left: 50%; width: 560px; transform: translateX(-50%); border-radius: 22px; bottom: var(--s-5); }
  @keyframes rise { from { transform: translate(-50%, 40px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
}

/* seed tags (questions, picks) */
.tag {
  position: relative; margin: 0 0 var(--s-4); padding: var(--s-4) var(--s-4) var(--s-4) 46px;
  border-radius: 6px 16px 16px 6px; background: var(--soil);
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.75);
}
.tag::before { /* punched hole */
  content: ""; position: absolute; left: 16px; top: 20px; width: 10px; height: 14px; border-radius: 5px;
  background: var(--loam-deep); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(233, 236, 223, 0.14);
}
.tag .q { font-size: var(--t-3); font-weight: 600; margin: 0 0 var(--s-1); line-height: 1.4; }
.tag .tmeta { font-size: var(--t-2); color: var(--bone-2); margin-bottom: var(--s-3); }
.tag.blocking::before { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 0 2px var(--pen-today); }
.tag.done { opacity: 0.62; }
.tag.done .q { text-decoration: line-through; text-decoration-color: var(--bone-3); }

.choices { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  min-height: 44px; padding: 0 var(--s-4); border-radius: 12px; font-size: var(--t-2); font-weight: 600;
  background: rgba(233, 236, 223, 0.08); box-shadow: inset 0 0 0 1px rgba(233, 236, 223, 0.2);
}
.chip.primary { background: var(--bone); color: var(--loam-deep); box-shadow: none; }
.chip.go { background: var(--pen-today); color: var(--loam-deep); box-shadow: none; }
.chip:active { transform: scale(0.97); }

.field { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.field label { font-size: var(--t-2); color: var(--bone-2); font-weight: 600; }
.field textarea, .field input, .field select {
  width: 100%; font: inherit; font-size: var(--t-3); color: var(--bone);
  padding: var(--s-3) var(--s-4); border-radius: 12px; border: 1px solid rgba(233, 236, 223, 0.18);
  background: rgba(15, 11, 8, 0.55);
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.45; }
.field textarea::placeholder, .field input::placeholder { color: var(--bone-3); }
.row { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.error { color: var(--bone); font-weight: 600; font-size: var(--t-2); margin: var(--s-2) 0; }
.hint { color: var(--bone-2); font-size: var(--t-2); }

.seg { display: flex; padding: 3px; gap: 3px; border-radius: 12px; background: rgba(15, 11, 8, 0.55); box-shadow: inset 0 0 0 1px rgba(233, 236, 223, 0.14); }
.seg button { flex: 1; min-height: 40px; border-radius: 9px; font-size: var(--t-2); color: var(--bone-2); font-weight: 600; }
.seg button[aria-pressed="true"] { background: var(--soil-hi); color: var(--bone); }

/* ---------- blind pick ---------- */
.pick { position: fixed; inset: 0; z-index: 50; background: var(--loam-deep); display: grid; grid-template-rows: auto 1fr auto; animation: fade 200ms var(--ease); }
.pick header { padding: calc(var(--safe-t) + var(--s-3)) var(--s-4) var(--s-3); display: grid; gap: var(--s-1); }
.pick header .prompt { font-size: var(--t-4); font-weight: 650; line-height: 1.25; text-wrap: balance; }
.pick header .sub { font-size: var(--t-2); color: var(--bone-2); }
.pick .close { position: absolute; right: var(--s-3); top: calc(var(--safe-t) + var(--s-2)); width: 44px; height: 44px; display: grid; place-items: center; }
.pick .close svg { width: 22px; height: 22px; }
.strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s-4); padding: 0 var(--s-5); scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.cand { flex: 0 0 84%; scroll-snap-align: center; display: grid; grid-template-rows: auto 1fr; gap: var(--s-2); min-height: 0; }
.cand .who { font-size: var(--t-2); font-weight: 700; display: flex; align-items: center; gap: var(--s-2); }
.cand .who i { width: 12px; height: 12px; border-radius: 50%; }
.cand .frame {
  border-radius: 18px; overflow: hidden; background: #fff; min-height: 0;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.85);
  outline: 3px solid transparent; outline-offset: 3px; transition: outline-color 200ms var(--ease);
}
.cand.chosen .frame { outline-color: var(--pen-today); }
.cand iframe { width: 100%; height: 100%; border: 0; display: block; }
.cand img { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--soil); }
.cand .text { padding: var(--s-5); background: var(--soil); color: var(--bone); height: 100%; overflow: auto; font-size: var(--t-3); white-space: pre-wrap; }
.pick footer { padding: var(--s-3) var(--s-4) calc(var(--s-4) + var(--safe-b)); display: grid; gap: var(--s-3); }
.dots { display: flex; justify-content: center; gap: var(--s-2); }
.dots button { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--t-2); color: var(--loam-deep); }
.dots button[aria-current="true"] { box-shadow: 0 0 0 3px var(--loam-deep), 0 0 0 5px var(--bone); }

/* ---------- specimens, archive, ledger ---------- */
.page { padding: var(--s-4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); max-width: 760px; margin: 0 auto; }
.page > h1 { font-size: var(--t-6); line-height: 1.05; margin: var(--s-4) 0 0; font-weight: 750; letter-spacing: -0.02em; }
.page > p.lede { margin: 0 0 var(--s-2); color: var(--bone-2); max-width: 46ch; }

.slips { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.slip { /* a specimen label on acetate: thin rule, square-ish corners, no shadow */
  position: relative; padding: var(--s-4) var(--s-5) var(--s-4) 64px; border-radius: 4px;
  background: rgba(233, 236, 223, 0.035); border: 1px solid rgba(233, 236, 223, 0.16);
}
.slip .sprig { position: absolute; left: 14px; top: 16px; width: 40px; height: 40px; }
.slip .name { font-size: var(--t-5); font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; margin: 0; }
.slip .born { font-size: var(--t-2); font-weight: 600; margin: var(--s-1) 0 var(--s-3); }
.slip .note { color: var(--bone-2); font-size: var(--t-2); margin: 0 0 var(--s-2); max-width: 60ch; }
.slip .uses { font-size: var(--t-2); color: var(--bone); margin: 0; }
.slip.retired { opacity: 0.55; }
.slip.retired .name { text-decoration: line-through; text-decoration-color: var(--bone); }

.memo { padding: var(--s-4) var(--s-5); border-radius: 4px; background: rgba(233, 236, 223, 0.035); border: 1px solid rgba(233, 236, 223, 0.16); }
.memo summary { cursor: pointer; font-weight: 650; display: flex; justify-content: space-between; gap: var(--s-3); list-style: none; }
.memo summary::-webkit-details-marker { display: none; }
.memo summary span { font-weight: 400; font-size: var(--t-1); color: var(--bone-2); white-space: nowrap; }
.memo pre { white-space: pre-wrap; font: inherit; font-size: var(--t-2); color: var(--bone-2); margin: var(--s-3) 0 0; max-width: 70ch; }

.lineage svg { width: 100%; display: block; overflow: visible; }
.lineage .v { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.lineage .vlabel { font-size: 14px; fill: var(--bone); font-weight: 550; }
.lineage .vscore { font-size: 12px; fill: var(--bone-2); }
.envname { font-size: var(--t-4); font-weight: 700; margin: var(--s-4) 0 0; }

.core { width: 100%; max-width: 420px; display: block; overflow: visible; }
.core .leader { stroke: rgba(233, 236, 223, 0.35); stroke-width: 1; }
.core .core-big { font-size: 28px; font-weight: 750; fill: var(--bone); letter-spacing: -0.01em; }
.core .core-md { font-size: 20px; font-weight: 650; fill: var(--bone); }
.core .core-sm { font-size: 14px; fill: var(--bone-2); }

.runs { display: grid; gap: 2px; }
.run { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-2); border-radius: 10px; }
.run:nth-child(odd) { background: rgba(31, 24, 19, 0.45); }
.run .dot { justify-self: center; border-radius: 50%; }
.run .t { font-size: var(--t-2); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run .m { font-size: var(--t-1); color: var(--bone-2); }
.run .usd { font-size: var(--t-2); font-weight: 650; }
.run.failed .t { text-decoration: line-through; text-decoration-color: var(--bone-2); }

.log { display: grid; gap: var(--s-2); font-size: var(--t-2); }
.log .e { display: grid; grid-template-columns: 52px 1fr; gap: var(--s-3); color: var(--bone-2); }
.log .e time { color: var(--bone-3); font-size: var(--t-1); padding-top: 2px; }
.log .e b { color: var(--bone); font-weight: 600; }
.log .e.say span { color: var(--bone); }

.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-bottom: var(--s-4); }
.detail-grid div { font-size: var(--t-1); color: var(--bone-2); }
.detail-grid b { display: block; font-size: var(--t-4); color: var(--bone); font-weight: 700; }
.summary { white-space: pre-wrap; font-size: var(--t-2); color: var(--bone-2); max-width: 70ch; }

/* ---------- login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--s-5); }
.login form { width: min(380px, 100%); display: grid; gap: var(--s-4); }
.login .seedmark { width: 120px; height: 160px; margin: 0 auto; }
.login h1 { font-size: var(--t-6); margin: 0; text-align: center; font-weight: 750; letter-spacing: -0.02em; }
.login p { margin: 0; text-align: center; color: var(--bone-2); }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tray-h) + var(--safe-b) + var(--s-4)); transform: translateX(-50%);
  z-index: 60; padding: var(--s-3) var(--s-5); border-radius: 999px; font-size: var(--t-2); font-weight: 600;
  background: var(--bone); color: var(--loam-deep); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.8);
  animation: rise 260ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .roots .lat.ink { stroke-dashoffset: 0; }
}

/* ---------- wide screens: the glass takes the width, seed tags stay open beside it ---------- */
.side { display: none; }
@media (min-width: 1100px) {
  .layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--s-6); max-width: 1440px; margin: 0 auto; padding: 0 var(--s-5); }
  .topline, .views { max-width: 1440px; padding-left: var(--s-6); padding-right: var(--s-6); }
  .side { display: block; position: sticky; top: 112px; align-self: start; max-height: calc(100vh - 112px - var(--tray-h) - 24px); overflow-y: auto; padding: var(--s-2) var(--s-2) var(--s-6); }
  .side .tags h2 { font-size: var(--t-5); margin: 0 0 var(--s-4); }
  .tray { display: none; }
  main { padding-bottom: var(--s-7); }
  .side { max-height: calc(100vh - 112px); }
  .side-plant { width: 100%; justify-content: center; margin-bottom: var(--s-5); }
}

/* Lineage text sits on the glass over crossing lines: a loam halo keeps it legible. */
.lineage .vlabel, .lineage .vscore { paint-order: stroke; stroke: var(--loam); stroke-width: 6px; stroke-linejoin: round; }

/* ---------- Today (phone landing) ---------- */
.today { max-width: 600px; margin: 0 auto; padding: var(--s-2) var(--s-4) var(--s-4); display: grid; gap: var(--s-5); }
.tday { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-3); }
.tday h1 { margin: 0; font-size: var(--t-6); line-height: 1.05; font-weight: 750; letter-spacing: -0.02em; }
.tdate { font-size: var(--t-2); color: var(--bone-2); margin-bottom: var(--s-1); }
.tpill { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: var(--t-2); font-weight: 550; background: rgba(233, 236, 223, 0.06); color: var(--bone-2); white-space: nowrap; margin-bottom: 6px; }
.tpill i { width: 9px; height: 9px; border-radius: 50%; background: var(--bone-3); }
.tpill.on { color: var(--bone); } .tpill.on i { background: var(--pen-today); }
.tpill.down i { background: transparent; box-shadow: inset 0 0 0 2px var(--bone); }
.tsec { display: grid; gap: var(--s-2); min-width: 0; }
.thead { display: flex; justify-content: space-between; align-items: center; min-height: 28px; }
.thead h2 { margin: 0; font-size: var(--t-1); font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-2); }
.thead > span { font-size: var(--t-1); color: var(--bone-2); }
.tcard { padding: var(--s-4); border-radius: 16px; background: var(--soil); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(233, 236, 223, 0.06); min-width: 0; }
.tcard p { margin: 0; }
.tcalm { color: var(--bone-2); font-size: var(--t-2); }
.ttitle { font-size: var(--t-3); font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.tsub { font-size: var(--t-2); color: var(--bone-2); margin-top: var(--s-1) !important; }
.tact { display: grid; place-items: center; width: 100%; min-height: 52px; margin-top: var(--s-3); text-decoration: none; border-radius: 16px; font-weight: 650; }
.tcard + .tcard { margin-top: var(--s-1); }
.tbig { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.tbig b { font-size: var(--t-6); line-height: 1; font-weight: 750; letter-spacing: -0.02em; }
.tbig span { color: var(--bone-2); font-size: var(--t-2); }
.tbig em { margin-left: auto; font-style: normal; color: var(--bone-2); font-size: var(--t-2); }
.tbar { height: 8px; border-radius: 4px; background: var(--loam-deep); margin: var(--s-3) 0; overflow: hidden; }
.tbar i { display: block; height: 100%; background: var(--pen-today); border-radius: 4px; }
.tstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.tstats div { background: var(--loam-deep); border-radius: 12px; padding: var(--s-3) 10px; min-width: 0; }
.tstats b { display: block; font-size: var(--t-3); font-weight: 700; white-space: nowrap; }
.tstats span { font-size: var(--t-1); color: var(--bone-2); }
.twarn { margin-top: var(--s-3) !important; padding: var(--s-3); border-radius: 12px; background: rgba(214, 162, 58, 0.14); color: var(--pen-4-ink); font-size: var(--t-2); line-height: 1.4; }
.tok { margin-top: var(--s-3) !important; color: var(--bone-2); font-size: var(--t-2); }
.tnote { margin-top: var(--s-3) !important; font-size: var(--t-1); color: var(--bone-2); }
.tcount { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.tcount div { border-radius: 16px; padding: var(--s-3) var(--s-4); background: var(--soil); }
.tcount b { display: block; font-size: var(--t-5); line-height: 1.15; font-weight: 750; }
.tcount span { font-size: var(--t-2); color: var(--bone-2); }
.tcount .done b { color: var(--pen-today); } .tcount .run b { color: var(--pen-1-ink); } .tcount .fail.has b { color: var(--pen-2-ink); }
.tnow { display: flex; gap: var(--s-2); align-items: flex-start; margin: var(--s-1) 0 0; font-size: var(--t-2); line-height: 1.4; }
.tnow i { flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--pen-today); }
.tnow span { min-width: 0; overflow-wrap: anywhere; }
.tlist p { font-size: var(--t-2); line-height: 1.4; padding: var(--s-2) 0; overflow-wrap: anywhere; }
.tlist p + p { border-top: 1px solid rgba(233, 236, 223, 0.1); }
.tlist p:first-child { padding-top: 0; } .tlist p:last-child { padding-bottom: 0; }
.tenv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.tenv > div { background: var(--soil); border-radius: 16px; padding: var(--s-3) var(--s-4); min-width: 0; display: grid; gap: 2px; }
.tenv .k { font-size: var(--t-1); color: var(--bone-2); }
.tenv b { font-size: var(--t-4); font-weight: 700; }
.tenv .s { font-size: var(--t-1); color: var(--bone-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Grown today */
.tgrow p + p { margin-top: var(--s-2); }
.tgrow .gs { display: block; color: var(--bone); font-size: 0.9rem; line-height: 1.35; }
.tgrow .gm { display: block; color: var(--bone-3); font-size: 0.75rem; margin-top: 2px; font-feature-settings: "tnum"; }
.tgrow .go .gs { color: var(--bone-2); font-size: 0.8rem; border-left: 2px solid var(--pen-today); padding-left: var(--s-2); }
.tgrow .tnote { margin-top: var(--s-3); }