/* Extracted from victorhaaning-portfolio index.html (slice CSS, lines 409-950); forked for the
   landing page 2026-09-23 with slice.js (Danish, the app's plant card). Edit here now. */
/* perma's own type. The app UI is set in DM Sans (that is what its bundle
   loads); ZT Nature is the brand face and is used here for the wordmark
   only, self-hosted from his font files (fonts/, SemiBold, ~30KB). */
@font-face{
  font-family:'ZT Nature';font-weight:600;font-style:normal;font-display:swap;
  src:url('fonts/zt-nature-semibold.woff2') format('woff2');
}
/* The container query below has to sit on the slide, not on .live: a
   query resolves against an ancestor container, never the element itself. */
.deck__slide--live{display:block;padding:0;container-type:inline-size}
.live{
  /* perma's tokens, src/tokens/index.ts. Names kept from the first pass
     so nothing downstream had to be renamed; values are the app's. */
  --p-canvas:#F2EFE8;        /* PLAN_GROUND  */
  --p-card:#FFFFFF;          /* PAPER        */
  --p-line:#E8E4DE;          /* WARM_100     */
  --p-sunk:#F3F2F0;          /* WARM_50      */
  --p-ink:#1C1917;           /* INK          */
  --p-mute:#6B6560;          /* WARM_700     */
  --p-faint:#9B9188;         /* WARM_MUTED   */
  --p-bed:#E9DFC8;--p-bed-line:#B9A87E;--p-bed-hatch:rgba(120,100,60,.07);
  --p-plant:#A9C29F;--p-plant-line:#6F9563;--p-plant-dot:#4A6E45;--p-plant-soft:#E4EFE2;
  --p-green:#6E8C66;         /* FOREST_600   */
  --p-forest:#2F4434;        /* FOREST_900   */
  --p-forest-soft:#EEF3EC;   /* FOREST_50    */
  --p-blue:#46638C;          /* PLAN_ACCENT  */
  --p-blue-hover:#3B5376;    /* PLAN_ACCENT_HOVER */
  --p-blue-soft:#E0E6F0;     /* PLAN_ACCENT_SOFT  */
  --p-blue-wash:#ECF0F6;     /* PLAN_WASH    */
  --p-clay:#B16C5E;          /* MANAGE_ACCENT */
  --p-clay-soft:#F0DED8;     /* MANAGE_ACCENT_SOFT */
  --p-clay-wash:#F7EEE9;     /* MANAGE_WASH  */
  --p-good:#2F4434;--p-good-bg:#EEF3EC;
  --p-ok:#8A6A22;--p-ok-bg:#F6ECD6;
  --p-bad:#8A5449;--p-bad-bg:#F0DED8;
  --p-syn:rgba(110,140,102,.85);--p-clash:#B16C5E;
  position:relative;width:100%;height:100%;
  display:flex;flex-direction:column;
  background:var(--p-canvas);color:var(--p-ink);
  font-family:'DM Sans',var(--f-body);font-size:12.5px;line-height:1.35;
  text-align:left;overflow:hidden;
  /* a drag must never start a text selection across the panel */
  -webkit-user-select:none;user-select:none;
}
.live *{box-sizing:border-box}
.live button{font:inherit}
.live__eyebrow{
  margin:0;font-size:10px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--p-faint);
}
.live__eyebrow small{font-weight:400;letter-spacing:0;text-transform:none;float:right;font-size:10px}

/* ── top bar (chrome) ───────────────────────────────────────────────
   The app's: mark and wordmark, the plan name, then Plan|Manage|Wiki.
   The segment is a span row with pointer events off — it shows the
   shape of the product without pretending the other tabs are a click
   away. The only live thing up here is the link to the real app. */
