/* ============================================================
   living_orchard.components.css · สวนของฉัน — the orchard scene (lo-*)
   Ported verbatim from the Claude Design delivery (2026-10-13):
   docs/design/handoff_out/living_orchard/ (design_notes §6). Additive and
   token-bound; loaded AFTER grower.components.css; overrides nothing.
   ============================================================ */
.lo-frame{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);box-shadow:var(--sh-sm)}
.lo-scene{position:relative;overflow:hidden;background:var(--surface2);aspect-ratio:360/236;isolation:isolate;-webkit-tap-highlight-color:transparent}
.lo-scene[data-size="lg"]{aspect-ratio:360/320}
.lo-foot{display:flex;align-items:center;gap:6px;padding:6px 8px;border-top:1px solid var(--line)}
.lo-foot .grow{flex:1}
.lo-scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.lo-ov{position:absolute;inset:0;z-index:2;pointer-events:none}
.lo-ov > *{pointer-events:auto}
.lo-label{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:.3rem;min-height:32px;padding:0 .6rem;border-radius:var(--r-pill);border:1px solid var(--line2);background:color-mix(in srgb,var(--surface) 90%,transparent);color:var(--ink2);font:inherit;font-size:12px;font-weight:var(--fw-semi);cursor:pointer}
.lo-label::after,.lo-tag::after{content:"";position:absolute;inset:-7px}
.lo-hit{position:absolute;transform:translate(-50%,-50%);min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;font:inherit;cursor:pointer;border-radius:var(--r)}
.lo-hit:focus-visible,.lo-label:focus-visible,.lo-sign:focus-visible,.lo-pin:focus-visible,.lo-cbtn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.lo-tag{position:relative;display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap;font-size:12px;font-weight:var(--fw-semi);line-height:1.5;padding:.1rem .55rem;border-radius:var(--r-pill);border:1px solid var(--line2);background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--ink)}
.lo-tag .num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.lo-tag.none{border-style:dashed;color:var(--ink2)}
.lo-sign{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:92px;min-height:44px;padding:.3rem .55rem;border-radius:8px;border:2px solid var(--brand2);background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer;box-shadow:var(--sh-sm)}
.lo-sign .v{font-size:12px;font-weight:var(--fw-semi);color:var(--ink2);line-height:1.3}
.lo-sign .m{font-family:var(--mono);font-size:15px;font-weight:var(--fw-x);line-height:1.25;font-variant-numeric:tabular-nums}
.lo-sign .k{font-size:12px;color:var(--muted);line-height:1.3}
.lo-sign.still{border-style:dashed;border-color:var(--line2)}
.lo-sign.still .m{font-family:var(--font);font-size:12px;font-weight:var(--fw-semi);color:var(--muted)}
.lo-pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;padding:0;font:inherit;cursor:pointer;min-width:44px;min-height:44px}
.lo-pin .pg{width:30px;height:30px;color:var(--brand2);display:inline-flex}
.lo-pin .pg svg{width:100%;height:100%;stroke-dasharray:3 2.4}
.lo-pin .lo-tag{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-soft)}
.lo-ctrl{display:flex;gap:6px}
.lo-cbtn{display:inline-flex;align-items:center;gap:.3rem;min-height:44px;min-width:44px;justify-content:center;padding:0 .7rem;border-radius:var(--r-pill);border:1px solid var(--line2);background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--ink);font:inherit;font-size:12px;font-weight:var(--fw-semi);cursor:pointer}
.lo-cbtn svg{width:16px;height:16px;display:block}
.lo-cbtn[aria-pressed="true"]{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-ink)}
.lo-toast{position:absolute;left:50%;bottom:60px;transform:translateX(-50%);z-index:4;max-width:86%;text-align:center;font-size:12px;font-weight:var(--fw-semi);padding:.35rem .75rem;border-radius:var(--r-pill);background:var(--ink);color:var(--surface);pointer-events:none}
.lo-read{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--sh-sm);padding:var(--s3) var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.lo-rhd{display:flex;align-items:flex-start;gap:var(--s2)}
.lo-rhd b{flex:1;min-width:0;font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:1.4;padding-top:.6rem;text-wrap:pretty}
.lo-rx{flex:0 0 44px;height:44px;border:0;background:none;color:var(--muted);font-size:1.3rem;cursor:pointer;border-radius:var(--r-sm)}
.lo-rline{font-size:var(--fs-md);line-height:1.55;color:var(--ink);text-wrap:pretty}
.lo-rline .num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:var(--fw-bold)}
.lo-rsub{font-size:var(--fs-sm);line-height:1.55;color:var(--ink2);text-wrap:pretty}
.lo-rmeta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.lo-rmeta .asof{font-size:12px;color:var(--muted);font-family:var(--mono)}
.lo-ract{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s1)}
.lo-pin.event .pg{width:24px;height:24px;color:var(--ink2)}
.lo-pin.event .pg svg{stroke-dasharray:none}
.lo-pin.event .lo-tag{border-color:var(--line2);color:var(--ink);background:color-mix(in srgb,var(--surface) 92%,transparent)}
.lo-pin.event.est .pg{color:var(--pv-est)}
.lo-pin.event.declared .pg{color:var(--brand2)}
.lo-pin.event.private .pg{color:var(--pv-private)}
.lo-veh{transform:translate(-50%,-100%)}
.lo-more{display:inline-flex;align-items:center;min-height:44px;padding:0 .75rem;border-radius:var(--r-pill);border:1px dashed var(--line2);background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--ink);font:inherit;font-size:12px;font-weight:var(--fw-semi);cursor:pointer}
.lo-cbtn[aria-disabled="true"]{color:var(--muted)}
.lo-rlist{display:flex;flex-direction:column;gap:var(--s3);margin:0;padding:0;list-style:none}
.lo-rlist li{display:flex;flex-direction:column;gap:var(--s1);padding-top:var(--s3);border-top:1px solid var(--line)}
.lo-rlist li:first-child{border-top:0;padding-top:0}
.lo-rnote{font-size:12px;color:var(--pv-est);font-weight:var(--fw-semi)}
.lo-loading{aspect-ratio:360/292;border:1.5px dashed var(--line2);border-radius:var(--r-lg);background:var(--surface2);display:grid;place-items:center;font-size:var(--fs-sm);color:var(--muted)}
@media (max-width:360px){.lo-invite{flex-wrap:wrap}.lo-invite .btn{width:100%}}

