/* garden.css — the garden view and the welcome scene (prefix g-).
   Ported from design/mockup.html (.weeknav, .arrow, .scenewrap, .dl, .tip, .tzbadge).
   Colour variables come from app.css (:root); every use carries the mockup's value
   as a fallback so the garden renders on its own too. Shared classes used here and
   never restyled: .panel .btn .pf .num */

/* ----- week navigation ----- */
.g-garden{position:relative;margin:0 0 14px}
.g-weeknav{display:flex;align-items:center;justify-content:center;gap:14px;margin:6px 0 12px;font-size:24px;color:#f3e4c4;flex-wrap:wrap}
.g-weekmid{display:flex;align-items:baseline;justify-content:center;gap:14px;flex-wrap:wrap}
.g-weeklabel{white-space:nowrap}
.g-range{font-family:Nunito,system-ui,sans-serif;font-size:15px;color:#cdbca8}
.g-arrow,.g-todaybtn{cursor:pointer;color:#f3e4c4;background:var(--frame,#6b4a2e);border:3px solid var(--frameD,#3a2416);box-shadow:inset 0 0 0 2px var(--frameL,#a97f55),3px 3px 0 var(--shadow,#0f0a08);font-family:"Pixelify Sans",monospace;line-height:1;padding:0;margin:0;-webkit-tap-highlight-color:transparent}
.g-arrow{width:38px;height:38px;display:grid;place-items:center;font-size:26px;flex:none;padding-bottom:3px}
.g-todaybtn{height:38px;padding:0 14px 3px;font-size:18px;display:inline-flex;align-items:center}
.g-todaybtn[hidden]{display:none}
.g-arrow:hover:not(:disabled),.g-todaybtn:hover{background:var(--frameL,#a97f55)}
.g-arrow:active:not(:disabled),.g-todaybtn:active{transform:translate(2px,2px);box-shadow:inset 0 0 0 2px var(--frameL,#a97f55),1px 1px 0 var(--shadow,#0f0a08)}
.g-arrow:disabled{opacity:.35;cursor:default}
.g-arrow:focus-visible,.g-todaybtn:focus-visible,.g-dl:focus-visible,.g-tip-edit:focus-visible,.g-welcome-msg:focus-visible{outline:3px solid #f3c969;outline-offset:2px}

/* ----- the scene ----- */
.g-scenewrap{position:relative;display:block;margin:0 auto;width:max-content;max-width:100%;padding:3px 9px 9px 3px}
.g-sceneinner{position:relative;width:max-content;max-width:100%}
.g-scene{display:block;image-rendering:pixelated;image-rendering:crisp-edges;border:4px solid var(--frame,#6b4a2e);box-shadow:inset 0 0 0 2px var(--frameL,#a97f55),0 0 0 3px var(--frameD,#3a2416),6px 6px 0 var(--shadow,#0f0a08);background:#000;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.g-tzbadge{position:absolute;right:12px;top:10px;font-size:11px;color:#f3e9dc;background:rgba(20,15,30,.5);padding:2px 7px;letter-spacing:.3px;pointer-events:none;white-space:nowrap;font-family:Nunito,system-ui,sans-serif}
.g-tz-time{font-family:Silkscreen,monospace;font-size:10px}

/* ----- day labels, aligned under each plant ----- */
.g-daylabels{position:relative;height:66px;margin-top:10px}
.g-dl{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 0 4px;margin:0;border:0;border-bottom:3px solid transparent;background:none;color:#cdbca8;font:inherit;line-height:1.25;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;appearance:none;-webkit-appearance:none}
.g-dl-d{font-family:"Pixelify Sans",monospace;font-size:19px;color:#f3e4c4;white-space:nowrap}
.g-dl-n{font-size:13px;white-space:nowrap}
.g-dl-goal{color:#f3c969;font-size:11px;white-space:nowrap}
.g-dl-today .g-dl-d{color:#f3c969}
.g-dl-today{border-bottom-color:#f3c969}
.g-dl-future{opacity:.5}
.g-dl-sel{background:rgba(255,255,255,.06)}
.g-dl:hover{background:rgba(255,255,255,.09)}
/* compact (phone, 44-px labels): weekday "Mo" / "ma" on one line, the day number
   on the next, both Pixelify 13px; the count is a bare number and the goal a bare ★ */
.g-daylabels.g-compact{height:76px}
.g-dl-compact{padding:4px 0 3px;gap:0}
.g-dl-wd{font-family:"Pixelify Sans",monospace;font-size:13px;line-height:1.15;color:#cdbca8;white-space:nowrap}
.g-dl-compact .g-dl-d{font-size:13px;line-height:1.15}
.g-dl-compact .g-dl-n{font-size:12px;margin-top:2px}
.g-dl-compact .g-dl-goal{font-size:12px}
.g-dl-today .g-dl-wd{color:#f3c969}

/* ----- tooltip (hover, or pinned with an Edit link) ----- */
.g-tip{position:absolute;display:none;pointer-events:none;z-index:5;max-width:min(240px,calc(100% - 4px));box-sizing:border-box;padding:6px 10px;background:var(--tip-bg,#fff8e6);color:var(--tip-ink,#3b2616);border:3px solid var(--edge,#4a2f1d);box-shadow:3px 3px 0 var(--shadow,#0f0a08);font-family:Nunito,system-ui,sans-serif;font-size:13px;line-height:1.4;text-align:left}
.g-tip-pinned{pointer-events:auto}
.g-tip-t{font-family:Silkscreen,monospace;font-size:11px;color:#9c2a26;margin-bottom:2px}
.g-tip-note{white-space:pre-wrap;overflow-wrap:anywhere}
.g-tip-empty{color:var(--muted,#7f6448);font-style:italic}
.g-tip-edit{display:inline-block;margin-top:6px;padding:3px 10px 5px;font-family:"Pixelify Sans",monospace;font-size:15px;line-height:1;background:var(--panel2,#e6d2a8);color:var(--ink,#3b2616);border:2px solid var(--edge,#4a2f1d);box-shadow:inset 0 -3px 0 var(--line,#cfae7a);cursor:pointer}
.g-tip-edit:hover{background:var(--line,#cfae7a)}

/* ----- welcome scene ----- */
.g-welcome{position:fixed;inset:0;z-index:1000;overflow-y:auto;background:var(--bg,#1c1511);background-image:linear-gradient(var(--bg2,#221a15) 50%,transparent 50%);background-size:4px 4px;display:flex;align-items:flex-start;justify-content:center;padding:24px 16px 48px;animation:g-fade .7s ease-out}
@keyframes g-fade{from{opacity:0}to{opacity:1}}
.g-welcome-inner{width:100%;max-width:1114px;display:flex;flex-direction:column;align-items:center;gap:22px}
.g-welcome-stage{width:max-content;max-width:100%;padding:3px 9px 9px 3px}
.g-welcome-canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;border:4px solid var(--frame,#6b4a2e);box-shadow:inset 0 0 0 2px var(--frameL,#a97f55),0 0 0 3px var(--frameD,#3a2416),6px 6px 0 var(--shadow,#0f0a08);background:#000}
.g-welcome-panel{width:100%;max-width:680px;padding:22px 28px 24px;text-align:center;opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.g-welcome-panel.g-show{opacity:1;transform:none}
.g-welcome-title{margin:0 0 10px;font-family:"Pixelify Sans",monospace;font-weight:700;font-size:34px;line-height:1.1;color:var(--ink,#3b2616);text-shadow:2px 2px 0 var(--line,#cfae7a)}
.g-welcome-msg{position:relative;margin:0;font-family:Nunito,system-ui,sans-serif;font-size:18px;line-height:1.6;color:var(--ink,#3b2616);text-align:left;white-space:pre-wrap;cursor:pointer}
.g-welcome-ghost{visibility:hidden}
.g-welcome-typed{position:absolute;left:0;top:0;right:0;white-space:pre-wrap}
.g-typing .g-welcome-typed::after{content:"▌";margin-left:1px;color:var(--accent,#b8332b);animation:g-blink .8s steps(1) infinite}
@keyframes g-blink{50%{opacity:0}}
.g-welcome-actions{margin-top:18px;min-height:72px;display:flex;justify-content:center;align-items:center}
.g-welcome-btn{opacity:0;pointer-events:none;transition:opacity .5s ease}
.g-welcome-btn.g-show{opacity:1;pointer-events:auto}

/* ----- phone ----- */
@media (max-width:860px){
  .g-weeknav{font-size:20px;gap:10px;margin:4px 0 10px}
  .g-range{font-size:13px}
  .g-daylabels{height:60px}
  .g-welcome{padding:16px 16px 40px}
  .g-welcome-title{font-size:28px}
  .g-welcome-msg{font-size:16px}
  .g-welcome-panel{padding:16px 18px 18px}
}
/* ≤ 640 px (SPEC §11): the week nav is one 44-px row — ‹ at the left edge, › at the
   right, "Week 44" centred — with the date range on its own centred line below and
   the Today button (when shown) under that. .g-weekmid dissolves into the grid. */
@media (max-width:640px){
  .g-weeknav{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;grid-template-rows:44px auto;align-items:center;gap:2px 8px;margin:4px 0 10px;font-size:22px}
  .g-weekmid{display:contents}
  .g-weeknav>.g-arrow{width:44px;height:44px;grid-row:1}
  .g-weeknav>.g-arrow:first-child{grid-column:1;justify-self:start}
  .g-weeknav>.g-arrow:last-child{grid-column:3;justify-self:end}
  .g-weeklabel{grid-column:2;grid-row:1;text-align:center;min-width:0}
  .g-range{grid-column:1/-1;grid-row:2;text-align:center;font-size:13px}
  .g-todaybtn{grid-column:1/-1;grid-row:3;justify-self:center;height:34px;font-size:16px;margin-top:4px}
  .g-todaybtn[hidden]{display:none}
  /* the timezone badge stays inside the 328-px frame */
  .g-tzbadge{font-size:10px;right:12px;top:10px;padding:2px 6px;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}
  .g-tz-time{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .g-welcome,.g-welcome-panel,.g-welcome-btn{animation:none;transition:none}
  .g-typing .g-welcome-typed::after{animation:none}
}