.live__top{
  flex:none;display:flex;align-items:center;gap:10px;position:relative;
  height:38px;padding:0 12px;background:var(--p-card);
  border-bottom:1px solid var(--p-line);
}
.live__brand{display:flex;align-items:center;gap:7px;font-family:'ZT Nature','DM Sans',sans-serif;font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--p-ink);flex:none}
.live__brand img{width:20px;height:20px;border-radius:5px;display:block}
.live__site{display:none;color:var(--p-mute);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:none}
.live__site b{color:var(--p-ink);font-weight:600}
.live__seg{
  /* centred on the bar itself, not on the room between its neighbours */
  display:none;align-items:center;gap:2px;flex:none;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--p-sunk);border-radius:99px;padding:2px;
}
.live__seg span,.live__seg a{padding:3px 11px;border-radius:99px;font-size:11px;color:var(--p-mute);white-space:nowrap;text-decoration:none}
.live__seg span.on{background:var(--p-blue);color:#fff;font-weight:500;pointer-events:none}
/* Wiki leaves the prototype: a real link, in the wiki's teal on hover */
.live__seg a b,.live__phonechrome a b{font-weight:400;font-size:.9em;opacity:.7}
.live__seg a:hover,.live__phonechrome a:hover{color:#2D504A;background:#E6EAE9}
.live__seg a:focus-visible,.live__phonechrome a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.live__try{
  flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;
  color:var(--p-forest);background:var(--p-forest-soft);border-radius:99px;padding:3px 9px;
  transition:background .2s var(--ease-out),color .2s var(--ease-out);
}
.live__try b{font-weight:600}
.live__try:hover{background:var(--p-forest);color:#fff}
.live__try:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.live__try-more{display:none}

/* ── body ── */
.live__body{flex:1;min-height:0;position:relative;overflow:hidden}

/* ── library ────────────────────────────────────────────────────────
   The app's dock: a Library / Suggestions segment with live counts,
   filter chips, search, then two-column photo cards. */
.live__lib{display:none;flex-direction:column;gap:7px;min-width:0;padding:4px 12px 12px;background:var(--p-card)}
.live__libtabs{
  display:flex;gap:3px;flex:none;background:var(--p-sunk);border-radius:99px;padding:2px;font-size:11px;
}
.live__libtabs button{
  flex:1;display:flex;align-items:center;justify-content:center;gap:5px;
  padding:4px 0;border:0;border-radius:99px;background:none;color:var(--p-mute);cursor:pointer;white-space:nowrap;
}
.live__libtabs button.on{background:var(--p-card);color:var(--p-ink);font-weight:600;box-shadow:0 1px 2px rgba(28,25,23,.09)}
.live__libtabs button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.live__libtabs i{
  font-style:normal;min-width:15px;padding:0 4px;border-radius:99px;
  background:var(--p-blue);color:#fff;font-size:9px;font-weight:700;line-height:15px;text-align:center;
}
.live__libtabs button:not(.on) i{background:var(--p-line);color:var(--p-mute)}
.live__search{display:flex;align-items:center;gap:6px;background:var(--p-sunk);border-radius:8px;padding:5px 8px;color:var(--p-mute);flex:none}
.live__search svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.live__search input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:12px;color:var(--p-ink);outline:0;padding:0;-webkit-user-select:text;user-select:text}
.live__search input::placeholder{color:var(--p-faint)}
.live__filters{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:none}
.live__filters::-webkit-scrollbar{display:none}
.live__filters button{
  flex:none;border:1px solid var(--p-line);background:var(--p-card);border-radius:99px;
  padding:2px 8px;font-size:10.5px;cursor:pointer;color:var(--p-mute);white-space:nowrap;
}
.live__filters button.on{background:var(--p-forest);border-color:var(--p-forest);color:#fff}
.live__filters button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.live__libcount{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex:none}
.live__libcount span{font-size:10px;color:var(--p-faint)}

/* the card grid — the app's two columns, on the phone as well */
.live__cards{
  display:grid;grid-template-columns:1fr 1fr;gap:7px;align-content:start;
  overflow-y:auto;flex:1;min-height:0;padding:1px;touch-action:pan-y;
}
.live__group{grid-column:1/-1;margin:4px 0 -2px}
.live__cardwrap{position:relative;min-width:0}
.live__card{
  display:block;width:100%;padding:0;overflow:hidden;
  text-align:left;cursor:grab;color:var(--p-ink);
  background:var(--p-card);border:1px solid var(--p-line);border-radius:10px;
  transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.live__card:hover{border-color:var(--p-plant-line)}
.live__card:active{cursor:grabbing}
.live__card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.live__card.is-sel{border-color:var(--p-blue);box-shadow:0 0 0 1px var(--p-blue)}
.live__cardphoto{position:relative;display:block;aspect-ratio:360/168;background:var(--p-sunk)}
.live__cardphoto img{display:block;width:100%;height:100%;object-fit:cover}
.live__cardstat{
  position:absolute;left:4px;bottom:4px;display:inline-flex;align-items:center;gap:3px;
  background:rgba(255,255,255,.92);border-radius:99px;padding:1px 6px;
  font-size:8.5px;font-weight:500;color:var(--p-mute);line-height:1.5;
}
.live__cardstat::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--p-faint)}
.live__cardwrap.is-placed .live__cardstat{color:var(--p-blue)}
.live__cardwrap.is-placed .live__cardstat::before{background:var(--p-blue)}
.live__cardmeta{display:block;padding:5px 7px 7px;min-width:0}
.live__card b{display:block;font-weight:700;font-size:11.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live__card em{display:block;font-style:italic;font-size:10px;color:var(--p-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.live__card s{
  display:flex;align-items:center;gap:4px;text-decoration:none;margin-top:3px;
  font-size:9.5px;color:var(--p-green);min-width:0;
}
.live__card s span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live__card s svg{width:10px;height:10px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.live__cardwrap.is-placed .live__card{opacity:.55;cursor:default}
.live__cardwrap.is-placed .live__add{display:none}
/* the blue + sits on the photo, as the app's does */
.live__add{
  position:absolute;top:5px;right:5px;z-index:2;
  width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:0;background:var(--p-blue);color:#fff;font-size:15px;line-height:1;cursor:pointer;
  box-shadow:0 1px 3px rgba(28,25,23,.28);
}
.live__add:hover{background:var(--p-blue-hover)}
.live__add:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.live__ring{
  flex:none;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--p-plant-soft);border:1.5px solid var(--p-plant-line);color:var(--p-plant-line);
  background-size:cover;background-position:center;
}
.live__ring svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.live__ring--photo{border-color:var(--p-plant-line);background-color:var(--p-sunk)}

/* ── canvas ─────────────────────────────────────────────────────────
   Cream field, tan bed, sage discs, synergy lines — his call, unchanged.
   The app's north arrow, scale bar and tool pill are left out: none of
   them does anything here (Victor, 2026-09-23). */
.live__canvas{position:absolute;inset:0;min-height:0;display:flex;flex-direction:column}
.live__field{position:relative;flex:1;min-height:0;padding:44px 14px 60px}
.live__bed{
  position:absolute;inset:44px 14px 60px;
  background:var(--p-bed) repeating-linear-gradient(135deg,var(--p-bed-hatch) 0 1.5px,transparent 1.5px 13px);
  border:1.5px solid var(--p-bed-line);border-radius:7px;
  transition:box-shadow .2s var(--ease-out);
}
.live__bed.is-over{box-shadow:inset 0 0 0 3px rgba(70,99,140,.35)}
/* A touch drag inside the slice belongs to the slice, not to the deck it
   sits in. preventDefault on pointerdown does not stop touch panning in
   Chrome — only touch-action does — so on a phone dragging a plant to the
   left panned the deck on to the next slide under the hand. The canvas and
   the library cards keep pan-y, so the page still scrolls through them; a
   plant, and the bed while a plant is riding it, take the gesture whole. */
.live__field,.live__bed,.live__card{touch-action:pan-y}
.live__plant{touch-action:none}
.live.is-holding .live__field,.live.is-holding .live__bed{touch-action:none}
/* The hedge to the south-west puts the far end of the bed into part
   shade after midday. It is drawn here and sampled in the JS, so the
   sun factor is genuinely positional and the verdict changes as a plant
   is moved — which is the only way the app's worst-factor-wins rule can
   show itself. Cut this and the sun row becomes a constant. */
.live__shade{
  position:absolute;inset:0;border-radius:6px;pointer-events:none;
  background:linear-gradient(to left,rgba(47,68,52,.20) 0%,rgba(47,68,52,.13) 12%,rgba(47,68,52,.05) 26%,transparent 42%);
}
.live__bedname{
  position:absolute;left:50%;top:-10px;transform:translateX(-50%);
  font-size:10px;color:var(--p-mute);background:var(--p-card);border:1px solid var(--p-line);
  border-radius:99px;padding:1px 9px;white-space:nowrap;
}
.live__hint{
  /* on a phone the sheet covers the bed's middle: sit in the part that shows */
  position:absolute;left:50%;top:64px;transform:translate(-50%,-50%);margin:0;
  display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100% - 32px);
  padding:8px 16px 8px 8px;border-radius:99px;background:var(--p-card);
  box-shadow:0 0 0 1px var(--p-line),0 8px 24px -10px rgba(28,25,23,.28);
  font-size:14px;font-weight:500;line-height:1.3;color:var(--p-ink);text-align:left;
  pointer-events:none;transition:opacity .3s;
}
.live__hint::before{
  content:'+';flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--p-blue-soft);color:var(--p-blue);font-size:19px;font-weight:400;line-height:1;
}
/* while nothing is planted the bed reads as a drop target */
.live__bed::after{
  content:'';position:absolute;inset:8px;border:1.5px dashed rgba(70,99,140,.45);border-radius:4px;
  pointer-events:none;opacity:0;transition:opacity .3s;
}
.live__bed.is-empty::after{opacity:1}
.live__hint.is-off{opacity:0}
.live__hint-wide{display:none}
.live__hint-narrow{display:inline}
.live__syn{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.live__syn line{stroke:var(--p-syn);stroke-width:1.5;stroke-linecap:round}
.live__syn line.clash{stroke:var(--p-clash);stroke-dasharray:4 4}
.live__plant{
  position:absolute;transform:translate(-50%,-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:3px;cursor:grab;
  color:var(--p-ink);background:none;border:0;padding:0;margin:0;
  font:inherit;text-align:center;
  opacity:0;transition:opacity .3s var(--ease-out);z-index:1;
}
.live__plant.in{opacity:1}
.live__plant:active,.live__plant.is-drag{cursor:grabbing;z-index:3}
.live__plant:focus-visible{outline:0}
.live__plant .live__disc{
  position:relative;width:26px;height:26px;border-radius:50%;
  background:var(--p-plant);border:1.5px solid var(--p-plant-line);
  box-shadow:0 1px 2px rgba(28,25,23,.12);transition:transform .3s var(--ease-out),box-shadow .3s;
}
.live__plant .live__disc::after{content:'';position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--p-plant-dot)}
.live__plant.is-sel .live__disc{outline:1.5px dashed var(--p-blue);outline-offset:4px}
.live__plant:focus-visible .live__disc{outline:2px solid var(--accent);outline-offset:4px}
.live__plant.is-drag .live__disc{transform:scale(1.08);box-shadow:0 6px 16px rgba(28,25,23,.2)}
.live__name{
  font-size:10.5px;line-height:1;white-space:nowrap;
  background:var(--p-card);border-radius:99px;padding:2px 7px;box-shadow:0 1px 2px rgba(28,25,23,.1);
}
.live__plant.is-ghost{opacity:.9;pointer-events:none;z-index:4}

/* ── phone chrome ───────────────────────────────────────────────────
   The app floats its chrome over the map rather than banding it across
   the top. Design is a label, Wiki a real link, the Grund chip a control. */
.live__phonechrome{
  position:absolute;top:10px;left:12px;z-index:4;display:flex;align-items:center;gap:2px;
  background:rgba(255,255,255,.95);border-radius:99px;padding:2px;
  box-shadow:0 1px 4px rgba(28,25,23,.18);
}
.live__phonechrome img{width:18px;height:18px;border-radius:5px;display:block;margin:0 3px 0 4px}
.live__phonechrome span,.live__phonechrome a{padding:3px 10px;border-radius:99px;font-size:10.5px;color:var(--p-mute);text-decoration:none}
.live__phonechrome span.on{background:var(--p-blue);color:#fff;font-weight:500;pointer-events:none}
.live__sitechip{
  position:absolute;top:10px;right:12px;z-index:4;
  border:0;border-radius:99px;background:rgba(255,255,255,.95);color:var(--p-mute);
  font-size:10.5px;font-weight:500;padding:5px 11px;cursor:pointer;
  box-shadow:0 1px 4px rgba(28,25,23,.18);
}
.live__sitechip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.live__fab{
  position:absolute;right:12px;bottom:58px;z-index:4;
  display:inline-flex;align-items:center;gap:8px;
  border:0;border-radius:99px;background:var(--p-blue);color:#fff;font-weight:600;font-size:13px;
  padding:9px 16px 9px 9px;cursor:pointer;box-shadow:0 6px 16px rgba(28,25,23,.22);
}
.live__fab b{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.22);font-weight:500;font-size:17px;line-height:1}
.live__fab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.live.is-lib .live__fab,.live.is-holding .live__fab{display:none}

/* ── the place rail (phone) ─────────────────────────────────────────
   The app's core loop: you pick a plant up, it rides the canvas, and
   the rail says how it is doing where it is now. The verdict and its
   sentence update as the ghost moves. */
.live__rail{
  display:none;position:absolute;left:10px;right:10px;bottom:56px;z-index:5;
  background:var(--p-card);border-radius:14px;padding:10px 12px 11px;
  box-shadow:0 8px 24px rgba(28,25,23,.24);
  flex-direction:column;gap:7px;
}
.live.is-holding .live__rail{display:flex}
.live__railtop{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.live__railtop b{font-size:13px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live__railwhy{font-size:11px;color:var(--p-mute);min-height:1.35em}
.live__railrow{display:flex;align-items:center;gap:8px}
.live__place{
  flex:1;border:0;border-radius:99px;background:var(--p-forest);color:#fff;
  font-weight:600;font-size:12.5px;padding:8px 0;cursor:pointer;
}
.live__place:hover{background:#243528}
.live__place:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.live__stop{
  flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--p-line);
  background:var(--p-card);color:var(--p-mute);font-size:14px;line-height:1;cursor:pointer;
}
.live__stop:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── the sheet (phone) ──────────────────────────────────────────────
   The app's: a grab strip, a head that carries the thumb, the name and
   the figures, and a segment bar pinned to the sheet's bottom edge. */
.live__sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:3;height:70%;
  display:flex;flex-direction:column;background:var(--p-card);
  border-radius:16px 16px 0 0;box-shadow:0 -4px 20px rgba(28,25,23,.12);
  transform:translateY(calc(100% - 46px));transition:transform .35s var(--ease-out);
}
.live__sheet.is-open{transform:none}
.live.is-holding .live__sheet{transform:translateY(calc(100% - 46px))}
.live__sheethead{
  position:relative;flex:none;height:46px;width:100%;
  display:flex;align-items:center;gap:10px;padding:8px 14px 0;
  border:0;background:none;text-align:left;cursor:pointer;
  font-weight:600;font-size:13px;color:var(--p-ink);
}
.live__sheethead::before{content:'';position:absolute;top:6px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:99px;background:#D6D3CC}
.live__sheethead span:first-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live__sheethead:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:12px}
.live__chev{flex:none;width:26px;height:26px;border-radius:50%;background:var(--p-sunk);display:inline-flex;align-items:center;justify-content:center;transition:transform .35s var(--ease-out)}
.live__chev svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.live__sheet.is-open .live__chev{transform:rotate(180deg)}
.live__sheet.is-open .live__sheethead span:first-child{opacity:0}
.live__sheetbody{flex:1;min-height:0;overflow-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.live__sheet[data-mode="library"] .live__lib{display:flex}
.live__sheet[data-mode="library"] .live__panel{display:none}
/* the segment bar, pinned to the sheet's bottom edge */
.live__pages{
  display:none;flex:none;gap:3px;margin:0 12px 10px;padding:3px;
  background:var(--p-sunk);border-radius:99px;font-size:11px;
}
.live__sheet.is-open:not([data-mode="library"]) .live__pages{display:flex}
.live__pages button{
  flex:1;text-align:center;padding:6px 0;border:0;border-radius:99px;
  background:none;color:var(--p-mute);cursor:pointer;white-space:nowrap;
}
.live__pages button.on{background:var(--p-card);color:var(--p-ink);font-weight:600;box-shadow:0 1px 2px rgba(28,25,23,.1)}
.live__pages button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ── panel ──────────────────────────────────────────────────────────
   The app's four shapes, and each one means something:
     a hairline grid   MEASURED NUMBERS   width · height · spacing
     tinted pills      QUALITIES          full sun · moderate water · …
     chips             CLASSIFICATION     Annual · Herbaceous          */
.live__panel{padding:4px 14px 48px;background:var(--p-card);min-width:0}
.live__tabs{display:none;gap:4px;background:var(--p-sunk);border-radius:99px;padding:2px;margin-bottom:6px;font-size:11px}
.live__tabs button{flex:1;text-align:center;padding:3px 0;border:0;border-radius:99px;background:none;color:var(--p-mute);cursor:pointer}
.live__tabs button.on{background:var(--p-card);color:var(--p-ink);font-weight:600;box-shadow:0 1px 2px rgba(28,25,23,.08)}
.live__tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.live__back{display:inline-block;border:0;background:none;padding:0;font-size:11px;color:var(--p-blue);cursor:pointer;margin-bottom:4px}
.live__back:hover{text-decoration:underline}
.live__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.live__title{font-family:'DM Sans',var(--f-body);font-weight:700;font-size:16px;line-height:1.15;letter-spacing:-.01em;margin:2px 0 2px;color:var(--p-ink)}
.live__latin{display:block;font-style:italic;color:var(--p-mute);font-size:11.5px;margin-bottom:6px}
.live__sub{margin:0;font-size:12px;color:var(--p-mute)}
.live__link{border:0;background:none;padding:0;font-size:11px;color:var(--p-mute);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.live__link:hover{color:var(--p-ink)}
.live__link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.live__sec{display:block;margin-top:10px}

/* the photo band, with its credit — the app carries one on every card */
.live__hero{position:relative;display:block;border-radius:9px;overflow:hidden;background:var(--p-sunk);margin-bottom:7px}
.live__hero img{display:block;width:100%;height:auto}
.live__credit{
  position:absolute;right:5px;bottom:4px;font-size:8px;line-height:1.4;
  color:#fff;background:rgba(28,25,23,.5);border-radius:99px;padding:1px 6px;
  max-width:calc(100% - 10px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* chips — classification */
.live__chips{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 0}
.live__chips span{border:1px solid var(--p-line);border-radius:99px;padding:2px 8px;font-size:10px;color:var(--p-mute);white-space:nowrap}

/* the hairline grid — measured numbers, the only grid on the card */
.live__stats{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid var(--p-line);border-radius:8px;overflow:hidden;margin-top:6px}
.live__stats div{padding:5px 4px;text-align:center;border-left:1px solid var(--p-line);min-width:0}
.live__stats div:first-child{border-left:0}
.live__stats b{display:block;font-weight:600;font-size:11px;letter-spacing:-.01em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live__stats span{font-size:9.5px;color:var(--p-faint);text-transform:uppercase;letter-spacing:.06em}

/* the verdict sits at heading level, over the conditions it summarises */
.live__condhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}
.live__because{margin:5px 0 0;font-size:11.5px;color:var(--p-mute)}
/* tinted pills — qualities the plant wants */
.live__pills{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
/* The app's ConditionPills: the TRAIT palette's tint as a wash (1A)
   and a border (40), the glyph in the tint at full strength, the value
   in ink. Sun is warm, water is blue, soil and pH share earth. */
.live__pills span{
  --t:#9B9188;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--t) 25%,transparent);background:color-mix(in srgb,var(--t) 10%,transparent);
  border-radius:99px;padding:3px 8px;font-size:10.5px;color:var(--p-ink);
}
.live__pills b{font-weight:500}
.live__pills .t-sun{--t:#D9A85C}
.live__pills .t-water{--t:#8FB3C7}
.live__pills .t-soil{--t:#B57A56}
.live__pills svg{width:11px;height:11px;flex:none;fill:none;stroke:var(--t);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* the verdict, at heading level: the app's VerdictChip, a dot and the
   band's colour at low alpha */
.live__verdict{--v:var(--p-good);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;border-radius:99px;padding:2px 8px;font-size:10.5px;font-weight:500;color:var(--v);background:color-mix(in srgb,var(--v) 8%,transparent);border:1px solid color-mix(in srgb,var(--v) 24%,transparent)}
.live__verdict::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.live__verdict--ok{--v:var(--p-ok)}
.live__verdict--bad{--v:var(--p-bad)}

/* the identity sentence and the season strip (PlantSeasonStrip, full) */
.live__identity{margin:8px 0 0;font-size:11.5px;line-height:1.45;color:#3D5947}
.live__season{margin-top:9px}
.live__cells{display:flex;gap:2px}
.live__cells i{flex:1;height:7px;border-radius:2px}
.live__months{display:flex;justify-content:space-between;margin-top:3px;font-size:9px;color:var(--p-faint)}
.live__nowline{display:flex;align-items:center;gap:6px;margin:7px 0 0;font-size:11px;line-height:1.35;color:var(--p-mute)}
.live__nowline i{flex:none;width:7px;height:7px;border-radius:50%}
.live__nowline b{font-weight:600;color:var(--p-ink)}
.live__cond{margin-top:2px}

/* "Arbejder med": the two tiers the app marks apart, what is on the
   plan and, in woad, what is only an idea */
.live__tier{margin:8px 0 2px;font-size:10.5px;font-weight:600;color:var(--p-mute)}
.live__tier--sug{color:var(--p-blue)}
.live__foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--p-line)}

.live__pill{display:inline-block;align-self:flex-start;font-size:10.5px;font-weight:600;border-radius:99px;padding:2px 8px;white-space:nowrap}
.live__pill--good{background:var(--p-good-bg);color:var(--p-good)}
.live__pill--ok{background:var(--p-ok-bg);color:var(--p-ok)}
.live__pill--bad{background:var(--p-bad-bg);color:var(--p-bad)}
.live__pill--flat{background:var(--p-sunk);color:var(--p-mute)}
.live__pill--dot::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:5px;vertical-align:1px}

.live__rows{list-style:none;margin:4px 0 0;padding:0}
.live__rows li{display:flex;align-items:center;gap:8px;padding:4px 0;border-top:1px solid var(--p-line);font-size:11.5px;min-width:0}
.live__rows li:first-child{border-top:0}
.live__rows .live__ring{width:22px;height:22px}
.live__rows .live__ring svg{width:10px;height:10px}
.live__rows b{font-weight:600;white-space:nowrap}
.live__rows span{color:var(--p-mute);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live__rows .live__pill{margin-left:auto}

/* ── suggestions ────────────────────────────────────────────────────
   Dashed, because it is not planted yet — the app's own idiom. */
.live__sugs{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.live__sug{
  display:block;width:100%;text-align:left;cursor:pointer;
  border:1px dashed var(--p-bed-line);border-radius:10px;background:none;
  padding:7px 8px;color:var(--p-ink);
  transition:border-color .2s var(--ease-out),background .2s var(--ease-out);
}
.live__sug:hover{border-color:var(--p-green);background:var(--p-forest-soft)}
.live__sug:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.live__sugtop{display:flex;align-items:center;gap:7px;min-width:0}
.live__sugtop b{font-weight:700;font-size:11.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live__sugtop .live__pill{margin-left:auto;flex:none}
.live__sugline{margin:4px 0 0;font-size:11px;color:var(--p-ink)}
.live__sugwhy{display:flex;align-items:center;gap:5px;margin:2px 0 0;font-size:10.5px;color:var(--p-mute)}
.live__sugwhy svg{width:10px;height:10px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.live__more{margin:5px 0 0;font-size:10.5px;color:var(--p-blue)}

.live__btn{
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  border:0;border-radius:99px;background:var(--p-blue);color:#fff;font-weight:600;font-size:11.5px;
  padding:6px 12px;cursor:pointer;
}
.live__btn:hover{background:var(--p-blue-hover)}
/* the way back out: same shape, quiet until you mean it */
.live__btn--remove{background:var(--p-card);color:var(--p-bad);box-shadow:inset 0 0 0 1px var(--p-bad-bg)}
.live__btn--remove:hover{background:var(--p-bad-bg)}
.live__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.live__none{color:var(--p-mute);font-size:11.5px;margin:4px 0 0}
/* Vis i wiki: the app's WikiLinkButton, in WIKI_ACCENT teal, the one
   teal thing on a warm card, so it reads as the door out */
.live__wiki{
  display:flex;align-items:center;justify-content:center;gap:7px;height:32px;text-decoration:none;
  border:1px solid #CDD5D4;border-radius:99px;background:#E6EAE9;
  font-size:11.5px;font-weight:600;color:#2D504A;
}
.live__wiki:hover{background:#DCE2E1}
.live__wiki:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.live__wiki svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* the site card's label/value rows and its climate chip block */
.live__kv{list-style:none;margin:6px 0 0;padding:0}
.live__kv li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px solid var(--p-line);font-size:11.5px}
.live__kv li:first-child{border-top:0}
.live__kv b{font-weight:400;color:var(--p-mute)}
.live__kv span{font-weight:600;text-align:right;min-width:0}
.live__climate{display:flex;flex-wrap:wrap;gap:5px 10px;background:var(--p-forest-soft);border:1px solid var(--p-line);border-radius:9px;padding:8px 10px;margin-top:8px}
.live__climate i{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:10.5px;color:var(--p-forest)}
.live__climate svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Wide frame: the desktop app's layout, library left, canvas, panel right.
   The right padding on the panel leaves room for the deck's next arrow. */
@container (min-width: 700px){
  .live__body{position:static;overflow:visible;display:grid;grid-template-rows:1fr;grid-template-columns:248px 1fr 284px}
  .live__sheet,.live__sheetbody{display:contents}
  .live__hint{top:50%}
  .live__sheethead,.live__fab,.live__sitechip,.live__phonechrome,.live__rail,.live__pages{display:none}
  .live__lib{display:flex;order:-1;border-right:1px solid var(--p-line);padding:10px 10px 8px;overflow:hidden}
  .live__canvas{position:relative;inset:auto;order:0}
  .live__panel{order:1;border-left:1px solid var(--p-line);padding:12px 14px 28px;overflow-y:auto}
  .live__sheet[data-mode="library"] .live__lib{display:flex}
  .live__sheet[data-mode="library"] .live__panel{display:block}
  .live__site{display:block}
  .live__seg{display:flex}
  .live__try-more{display:inline}
  .live__field{padding:26px 22px 22px}
  .live__bed{inset:26px 22px 22px}
  .live__hint-wide{display:inline}
  .live__hint-narrow{display:none}
  .live__tabs{display:flex;margin-bottom:10px}
  .live__title{font-size:17px;margin:3px 0 3px}
  .live__stats{margin-top:12px}
  /* a sheet left open from a phone-width moment must not put its page bar into the grid */
  .live .live__sheet.is-open .live__pages{display:none}
}
/* ── the phone card's head ──────────────────────────────────────────
   The app does not bring the photo band to the phone: 96px of picture
   above the name pushes the segment bar off the peek, and a bar you
   cannot reach is the one failure this shape exists to prevent. The
   head carries a 48px thumb instead, with the name, the Latin name and
   the figures beside it — same door, smaller. */
.live__phead{display:none;align-items:center;gap:10px;margin:2px 0 6px}
.live__phead .live__ring{width:44px;height:44px}
.live__phead div{min-width:0}
.live__phead b{display:block;font-weight:700;font-size:15px;line-height:1.15}
.live__phead em{display:block;font-style:italic;font-size:11.5px;color:var(--p-mute)}
.live__pfigs{font-size:11.5px;color:var(--p-ink);margin:0 0 2px}
.live__pfigs s{text-decoration:none;color:var(--p-faint);margin:0 4px}
@container (max-width: 699.98px){
  /* the app floats its chrome over the map rather than banding it across
     the top, and at this size the 38px band is the difference between a
     bed you can work in and one you cannot. The prototype link lives in
     the caption under the frame, which already says the same thing. */
  .live__top{display:none}
  .live__hero{display:none}
  .live__phead{display:flex}
  .live__panel{padding-bottom:8px}
}
.live.is-open .live__fab{display:none}

/* On a phone the frame's normal 260px leaves no room for a bed under
   the sheet, so the perma frame alone runs taller there. The other
   frames keep the fixed height. The place rail needs a little more than
   the old 460 did. */
@media(max-width:700px){.shot--live{height:480px}}
@media(prefers-reduced-motion:reduce){
  .live__plant{opacity:1;transition:none}
  .live__plant .live__disc,.live__bed{transition:none}
}
.live__verdict b{font-weight:500}