/* ===== v2 (Claude Design 2026-10-14, handoff_out/grower_home_v2/ design notes §3) — footer bar, 3D, D8 mini board ===== */
.lo-foot{flex-wrap:wrap;min-height:56px}
.lo-foot .lo-ctrl{margin-left:auto}
.lo-asof{font-size:12px;color:var(--muted);font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:.3rem}
.lo-hint{font-size:12px;color:var(--muted);white-space:nowrap}
.lo-rseg{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line2);border-radius:var(--r-pill);background:var(--surface2)}
.lo-rseg .lo-cbtn{border-color:transparent;background:transparent;font-family:var(--mono);min-width:44px;padding:0 .55rem}
.lo-rseg .lo-cbtn[aria-pressed="true"]{background:var(--surface);border-color:var(--brand);color:var(--brand-ink)}
.lo-scene canvas.lo-3d{z-index:1;cursor:grab}
.lo-scene canvas.lo-3d:active{cursor:grabbing}
.lo-3dload{position:absolute;right:8px;bottom:8px;z-index:3;font-size:12px;font-weight:var(--fw-semi);padding:.3rem .7rem;border-radius:var(--r-pill);background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--line2);color:var(--ink2)}
.lo-sign.mini{min-width:0;min-height:30px;flex-direction:row;align-items:center;padding:.15rem .6rem;border-width:1.5px;font-size:12px;font-weight:var(--fw-semi);color:var(--muted);white-space:nowrap;box-shadow:none}
.lo-sign.mini::after{content:"";position:absolute;inset:-8px}