sonnet-5.5/13-frontend-playful/RESPONSE.md

sonnet-5.5/13-frontend-playful/TASK.md

sonnet-5.5/13-frontend-playful/app.js

/* Moss: a gentle household plant-care companion.
   Plain JavaScript, no dependencies, no network. State lives in memory only.
   Data comes from the inlined copy of PLANTS.json in index.html. */
(function () {
  'use strict';

  /* ------------------------------------------------------------------ *
   * Constants and data
   * ------------------------------------------------------------------ */
  var DATA = JSON.parse(document.getElementById('plants-data').textContent);

  // The demo day. PLANTS.json histories end on Sep 21 and Frida is "2 days
  // overdue", so we pin the calendar to Tuesday, Sep 22, 2026.
  var TODAY = Date.UTC(2026, 8, 22);
  var TODAY_IDX = 1; // DATA.week runs Monday..Sunday
  var DAYS = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
  var DAY_SHORT = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
  var MONTHS = { Jan: 0, Feb: 1, Mar: 2, Apr: 3, May: 4, Jun: 5, Jul: 6, Aug: 7, Sep: 8, Oct: 9, Nov: 10, Dec: 11 };
  var INK = '#2a2620';
  var TOAST_MS = 8000;

  /* Inline icons. Stroke icons inherit currentColor. */
  function ico(inner, mode) {
    var attrs = mode === 'fill'
      ? 'fill="currentColor"'
      : 'fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"';
    return '<svg class="ico" viewBox="0 0 24 24" ' + attrs + ' aria-hidden="true" focusable="false">' + inner + '</svg>';
  }
  var ICON = {
    drop: ico('<path d="M12 2.8c3.6 4.5 6.2 7.7 6.2 11a6.2 6.2 0 0 1-12.4 0c0-3.3 2.6-6.5 6.2-11z"/>', 'fill'),
    rotate: ico('<path d="M20 12a8 8 0 1 1-2.7-6"/><path d="M20 4v5h-5"/>'),
    lens: ico('<circle cx="10.5" cy="10.5" r="6"/><path d="M15 15l5.5 5.5"/>'),
    mist: ico('<circle cx="7" cy="8" r="2" /><circle cx="14" cy="6" r="2"/><circle cx="17" cy="13" r="2"/><circle cx="9" cy="15" r="2"/><circle cx="14" cy="19" r="1.4"/>', 'fill'),
    moon: ico('<path d="M20.5 14.6A8.6 8.6 0 0 1 9.4 3.5a8.6 8.6 0 1 0 11.1 11.1z"/>', 'fill'),
    undo: ico('<path d="M9 14L4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/>'),
    check: ico('<path d="M5 12.5l4.6 4.6L19 7.6"/>'),
    close: ico('<path d="M6 6l12 12M18 6L6 18"/>'),
    sun: ico('<circle cx="12" cy="12" r="4"/><path d="M12 2.5v2.5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M18.7 5.3l-1.8 1.8M7.1 16.9l-1.8 1.8"/>'),
    eye: ico('<path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z"/><circle cx="12" cy="12" r="2.8"/>')
  };

  /* What each task means: label for the "done" button, history bucket, toast copy. */
  var TASKS = {
    'Water': { done: 'Watered', cat: 'water', icon: ICON.drop, toast: function (n) { return n + ' is watered. Ahh.'; } },
    'Rotate': { done: 'Rotated', cat: 'light', icon: ICON.rotate, toast: function (n) { return n + ' got a quarter turn.'; } },
    'Check soil': { done: 'Soil checked', cat: 'obs', icon: ICON.lens, toast: function (n) { return n + '’s soil is checked.'; } },
    'Mist': { done: 'Misted', cat: 'water', icon: ICON.mist, toast: function (n) { return n + ' is misted and pleased.'; } }
  };

  /* A little personality per plant. */
  var FLAVOR = {
    fern: {
      alarm: 'Frida is <em>parched</em> and telling the whole bathroom.',
      quip: 'Likes her soil like a wrung-out sponge.',
      light: 'A soft, sideways glow suits her. Direct sun crisps the tips.',
      water: 'Water until it runs through, then let her drip in the sink.',
      obs: 'New fronds curl up like question marks. Worth a look.'
    },
    pothos: {
      alarm: 'Orbit is <em>leaning</em> toward the window again.',
      quip: 'Unbothered, but he leans. A quarter turn evens him out.',
      light: 'Happy in medium light. He will trail toward any brighter spot.',
      water: 'Let the top inch dry out. He forgives a late drink.',
      obs: 'Nothing noted yet. Pale leaves or new vines both count.'
    },
    cactus: {
      alarm: 'Dot is <em>fine</em>, but would like a poke.',
      quip: 'Dry two knuckles down? Then she is thirsty.',
      light: 'Wants all the sun the south window will give her.',
      water: 'Deep drink, then a long dry spell. Never a little sip.',
      obs: 'New pads show up as tiny green thumbs. Note them.'
    },
    calathea: {
      alarm: 'Drama is <em>folding</em> her leaves for the evening.',
      quip: 'Folds her leaves at night, so yes, the theatre is real.',
      light: 'Filtered light only. Bright sun bleaches those stripes.',
      water: 'Filtered water, evenly damp, and a morning mist.',
      obs: 'Brown edges usually mean dry air. Keep an eye on them.'
    }
  };

  /* ------------------------------------------------------------------ *
   * State
   * ------------------------------------------------------------------ */
  function classify(label) {
    if (/water|mist/i.test(label)) return 'water';
    if (/rotat|wipe/i.test(label)) return 'light';
    return 'obs';
  }

  function parseEntry(str) {
    var parts = str.split(' · ');
    var dm = parts[0].split(' ');
    var t = Date.UTC(2026, MONTHS[dm[0]], parseInt(dm[1], 10));
    return {
      date: parts[0].replace(/ 0(\d)$/, ' $1'),
      label: parts[1],
      cat: classify(parts[1]),
      daysAgo: Math.round((TODAY - t) / 86400000)
    };
  }

  function makePlants() {
    return DATA.plants.map(function (p) {
      return Object.assign({}, p, {
        baseDay: /tomorrow/i.test(p.due) ? 1 : 0,
        overdue: /overdue/i.test(p.due),
        status: 'pending', // pending | done | snoozed
        doneAt: 0,
        alsoWatered: false,
        hist: p.history.map(parseEntry)
      });
    });
  }

  var state = {
    plants: makePlants(),
    selectedId: null,
    sheetOpen: false,
    opener: null,
    lastAction: null,
    pulse: null,        // id of the plant that just moved, so only it animates
    wasAllDone: false
  };
  state.selectedId = state.plants.slice().sort(function (a, b) { return b.urgency - a.urgency; })[0].id;

  var toastTimer = 0;

  /* ------------------------------------------------------------------ *
   * DOM handles
   * ------------------------------------------------------------------ */
  var $ = function (sel) { return document.querySelector(sel); };
  var el = {
    app: $('#app'),
    masthead: $('#masthead'),
    status: $('#status'),
    headline: $('#headline'),
    subline: $('#subline'),
    pips: $('#pips'),
    sprout: $('#sprout'),
    queue: $('#queue'),
    rhythm: $('#rhythm'),
    foot: $('#foot'),
    detail: $('#detail'),
    scrim: $('#scrim'),
    toastRegion: $('#toast-region'),
    srLive: $('#sr-live')
  };
  var desktopMQ = window.matchMedia('(min-width: 900px)');
  function isDesktop() { return desktopMQ.matches; }

  /* ------------------------------------------------------------------ *
   * Small helpers
   * ------------------------------------------------------------------ */
  function esc(s) {
    return String(s).replace(/[&<>"']/g, function (c) {
      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
    });
  }
  function byId(id) { return state.plants.filter(function (p) { return p.id === id; })[0]; }
  function plural(n, one, many) { return n + ' ' + (n === 1 ? one : many); }
  function lc(s) { return s.charAt(0).toLowerCase() + s.slice(1); }

  function agoText(e) {
    if (e.fresh) return 'just now';
    if (e.daysAgo === 0) return 'today';
    if (e.daysAgo === 1) return 'yesterday';
    return e.daysAgo + ' days ago';
  }

  function snoozeTarget(p) {
    var idx = TODAY_IDX + p.baseDay + 1;
    if (idx === TODAY_IDX + 1) return 'tomorrow';
    return DAYS[idx] || 'next week';
  }

  function moodOf(p) {
    if (p.status === 'done') return 'happy';
    if (p.status === 'pending' && p.overdue && p.baseDay === 0) return 'thirsty';
    return 'ok';
  }

  function dueLabel(p) {
    if (p.status === 'snoozed') return 'Back ' + snoozeTarget(p);
    return p.due;
  }

  /* Everything the plant has ever logged, today's taps first. */
  function entriesOf(p) {
    var out = [];
    if (p.status === 'done') {
      out.push({ date: 'Sep 22', label: TASKS[p.task].done, cat: TASKS[p.task].cat, daysAgo: 0, fresh: true });
    }
    if (p.alsoWatered) out.push({ date: 'Sep 22', label: 'Watered', cat: 'water', daysAgo: 0, fresh: true });
    return out.concat(p.hist);
  }

  function lightLevel(text) {
    if (/^low/i.test(text)) return 1;
    if (/^medium/i.test(text)) return 2;
    if (/indirect/i.test(text)) return 3;
    return 4;
  }

  /* ------------------------------------------------------------------ *
   * Grouping and summary
   * ------------------------------------------------------------------ */
  function groups() {
    var P = state.plants;
    var pend = P.filter(function (p) { return p.status === 'pending'; })
      .sort(function (a, b) { return b.urgency - a.urgency; });
    return {
      overdue: pend.filter(function (p) { return p.baseDay === 0 && p.overdue; }),
      today: pend.filter(function (p) { return p.baseDay === 0 && !p.overdue; }),
      later: pend.filter(function (p) { return p.baseDay > 0; }),
      done: P.filter(function (p) { return p.status === 'done'; }).sort(function (a, b) { return b.doneAt - a.doneAt; }),
      snoozed: P.filter(function (p) { return p.status === 'snoozed'; })
    };
  }

  function summary() {
    var g = groups();
    var scope = state.plants.filter(function (p) { return p.baseDay === 0 && p.status !== 'snoozed'; });
    var tended = scope.filter(function (p) { return p.status === 'done'; }).length;
    return {
      g: g,
      total: scope.length,
      tended: tended,
      open: g.overdue.length + g.today.length,
      allDone: g.overdue.length + g.today.length === 0
    };
  }

  /* ------------------------------------------------------------------ *
   * Illustration: hand-built SVG, one small scene per plant.
   * ------------------------------------------------------------------ */
  function quadPt(p0, p1, p2, t) {
    var u = 1 - t;
    return [u * u * p0[0] + 2 * u * t * p1[0] + t * t * p2[0], u * u * p0[1] + 2 * u * t * p1[1] + t * t * p2[1]];
  }
  function quadTan(p0, p1, p2, t) {
    var u = 1 - t;
    return Math.atan2(2 * u * (p1[1] - p0[1]) + 2 * t * (p2[1] - p1[1]), 2 * u * (p1[0] - p0[0]) + 2 * t * (p2[0] - p1[0])) * 180 / Math.PI;
  }
  function r1(n) { return Math.round(n * 10) / 10; }

  function sparkle(x, y, s) {
    return '<path transform="translate(' + x + ' ' + y + ') scale(' + s + ')" d="M0-8Q1.2-1.2 8 0Q1.2 1.2 0 8Q-1.2 1.2-8 0Q-1.2-1.2 0-8z" fill="#f2c94c" stroke="' + INK + '" stroke-width="1.6" stroke-linejoin="round"/>';
  }
  function sweat() {
    return '<path d="M101 26c4 5 6.6 8.4 6.6 11.6a6.6 6.6 0 0 1-13.2 0c0-3.2 2.6-6.6 6.6-11.6z" fill="#bfdcd8" stroke="' + INK + '" stroke-width="2.2" stroke-linejoin="round"/>';
  }

  function pot(body, rim, extra) {
    return '<g stroke="' + INK + '" stroke-width="2.6" stroke-linejoin="round">' +
      '<path d="M36 86h48l-5 25q-.7 3.4-4.4 3.4H45.4q-3.7 0-4.4-3.4z" fill="' + body + '"/>' +
      (extra || '') +
      '<rect x="31" y="74" width="58" height="14" rx="6.5" fill="' + rim + '"/></g>';
  }

  function fernArt(mood) {
    var droop = mood === 'thirsty';
    var fronds = [[-72, 46], [-40, 52], [-8, 56], [26, 52], [58, 44]];
    var out = '';
    fronds.forEach(function (f, fi) {
      var a = f[0] * Math.PI / 180, L = f[1];
      var p0 = [60, 76], p1, p2;
      if (droop) {
        p1 = [60 + Math.sin(a) * L * 0.42, 76 - L * 0.9];
        p2 = [60 + Math.sin(a) * L * 1.02, 76 - Math.cos(a) * L * 0.32 + 12];
      } else {
        p1 = [60 + Math.sin(a) * L * 0.34, 76 - L * 0.8];
        p2 = [60 + Math.sin(a) * L * 0.86, 76 - Math.cos(a) * L * 0.98];
      }
      out += '<path d="M60 76Q' + r1(p1[0]) + ' ' + r1(p1[1]) + ' ' + r1(p2[0]) + ' ' + r1(p2[1]) + '" fill="none" stroke="' + INK + '" stroke-width="2.4" stroke-linecap="round"/>';
      for (var i = 1; i <= 6; i++) {
        var t = 0.14 + i * 0.13;
        var pt = quadPt(p0, p1, p2, t), tan = quadTan(p0, p1, p2, t);
        var rx = 8.4 * (1 - 0.55 * t), ry = 3.1 * (1 - 0.25 * t);
        [1, -1].forEach(function (s) {
          var ang = tan + s * 64, rad = ang * Math.PI / 180;
          var cx = pt[0] + Math.cos(rad) * rx * 0.85, cy = pt[1] + Math.sin(rad) * rx * 0.85;
          out += '<ellipse cx="' + r1(cx) + '" cy="' + r1(cy) + '" rx="' + r1(rx) + '" ry="' + r1(ry) + '" transform="rotate(' + r1(ang) + ' ' + r1(cx) + ' ' + r1(cy) + ')" fill="' + ((fi + i) % 2 ? '#6f9a45' : '#85ad55') + '" stroke="' + INK + '" stroke-width="1.5"/>';
        });
      }
    });
    return out + pot('#c8623f', '#dc7d5c', '<path d="M39 96h42" stroke="#a04a2c" stroke-width="2.4" stroke-linecap="round" fill="none"/>');
  }

  function pothosArt() {
    var vines = [
      [[46, 78], [16, 72], [24, 110], 4],
      [[74, 78], [104, 72], [98, 110], 4],
      [[53, 76], [38, 52], [50, 24], 4],
      [[66, 76], [80, 58], [71, 30], 4],
      [[59, 76], [64, 54], [58, 40], 3]
    ];
    var out = '', leaves = '';
    vines.forEach(function (v, vi) {
      out += '<path d="M' + v[0][0] + ' ' + v[0][1] + 'Q' + v[1][0] + ' ' + v[1][1] + ' ' + v[2][0] + ' ' + v[2][1] + '" fill="none" stroke="' + INK + '" stroke-width="2.6" stroke-linecap="round"/>';
      for (var i = 1; i <= v[3]; i++) {
        var t = i / v[3] * 0.95;
        var pt = quadPt(v[0], v[1], v[2], t), tan = quadTan(v[0], v[1], v[2], t);
        var side = (i + vi) % 2 ? 1 : -1;
        var rot = tan - 90 + side * 34;
        var sc = 1.05 + (i % 2) * 0.22;
        leaves += '<g transform="translate(' + r1(pt[0]) + ' ' + r1(pt[1]) + ') rotate(' + r1(rot) + ') scale(' + sc + ')">' +
          '<path d="M0 0C-8-7-15 3 0 17C15 3 8-7 0 0z" fill="' + ((i + vi) % 3 === 0 ? '#a4c266' : '#6f9a45') + '" stroke="' + INK + '" stroke-width="2" stroke-linejoin="round"/>' +
          '<path d="M0 3V12" stroke="#e7efc4" stroke-width="1.6" stroke-linecap="round"/></g>';
      }
    });
    return out + leaves + pot('#f3ead6', '#fff7e4', '<path d="M37 94h46M39 102h42" stroke="#c8623f" stroke-width="2.6" stroke-linecap="round" fill="none"/>');
  }

  function cactusArt() {
    function spines(cx, cy, rx, ry, n, seed) {
      var s = '';
      for (var i = 0; i < n; i++) {
        var a = (i * 137.5 + seed) * Math.PI / 180;
        var d = Math.sqrt((i + 0.5) / n);
        s += '<circle cx="' + r1(cx + Math.cos(a) * rx * 0.72 * d) + '" cy="' + r1(cy + Math.sin(a) * ry * 0.72 * d) + '" r="1.25"/>';
      }
      return s;
    }
    var pad = 'fill="#8fb069" stroke="' + INK + '" stroke-width="2.6"';
    return '<ellipse cx="60" cy="72" rx="20" ry="13" ' + pad + '/>' +
      '<ellipse cx="46" cy="50" rx="15" ry="22" transform="rotate(-14 46 50)" ' + pad + '/>' +
      '<ellipse cx="75" cy="42" rx="14" ry="21" transform="rotate(16 75 42)" ' + pad + '/>' +
      '<g fill="#fff7e4" stroke="none">' + spines(46, 50, 15, 22, 9, 10) + spines(75, 42, 14, 21, 9, 40) + spines(60, 72, 20, 13, 6, 70) + '</g>' +
      '<g stroke="' + INK + '" stroke-width="2"><circle cx="79" cy="18" r="6" fill="#e8735a"/><circle cx="87" cy="24" r="6" fill="#e8735a"/><circle cx="71" cy="24" r="6" fill="#e8735a"/><circle cx="79" cy="27" r="4.6" fill="#f2c94c"/></g>' +
      pot('#3b8583', '#4f9c99', '<path d="M38 96h44" stroke="#2a6667" stroke-width="2.4" stroke-linecap="round" fill="none"/>');
  }

  function calatheaArt() {
    function leaf(angle, h, w, fill, stripe) {
      var s = '<g transform="translate(60 78) rotate(' + angle + ')">' +
        '<ellipse cx="0" cy="' + (-h - 3) + '" rx="' + w + '" ry="' + h + '" fill="' + fill + '" stroke="' + INK + '" stroke-width="2.4"/>' +
        '<path d="M0 -6V' + (-2 * h) + '" stroke="' + stripe + '" stroke-width="2.2" stroke-linecap="round" fill="none"/>';
      for (var y = 14; y < 2 * h - 8; y += 11) {
        var k = Math.max(0.35, 1 - Math.abs(y - h) / (h * 1.1));
        s += '<path d="M0 ' + (-y) + 'L' + r1(w * 0.82 * k) + ' ' + (-y - 7) + 'M0 ' + (-y) + 'L' + r1(-w * 0.82 * k) + ' ' + (-y - 7) + '" stroke="' + stripe + '" stroke-width="2.1" stroke-linecap="round" fill="none"/>';
      }
      return s + '</g>';
    }
    return leaf(10, 32, 13, '#8a3d55', '#d7a9b6') +
      leaf(-46, 24, 11.5, '#4f7f45', '#d7e6b0') +
      leaf(44, 25, 11.5, '#57894b', '#d7e6b0') +
      leaf(-20, 31, 13, '#4f7f45', '#d7e6b0') +
      leaf(21, 30, 13, '#5b8d4e', '#d7e6b0') +
      leaf(0, 34, 14, '#4a7a41', '#d7e6b0') +
      pot('#5a3a55', '#76506f', '<path d="M39 96h42" stroke="#3f2a3c" stroke-width="2.4" stroke-linecap="round" fill="none"/>');
  }

  function art(id, mood) {
    var body = id === 'fern' ? fernArt(mood)
      : id === 'pothos' ? pothosArt()
      : id === 'cactus' ? cactusArt()
      : calatheaArt();
    if (mood === 'thirsty') body += sweat();
    if (mood === 'happy') body += sparkle(19, 34, 1.1) + sparkle(104, 22, 0.9) + sparkle(100, 64, 0.65);
    return '<svg class="art" viewBox="0 0 120 120" aria-hidden="true" focusable="false">' + body + '</svg>';
  }

  function snailArt() {
    return '<svg class="snail-art" viewBox="0 0 132 84" aria-hidden="true" focusable="false">' +
      '<g stroke="' + INK + '" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round">' +
      '<path d="M8 72c0-8 6-11 15-11h72c9 0 14-6 14-15 0-5-1-9-1-14 0-4 6-4 6 0 0 6 2 9 4 15 4 13-2 25-18 25H21C13 72 8 76 8 72z" fill="#f0b892"/>' +
      '<path d="M112 32L108 14M119 32L125 16" fill="none"/>' +
      '<circle cx="108" cy="12" r="3.6" fill="#fff7e4"/><circle cx="125" cy="14" r="3.6" fill="#fff7e4"/>' +
      '<circle cx="56" cy="42" r="28" fill="#f2c94c"/>' +
      '<path d="M56 42a4.4 4.4 0 0 1 8.8 0a9.6 9.6 0 0 1-19.2 0a15 15 0 0 1 30 0a20.5 20.5 0 0 1-41 0" fill="none" stroke-width="2.4"/>' +
      '</g></svg>';
  }

  /* ------------------------------------------------------------------ *
   * Templates: queue
   * ------------------------------------------------------------------ */
  function openBtn(p) {
    var expanded = p.id === state.selectedId && (isDesktop() || state.sheetOpen);
    return '<button type="button" class="q-open" data-act="open" data-id="' + p.id + '" aria-controls="detail" aria-expanded="' + expanded + '"' +
      (p.id === state.selectedId && isDesktop() ? ' aria-current="true"' : '') + '>' + esc(p.name) + '<span class="sr-only">, show details</span></button>';
  }

  function actionButtons(p, early) {
    var t = TASKS[p.task];
    var label = early ? t.done + ' early' : t.done;
    return '<button type="button" class="btn btn-primary" data-act="done" data-id="' + p.id + '" aria-label="Mark ' + esc(p.name) + ' as ' + lc(t.done) + (early ? ' early' : '') + '">' +
      t.icon + '<span>' + esc(label) + '</span></button>' +
      '<button type="button" class="btn btn-ghost" data-act="snooze" data-id="' + p.id + '" aria-label="Snooze ' + esc(p.name) + ' until ' + snoozeTarget(p) + '">' +
      ICON.moon + '<span>Snooze</span></button>';
  }

  function queueItem(p, kind) {
    var t = TASKS[p.task];
    var quip = kind === 'hero' ? '<p class="q-quip">' + esc(FLAVOR[p.id].quip) + '</p>' : '';
    return '<li class="q-item q-' + kind + (p.id === state.selectedId ? ' is-selected' : '') + (p.id === state.pulse ? ' is-new' : '') + '" data-plant="' + p.id + '">' +
      '<div class="portrait tint-' + p.id + '">' + art(p.id, moodOf(p)) + '</div>' +
      '<div class="q-body">' +
      '<p class="q-kicker"><span class="q-task">' + t.icon + esc(p.task) + '</span><span class="q-due">' + esc(p.due) + '</span></p>' +
      '<h3 class="q-name">' + openBtn(p) + '</h3>' +
      '<p class="q-meta">' + esc(p.species) + ' · ' + esc(p.location) + '</p>' + quip +
      '</div>' +
      '<div class="q-actions">' + actionButtons(p, kind === 'quiet') + '</div>' +
      '</li>';
  }

  function compactItem(p) {
    var done = p.status === 'done';
    var t = TASKS[p.task];
    var note = done ? t.done + ' just now' : p.task + ' · back ' + snoozeTarget(p);
    var aria = done ? 'Undo ' + lc(t.done) + ' for ' + p.name : 'Bring ' + p.name + ' back to the queue';
    return '<li class="q-item q-compact ' + (done ? 'is-done' : 'is-snoozed') + (p.id === state.selectedId ? ' is-selected' : '') + (p.id === state.pulse ? ' is-new' : '') + '" data-plant="' + p.id + '">' +
      '<span class="c-mark" aria-hidden="true">' + (done ? ICON.check : ICON.moon) + '</span>' +
      '<div class="c-body"><h3 class="c-name">' + openBtn(p) + '</h3><p class="c-note">' + esc(note) + '</p></div>' +
      '<button type="button" class="btn btn-quiet" data-act="restore" data-id="' + p.id + '" aria-label="' + esc(aria) + '">' +
      ICON.undo + '<span>' + (done ? 'Undo' : 'Bring back') + '</span></button>' +
      '</li>';
  }

  function section(cls, title, count, listCls, items, labelId) {
    return '<section class="q-section ' + cls + '" aria-labelledby="' + labelId + '">' +
      '<h2 class="q-heading" id="' + labelId + '"><span class="q-tag">' + title + '</span><span class="q-count">' + count + '</span></h2>' +
      '<ul class="q-list ' + listCls + '">' + items + '</ul></section>';
  }

  function allDonePanel(s) {
    var g = s.g;
    var recap = g.done.map(function (p) {
      return '<li><span class="recap-dot" aria-hidden="true"></span>' + esc(p.name) + ' <span class="recap-what">' + esc(lc(TASKS[p.task].done)) + '</span></li>';
    }).join('');
    var snoozedLine = g.snoozed.length
      ? '<li class="recap-snoozed"><span class="recap-dot" aria-hidden="true"></span>' + g.snoozed.map(function (p) { return esc(p.name); }).join(' and ') +
        ' <span class="recap-what">snoozed</span></li>'
      : '';
    var title = g.snoozed.length ? 'Clear for today.' : 'Everything’s tended.';
    var lead = s.tended
      ? plural(s.tended, 'plant', 'plants') + ' looked after. The windowsill is content.'
      : 'Nothing is due right now. Snoozed plants will nudge you again.';
    // What is coming next, so the calm has a purpose.
    var next = [];
    g.later.forEach(function (p) { next.push(p.name + '’s ' + lc(p.task) + ' is due ' + (p.baseDay === 1 ? 'tomorrow' : 'soon')); });
    g.snoozed.forEach(function (p) { next.push(p.name + '’s ' + lc(p.task) + ' returns ' + snoozeTarget(p)); });
    var nextLine = next.length
      ? '<p class="alldone-next"><strong>Next up:</strong> ' + esc(next.join('. ')) + '.</p>'
      : '<p class="alldone-next"><strong>Next up:</strong> nothing on the calendar. Enjoy the quiet.</p>';
    var undoBtn = state.lastAction
      ? '<button type="button" class="btn btn-quiet" data-act="toast-undo">' + ICON.undo + '<span>Undo last change</span></button>'
      : '';
    return '<section class="alldone' + (state.wasAllDone ? '' : ' is-new') + '" id="alldone" aria-labelledby="alldone-title">' +
      '<div class="alldone-art">' + snailArt() + '</div>' +
      '<div class="alldone-copy"><p class="eyebrow">All done</p>' +
      '<h2 id="alldone-title" tabindex="-1">' + title + '</h2>' +
      '<p class="alldone-lead">' + esc(lead) + '</p>' +
      ((recap || snoozedLine) ? '<ul class="recap">' + recap + snoozedLine + '</ul>' : '') +
      nextLine +
      '<p class="alldone-nudge">Anything new on a leaf? A bud, a curl, a crisp edge. Open a plant to read its notes.</p>' +
      '<div class="alldone-actions">' + undoBtn + '<button type="button" class="btn btn-quiet" data-act="reset">' + ICON.rotate + '<span>Start today over</span></button></div>' +
      '</div></section>';
  }

  function queueHTML() {
    var s = summary(), g = s.g, html = '';
    if (s.allDone) html += allDonePanel(s);
    if (g.overdue.length) {
      html += section('q-section--overdue', 'Overdue', g.overdue.length, 'q-list--hero',
        g.overdue.map(function (p) { return queueItem(p, 'hero'); }).join(''), 'h-overdue');
    }
    if (g.today.length) {
      html += section('q-section--today', 'Due today', g.today.length, 'q-list--today',
        g.today.map(function (p) { return queueItem(p, 'row'); }).join(''), 'h-today');
    }
    if (g.later.length) {
      html += section('q-section--later', 'Up next', g.later.length, 'q-list--later',
        g.later.map(function (p) { return queueItem(p, 'quiet'); }).join(''), 'h-later');
    }
    if (g.done.length) {
      html += section('q-section--done', 'Tended', g.done.length, 'q-list--compact',
        g.done.map(compactItem).join(''), 'h-done');
    }
    if (g.snoozed.length) {
      html += section('q-section--snoozed', 'Snoozed', g.snoozed.length, 'q-list--compact',
        g.snoozed.map(compactItem).join(''), 'h-snoozed');
    }
    return html;
  }

  /* ------------------------------------------------------------------ *
   * Templates: status, rhythm
   * ------------------------------------------------------------------ */
  function renderStatus() {
    var s = summary(), g = s.g, head, sub;
    if (s.allDone) {
      head = g.snoozed.length ? 'Today is <em>clear</em>.' : '<em>Everyone’s</em> content.';
      sub = s.tended
        ? plural(s.tended, 'plant', 'plants') + ' tended' + (g.snoozed.length ? ', ' + g.snoozed.length + ' snoozed.' : '. Nothing left to do.')
        : plural(g.snoozed.length, 'plant', 'plants') + ' snoozed. Nothing due right now.';
    } else if (g.overdue.length) {
      head = FLAVOR[g.overdue[0].id].alarm;
      sub = s.tended + ' of ' + s.total + ' tended today · ' + g.overdue.length + ' running late';
    } else {
      head = 'A gentle day: <em>' + plural(s.open, 'small thing', 'small things') + '</em> left.';
      sub = s.tended + ' of ' + s.total + ' tended today · nothing running late';
    }
    el.headline.innerHTML = head;
    el.subline.textContent = sub;
    var pips = '';
    for (var i = 0; i < s.total; i++) pips += '<span class="pip' + (i < s.tended ? ' is-done' : '') + '"></span>';
    el.pips.innerHTML = pips;

    var frac = s.total ? s.tended / s.total : 0;
    var leaves = s.tended === 0 ? 0 : Math.max(1, Math.round(frac * 3));
    for (var l = 1; l <= 3; l++) el.sprout.classList.toggle('has-leaf-' + l, l <= leaves);
    el.sprout.classList.toggle('is-bloom', s.allDone && s.tended > 0);
    el.sprout.classList.toggle('is-worried', g.overdue.length > 0);
  }

  function rhythmData() {
    var c = DATA.week.slice(), done = [0, 0, 0, 0, 0, 0, 0], moved = [0, 0, 0, 0, 0, 0, 0], late = 0;
    state.plants.forEach(function (p) {
      var from = TODAY_IDX + p.baseDay;
      if (p.status === 'snoozed') {
        c[from] = Math.max(0, c[from] - 1);
        if (from + 1 < 7) { c[from + 1] += 1; moved[from + 1] += 1; }
      }
      if (p.status === 'done') done[from] += 1;
      if (p.status === 'pending' && p.baseDay === 0 && p.overdue) late += 1;
    });
    return { c: c, done: done, moved: moved, late: late };
  }

  function rhythmHTML() {
    var R = rhythmData(), cols = '';
    for (var d = 0; d < 7; d++) {
      var n = R.c[d], peb = [];
      var nDone = d < TODAY_IDX ? n : Math.min(R.done[d], n);
      var nLate = d === TODAY_IDX ? Math.min(R.late, n - nDone) : 0;
      var nMoved = d > TODAY_IDX ? Math.min(R.moved[d], n - nDone) : 0;
      var nDue = Math.max(0, n - nDone - nLate - nMoved);
      var i;
      for (i = 0; i < nDone; i++) peb.push('done');
      for (i = 0; i < nLate; i++) peb.push('late');
      for (i = 0; i < nDue; i++) peb.push('due');
      for (i = 0; i < nMoved; i++) peb.push('moved');
      var stack = peb.map(function (k, idx) {
        var rot = ((d * 7 + idx * 5) % 7 - 3) * 2.2;
        var w = 78 + ((d * 3 + idx * 4) % 5) * 5;
        return '<span class="peb peb--' + k + '" style="--rot:' + rot + 'deg;--w:' + w + '%"></span>';
      }).join('');
      var status = d === TODAY_IDX ? ', today' : (d < TODAY_IDX ? ', finished' : '');
      var detail = nDone ? ', ' + nDone + ' done' : '';
      if (nLate) detail += ', ' + nLate + ' late';
      if (nMoved) detail += ', ' + nMoved + ' snoozed here';
      cols += '<li class="rc' + (d === TODAY_IDX ? ' is-today' : '') + (d < TODAY_IDX ? ' is-past' : '') + '">' +
        '<div class="stack" aria-hidden="true">' + stack + '</div>' +
        '<span class="rc-label" aria-hidden="true">' + DAY_SHORT[d] + '</span>' +
        '<span class="sr-only">' + DAYS[d] + status + ': ' + plural(n, 'task', 'tasks') + detail + '</span></li>';
    }
    // Caption: busiest and quietest day from today onward.
    var busy = TODAY_IDX, calm = TODAY_IDX;
    for (var k = TODAY_IDX; k < 7; k++) {
      if (R.c[k] > R.c[busy]) busy = k;
      if (R.c[k] <= R.c[calm]) calm = k;
    }
    var cap = DAYS[busy] + ' is the busy one (' + R.c[busy] + '). ' + DAYS[calm] + ' is a breather (' + R.c[calm] + ').';
    return '<h2 class="rhythm-title" id="rhythm-title">This week’s rhythm</h2>' +
      '<ol class="rc-list">' + cols + '</ol>' +
      '<p class="rhythm-cap">' + esc(cap) + '</p>' +
      '<ul class="legend" aria-hidden="true">' +
      '<li><span class="peb peb--done"></span>done</li><li><span class="peb peb--late"></span>late</li>' +
      '<li><span class="peb peb--due"></span>to do</li><li><span class="peb peb--moved"></span>snoozed here</li></ul>';
  }

  /* ------------------------------------------------------------------ *
   * Template: plant detail
   * ------------------------------------------------------------------ */
  function histList(items, emptyText) {
    if (!items.length) return '<p class="hist-empty">' + esc(emptyText) + '</p>';
    return '<ol class="hist">' + items.map(function (e) {
      return '<li' + (e.fresh ? ' class="is-fresh"' : '') + '><span class="hist-date">' + esc(e.date) + '</span><span class="hist-what">' + esc(e.label) + '</span><span class="hist-ago">' + esc(agoText(e)) + '</span></li>';
    }).join('') + '</ol>';
  }

  function dripStrip(entries) {
    var cells = '';
    for (var back = 20; back >= 0; back--) {
      var kind = '';
      entries.forEach(function (e) {
        if (e.cat !== 'water' || e.daysAgo !== back) return;
        if (/^watered/i.test(e.label)) kind = 'watered'; else if (!kind) kind = 'misted';
      });
      cells += '<li class="dr' + (kind ? ' dr--' + kind : '') + (back === 0 ? ' dr--today' : '') + '"></li>';
    }
    return '<ol class="drips" aria-hidden="true">' + cells + '</ol>' +
      '<div class="drips-scale" aria-hidden="true"><span>3 weeks ago</span><span>today</span></div>';
  }

  function detailActions(p) {
    var t = TASKS[p.task];
    if (p.status === 'pending') {
      return '<div class="d-actions">' + actionButtons(p, p.baseDay > 0) + '</div>';
    }
    if (p.status === 'done') {
      return '<div class="d-state"><span class="c-mark" aria-hidden="true">' + ICON.check + '</span><p>' + esc(t.done) + ' just now.</p>' +
        '<button type="button" class="btn btn-quiet" data-act="restore" data-id="' + p.id + '" aria-label="Undo ' + esc(lc(t.done)) + ' for ' + esc(p.name) + '">' + ICON.undo + '<span>Undo</span></button></div>';
    }
    return '<div class="d-state"><span class="c-mark" aria-hidden="true">' + ICON.moon + '</span><p>Snoozed until ' + snoozeTarget(p) + '.</p>' +
      '<button type="button" class="btn btn-quiet" data-act="restore" data-id="' + p.id + '" aria-label="Bring ' + esc(p.name) + ' back to the queue">' + ICON.undo + '<span>Bring back</span></button></div>';
  }

  function detailHTML() {
    var p = byId(state.selectedId), t = TASKS[p.task], f = FLAVOR[p.id];
    var entries = entriesOf(p);
    var by = { light: [], water: [], obs: [] };
    entries.forEach(function (e) { by[e.cat].push(e); });
    var lvl = lightLevel(p.light);
    var lastWater = entries.filter(function (e) { return /^watered/i.test(e.label); })[0];
    var lastMist = entries.filter(function (e) { return /^misted/i.test(e.label); })[0];
    var sun = '';
    for (var i = 1; i <= 4; i++) sun += '<span class="sunpip s' + i + (i <= lvl ? ' is-on' : '') + '"></span>';

    var waterSummary = '<p class="d-big">' + (lastWater ? 'Last watered <strong>' + esc(agoText(lastWater)) + '</strong>' : 'No watering logged') + '</p>' +
      (lastMist ? '<p class="d-small">Last misted ' + esc(agoText(lastMist)) + '.</p>' : '');

    var alsoWater = '';
    if (p.task !== 'Water') {
      alsoWater = p.alsoWatered
        ? '<div class="d-inline"><span class="d-inline-note">' + ICON.drop + ' Watered today</span><button type="button" class="btn btn-quiet" data-act="unwater" data-id="' + p.id + '" aria-label="Undo watering for ' + esc(p.name) + '">' + ICON.undo + '<span>Undo</span></button></div>'
        : '<div class="d-inline"><button type="button" class="btn btn-quiet" data-act="also-water" data-id="' + p.id + '" aria-label="Log a watering for ' + esc(p.name) + '">' + ICON.drop + '<span>Also watered</span></button></div>';
    }

    return '<div class="grab" aria-hidden="true"></div>' +
      '<div class="d-head">' +
      '<div class="portrait portrait--lg tint-' + p.id + '">' + art(p.id, moodOf(p)) + '</div>' +
      '<div class="d-title"><p class="eyebrow">' + esc(p.location) + '</p>' +
      '<h2 id="detail-title" tabindex="-1">' + esc(p.name) + '</h2>' +
      '<p class="d-species">' + esc(p.species) + '</p></div>' +
      '<button type="button" class="btn btn-quiet d-close" data-act="close" aria-label="Close details">' + ICON.close + '<span>Close</span></button>' +
      '</div>' +
      '<div class="d-next"><p class="d-next-line"><span class="q-task">' + t.icon + esc(p.task) + '</span><span class="d-due ' + (p.overdue && p.status === 'pending' ? 'is-late' : '') + '">' + esc(dueLabel(p)) + '</span></p>' +
      detailActions(p) + alsoWater + '</div>' +

      '<section class="d-sec d-light" aria-labelledby="d-light-h">' +
      '<h3 id="d-light-h"><span class="d-ico d-ico--light">' + ICON.sun + '</span>Light</h3>' +
      '<div class="d-meter"><div class="sunpips" aria-hidden="true">' + sun + '</div><p class="d-big">' + esc(p.light) + '</p></div>' +
      '<p class="sr-only">Light level ' + lvl + ' of 4.</p>' +
      '<p class="d-tip">' + esc(f.light) + '</p>' +
      histList(by.light, 'No turns or wipes logged. This spot has been working.') +
      '</section>' +

      '<section class="d-sec d-water" aria-labelledby="d-water-h">' +
      '<h3 id="d-water-h"><span class="d-ico d-ico--water">' + ICON.drop + '</span>Water</h3>' +
      waterSummary + dripStrip(entries) +
      '<p class="d-tip">' + esc(f.water) + '</p>' +
      histList(by.water, 'Nothing logged yet.') +
      '</section>' +

      '<section class="d-sec d-obs" aria-labelledby="d-obs-h">' +
      '<h3 id="d-obs-h"><span class="d-ico d-ico--obs">' + ICON.eye + '</span>Observations</h3>' +
      '<p class="d-tip">' + esc(f.obs) + '</p>' +
      histList(by.obs, 'Nothing noticed yet. Look closely on the next visit.') +
      '</section>';
  }

  /* ------------------------------------------------------------------ *
   * Render + focus management
   * ------------------------------------------------------------------ */
  function selectorFor(node) {
    if (!node || node === document.body || !node.getAttribute) return null;
    var act = node.getAttribute('data-act'), id = node.getAttribute('data-id');
    var scope = node.closest('#detail') ? '#detail' : (node.closest('#queue') ? '#queue' : '');
    if (act && id && scope) return scope + ' [data-act="' + act + '"][data-id="' + id + '"]';
    if (node.id === 'detail-title') return '#detail-title';
    return null;
  }

  function render(opts) {
    opts = opts || {};
    var sel = opts.focus || selectorFor(document.activeElement);
    renderStatus();
    el.queue.innerHTML = queueHTML();
    el.rhythm.innerHTML = rhythmHTML();
    el.detail.innerHTML = detailHTML();
    state.pulse = null;
    state.wasAllDone = summary().allDone;
    syncMode();
    if (sel) {
      var target = document.querySelector(sel);
      if (!target && opts.fallback) target = document.querySelector(opts.fallback);
      if (target) target.focus();
    }
  }

  /* On desktop the detail is a permanent side panel. On mobile it is a modal
     bottom sheet, so it gets dialog semantics, inert background and a scroll lock. */
  function syncMode() {
    var desk = isDesktop();
    var modal = !desk && state.sheetOpen;
    if (desk && state.sheetOpen) state.sheetOpen = false;
    el.detail.classList.toggle('is-open', modal);
    if (desk) {
      el.detail.removeAttribute('role');
      el.detail.removeAttribute('aria-modal');
      el.detail.setAttribute('aria-label', 'Plant details');
      el.detail.removeAttribute('aria-labelledby');
      el.detail.inert = false;
    } else {
      el.detail.setAttribute('role', 'dialog');
      el.detail.setAttribute('aria-modal', String(modal));
      el.detail.setAttribute('aria-labelledby', 'detail-title');
      el.detail.removeAttribute('aria-label');
      el.detail.inert = !modal;
    }
    [el.masthead, el.status, el.queue, el.rhythm, el.foot].forEach(function (n) { n.inert = modal; });
    el.scrim.hidden = !modal;
    document.body.classList.toggle('sheet-open', modal);
  }

  function announce(msg) {
    el.srLive.textContent = '';
    window.setTimeout(function () { el.srLive.textContent = msg; }, 30);
  }

  /* ------------------------------------------------------------------ *
   * Toast with undo
   * ------------------------------------------------------------------ */
  function hideToast() {
    window.clearTimeout(toastTimer);
    var t = el.toastRegion.firstElementChild;
    if (!t) return;
    var hadFocus = t.contains(document.activeElement);
    el.toastRegion.innerHTML = '';
    if (hadFocus) {
      var back = state.sheetOpen ? $('#detail-title') : el.queue;
      if (back) back.focus();
    }
  }

  function armToast(ms) {
    window.clearTimeout(toastTimer);
    toastTimer = window.setTimeout(hideToast, ms);
  }

  function showToast(message, undoFn, meta) {
    state.lastAction = undoFn ? { undo: undoFn, id: meta && meta.id, kind: meta && meta.kind } : null;
    el.toastRegion.innerHTML =
      '<div class="toast" data-toast>' +
      '<p class="toast-msg">' + esc(message) + '</p>' +
      (undoFn ? '<button type="button" class="btn btn-toast" data-act="toast-undo">' + ICON.undo + '<span>Undo</span></button>' : '') +
      '<button type="button" class="toast-x" data-act="toast-dismiss" aria-label="Dismiss message">' + ICON.close + '</button>' +
      '<span class="toast-bar" style="animation-duration:' + TOAST_MS + 'ms" aria-hidden="true"></span>' +
      '</div>';
    armToast(TOAST_MS);
  }

  el.toastRegion.addEventListener('mouseenter', function () { window.clearTimeout(toastTimer); });
  el.toastRegion.addEventListener('mouseleave', function () { if (el.toastRegion.firstElementChild) armToast(3500); });
  el.toastRegion.addEventListener('focusin', function () { window.clearTimeout(toastTimer); });
  el.toastRegion.addEventListener('focusout', function () { if (el.toastRegion.firstElementChild) armToast(3500); });

  /* ------------------------------------------------------------------ *
   * Actions
   * ------------------------------------------------------------------ */
  function scopeOf(node) { return node && node.closest('#detail') ? '#detail' : '#queue'; }

  function markDone(id, scope) {
    var p = byId(id);
    if (!p || p.status !== 'pending') return;
    p.status = 'done';
    p.doneAt = Date.now();
    var msg = TASKS[p.task].toast(p.name);
    if (summary().allDone) msg += ' That’s everything for today.';
    var undo = function () { p.status = 'pending'; p.doneAt = 0; };
    state.lastAction = { undo: undo, id: id, kind: 'care' };
    state.pulse = id;
    render({ focus: scope + ' [data-act="restore"][data-id="' + id + '"]', fallback: '#queue [data-act="restore"][data-id="' + id + '"]' });
    showToast(msg, undo, { id: id, kind: 'care' });
  }

  function snooze(id, scope) {
    var p = byId(id);
    if (!p || p.status !== 'pending') return;
    var target = snoozeTarget(p);
    p.status = 'snoozed';
    var msg = p.name + ' snoozed until ' + target + '.';
    if (summary().allDone) msg += ' Nothing else is due today.';
    var undo = function () { p.status = 'pending'; };
    state.lastAction = { undo: undo, id: id, kind: 'care' };
    state.pulse = id;
    render({ focus: scope + ' [data-act="restore"][data-id="' + id + '"]', fallback: '#queue [data-act="restore"][data-id="' + id + '"]' });
    showToast(msg, undo, { id: id, kind: 'care' });
  }

  function restore(id, scope) {
    var p = byId(id);
    if (!p || p.status === 'pending') return;
    var was = p.status;
    p.status = 'pending';
    p.doneAt = 0;
    state.lastAction = null;
    state.pulse = id;
    hideToast();
    render({ focus: scope + ' [data-act="done"][data-id="' + id + '"]', fallback: '#queue [data-act="done"][data-id="' + id + '"]' });
    announce(was === 'done' ? p.name + ' is back in the queue.' : p.name + ' is back in today’s queue.');
  }

  function alsoWater(id, scope) {
    var p = byId(id);
    if (!p || p.alsoWatered) return;
    p.alsoWatered = true;
    var msg = 'Watering logged for ' + p.name + '.';
    render({ focus: scope + ' [data-act="unwater"][data-id="' + id + '"]' });
    showToast(msg, function () { p.alsoWatered = false; }, { id: id, kind: 'water' });
  }

  function unwater(id, scope) {
    var p = byId(id);
    if (!p || !p.alsoWatered) return;
    p.alsoWatered = false;
    hideToast();
    state.lastAction = null;
    render({ focus: scope + ' [data-act="also-water"][data-id="' + id + '"]' });
    announce('Watering removed for ' + p.name + '.');
  }

  function openPlant(id, btn) {
    state.selectedId = id;
    if (!isDesktop()) {
      state.sheetOpen = true;
      state.opener = selectorFor(btn);
      render({ focus: '#detail-title' });
    } else {
      render();
    }
    announce('Showing details for ' + byId(id).name + '.');
  }

  function closeSheet() {
    if (!state.sheetOpen) return;
    state.sheetOpen = false;
    render({ focus: state.opener, fallback: '#queue' });
  }

  function reset() {
    state.plants = makePlants();
    state.selectedId = state.plants.slice().sort(function (a, b) { return b.urgency - a.urgency; })[0].id;
    state.sheetOpen = false;
    state.lastAction = null;
    hideToast();
    render();
    announce('Today started over. Four plants are waiting.');
    el.queue.focus({ preventScroll: true });
    window.scrollTo(0, 0);
  }

  /* ------------------------------------------------------------------ *
   * Events
   * ------------------------------------------------------------------ */
  document.addEventListener('click', function (e) {
    var b = e.target.closest('[data-act]');
    if (!b) return;
    var act = b.getAttribute('data-act'), id = b.getAttribute('data-id'), scope = scopeOf(b);
    switch (act) {
      case 'open': openPlant(id, b); break;
      case 'close': closeSheet(); break;
      case 'done': markDone(id, scope); break;
      case 'snooze': snooze(id, scope); break;
      case 'restore': restore(id, scope); break;
      case 'also-water': alsoWater(id, scope); break;
      case 'unwater': unwater(id, scope); break;
      case 'reset': reset(); break;
      case 'toast-dismiss': hideToast(); break;
      case 'toast-undo':
        if (state.lastAction) {
          var la = state.lastAction;
          state.lastAction = null;
          hideToast();
          la.undo();
          state.pulse = la.id;
          var sel = la.kind === 'water'
            ? '#detail [data-act="also-water"][data-id="' + la.id + '"]'
            : (state.sheetOpen ? '#detail' : '#queue') + ' [data-act="done"][data-id="' + la.id + '"]';
          render({ focus: sel, fallback: '#queue [data-act="open"][data-id="' + la.id + '"]' });
          announce('Undone.');
        }
        break;
    }
  });

  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape' && state.sheetOpen) {
      e.preventDefault();
      closeSheet();
      return;
    }
    if (e.key === 'Tab' && state.sheetOpen && !isDesktop()) {
      var active = document.activeElement;
      if (!el.detail.contains(active)) return; // let the toast be reachable
      var f = Array.prototype.slice.call(el.detail.querySelectorAll('button:not([disabled])'));
      if (!f.length) return;
      var head = $('#detail-title');
      var first = f[0], last = f[f.length - 1];
      if (e.shiftKey && (active === first || active === head)) { e.preventDefault(); last.focus(); }
      else if (!e.shiftKey && active === last) { e.preventDefault(); first.focus(); }
    }
  });

  var onMQ = function () { syncMode(); render({ focus: null }); };
  if (desktopMQ.addEventListener) desktopMQ.addEventListener('change', onMQ);
  else if (desktopMQ.addListener) desktopMQ.addListener(onMQ);

  /* Go. */
  render({ focus: null });
})();

sonnet-5.5/13-frontend-playful/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="color-scheme" content="light">
  <meta name="theme-color" content="#f5eddc">
  <title>Moss · today's plant care</title>
  <meta name="description" content="Moss is a gentle household plant-care companion. Today's queue, plant histories and a weekly rhythm.">
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 26C2 14 10 6 17 7c8 1 13 9 10 19z' fill='%2337552b' stroke='%232a2620' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M16 25V13' stroke='%23f2c94c' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <a class="skip-link" href="#queue">Skip to today's care</a>

  <div class="app" id="app">

    <header class="masthead" id="masthead">
      <div class="brand">
        <svg class="brand-mark" viewBox="0 0 40 40" aria-hidden="true" focusable="false">
          <path d="M5 33C1 18 11 6 21 8c10 2 16 12 13 25z" fill="#37552b" stroke="#2a2620" stroke-width="2.6" stroke-linejoin="round"/>
          <path d="M20 31V16" stroke="#f2c94c" stroke-width="3" stroke-linecap="round"/>
          <path d="M20 23c-4-1-6-4-6-7 4 0 6 3 6 7zM20 20c3-1 5-3 5-6-3 0-5 2-5 6z" fill="#8fae5a" stroke="#2a2620" stroke-width="1.8" stroke-linejoin="round"/>
        </svg>
        <span class="brand-name">Moss</span>
      </div>
      <p class="datepill"><span class="datepill-dot" aria-hidden="true"></span><time datetime="2026-09-22">Tue · Sep 22</time></p>
    </header>

    <section class="status" id="status" aria-labelledby="headline">
      <div class="status-art" aria-hidden="true">
        <svg class="sprout" id="sprout" viewBox="0 0 120 130" focusable="false">
          <g class="sprout-shadow"><ellipse cx="60" cy="122" rx="50" ry="6" fill="#2a2620" opacity=".14"/></g>
          <g class="sprout-plant">
            <path class="stem" d="M60 80C60 64 57 50 61 34" fill="none" stroke="#2a2620" stroke-width="3.2" stroke-linecap="round"/>
            <circle class="bud" cx="61" cy="32" r="4.2" fill="#f2c94c" stroke="#2a2620" stroke-width="2.4"/>
            <g class="sleaf sleaf-1"><path d="M60 64C46 62 35 52 33 39c14 0 25 8 27 25z" fill="#8fae5a" stroke="#2a2620" stroke-width="2.6" stroke-linejoin="round"/><path d="M58 60C50 55 44 49 40 44" fill="none" stroke="#2a2620" stroke-width="1.6" stroke-linecap="round" opacity=".55"/></g>
            <g class="sleaf sleaf-2"><path d="M60 54c14-2 25-12 27-25-14 0-25 8-27 25z" fill="#a4c266" stroke="#2a2620" stroke-width="2.6" stroke-linejoin="round"/><path d="M62 50c8-5 14-11 18-16" fill="none" stroke="#2a2620" stroke-width="1.6" stroke-linecap="round" opacity=".55"/></g>
            <g class="sleaf sleaf-3"><path d="M61 42c-10-2-17-9-19-19 10 0 18 6 19 19z" fill="#8fae5a" stroke="#2a2620" stroke-width="2.6" stroke-linejoin="round"/></g>
            <g class="bloom">
              <g fill="#d9704c" stroke="#2a2620" stroke-width="2.2">
                <circle cx="61" cy="16" r="7.5"/><circle cx="72" cy="24" r="7.5"/><circle cx="68" cy="37" r="7.5"/><circle cx="54" cy="37" r="7.5"/><circle cx="50" cy="24" r="7.5"/>
              </g>
              <circle cx="61" cy="28" r="7" fill="#f2c94c" stroke="#2a2620" stroke-width="2.2"/>
            </g>
          </g>
          <path class="mound" d="M9 118C6 92 32 76 60 76c29 0 53 16 51 42z" fill="#57783a" stroke="#2a2620" stroke-width="2.8" stroke-linejoin="round"/>
          <g fill="#8fae5a" opacity=".9"><circle cx="28" cy="100" r="3.4"/><circle cx="36" cy="88" r="2.6"/><circle cx="90" cy="92" r="3.2"/><circle cx="100" cy="106" r="2.6"/><circle cx="78" cy="84" r="2.2"/><circle cx="22" cy="112" r="2.2"/></g>
          <g class="eyes" fill="#2a2620"><ellipse class="eye" cx="46" cy="100" rx="3.6" ry="4.2"/><ellipse class="eye" cx="74" cy="100" rx="3.6" ry="4.2"/></g>
        </svg>
      </div>
      <div class="status-copy">
        <p class="eyebrow">Today in the flat</p>
        <h1 class="headline" id="headline">Loading the windowsill&hellip;</h1>
        <p class="subline" id="subline"></p>
        <div class="pips" id="pips" aria-hidden="true"></div>
      </div>
    </section>

    <main class="queue" id="queue" tabindex="-1" aria-label="Today's care queue">
      <noscript><p class="noscript">Moss needs JavaScript to draw today's care queue. Nothing is sent anywhere; it all runs on this page.</p></noscript>
    </main>

    <section class="rhythm" id="rhythm" aria-labelledby="rhythm-title"></section>

    <footer class="foot" id="foot">
      <p>Demo day, Tuesday Sep 22. Nothing is saved or sent anywhere.</p>
      <button type="button" class="linkish" data-act="reset">Start today over</button>
    </footer>

    <aside class="detail" id="detail" aria-label="Plant details"></aside>
  </div>

  <div class="scrim" id="scrim" data-act="close" hidden></div>
  <div class="toast-region" id="toast-region" role="status" aria-live="polite" aria-atomic="false"></div>
  <p class="sr-only" id="sr-live" role="status" aria-live="polite"></p>

  <!-- Same data as PLANTS.json, inlined so the page works from file:// with zero network requests. -->
  <script type="application/json" id="plants-data">
{
  "plants": [
    {"id":"fern","name":"Frida","species":"Boston fern","location":"Bathroom","task":"Water","due":"2 days overdue","urgency":4,"light":"Low, indirect","history":["Sep 19 · Misted","Sep 16 · Watered","Sep 12 · New frond"]},
    {"id":"pothos","name":"Orbit","species":"Golden pothos","location":"Bookshelf","task":"Rotate","due":"Today","urgency":2,"light":"Medium, indirect","history":["Sep 20 · Watered","Sep 14 · Rotated","Sep 10 · Wiped leaves"]},
    {"id":"cactus","name":"Dot","species":"Bunny ears cactus","location":"South window","task":"Check soil","due":"Today","urgency":1,"light":"Bright, direct","history":["Sep 08 · Watered","Sep 01 · New pad noted","Aug 22 · Rotated"]},
    {"id":"calathea","name":"Drama","species":"Calathea orbifolia","location":"Bedroom","task":"Mist","due":"Tomorrow","urgency":0,"light":"Medium, filtered","history":["Sep 21 · Misted","Sep 18 · Watered","Sep 15 · Brown edge noted"]}
  ],
  "week": [1,3,2,4,2,1,3]
}
  </script>
  <script src="app.js"></script>
</body>
</html>

sonnet-5.5/13-frontend-playful/PLANTS.json

{
  "plants": [
    {"id":"fern","name":"Frida","species":"Boston fern","location":"Bathroom","task":"Water","due":"2 days overdue","urgency":4,"light":"Low, indirect","history":["Sep 19 · Misted","Sep 16 · Watered","Sep 12 · New frond"]},
    {"id":"pothos","name":"Orbit","species":"Golden pothos","location":"Bookshelf","task":"Rotate","due":"Today","urgency":2,"light":"Medium, indirect","history":["Sep 20 · Watered","Sep 14 · Rotated","Sep 10 · Wiped leaves"]},
    {"id":"cactus","name":"Dot","species":"Bunny ears cactus","location":"South window","task":"Check soil","due":"Today","urgency":1,"light":"Bright, direct","history":["Sep 08 · Watered","Sep 01 · New pad noted","Aug 22 · Rotated"]},
    {"id":"calathea","name":"Drama","species":"Calathea orbifolia","location":"Bedroom","task":"Mist","due":"Tomorrow","urgency":0,"light":"Medium, filtered","history":["Sep 21 · Misted","Sep 18 · Watered","Sep 15 · Brown edge noted"]}
  ],
  "week": [1,3,2,4,2,1,3]
}

sonnet-5.5/13-frontend-playful/styles.css

/* Moss. Warm paper, ink outlines, leaf-shaped corners, hard little shadows.
   Mobile first. Wider screens re-compose into a rail, a queue and a detail panel. */

:root {
  --paper: #f5eddc;
  --paper-2: #eadfc6;
  --paper-3: #fdf8ea;
  --ink: #2a2620;
  --ink-2: #5b5245;
  --moss: #37552b;
  --moss-2: #6b9448;
  --leaf: #8fae5a;
  --mint: #d3e2b4;
  --clay: #b4452a;
  --clay-2: #d9704c;
  --peach: #f4c9ab;
  --butter: #f2c94c;
  --butter-soft: #f9e6a6;
  --teal: #2a6f77;
  --teal-soft: #bfdcd8;
  --plum: #5b3a58;
  --plum-soft: #e2d0e0;
  --lilac: #d8c5d9;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", Nunito, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* The shape language: leaves (two big corners, two small) and soft blobs. */
  --r-leaf: 8px 26px 8px 26px;
  --r-panel: 26px 44px 30px 40px;
  --r-hero: 30px 66px 34px 60px;
  --blob-a: 58% 42% 52% 48% / 46% 54% 46% 54%;
  --blob-b: 44% 56% 38% 62% / 55% 40% 60% 45%;
  --blob-c: 62% 38% 46% 54% / 40% 58% 42% 60%;
  --blob-d: 40% 60% 60% 40% / 60% 44% 56% 40%;

  --line: 2.5px;
  --shadow: 5px 6px 0 var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .16  0 0 0 0 .14  0 0 0 0 .1  0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body.sheet-open { overflow: hidden; }

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
svg { display: block; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 12px; top: -80px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper-3);
  font-weight: 700;
  border-radius: var(--r-leaf);
}
.skip-link:focus { top: 12px; }

/* Focus: an ink ring with a butter halo, readable on cream, clay and moss alike. */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--butter);
}
.btn:focus-visible { box-shadow: 0 3px 0 var(--ink), 0 0 0 6px var(--butter); }
#queue:focus, #detail-title:focus, #alldone-title:focus { outline: none; box-shadow: none; }

/* ------------------------------------------------------------------ */
/* Layout                                                              */
/* ------------------------------------------------------------------ */
.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "status" "queue" "rhythm" "foot";
  gap: 22px;
  max-width: 600px;
  margin-inline: auto;
  padding: 16px 16px calc(48px + env(safe-area-inset-bottom));
}
.masthead { grid-area: head; }
.status { grid-area: status; }
.queue { grid-area: queue; }
.rhythm { grid-area: rhythm; }
.foot { grid-area: foot; }
.detail { grid-area: detail; }

/* ------------------------------------------------------------------ */
/* Masthead                                                            */
/* ------------------------------------------------------------------ */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-leaf);
}
.brand-mark { width: 40px; height: 40px; }
.brand-name {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.datepill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--butter-soft);
  border: 2px solid var(--ink);
  border-radius: 999px 999px 999px 8px;
}
.datepill-dot {
  width: 10px; height: 10px;
  background: var(--clay);
  border: 2px solid var(--ink);
  border-radius: var(--blob-b);
}

/* ------------------------------------------------------------------ */
/* Status: greeting, sprout, progress                                  */
/* ------------------------------------------------------------------ */
.status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  align-items: end;
  gap: 8px 14px;
}
.status-copy { min-width: 0; }
.status-art { grid-column: 2; grid-row: 1; }
.sprout { width: 92px; height: auto; overflow: visible; }

.eyebrow {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.headline {
  margin-top: 6px;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 7.4vw, 2.35rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.headline em {
  font-style: italic;
  color: var(--clay);
  text-decoration: underline wavy var(--butter);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  text-decoration-skip-ink: none;
}
.subline { margin-top: 10px; font-weight: 600; color: var(--ink-2); }
.pips { display: flex; gap: 6px; margin-top: 12px; min-height: 20px; }
.pip {
  width: 34px; height: 20px;
  background: var(--paper-3);
  border: 2px solid var(--ink);
  border-radius: 4px 14px 4px 14px;
}
.pip.is-done { background: var(--moss-2); }

.sprout .sleaf, .sprout .bloom { transform-box: fill-box; transform: scale(0); opacity: 0; }
.sprout .sleaf-1, .sprout .sleaf-3 { transform-origin: 100% 100%; }
.sprout .sleaf-2 { transform-origin: 0% 100%; }
.sprout .bloom { transform-origin: 50% 60%; }
.sprout.has-leaf-1 .sleaf-1, .sprout.has-leaf-2 .sleaf-2, .sprout.has-leaf-3 .sleaf-3 { transform: scale(1); opacity: 1; }
.sprout.is-bloom .bloom { transform: scale(1); opacity: 1; }
.sprout.is-bloom .bud { display: none; }
.sprout .sprout-plant { transform-origin: 60px 80px; }
.sprout.is-worried .sprout-plant { transform: rotate(-9deg); }
.sprout .eye { transform-box: fill-box; transform-origin: center; }

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
  background: var(--paper-3);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-leaf);
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn .ico { width: 1.3em; height: 1.3em; flex: none; }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.btn-primary { background: var(--moss); color: var(--paper-3); }
.btn-ghost { background: var(--paper-3); }
.btn-quiet {
  min-height: 44px;
  padding: 0 14px;
  font-size: 0.9375rem;
  background: transparent;
  border-width: 2px;
  box-shadow: none;
}
.btn-quiet:active { transform: translateY(2px); }
.btn-quiet:focus-visible { box-shadow: 0 0 0 6px var(--butter); }
.btn-toast { min-height: 44px; background: var(--butter); color: var(--ink); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5); }
.btn-toast:focus-visible { outline-color: var(--paper-3); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5), 0 0 0 6px var(--clay-2); }

.linkish {
  padding: 8px 4px;
  min-height: 44px;
  font-weight: 700;
  color: var(--ink);
  background: none;
  border: 0;
  text-decoration: underline wavy var(--clay-2);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  cursor: pointer;
}

@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
  .btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
  .btn-quiet:hover { background: var(--butter-soft); box-shadow: none; transform: none; }
  .btn-toast:hover { box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5); }
}

/* ------------------------------------------------------------------ */
/* Queue                                                               */
/* ------------------------------------------------------------------ */
.queue {
  display: grid;
  gap: 26px;
  align-content: start;
  container: queue / inline-size;
}
.q-section { display: grid; gap: 12px; }
.q-heading { display: flex; align-items: center; gap: 8px; }
.q-tag {
  padding: 4px 14px 5px;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  border-radius: 999px 999px 999px 6px;
  background: var(--butter);
}
.q-count {
  display: grid;
  place-items: center;
  min-width: 26px; height: 26px;
  padding: 0 6px;
  font-size: 0.8125rem;
  font-weight: 800;
  background: var(--paper-3);
  border: 2px solid var(--ink);
  border-radius: var(--blob-b);
}
.q-section--overdue .q-tag { background: var(--clay); color: var(--paper-3); }
.q-section--later .q-tag { background: transparent; border-style: dashed; }
.q-section--done .q-tag { background: var(--mint); }
.q-section--snoozed .q-tag { background: var(--plum-soft); }

.q-list { display: grid; gap: 12px; }

/* Portraits: every plant sits in its own blob. */
.portrait {
  --tint: var(--mint);
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  background: var(--tint);
  border: var(--line) solid var(--ink);
  border-radius: var(--blob-a);
  overflow: hidden;
}
.portrait .art { position: absolute; inset: 0; width: 100%; height: 100%; }
.tint-fern { --tint: var(--mint); border-radius: var(--blob-a); }
.tint-pothos { --tint: var(--butter-soft); border-radius: var(--blob-b); }
.tint-cactus { --tint: var(--peach); border-radius: var(--blob-c); }
.tint-calathea { --tint: var(--lilac); border-radius: var(--blob-d); }

/* Whole item is one big tap target through the name button. */
.q-item { position: relative; --q-r: 22px; }
.q-open {
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.q-open::after { content: ""; position: absolute; inset: 0; border-radius: var(--q-r); }
.q-open:focus-visible { outline: none; box-shadow: none; }
.q-open:focus-visible::after { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--butter); }
.q-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.q-actions .btn { flex: 1 1 auto; }
.q-actions .btn-primary { flex-grow: 1.5; }

.q-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.q-task { display: inline-flex; align-items: center; gap: 6px; }
.q-task .ico { width: 1.2em; height: 1.2em; }
.q-due {
  padding: 1px 10px 2px;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 0.875rem;
  background: var(--butter);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
}
.q-name { margin-top: 2px; font-family: var(--serif); font-size: 1.5rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; }
.q-meta { margin-top: 2px; font-size: 0.9375rem; color: var(--ink-2); }
.q-quip { margin-top: 8px; font-style: italic; }

/* Overdue: the loud one. A stitched terracotta patch. */
.q-hero {
  --q-r: var(--r-hero);
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 6px 16px;
  align-items: center;
  padding: 20px 18px 18px;
  color: var(--paper-3);
  background: var(--clay);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-hero);
  box-shadow: 6px 7px 0 var(--ink);
}
.q-hero::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px dashed rgba(253, 248, 234, 0.5);
  border-radius: 24px 58px 28px 52px;
  pointer-events: none;
}
.q-hero .q-name { font-size: 2rem; }
.q-hero .q-meta { color: rgba(253, 248, 234, 0.92); }
.q-hero .q-quip { color: var(--paper-3); }
.q-hero .q-actions { grid-column: 1 / -1; margin-top: 10px; }
.q-hero .btn-primary { background: var(--butter); color: var(--ink); flex-grow: 1.3; }
.q-hero .btn-ghost { background: var(--paper-3); }
.q-hero .btn { box-shadow: 0 3px 0 var(--ink); }
.q-hero .portrait { border-color: var(--ink); }

/* Due today: one shared paper panel, rows divided by a dashed line. */
.q-list--today {
  gap: 0;
  background: var(--paper-3);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow);
}
.q-row {
  --q-r: 0px;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 4px 14px;
  align-items: center;
  padding: 16px;
}
.q-row:first-child { --q-r: 26px 44px 0 0; }
.q-row:last-child { --q-r: 0 0 30px 40px; }
.q-row:only-child { --q-r: var(--r-panel); }
.q-row + .q-row { border-top: 2px dashed rgba(42, 38, 32, 0.35); }
.q-row .q-actions { grid-column: 1 / -1; margin-top: 8px; }
.q-row .q-kicker { color: var(--ink-2); }

/* Up next: quieter, outlined in dashes. */
.q-list--later { gap: 10px; }
.q-quiet {
  --q-r: 26px 40px 28px 36px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 4px 14px;
  align-items: center;
  padding: 14px;
  border: var(--line) dashed rgba(42, 38, 32, 0.5);
  border-radius: 26px 40px 28px 36px;
}
.q-quiet .q-kicker { color: var(--ink-2); }
.q-quiet .q-due { background: transparent; }
.q-quiet .q-name { font-size: 1.25rem; }
.q-quiet .q-actions { grid-column: 1 / -1; margin-top: 8px; }
.q-quiet .btn-primary { background: transparent; color: var(--moss); }

/* Tended / snoozed: compact receipts with a persistent undo. */
.q-list--compact { gap: 8px; }
.q-compact {
  --q-r: 20px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 10px 10px 12px;
  border: 2px solid var(--moss);
  border-radius: 20px 30px 20px 30px;
  background: rgba(211, 226, 180, 0.55);
}
.q-compact.is-snoozed { border-color: var(--plum); background: rgba(226, 208, 224, 0.55); }
.c-mark {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  color: var(--paper-3);
  background: var(--moss);
  border: 2px solid var(--ink);
  border-radius: var(--blob-b);
  flex: none;
}
.c-mark .ico { width: 18px; height: 18px; }
.is-snoozed .c-mark { background: var(--plum); }
.c-name { font-family: var(--serif); font-size: 1.125rem; font-weight: 700; line-height: 1.2; }
.c-note { font-size: 0.875rem; color: var(--ink-2); }
.q-compact .btn { position: relative; z-index: 1; }

@media (hover: hover) {
  .q-row:hover { background: rgba(242, 201, 76, 0.16); }
  .q-quiet:hover, .q-compact:hover { background-color: rgba(242, 201, 76, 0.16); }
  .q-hero:hover { background: #bd4e32; }
}

@container queue (min-width: 600px) {
  .q-row { grid-template-columns: 72px minmax(0, 1fr) auto; padding: 16px 18px; }
  .q-row .q-actions { grid-column: 3; grid-row: 1; margin-top: 0; align-self: center; }
  .q-row .q-actions .btn { flex: 0 0 auto; }
  .q-quiet { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .q-quiet .q-actions { grid-column: 3; grid-row: 1; margin-top: 0; }
  .q-quiet .q-actions .btn { flex: 0 0 auto; }
  .q-hero { grid-template-columns: 116px minmax(0, 1fr); padding: 24px 26px 22px; }
  .q-hero .q-name { font-size: 2.4rem; }
  .q-hero .q-actions .btn { flex: 1 1 0; }
.q-actions .btn-primary { flex-grow: 1.5; }
}

/* All-done. */
.alldone {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 18px 18px 22px;
  background: var(--mint);
  border: var(--line) solid var(--ink);
  border-radius: 34px 64px 34px 58px;
  box-shadow: 6px 7px 0 var(--ink);
  overflow: hidden;
}
.alldone-art { position: relative; height: 92px; margin: -2px -18px 8px; border-bottom: 2.5px solid var(--ink); background: var(--butter-soft); overflow: hidden; }
.alldone-art::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22px;
  background: var(--moss-2);
  border-top: 2.5px solid var(--ink);
}
.snail-art { position: absolute; bottom: 14px; left: 8%; width: 104px; height: auto; z-index: 1; }
.alldone h2 {
  margin-top: 4px;
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.alldone-lead { margin-top: 6px; font-weight: 600; }
.recap { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.recap li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 5px;
  font-weight: 800;
  background: var(--paper-3);
  border: 2px solid var(--ink);
  border-radius: 999px 999px 999px 8px;
}
.recap-what { font-weight: 600; color: var(--ink-2); }
.recap-dot { width: 10px; height: 10px; background: var(--moss-2); border: 2px solid var(--ink); border-radius: var(--blob-b); }
.recap-snoozed .recap-dot { background: var(--plum-soft); }
.alldone-next { margin-top: 12px; padding: 10px 14px; background: rgba(253, 248, 234, 0.7); border: 2px dashed var(--ink); border-radius: 18px 26px 18px 26px; }
.alldone-nudge { margin-top: 10px; font-size: 0.9375rem; color: var(--ink); }
.alldone-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.alldone .btn-quiet { background: var(--paper-3); }
.alldone .btn-quiet:hover { background: var(--butter-soft); }

/* ------------------------------------------------------------------ */
/* Weekly rhythm                                                       */
/* ------------------------------------------------------------------ */
.rhythm {
  padding: 18px 16px 16px;
  background: var(--paper-2);
  border: var(--line) solid var(--ink);
  border-radius: 40px 26px 44px 28px;
}
.rhythm-title { font-family: var(--serif); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.rc-list { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 14px; }
.rc { position: relative; display: grid; grid-template-rows: auto auto; gap: 8px; padding: 8px 2px 8px; border-radius: 16px 16px 20px 20px; }
.rc.is-today { background: var(--butter); border: 2px solid var(--ink); padding: 6px 0 6px; }
.rc .stack { display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 5px; height: 114px; }
.rc-label { text-align: center; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.04em; }
.rc.is-past .rc-label { color: var(--ink-2); }
.rc.is-today .rc-label { color: var(--ink); }
.peb {
  display: block;
  flex: none;
  width: var(--w, 80%);
  height: 17px;
  margin-inline: auto;
  border: 2px solid var(--ink);
  border-radius: 50% 46% 52% 48% / 62% 56% 44% 38%;
  transform: rotate(var(--rot, 0deg));
  background: var(--paper-3);
}
.peb--done { background: var(--moss-2); }
.peb--late { background: var(--clay); }
.peb--due { background: var(--paper-3); }
.peb--moved { background: transparent; border-style: dashed; }
.rhythm-cap { margin-top: 12px; font-weight: 600; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 0.8125rem; font-weight: 700; color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend .peb { width: 20px; height: 12px; margin: 0; transform: none; border-width: 2px; }

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; font-size: 0.875rem; color: var(--ink-2); }

/* ------------------------------------------------------------------ */
/* Detail: bottom sheet on mobile, side panel on desktop               */
/* ------------------------------------------------------------------ */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(42, 38, 32, 0.5); }

.detail {
  position: fixed;
  z-index: 50;
  left: 0; right: 0; bottom: 0;
  max-width: 640px;
  max-height: min(90vh, 780px);
  max-height: min(90dvh, 780px);
  margin-inline: auto;
  padding: 8px 18px calc(32px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper-3);
  border: var(--line) solid var(--ink);
  border-bottom: 0;
  border-radius: 36px 48px 0 0;
  box-shadow: 0 -6px 0 rgba(42, 38, 32, 0.14);
  transform: translateY(105%);
  visibility: hidden;
}
.detail.is-open { transform: none; visibility: visible; }
.grab { width: 48px; height: 6px; margin: 6px auto 14px; background: rgba(42, 38, 32, 0.3); border-radius: 99px; }

.d-head { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.d-title h2 { margin-top: 2px; font-family: var(--serif); font-size: 2.1rem; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; }
.d-species { margin-top: 2px; color: var(--ink-2); font-weight: 600; }
.d-close { align-self: start; width: 46px; min-height: 46px; padding: 0; border-radius: 50%; background: var(--paper-2); }
.d-close span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.d-next {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 14px;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: 26px 16px 28px 16px;
}
.d-next-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.d-due { padding: 1px 10px 2px; font-size: 0.875rem; letter-spacing: 0.02em; text-transform: none; background: var(--paper-3); border: 2px solid var(--ink); border-radius: 999px; }
.d-due.is-late { background: var(--clay); color: var(--paper-3); }
.d-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.d-actions .btn { flex: 1 1 auto; }
.d-actions .btn-primary { flex-grow: 1.5; }
.d-state { display: flex; align-items: center; gap: 12px; }
.d-state p { flex: 1; font-weight: 700; }
.d-inline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.d-inline-note { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--teal); }
.d-inline-note .ico { width: 1.2em; height: 1.2em; }
.d-inline .btn-quiet { background: var(--paper-3); }

.d-sec { margin-top: 22px; padding-top: 18px; border-top: 2px dashed rgba(42, 38, 32, 0.35); }
.d-sec h3 { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 1.375rem; font-weight: 700; line-height: 1.2; }
.d-ico { display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--ink); border-radius: var(--blob-c); }
.d-ico .ico { width: 18px; height: 18px; }
.d-ico--light { background: var(--butter); }
.d-ico--water { background: var(--teal); color: var(--paper-3); }
.d-ico--obs { background: var(--plum); color: var(--paper-3); }
.d-meter { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.sunpips { display: flex; align-items: flex-end; gap: 5px; }
.sunpip { display: block; background: transparent; border: 2px dashed rgba(42, 38, 32, 0.5); border-radius: 50%; }
.sunpip.s1 { width: 14px; height: 14px; }
.sunpip.s2 { width: 19px; height: 19px; }
.sunpip.s3 { width: 24px; height: 24px; }
.sunpip.s4 { width: 29px; height: 29px; }
.sunpip.is-on { background: var(--butter); border: 2px solid var(--ink); }
.d-big { font-size: 1.0625rem; font-weight: 600; }
.d-big strong { font-weight: 800; }
.d-small { margin-top: 2px; font-size: 0.9375rem; color: var(--ink-2); }
.d-sec h3 + .d-big { margin-top: 12px; }
.d-tip { margin-top: 10px; font-style: italic; color: var(--ink-2); }

.drips { display: grid; grid-template-columns: repeat(21, minmax(0, 1fr)); align-items: end; gap: 3px; height: 28px; margin-top: 12px; }
.dr { height: 7px; background: rgba(42, 38, 32, 0.16); border-radius: 50%; }
.dr--watered { height: 26px; background: var(--teal); border: 2px solid var(--ink); border-radius: 50% 50% 50% 50% / 68% 68% 32% 32%; }
.dr--misted { height: 13px; background: var(--teal-soft); border: 2px solid var(--teal); border-radius: 50%; }
.drips-scale { display: flex; justify-content: space-between; margin-top: 4px; font-size: 0.75rem; font-weight: 700; color: var(--ink-2); }

.hist { display: grid; gap: 6px; margin-top: 12px; }
.hist li {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 7px 12px 8px;
  background: var(--paper-2);
  border-left: 6px solid var(--butter);
  border-radius: 6px 18px 6px 18px;
}
.d-water .hist li { border-left-color: var(--teal); }
.d-obs .hist li { border-left-color: var(--plum); }
.hist li.is-fresh { background: var(--butter-soft); }
.hist-date { font-size: 0.875rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.hist-what { font-weight: 700; }
.hist-ago { font-size: 0.875rem; color: var(--ink-2); white-space: nowrap; }
.hist-empty { margin-top: 12px; padding: 10px 14px; color: var(--ink-2); border: 2px dashed rgba(42, 38, 32, 0.35); border-radius: 18px 8px 18px 8px; }

/* ------------------------------------------------------------------ */
/* Toast                                                               */
/* ------------------------------------------------------------------ */
.toast-region {
  position: fixed;
  z-index: 60;
  left: 0; right: 0;
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  padding: 0 14px;
  pointer-events: none;
}
.toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 520px);
  padding: 10px 10px 12px 18px;
  overflow: hidden;
  color: var(--paper-3);
  background: var(--ink);
  border: 2px solid var(--paper-3);
  border-radius: 16px 30px 16px 30px;
  box-shadow: 0 6px 0 rgba(42, 38, 32, 0.35);
  pointer-events: auto;
}
.toast-msg { flex: 1; font-weight: 700; line-height: 1.3; }
.toast-x { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--paper-3); background: none; border: 0; border-radius: 50%; cursor: pointer; }
.toast-x .ico { width: 18px; height: 18px; }
.toast-x:focus-visible { outline-color: var(--paper-3); box-shadow: 0 0 0 6px var(--clay-2); }
.toast-bar { position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; background: var(--butter); transform-origin: left; }

/* ------------------------------------------------------------------ */
/* Wider screens: two columns, then a three-part composition           */
/* ------------------------------------------------------------------ */
@media (min-width: 900px) {
  .app {
    max-width: 1140px;
    grid-template-columns: minmax(0, 1fr) 410px;
    grid-template-rows: auto auto auto auto auto 1fr;
    grid-template-areas:
      "head    detail"
      "status  detail"
      "queue   detail"
      "rhythm  detail"
      "foot    detail"
      ".       detail";
    column-gap: 36px;
    row-gap: 26px;
    padding: 28px 32px 56px;
    align-items: start;
  }
  .scrim { display: none; }
  .grab, .d-close { display: none; }
  .detail {
    position: sticky;
    top: 24px;
    left: auto; right: auto; bottom: auto;
    max-width: none;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    margin: 0;
    padding: 24px 24px 28px;
    border: var(--line) solid var(--ink);
    border-radius: 40px 60px 40px 56px;
    box-shadow: 7px 8px 0 var(--ink);
    transform: none;
    visibility: visible;
  }
  .d-head { grid-template-columns: 96px minmax(0, 1fr); }
  .status { grid-template-columns: minmax(0, 1fr) 120px; }
  .sprout { width: 120px; }
  .headline { font-size: clamp(2.2rem, 3.4vw, 2.9rem); }

  /* On desktop the selection is meaningful, so mark it. */
  .q-item.is-selected .portrait { box-shadow: 0 0 0 4px var(--butter), 0 0 0 6.5px var(--ink); }
  .q-item.is-selected .q-name .q-open { text-decoration: underline wavy var(--butter); text-decoration-thickness: 3px; text-underline-offset: 5px; }
  .q-hero.is-selected .q-name .q-open { text-decoration-color: var(--butter); }
  .q-row.is-selected { background: rgba(242, 201, 76, 0.2); }
  .q-quiet.is-selected, .q-compact.is-selected { background-color: rgba(242, 201, 76, 0.2); }
}

@media (min-width: 1240px) {
  .app {
    max-width: 1400px;
    grid-template-columns: 330px minmax(0, 1fr) 420px;
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas:
      "head   queue detail"
      "status queue detail"
      "rhythm queue detail"
      "foot   queue detail"
      ".      queue detail";
    column-gap: 44px;
    row-gap: 28px;
    padding: 36px 40px 64px;
  }
  .masthead { flex-wrap: wrap; }
  .status { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 22px 22px 24px; background: var(--butter-soft); border: var(--line) solid var(--ink); border-radius: 48px 28px 52px 30px; box-shadow: var(--shadow); }
  .status-art { grid-column: 1; grid-row: 1; justify-self: start; margin-bottom: -6px; }
  .sprout { width: 132px; }
  .headline { font-size: 2.3rem; }
  .rhythm { position: sticky; top: 24px; }
  .queue { padding-top: 6px; }
  .q-hero .q-name { font-size: 2.6rem; }
}

@media (min-width: 1500px) {
  .app { max-width: 1520px; grid-template-columns: 360px minmax(0, 1fr) 460px; }
}

/* ------------------------------------------------------------------ */
/* Motion: only when the person has not asked for less                 */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.2s ease; }
  .detail { transition: transform 0.34s cubic-bezier(0.2, 0.9, 0.3, 1), visibility 0s linear 0.34s; }
  .detail.is-open { transition-delay: 0s; }
  @media (min-width: 900px) { .detail { transition: none; } }
  .scrim { animation: fade-in 0.25s ease both; }

  .q-item.is-new { animation: settle 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
  .q-item { transition: background-color 0.2s ease; }
  .alldone.is-new { animation: settle 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
  .toast { animation: toast-in 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.25) both; }
  .toast-bar { animation-name: toast-bar; animation-timing-function: linear; animation-fill-mode: forwards; }

  .sprout .sleaf, .sprout .bloom { transition: transform 0.5s cubic-bezier(0.2, 1.2, 0.4, 1), opacity 0.3s ease; }
  .sprout .sprout-plant { transition: transform 0.6s cubic-bezier(0.2, 1, 0.4, 1); }
  .sprout .eye { animation: blink 5.5s infinite; }
  .sprout.is-bloom .bloom { animation: sway 3.2s ease-in-out 0.6s infinite alternate; }
  .snail-art { animation: crawl 46s linear -14s infinite; }
}

@keyframes settle { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.12); } }
@keyframes sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes crawl { from { left: -30%; } to { left: 105%; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .toast-bar { display: none; }
}

@media (forced-colors: active) {
  .btn, .q-hero, .q-list--today, .detail, .toast { border: 2px solid CanvasText; }
  .pip.is-done, .peb--done, .sunpip.is-on { background: Highlight; }
}

opus-5.5/13-frontend-playful/RESPONSE.md

opus-5.5/13-frontend-playful/TASK.md

opus-5.5/13-frontend-playful/app.js

/* Moss — a gentle household plant-care companion.
 * Plain JavaScript, no dependencies, no network. The plant data below mirrors
 * PLANTS.json verbatim; it is embedded so the page also works from file://
 * (where fetch() of a local file is blocked) and never makes a request. */
(() => {
  'use strict';

  // ---------------------------------------------------------------- data ---
  const SOURCE = {
    plants: [
      { id: 'fern', name: 'Frida', species: 'Boston fern', location: 'Bathroom', task: 'Water', due: '2 days overdue', urgency: 4, light: 'Low, indirect', history: ['Sep 19 · Misted', 'Sep 16 · Watered', 'Sep 12 · New frond'] },
      { id: 'pothos', name: 'Orbit', species: 'Golden pothos', location: 'Bookshelf', task: 'Rotate', due: 'Today', urgency: 2, light: 'Medium, indirect', history: ['Sep 20 · Watered', 'Sep 14 · Rotated', 'Sep 10 · Wiped leaves'] },
      { id: 'cactus', name: 'Dot', species: 'Bunny ears cactus', location: 'South window', task: 'Check soil', due: 'Today', urgency: 1, light: 'Bright, direct', history: ['Sep 08 · Watered', 'Sep 01 · New pad noted', 'Aug 22 · Rotated'] },
      { id: 'calathea', name: 'Drama', species: 'Calathea orbifolia', location: 'Bedroom', task: 'Mist', due: 'Tomorrow', urgency: 0, light: 'Medium, filtered', history: ['Sep 21 · Misted', 'Sep 18 · Watered', 'Sep 15 · Brown edge noted'] }
    ],
    week: [1, 3, 2, 4, 2, 1, 3]
  };

  // The history in the data runs up to Sep 21, so Moss's "today" is Tue Sep 22.
  const TODAY = new Date(2026, 8, 22);
  const DAY = 86400000;
  const STORE_KEY = 'moss.state.v1';
  const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  const WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  const WEEK = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
  const TODAY_INDEX = (TODAY.getDay() + 6) % 7; // Monday-first index
  const UNDO_MS = 8000;

  const TASKS = {
    'Water':      { done: 'Watered',      log: 'Watered',      noun: 'a drink',     past: 'watered',      icon: 'drop' },
    'Rotate':     { done: 'Rotated',      log: 'Rotated',      noun: 'a turn',      past: 'rotated',      icon: 'turn' },
    'Check soil': { done: 'Soil checked', log: 'Checked soil', noun: 'a soil check', past: 'soil-checked', icon: 'finger' },
    'Mist':       { done: 'Misted',       log: 'Misted',       noun: 'a misting',   past: 'misted',       icon: 'mist' }
  };

  const CARE = {
    fern: {
      waterEvery: 4,
      water: 'Keep the soil lightly damp, never soggy. Bathroom steam helps.',
      lightTip: 'Happy away from the window. Direct sun crisps the fronds.',
      quirk: 'Sulks loudly when dry, forgives quickly.'
    },
    pothos: {
      waterEvery: 7,
      water: 'Water when the top 3 cm of soil is dry, about weekly.',
      lightTip: 'Turn it a quarter each week so it doesn’t lean toward the lamp.',
      quirk: 'Will climb anything, including the bookshelf.'
    },
    cactus: {
      waterEvery: 18,
      water: 'Only when the pot is dry all the way down. Probably every 2–3 weeks.',
      lightTip: 'Loves the south window. The more sun, the rounder the pads.',
      quirk: 'Looks soft. Is not. Mind the tiny prickles.'
    },
    calathea: {
      waterEvery: 7,
      water: 'Evenly moist, with filtered or rain water. Tap water browns the edges.',
      lightTip: 'Bright but filtered. A sheer curtain is perfect.',
      quirk: 'Folds its leaves up at night and makes a small rustle about it.'
    }
  };

  // --------------------------------------------------------- utilities ---
  const $ = (sel, root = document) => root.querySelector(sel);
  const esc = (s) => String(s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
  const plural = (n, one, many = one + 's') => `${n} ${n === 1 ? one : many}`;
  const stamp = (d) => `${MONTHS[d.getMonth()]} ${String(d.getDate()).padStart(2, '0')}`;
  const addDays = (d, n) => new Date(d.getTime() + n * DAY);
  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
  const wide = window.matchMedia('(min-width: 1000px)');

  function parseDue(due) {
    const m = /(\d+)\s+days?\s+overdue/i.exec(due);
    if (m) return -Number(m[1]);
    if (/tomorrow/i.test(due)) return 1;
    return 0;
  }

  function dueLabel(offset) {
    if (offset < 0) return `${plural(-offset, 'day')} overdue`;
    if (offset === 0) return 'Today';
    if (offset === 1) return 'Tomorrow';
    return WEEKDAYS[addDays(TODAY, offset).getDay()];
  }

  function parseStamp(entry) {
    const m = /^([A-Z][a-z]{2})\s+(\d{1,2})/.exec(entry);
    if (!m) return null;
    const month = MONTHS.indexOf(m[1]);
    return month < 0 ? null : new Date(TODAY.getFullYear(), month, Number(m[2]));
  }

  function splitEntry(entry) {
    const i = entry.indexOf(' · ');
    return i < 0 ? { when: '', what: entry } : { when: entry.slice(0, i), what: entry.slice(i + 3) };
  }

  function lastWatered(p) {
    const entry = p.history.find((h) => /watered/i.test(splitEntry(h).what));
    if (!entry) return null;
    const date = parseStamp(entry);
    return date ? { date, ago: Math.round((TODAY - date) / DAY) } : null;
  }

  function lightLevel(light) {
    if (/bright/i.test(light)) return 3;
    if (/medium/i.test(light)) return 2;
    return 1;
  }

  // ------------------------------------------------------------- state ---
  function freshState() {
    return {
      plants: SOURCE.plants.map((p) => ({
        id: p.id, name: p.name, species: p.species, location: p.location,
        task: p.task, urgency: p.urgency, light: p.light,
        offset: parseDue(p.due), status: 'due', history: p.history.slice()
      })),
      selected: null
    };
  }

  function load() {
    try {
      const raw = localStorage.getItem(STORE_KEY);
      if (!raw) return freshState();
      const saved = JSON.parse(raw);
      if (!saved || !Array.isArray(saved.plants) || saved.plants.length !== SOURCE.plants.length) return freshState();
      return { plants: saved.plants, selected: saved.selected || null };
    } catch (e) {
      return freshState();
    }
  }

  function save() {
    try { localStorage.setItem(STORE_KEY, JSON.stringify(state)); } catch (e) { /* private mode: fine */ }
  }

  let state = load();
  let undo = null;       // { snapshot, timer, remaining, started }
  let sheetOpener = null;
  let pendingCelebrate = null; // id of a plant just finished, for a small flourish

  const byId = (id) => state.plants.find((p) => p.id === id);
  const sortQueue = (a, b) => (a.offset - b.offset) || (b.urgency - a.urgency);

  function groups() {
    const due = state.plants.filter((p) => p.status === 'due').sort(sortQueue);
    return {
      overdue: due.filter((p) => p.offset < 0),
      today: due.filter((p) => p.offset === 0),
      later: due.filter((p) => p.offset > 0),
      snoozed: state.plants.filter((p) => p.status === 'snoozed').sort(sortQueue),
      done: state.plants.filter((p) => p.status === 'done')
    };
  }

  // The order a keyboard user meets the actionable rows in.
  function actionableOrder() {
    const g = groups();
    return [...g.overdue, ...g.today, ...g.later].map((p) => p.id);
  }

  const dueNowTotal = () => SOURCE.plants.filter((p) => parseDue(p.due) <= 0).length;

  // -------------------------------------------------------------- art ---
  function face(mood) {
    switch (mood) {
      case 'worried':
        return `<g class="face face--worried">
          <path class="face__line" d="M36.5 82.5 L45 85 M63.5 82.5 L55 85"/>
          <circle class="face__eye" cx="42" cy="89" r="2.6"/><circle class="face__eye" cx="58" cy="89" r="2.6"/>
          <path class="face__line" d="M46 98 Q50 95 54 98"/></g>`;
      case 'happy':
        return `<g class="face face--happy">
          <path class="face__line" d="M38.5 90 Q42 85.5 45.5 90 M54.5 90 Q58 85.5 61.5 90"/>
          <path class="face__line" d="M45 95.5 Q50 100 55 95.5"/>
          <circle class="face__cheek" cx="36" cy="95" r="3"/><circle class="face__cheek" cx="64" cy="95" r="3"/></g>`;
      case 'sleepy':
        return `<g class="face face--sleepy">
          <path class="face__line" d="M38.5 89 Q42 92 45.5 89 M54.5 89 Q58 92 61.5 89"/>
          <path class="face__line" d="M48 97 H52"/>
          <path class="face__z" d="M70 50 h6 l-6 7 h6 M80 40 h4 l-4 5 h4"/></g>`;
      default:
        return `<g class="face face--ok">
          <circle class="face__eye blink" cx="42" cy="89" r="2.6"/><circle class="face__eye blink" cx="58" cy="89" r="2.6"/>
          <path class="face__line" d="M47 97 Q50 98.5 53 97"/></g>`;
    }
  }

  function fern() {
    const fronds = [[-64, 0.72], [-42, 0.9], [-20, 1], [0, 1.05], [20, 0.98], [42, 0.88], [64, 0.7]];
    return `<g class="sway">${fronds.map(([a, s]) => {
      const tip = 66 - 50 * s;
      return `<g transform="rotate(${a} 50 66)">
        <path class="frond" d="M50 66 Q45 ${66 - 26 * s} 50 ${tip}"/>
        <path class="vein-dark" d="M50 66 Q45 ${66 - 26 * s} 50 ${tip}"/></g>`;
    }).join('')}</g>`;
  }

  function heart(x, y, r, s, variegated) {
    return `<g transform="translate(${x} ${y}) rotate(${r}) scale(${s})">
      <path class="leaf" d="M0 0 C-8 -6 -10 -15 -4 -17 C-1.5 -18 0 -16 0 -14 C0 -16 1.5 -18 4 -17 C10 -15 8 -6 0 0Z"/>
      ${variegated ? '<path class="leaf-streak" d="M0 -2 Q-2 -8 -4 -13"/>' : ''}
      <path class="vein" d="M0 -1 V-13"/></g>`;
  }

  function pothos() {
    return `<g class="sway">
      <path class="vine" d="M33 67 Q18 78 20 106"/>
      <path class="vine" d="M67 67 Q86 76 82 100"/>
      <path class="vine" d="M50 66 Q46 44 52 26"/>
      ${heart(19, 104, 10, 0.8, true)}${heart(21, 86, -60, 0.85, false)}${heart(81, 99, -8, 0.75, false)}${heart(83, 80, 60, 0.85, true)}
      ${heart(50, 58, -150, 1.05, true)}${heart(56, 46, 140, 0.95, false)}${heart(47, 36, -160, 0.95, true)}${heart(53, 27, 175, 0.8, false)}
      ${heart(38, 64, -110, 0.9, false)}${heart(63, 63, 110, 0.9, true)}
    </g>`;
  }

  function cactus() {
    const dots = [[44, 40], [54, 36], [49, 50], [58, 48], [42, 55], [55, 58], [36, 22], [40, 16], [61, 22], [63, 29], [68, 44]];
    return `<g class="sway sway--stiff">
      <ellipse class="leaf" cx="50" cy="46" rx="16" ry="20.5"/>
      <ellipse class="leaf" cx="38" cy="22" rx="8" ry="11.5" transform="rotate(-22 38 22)"/>
      <ellipse class="leaf" cx="62" cy="25" rx="7.5" ry="10.5" transform="rotate(18 62 25)"/>
      <ellipse class="leaf leaf--new" cx="69" cy="45" rx="4.8" ry="6.5" transform="rotate(35 69 45)"/>
      ${dots.map(([x, y]) => `<circle class="glochid" cx="${x}" cy="${y}" r="1.3"/>`).join('')}
    </g>`;
  }

  function roundLeaf(x, y, r, s) {
    return `<g transform="translate(${x} ${y}) rotate(${r}) scale(${s})">
      <ellipse class="leaf" rx="15" ry="12.5"/>
      <path class="stripe" d="M-11 -6 Q0 -2.5 11 -6 M-11 6 Q0 2.5 11 6 M-7 -10 Q0 -7.5 7 -10 M-7 10 Q0 7.5 7 10"/>
      <path class="vein" d="M-14 0 H14"/></g>`;
  }

  function calathea() {
    return `<g class="sway">
      <path class="stem" d="M47 66 L30 40 M50 66 L50 22 M53 66 L70 38 M50 66 L76 58 M50 66 L24 58"/>
      ${roundLeaf(24, 56, 20, 0.62)}${roundLeaf(76, 56, -18, 0.6)}${roundLeaf(29, 36, -35, 0.9)}${roundLeaf(71, 34, 32, 0.88)}${roundLeaf(50, 19, 90, 0.85)}
    </g>`;
  }

  const PLANT_ART = { fern, pothos, cactus, calathea };

  function moodFor(p) {
    if (p.status === 'done') return 'happy';
    if (p.status === 'snoozed') return 'sleepy';
    if (p.offset < 0) return 'worried';
    return 'ok';
  }

  function art(p, extraClass = '') {
    const draw = PLANT_ART[p.id] || fern;
    return `<svg class="plant ${extraClass}" viewBox="0 0 100 112" focusable="false" aria-hidden="true">
      <ellipse class="plant__shadow" cx="50" cy="109" rx="24" ry="3"/>
      ${draw()}
      <g class="pot">
        <path class="pot__body" d="M27 73 H73 L67.5 104 Q66.5 109 61.5 109 H38.5 Q33.5 109 32.5 104 Z"/>
        <rect class="pot__rim" x="22" y="64" width="56" height="11" rx="4.5"/>
        ${face(moodFor(p))}
      </g>
    </svg>`;
  }

  const ICONS = {
    drop: '<path d="M12 3c3 4.2 6 7.6 6 11a6 6 0 0 1-12 0c0-3.4 3-6.8 6-11z"/>',
    turn: '<path d="M19 12a7 7 0 1 1-2.05-4.95M19 4v4h-4" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>',
    finger: '<path d="M4 17h16M8 17v-3m4 3v-6m4 6v-2" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/><circle cx="12" cy="6.5" r="2.5"/>',
    mist: '<circle cx="6" cy="8" r="1.8"/><circle cx="12" cy="5" r="1.8"/><circle cx="18" cy="8" r="1.8"/><circle cx="9" cy="13" r="1.8"/><circle cx="15" cy="13" r="1.8"/><circle cx="12" cy="19" r="1.8"/>',
    moon: '<path d="M19 14.5A7.5 7.5 0 0 1 9.5 5a7.5 7.5 0 1 0 9.5 9.5z"/>',
    sun: '<circle cx="12" cy="12" r="4.5"/><path d="M12 2.5v2.5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>',
    close: '<path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"/>',
    check: '<path d="M5 12.5l4.5 4.5L19 7.5" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>',
    pin: '<path d="M12 21s-6-5.6-6-10.5a6 6 0 0 1 12 0C18 15.4 12 21 12 21z"/><circle cx="12" cy="10.5" r="2.2" fill="var(--paper)"/>'
  };
  const icon = (name) => `<svg class="icon" viewBox="0 0 24 24" fill="currentColor" focusable="false" aria-hidden="true">${ICONS[name]}</svg>`;

  // ------------------------------------------------------ queue render ---
  const queueBody = $('#queue-body');
  let firstPaint = true;

  function actionButtons(p, where) {
    const t = TASKS[p.task];
    const snoozeTo = dueLabel(Math.max(p.offset, 0) + 1).toLowerCase();
    return `<div class="actions">
      <button type="button" class="btn btn--primary" data-action="done" data-id="${p.id}" data-where="${where}">
        ${icon(t.icon)}<span>${t.done}</span><span class="sr-only">, ${esc(p.name)}</span>
      </button>
      <button type="button" class="btn btn--quiet" data-action="snooze" data-id="${p.id}" data-where="${where}">
        ${icon('moon')}<span>Snooze</span><span class="sr-only">, ${esc(p.name)}, until ${snoozeTo}</span>
      </button>
    </div>`;
  }

  function openButton(p, extra = '') {
    const selected = wide.matches && state.selected === p.id;
    return `<button type="button" class="plant-link" data-action="open" data-id="${p.id}"
      ${wide.matches ? 'aria-controls="pane"' : 'aria-haspopup="dialog"'} ${selected ? 'aria-current="true"' : ''}>
      <span class="plant-link__name">${esc(p.name)}</span>${extra}<span class="sr-only">, open details</span></button>`;
  }

  function rowOverdue(p) {
    const t = TASKS[p.task];
    return `<li class="task task--overdue" data-id="${p.id}">
      <div class="task__art">${art(p, 'plant--wobble')}</div>
      <div class="task__body">
        <p class="sticker"><span>${esc(dueLabel(p.offset))}</span></p>
        <h4 class="task__name">${openButton(p)}</h4>
        <p class="task__what"><strong>${esc(p.task)}</strong> <span aria-hidden="true">·</span> ${esc(p.species)} <span class="muted">in the ${esc(p.location.toLowerCase())}</span></p>
        <p class="task__why">${esc(p.name)} has been waiting for ${t.noun}. ${esc(CARE[p.id].quirk)}</p>
        ${actionButtons(p, 'row')}
      </div>
    </li>`;
  }

  function rowToday(p) {
    return `<li class="task task--today" data-id="${p.id}">
      <div class="task__art">${art(p)}</div>
      <div class="task__body">
        <h4 class="task__name">${openButton(p)}</h4>
        <p class="task__what"><span class="chip chip--${p.id}">${esc(p.task)}</span> ${esc(p.species)} <span aria-hidden="true">·</span> <span class="muted">${esc(p.location)}</span></p>
        ${actionButtons(p, 'row')}
      </div>
    </li>`;
  }

  function rowLater(p) {
    const snoozed = p.status === 'snoozed';
    const when = dueLabel(p.offset);
    return `<li class="task task--later ${snoozed ? 'is-snoozed' : ''}" data-id="${p.id}">
      <div class="task__art">${art(p)}</div>
      <div class="task__body">
        <h4 class="task__name">${openButton(p)}</h4>
        <p class="task__what">${esc(p.task)} <span aria-hidden="true">·</span> ${snoozed ? `<span class="muted">snoozed until</span> ${esc(when.toLowerCase())}` : `<span class="muted">due</span> ${esc(when.toLowerCase())}`}</p>
      </div>
      ${snoozed
        ? `<button type="button" class="btn btn--quiet btn--small" data-action="wake" data-id="${p.id}" data-where="row">${icon('sun')}<span>Do today</span><span class="sr-only">, ${esc(p.name)}</span></button>`
        : `<button type="button" class="btn btn--quiet btn--small" data-action="done" data-id="${p.id}" data-where="row">${icon(TASKS[p.task].icon)}<span>${TASKS[p.task].done} early</span><span class="sr-only">, ${esc(p.name)}</span></button>`}
    </li>`;
  }

  function shelf(done) {
    if (!done.length) return '';
    return `<section class="group group--done" aria-labelledby="g-done">
      <h3 class="group__title" id="g-done">Done today <span class="count">${done.length}</span></h3>
      <ul class="shelf" role="list">
        ${done.map((p) => `<li class="shelf__item">
          <div class="shelf__art">${art(p, 'plant--pop')}</div>
          ${openButton(p, `<span class="shelf__what">${icon('check')}${esc(TASKS[p.task].done)}</span>`)}
        </li>`).join('')}
      </ul>
    </section>`;
  }

  function nextWaterLine() {
    // A useful forward look: the next watering Moss expects for each plant.
    const upcoming = state.plants.map((p) => {
      const lw = lastWatered(p);
      const next = lw ? addDays(lw.date, CARE[p.id].waterEvery) : TODAY;
      return { p, next: next < addDays(TODAY, 1) ? addDays(TODAY, 1) : next };
    }).sort((a, b) => a.next - b.next);
    return upcoming.slice(0, 3);
  }

  function allDone(g) {
    const doneNames = g.done.map((p) => `${TASKS[p.task].past} ${p.name}`);
    const sentence = doneNames.length
      ? `You ${doneNames.length > 1 ? doneNames.slice(0, -1).join(', ') + ' and ' + doneNames.slice(-1) : doneNames[0]}.`
      : 'Nothing was pressing today.';
    const next = [...g.later, ...g.snoozed].sort(sortQueue)[0];
    const waters = nextWaterLine();
    return `<section class="alldone" aria-labelledby="alldone-title">
      <div class="alldone__art" aria-hidden="true">
        <div class="mossball mossball--big is-happy"><span class="mossball__eye"></span><span class="mossball__eye"></span><span class="mossball__sprout"></span></div>
        <span class="confetti"><i></i><i></i><i></i><i></i><i></i><i></i></span>
      </div>
      <h3 class="alldone__title" id="alldone-title" tabindex="-1">Everyone’s looked after.</h3>
      <p class="alldone__lead">${esc(sentence)}${g.snoozed.length ? ` ${plural(g.snoozed.length, 'plant')} snoozed until tomorrow.` : ''} Nothing else needs you today.</p>
      <dl class="alldone__facts">
        <div><dt>Next up</dt><dd>${next ? `${esc(next.name)} wants ${esc(TASKS[next.task].noun)} ${esc(dueLabel(next.offset).toLowerCase())}` : 'Nothing scheduled. Enjoy it.'}</dd></div>
        <div><dt>Water forecast</dt><dd><ul role="list">${waters.map(({ p, next: d }) => `<li><span>${esc(p.name)}</span> <span class="muted">around ${WEEKDAYS[d.getDay()].slice(0, 3)} ${stamp(d)}</span></li>`).join('')}</ul></dd></div>
      </dl>
      <p class="alldone__nudge">Maybe open a window. Drama likes the fresh air, and so do you.</p>
      <button type="button" class="btn btn--quiet btn--small" data-action="reset">Start the day over <span class="muted">(demo)</span></button>
    </section>`;
  }

  function renderQueue() {
    const g = groups();
    const nowCount = g.overdue.length + g.today.length;
    const later = [...g.later, ...g.snoozed].sort(sortQueue);
    let html = '';

    if (nowCount === 0) {
      html += allDone(g);
    } else {
      if (g.overdue.length) {
        html += `<section class="group group--overdue" aria-labelledby="g-overdue">
          <h3 class="group__title" id="g-overdue">${icon('drop')}Needs you first <span class="count">${g.overdue.length}</span></h3>
          <ol class="list" role="list">${g.overdue.map(rowOverdue).join('')}</ol></section>`;
      }
      if (g.today.length) {
        html += `<section class="group group--today" aria-labelledby="g-today">
          <h3 class="group__title" id="g-today">Also today <span class="count">${g.today.length}</span></h3>
          <ol class="list list--today" role="list">${g.today.map(rowToday).join('')}</ol></section>`;
      }
    }
    if (later.length) {
      html += `<section class="group group--later" aria-labelledby="g-later">
        <h3 class="group__title" id="g-later">Coming up <span class="count">${later.length}</span></h3>
        <ol class="list list--later" role="list">${later.map(rowLater).join('')}</ol></section>`;
    }
    html += shelf(g.done);
    queueBody.innerHTML = html;
    if (firstPaint) {
      queueBody.classList.add('first-paint');
      window.setTimeout(() => queueBody.classList.remove('first-paint'), 900);
      firstPaint = false;
    }

    $('#queue-sub').textContent = nowCount === 0
      ? 'All caught up for today.'
      : `${plural(nowCount, 'thing')} to do, most urgent first.`;
  }

  // ---------------------------------------------------- hello / rhythm ---
  function renderHello() {
    const g = groups();
    const total = dueNowTotal();
    const handled = total - g.overdue.length - g.today.length;
    const hour = new Date().getHours();
    $('#greeting').textContent = hour < 12 ? 'Good morning.' : hour < 18 ? 'Good afternoon.' : 'Good evening.';
    $('#today-date').textContent = `${WEEKDAYS[TODAY.getDay()]}, ${MONTHS[TODAY.getMonth()]} ${TODAY.getDate()}`;

    let mood;
    const ball = $('#mossball');
    ball.classList.remove('is-happy', 'is-worried');
    if (g.overdue.length) {
      const p = g.overdue[0];
      mood = `${p.name} has been waiting ${plural(-p.offset, 'day')} for ${TASKS[p.task].noun}. Start there?`;
      ball.classList.add('is-worried');
    } else if (g.today.length) {
      mood = `${plural(g.today.length, 'small thing')} left. None of them are in a hurry.`;
    } else {
      mood = 'Everyone’s sorted. Go drink a glass of water yourself.';
      ball.classList.add('is-happy');
    }
    $('#mood').textContent = mood;

    const pct = Math.round((Math.max(0, Math.min(handled, total)) / total) * 100);
    $('#progress').innerHTML = `
      <div class="progress__track" aria-hidden="true"><span class="progress__fill" style="--p:${pct}%"></span>
        ${Array.from({ length: total }, (_, i) => `<i class="progress__seed ${i < handled ? 'is-on' : ''}"></i>`).join('')}</div>
      <p class="progress__label"><strong>${Math.min(handled, total)} of ${total}</strong> handled today${g.snoozed.length ? ` <span class="muted">(${g.snoozed.length} snoozed)</span>` : ''}</p>`;
  }

  function renderRhythm() {
    const week = SOURCE.week;
    const g = groups();
    const doneToday = g.done.length;
    const max = Math.max(4, ...week, week[TODAY_INDEX] + 0, doneToday);
    const busiest = week.indexOf(Math.max(...week));
    const days = week.map((n, i) => {
      const isToday = i === TODAY_INDEX;
      const count = isToday ? Math.max(n, doneToday) : n;
      const state = i < TODAY_INDEX ? 'past' : isToday ? 'today' : 'future';
      const leaves = Array.from({ length: count }, (_, k) => {
        const filled = state === 'past' || (isToday && k < doneToday);
        const fresh = isToday && pendingCelebrate && k === doneToday - 1 && !reduceMotion.matches;
        return `<i class="sprig ${filled ? 'is-filled' : ''} ${fresh ? 'is-new' : ''}"></i>`;
      }).join('');
      const sr = isToday
        ? `${WEEK[i]}, today: ${plural(count, 'care moment')}, ${doneToday} done`
        : `${WEEK[i]}: ${plural(n, 'care moment')}${state === 'past' ? ', done' : ''}`;
      return `<li class="day day--${state}">
        <span class="sr-only">${sr}</span>
        <span class="day__stack" aria-hidden="true" style="--max:${max};--n:${count}">${leaves}</span>
        <span class="day__label" aria-hidden="true">${WEEK[i].slice(0, 2)}</span>
      </li>`;
    }).join('');

    $('#rhythm').innerHTML = `
      <div class="rhythm__head">
        <h2 class="rhythm__title" id="rhythm-title">This week’s rhythm</h2>
        <p class="rhythm__sub">Care moments per day</p>
      </div>
      <ol class="rhythm__days" role="list">${days}</ol>
      <p class="rhythm__note">${WEEK[busiest]} is the busy one, with ${plural(week[busiest], 'thing')}. Weekends stay light.</p>`;
  }

  // ------------------------------------------------------------ detail ---
  const pane = $('#pane');
  const sheet = $('#sheet');
  const sheetBody = $('#sheet-body');

  function detailHTML(p, prefix) {
    const t = TASKS[p.task];
    const care = CARE[p.id];
    const level = lightLevel(p.light);
    const lw = lastWatered(p);
    const statusLine = p.status === 'done'
      ? `<span class="status status--done">${icon('check')}${esc(t.done)} today</span>`
      : p.status === 'snoozed'
        ? `<span class="status status--snoozed">${icon('moon')}Snoozed until ${esc(dueLabel(p.offset).toLowerCase())}</span>`
        : `<span class="status ${p.offset < 0 ? 'status--overdue' : ''}">${esc(p.task)} · ${esc(dueLabel(p.offset))}</span>`;

    return `
      <div class="detail" data-detail="${p.id}">
        <div class="detail__top">
          ${prefix === 'sheet' ? `<button type="button" class="icon-btn detail__close" data-action="close">${icon('close')}<span class="sr-only">Close ${esc(p.name)}'s details</span></button>` : ''}
          <div class="detail__art">${art(p)}</div>
          <div class="detail__id">
            <p class="detail__kicker">${esc(p.species)}</p>
            <h2 class="detail__name" id="${prefix}-name" tabindex="-1">${esc(p.name)}</h2>
            <p class="detail__where">${icon('pin')}${esc(p.location)}</p>
            ${statusLine}
          </div>
        </div>

        <p class="detail__quirk">“${esc(care.quirk)}”</p>

        ${p.status === 'due' ? `<div class="detail__task">${actionButtons(p, 'detail')}</div>` : ''}
        ${p.status === 'snoozed' ? `<div class="detail__task"><button type="button" class="btn btn--quiet" data-action="wake" data-id="${p.id}" data-where="detail">${icon('sun')}<span>Do it today instead</span></button></div>` : ''}

        <div class="facts">
          <section class="fact fact--light" aria-labelledby="${prefix}-light">
            <h3 class="fact__title" id="${prefix}-light">${icon('sun')}Light</h3>
            <p class="fact__value">${esc(p.light)}</p>
            <div class="meter" aria-hidden="true">${[1, 2, 3].map((n) => `<i class="${n <= level ? 'is-on' : ''}"></i>`).join('')}</div>
            <p class="fact__tip">${esc(care.lightTip)}</p>
          </section>
          <section class="fact fact--water" aria-labelledby="${prefix}-water">
            <h3 class="fact__title" id="${prefix}-water">${icon('drop')}Water</h3>
            <p class="fact__value">${lw ? (lw.ago === 0 ? 'Watered today' : `Last watered ${stamp(lw.date)}, ${plural(lw.ago, 'day')} ago`) : 'No watering logged yet'}</p>
            <p class="fact__tip">${esc(care.water)}</p>
            <button type="button" class="btn btn--water btn--small" data-action="water" data-id="${p.id}" data-where="detail" ${lw && lw.ago === 0 ? 'disabled' : ''}>
              ${icon('drop')}<span>${lw && lw.ago === 0 ? 'Watered today' : 'Log a watering'}</span></button>
          </section>
        </div>

        <section class="history" aria-labelledby="${prefix}-history">
          <h3 class="fact__title" id="${prefix}-history">Observations</h3>
          <ol class="timeline" role="list">
            ${p.history.map((h, i) => {
              const e = splitEntry(h);
              return `<li class="timeline__item ${i === 0 ? 'is-latest' : ''}"><span class="timeline__when">${esc(e.when)}</span><span class="timeline__what">${esc(e.what)}</span></li>`;
            }).join('')}
          </ol>
          <form class="note" data-form="note" data-id="${p.id}">
            <label class="note__label" for="${prefix}-note">Add an observation</label>
            <div class="note__row">
              <input class="note__input" id="${prefix}-note" name="note" type="text" maxlength="80" autocomplete="off" placeholder="e.g. new curl on the left">
              <button type="submit" class="btn btn--quiet btn--small">Add</button>
            </div>
          </form>
        </section>
      </div>`;
  }

  function currentSelection() {
    if (state.selected && byId(state.selected)) return state.selected;
    const order = actionableOrder();
    return order[0] || state.plants[0].id;
  }

  function renderPane() {
    if (!wide.matches) { pane.innerHTML = ''; return; }
    const p = byId(currentSelection());
    pane.innerHTML = `<div class="pane__card">${detailHTML(p, 'pane')}</div>`;
  }

  function renderSheet() {
    if (!sheet.open) return;
    const p = byId(currentSelection());
    sheetBody.innerHTML = detailHTML(p, 'sheet');
  }

  function openDetail(id, opener) {
    state.selected = id;
    save();
    if (wide.matches) {
      renderQueue();
      renderPane();
      const h = $('#pane-name');
      if (h) h.focus({ preventScroll: false });
    } else {
      sheetOpener = opener || null;
      sheetBody.innerHTML = detailHTML(byId(id), 'sheet');
      if (typeof sheet.showModal === 'function') sheet.showModal(); else sheet.setAttribute('open', '');
      placeLayers();
      const h = $('#sheet-name');
      if (h) h.focus();
    }
  }

  function closeSheet() {
    if (sheet.open) {
      if (typeof sheet.close === 'function') sheet.close(); else sheet.removeAttribute('open');
    }
  }

  sheet.addEventListener('close', () => {
    placeLayers();
    const id = state.selected;
    const target = (sheetOpener && document.contains(sheetOpener)) ? sheetOpener
      : $(`.plant-link[data-id="${id}"]`) || $('#queue-title');
    sheetOpener = null;
    if (target) target.focus();
  });

  // Click on the backdrop closes the sheet.
  sheet.addEventListener('click', (e) => {
    if (e.target === sheet) closeSheet();
  });

  // ---------------------------------------------------------- render all ---
  function render() {
    renderHello();
    renderRhythm();
    renderQueue();
    renderPane();
    renderSheet();
    flushCelebrate();
  }

  // ---------------------------------------------------- actions + undo ---
  const toast = $('#toast');
  const announcer = $('#announcer');

  function announce(msg) {
    announcer.textContent = '';
    // Re-set on the next frame so repeated messages are still read.
    window.requestAnimationFrame(() => { announcer.textContent = msg; });
  }

  function commit(mutate, message) {
    const snapshot = JSON.stringify(state.plants);
    mutate();
    save();
    showUndo(snapshot, message);
  }

  // A modal sheet makes the rest of the page inert, so the toast and the
  // live region travel into whichever layer is currently interactive.
  function placeLayers() {
    const host = sheet.open ? sheet : document.body;
    if (toast.parentElement !== host) host.appendChild(toast);
    if (announcer.parentElement !== host) host.appendChild(announcer);
  }

  function showUndo(snapshot, message) {
    clearUndo();
    placeLayers();
    undo = { snapshot, remaining: UNDO_MS, started: Date.now(), timer: null };
    $('#toast-msg').textContent = message;
    toast.hidden = false;
    // restart the timer bar animation
    toast.classList.remove('is-running');
    void toast.offsetWidth;
    toast.classList.add('is-running');
    toast.style.setProperty('--undo-ms', `${UNDO_MS}ms`);
    undo.timer = window.setTimeout(hideUndo, UNDO_MS);
    announce(`${message} Press U or use the Undo button to undo.`);
  }

  function pauseUndo() {
    if (!undo || !undo.timer) return;
    window.clearTimeout(undo.timer);
    undo.timer = null;
    undo.remaining -= Date.now() - undo.started;
    toast.classList.add('is-paused');
  }

  function resumeUndo() {
    if (!undo || undo.timer) return;
    undo.started = Date.now();
    undo.timer = window.setTimeout(hideUndo, Math.max(1500, undo.remaining));
    toast.classList.remove('is-paused');
  }

  function clearUndo() {
    if (undo && undo.timer) window.clearTimeout(undo.timer);
    undo = null;
  }

  function hideUndo() {
    const hadFocus = toast.contains(document.activeElement);
    clearUndo();
    toast.hidden = true;
    toast.classList.remove('is-running', 'is-paused');
    if (hadFocus) $('#queue-title').focus();
  }

  function doUndo() {
    if (!undo) return;
    const restored = JSON.parse(undo.snapshot);
    const hadFocus = toast.contains(document.activeElement);
    state.plants = restored;
    save();
    hideUndo();
    render();
    announce('Undone. Back as it was.');
    if (hadFocus || document.activeElement === document.body) {
      const first = actionableOrder()[0];
      const btn = first && $(`.queue [data-action="done"][data-id="${first}"]`);
      (btn || $('#queue-title')).focus();
    }
  }

  toast.addEventListener('mouseenter', pauseUndo);
  toast.addEventListener('mouseleave', () => { if (!toast.contains(document.activeElement)) resumeUndo(); });
  toast.addEventListener('focusin', pauseUndo);
  toast.addEventListener('focusout', (e) => { if (!toast.contains(e.relatedTarget)) resumeUndo(); });

  function logEntry(p, text) {
    p.history.unshift(`${stamp(TODAY)} · ${text}`);
  }

  // After a row leaves the "now" list, keep the keyboard user in place:
  // focus moves to whatever now sits where the finished row was.
  function focusAfterRowAction(prevOrder, id) {
    const idx = prevOrder.indexOf(id);
    const order = actionableOrder();
    const g = groups();
    if (g.overdue.length + g.today.length === 0) {
      const t = $('#alldone-title');
      if (t) { t.focus(); return; }
    }
    const nextId = order[Math.min(Math.max(idx, 0), order.length - 1)];
    const btn = nextId && ($(`.queue [data-action="done"][data-id="${nextId}"]`) || $(`.queue .plant-link[data-id="${nextId}"]`));
    (btn || $('#queue-title')).focus();
  }

  function focusAfterDetailAction() {
    const h = sheet.open ? $('#sheet-name') : $('#pane-name');
    if (h) h.focus();
  }

  function act(action, id, where, trigger) {
    const p = id ? byId(id) : null;
    const prevOrder = actionableOrder();
    switch (action) {
      case 'open':
        openDetail(id, trigger);
        return;
      case 'close':
        closeSheet();
        return;
      case 'undo':
        doUndo();
        return;
      case 'reset':
        clearUndo();
        toast.hidden = true;
        state = freshState();
        save();
        render();
        announce('Fresh start. Today’s care is back in the queue.');
        $('#queue-title').focus();
        return;
      case 'done': {
        const t = TASKS[p.task];
        commit(() => {
          p.status = 'done';
          logEntry(p, t.log);
          celebrate(p.id);
        }, `${p.name}: ${t.done.toLowerCase()}.`);
        break;
      }
      case 'snooze': {
        const to = Math.max(p.offset, 0) + 1;
        commit(() => {
          p.status = 'snoozed';
          p.offset = to;
        }, `${p.name} snoozed until ${dueLabel(to).toLowerCase()}.`);
        break;
      }
      case 'wake':
        commit(() => {
          p.status = 'due';
          p.offset = 0;
        }, `${p.name} is back on today’s list.`);
        break;
      case 'water': {
        commit(() => {
          logEntry(p, 'Watered');
          if (p.task === 'Water' && p.status !== 'done') p.status = 'done';
        }, `${p.name} watered.`);
        break;
      }
      default:
        return;
    }
    render();
    if (where === 'detail') focusAfterDetailAction();
    else focusAfterRowAction(prevOrder, id);
  }

  function addNote(form) {
    const id = form.dataset.id;
    const input = form.querySelector('input');
    const text = input.value.trim();
    if (!text) {
      input.setAttribute('aria-invalid', 'true');
      announce('Type a short note first.');
      input.focus();
      return;
    }
    const p = byId(id);
    commit(() => logEntry(p, text.charAt(0).toUpperCase() + text.slice(1)), `Noted for ${p.name}.`);
    render();
    const again = document.getElementById(`${sheet.open ? 'sheet' : 'pane'}-note`);
    if (again) again.focus();
  }

  // Little moment of delight: a sprout pops out of the finished plant.
  function celebrate(id) { pendingCelebrate = id; }
  function flushCelebrate() {
    if (!pendingCelebrate || reduceMotion.matches) { pendingCelebrate = null; return; }
    document.querySelectorAll(`.shelf__item .plant-link[data-id="${pendingCelebrate}"]`).forEach((el) => {
      el.closest('.shelf__item').classList.add('is-fresh');
    });
    const ball = $('#mossball');
    ball.classList.remove('is-bouncing');
    void ball.offsetWidth;
    ball.classList.add('is-bouncing');
    pendingCelebrate = null;
  }

  // ------------------------------------------------------------ events ---
  document.addEventListener('click', (e) => {
    const el = e.target.closest('[data-action]');
    if (!el || el.disabled) return;
    act(el.dataset.action, el.dataset.id, el.dataset.where, el);
  });

  document.addEventListener('submit', (e) => {
    const form = e.target.closest('[data-form="note"]');
    if (!form) return;
    e.preventDefault();
    addNote(form);
  });

  document.addEventListener('input', (e) => {
    if (e.target.matches('.note__input')) e.target.removeAttribute('aria-invalid');
  });

  document.addEventListener('keydown', (e) => {
    const typing = e.target.closest('input, textarea, select, [contenteditable="true"]');
    if (typing) return;
    const key = e.key.toLowerCase();
    if (undo && ((key === 'u' && !e.metaKey && !e.ctrlKey && !e.altKey) || (key === 'z' && (e.metaKey || e.ctrlKey) && !e.shiftKey))) {
      e.preventDefault();
      doUndo();
    }
  });

  function onWideChange() {
    if (wide.matches && sheet.open) {
      sheetOpener = null;
      closeSheet();
    }
    render();
  }
  if (wide.addEventListener) wide.addEventListener('change', onWideChange);
  else if (wide.addListener) wide.addListener(onWideChange);

  render();
})();

opus-5.5/13-frontend-playful/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="color-scheme" content="light dark">
  <meta name="description" content="Moss — a gentle household plant-care companion.">
  <title>Moss · Today</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <a class="skip-link" href="#queue-title">Skip to today's care</a>

  <div class="app" id="app">
    <!-- DOM order = phone reading order: greeting, queue, rhythm.
         On wide screens the grid puts greeting + rhythm in a left rail. -->
    <header class="hello" aria-labelledby="app-title">
      <div class="brand">
        <span class="brand__mark" aria-hidden="true">
          <svg viewBox="0 0 32 32" focusable="false"><path d="M16 29c0-9 0-14 7-20M16 29c0-7-3-11-9-14" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"/><path d="M23 9c-6-1-9 3-8 7 5 0 9-2 8-7zM7 15c5-2 8 1 8 5-4 1-8-1-8-5z" fill="currentColor"/></svg>
        </span>
        <h1 id="app-title" class="brand__name">Moss</h1>
      </div>

      <div class="hello__row">
        <div class="mossball" id="mossball" aria-hidden="true">
          <span class="mossball__eye"></span><span class="mossball__eye"></span>
          <span class="mossball__sprout"></span>
        </div>
        <div class="hello__text">
          <p class="hello__date" id="today-date">Tuesday, Sep 22</p>
          <p class="hello__greeting" id="greeting">Good morning.</p>
        </div>
      </div>

      <p class="hello__mood" id="mood"></p>

      <div class="progress" id="progress"></div>
    </header>

    <main class="queue" id="queue" aria-labelledby="queue-title">
      <div class="queue__head">
        <h2 id="queue-title" class="queue__title" tabindex="-1">Today's care</h2>
        <p class="queue__sub" id="queue-sub"></p>
      </div>
      <div id="queue-body"></div>
    </main>

    <section class="rhythm" id="rhythm" aria-labelledby="rhythm-title"></section>

    <p class="keys-hint">
      <span class="keys-hint__label">Keyboard:</span>
      <kbd>Tab</kbd> to move, <kbd>Enter</kbd> to act, <kbd>U</kbd> to undo, <kbd>Esc</kbd> to close.
    </p>

    <!-- Desktop only: persistent detail pane -->
    <aside class="pane" id="pane" aria-label="Plant details"></aside>
  </div>

  <!-- Mobile / narrow: detail opens as a bottom sheet -->
  <dialog class="sheet" id="sheet" aria-labelledby="sheet-name">
    <div class="sheet__grip" aria-hidden="true"></div>
    <div class="sheet__inner" id="sheet-body"></div>
  </dialog>

  <!-- Undo toast -->
  <div class="toast" id="toast" hidden>
    <p class="toast__msg" id="toast-msg"></p>
    <button type="button" class="toast__undo" data-action="undo">Undo <kbd aria-hidden="true">U</kbd></button>
    <span class="toast__timer" aria-hidden="true"><span></span></span>
  </div>

  <div class="sr-only" id="announcer" role="status" aria-live="polite" aria-atomic="true"></div>

  <noscript><p class="noscript">Moss needs JavaScript to show your plants.</p></noscript>

  <script src="app.js"></script>
</body>
</html>

opus-5.5/13-frontend-playful/PLANTS.json

{
  "plants": [
    {"id":"fern","name":"Frida","species":"Boston fern","location":"Bathroom","task":"Water","due":"2 days overdue","urgency":4,"light":"Low, indirect","history":["Sep 19 · Misted","Sep 16 · Watered","Sep 12 · New frond"]},
    {"id":"pothos","name":"Orbit","species":"Golden pothos","location":"Bookshelf","task":"Rotate","due":"Today","urgency":2,"light":"Medium, indirect","history":["Sep 20 · Watered","Sep 14 · Rotated","Sep 10 · Wiped leaves"]},
    {"id":"cactus","name":"Dot","species":"Bunny ears cactus","location":"South window","task":"Check soil","due":"Today","urgency":1,"light":"Bright, direct","history":["Sep 08 · Watered","Sep 01 · New pad noted","Aug 22 · Rotated"]},
    {"id":"calathea","name":"Drama","species":"Calathea orbifolia","location":"Bedroom","task":"Mist","due":"Tomorrow","urgency":0,"light":"Medium, filtered","history":["Sep 21 · Misted","Sep 18 · Watered","Sep 15 · Brown edge noted"]}
  ],
  "week": [1,3,2,4,2,1,3]
}

opus-5.5/13-frontend-playful/styles.css

/* Moss — warm, tactile, slightly odd.
   Paper, clay and moss. Soft blobs for living things, firm pills for controls. */

:root {
  --paper: #f5eddd;
  --paper-2: #ece1ca;
  --paper-3: #e2d3b4;
  --card: #fbf6ec;
  --ink: #2c241d;
  --ink-soft: #5c4f43;
  --line: #cdbb98;
  --moss: #4d6b3a;
  --moss-deep: #2f4724;
  --moss-soft: #c9d6a9;
  --clay: #c2603a;
  --clay-deep: #93401f;
  --clay-soft: #f0cdb6;
  --ochre: #e3a93d;
  --ochre-soft: #f5dfae;
  --plum: #6e3a61;
  --sky: #a9c3cc;
  --sky-deep: #2f5c6b;
  --focus: #6a1f8a;
  --focus-halo: rgba(106, 31, 138, 0.22);

  --leaf: #5f8a45;
  --leaf-dark: #3b5b2a;
  --leaf-light: #a9c47a;
  --stripe: #d7e3b8;
  --pot: #c86a43;
  --pot-rim: #d98159;
  --pot-ink: #3a2016;
  --cheek: #f19a86;
  --glochid: #f3e1a1;

  --shadow-soft: 0 1px 0 rgba(70, 48, 20, 0.08), 0 10px 24px -14px rgba(70, 48, 20, 0.35);
  --press: 0 4px 0 var(--moss-deep);

  --blob-a: 58% 42% 55% 45% / 46% 56% 44% 54%;
  --blob-b: 44% 56% 40% 60% / 58% 44% 56% 42%;
  --blob-c: 36px 36px 36px 12px;

  --font-body: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif;

  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1f1a15;
    --paper-2: #2a231c;
    --paper-3: #362d24;
    --card: #28211a;
    --ink: #f3e9d8;
    --ink-soft: #c9b9a2;
    --line: #4e4234;
    --moss: #9cbf7c;
    --moss-deep: #b7d596;
    --moss-soft: #34452a;
    --clay: #e08a63;
    --clay-deep: #f2a888;
    --clay-soft: #4a2a1d;
    --ochre: #e8b75a;
    --ochre-soft: #4b3a18;
    --plum: #d6a3cb;
    --sky-deep: #9fd0df;
    --focus: #e7b6ff;
    --focus-halo: rgba(231, 182, 255, 0.25);
    --leaf: #7aa35d;
    --leaf-dark: #4f7338;
    --stripe: #cfe0aa;
    --pot: #b8603c;
    --pot-rim: #cd7550;
    --shadow-soft: 0 1px 0 rgba(0, 0, 0, 0.3), 0 12px 26px -14px rgba(0, 0, 0, 0.7);
    --press: 0 4px 0 #1a2a12;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--paper);
  /* speckled paper */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(120, 90, 40, 0.06) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 80%, rgba(120, 90, 40, 0.05) 0 1px, transparent 1.5px);
  background-size: 23px 23px, 31px 31px;
}

h1, h2, h3, h4, p { margin: 0; }
button, input { font: inherit; color: inherit; }
kbd {
  font-family: var(--font-body);
  font-size: 0.78em;
  font-weight: 700;
  padding: 0.05em 0.45em;
  border-radius: 6px;
  border: 1.5px solid currentColor;
  border-bottom-width: 3px;
  opacity: 0.9;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.muted { color: var(--ink-soft); font-weight: 500; }

/* ---------- focus: loud, warm, never removed ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--focus-halo);
  border-radius: 12px;
}
[tabindex="-1"]:focus-visible { outline-offset: 6px; }

.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 50;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus { top: 12px; }

/* ================================================================ layout */
.app {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 16px 120px;
}
.pane { display: none; }


/* Tablet: greeting and rhythm share the top row, the queue gets full width. */
@media (min-width: 700px) and (max-width: 999.98px) {
  .app {
    max-width: 820px;
    padding: 28px 28px 120px;
    grid-template-columns: 1.1fr 1fr;
    grid-template-areas: "hello rhythm" "queue queue" "hint hint";
    align-items: start;
  }
  .hello { grid-area: hello; }
  .rhythm { grid-area: rhythm; align-self: stretch; }
  .queue { grid-area: queue; }
  .keys-hint { grid-area: hint; }
}

@media (min-width: 1000px) {
  .app {
    max-width: 1380px;
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(360px, 430px);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "hello  queue pane"
      "rhythm queue pane"
      "hint   queue pane";
    gap: 20px 32px;
    padding: 32px 32px 64px;
    align-items: start;
  }
  .hello { grid-area: hello; }
  .rhythm { grid-area: rhythm; }
  .keys-hint { grid-area: hint; }
  .queue { grid-area: queue; }
  .pane {
    grid-area: pane;
    display: block;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow: auto;
    border-radius: 36px;
    scrollbar-width: thin;
  }
  .queue { padding-top: 4px; }
}


/* ================================================================ greeting */

.hello {
  position: relative;
  padding: 20px 20px 18px;
  background: var(--card);
  border-radius: 34px 34px 34px 14px;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 14px;
}

.brand { display: flex; align-items: center; gap: 8px; color: var(--moss); }
.brand__mark { width: 28px; height: 28px; display: inline-grid; }
.brand__mark svg { width: 100%; height: 100%; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--moss-deep);
}

.hello__row { display: flex; align-items: center; gap: 14px; }
.hello__date {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clay-deep);
}
.hello__greeting {
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1.1;
  font-weight: 600;
}
.hello__mood {
  font-size: 1.02rem;
  color: var(--ink-soft);
  max-width: 34ch;
}

/* Moss, the mascot: a moss ball with opinions */
.mossball {
  --size: 64px;
  position: relative;
  flex: none;
  width: var(--size);
  height: var(--size);
  border-radius: var(--blob-a);
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.22) 0 14%, transparent 15%),
    radial-gradient(circle at 70% 40%, var(--leaf-light) 0 1.5px, transparent 2px) 0 0 / 11px 11px,
    radial-gradient(circle at 20% 70%, rgba(40, 60, 25, 0.35) 0 1.5px, transparent 2px) 0 0 / 13px 13px,
    var(--leaf);
  box-shadow: inset -6px -8px 0 rgba(0, 0, 0, 0.14), 0 6px 0 -2px rgba(60, 40, 10, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12%;
  padding-top: 6%;
  animation: breathe 5.5s ease-in-out infinite;
}
.mossball__eye {
  width: 15%;
  height: 20%;
  background: #1e140e;
  border-radius: 50%;
  box-shadow: inset 1.5px 1.5px 0 0 rgba(255, 255, 255, 0.55);
  animation: blink 6s infinite;
  transform-origin: center;
}
.mossball__sprout {
  position: absolute;
  top: -12%;
  left: 52%;
  width: 22%;
  height: 26%;
  border-radius: 0 100% 0 100%;
  background: var(--leaf-light);
  border: 2px solid var(--leaf-dark);
  transform: rotate(-12deg);
  transform-origin: bottom left;
}
.mossball.is-worried .mossball__eye { height: 12%; border-radius: 50% 50% 45% 45%; }
.mossball.is-worried .mossball__sprout { transform: rotate(28deg); }
.mossball.is-happy .mossball__eye {
  background: transparent;
  box-shadow: none;
  border: 3px solid #1e140e;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  height: 9%;
  width: 16%;
  animation: none;
}
.mossball.is-bouncing { animation: bounce 0.7s var(--ease-spring); }
.mossball--big { --size: 108px; }

@keyframes breathe { 0%, 100% { border-radius: var(--blob-a); } 50% { border-radius: var(--blob-b); } }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@keyframes bounce { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-10px) scale(1.06, 0.94); } 70% { transform: translateY(2px) scale(0.97, 1.03); } 100% { transform: none; } }

/* progress: seeds on a vine */
.progress { display: grid; gap: 6px; }
.progress__track {
  position: relative;
  height: 22px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: var(--paper-2);
  border-radius: 999px;
  overflow: hidden;
}
.progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p, 0%);
  background: var(--moss-soft);
  border-radius: 999px;
  transition: width 0.5s var(--ease-spring);
}
.progress__seed {
  position: relative;
  width: 12px; height: 12px;
  border-radius: 0 100% 0 100%;
  border: 2px solid var(--moss);
  background: var(--card);
  transition: background 0.3s, transform 0.4s var(--ease-spring);
}
.progress__seed.is-on { background: var(--moss); transform: scale(1.25); }
.progress__label { font-size: 0.92rem; }

/* ---------- weekly rhythm ---------- */
.rhythm {
  padding: 18px 18px 16px;
  background: var(--moss-deep);
  color: var(--paper);
  border-radius: 14px 34px 34px 34px;
  box-shadow: var(--shadow-soft);
}
@media (prefers-color-scheme: dark) {
  .rhythm { background: #243520; color: var(--ink); }
}
.rhythm__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rhythm__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }
.rhythm__sub { font-size: 0.82rem; opacity: 0.85; }
.rhythm__days {
  list-style: none;
  margin: 14px 0 10px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  align-items: end;
}
.day { display: grid; justify-items: center; gap: 6px; }
.day__stack {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  width: 100%;
  height: calc(var(--max, 4) * 14px + 8px);
}
/* the stem grows with the number of care moments */
.day__stack::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 1px);
  width: 2px;
  height: calc(var(--n, 0) * 14px + 6px);
  border-radius: 2px;
  background: rgba(245, 237, 221, 0.45);
}
.sprig {
  position: relative;
  width: 14px;
  height: 10px;
  border-radius: 0 100% 0 100%;
  border: 2px solid rgba(245, 237, 221, 0.7);
  transform: translateX(7px) rotate(-18deg);
  transform-origin: left center;
}
.sprig:nth-child(even) { border-radius: 100% 0 100% 0; transform: translateX(-7px) rotate(18deg); transform-origin: right center; }
.sprig.is-filled { background: var(--leaf-light); border-color: var(--leaf-light); }
.day--past .sprig { background: rgba(245, 237, 221, 0.4); border-color: transparent; }
.day--today .day__stack::before { background: var(--ochre); }
.day--today .sprig { border-color: var(--ochre); }
.day--today .sprig.is-filled { background: var(--ochre); }
.sprig.is-new { animation: sprig-in 0.5s var(--ease-spring) both; }
.day__label { font-size: 0.78rem; font-weight: 700; opacity: 0.8; }
.day--today .day__label {
  opacity: 1;
  background: var(--ochre);
  color: #2c241d;
  border-radius: 999px;
  padding: 0 7px;
}
.rhythm__note { font-size: 0.86rem; opacity: 0.9; }
@keyframes sprig-in { from { scale: 0.1; } 60% { scale: 1.3; } }

.keys-hint { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.9; }
.keys-hint__label { font-weight: 700; }
@media (hover: none) and (pointer: coarse) { .keys-hint { display: none; } }

/* ================================================================ queue */
.queue { display: grid; gap: 18px; align-content: start; }
.queue__head { display: grid; gap: 2px; }
.queue__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 2.5rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.queue__sub { color: var(--ink-soft); }
#queue-body { display: grid; gap: 26px; }

.group { display: grid; gap: 12px; }
.group__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.group--overdue .group__title { color: var(--clay-deep); }
.group__title .icon { width: 16px; height: 16px; }
.count {
  display: inline-grid;
  place-items: center;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  font-size: 0.78rem;
  letter-spacing: 0;
  border-radius: 999px;
  background: var(--paper-3);
  color: var(--ink);
}
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.task {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
}
.first-paint .task { animation: row-in 0.4s var(--ease-spring) both; }
.first-paint .task:nth-child(2) { animation-delay: 0.05s; }
.first-paint .task:nth-child(3) { animation-delay: 0.1s; }
@keyframes row-in { from { opacity: 0; transform: translateY(6px) scale(0.985); } }

.task__art .plant { display: block; }
.task__body { display: grid; gap: 6px; min-width: 0; }
.task__name { font-size: 1.3rem; line-height: 1.15; }
.task__what { font-size: 0.95rem; }
.task__why { font-size: 0.92rem; color: var(--ink-soft); max-width: 44ch; }

/* The plant name is the way into details */
.plant-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: inherit;
  line-height: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--line);
  text-underline-offset: 5px;
  border-radius: 6px;
}
.plant-link:hover { text-decoration-color: currentColor; }
.plant-link[aria-current="true"] { text-decoration-color: var(--clay); text-decoration-style: wavy; }

/* Overdue: the loud one. Clay blob, big plant, a sticker. */
.task--overdue {
  grid-template-columns: 1fr;
  padding: 18px 18px 20px;
  background: var(--clay-soft);
  border-radius: 40px 40px 40px 16px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.task--overdue::before {
  content: "";
  position: absolute;
  right: -40px; top: -50px;
  width: 190px; height: 190px;
  border-radius: var(--blob-b);
  background: var(--clay);
  opacity: 0.18;
}
.task--overdue .task__art { justify-self: center; width: 150px; margin-bottom: -6px; position: relative; }
.task--overdue .task__name { font-size: 1.9rem; }
.task--overdue .task__body { position: static; }
.sticker {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 88px; height: 88px;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.1;
  color: #3a2016;
  background: var(--ochre);
  border-radius: 50%;
  transform: rotate(9deg);
  box-shadow: 0 0 0 4px var(--clay-soft), 0 0 0 6px var(--ochre), 0 4px 10px -2px rgba(80, 40, 0, 0.35);
}
.sticker span { padding: 0 10px; }

@media (min-width: 520px) {
  .task--overdue { grid-template-columns: 170px 1fr; gap: 18px; padding: 22px 26px 24px 18px; }
  .task--overdue .task__art { width: 170px; margin: 0; }
  .sticker { position: static; justify-self: start; width: auto; height: auto; padding: 6px 12px; border-radius: 999px; transform: rotate(-3deg); }
  .sticker span { padding: 0; }
}

/* Today: warm paper cards with an asymmetric corner, plant peeking out */
.list--today { gap: 14px; }
@media (min-width: 700px) {
  .list--today { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
.task--today {
  grid-template-columns: 92px 1fr;
  padding: 14px 16px 16px 10px;
  background: var(--card);
  border-radius: var(--blob-c);
  box-shadow: var(--shadow-soft);
}
.task--today:nth-child(even) { border-radius: 36px 12px 36px 36px; }
.task--today .task__art { width: 92px; align-self: center; }
.task--today .actions { margin-top: 4px; }

.chip {
  display: inline-block;
  padding: 1px 10px;
  margin-right: 4px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--ochre-soft);
  color: var(--ink);
}
.chip--pothos { background: var(--moss-soft); }
.chip--cactus { background: var(--ochre-soft); }
.chip--calathea { background: #e5d5e4; }
@media (prefers-color-scheme: dark) { .chip--calathea { background: #47304a; } }

/* Coming up / snoozed: quiet dashed rows */
.task--later {
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  padding: 8px 12px 8px 8px;
  border: 2px dashed var(--line);
  border-radius: 999px 28px 28px 999px;
}
.task--later .task__art { width: 56px; }
.task--later .task__name { font-size: 1.1rem; }
.task--later .task__what { font-size: 0.9rem; }
@media (max-width: 419.98px) {
  .task--later { grid-template-columns: 56px 1fr; border-radius: 28px 28px 28px 999px; }
  .task--later > .btn { grid-column: 2; justify-self: start; margin-top: -6px; }
}
.task--later.is-snoozed { background: repeating-linear-gradient(-45deg, transparent 0 10px, var(--paper-2) 10px 12px); }

/* Done shelf */
.group--done { position: relative; }
.shelf {
  list-style: none;
  margin: 0;
  padding: 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 0;
  align-items: start;
}
.shelf__item { display: grid; justify-items: center; gap: 6px; width: 100px; text-align: center; }
@media (min-width: 420px) { .shelf__item { width: 112px; } }
.shelf__item .plant-link { font-size: 1rem; text-align: center; display: grid; justify-items: center; }
.shelf__what { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; color: var(--moss); }
.shelf__what .icon { width: 14px; height: 14px; }
.shelf__art { position: relative; width: 100%; display: grid; justify-items: center; padding-bottom: 10px; }
.shelf__art .plant { width: 72px; position: relative; z-index: 1; }
/* each pot sits on a length of plank; neighbours join into one shelf */
.shelf__art::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 12px;
  background: linear-gradient(#b98a55, #93683a);
  box-shadow: 0 5px 0 -1px rgba(80, 50, 20, 0.22);
}
.shelf__item:first-child .shelf__art::after { border-radius: 8px 0 0 8px; }
.shelf__item:last-child .shelf__art::after { border-radius: 0 8px 8px 0; }
.shelf__item:only-child .shelf__art::after { border-radius: 8px; }
.shelf__item.is-fresh .plant { animation: pop 0.6s var(--ease-spring); }
@keyframes pop { 0% { transform: translateY(8px) scale(0.8); } 60% { transform: translateY(-6px) scale(1.06); } 100% { transform: none; } }

/* ---------- all done ---------- */
.alldone {
  position: relative;
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 26px 22px 22px;
  background: var(--moss-soft);
  border-radius: 44px 44px 44px 18px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.alldone__art { position: relative; justify-self: center; padding: 8px 20px 0; }
.alldone__title {
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1.1;
  font-weight: 700;
  color: var(--moss-deep);
}
@media (prefers-color-scheme: dark) { .alldone__title { color: var(--ink); } }
.alldone__lead { font-size: 1.05rem; max-width: 48ch; }
.alldone__facts {
  margin: 4px 0;
  display: grid;
  gap: 10px;
  width: 100%;
}
@media (min-width: 560px) { .alldone__facts { grid-template-columns: 1fr 1fr; } }
.alldone__facts > div {
  padding: 12px 14px;
  background: var(--card);
  border-radius: 20px;
}
.alldone__facts dt {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.alldone__facts dd { margin: 4px 0 0; }
.alldone__facts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.alldone__nudge { font-style: italic; color: var(--ink-soft); }

.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 0 100% 0 100%;
  background: var(--leaf);
  animation: drift 2.6s ease-in-out infinite alternate;
}
.confetti i:nth-child(1) { left: 0; top: 20%; background: var(--ochre); }
.confetti i:nth-child(2) { right: 0; top: 10%; transform: rotate(90deg); animation-delay: -0.6s; }
.confetti i:nth-child(3) { left: 10%; bottom: 0; background: var(--clay); animation-delay: -1.1s; }
.confetti i:nth-child(4) { right: 6%; bottom: 10%; background: var(--ochre); animation-delay: -1.7s; }
.confetti i:nth-child(5) { left: 44%; top: -6px; background: var(--clay); animation-delay: -0.3s; width: 8px; height: 8px; }
.confetti i:nth-child(6) { right: 30%; top: 0; animation-delay: -2s; width: 9px; height: 9px; }
@keyframes drift { from { translate: 0 0; rotate: 0deg; } to { translate: 0 -8px; rotate: 30deg; } }

/* ================================================================ buttons */
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

.btn {
  --btn-bg: var(--card);
  --btn-fg: var(--ink);
  --btn-edge: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  border: 2px solid var(--btn-edge);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 800;
  font-size: 0.98rem;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--btn-edge);
  transform: translateY(0);
  transition: transform 0.12s, box-shadow 0.12s, background-color 0.15s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.btn .icon { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--btn-edge); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--btn-edge); }
.btn:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }

.btn--primary { --btn-bg: var(--moss-deep); --btn-fg: #fbf6ec; --btn-edge: #1d2d16; }
@media (prefers-color-scheme: dark) {
  .btn--primary { --btn-bg: var(--moss); --btn-fg: #16210f; --btn-edge: #0e160a; }
}
.btn--quiet { --btn-bg: transparent; --btn-edge: var(--ink); box-shadow: 0 3px 0 var(--btn-edge); }
.task--overdue .btn--primary { --btn-bg: var(--clay-deep); --btn-edge: #4d1d0a; }
@media (prefers-color-scheme: dark) {
  .task--overdue .btn--primary { --btn-bg: var(--clay); --btn-fg: #2a1208; --btn-edge: #1a0a03; }
}
.btn--water { --btn-bg: var(--sky); --btn-fg: #16323b; --btn-edge: #16323b; }
.btn--small { min-height: 40px; padding: 0 14px; font-size: 0.9rem; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--card);
  cursor: pointer;
}
.icon-btn .icon { width: 18px; height: 18px; }

/* ================================================================ plant svg */
.plant { width: 100%; height: auto; overflow: visible; }
.plant__shadow { fill: rgba(60, 40, 10, 0.14); }
.plant .leaf { fill: var(--leaf); }
.plant .leaf--new { fill: var(--leaf-light); }
.plant .frond { fill: none; stroke: var(--leaf); stroke-width: 11; stroke-dasharray: 2.4 1.5; stroke-linecap: round; }
.plant .vein-dark { fill: none; stroke: var(--leaf-dark); stroke-width: 1.6; stroke-linecap: round; }
.plant .vein { fill: none; stroke: var(--leaf-dark); stroke-width: 1; opacity: 0.7; }
.plant .leaf-streak { fill: none; stroke: var(--glochid); stroke-width: 2.4; stroke-linecap: round; }
.plant .vine, .plant .stem { fill: none; stroke: var(--leaf-dark); stroke-width: 2; stroke-linecap: round; }
.plant .stripe { fill: none; stroke: var(--stripe); stroke-width: 1.4; stroke-linecap: round; }
.plant .glochid { fill: var(--glochid); }
.plant .pot__body { fill: var(--pot); }
.plant .pot__rim { fill: var(--pot-rim); }
.plant .face__eye { fill: var(--pot-ink); }
.plant .face__line, .plant .face__z { fill: none; stroke: var(--pot-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.plant .face__z { stroke: var(--ink-soft); stroke-width: 1.8; }
.plant .face__cheek { fill: var(--cheek); opacity: 0.8; }
.plant .blink { transform-box: fill-box; transform-origin: center; animation: blink 7s infinite; }
.plant .face__eye:nth-of-type(2) { animation-delay: 0.04s; }
.plant .sway { transform-box: view-box; transform-origin: 50% 60%; }
.plant--wobble .sway { animation: droop 3.2s ease-in-out infinite; }
.task:hover .sway, .shelf__item:hover .sway { animation: sway 1.6s ease-in-out; }
.plant .sway--stiff { animation-duration: 0.6s; }
@keyframes droop { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg) translateY(1px); } }
@keyframes sway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(3deg); } 65% { transform: rotate(-2deg); } }

/* ================================================================ detail */
.pane__card {
  padding: 22px 22px 26px;
  background: var(--card);
  border-radius: 36px;
  box-shadow: var(--shadow-soft);
}

.detail { display: grid; gap: 18px; }
.detail__top {
  position: relative;
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 16px;
  align-items: end;
  padding: 14px 14px 16px;
  background: var(--paper-2);
  border-radius: 30px 30px 30px 10px;
}
.detail__close { position: absolute; top: 10px; right: 10px; }
.detail__art { width: 112px; }
.detail__id { display: grid; gap: 4px; padding-bottom: 4px; }
.detail__kicker { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clay-deep); padding-right: 48px; }
.detail__name { font-family: var(--font-display); font-size: 2.1rem; line-height: 1; font-weight: 700; }
.detail__where { display: inline-flex; align-items: center; gap: 4px; font-size: 0.92rem; color: var(--ink-soft); }
.detail__where .icon { width: 15px; height: 15px; }
.detail__quirk { font-family: var(--font-display); font-style: italic; font-size: 1.08rem; color: var(--ink-soft); padding: 0 6px; }
.detail__task .actions .btn { flex: 1 1 auto; }

.status {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--card);
}
.status .icon { width: 15px; height: 15px; }
.status--overdue { background: var(--clay-deep); color: #fbf6ec; }
@media (prefers-color-scheme: dark) { .status--overdue { color: #2a1208; background: var(--clay); } }
.status--done { background: var(--moss-soft); }
.status--snoozed { background: var(--paper-3); }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 380px) { .facts { grid-template-columns: 1fr; } }
.fact {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 14px;
  border-radius: 24px;
}
.fact--light { background: var(--ochre-soft); border-radius: 24px 24px 8px 24px; }
.fact--water { background: color-mix(in srgb, var(--sky) 45%, var(--card)); border-radius: 24px 24px 24px 8px; }
.fact__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.fact__title .icon { width: 16px; height: 16px; }
.fact__value { font-weight: 700; line-height: 1.3; }
.fact__tip { font-size: 0.88rem; color: var(--ink-soft); }
.fact .btn { justify-self: start; margin-top: 4px; }

.meter { display: flex; gap: 5px; }
.meter i {
  width: 22px; height: 10px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  opacity: 0.35;
}
.meter i.is-on { background: var(--ochre); border-color: var(--ink); opacity: 1; }

.history { display: grid; gap: 10px; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; }
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  padding: 7px 0 7px 22px;
}
.timeline__item::before {
  content: "";
  position: absolute;
  left: 3px; top: 13px;
  width: 11px; height: 11px;
  border-radius: 0 100% 0 100%;
  background: var(--card);
  border: 2px solid var(--moss);
  transform: rotate(-45deg);
}
.timeline__item::after {
  content: "";
  position: absolute;
  left: 9px; top: 28px; bottom: -8px;
  border-left: 2px dotted var(--line);
}
.timeline__item:last-child::after { display: none; }
.timeline__item.is-latest::before { background: var(--moss); }
.timeline__when { font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.note { display: grid; gap: 6px; margin-top: 4px; }
.note__label { font-size: 0.9rem; font-weight: 700; }
.note__row { display: flex; gap: 8px; }
.note__input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}
.note__input::placeholder { color: var(--ink-soft); opacity: 0.8; }
.note__input[aria-invalid="true"] { border-color: var(--clay-deep); }
.note__input:focus-visible { border-color: var(--focus); border-radius: 16px; }

/* ---------- mobile sheet ---------- */
.sheet {
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 34px 34px 0 0;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 -10px 40px -10px rgba(40, 25, 10, 0.4);
  overflow: auto;
  overscroll-behavior: contain;
}
.sheet[open] { animation: sheet-up 0.38s var(--ease-spring); }
.sheet::backdrop { background: rgba(44, 36, 29, 0.45); }
.sheet__grip { width: 48px; height: 5px; margin: 10px auto 0; border-radius: 999px; background: var(--line); }
.sheet__inner { padding: 12px 16px 28px; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }
@media (min-width: 700px) {
  .sheet { margin: auto; border-radius: 36px; max-height: 88vh; }
}

/* ================================================================ toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 40;
  transform: translateX(-50%);
  width: min(440px, calc(100% - 32px));
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 14px 20px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 28px 28px 28px 10px;
  box-shadow: 0 16px 30px -12px rgba(30, 20, 10, 0.55);
  animation: toast-in 0.35s var(--ease-spring);
  overflow: hidden;
}
.toast[hidden] { display: none; }
.toast__msg { font-weight: 700; }
.toast__undo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 2px solid var(--paper);
  background: transparent;
  color: var(--paper);
  font-weight: 800;
  cursor: pointer;
}
.toast__undo:hover { background: rgba(245, 237, 221, 0.12); }
.toast__undo:focus-visible { outline-color: var(--ochre); box-shadow: 0 0 0 7px rgba(227, 169, 61, 0.3); border-radius: 999px; }
.toast__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; }
.toast__timer span { display: block; height: 100%; background: var(--ochre); transform-origin: left; }
.toast.is-running .toast__timer span { animation: drain var(--undo-ms, 8000ms) linear forwards; }
.toast.is-paused .toast__timer span { animation-play-state: paused; }
@keyframes drain { to { transform: scaleX(0); } }
@keyframes toast-in { from { transform: translate(-50%, 20px); opacity: 0; } }

.noscript { padding: 24px; text-align: center; }

/* ================================================================ motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .mossball, .mossball__eye, .plant .blink, .plant--wobble .sway, .confetti i { animation: none !important; }
  /* keep the undo countdown legible without motion: a static full bar */
  .toast.is-running .toast__timer span { animation: none !important; opacity: 0.6; }
  .btn:hover, .btn:active { transform: none; }
}

@media (forced-colors: active) {
  .btn, .icon-btn, .toast__undo, .note__input { border: 2px solid ButtonText; }
  .task, .pane__card, .hello, .rhythm, .alldone { border: 1px solid CanvasText; }
  :focus-visible { outline: 3px solid Highlight; }
}

fable-5.1/13-frontend-playful/RESPONSE.md

fable-5.1/13-frontend-playful/TASK.md

fable-5.1/13-frontend-playful/app.js

/* Moss — a gentle plant-care companion.
   Plain JavaScript, no dependencies, no network. */
'use strict';

(function () {
  // ---------------------------------------------------------------------------
  // Data. This is a verbatim copy of PLANTS.json: the page is meant to open
  // straight from disk, and fetch() of a local file is blocked in most browsers.
  // ---------------------------------------------------------------------------
  const DATA = {
    plants: [
      { id: 'fern', name: 'Frida', species: 'Boston fern', location: 'Bathroom', task: 'Water', due: '2 days overdue', urgency: 4, light: 'Low, indirect', history: ['Sep 19 · Misted', 'Sep 16 · Watered', 'Sep 12 · New frond'] },
      { id: 'pothos', name: 'Orbit', species: 'Golden pothos', location: 'Bookshelf', task: 'Rotate', due: 'Today', urgency: 2, light: 'Medium, indirect', history: ['Sep 20 · Watered', 'Sep 14 · Rotated', 'Sep 10 · Wiped leaves'] },
      { id: 'cactus', name: 'Dot', species: 'Bunny ears cactus', location: 'South window', task: 'Check soil', due: 'Today', urgency: 1, light: 'Bright, direct', history: ['Sep 08 · Watered', 'Sep 01 · New pad noted', 'Aug 22 · Rotated'] },
      { id: 'calathea', name: 'Drama', species: 'Calathea orbifolia', location: 'Bedroom', task: 'Mist', due: 'Tomorrow', urgency: 0, light: 'Medium, filtered', history: ['Sep 21 · Misted', 'Sep 18 · Watered', 'Sep 15 · Brown edge noted'] }
    ],
    week: [1, 3, 2, 4, 2, 1, 3]
  };

  // Per-plant character. Not in the data file, but it is what makes them feel like housemates.
  const EXTRA = {
    fern:     { quirk: 'Wilts theatrically. Forgives instantly.',            cadence: 'Every 3–4 days · keep evenly moist',          lightLevel: 1, blob: 'a', tint: 'clay',  flourish: 'She is already perking up.' },
    pothos:   { quirk: 'Leans toward the window like it is eavesdropping.',  cadence: 'Every 7–10 days · let the top inch dry',      lightLevel: 2, blob: 'b', tint: 'sun',   flourish: 'Now facing a fresh wall.' },
    cactus:   { quirk: 'Wants nothing. Will accept a compliment.',           cadence: 'Every 3–4 weeks · bone dry in between',       lightLevel: 3, blob: 'c', tint: 'petal', flourish: 'Dot noticed, in her way.' },
    calathea: { quirk: 'Folds her leaves at night. Yes, on purpose.',        cadence: 'Every 5–7 days · filtered water, never soggy', lightLevel: 2, blob: 'd', tint: 'water', flourish: 'Drama, appeased for now.' }
  };

  const TASKS = {
    'Water':      { past: 'Watered', icon: 'drop' },
    'Rotate':     { past: 'Rotated', icon: 'rotate' },
    'Check soil': { past: 'Checked', icon: 'soil' },
    'Mist':       { past: 'Misted',  icon: 'mist' }
  };

  // ---------------------------------------------------------------------------
  // Inline SVG. Small icons are 16×16; plant portraits are 96×96.
  // ---------------------------------------------------------------------------
  const svg = (inner, vb = '0 0 16 16') =>
    `<svg viewBox="${vb}" aria-hidden="true" focusable="false">${inner}</svg>`;

  const ICONS = {
    drop:   svg('<path d="M8 1.5C8 1.5 3 7 3 10.2a5 5 0 0 0 10 0C13 7 8 1.5 8 1.5Z" fill="currentColor"/>'),
    rotate: svg('<path d="M13 8A5 5 0 1 1 8 3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M7.6.8 11.2 3 7.6 5.2Z" fill="currentColor"/>'),
    soil:   svg('<path d="M2 13.2h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M8 12.5V7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M8 7.2C8.2 4 6.2 2.4 3.2 2.4 3 5.6 5 7.6 8 7.2Z" fill="currentColor"/><path d="M8 9.4c0-2.4 1.6-3.6 4-3.6 0 2.5-1.6 3.8-4 3.6Z" fill="currentColor"/>'),
    mist:   svg('<g fill="currentColor"><circle cx="3.5" cy="5" r="1.7"/><circle cx="8.5" cy="3" r="1.7"/><circle cx="12.5" cy="7" r="1.7"/><circle cx="6" cy="10" r="1.7"/><circle cx="11" cy="12.5" r="1.7"/></g>'),
    leaf:   svg('<path d="M13.5 2.5C7 2.5 2.5 7 2.5 13.5 9 13.5 13.5 9 13.5 2.5Z" fill="currentColor"/><path d="M3.5 12.5 11 5" stroke="var(--paper)" stroke-width="1.4" stroke-linecap="round"/>'),
    note:   svg('<path d="M8 2v12M2 8h12M3.8 3.8l8.4 8.4M12.2 3.8l-8.4 8.4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>'),
    check:  svg('<path d="M3 8.6 6.4 12 13 4.6" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>'),
    sun:    svg('<circle cx="8" cy="8" r="3.2" fill="currentColor"/><g stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M8 1v2M8 13v2M1 8h2M13 8h2M3 3l1.4 1.4M11.6 11.6 13 13M3 13l1.4-1.4M11.6 4.4 13 3"/></g>'),
    moon:   svg('<path d="M13.5 10.2A6 6 0 0 1 5.8 2.5a6 6 0 1 0 7.7 7.7Z" fill="currentColor"/>'),
    back:   svg('<path d="M6.5 3.5 2.5 8l4 4.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M3 8h7.5a3 3 0 0 1 0 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>'),
    chev:   svg('<path d="M4 6.2 8 10l4-3.8" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>'),
    close:  svg('<path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/>')
  };

  const FROND = (d) =>
    `<path d="${d}" stroke="var(--moss)" stroke-width="9" stroke-dasharray="1.8 3.2" stroke-linecap="butt" fill="none"/>` +
    `<path d="${d}" stroke="var(--moss-deep)" stroke-width="1.8" stroke-linecap="round" fill="none"/>`;
  const HEART = 'M0-6C-6-12-14-4-8 3L0 10 8 3C14-4 6-12 0-6Z';
  const STRIPES = '<g fill="none" stroke="var(--moss-soft)" stroke-width="1.6" stroke-linecap="round"><path d="M-7-6Q0-9 7-6"/><path d="M-9 0Q0-3 9 0"/><path d="M-7 6Q0 3 7 6"/></g>';

  const PLANT_ART = {
    fern: svg(
      FROND('M48 62C46 46 34 34 14 30') + FROND('M48 62C50 44 62 32 82 30') +
      FROND('M48 62C44 44 36 24 24 10') + FROND('M48 62C52 44 60 24 72 10') +
      FROND('M48 62C48 44 48 26 48 6') +
      '<path d="M30 60h36l-4 28H34Z" fill="var(--clay)" stroke="var(--ink)" stroke-width="2" stroke-linejoin="round"/>' +
      '<rect x="26" y="54" width="44" height="9" rx="3" fill="var(--clay-deep)" stroke="var(--ink)" stroke-width="2"/>',
      '0 0 96 96'),
    pothos: svg(
      '<rect x="4" y="57" width="88" height="5" rx="2.5" fill="var(--ink)"/>' +
      '<path d="M32 30h32v22a6 6 0 0 1-6 6H38a6 6 0 0 1-6-6Z" fill="var(--sun)" stroke="var(--ink)" stroke-width="2"/>' +
      '<rect x="29" y="25" width="38" height="8" rx="3" fill="var(--sun-ink)" stroke="var(--ink)" stroke-width="2"/>' +
      '<g fill="none" stroke="var(--moss-deep)" stroke-width="2" stroke-linecap="round"><path d="M36 30C30 44 20 60 26 90"/><path d="M60 30C64 46 76 60 70 88"/><path d="M48 26c0-8-4-12-8-14"/></g>' +
      '<g fill="var(--moss)" stroke="var(--ink)" stroke-width="1.6" stroke-linejoin="round">' +
      `<path d="${HEART}" transform="translate(30 46) rotate(-24)"/>` +
      `<path d="${HEART}" transform="translate(24 70) rotate(14) scale(.9)"/>` +
      `<path d="${HEART}" transform="translate(67 50) rotate(26)"/>` +
      `<path d="${HEART}" transform="translate(72 74) rotate(-8) scale(.85)"/>` +
      `<path d="${HEART}" transform="translate(40 14) rotate(-34) scale(.7)"/>` +
      '</g>' +
      '<g fill="var(--sun-soft)"><ellipse cx="27" cy="46" rx="3.2" ry="2" transform="rotate(-24 27 46)"/><ellipse cx="69" cy="52" rx="3.2" ry="2" transform="rotate(26 69 52)"/><ellipse cx="22" cy="70" rx="2.4" ry="1.6"/></g>',
      '0 0 96 96'),
    cactus: svg(
      '<g fill="var(--moss)" stroke="var(--ink)" stroke-width="2">' +
      '<ellipse cx="33" cy="36" rx="9" ry="13" transform="rotate(-22 33 36)"/>' +
      '<ellipse cx="63" cy="36" rx="9" ry="13" transform="rotate(22 63 36)"/>' +
      '<ellipse cx="48" cy="52" rx="16" ry="19"/></g>' +
      '<g fill="var(--paper)"><circle cx="42" cy="44" r="1.7"/><circle cx="50" cy="41" r="1.7"/><circle cx="57" cy="48" r="1.7"/><circle cx="44" cy="54" r="1.7"/><circle cx="52" cy="57" r="1.7"/><circle cx="40" cy="63" r="1.7"/><circle cx="55" cy="65" r="1.7"/><circle cx="48" cy="48" r="1.7"/><circle cx="31" cy="30" r="1.5"/><circle cx="35" cy="39" r="1.5"/><circle cx="29" cy="42" r="1.5"/><circle cx="65" cy="30" r="1.5"/><circle cx="61" cy="39" r="1.5"/><circle cx="67" cy="42" r="1.5"/></g>' +
      '<g transform="translate(66 22)"><circle r="5.5" fill="var(--petal)" stroke="var(--ink)" stroke-width="1.6"/><circle r="2" fill="var(--sun)"/></g>' +
      '<path d="M28 66h40l-5 22H33Z" fill="var(--petal)" stroke="var(--ink)" stroke-width="2" stroke-linejoin="round"/>' +
      '<rect x="24" y="60" width="48" height="9" rx="4" fill="var(--petal-ink)" stroke="var(--ink)" stroke-width="2"/>',
      '0 0 96 96'),
    calathea: svg(
      '<g fill="none" stroke="var(--moss-deep)" stroke-width="2.2" stroke-linecap="round"><path d="M48 62C46 50 38 42 30 36"/><path d="M48 62C50 50 58 40 66 34"/><path d="M48 62C48 48 48 36 48 26"/></g>' +
      '<g stroke="var(--ink)" stroke-width="1.8">' +
      `<g transform="translate(48 22)"><ellipse rx="11" ry="14" fill="var(--moss)"/>${STRIPES}</g>` +
      `<g transform="translate(28 36) rotate(-22)"><ellipse rx="12" ry="15" fill="var(--moss)"/>${STRIPES}</g>` +
      `<g transform="translate(68 34) rotate(22)"><ellipse rx="12" ry="15" fill="var(--moss)"/>${STRIPES}<path d="M9 8Q12.4 1 11-7" fill="none" stroke="var(--clay)" stroke-width="2.2" stroke-linecap="round"/></g>` +
      '</g>' +
      '<rect x="34" y="60" width="28" height="30" rx="5" fill="var(--water)" stroke="var(--ink)" stroke-width="2"/>' +
      '<rect x="31" y="56" width="34" height="8" rx="3" fill="var(--water-ink)" stroke="var(--ink)" stroke-width="2"/>',
      '0 0 96 96')
  };

  // ---------------------------------------------------------------------------
  // State
  // ---------------------------------------------------------------------------
  const TOAST_MS = 6000;
  const mqDesktop = window.matchMedia('(min-width: 960px)');
  const mqReduced = window.matchMedia('(prefers-reduced-motion: reduce)');

  let state = {
    plants: DATA.plants.map((p) => ({ ...p, history: [...p.history], status: 'pending' })),
    selectedId: null,
    undo: null
  };

  const $ = (sel, root = document) => root.querySelector(sel);
  let panelEl = null; // the single detail panel; it moves between the sidebar and a row

  // ---------------------------------------------------------------------------
  // Small helpers
  // ---------------------------------------------------------------------------
  function el(tag, attrs = {}, ...children) {
    const node = document.createElement(tag);
    for (const [k, v] of Object.entries(attrs)) {
      if (v == null || v === false) continue;
      if (k === 'class') node.className = v;
      else if (k === 'html') node.innerHTML = v; // only ever app-authored SVG strings
      else if (k === 'dataset') Object.assign(node.dataset, v);
      else if (k.startsWith('on')) node.addEventListener(k.slice(2), v);
      else node.setAttribute(k, v === true ? '' : v);
    }
    for (const c of children.flat()) {
      if (c == null || c === false) continue;
      node.append(c.nodeType ? c : document.createTextNode(String(c)));
    }
    return node;
  }
  const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
  const icon = (name, cls = 'ico') => el('span', { class: cls, html: ICONS[name], 'aria-hidden': 'true' });

  const plantById = (id) => state.plants.find((p) => p.id === id);
  const byUrgency = (a, b) => b.urgency - a.urgency;

  function bucketOf(p) {
    const m = /(\d+)\s+days?\s+overdue/i.exec(p.due);
    if (m) return { key: 'overdue', daysAgo: Number(m[1]) };
    if (/today/i.test(p.due)) return { key: 'today', daysAgo: 0 };
    return { key: 'later', daysAgo: -1 };
  }
  const pendingIn = (key) => state.plants.filter((p) => p.status === 'pending' && bucketOf(p).key === key).sort(byUrgency);
  const upcoming = () => [
    ...state.plants.filter((p) => p.status === 'pending' && bucketOf(p).key === 'later').sort(byUrgency),
    ...state.plants.filter((p) => p.status === 'snoozed').sort(byUrgency)
  ];
  const doneToday = () => state.plants.filter((p) => p.status === 'done').sort(byUrgency);
  const queueOrder = () => [...pendingIn('overdue'), ...pendingIn('today'), ...upcoming(), ...doneToday()];
  const allDone = () => pendingIn('overdue').length === 0 && pendingIn('today').length === 0;

  function kindOf(entry) {
    const t = entry.toLowerCase();
    if (/watered|misted/.test(t)) return 'water';
    if (/rotated|wiped|checked/.test(t)) return 'care';
    return 'note';
  }
  const splitEntry = (entry) => {
    const i = entry.indexOf(' · ');
    return i === -1 ? { date: '', what: entry } : { date: entry.slice(0, i), what: entry.slice(i + 3) };
  };
  const lastWatered = (p) => {
    const hit = p.history.find((h) => /watered/i.test(h));
    return hit ? splitEntry(hit).date : 'not on record';
  };
  const NUM = ['No', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven'];
  const numberWord = (n) => NUM[n] || String(n);
  const joinNames = (list) => {
    const names = list.map((p) => p.name);
    if (names.length <= 1) return names.join('');
    return names.slice(0, -1).join(', ') + ' and ' + names[names.length - 1];
  };

  // ---------------------------------------------------------------------------
  // Header
  // ---------------------------------------------------------------------------
  function renderHeader() {
    const weekday = new Date().toLocaleDateString(undefined, { weekday: 'long' });
    const overdue = pendingIn('overdue');
    const today = pendingIn('today');
    const greeting = $('#greeting');
    const lede = $('#lede');

    if (overdue.length) {
      const p = overdue[0];
      greeting.textContent = `${weekday}. ${p.name} has been waiting.`;
      lede.textContent = `${p.name} the ${p.species.toLowerCase()} missed a ${p.task.toLowerCase()} ${bucketOf(p).daysAgo} days ago. Start there; the rest can hold on a minute.`;
    } else if (today.length) {
      greeting.textContent = `${weekday}. ${today.length === 1 ? 'One small thing' : numberWord(today.length) + ' small things'} today.`;
      lede.textContent = `Nothing is overdue. ${joinNames(today)} ${today.length === 1 ? 'needs' : 'need'} a moment each.`;
    } else {
      greeting.textContent = `${weekday}. Everyone is fine.`;
      lede.textContent = 'Nothing needs you until tomorrow. Go drink some water yourself.';
    }

    const stickers = $('#stickers');
    stickers.replaceChildren();
    const add = (n, label, tone) => {
      if (!n) return;
      stickers.append(el('li', { class: `sticker sticker--${tone}` }, el('strong', {}, String(n)), ' ', label));
    };
    add(overdue.length, 'overdue', 'clay');
    add(today.length, 'today', 'sun');
    add(pendingIn('later').length, 'tomorrow', 'paper');
    add(state.plants.filter((p) => p.status === 'snoozed').length, 'snoozed', 'paper');
    add(doneToday().length, 'done', 'moss');

    $('#mascot').classList.toggle('is-asleep', allDone());
  }

  // ---------------------------------------------------------------------------
  // Queue rows
  // ---------------------------------------------------------------------------
  function dueTag(p, tier) {
    const b = bucketOf(p);
    if (tier === 'done') return el('span', { class: 'tag tag--done' }, icon('check'), 'Done today');
    if (p.status === 'snoozed') return el('span', { class: 'tag tag--snoozed' }, icon('moon'), b.key === 'overdue' ? `Snoozed · was ${p.due.toLowerCase()}` : 'Snoozed · back tomorrow');
    if (b.key === 'overdue') return el('span', { class: 'tag tag--overdue' }, p.due);
    if (b.key === 'today') return el('span', { class: 'tag tag--today' }, 'Today');
    return el('span', { class: 'tag tag--later' }, p.due);
  }

  function buildRow(p, tier) {
    const task = TASKS[p.task];
    const x = EXTRA[p.id];
    const selected = state.selectedId === p.id;
    const li = el('li', { class: `row row--${tier}${selected ? ' is-selected' : ''}`, id: `row-${p.id}`, dataset: { id: p.id } });

    const open = el('button', {
      class: 'row__open', type: 'button', id: `open-${p.id}`,
      'aria-expanded': String(selected), 'aria-controls': 'detail',
      onclick: () => toggleDetail(p.id)
    },
      el('span', { class: `avatar avatar--${x.blob} tint-${x.tint}`, html: PLANT_ART[p.id], 'aria-hidden': 'true' }),
      el('span', { class: 'row__names' },
        el('span', { class: 'row__name' }, p.name, el('span', { class: 'chev', html: ICONS.chev, 'aria-hidden': 'true' })),
        el('span', { class: 'row__sub' }, `${p.species} · ${p.location}`)),
      el('span', { class: 'sr-only' }, ', details'));

    const tags = el('p', { class: 'row__tags' },
      el('span', { class: 'tag tag--task' }, icon(task.icon), p.task),
      dueTag(p, tier));

    const actions = el('div', { class: 'row__actions' });
    if (tier === 'overdue' || tier === 'today') {
      actions.append(
        el('button', { class: 'btn btn--primary', type: 'button', 'aria-label': `${task.past}: ${p.name}`, onclick: () => performAction('done', p.id) }, icon('check'), task.past),
        el('button', { class: 'btn', type: 'button', 'aria-label': `Snooze ${p.name} until tomorrow`, onclick: () => performAction('snooze', p.id) }, icon('moon'), 'Snooze'));
    } else if (tier === 'upcoming' && p.status === 'snoozed') {
      actions.append(el('button', { class: 'btn btn--quiet', type: 'button', 'aria-label': `Bring ${p.name} back to today`, onclick: () => performAction('unsnooze', p.id) }, icon('back'), 'Bring back'));
    } else if (tier === 'upcoming') {
      actions.append(el('button', { class: 'btn btn--quiet', type: 'button', 'aria-label': `Do it early: ${p.task.toLowerCase()} ${p.name} now`, onclick: () => performAction('done', p.id) }, icon(task.icon), 'Do it early'));
    }

    li.append(el('div', { class: 'row__head' }, open, tags), actions);
    return li;
  }

  function fillList(id, plants, tier) {
    const list = $(`#list-${id}`);
    const section = $(`#sec-${id}`);
    list.replaceChildren(...plants.map((p) => buildRow(p, tier)));
    section.hidden = plants.length === 0;
  }

  function renderLists() {
    fillList('overdue', pendingIn('overdue'), 'overdue');
    fillList('today', pendingIn('today'), 'today');
    fillList('upcoming', upcoming(), 'upcoming');
    fillList('done', doneToday(), 'done');
  }

  // ---------------------------------------------------------------------------
  // All-done state
  // ---------------------------------------------------------------------------
  function renderAllDone() {
    const box = $('#alldone');
    const done = allDone();
    box.hidden = !done;
    if (!done) return;

    const later = pendingIn('later');
    const snoozed = state.plants.filter((p) => p.status === 'snoozed');
    const tended = doneToday();

    const shelf = el('div', { class: 'shelf', 'aria-hidden': 'true' },
      ...state.plants.map((p) => el('span', { class: `shelf__plant${p.status === 'snoozed' ? ' is-resting' : ''}`, html: PLANT_ART[p.id] })));

    const next = el('dl', { class: 'next' });
    const addNext = (term, desc) => next.append(el('div', { class: 'next__item' }, el('dt', {}, term), el('dd', {}, desc)));
    if (later.length) addNext('Tomorrow', later.map((p) => `${p.name} · ${p.task.toLowerCase()}`).join(', '));
    if (snoozed.length) addNext('Snoozed', `${joinNames(snoozed)} ${snoozed.length === 1 ? 'comes' : 'come'} back tomorrow. Listed under Coming up if you change your mind.`);
    if (tended.length) addNext('Tended today', joinNames(tended));

    // A small idle suggestion: the plant whose leaves were wiped longest ago.
    const wipeAge = (p) => {
      const hit = p.history.find((h) => /wiped/i.test(h));
      return hit ? splitEntry(hit).date : null;
    };
    const wipedToday = state.plants.some((p) => p.history.some((h) => /^Today · Wiped/i.test(h)));
    const tipPlant = plantById('pothos');
    const tip = wipedToday
      ? el('p', { class: 'tip', id: 'tip' }, icon('leaf'), el('span', {}, 'Leaves wiped. There is genuinely nothing left to do. Sit down.'))
      : el('p', { class: 'tip', id: 'tip' }, icon('leaf'),
        el('span', {}, `Idle hands? ${tipPlant.name}'s leaves were last wiped on ${wipeAge(tipPlant) || 'a date lost to history'}. `,
          el('button', { class: 'linkbtn', type: 'button', onclick: () => performAction('wipe', tipPlant.id) }, 'Log a leaf wipe')));

    box.replaceChildren(
      shelf,
      el('h2', { class: 'alldone__title', id: 'alldone-title', tabindex: '-1' }, tended.length === state.plants.length ? 'Everyone, tended.' : 'All tended for today.'),
      el('p', { class: 'alldone__lede' }, tended.length ? `${numberWord(tended.length)} ${tended.length === 1 ? 'plant' : 'plants'} looked after. The house is quietly photosynthesising.` : 'Nothing on the list. The house is quietly photosynthesising.'),
      next,
      tip);
  }

  // ---------------------------------------------------------------------------
  // Detail panel. One panel; it lives in the sidebar on desktop and slides
  // inline under the selected row on narrow screens.
  // ---------------------------------------------------------------------------
  // Desktop always shows a plant in the sidebar; narrow screens start collapsed.
  function resolveSelection() {
    if (state.selectedId && !plantById(state.selectedId)) state.selectedId = null;
    if (mqDesktop.matches && !state.selectedId) state.selectedId = (queueOrder()[0] || {}).id || null;
  }

  function placePanel() {
    const panel = panelEl;
    const slot = $('#detail-slot');
    if (mqDesktop.matches) {
      slot.append(panel);
      panel.hidden = !state.selectedId;
      return;
    }
    const li = state.selectedId ? $(`#row-${state.selectedId}`) : null;
    if (li) { li.append(panel); panel.hidden = false; }
    else { slot.append(panel); panel.hidden = true; }
  }

  function lightMeter(level) {
    const m = el('span', { class: 'meter', 'aria-hidden': 'true' });
    for (let i = 1; i <= 3; i++) m.append(el('i', { class: i <= level ? 'is-on' : '' }));
    return m;
  }

  function logBlock(title, entries, empty) {
    const list = el('ol', { class: 'log' });
    if (!entries.length) list.append(el('li', { class: 'log__empty' }, empty));
    for (const h of entries) {
      const { date, what } = splitEntry(h);
      const kind = kindOf(h);
      list.append(el('li', { class: `log__item log__item--${kind}` },
        el('span', { class: 'log__date' }, date),
        el('span', { class: 'log__what' }, icon(kind === 'water' ? (/misted/i.test(what) ? 'mist' : 'drop') : kind === 'care' ? 'leaf' : 'note'), what)));
    }
    return el('section', { class: 'logblock' }, el('h3', { class: 'logblock__title' }, title), list);
  }

  function renderPanel() {
    const panel = panelEl;
    const p = state.selectedId && plantById(state.selectedId);
    if (!p) { panel.replaceChildren(); return; }
    const x = EXTRA[p.id];
    const b = bucketOf(p);
    const task = TASKS[p.task];

    let nextText, nextSub;
    if (p.status === 'done') { nextText = `${task.past} today`; nextSub = 'Nothing else until the next round.'; }
    else if (p.status === 'snoozed') { nextText = `${p.task} · resting`; nextSub = 'Snoozed. Back in the queue tomorrow.'; }
    else if (b.key === 'overdue') { nextText = `${p.task} · ${p.due.toLowerCase()}`; nextSub = 'Top of the queue.'; }
    else if (b.key === 'today') { nextText = `${p.task} · today`; nextSub = 'Whenever you pass by.'; }
    else { nextText = `${p.task} · ${p.due.toLowerCase()}`; nextSub = 'No rush.'; }

    const fact = (term, ico, main, sub, extra) => el('div', { class: 'fact' },
      el('dt', {}, icon(ico), term),
      el('dd', {}, el('span', { class: 'fact__main' }, main, extra), el('span', { class: 'fact__sub' }, sub)));

    const water = p.history.filter((h) => kindOf(h) !== 'note');
    const notes = p.history.filter((h) => kindOf(h) === 'note');

    const actions = el('div', { class: 'detail__actions' });
    actions.append(el('button', { class: 'btn btn--primary', type: 'button', id: 'detail-water', 'aria-label': `Log a drink for ${p.name}`, onclick: () => performAction('water', p.id) }, icon('drop'), 'Log a drink'));
    if (p.status === 'pending' && b.key !== 'later') {
      actions.append(el('button', { class: 'btn', type: 'button', id: 'detail-snooze', 'aria-label': `Snooze ${p.name} until tomorrow`, onclick: () => performAction('snooze', p.id) }, icon('moon'), 'Snooze'));
    } else if (p.status === 'snoozed') {
      actions.append(el('button', { class: 'btn', type: 'button', id: 'detail-unsnooze', 'aria-label': `Bring ${p.name} back to today`, onclick: () => performAction('unsnooze', p.id) }, icon('back'), 'Bring back'));
    }

    panel.replaceChildren(
      el('div', { class: 'detail__head' },
        el('span', { class: `avatar avatar--lg avatar--${x.blob} tint-${x.tint}`, html: PLANT_ART[p.id], 'aria-hidden': 'true' }),
        el('div', { class: 'detail__titles' },
          el('h2', { class: 'detail__name', id: 'detail-title' }, p.name),
          el('p', { class: 'detail__sub' }, `${p.species} · ${p.location}`),
          el('p', { class: 'detail__quirk' }, x.quirk)),
        el('button', { class: 'iconbtn detail__close', type: 'button', 'aria-label': `Close ${p.name}'s details`, html: ICONS.close, onclick: closeDetail })),
      el('dl', { class: 'facts' },
        fact('Light', 'sun', p.light, x.lightLevel === 3 ? 'Loves a sunny sill.' : x.lightLevel === 2 ? 'Bright room, no direct beam.' : 'Happy in the dim corners.', lightMeter(x.lightLevel)),
        fact('Water', 'drop', `Last drink ${lastWatered(p)}`, x.cadence),
        fact('Up next', task.icon, nextText, nextSub)),
      el('div', { class: 'detail__logs' },
        logBlock('Water & care', water, 'No care logged yet.'),
        logBlock('Observations', notes, 'Nothing noted yet. Look closely.')),
      actions);
  }

  function toggleDetail(id) {
    if (state.selectedId === id) {
      if (mqDesktop.matches) { panelEl.focus(); return; }
      state.selectedId = null;
      render();
      focusEl(`#open-${id}`);
      return;
    }
    state.selectedId = id;
    render();
    focusEl(`#open-${id}`);
  }

  function closeDetail() {
    const id = state.selectedId;
    if (mqDesktop.matches) { focusEl(`#open-${id}`); return; }
    state.selectedId = null;
    render();
    focusEl(`#open-${id}`);
  }

  // ---------------------------------------------------------------------------
  // Weekly rhythm: the last seven days, today at the right edge.
  // ---------------------------------------------------------------------------
  function renderRhythm() {
    const W = 320, colW = 46, baseY = 68, gapY = 12, rx = 6.6, ry = 4.6;
    const week = DATA.week;
    const todayIdx = week.length - 1;
    const now = new Date();
    const dayLabel = (i) => {
      const d = new Date(now);
      d.setDate(now.getDate() - (todayIdx - i));
      return d.toLocaleDateString(undefined, { weekday: 'short' });
    };

    // Which past days have a missed slot? Overdue plants tell us.
    const missed = new Map();
    for (const p of state.plants) {
      const b = bucketOf(p);
      if (b.key === 'overdue') {
        const idx = todayIdx - b.daysAgo;
        if (idx >= 0 && idx < todayIdx) missed.set(idx, (missed.get(idx) || 0) + 1);
      }
    }
    // Today's slots come from live state: today's tasks, then the catch-ups.
    const todaySlots = [
      ...state.plants.filter((p) => bucketOf(p).key === 'today').sort(byUrgency).map((p) => ({ plant: p, catchup: false })),
      ...state.plants.filter((p) => bucketOf(p).key === 'overdue').sort(byUrgency).map((p) => ({ plant: p, catchup: true }))
    ];

    let out = '';
    const descParts = [];
    let total = 0, missedTotal = 0;
    for (let i = 0; i < week.length; i++) {
      const cx = 22 + i * colW;
      const isToday = i === todayIdx;
      if (isToday) out += `<rect class="rhythm__today" x="${cx - 21}" y="10" width="42" height="86" rx="21"/>`;
      const dots = [];
      if (!isToday) {
        const n = week[i], m = missed.get(i) || 0;
        for (let k = 0; k < n; k++) dots.push(k < n - m ? 'done' : 'missed');
        total += n; missedTotal += m;
        descParts.push(`${dayLabel(i)}: ${n} ${n === 1 ? 'moment' : 'moments'}${m ? `, ${m} missed` : ''}`);
      } else {
        let doneN = 0;
        for (const s of todaySlots) {
          if (s.plant.status === 'done') { dots.push('done'); doneN++; }
          else if (s.plant.status === 'snoozed') dots.push('snoozed');
          else dots.push(s.catchup ? 'catchup' : 'todo');
        }
        total += todaySlots.length;
        descParts.push(`Today: ${doneN} of ${todaySlots.length} done`);
      }
      dots.forEach((kind, k) => {
        const cy = baseY - k * gapY;
        const rot = (k % 2 ? 9 : -9) + (i % 2 ? 3 : -3);
        out += `<ellipse class="dot dot--${kind}" cx="${cx}" cy="${cy}" rx="${rx}" ry="${ry}" transform="rotate(${rot} ${cx} ${cy})"/>`;
      });
      out += `<text class="rhythm__label${isToday ? ' is-today' : ''}" x="${cx}" y="88" text-anchor="middle">${esc(isToday ? 'Today' : dayLabel(i))}</text>`;
    }

    const todayDone = todaySlots.filter((s) => s.plant.status === 'done').length;
    const summary = `${total} care moments this week · ${missedTotal ? `${missedTotal} missed · ` : ''}today ${todayDone} of ${todaySlots.length} done`;
    $('#rhythm-summary').textContent = summary;
    const svgEl = $('#rhythm-svg');
    svgEl.setAttribute('viewBox', `0 0 ${W} 100`);
    svgEl.innerHTML = `<title id="rhythm-title">Care moments over the last seven days</title><desc id="rhythm-desc">${esc(descParts.join('. '))}.</desc>${out}`;
  }

  // ---------------------------------------------------------------------------
  // Actions, undo, toast
  // ---------------------------------------------------------------------------
  function mutate(kind, p) {
    const task = TASKS[p.task];
    switch (kind) {
      case 'done':
        p.status = 'done';
        p.history.unshift(`Today · ${task.past}`);
        break;
      case 'snooze':
        p.status = 'snoozed';
        break;
      case 'unsnooze':
        p.status = 'pending';
        break;
      case 'water':
        p.history.unshift('Today · Watered');
        if (p.task === 'Water' && p.status !== 'done') p.status = 'done';
        break;
      case 'wipe':
        p.history.unshift('Today · Wiped leaves');
        break;
    }
  }

  function messageFor(kind, p) {
    const x = EXTRA[p.id];
    const b = bucketOf(p);
    switch (kind) {
      case 'done': return `${p.name} ${TASKS[p.task].past.toLowerCase()}. ${x.flourish}`;
      case 'snooze': return `${p.name} snoozed until tomorrow.${b.key === 'overdue' ? ` That will make it ${b.daysAgo + 1} days, just so you know.` : ''}`;
      case 'unsnooze': return `${p.name} is back in today's queue.`;
      case 'water': return `Logged a drink for ${p.name}.${p.task === 'Water' ? ` ${x.flourish}` : ''}`;
      case 'wipe': return `Leaf wipe logged for ${p.name}. Shiny.`;
    }
    return 'Done.';
  }

  function performAction(kind, id) {
    const p = plantById(id);
    if (!p) return;
    const snapshot = JSON.stringify({ plants: state.plants, selectedId: state.selectedId });
    const leaving = (kind === 'done' || kind === 'snooze') && p.status === 'pending';
    const wasFromPanel = !!document.activeElement && panelEl.contains(document.activeElement);

    // Work out where focus should land once the row is gone.
    const actionable = [...pendingIn('overdue'), ...pendingIn('today')];
    const idx = actionable.findIndex((q) => q.id === id);
    const neighbour = idx === -1 ? null : (actionable[idx + 1] || actionable[idx - 1] || null);

    const apply = () => {
      mutate(kind, p);
      state.undo = { snapshot, focusId: id, kind };

      if (leaving && state.selectedId === id) {
        state.selectedId = mqDesktop.matches ? null : null; // desktop re-picks the top of the queue in placePanel
      }
      render();

      if (kind === 'unsnooze') focusEl(`#open-${id}`);
      else if (wasFromPanel) focusEl('#detail-water');
      else if (kind === 'wipe') focusEl('#alldone-title');
      else if (leaving) {
        if (neighbour) focusEl(`#open-${neighbour.id}`);
        else focusEl('#alldone-title');
      }

      showToast(messageFor(kind, p));
      if (kind === 'done' || kind === 'water' || kind === 'wipe') hop();
    };

    if (leaving) leaveRow(id, kind, apply);
    else apply();
  }

  function leaveRow(id, kind, then) {
    const li = $(`#row-${id}`);
    if (!li || mqReduced.matches) { then(); return; }
    li.classList.add('is-leaving', kind === 'done' ? 'is-leaving--done' : 'is-leaving--snooze');
    li.querySelectorAll('button').forEach((b) => { b.disabled = true; });
    let fired = false;
    const finish = () => { if (fired) return; fired = true; then(); };
    li.addEventListener('animationend', (e) => { if (e.target === li) finish(); });
    setTimeout(finish, 520);
  }

  function undo() {
    if (!state.undo) return;
    const { snapshot, focusId, kind } = state.undo;
    const restored = JSON.parse(snapshot);
    state = { plants: restored.plants, selectedId: restored.selectedId, undo: null };
    hideToast(false);
    render();
    const p = plantById(focusId);
    if (kind === 'wipe') focusEl('#alldone-title');
    else focusEl(`#open-${focusId}`);
    announce(`Undone. ${p ? p.name + ' is back where it was.' : ''}`);
  }

  const toast = { root: null, msg: null, timer: null, remaining: 0, startedAt: 0 };

  function showToast(message) {
    toast.msg.textContent = message;
    toast.root.hidden = false;
    toast.root.classList.remove('is-open', 'is-paused');
    void toast.root.offsetWidth; // restart the drain animation
    toast.root.classList.add('is-open');
    clearTimeout(toast.timer);
    toast.remaining = TOAST_MS;
    startToastTimer();
    announce(`${message} Undo is available for a few seconds: press Control Z, or use the Undo button.`);
  }
  function startToastTimer() {
    toast.startedAt = performance.now();
    toast.timer = setTimeout(() => hideToast(true), toast.remaining);
  }
  function pauseToast() {
    if (!toast.timer) return;
    clearTimeout(toast.timer);
    toast.timer = null;
    toast.remaining = Math.max(800, toast.remaining - (performance.now() - toast.startedAt));
    toast.root.classList.add('is-paused');
  }
  function resumeToast() {
    if (toast.root.hidden || toast.timer) return;
    toast.root.classList.remove('is-paused');
    startToastTimer();
  }
  function hideToast(commit) {
    clearTimeout(toast.timer);
    toast.timer = null;
    const hadFocus = toast.root.contains(document.activeElement);
    toast.root.hidden = true;
    toast.root.classList.remove('is-open', 'is-paused');
    if (commit) state.undo = null;
    if (hadFocus) focusEl('#queue');
  }

  function announce(text) {
    const a = $('#announcer');
    a.textContent = '';
    setTimeout(() => { a.textContent = text; }, 40);
  }

  function focusEl(sel) {
    const node = $(sel);
    if (node) node.focus({ preventScroll: false });
  }

  function hop() {
    const m = $('#mascot');
    if (mqReduced.matches) return;
    m.classList.remove('is-hopping');
    void m.getBoundingClientRect();
    m.classList.add('is-hopping');
  }

  // ---------------------------------------------------------------------------
  // Render everything
  // ---------------------------------------------------------------------------
  function render() {
    // Park the panel in the sidebar first: rebuilding the lists would otherwise
    // destroy it along with the row it was sitting in.
    $('#detail-slot').append(panelEl);
    resolveSelection();
    renderHeader();
    renderLists();
    renderAllDone();
    placePanel();
    renderPanel();
    renderRhythm();
  }

  function init() {
    panelEl = $('#detail');
    toast.root = $('#toast');
    toast.msg = $('#toast-msg');
    toast.root.style.setProperty('--toast-ms', `${TOAST_MS}ms`);
    $('#toast-undo').addEventListener('click', undo);
    $('#toast-close').addEventListener('click', () => hideToast(true));
    toast.root.addEventListener('mouseenter', pauseToast);
    toast.root.addEventListener('mouseleave', () => { if (!toast.root.contains(document.activeElement)) resumeToast(); });
    toast.root.addEventListener('focusin', pauseToast);
    toast.root.addEventListener('focusout', (e) => { if (!toast.root.contains(e.relatedTarget)) resumeToast(); });

    $('#mascot').addEventListener('animationend', (e) => { if (e.animationName === 'hop') $('#mascot').classList.remove('is-hopping'); });

    document.addEventListener('keydown', (e) => {
      const key = e.key.toLowerCase();
      if ((e.ctrlKey || e.metaKey) && !e.shiftKey && key === 'z') {
        if (state.undo) { e.preventDefault(); undo(); }
        return;
      }
      if (e.key === 'Escape') {
        if (!toast.root.hidden) { hideToast(true); return; }
        if (!mqDesktop.matches && state.selectedId && panelEl.contains(document.activeElement)) closeDetail();
      }
    });

    let layoutIsDesktop = mqDesktop.matches;
    const onLayoutChange = () => {
      if (mqDesktop.matches === layoutIsDesktop) return;
      layoutIsDesktop = mqDesktop.matches;
      render();
    };
    if (mqDesktop.addEventListener) mqDesktop.addEventListener('change', onLayoutChange);
    else mqDesktop.addListener(onLayoutChange);

    render();
  }

  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
  else init();
})();

fable-5.1/13-frontend-playful/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light">
  <meta name="description" content="Moss is a gentle plant-care companion: today's care queue, plant details, and a weekly rhythm for the four plants in your house.">
  <title>Moss · Today's care</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <a class="skip-link" href="#queue">Skip to today's queue</a>

  <div class="app">
    <header class="top">
      <div class="top__brand">
        <svg class="mascot" id="mascot" viewBox="0 0 96 96" aria-hidden="true" focusable="false">
          <g class="mascot__body">
            <path d="M52 16c-1-8 4-13 11-14-1 7-5 11-11 14Z" fill="var(--moss-deep)" stroke="var(--ink)" stroke-width="1.6" stroke-linejoin="round"/>
            <path d="M49 17c-3-6-9-8-16-6 3 5 9 7 16 6Z" fill="var(--moss)" stroke="var(--ink)" stroke-width="1.6" stroke-linejoin="round"/>
            <path d="M48 15c20-1 35 13 36 32 1 20-14 36-35 36C29 83 12 68 12 48 12 29 27 16 48 15Z" fill="var(--moss)" stroke="var(--ink)" stroke-width="2.4"/>
            <g fill="var(--moss-deep)"><circle cx="25" cy="62" r="2.4"/><circle cx="72" cy="66" r="2.4"/><circle cx="68" cy="27" r="2"/><circle cx="20" cy="42" r="1.8"/></g>
            <g fill="var(--clay)" opacity=".6"><circle cx="30" cy="54" r="3.6"/><circle cx="66" cy="54" r="3.6"/></g>
            <g class="mascot__eyes">
              <ellipse cx="38" cy="46" rx="3.6" ry="4.8" fill="var(--ink)"/>
              <ellipse cx="58" cy="46" rx="3.6" ry="4.8" fill="var(--ink)"/>
              <circle cx="39.5" cy="44.2" r="1.2" fill="#fff"/><circle cx="59.5" cy="44.2" r="1.2" fill="#fff"/>
            </g>
            <g class="mascot__lids" fill="none" stroke="var(--ink)" stroke-width="2.4" stroke-linecap="round">
              <path d="M33 46q5 4.5 10 0"/><path d="M53 46q5 4.5 10 0"/>
            </g>
            <path class="mascot__mouth" d="M43 59q5 4 10 0" fill="none" stroke="var(--ink)" stroke-width="2.4" stroke-linecap="round"/>
          </g>
          <g class="mascot__zzz" fill="var(--ink)" font-family="Georgia, serif" font-style="italic">
            <text x="76" y="34" font-size="13">z</text><text x="85" y="22" font-size="10">z</text>
          </g>
        </svg>
        <p class="wordmark">Moss</p>
      </div>
      <div class="top__words">
        <h1 class="greeting" id="greeting">Loading the house…</h1>
        <p class="lede" id="lede"></p>
      </div>
      <ul class="stickers" id="stickers" aria-label="Today at a glance"></ul>
    </header>

    <main class="queue" id="queue" tabindex="-1" aria-label="Care queue">
      <section class="alldone" id="alldone" aria-labelledby="alldone-title" hidden></section>

      <section class="section section--overdue" id="sec-overdue" aria-labelledby="h-overdue" hidden>
        <h2 class="section__title" id="h-overdue">Needs you now</h2>
        <ul class="list" id="list-overdue"></ul>
      </section>

      <section class="section section--today" id="sec-today" aria-labelledby="h-today" hidden>
        <h2 class="section__title" id="h-today">Today</h2>
        <ul class="list" id="list-today"></ul>
      </section>

      <section class="section section--upcoming" id="sec-upcoming" aria-labelledby="h-upcoming" hidden>
        <h2 class="section__title" id="h-upcoming">Coming up</h2>
        <ul class="list" id="list-upcoming"></ul>
      </section>

      <section class="section section--done" id="sec-done" aria-labelledby="h-done" hidden>
        <h2 class="section__title" id="h-done">Done today</h2>
        <ul class="list" id="list-done"></ul>
      </section>
    </main>

    <aside class="side" aria-label="Plant details and weekly rhythm">
      <div id="detail-slot">
        <section class="detail" id="detail" aria-labelledby="detail-title" tabindex="-1" hidden></section>
      </div>

      <section class="rhythm" aria-labelledby="h-rhythm">
        <h2 class="section__title" id="h-rhythm">Weekly rhythm</h2>
        <p class="rhythm__summary" id="rhythm-summary"></p>
        <svg class="rhythm__svg" id="rhythm-svg" role="img" aria-labelledby="rhythm-title rhythm-desc" viewBox="0 0 320 100"></svg>
        <p class="rhythm__key" aria-hidden="true">
          <span><i class="key key--done"></i>done</span>
          <span><i class="key key--todo"></i>to do</span>
          <span><i class="key key--catchup"></i>catch-up</span>
          <span><i class="key key--missed"></i>missed</span>
          <span><i class="key key--snoozed"></i>snoozed</span>
        </p>
      </section>

      <p class="side__foot">Moss keeps this list on paper in its head; reload and it starts the day again.</p>
    </aside>
  </div>

  <div class="toast" id="toast" hidden>
    <p class="toast__msg" id="toast-msg"></p>
    <div class="toast__btns">
      <button class="btn btn--toast" id="toast-undo" type="button">Undo</button>
      <button class="iconbtn iconbtn--toast" id="toast-close" type="button" aria-label="Dismiss">
        <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>
      </button>
    </div>
    <span class="toast__bar" aria-hidden="true"></span>
  </div>
  <div class="sr-only" id="announcer" role="status" aria-live="polite" aria-atomic="true"></div>

  <script src="app.js"></script>
</body>
</html>

fable-5.1/13-frontend-playful/PLANTS.json

{
  "plants": [
    {"id":"fern","name":"Frida","species":"Boston fern","location":"Bathroom","task":"Water","due":"2 days overdue","urgency":4,"light":"Low, indirect","history":["Sep 19 · Misted","Sep 16 · Watered","Sep 12 · New frond"]},
    {"id":"pothos","name":"Orbit","species":"Golden pothos","location":"Bookshelf","task":"Rotate","due":"Today","urgency":2,"light":"Medium, indirect","history":["Sep 20 · Watered","Sep 14 · Rotated","Sep 10 · Wiped leaves"]},
    {"id":"cactus","name":"Dot","species":"Bunny ears cactus","location":"South window","task":"Check soil","due":"Today","urgency":1,"light":"Bright, direct","history":["Sep 08 · Watered","Sep 01 · New pad noted","Aug 22 · Rotated"]},
    {"id":"calathea","name":"Drama","species":"Calathea orbifolia","location":"Bedroom","task":"Mist","due":"Tomorrow","urgency":0,"light":"Medium, filtered","history":["Sep 21 · Misted","Sep 18 · Watered","Sep 15 · Brown edge noted"]}
  ],
  "week": [1,3,2,4,2,1,3]
}

fable-5.1/13-frontend-playful/styles.css

/* Moss — styles.css
   Warm paper, ink outlines, hard "print" shadows, blobby avatars.
   Mobile first; the two-column composition starts at 960px. */

/* ---------- Tokens ---------- */
:root {
  --paper: #f6efe1;
  --paper-2: #ede3cc;
  --paper-3: #e1d4b6;
  --ink: #2a2722;
  --ink-2: #5b554a;
  --ink-3: #7e7666;
  --line: #d3c7ac;

  --moss: #5e7b3b;
  --moss-deep: #3b5327;
  --moss-ink: #2a3d1b;
  --moss-soft: #d8e2c2;

  --clay: #c9663d;
  --clay-deep: #a4461f;
  --clay-soft: #f4dbc9;

  --sun: #e9b44c;
  --sun-ink: #6e4a0c;
  --sun-soft: #f8e7ba;

  --water: #5f8fb8;
  --water-ink: #2c5a82;
  --water-soft: #d6e4ef;

  --petal: #d98a98;
  --petal-ink: #8b3d4e;
  --petal-soft: #f5dbe0;

  --focus: #1f4f8f;

  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Charter, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --blob-a: 58% 42% 55% 45% / 45% 55% 45% 55%;
  --blob-b: 45% 55% 40% 60% / 55% 40% 60% 45%;
  --blob-c: 50% 50% 45% 55% / 60% 50% 50% 40%;
  --blob-d: 60% 40% 60% 40% / 40% 60% 40% 60%;
  --card-r: 26px 20px 28px 22px / 22px 28px 20px 26px;
  --print: 4px 4px 0 var(--ink);

  --t-fast: 140ms;
  --t-med: 260ms;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(circle at 1px 1px, rgba(42, 39, 34, 0.07) 1px, transparent 1.6px);
  background-size: 9px 9px;
  font: 1rem/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
svg { display: block; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Layout ---------- */
.app {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.25rem 16px 7rem;
  display: grid;
  gap: 1.75rem;
}

.queue { display: grid; gap: 1.75rem; min-width: 0; align-content: start; }
.queue:focus { outline: none; }
.side { display: grid; gap: 1.75rem; min-width: 0; align-content: start; }

/* ---------- Header ---------- */
.top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.1rem;
  align-items: start;
}
.top__brand { display: grid; justify-items: center; gap: 0.25rem; }
.mascot { width: 76px; height: 76px; overflow: visible; }
.wordmark {
  font: italic 700 1.05rem/1 var(--serif);
  letter-spacing: 0.02em;
  color: var(--moss-ink);
  padding: 0.2rem 0.55rem;
  border: 2px solid var(--ink);
  border-radius: 10px 14px 12px 15px;
  background: var(--sun-soft);
  transform: rotate(-3deg);
}
.top__words { display: grid; gap: 0.5rem; min-width: 0; }
.greeting {
  font: 400 1.65rem/1.15 var(--serif);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.lede { color: var(--ink-2); max-width: 46ch; }

.stickers { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sticker {
  display: inline-flex; align-items: baseline; gap: 0.3rem;
  padding: 0.28rem 0.7rem;
  border: 2px solid var(--ink);
  border-radius: 12px 16px 13px 17px;
  font-size: 0.85rem;
  line-height: 1.2;
  background: var(--paper-2);
}
.sticker strong { font: 700 1.05rem/1 var(--serif); }
.sticker--clay { background: var(--clay-deep); color: var(--paper); border-color: var(--clay-deep); transform: rotate(-2deg); }
.sticker--sun { background: var(--sun); transform: rotate(1.5deg); }
.sticker--moss { background: var(--moss-soft); color: var(--moss-ink); }
.sticker--paper { background: var(--paper); }

/* ---------- Sections ---------- */
.section { display: grid; gap: 0.75rem; }
.section__title {
  display: flex; align-items: center; gap: 0.55rem;
  font: 700 0.78rem/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.section__title::before {
  content: "";
  width: 12px; height: 12px;
  border-radius: var(--blob-c);
  background: var(--ink-3);
  border: 1.5px solid var(--ink);
}
.section--overdue .section__title { color: var(--clay-deep); }
.section--overdue .section__title::before { background: var(--clay); }
.section--today .section__title::before { background: var(--sun); }
.section--upcoming .section__title::before { background: var(--paper-3); }
.section--done .section__title::before { background: var(--moss); }

.list { display: grid; gap: 0.25rem; }
.section--overdue .list { gap: 1rem; }

/* ---------- Rows ---------- */
.row {
  position: relative;
  display: grid;
  gap: 0.85rem;
  padding: 1rem 0.25rem;
  border-top: 2px dotted var(--line);
  transition: background-color var(--t-fast);
}
.list > .row:first-child { border-top-color: transparent; }
.section--today .list > .row:first-child { border-top-color: var(--line); }
.row.is-selected { background: rgba(255, 255, 255, 0.35); }

.row--overdue {
  padding: 1.15rem 1.1rem 1.2rem;
  border: 2px solid var(--ink);
  border-radius: var(--card-r);
  background: var(--clay-soft);
  box-shadow: var(--print);
}
.row--overdue.is-selected { background: var(--clay-soft); }

.row--upcoming, .row--done { padding-block: 0.7rem; }
.row--done { opacity: 0.86; }

.row__head { display: grid; gap: 0.6rem; min-width: 0; }

.row__open {
  display: flex; align-items: center; gap: 0.9rem;
  width: 100%;
  min-height: 44px;
  padding: 0.35rem;
  margin: -0.35rem;
  border: 0;
  border-radius: 20px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.row__open:hover .row__name { text-decoration: underline wavy var(--moss); text-underline-offset: 0.2em; }
.row__names { display: grid; gap: 0.1rem; min-width: 0; }
.row__name {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font: 600 1.3rem/1.15 var(--serif);
}
.row--overdue .row__name { font-size: 1.65rem; }
.row--upcoming .row__name, .row--done .row__name { font-size: 1.15rem; }
.row__sub { font-size: 0.9rem; color: var(--ink-2); }
.chev {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  transition: transform var(--t-fast);
}
.chev svg { width: 14px; height: 14px; }
.row__open[aria-expanded="true"] .chev { transform: rotate(180deg); background: var(--sun); }

.avatar {
  flex: none;
  display: grid; place-items: center;
  width: 60px; height: 60px;
  border: 2px solid var(--ink);
  border-radius: var(--blob-a);
  background: var(--paper-2);
  position: relative;
}
.avatar svg { width: 86%; height: 86%; overflow: visible; }
.avatar--a { border-radius: var(--blob-a); }
.avatar--b { border-radius: var(--blob-b); }
.avatar--c { border-radius: var(--blob-c); }
.avatar--d { border-radius: var(--blob-d); }
.tint-clay { background: var(--sun-soft); }
.tint-sun { background: var(--water-soft); }
.tint-petal { background: var(--paper-2); }
.tint-water { background: var(--petal-soft); }
.row--overdue .avatar { width: 84px; height: 84px; }
.row--upcoming .avatar, .row--done .avatar { width: 48px; height: 48px; }
.avatar--lg { width: 96px; height: 96px; }

.row__tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.tag {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border: 1.5px solid currentColor;
  border-radius: 9px 12px 10px 13px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink-2);
  background: var(--paper);
}
.tag .ico svg, .ico svg { width: 14px; height: 14px; }
.ico { display: inline-grid; place-items: center; }
.tag--task { color: var(--moss-ink); background: var(--moss-soft); }
.tag--overdue { color: var(--paper); background: var(--clay-deep); border-color: var(--clay-deep); transform: rotate(-2deg); font-size: 0.9rem; padding: 0.3rem 0.75rem; }
.tag--today { color: var(--sun-ink); background: var(--sun-soft); }
.tag--later { color: var(--ink-2); background: var(--paper-2); }
.tag--snoozed { color: var(--ink-2); border-style: dashed; }
.tag--done { color: var(--moss-ink); background: var(--moss-soft); border-color: var(--moss-deep); }

.row__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.row__actions:empty { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}
.btn svg { width: 15px; height: 15px; }
.btn:hover { background: var(--sun-soft); }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.btn--primary { background: var(--moss-deep); color: var(--paper); border-color: var(--moss-ink); box-shadow: 0 3px 0 var(--moss-ink); }
.btn--primary:hover { background: var(--moss); }
.btn--primary:active { box-shadow: 0 0 0 var(--moss-ink); }
.btn--quiet { box-shadow: none; border-style: dashed; min-height: 40px; padding-block: 0.45rem; }
.btn--quiet:active { transform: none; }

.iconbtn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  cursor: pointer;
}
.iconbtn svg { width: 16px; height: 16px; }
.iconbtn:hover { background: var(--sun-soft); }

.linkbtn {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--moss-ink);
  font-weight: 700;
  text-decoration: underline wavy var(--moss);
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.linkbtn:hover { color: var(--clay-deep); text-decoration-color: var(--clay); }

/* ---------- Detail panel ---------- */
.detail {
  display: grid;
  gap: 1.1rem;
  padding: 1.15rem;
  border: 2px solid var(--ink);
  border-radius: 22px 30px 24px 28px / 28px 22px 30px 24px;
  background: var(--paper-2);
  box-shadow: var(--print);
}
.detail:focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.row > .detail { margin-top: 0.4rem; }

.detail__head { display: grid; grid-template-columns: auto 1fr auto; gap: 0.9rem; align-items: start; }
.detail__titles { display: grid; gap: 0.2rem; min-width: 0; }
.detail__name { font: 600 1.7rem/1.1 var(--serif); }
.detail__sub { color: var(--ink-2); font-size: 0.92rem; }
.detail__quirk { font: italic 1rem/1.35 var(--serif); color: var(--moss-ink); margin-top: 0.3rem; }

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
}
.fact {
  display: grid; gap: 0.35rem;
  padding: 0.75rem 0.8rem;
  border: 2px solid var(--ink);
  border-radius: 14px 18px 16px 20px;
  background: var(--paper);
}
.fact dt {
  display: flex; align-items: center; gap: 0.4rem;
  font: 700 0.72rem/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.fact dt .ico svg { width: 14px; height: 14px; }
.fact:nth-child(1) dt { color: var(--sun-ink); }
.fact:nth-child(2) dt { color: var(--water-ink); }
.fact:nth-child(3) dt { color: var(--clay-deep); }
.fact dd { display: grid; gap: 0.15rem; }
.fact__main { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; line-height: 1.3; }
.fact__sub { font-size: 0.85rem; color: var(--ink-2); line-height: 1.35; }

.meter { display: inline-flex; gap: 3px; }
.meter i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--sun-ink); background: transparent; }
.meter i.is-on { background: var(--sun); }

.detail__logs { display: grid; gap: 0.9rem; }
.logblock { display: grid; gap: 0.35rem; }
.logblock__title { font: 600 1.05rem/1.2 var(--serif); }
.log { display: grid; }
.log__item {
  display: grid; grid-template-columns: 4.6rem 1fr; gap: 0.5rem;
  padding: 0.4rem 0;
  border-top: 1px dotted var(--line);
  font-size: 0.95rem;
}
.log__date { color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: 0.88rem; padding-top: 0.05rem; }
.log__what { display: flex; align-items: center; gap: 0.45rem; }
.log__item--water .log__what .ico { color: var(--water-ink); }
.log__item--care .log__what .ico { color: var(--moss-deep); }
.log__item--note .log__what .ico { color: var(--clay-deep); }
.log__empty { padding: 0.4rem 0; border-top: 1px dotted var(--line); color: var(--ink-2); font-style: italic; }

.detail__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; padding-top: 0.2rem; }

/* ---------- All-done ---------- */
.alldone {
  display: grid; gap: 0.9rem;
  padding: 1.4rem 1.2rem 1.5rem;
  border: 2px solid var(--ink);
  border-radius: var(--card-r);
  background: var(--moss-soft);
  box-shadow: var(--print);
}
.shelf {
  display: flex; justify-content: center; align-items: flex-end; gap: 0.25rem;
  padding: 0.5rem 0.5rem 0;
  border-bottom: 4px solid var(--ink);
  border-radius: 0 0 6px 6px;
}
.shelf__plant { width: 22%; max-width: 90px; }
.shelf__plant svg { width: 100%; height: auto; overflow: visible; }
.shelf__plant:nth-child(2) { transform: translateY(6px); }
.shelf__plant:nth-child(4) { transform: translateY(3px) rotate(-3deg); }
.shelf__plant.is-resting { opacity: 0.45; }
.alldone__title { font: 400 1.9rem/1.1 var(--serif); }
.alldone__title:focus { outline: none; }
.alldone__lede { color: var(--ink-2); }
.next { display: grid; gap: 0.35rem; }
.next__item { display: grid; grid-template-columns: 7rem 1fr; gap: 0.5rem; padding: 0.4rem 0; border-top: 1px dotted var(--ink-3); }
.next dt { font: 700 0.72rem/1.6 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--moss-ink); }
.tip {
  display: flex; gap: 0.5rem; align-items: flex-start;
  padding: 0.7rem 0.85rem;
  border: 2px dashed var(--moss-deep);
  border-radius: 14px 18px 16px 20px;
  background: var(--paper);
  font-size: 0.95rem;
}
.tip .ico { color: var(--moss-deep); margin-top: 0.15rem; }

/* ---------- Weekly rhythm ---------- */
.rhythm {
  display: grid; gap: 0.6rem;
  padding: 1.1rem;
  border: 2px solid var(--ink);
  border-radius: 28px 22px 26px 30px / 22px 30px 24px 26px;
  background: var(--paper);
}
.rhythm__summary { font-size: 0.92rem; color: var(--ink-2); }
.rhythm__svg { width: 100%; height: auto; max-width: 480px; }
.rhythm__today { fill: var(--sun-soft); stroke: var(--ink); stroke-width: 1.5; }
.rhythm__label { font: 600 11px var(--sans); fill: var(--ink-2); }
.rhythm__label.is-today { fill: var(--ink); font-weight: 700; }
.dot { stroke-width: 1.8; }
.dot--done { fill: var(--moss); stroke: var(--ink); }
.dot--todo { fill: var(--paper); stroke: var(--moss-deep); }
.dot--catchup { fill: var(--clay-soft); stroke: var(--clay-deep); }
.dot--missed { fill: none; stroke: var(--clay-deep); stroke-dasharray: 3 2.5; }
.dot--snoozed { fill: none; stroke: var(--ink-3); stroke-dasharray: 2 2; }
.rhythm__key { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: 0.78rem; color: var(--ink-2); }
.rhythm__key span { display: inline-flex; align-items: center; gap: 0.35rem; }
.key { width: 14px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); display: inline-block; }
.key--done { background: var(--moss); }
.key--todo { border-color: var(--moss-deep); background: var(--paper); }
.key--catchup { border-color: var(--clay-deep); background: var(--clay-soft); }
.key--missed { border-color: var(--clay-deep); border-style: dashed; }
.key--snoozed { border-color: var(--ink-3); border-style: dotted; }

.side__foot { font-size: 0.8rem; color: var(--ink-2); font-style: italic; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 50;
  width: min(calc(100% - 32px), 520px);
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 0.75rem 0.85rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 18px 22px 16px 24px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 12px 30px -12px rgba(42, 39, 34, 0.6);
  overflow: hidden;
}
.toast[hidden] { display: none; }
.toast__msg { flex: 1; font-size: 0.95rem; line-height: 1.35; }
.toast__btns { display: flex; align-items: center; gap: 0.4rem; }
.btn--toast { background: var(--sun); color: var(--ink); border-color: var(--paper); box-shadow: 0 3px 0 var(--paper); min-height: 40px; }
.btn--toast:hover { background: var(--sun-soft); }
.btn--toast:active { box-shadow: 0 0 0 var(--paper); }
.iconbtn--toast { width: 40px; height: 40px; background: transparent; color: var(--paper); border-color: var(--paper); }
.iconbtn--toast:hover { background: rgba(255, 255, 255, 0.12); }
.toast :focus-visible { outline-color: var(--sun); }
.toast__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--moss-soft);
  transform-origin: left center;
  transform: scaleX(0);
}

/* ---------- Motion (only when welcome) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .mascot__eyes { transform-box: fill-box; transform-origin: center; animation: blink 5.5s infinite; }
  .mascot.is-hopping { animation: hop 520ms cubic-bezier(0.3, 1.6, 0.5, 1); }
  .mascot.is-asleep .mascot__zzz text { animation: drift 2.6s ease-in-out infinite; }
  .mascot.is-asleep .mascot__zzz text:last-child { animation-delay: 0.8s; }

  .toast.is-open .toast__bar { animation: drain var(--toast-ms, 6000ms) linear forwards; }
  .toast.is-paused .toast__bar { animation-play-state: paused; }
  .toast.is-open { animation: toast-in 320ms cubic-bezier(0.2, 1.2, 0.4, 1); }

  .row { animation: row-in 260ms ease-out both; }
  .row.is-leaving--done { animation: row-done 460ms ease-in forwards; }
  .row.is-leaving--snooze { animation: row-snooze 420ms ease-in forwards; }
  .row.is-leaving--done .avatar::after {
    content: "";
    position: absolute; inset: -6px;
    border: 3px solid var(--water);
    border-radius: inherit;
    animation: ripple 460ms ease-out forwards;
  }
  .detail { animation: panel-in 240ms ease-out; }
  .alldone { animation: panel-in 320ms ease-out; }
  .dot { transition: fill var(--t-med), stroke var(--t-med); }
  .shelf__plant { animation: sway 4s ease-in-out infinite; transform-origin: bottom center; }
  .shelf__plant:nth-child(2) { animation-delay: -1s; }
  .shelf__plant:nth-child(3) { animation-delay: -2s; }
  .shelf__plant:nth-child(4) { animation-delay: -3s; }
}

@keyframes blink {
  0%, 91%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(0.08); }
}
@keyframes hop {
  0% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-12px) rotate(-6deg); }
  70% { transform: translateY(0) rotate(3deg); }
  100% { transform: translateY(0) rotate(0); }
}
@keyframes drift {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(-4px); opacity: 1; }
}
@keyframes drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes toast-in { from { transform: translate(-50%, 24px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes row-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes row-done {
  0% { opacity: 1; transform: none; }
  30% { transform: scale(1.02) rotate(-0.6deg); }
  100% { opacity: 0; transform: translateX(-24px) scale(0.96); }
}
@keyframes row-snooze {
  0% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(28px); }
}
@keyframes ripple { from { opacity: 0.9; transform: scale(0.7); } to { opacity: 0; transform: scale(1.35); } }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sway {
  0%, 100% { transform: rotate(-1.5deg); }
  50% { transform: rotate(1.5deg); }
}

/* Mascot states */
.mascot__lids, .mascot__zzz { display: none; }
.mascot.is-asleep .mascot__eyes { display: none; }
.mascot.is-asleep .mascot__lids, .mascot.is-asleep .mascot__zzz { display: block; }
.mascot.is-asleep .mascot__mouth { d: path("M45 59q3 2 6 0"); }

@media (prefers-reduced-motion: reduce) {
  .toast__bar { display: none; }
  .chev, .btn { transition: none; }
}

/* ---------- Wider phones / small tablets ---------- */
@media (min-width: 600px) {
  .row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .row--today .row__tags { padding-left: calc(60px + 0.9rem); }
  .row--upcoming .row__tags, .row--done .row__tags { padding-left: calc(48px + 0.9rem); }
  .row > .detail { grid-column: 1 / -1; }
  .row__actions { justify-content: flex-end; }
  .row--overdue { grid-template-columns: 1fr; }
  .row--overdue .row__actions { justify-content: flex-start; }
  .row--overdue .row__head { grid-template-columns: 1fr auto; align-items: center; }
  .greeting { font-size: 2rem; }
  .mascot { width: 92px; height: 92px; }
}

/* ---------- Desktop: two columns, sticky sidebar ---------- */
@media (min-width: 960px) {
  html { font-size: 106.25%; }
  .app {
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.9fr);
    column-gap: 3rem;
    row-gap: 2.25rem;
    padding: 2rem 32px 5rem;
  }
  .top { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 1.6rem; align-items: center; }
  .stickers { grid-column: 3; grid-row: 1; flex-direction: column; align-items: flex-end; gap: 0.7rem; padding-right: 0.5rem; }
  .sticker { font-size: 0.95rem; padding: 0.4rem 0.9rem; }
  .sticker strong { font-size: 1.3rem; }
  .sticker--paper { transform: rotate(-1.5deg); }
  .sticker--moss { transform: rotate(2deg); }
  .mascot { width: 112px; height: 112px; }
  .greeting { font-size: 2.5rem; max-width: 22ch; }
  .side { position: sticky; top: 1.5rem; }
  .row--overdue .row__head { grid-template-columns: 1fr auto; }
  .detail__close { display: none; }
  .row > .detail { display: none; }
  .row.is-selected { box-shadow: -8px 0 0 -4px var(--sun); }
  .row--overdue.is-selected { box-shadow: var(--print), -12px 0 0 -6px var(--sun); }
  .facts { grid-template-columns: 1fr; }
  .fact { grid-template-columns: auto 1fr; align-items: baseline; gap: 0.6rem 0.9rem; }
  .fact dt { min-width: 5.2rem; }
}

@media (min-width: 1200px) {
  .app { column-gap: 4rem; }
}

/* ---------- Print: a paper list, naturally ---------- */
@media print {
  body { background: #fff; }
  .toast, .skip-link, .row__actions, .detail__actions { display: none !important; }
  .row--overdue, .detail, .alldone, .rhythm { box-shadow: none; }
}

gpt-6.1-sol/13-frontend-playful/RESPONSE.md

gpt-6.1-sol/13-frontend-playful/TASK.md

gpt-6.1-sol/13-frontend-playful/app.js

"use strict";

// Embedded verbatim from PLANTS.json so index.html also works directly via file://.
// The supplied queue is a September 22 sample; it deliberately doesn't age with the clock.
const DATA = {
  plants: [
    {id: "fern", name: "Frida", species: "Boston fern", location: "Bathroom", task: "Water", due: "2 days overdue", urgency: 4, light: "Low, indirect", history: ["Sep 19 · Misted", "Sep 16 · Watered", "Sep 12 · New frond"]},
    {id: "pothos", name: "Orbit", species: "Golden pothos", location: "Bookshelf", task: "Rotate", due: "Today", urgency: 2, light: "Medium, indirect", history: ["Sep 20 · Watered", "Sep 14 · Rotated", "Sep 10 · Wiped leaves"]},
    {id: "cactus", name: "Dot", species: "Bunny ears cactus", location: "South window", task: "Check soil", due: "Today", urgency: 1, light: "Bright, direct", history: ["Sep 08 · Watered", "Sep 01 · New pad noted", "Aug 22 · Rotated"]},
    {id: "calathea", name: "Drama", species: "Calathea orbifolia", location: "Bedroom", task: "Mist", due: "Tomorrow", urgency: 0, light: "Medium, filtered", history: ["Sep 21 · Misted", "Sep 18 · Watered", "Sep 15 · Brown edge noted"]}
  ],
  week: [1, 3, 2, 4, 2, 1, 3]
};

const TASKS = {
  Water: {done: "Watered", icon: "drop", message: "A drink for Frida.", verb: "watering"},
  Rotate: {done: "Rotated", icon: "rotate", message: "A quarter turn for Orbit.", verb: "rotation"},
  "Check soil": {done: "Checked soil", icon: "soil", message: "See how Dot’s soil feels.", verb: "soil check"},
  Mist: {done: "Misted", icon: "mist", message: "A little mist for Drama.", verb: "misting"}
};
const STORAGE_KEY = "moss-care-v1";
const UNDO_DURATION = 12000;
const plants = [...DATA.plants].sort((a, b) => b.urgency - a.urgency);
const todayPlants = plants.filter(plant => plant.due !== "Tomorrow");
const $ = selector => document.querySelector(selector);
const dialog = $("#plantDialog");
const toast = $("#toast");
const undoButton = $("#undoButton");
let storageAvailable = true;
let state = loadState();
let selectedPlant = null;
let returnFocus = null;
let currentView = "today";
let undoStack = [];
let undoTimer = null;
let pausedAt = null;
let toastHovered = false;
let announcementTimer = null;

function initialState() {
  return Object.fromEntries(plants.map(plant => [plant.id, {status: "pending", history: [...plant.history]}]));
}

function loadState() {
  const initial = initialState();
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (!raw) return initial;
    let saved;
    try { saved = JSON.parse(raw); } catch { return initial; }
    if (!saved || saved.version !== 1 || !saved.plants) return initial;
    for (const plant of plants) {
      const item = saved.plants[plant.id];
      if (!item || !["pending", "done", "snoozed"].includes(item.status) || !Array.isArray(item.history)) continue;
      if (!item.history.every(entry => typeof entry === "string" && entry.length < 200)) continue;
      initial[plant.id] = {status: item.status, history: item.history.slice(0, 100)};
    }
  } catch {
    // Private browsing and file:// storage restrictions shouldn't stop tending.
    storageAvailable = false;
  }
  return initial;
}

function saveState() {
  try {
    localStorage.setItem(STORAGE_KEY, JSON.stringify({version: 1, plants: state}));
    storageAvailable = true;
  } catch {
    storageAvailable = false;
  }
  updateStorageLabel();
}

function updateStorageLabel() {
  $("#saveStatus").textContent = storageAvailable
    ? "Your care, kept on this device."
    : "Care is saved for this visit only.";
  $("#sessionNote").hidden = storageAvailable;
}

function escapeHTML(value) {
  return String(value).replace(/[&<>"']/g, char => ({"&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;"}[char]));
}

function icon(name) {
  return `<svg class="icon" aria-hidden="true"><use href="#icon-${name}"/></svg>`;
}

function art(plant, className = "") {
  return `<svg class="${className}" viewBox="0 0 240 250" aria-hidden="true"><use href="#art-${plant.id}"/></svg>`;
}

function artPuck(plant) {
  return `<span class="art-puck ${plant.id}" aria-hidden="true">${art(plant)}</span>`;
}

function detailsLink(plant) {
  return `<button class="details-link" type="button" data-action="details" data-plant="${plant.id}" aria-label="View ${plant.name}’s details">Details ${icon("arrow")}</button>`;
}

function actions(plant) {
  const task = TASKS[plant.task];
  return `<div class="plant-actions">
    <button class="primary-button" type="button" data-action="complete" data-plant="${plant.id}" aria-label="${task.done} — complete ${plant.name}’s ${task.verb}">${icon(task.icon)}${task.done}</button>
    <button class="secondary-button" type="button" data-action="snooze" data-plant="${plant.id}" aria-label="Snooze ${plant.name}’s ${task.verb} until tomorrow" title="Remind me tomorrow">${icon("clock")}Snooze</button>
  </div>`;
}

function pendingToday() {
  return todayPlants.filter(plant => state[plant.id].status === "pending");
}

function completedToday() {
  return todayPlants.filter(plant => state[plant.id].status === "done");
}

function snoozedToday() {
  return todayPlants.filter(plant => state[plant.id].status === "snoozed");
}

function render() {
  const pending = pendingToday();
  const done = completedToday();
  const snoozed = snoozedToday();
  $("#navCount").textContent = pending.length;
  $("#queueCount").textContent = pending.length ? `${pending.length} little ${pending.length === 1 ? "thing" : "things"}` : "Room to relax";
  $("#progressText").textContent = `${done.length} of 3 cared for${snoozed.length ? ` · ${snoozed.length} snoozed` : ""}`;
  $("#progressBar").setAttribute("aria-valuenow", done.length);
  $("#progressBar").setAttribute("aria-valuetext", `${done.length} of 3 cared for${snoozed.length ? `, ${snoozed.length} snoozed until tomorrow` : ""}`);
  $("#progressFill").style.width = `${done.length / 3 * 100}%`;
  $("#intro").textContent = pending.length ? "A sip, a turn, a little attention. You’ve got this." : "Your tending is settled. Take a little breather.";
  $("#todayQueue").innerHTML = pending.length ? pending.map(renderTask).join("") : renderAllDone(done.length, snoozed.length);
  renderCompleted(done);
  renderUpcoming();
  renderCollection();
  renderWeek();
  if (selectedPlant && dialog.open) renderDetail(selectedPlant);
  updateStorageLabel();
}

function renderTask(plant) {
  if (plant.urgency >= 4) {
    return `<article class="urgent-plant" aria-labelledby="task-${plant.id}">
      <div class="urgent-copy"><span class="overdue-label">${icon("clock")}${plant.due}</span>
      <h3 id="task-${plant.id}">${TASKS[plant.task].message}</h3>
      <p class="plant-meta">${plant.species}<br>${plant.location}</p>${detailsLink(plant)}</div>
      ${art(plant, "urgent-art")}${actions(plant)}</article>`;
  }
  return `<article class="task-row" aria-labelledby="task-${plant.id}">${artPuck(plant)}
    <div class="task-content"><div class="task-name"><h3 id="task-${plant.id}">${plant.name}</h3><span class="task-location">· ${plant.location}</span></div>
      <p class="task-description">${TASKS[plant.task].message}</p><p class="plant-meta">${plant.species}</p>
      <div class="row-bottom">${actions(plant)}${detailsLink(plant)}</div></div></article>`;
}

function renderAllDone(done, snoozed) {
  const message = snoozed
    ? `${done ? `${done} ${done === 1 ? "plant" : "plants"} cared for. ` : ""}${snoozed} ${snoozed === 1 ? "reminder is" : "reminders are"} tucked into tomorrow’s list. You can find them just below.`
    : "Your green corner is in good hands. Next up: a little mist for Drama tomorrow.";
  return `<div class="all-done"><svg class="done-illustration" viewBox="0 0 180 165" aria-hidden="true">
    <path d="M25 132V84a65 65 0 0 1 130 0v48Z" fill="#d8dfc5"/><circle cx="132" cy="47" r="15" fill="#f2dfcd"/>
    <path d="M87 136V75" stroke="#426848" stroke-width="3"/>
    <path d="M87 106c-36 2-39-35-39-35s39-2 39 35" fill="#739265"/><path d="M88 84c0-32 31-33 31-33s7 34-31 33" fill="#50774b"/>
    <path d="m65 126 6 27q17 9 35 0l7-27Z" fill="#c87e57"/><rect x="60" y="122" width="58" height="10" rx="4" fill="#dc9870"/>
    <path d="m133 111 7 7 13-15" stroke="#426848" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M23 157h135" stroke="#a6b291" stroke-width="2" stroke-linecap="round"/></svg>
    <h3 id="allDoneHeading" tabindex="-1">${snoozed ? "Nothing more for today." : "A little care. A happy corner."}</h3>
    <p>${message}</p><button class="primary-button" type="button" data-view="plants">Spend a moment with your plants ${icon("arrow")}</button></div>`;
}

function renderCompleted(done) {
  const wasOpen = Boolean($("#completedList")?.open);
  $("#completedSection").innerHTML = done.length ? `<details id="completedList" class="completed-section" ${wasOpen ? "open" : ""}>
    <summary>${icon("check")}${done.length} ${done.length === 1 ? "little thing" : "little things"} cared for</summary>
    ${done.map(plant => `<div class="completed-row"><span>${icon("check")}<span>${plant.name} · ${TASKS[plant.task].done}</span></span>${detailsLink(plant)}</div>`).join("")}</details>` : "";
}

function renderUpcoming() {
  const upcoming = plants.filter(plant => state[plant.id].status === "snoozed" || (plant.due === "Tomorrow" && state[plant.id].status !== "done"));
  $("#upcomingQueue").innerHTML = upcoming.length ? upcoming.map(plant => `<article class="upcoming-row">${artPuck(plant)}
    <div class="upcoming-copy"><h3>${plant.name}</h3><p>${plant.task} · ${plant.location}</p>${state[plant.id].status === "snoozed" ? '<span class="deferred-tag">Snoozed until tomorrow</span>' : ""}</div>${detailsLink(plant)}</article>`).join("")
    : '<p class="supporting-text">Nothing lined up for tomorrow. Enjoy the quiet.</p>';
}

function statusLabel(plant) {
  if (state[plant.id].status === "done") return `${TASKS[plant.task].done} today`;
  if (state[plant.id].status === "snoozed") return `${plant.task} · Snoozed until tomorrow`;
  return `${plant.task} · ${plant.due}`;
}

function renderCollection() {
  $("#plantCollection").innerHTML = plants.map(plant => `<button class="collection-plant" type="button" data-action="details" data-plant="${plant.id}" aria-label="View ${plant.name}, ${plant.species}. ${statusLabel(plant)}">
    <span class="collection-art ${plant.id}">${art(plant)}</span><span class="collection-name">${plant.name}${icon("arrow")}</span>
    <span class="collection-meta">${plant.species} · ${plant.location}</span>
    <span class="collection-status ${plant.urgency >= 4 && state[plant.id].status === "pending" ? "overdue" : ""}">${statusLabel(plant)}</span></button>`).join("");
}

function renderWeek() {
  const names = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
  const counts = [...DATA.week];
  counts[1] -= snoozedToday().length;
  counts[2] += plants.filter(plant => state[plant.id].status === "snoozed").length;
  const max = Math.max(...counts, 1);
  $("#weekChart").innerHTML = counts.map((count, day) => {
    const completed = day === 1 ? completedToday().length : 0;
    const description = `${names[day]}${day === 1 ? ", today" : ""}: ${count} planned care ${count === 1 ? "reminder" : "reminders"}${completed ? `, ${completed} completed` : ""}`;
    return `<li class="week-day ${day === 1 ? "is-today" : ""}" aria-label="${description}" title="${description}">
      <span class="week-number" aria-hidden="true">${count}</span><span class="week-bar-space" aria-hidden="true"><span class="week-bar" style="height:${Math.max(count / max * 100, 3)}%">${completed ? `<span class="week-bar-completed" style="height:${completed / count * 100}%"></span>` : ""}</span></span><span class="week-letter" aria-hidden="true">${names[day][0]}</span></li>`;
  }).join("");
}

function renderDetail(plant) {
  const item = state[plant.id];
  const lastWater = item.history.find(entry => entry.endsWith(" · Watered"));
  const lastWaterDate = lastWater ? lastWater.split(" · ")[0] : "No watering recorded";
  const isDueToday = plant.due !== "Tomorrow" && item.status === "pending";
  let reminder;
  if (isDueToday) reminder = `<h3>${plant.task} · ${plant.due}</h3><p>One small moment of care. Snooze moves this reminder to tomorrow’s list.</p>${actions(plant)}`;
  else if (item.status === "done") reminder = `<h3>${icon("check")} ${TASKS[plant.task].done} today</h3><p>Your care is in the history below. Enjoy a little breathing room.</p>`;
  else reminder = `<h3>${plant.task} · Tomorrow</h3><p>${item.status === "snoozed" ? "This reminder is snoozed until tomorrow." : "A little something for tomorrow. Nothing to do right now."}</p>`;

  $("#dialogContent").innerHTML = `<div class="detail-hero ${plant.id}">${art(plant, "detail-art")}<div><span class="eyebrow">Your green companion</span><h2 id="detailName">${plant.name}</h2><p class="plant-meta">${plant.species}<br>${plant.location}</p></div></div>
    <div class="detail-body"><div class="detail-facts"><div><h3 class="fact-title">${icon("sun")}Light</h3><p class="fact-value">${plant.light}</p></div>
      <div><h3 class="fact-title">${icon("drop")}Water</h3><p class="fact-value">Last watered<br><strong>${escapeHTML(lastWaterDate)}</strong></p>
      <button type="button" class="water-log-button" data-action="water" data-plant="${plant.id}" aria-label="Log watering for ${plant.name}">${icon("drop")}Watered</button></div></div>
      <section class="detail-reminder" aria-label="${plant.name}’s care reminder">${reminder}</section>
      <h3 class="history-heading">Life lately</h3><p class="history-intro">Care, observations, and little milestones.</p>
      <ol class="history-list" aria-label="${plant.name}’s care and observation history">${item.history.map(renderHistory).join("")}</ol></div>`;
}

function renderHistory(entry) {
  const [date, ...pieces] = entry.split(" · ");
  const text = pieces.join(" · ") || entry;
  const observation = /new |brown |noted/i.test(text);
  const historyIcon = observation ? "leaf" : /water/i.test(text) ? "drop" : /rotat/i.test(text) ? "rotate" : /soil/i.test(text) ? "soil" : /mist/i.test(text) ? "mist" : /snooz/i.test(text) ? "clock" : "check";
  return `<li><span class="history-icon ${observation ? "history-observation" : ""}">${icon(historyIcon)}</span><div><span class="history-date">${escapeHTML(date)}</span>${escapeHTML(text)}${observation ? '<span class="history-tag">Observation</span>' : ""}</div></li>`;
}

function openDetail(plant) {
  returnFocus = document.activeElement;
  selectedPlant = plant;
  renderDetail(plant);
  // A modal makes the rest of the document inert; keep Undo in its top layer.
  dialog.append(toast);
  dialog.append($("#announcer"));
  dialog.showModal();
  document.body.classList.add("modal-open");
}

function switchView(view, moveFocus = true) {
  if (!["today", "plants"].includes(view)) return;
  currentView = view;
  $("#todayView").hidden = view !== "today";
  $("#plantsView").hidden = view !== "plants";
  document.querySelectorAll(".nav-button").forEach(button => {
    const active = button.dataset.view === view;
    button.classList.toggle("active", active);
    if (active) button.setAttribute("aria-current", "page");
    else button.removeAttribute("aria-current");
  });
  // replaceState doesn't navigate or make a request. File URLs may reject it.
  try { history.replaceState(null, "", `#${view}`); } catch { /* Navigation still works. */ }
  if (moveFocus) {
    $(`#${view}Heading`).focus({preventScroll: true});
    window.scrollTo({top: 0, behavior: "instant"});
  }
}

function announce(message) {
  clearTimeout(announcementTimer);
  $("#announcer").textContent = "";
  announcementTimer = setTimeout(() => { $("#announcer").textContent = message; }, 30);
}

function mutatePlant(plant, action) {
  const item = state[plant.id];
  if ((action === "complete" || action === "snooze") && (item.status !== "pending" || plant.due === "Tomorrow")) return;
  if (action === "water" && item.history.includes("Today · Watered")) {
    announce(`${plant.name}’s watering is already recorded for today.`);
    return;
  }
  const focusedAction = document.activeElement?.dataset?.action;
  const rowIndex = pendingToday().findIndex(candidate => candidate.id === plant.id);
  const before = structuredClone(item);
  let message;
  if (action === "snooze") {
    item.status = "snoozed";
    item.history.unshift(`Today · ${plant.task} snoozed until tomorrow`);
    message = `${plant.name} is tucked into tomorrow.`;
  } else if (action === "water") {
    item.history.unshift("Today · Watered");
    if (plant.task === "Water") item.status = "done";
    message = `${plant.name}’s watering is recorded.`;
  } else {
    item.status = "done";
    item.history.unshift(`Today · ${TASKS[plant.task].done}`);
    message = `${plant.name} · ${TASKS[plant.task].done.toLowerCase()}. Lovely.`;
  }
  item.history = item.history.slice(0, 100);
  const now = Date.now();
  // Older actions remain undoable in reverse order during their own 12-second window.
  undoStack = undoStack.filter(entry => entry.expires > (pausedAt ?? now));
  undoStack.push({plantId: plant.id, before, message, expires: (pausedAt ?? now) + UNDO_DURATION});
  saveState();
  render();
  showUndo();
  const remaining = pendingToday().length;
  announce(`${message} ${remaining ? `${remaining} ${remaining === 1 ? "task remains" : "tasks remain"} for today.` : "Nothing more for today."} Undo is available for 12 seconds.`);
  restoreActionFocus(plant.id, focusedAction, rowIndex);
}

function restoreActionFocus(plantId, action, rowIndex) {
  if (dialog.open) {
    const sameControl = $("#dialogContent").querySelector(`[data-action="${action}"][data-plant="${plantId}"]`);
    (sameControl || $("#closeDialog")).focus({preventScroll: true});
  } else if (currentView === "today") {
    const nextPlant = pendingToday()[Math.max(0, rowIndex)] || pendingToday().at(-1);
    const target = nextPlant ? $("#todayQueue").querySelector(`[data-action="complete"][data-plant="${nextPlant.id}"]`) : $("#allDoneHeading");
    target?.focus({preventScroll: true});
  } else {
    $("#plantCollection").querySelector(`[data-plant="${plantId}"]`)?.focus({preventScroll: true});
  }
}

function showUndo() {
  clearTimeout(undoTimer);
  const latest = undoStack.at(-1);
  if (!latest) {
    hideToast();
    return;
  }
  toast.hidden = false;
  $("#toastMessage").textContent = latest.message;
  undoButton.setAttribute("aria-label", `Undo the latest action for ${plants.find(plant => plant.id === latest.plantId).name}${undoStack.length > 1 ? `. ${undoStack.length} recent actions available to undo` : ""}`);
  tickUndo();
}

function tickUndo() {
  clearTimeout(undoTimer);
  if (pausedAt !== null) return;
  const now = Date.now();
  undoStack = undoStack.filter(entry => entry.expires > now);
  if (!undoStack.length) {
    hideToast();
    return;
  }
  const latest = undoStack.at(-1);
  $("#toastTimer").style.width = `${Math.max(0, (latest.expires - now) / UNDO_DURATION * 100)}%`;
  undoTimer = setTimeout(tickUndo, 100);
}

function pauseUndo() {
  if (pausedAt !== null || toast.hidden) return;
  pausedAt = Date.now();
  clearTimeout(undoTimer);
}

function resumeUndo() {
  if (pausedAt === null || toastHovered || toast.contains(document.activeElement)) return;
  const duration = Date.now() - pausedAt;
  undoStack.forEach(entry => { entry.expires += duration; });
  pausedAt = null;
  tickUndo();
}

function hideToast() {
  clearTimeout(undoTimer);
  const hadFocus = toast.contains(document.activeElement);
  toast.hidden = true;
  toastHovered = false;
  pausedAt = null;
  if (hadFocus) (dialog.open ? $("#closeDialog") : $(`#${currentView}Heading`)).focus({preventScroll: true});
}

function undoLatest() {
  if (pausedAt === null) undoStack = undoStack.filter(entry => entry.expires > Date.now());
  const entry = undoStack.pop();
  if (!entry) {
    hideToast();
    return;
  }
  const plant = plants.find(candidate => candidate.id === entry.plantId);
  state[entry.plantId] = entry.before;
  saveState();
  render();
  showUndo();
  announce(`${plant.name}’s last action was undone. ${pendingToday().length} tasks for today.`);
  if (toast.hidden) {
    if (dialog.open) $("#closeDialog").focus({preventScroll: true});
    else {
      const control = currentView === "today"
        ? $("#todayQueue").querySelector(`[data-action="complete"][data-plant="${plant.id}"]`) || $("#queueHeading")
        : $("#plantCollection").querySelector(`[data-plant="${plant.id}"]`);
      control?.focus({preventScroll: true});
    }
  }
}

document.addEventListener("click", event => {
  const viewButton = event.target.closest("button[data-view]");
  if (viewButton) {
    switchView(viewButton.dataset.view);
    return;
  }
  const button = event.target.closest("button[data-action][data-plant]");
  if (!button) return;
  const plant = plants.find(candidate => candidate.id === button.dataset.plant);
  if (!plant) return;
  if (button.dataset.action === "details") openDetail(plant);
  else if (["complete", "snooze", "water"].includes(button.dataset.action)) mutatePlant(plant, button.dataset.action);
});

$(".brand").addEventListener("click", event => { event.preventDefault(); switchView("today"); });
$("#closeDialog").addEventListener("click", () => dialog.close());
dialog.addEventListener("close", () => {
  document.body.classList.remove("modal-open");
  document.body.append(toast);
  document.body.append($("#announcer"));
  const previousId = selectedPlant?.id;
  selectedPlant = null;
  if (returnFocus?.isConnected) returnFocus.focus({preventScroll: true});
  else {
    const root = currentView === "today" ? $("#todayView") : $("#plantsView");
    const replacement = root.querySelector(`[data-action="details"][data-plant="${previousId}"]`);
    (replacement || $(`#${currentView}Heading`)).focus({preventScroll: true});
  }
});
dialog.addEventListener("click", event => {
  if (event.target !== dialog) return;
  const bounds = dialog.getBoundingClientRect();
  if (event.clientX < bounds.left || event.clientX > bounds.right || event.clientY < bounds.top || event.clientY > bounds.bottom) dialog.close();
});
undoButton.addEventListener("click", undoLatest);
$("#dismissToast").addEventListener("click", () => { undoStack = []; hideToast(); });
toast.addEventListener("pointerenter", () => { toastHovered = true; pauseUndo(); });
toast.addEventListener("pointerleave", () => { toastHovered = false; resumeUndo(); });
toast.addEventListener("focusin", pauseUndo);
toast.addEventListener("focusout", () => setTimeout(resumeUndo, 0));
document.addEventListener("visibilitychange", () => {
  // Keep the brief undo path available when the user switches away from this tab.
  if (document.hidden) pauseUndo();
  else resumeUndo();
});

render();
switchView(location.hash === "#plants" ? "plants" : "today", false);

gpt-6.1-sol/13-frontend-playful/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#f6f3e9">
  <meta name="color-scheme" content="light">
  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self'; style-src 'self'; style-src-attr 'unsafe-inline'; img-src 'self' data:; connect-src 'none'; font-src 'none'; base-uri 'none'; form-action 'none'">
  <title>Moss — a little care, a lot of life</title>
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='20' fill='%232e493b'/%3E%3Cpath d='M32 49V26M32 35C12 35 13 13 13 13S34 14 32 35M32 28C32 11 51 12 51 12S53 31 32 28' fill='%23dce2a7' stroke='%23dce2a7' stroke-width='3'/%3E%3C/svg%3E">
  <link rel="stylesheet" href="styles.css">
  <script src="app.js" defer></script>
</head>
<body>
  <a class="skip-link" href="#main">Skip to your care queue</a>

  <!-- Local, hand-drawn botanical shapes. Illustrations are decorative beside plant names. -->
  <svg class="svg-library" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <defs>
      <symbol id="icon-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5"/></symbol>
      <symbol id="icon-leaf" viewBox="0 0 24 24"><path d="M19 4C8 2 3 7 5 14s13 6 14-10Z"/><path d="M4 21 15 9"/></symbol>
      <symbol id="icon-drop" viewBox="0 0 24 24"><path d="M12 3S5 11 5 15a7 7 0 0 0 14 0c0-4-7-12-7-12Z"/><path d="M9 15c0 2 1 3 3 3"/></symbol>
      <symbol id="icon-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M12 7v5l3 2"/></symbol>
      <symbol id="icon-check" viewBox="0 0 24 24"><path d="m5 12 4 4L19 6"/></symbol>
      <symbol id="icon-arrow" viewBox="0 0 24 24"><path d="M5 12h14m-5-5 5 5-5 5"/></symbol>
      <symbol id="icon-rotate" viewBox="0 0 24 24"><path d="M19 9a7 7 0 1 0 0 7M19 4v5h-5"/></symbol>
      <symbol id="icon-soil" viewBox="0 0 24 24"><path d="M3 16h18M6 20h1m4 0h1m4 0h1M12 13V7m0 3C5 10 6 4 6 4s7 0 6 6m0-3c0-5 6-4 6-4s0 5-6 4"/></symbol>
      <symbol id="icon-mist" viewBox="0 0 24 24"><path d="M4 10h7v10H4zm2-6h7v3H6zm5 6V7M17 6h1m2-3h1m-1 6h1m-4 2h1"/></symbol>
      <symbol id="icon-close" viewBox="0 0 24 24"><path d="m6 6 12 12M6 18 18 6"/></symbol>
      <symbol id="icon-pot" viewBox="0 0 24 24"><path d="m5 14 2 7h10l2-7Zm-1-3h16v3H4zm8 0V4m0 3C6 7 6 2 6 2s6 0 6 5m0-1c0-5 6-4 6-4s0 5-6 4"/></symbol>

      <symbol id="art-fern" viewBox="0 0 240 250">
        <ellipse cx="121" cy="234" rx="58" ry="7" fill="#294838" opacity=".12"/>
        <g fill="none" stroke="#31583c" stroke-width="3" stroke-linecap="round">
          <path d="M121 176Q123 102 116 23M120 177Q96 103 56 49M119 177Q147 89 187 44M120 180Q74 114 21 101M124 180Q166 114 220 103M121 174Q104 84 81 23M123 172Q138 89 153 17"/>
        </g>
        <g fill="#709657">
          <path d="M116 43Q99 42 103 26q15 3 13 17m0 0q16-3 18-17-18 0-18 17M117 64Q94 57 97 41q20 2 20 23m0 0q21-4 25-23-22 2-25 23M119 86Q92 76 94 59q24 4 25 27m0 0q25-7 29-25-23 3-29 25M121 109Q88 96 89 77q27 5 32 32m0 0q27-8 34-28-28 4-34 28M122 136Q91 126 83 103q29 2 39 33m0 0q33-7 39-32-31 7-39 32"/>
          <path d="M68 66Q49 67 39 53q17-5 29 13m0 0q8-19-4-26-7 11 4 26M84 88Q59 86 48 72q22-5 36 16m0 0q7-21-6-36-8 14 6 36M98 116Q70 111 60 98q25-8 38 18m0 0q10-24-3-40-11 18 3 40M107 144Q74 143 60 127q29-9 47 17m0 0q8-26-5-42-9 17 5 42"/>
          <path d="M176 61Q176 42 191 32q5 19-15 29m0 0q-17-2-16-21 18 2 16 21M163 85Q170 60 185 56q3 24-22 29m0 0q-23-1-20-22 19 5 20 22M149 113Q160 86 179 79q-2 27-30 34m0 0q-24-5-22-29 23 7 22 29M136 144Q152 119 173 112q-3 25-37 32m0 0q-22-9-22-30 24 8 22 30"/>
        </g>
        <g fill="#527947">
          <path d="M44 114Q23 122 12 111q16-12 32 3m0 0q-1-19-19-26-4 16 19 26M65 128Q38 140 25 127q21-11 40 1m0 0q-4-22-24-31-2 21 24 31M90 149Q62 157 46 145q22-12 44 4m0 0q-10-25-25-27-2 19 25 27M199 117Q217 125 230 114q-16-13-31 3m0 0q-2-20 18-29 3 19-18 29M176 133Q199 145 217 133q-21-14-41 0m0 0q2-24 22-34 0 23-22 34M150 155Q178 165 195 149q-25-8-45 6m0 0q8-26 26-31-1 23-26 31"/>
          <path d="M87 45Q69 42 68 27q17 1 19 18m0 0q11-14 4-28-12 10-4 28M96 72Q77 63 74 48q18 4 22 24m0 0q13-18 5-31-12 10-5 31M144 49Q160 35 157 19q-16 8-13 30m0 0q-17-9-17-26 18 2 17 26M138 80Q155 66 156 45q-20 8-18 35m0 0q-21-9-22-25 19 0 22 25"/>
        </g>
        <path d="m80 173 10 52q31 15 61 0l12-52Z" fill="#c87e57"/>
        <path d="m85 185 9 37q10 6 17 6l-5-43Z" fill="#da966b"/>
        <rect x="75" y="165" width="94" height="20" rx="6" fill="#dc9870"/>
        <path d="M88 174h64" stroke="#eeb48d" stroke-width="3" stroke-linecap="round"/>
        <g fill="#a75e42" opacity=".4"><circle cx="130" cy="203" r="2"/><circle cx="142" cy="213" r="1.4"/><circle cx="120" cy="221" r="1"/></g>
      </symbol>

      <symbol id="art-pothos" viewBox="0 0 240 250">
        <ellipse cx="118" cy="234" rx="56" ry="7" fill="#294838" opacity=".12"/>
        <g fill="none" stroke="#4c7346" stroke-width="4" stroke-linecap="round"><path d="M113 179Q104 77 67 43m52 135q9-95 40-139m-40 132q-44-59-75-65m77 69q72-77 75-39t-45 88"/></g>
        <g fill="#668a4d" stroke="#47663a" stroke-width="1.5">
          <path d="M88 76C66 90 35 69 43 44c17-4 38 1 45 32Z"/><path d="M106 117C88 134 58 115 65 91c19-8 40 6 41 26Z"/><path d="M134 98c-6-34 22-61 44-39-1 20-17 38-44 39Z"/><path d="M128 137c1-34 34-47 47-25-8 18-25 27-47 25Z"/><path d="M72 125c-33 6-53-16-39-37 17-2 36 14 39 37Z"/><path d="M177 146c-7-23 13-42 30-27 3 16-10 27-30 27Z"/><path d="M176 184c-6-25 13-35 27-19-1 14-13 23-27 19Z"/><path d="M157 216c-20-23-6-44 14-37 11 16 3 31-14 37Z"/>
        </g>
        <g fill="none" stroke="#b9c679" stroke-width="3" stroke-linecap="round"><path d="m52 53 30 19m-6 29 25 13m62-46-23 24m20 25-25 14M43 100l23 19m130 10-14 13m12 28-14 9m-17 7-4 22"/></g>
        <path d="m79 173 9 53q30 11 60 0l12-53Z" fill="#d9c18a"/><path d="m87 181 8 42 17 3-5-45" fill="#e9d5a6"/>
        <rect x="74" y="166" width="92" height="18" rx="5" fill="#ead4a6"/><path d="M83 174h74" stroke="#f8e5c2" stroke-width="3"/>
        <path d="m117 192 8 7-8 7-8-7Zm17 18 7 6-7 6-7-6Z" fill="#bfaa78" opacity=".6"/>
      </symbol>

      <symbol id="art-cactus" viewBox="0 0 240 250">
        <ellipse cx="121" cy="234" rx="56" ry="7" fill="#294838" opacity=".12"/>
        <g stroke="#537452" stroke-width="2"><ellipse cx="89" cy="72" rx="26" ry="43" transform="rotate(-20 89 72)" fill="#94ab79"/><ellipse cx="146" cy="62" rx="24" ry="43" transform="rotate(18 146 62)" fill="#94ab79"/><ellipse cx="120" cy="133" rx="44" ry="60" fill="#789566"/></g>
        <path d="M107 81q-21 38-11 73" stroke="#afbf8d" stroke-width="6" fill="none" stroke-linecap="round"/>
        <g fill="#ece8c7"><circle cx="81" cy="47" r="2"/><circle cx="91" cy="62" r="2"/><circle cx="81" cy="79" r="2"/><circle cx="100" cy="85" r="2"/><circle cx="145" cy="36" r="2"/><circle cx="140" cy="59" r="2"/><circle cx="154" cy="74" r="2"/><circle cx="134" cy="83" r="2"/><circle cx="119" cy="104" r="2"/><circle cx="101" cy="121" r="2"/><circle cx="136" cy="122" r="2"/><circle cx="120" cy="141" r="2"/><circle cx="101" cy="156" r="2"/><circle cx="140" cy="155" r="2"/></g>
        <path d="m77 177 13 49q31 13 61 0l13-49Z" fill="#b97657"/><path d="m88 185 10 36 17 5-6-41Z" fill="#cc8c69"/><rect x="71" y="169" width="99" height="20" rx="6" fill="#d09270"/>
        <path d="M86 179h70" stroke="#e3ae8a" stroke-width="3" stroke-linecap="round"/>
      </symbol>

      <symbol id="art-calathea" viewBox="0 0 240 250">
        <ellipse cx="119" cy="234" rx="55" ry="7" fill="#294838" opacity=".12"/>
        <g stroke="#4c6746" stroke-width="3" fill="none"><path d="M119 179 76 85m43 94 8-137m-8 137 58-88m-58 88-62-37m62 37 73-31"/></g>
        <g fill="#78905d" stroke="#3e6145" stroke-width="2"><path d="M82 117C31 98 33 53 55 51s56 14 27 66Z"/><path d="M126 97C88 65 97 18 124 21s47 39 2 76Z"/><path d="M148 122c-16-49 16-87 40-68s5 60-40 68Z"/><path d="M94 164c-46 10-80-15-66-38s57-15 66 38Z"/><path d="M145 173c-3-47 31-77 57-55s-14 56-57 55Z"/></g>
        <g stroke="#b7c491" stroke-width="4" fill="none" stroke-linecap="round"><path d="m57 61 24 46m-30-33 21 1m-15 13 22 0m48-55-2 53m-11-39 11 10 13-9m-26 12 13 12 14-10"/><path d="m182 66-28 45m22-33-20 4m11 12-17 2m-109 32 41 29m-29-30 7 14m11-12 6 20"/><path d="m76 134 1 18m113-27-34 37m26-31-18 3m8 12-16 2"/></g>
        <path d="m80 176 11 48q28 14 58 0l11-48Z" fill="#998b9e"/><path d="m88 183 10 38 14 6-6-44Z" fill="#b3a4b5"/><rect x="74" y="167" width="92" height="21" rx="6" fill="#b4a4b5"/><path d="M85 177h65" stroke="#d3c6d2" stroke-width="3" stroke-linecap="round"/>
      </symbol>
    </defs>
  </svg>

  <div class="app-shell">
    <aside class="sidebar">
      <a class="brand" href="#today" aria-label="Moss home">
        <svg class="brand-mark" viewBox="0 0 32 36" aria-hidden="true"><path d="M16 31V13M16 22C3 22 3 8 3 8s14 0 13 14M16 16C16 4 29 3 29 3s1 14-13 13"/></svg>
        <span>moss<span class="brand-dot">.</span></span>
      </a>
      <span class="mobile-caption">a little room to grow</span>
      <nav class="navigation" aria-label="Main navigation">
        <button class="nav-button active" type="button" data-view="today" aria-current="page"><svg class="icon" aria-hidden="true"><use href="#icon-sun"/></svg><span>Today</span><span class="nav-count" id="navCount">3</span></button>
        <button class="nav-button" type="button" data-view="plants"><svg class="icon" aria-hidden="true"><use href="#icon-pot"/></svg><span>My plants</span></button>
      </nav>
      <div class="sidebar-note">
        <svg class="small-sprout" viewBox="0 0 90 100" aria-hidden="true"><path d="M44 84V39" stroke="#52764a" stroke-width="3" fill="none"/><path d="M44 62C12 63 14 29 14 29s34 1 30 33" fill="#b6c28e"/><path d="M45 44C44 17 73 17 73 17S79 43 45 44" fill="#739265"/><path d="M29 86q15-6 31 0" stroke="#b6c28e" stroke-width="3" fill="none" stroke-linecap="round"/></svg>
        <p>Small rituals.<br>Happy roots.</p>
        <span id="saveStatus">Your care, kept on this device.</span>
      </div>
    </aside>

    <main id="main" tabindex="-1">
      <div id="todayView">
        <header class="page-header">
          <p class="eyebrow"><span class="tiny-sun" aria-hidden="true">✳</span> Tuesday, September 22</p>
          <h1 id="todayHeading" tabindex="-1">Good things<br>grow <em>slowly.</em></h1>
          <p class="intro" id="intro">A sip, a turn, a little attention. You’ve got this.</p>
        </header>
        <section class="care-section" aria-labelledby="queueHeading">
          <div class="section-heading">
            <h2 id="queueHeading" tabindex="-1">Today’s tending</h2>
            <span class="count-label" id="queueCount">3 little things</span>
          </div>
          <div class="care-progress"><span id="progressText">0 of 3 cared for</span><div class="progress-track" role="progressbar" aria-label="Today's care completed" aria-valuemin="0" aria-valuemax="3" aria-valuenow="0" id="progressBar"><span id="progressFill"></span></div></div>
          <div id="todayQueue"></div>
          <div id="completedSection"></div>
        </section>
        <section class="upcoming-section" aria-labelledby="upcomingHeading">
          <div class="section-heading"><h2 id="upcomingHeading">On the horizon</h2><span class="count-label">Tomorrow</span></div>
          <div id="upcomingQueue"></div>
        </section>
        <p class="closing-note"><svg class="icon" aria-hidden="true"><use href="#icon-leaf"/></svg>No perfect plant parents here. Just a little care.</p>
      </div>

      <div id="plantsView" hidden>
        <header class="page-header"><p class="eyebrow"><span class="tiny-sun" aria-hidden="true">✳</span> Your little green world</p><h1 id="plantsHeading" tabindex="-1">Meet your<br><em>roommates.</em></h1><p class="intro">Four different personalities. All rooting for you.</p></header>
        <section aria-labelledby="collectionHeading"><div class="section-heading"><h2 id="collectionHeading">My plants</h2><span class="count-label">4 little lives</span></div><div class="plant-collection" id="plantCollection"></div></section>
      </div>
      <noscript><p class="no-script">Moss needs JavaScript for its care queue. Turn it on to view your four plants, record care, and snooze reminders.</p></noscript>
      <p id="sessionNote" class="storage-note" role="status" hidden>Care is kept for this visit. This browser couldn’t save it for next time.</p>
    </main>

    <aside class="companion" aria-label="Your weekly rhythm and care note">
      <section class="rhythm-panel" aria-labelledby="rhythmHeading">
        <div class="rhythm-title"><h2 id="rhythmHeading">A gentle rhythm</h2><svg class="icon" aria-hidden="true"><use href="#icon-sun"/></svg></div>
        <p class="supporting-text">This week, one little thing at a time.</p>
        <ol class="week-chart" id="weekChart" aria-label="Planned care reminders this week"></ol>
        <div class="chart-legend"><span><i class="legend-dot" aria-hidden="true"></i>Today</span><span>Mon — Sun</span></div>
        <p class="rhythm-footnote">A rhythm, not a race.</p>
      </section>
      <section class="care-note" aria-labelledby="careNoteHeading">
        <div class="note-top"><span class="eyebrow">A leaf of advice</span><svg class="icon" aria-hidden="true"><use href="#icon-leaf"/></svg></div>
        <h2 id="careNoteHeading">Get to know<br>your green.</h2>
        <p>Check a plant’s light and last watering before you tend to it. Little observations tell a story.</p>
        <button type="button" class="text-button" data-view="plants">Visit your plants <svg class="icon" aria-hidden="true"><use href="#icon-arrow"/></svg></button>
        <div class="windowsill" aria-hidden="true"><div class="window-arch"><span class="window-cross"></span><span class="window-sun"></span></div><svg class="sill-plant"><use href="#art-pothos"/></svg><svg class="sill-plant small"><use href="#art-cactus"/></svg><span class="sill"></span></div>
      </section>
      <div class="companion-footer"><span class="little-star" aria-hidden="true">✳</span><p>Growing at your own pace<br>looks good on you.</p></div>
    </aside>
  </div>

  <dialog id="plantDialog" class="plant-dialog" aria-labelledby="detailName">
    <button type="button" class="close-button" id="closeDialog" aria-label="Close plant details" autofocus><svg class="icon" aria-hidden="true"><use href="#icon-close"/></svg></button>
    <div id="dialogContent"></div>
  </dialog>

  <div class="toast" id="toast" hidden>
    <span class="toast-icon" aria-hidden="true"><svg class="icon"><use href="#icon-check"/></svg></span>
    <span id="toastMessage"></span>
    <button id="undoButton" type="button">Undo</button>
    <button id="dismissToast" class="toast-dismiss" type="button" aria-label="Dismiss undo notification"><svg class="icon" aria-hidden="true"><use href="#icon-close"/></svg></button>
    <span class="toast-timer" id="toastTimer" aria-hidden="true"></span>
  </div>
  <p class="sr-only" id="announcer" role="status" aria-live="polite" aria-atomic="true"></p>
</body>
</html>

gpt-6.1-sol/13-frontend-playful/PLANTS.json

{
  "plants": [
    {"id":"fern","name":"Frida","species":"Boston fern","location":"Bathroom","task":"Water","due":"2 days overdue","urgency":4,"light":"Low, indirect","history":["Sep 19 · Misted","Sep 16 · Watered","Sep 12 · New frond"]},
    {"id":"pothos","name":"Orbit","species":"Golden pothos","location":"Bookshelf","task":"Rotate","due":"Today","urgency":2,"light":"Medium, indirect","history":["Sep 20 · Watered","Sep 14 · Rotated","Sep 10 · Wiped leaves"]},
    {"id":"cactus","name":"Dot","species":"Bunny ears cactus","location":"South window","task":"Check soil","due":"Today","urgency":1,"light":"Bright, direct","history":["Sep 08 · Watered","Sep 01 · New pad noted","Aug 22 · Rotated"]},
    {"id":"calathea","name":"Drama","species":"Calathea orbifolia","location":"Bedroom","task":"Mist","due":"Tomorrow","urgency":0,"light":"Medium, filtered","history":["Sep 21 · Misted","Sep 18 · Watered","Sep 15 · Brown edge noted"]}
  ],
  "week": [1,3,2,4,2,1,3]
}

gpt-6.1-sol/13-frontend-playful/styles.css

@charset "UTF-8";

:root {
  --paper: #f6f3e9;
  --paper-bright: #fffcf4;
  --ink: #2e493b;
  --muted: #64695b;
  --green: #426848;
  --green-dark: #31533c;
  --sage: #e7ebd9;
  --sage-deep: #d8dfc5;
  --lime: #dce2a7;
  --lime-light: #eef0d1;
  --line: #d9dccd;
  --clay: #a54b2d;
  --peach: #f2dfcd;
  --white: #fffdf6;
  --fern-back: #d6dec1;
  --pothos-back: #ede7ce;
  --cactus-back: #eedbcc;
  --calathea-back: #e5dfe6;
  --shadow: #23372d26;
  --focus: #a34223;
  --display: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --body: "Trebuchet MS", "Avenir Next", Avenir, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; scrollbar-gutter: stable; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button { color: inherit; }
a { color: inherit; }
button, a, summary { touch-action: manipulation; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h2 { font-size: 19px; letter-spacing: -.45px; line-height: 1.3; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 21px; height: 21px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 20; background: var(--ink); color: var(--white); padding: 12px 20px; border-radius: 8px; }
.skip-link:focus { top: 16px; }
.app-shell { max-width: 1430px; margin: auto; padding: 42px 48px 32px; display: grid; grid-template-columns: 180px minmax(0, 1fr) 292px; column-gap: 56px; align-items: start; }
.sidebar { position: sticky; top: 42px; min-height: calc(100dvh - 80px); display: flex; flex-direction: column; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; align-self: flex-start; line-height: 1; }
.brand > span { font: 700 45px/.95 var(--display); letter-spacing: -3px; }
.brand-dot { color: var(--clay); }
.brand-mark { width: 26px; height: 33px; fill: var(--green); stroke: var(--green); stroke-width: 1.4; }
.mobile-caption { display: none; }
.navigation { display: flex; flex-direction: column; gap: 9px; margin-top: 74px; }
.nav-button { display: flex; gap: 13px; align-items: center; min-height: 49px; padding: 10px 15px; border: 0; border-radius: 12px 19px 19px 12px; background: transparent; font-weight: 700; text-align: left; }
.nav-button:hover { background: var(--sage); }
.nav-button.active { background: var(--sage-deep); }
.nav-count { margin-left: auto; min-width: 23px; height: 23px; display: grid; place-items: center; background: var(--paper-bright); border-radius: 50%; font-size: 12px; }
.sidebar-note { margin-top: auto; padding: 72px 14px 0; }
.small-sprout { width: 78px; height: 87px; margin: 0 0 10px -7px; transform: rotate(-5deg); }
.sidebar-note p { font: 22px/1.35 var(--display); letter-spacing: -.3px; }
.sidebar-note > span { display: block; margin-top: 20px; max-width: 137px; color: var(--muted); font-size: 11px; }
main { min-width: 0; }
.page-header { padding: 5px 0 35px; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; }
.page-header .eyebrow { display: flex; align-items: center; gap: 9px; }
.tiny-sun { color: var(--clay); font-size: 23px; line-height: 1; font-weight: 400; }
h1 { margin-top: 19px; font: 52px/1.03 var(--display); letter-spacing: -2.3px; }
h1 em { font-weight: 400; }
.intro { margin-top: 18px; color: var(--muted); font-size: 14px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.count-label { color: var(--muted); font-size: 12px; white-space: nowrap; }
.care-progress { display: flex; align-items: center; gap: 13px; margin-top: 9px; margin-bottom: 22px; font-size: 11px; color: var(--muted); }
.progress-track { height: 4px; background: var(--line); width: 82px; border-radius: 9px; overflow: hidden; }
.progress-track > span { display: block; height: 100%; background: var(--green); width: 0; transition: width 350ms ease; }
.urgent-plant { position: relative; isolation: isolate; overflow: hidden; min-height: 284px; padding: 25px 27px 26px; border-radius: 26px 26px 70px 26px; background: var(--sage); }
.urgent-plant::before { content: ""; position: absolute; z-index: -1; width: 250px; height: 246px; right: -24px; bottom: 8px; background: var(--sage-deep); border-radius: 49% 42% 38% 53%; transform: rotate(-14deg); }
.urgent-copy { position: relative; z-index: 1; width: 65%; }
.overdue-label { display: inline-flex; align-items: center; gap: 6px; color: var(--clay); font-size: 11px; font-weight: 700; letter-spacing: .25px; }
.overdue-label .icon { width: 14px; height: 14px; }
.urgent-plant h3 { margin-top: 13px; max-width: 220px; font: 33px/1.12 var(--display); letter-spacing: -1px; }
.plant-meta { margin-top: 7px; color: var(--muted); font-size: 11px; }
.details-link { border: 0; background: transparent; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 9px 0; font-size: 12px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.details-link .icon { width: 15px; height: 15px; }
.details-link:hover { color: var(--clay); }
.urgent-art { position: absolute; width: 207px; height: 226px; right: -4px; top: 29px; transform: rotate(4deg); pointer-events: none; }
.plant-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.urgent-plant .plant-actions { position: relative; z-index: 2; margin-top: 16px; }
.primary-button, .secondary-button { min-height: 44px; border: 1px solid transparent; border-radius: 10px; padding: 10px 16px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: background 160ms ease, transform 160ms ease; }
.primary-button { background: var(--green-dark); color: var(--white); }
.primary-button:hover { background: var(--ink); transform: translateY(-1px); }
.primary-button .icon, .secondary-button .icon { width: 17px; height: 17px; }
.secondary-button { background: transparent; border-color: var(--green); }
.secondary-button:hover { background: var(--sage-deep); }
.task-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 17px; padding: 23px 0; border-bottom: 1px solid var(--line); }
.art-puck { height: 86px; width: 76px; border-radius: 48% 48% 41% 42%; background: var(--pothos-back); display: grid; place-items: center; align-self: start; }
.art-puck.cactus { background: var(--cactus-back); border-radius: 44% 50% 47% 35%; }
.art-puck.fern { background: var(--fern-back); }
.art-puck.calathea { background: var(--calathea-back); }
.art-puck > svg { width: 82px; height: 86px; transform: translateY(-3px); }
.task-content { min-width: 0; }
.task-name { display: flex; align-items: baseline; gap: 7px; }
.task-name h3 { font-size: 17px; line-height: 1.2; letter-spacing: -.25px; }
.task-location { font-size: 11px; color: var(--muted); }
.task-description { margin-top: 4px; font-size: 13px; }
.task-row .plant-meta { margin-top: 2px; }
.row-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 9px; margin-top: 10px; }
.task-row .primary-button { background: var(--lime-light); color: var(--ink); padding: 9px 13px; }
.task-row .primary-button:hover { background: var(--lime); }
.task-row .secondary-button { border: 0; padding: 9px 11px; color: var(--muted); font-weight: 400; }
.task-row .secondary-button:hover { background: var(--sage); color: var(--ink); }
.task-row .details-link { font-size: 11px; min-height: 44px; }
.upcoming-section { margin-top: 28px; }
.upcoming-section h2 { font-size: 17px; }
.upcoming-row { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 13px 17px; background: var(--peach); border-radius: 13px 28px 13px 13px; }
.upcoming-row .art-puck { height: 60px; width: 53px; background: transparent; flex-shrink: 0; }
.upcoming-row .art-puck > svg { width: 61px; height: 64px; }
.upcoming-copy { flex: 1; min-width: 0; }
.upcoming-copy h3 { font-size: 14px; }
.upcoming-copy p { color: var(--muted); font-size: 12px; }
.upcoming-row .details-link { min-height: 44px; flex-shrink: 0; }
.deferred-tag { display: block; color: var(--clay); font-size: 10px; margin-top: 2px; }
.closing-note { margin-top: 24px; display: flex; gap: 8px; align-items: center; justify-content: center; font: italic 13px/1.5 var(--display); color: var(--muted); }
.closing-note .icon { width: 15px; height: 15px; }
.companion { padding-top: 61px; }
.rhythm-panel { padding: 24px 24px 18px; background: var(--paper-bright); border: 1px solid var(--line); border-radius: 19px 19px 19px 42px; }
.rhythm-title { display: flex; justify-content: space-between; align-items: center; }
.rhythm-title h2 { font-size: 18px; }
.rhythm-title .icon { color: var(--green); }
.supporting-text { color: var(--muted); font-size: 11px; margin-top: 7px; }
.week-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; padding: 0; margin: 23px 0 14px; list-style: none; }
.week-day { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.week-number { color: var(--muted); font-size: 10px; }
.week-bar-space { display: flex; align-items: flex-end; height: 68px; width: 100%; justify-content: center; }
.week-bar { display: block; width: 19px; background: var(--sage-deep); border-radius: 9px 9px 3px 3px; position: relative; overflow: hidden; }
.week-day.is-today .week-bar { background: var(--green); }
.week-bar-completed { position: absolute; bottom: 0; left: 0; right: 0; background: var(--lime); }
.week-letter { color: var(--muted); font-size: 11px; min-height: 21px; min-width: 21px; text-align: center; }
.week-day.is-today .week-letter { background: var(--ink); border-radius: 50%; color: var(--white); }
.chart-legend { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }
.chart-legend > span { display: flex; align-items: center; gap: 6px; }
.legend-dot { height: 7px; width: 7px; border-radius: 50%; background: var(--green); }
.rhythm-footnote { text-align: center; padding-top: 17px; margin-top: 16px; border-top: 1px dashed var(--line); font: italic 14px var(--display); color: var(--muted); }
.care-note { margin-top: 24px; border-radius: 45px 18px 18px 18px; background: var(--lime); padding: 28px 26px 0; overflow: hidden; }
.note-top { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.note-top .eyebrow { font-size: 9px; letter-spacing: .9px; }
.note-top .icon { width: 17px; height: 17px; }
.care-note h2 { margin-top: 18px; font: 29px/1.06 var(--display); letter-spacing: -.9px; }
.care-note p { margin-top: 13px; font-size: 12px; line-height: 1.7; }
.text-button { display: inline-flex; align-items: center; gap: 9px; border: 0; background: transparent; padding: 13px 0; min-height: 44px; font-size: 12px; font-weight: 700; }
.text-button .icon { width: 17px; height: 17px; transition: transform 150ms ease; }
.text-button:hover .icon { transform: translateX(4px); }
.windowsill { height: 159px; margin: 0 -8px; position: relative; }
.window-arch { position: absolute; width: 148px; height: 162px; border: 4px solid var(--paper-bright); border-bottom: none; border-radius: 80px 80px 0 0; background: var(--lime-light); left: 28px; top: 12px; overflow: hidden; }
.window-cross { position: absolute; left: calc(50% - 2px); top: 0; bottom: 0; width: 4px; background: var(--paper-bright); }
.window-cross::after { content: ""; position: absolute; width: 144px; height: 4px; background: var(--paper-bright); top: 76px; left: -71px; }
.window-sun { position: absolute; height: 33px; width: 33px; border-radius: 50%; background: var(--peach); right: 14px; top: 32px; }
.sill-plant { position: absolute; width: 126px; height: 137px; bottom: -3px; left: 1px; }
.sill-plant.small { width: 100px; height: 111px; left: 125px; bottom: -2px; }
.sill { position: absolute; height: 5px; background: var(--green); bottom: 0; left: -18px; right: -18px; border-radius: 4px; }
.companion-footer { margin-top: 21px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.little-star { font-size: 32px; color: var(--clay); }
.companion-footer p { color: var(--muted); font: italic 12px/1.45 var(--display); }
.completed-section { margin-top: 15px; border-bottom: 1px solid var(--line); padding-bottom: 13px; }
.completed-section summary { display: flex; align-items: center; gap: 7px; min-height: 44px; cursor: pointer; color: var(--green); font-size: 12px; }
.completed-section summary::after { content: "+"; margin-left: auto; font-size: 19px; }
.completed-section[open] summary::after { content: "−"; }
.completed-section summary .icon { width: 16px; height: 16px; }
.completed-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 12px; }
.completed-row > span { display: flex; align-items: center; gap: 8px; }
.completed-row .icon { width: 15px; height: 15px; }
.all-done { position: relative; padding: 25px 28px 28px; text-align: center; background: var(--sage); border-radius: 28px 28px 65px 28px; }
.done-illustration { display: block; margin: 0 auto 9px; width: 152px; height: 143px; }
.all-done h3 { font: 29px/1.2 var(--display); letter-spacing: -.9px; }
.all-done p { max-width: 320px; margin: 12px auto 17px; color: var(--muted); font-size: 13px; }
.plant-collection { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; margin-top: 22px; }
.collection-plant { display: flex; flex-direction: column; align-items: stretch; text-align: left; background: transparent; border: 0; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.collection-art { position: relative; display: flex; justify-content: center; padding: 7px 0 0; height: 190px; border-radius: 48% 48% 18px 18px; background: var(--fern-back); }
.collection-art.pothos { background: var(--pothos-back); border-radius: 22px 48% 22px 22px; }
.collection-art.cactus { background: var(--cactus-back); border-radius: 22px 22px 22px 48%; }
.collection-art.calathea { background: var(--calathea-back); }
.collection-art svg { width: 165px; height: 181px; transition: transform 200ms ease; }
.collection-plant:hover .collection-art svg { transform: rotate(-4deg); }
.collection-name { font-size: 19px; font-weight: 700; margin-top: 13px; display: flex; align-items: center; justify-content: space-between; }
.collection-name .icon { width: 18px; height: 18px; }
.collection-meta { font-size: 11px; color: var(--muted); }
.collection-status { align-self: flex-start; display: inline-flex; margin-top: 9px; padding: 3px 7px; background: var(--sage); color: var(--ink); font-size: 10px; border-radius: 5px; }
.collection-status.overdue { background: var(--peach); color: var(--clay); }
.plant-dialog { width: min(490px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 0; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 20px 70px var(--shadow); overscroll-behavior: contain; }
.plant-dialog::backdrop { background: var(--shadow); backdrop-filter: blur(3px); }
body.modal-open { overflow: hidden; }
.close-button { position: sticky; top: 14px; float: right; margin: 14px 14px -58px 0; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--paper-bright); border-radius: 50%; }
.close-button:hover { background: var(--sage); }
.detail-hero { display: flex; align-items: center; gap: 15px; padding: 44px 30px 23px; background: var(--fern-back); border-radius: 28px 28px 0 0; }
.detail-hero.pothos { background: var(--pothos-back); }
.detail-hero.cactus { background: var(--cactus-back); }
.detail-hero.calathea { background: var(--calathea-back); }
.detail-art { width: 134px; height: 155px; flex-shrink: 0; }
.detail-hero h2 { font: 38px/1 var(--display); letter-spacing: -1px; }
.detail-hero .plant-meta { font-size: 12px; line-height: 1.8; margin-top: 9px; }
.detail-body { padding: 26px 30px 30px; }
.detail-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-bottom: 23px; border-bottom: 1px solid var(--line); }
.fact-title { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; }
.fact-title .icon { width: 16px; height: 16px; }
.fact-value { margin-top: 8px; color: var(--muted); font-size: 12px; }
.water-log-button { margin-top: 7px; padding: 7px 0; min-height: 44px; border: 0; background: transparent; display: inline-flex; gap: 7px; align-items: center; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.water-log-button .icon { width: 14px; height: 14px; }
.detail-reminder { padding: 23px 0; border-bottom: 1px solid var(--line); }
.detail-reminder h3 { font-size: 14px; }
.detail-reminder p { margin-top: 7px; font-size: 12px; color: var(--muted); }
.detail-reminder .plant-actions { margin-top: 13px; }
.history-heading { margin-top: 24px; font-size: 16px; }
.history-intro { color: var(--muted); font-size: 11px; margin-top: 5px; }
.history-list { list-style: none; padding: 0; margin: 16px 0 0; }
.history-list li { display: flex; align-items: start; gap: 10px; font-size: 12px; padding: 10px 0; }
.history-list li + li { border-top: 1px dashed var(--line); }
.history-icon { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--sage); }
.history-icon .icon { width: 14px; height: 14px; }
.history-observation { background: var(--peach); }
.history-date { display: block; color: var(--muted); font-size: 10px; }
.history-tag { margin-left: 7px; color: var(--clay); font-size: 10px; }
.toast { position: fixed; z-index: 10; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); width: max-content; min-height: 60px; padding: 9px 13px 9px 17px; color: var(--white); background: var(--ink); border-radius: 15px; box-shadow: 0 8px 28px var(--shadow); overflow: hidden; animation: toast-in 220ms ease both; }
.toast-icon { display: grid; place-items: center; height: 28px; width: 28px; color: var(--lime); border: 1px solid var(--green); border-radius: 50%; flex-shrink: 0; }
#toastMessage { font-size: 12px; }
#undoButton { background: var(--lime); color: var(--ink); border: 0; border-radius: 7px; min-width: 62px; min-height: 44px; font-size: 12px; font-weight: 700; margin-left: 6px; padding: 8px 12px; }
#undoButton:hover { background: var(--white); }
.toast-dismiss { min-height: 44px; min-width: 36px; display: grid; place-items: center; color: var(--white); background: transparent; border: 0; padding: 6px; }
.toast-dismiss .icon { width: 16px; height: 16px; }
.toast button:focus-visible { outline-color: var(--white); outline-offset: 2px; }
.toast-timer { position: absolute; bottom: 0; left: 0; height: 2px; background: var(--lime); width: 100%; }
.plant-dialog .toast { position: sticky; bottom: 0; left: auto; transform: none; max-width: none; width: auto; margin: 0 12px 12px; gap: 8px; }
.plant-dialog #toastMessage { flex: 1; }
.plant-dialog .toast-icon { display: none; }
.no-script { border: 1px solid var(--clay); background: var(--peach); padding: 20px; margin-top: 20px; }
.storage-note { margin-top: 20px; color: var(--muted); font-size: 12px; }
@keyframes toast-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

@media (min-width: 1440px) {
  .app-shell { column-gap: 65px; grid-template-columns: 185px minmax(0, 1fr) 310px; }
  .urgent-art { width: 232px; height: 247px; right: 6px; top: 18px; }
  .urgent-plant::before { width: 275px; right: -13px; }
  .urgent-plant h3 { font-size: 35px; }
}
@media (max-width: 1199px) {
  .app-shell { padding: 32px; grid-template-columns: 152px minmax(0, 1fr) 255px; column-gap: 30px; }
  .sidebar { top: 32px; }
  h1 { font-size: 47px; }
  .urgent-plant { padding: 23px; }
  .urgent-art { width: 169px; height: 202px; top: 49px; right: -13px; }
  .urgent-plant::before { width: 203px; height: 226px; }
  .urgent-copy { width: 70%; }
  .urgent-plant h3 { font-size: 30px; max-width: 190px; }
  .rhythm-panel { padding: 21px 19px 18px; }
  .care-note { padding: 27px 22px 0; }
  .task-row { column-gap: 12px; grid-template-columns: 63px minmax(0, 1fr); }
  .task-row .art-puck { width: 63px; height: 77px; }
  .task-row .art-puck > svg { width: 73px; height: 79px; }
  .task-location { display: none; }
}
@media (max-width: 999px) and (min-width: 701px) {
  .app-shell { grid-template-columns: 135px minmax(0, 1fr); column-gap: 32px; }
  .sidebar { grid-row: 1 / 3; }
  .companion { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 30px; }
  .care-note { margin-top: 0; }
  .care-note h2 { font-size: 26px; }
  .windowsill { height: 120px; }
  .companion-footer { grid-column: 1 / -1; margin-top: 0; }
  .urgent-art { width: 213px; height: 224px; right: 0; top: 31px; }
  .urgent-copy { width: 63%; }
  .urgent-plant h3 { max-width: 220px; font-size: 33px; }
}
@media (max-width: 700px) {
  .app-shell { display: block; max-width: 540px; padding: 23px 22px 106px; }
  .sidebar { position: static; min-height: 0; display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
  .brand > span { font-size: 38px; }
  .brand-mark { width: 23px; height: 28px; }
  .mobile-caption { display: block; font: italic 12px var(--display); color: var(--muted); }
  .sidebar-note { display: none; }
  .navigation { position: fixed; z-index: 5; bottom: 0; left: 0; right: 0; margin: 0; padding: 8px 24px calc(8px + env(safe-area-inset-bottom)); background: var(--paper-bright); border-top: 1px solid var(--line); flex-direction: row; justify-content: center; gap: 12px; }
  .nav-button { flex: 1; max-width: 220px; justify-content: center; min-height: 48px; border-radius: 13px; gap: 9px; font-size: 13px; }
  .nav-count { margin-left: 0; font-size: 11px; }
  .page-header { padding: 30px 0 30px; }
  .page-header .eyebrow { font-size: 10px; letter-spacing: .8px; }
  h1 { font-size: 43px; margin-top: 15px; letter-spacing: -1.7px; line-height: 1.03; }
  .intro { max-width: 300px; margin-top: 15px; font-size: 13px; }
  h2 { font-size: 18px; }
  .count-label { font-size: 11px; }
  .care-progress { margin-bottom: 18px; }
  .urgent-plant { min-height: 275px; padding: 23px 22px 22px; border-bottom-right-radius: 54px; }
  .urgent-copy { width: 70%; }
  .urgent-plant h3 { font-size: 31px; max-width: 193px; }
  .urgent-art { width: 173px; height: 209px; right: -12px; top: 38px; }
  .urgent-plant::before { width: 211px; height: 237px; bottom: 10px; }
  .urgent-plant .plant-actions { margin-top: 18px; }
  .urgent-plant .primary-button, .urgent-plant .secondary-button { padding: 10px 13px; }
  .task-row { padding: 21px 0; grid-template-columns: 65px minmax(0, 1fr); column-gap: 15px; }
  .task-row .art-puck { width: 65px; height: 80px; }
  .task-name h3 { font-size: 16px; }
  .task-description { font-size: 12px; }
  .row-bottom { gap: 0; margin-top: 8px; }
  .task-row .plant-actions { gap: 3px; }
  .task-row .primary-button { padding: 9px 11px; }
  .task-row .secondary-button { padding: 9px; }
  .task-row .details-link { min-height: 44px; padding: 9px 2px 9px 0; }
  .upcoming-section { margin-top: 25px; }
  .upcoming-row { padding: 11px 14px; gap: 10px; }
  .closing-note { font-size: 12px; margin-top: 21px; }
  .companion { padding-top: 30px; }
  .rhythm-panel { padding: 22px 25px 18px; border-bottom-left-radius: 32px; }
  .rhythm-title h2 { font-size: 18px; }
  .supporting-text { font-size: 12px; }
  .week-chart { gap: 16px; margin-top: 20px; }
  .week-bar { width: 24px; }
  .week-bar-space { height: 56px; }
  .rhythm-footnote { margin-top: 14px; padding-top: 13px; }
  .care-note { display: none; }
  .companion-footer { margin-top: 18px; }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom)); gap: 8px; padding: 8px 9px 8px 12px; max-width: calc(100% - 24px); }
  .toast-icon { width: 24px; height: 24px; }
  #toastMessage { max-width: 170px; font-size: 11px; }
  #undoButton { margin-left: 0; min-width: 56px; padding: 8px 9px; }
  .toast-dismiss { min-width: 30px; }
  .plant-dialog { border-radius: 25px; max-height: calc(100dvh - 30px); }
  .detail-hero { padding: 40px 23px 17px; gap: 8px; }
  .detail-art { width: 112px; height: 143px; }
  .detail-hero h2 { font-size: 35px; }
  .detail-body { padding: 24px; }
  .collection-art { height: 166px; }
  .collection-art svg { height: 160px; width: 146px; }
}
@media (max-width: 370px) {
  .app-shell { padding-inline: 17px; }
  .mobile-caption { font-size: 11px; }
  h1 { font-size: 40px; }
  .urgent-plant { padding-inline: 18px; }
  .urgent-plant h3 { font-size: 28px; max-width: 163px; }
  .urgent-art { width: 150px; right: -15px; }
  .urgent-plant .plant-meta { max-width: 155px; }
  .task-row { column-gap: 11px; grid-template-columns: 56px minmax(0, 1fr); }
  .task-row .art-puck { width: 56px; height: 75px; }
  .task-row .art-puck > svg { width: 64px; height: 74px; }
  .task-row .primary-button, .task-row .secondary-button { font-size: 11px; padding-inline: 8px; }
  .upcoming-row { gap: 8px; padding-inline: 11px; }
  .collection-art { height: 145px; }
  .collection-art svg { height: 142px; width: 128px; }
  .detail-hero { padding-inline: 17px; }
  .detail-art { width: 96px; }
  .detail-body { padding-inline: 20px; }
  .week-chart { gap: 10px; }
  .toast-icon { display: none; }
  #toastMessage { max-width: 145px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .week-bar, .progress-track, .collection-art { border: 1px solid CanvasText; }
  .week-day.is-today .week-bar, .progress-track > span { background: Highlight; }
  button { border: 1px solid ButtonText; }
}

gpt-6.1-sol/13-frontend-playful/verify-state.mjs

Binary file, not shown.

gpt-6.1-sol/13-frontend-playful/verify.mjs

Binary file, not shown.

muse/13-frontend-playful/RESPONSE.md

muse/13-frontend-playful/TASK.md

muse/13-frontend-playful/app.js

/* Moss — care queue logic. Data mirrors PLANTS.json; no network requests. */
(function () {
  "use strict";

  var DATA = {
    plants: [
      { id: "fern", name: "Frida", species: "Boston fern", location: "Bathroom", task: "Water", due: "2 days overdue", urgency: 4, light: "Low, indirect", history: ["Sep 19 · Misted", "Sep 16 · Watered", "Sep 12 · New frond"] },
      { id: "pothos", name: "Orbit", species: "Golden pothos", location: "Bookshelf", task: "Rotate", due: "Today", urgency: 2, light: "Medium, indirect", history: ["Sep 20 · Watered", "Sep 14 · Rotated", "Sep 10 · Wiped leaves"] },
      { id: "cactus", name: "Dot", species: "Bunny ears cactus", location: "South window", task: "Check soil", due: "Today", urgency: 1, light: "Bright, direct", history: ["Sep 08 · Watered", "Sep 01 · New pad noted", "Aug 22 · Rotated"] },
      { id: "calathea", name: "Drama", species: "Calathea orbifolia", location: "Bedroom", task: "Mist", due: "Tomorrow", urgency: 0, light: "Medium, filtered", history: ["Sep 21 · Misted", "Sep 18 · Watered", "Sep 15 · Brown edge noted"] }
    ],
    week: [1, 3, 2, 4, 2, 1, 3]
  };

  var WATER = {
    fern: { guide: "Keep soil evenly moist; water every 3–4 days and mist often.", cadence: "Every 3–4 days" },
    pothos: { guide: "Water when the top 5 cm run dry, about weekly. Forgives a missed week.", cadence: "About weekly" },
    cactus: { guide: "Soak only when bone-dry, about monthly. Today is just a soil check.", cadence: "About monthly" },
    calathea: { guide: "Keep lightly moist with filtered water; mist on dry days.", cadence: "Mist daily, water weekly" }
  };

  var QUIRKS = {
    fern: "Frida sulks fastest — crispy tips mean she waited too long.",
    pothos: "Orbit leans toward the window like it pays rent there.",
    cactus: "Dot has touched no water in weeks and feels superior about it.",
    calathea: "Drama folds her leaves at night. Asleep, not mad."
  };

  var TIPS = [
    "Calatheas fold their leaves up at night like hands. If Drama looks droopy after dark, she\u2019s just asleep \u2014 not mad at you.",
    "Boston ferns adore steamy bathrooms. Frida\u2019s crispy tips usually mean dry air, not just dry soil.",
    "Pothos tell you when they\u2019re thirsty: leaves go a little limp. Orbit forgives almost everything else.",
    "Bunny-ear cacti want a good soak, then total neglect. When in doubt, put the watering can down."
  ];

  var POT_SVG = {
    fern: '<svg viewBox="0 0 64 64" focusable="false" aria-hidden="true"><path d="M22 40c-5-14 0-26 9-33-1 11-2 22-3 33z" fill="#3e6b4f"/><path d="M32 40c-5-12-4-25 2-34 1 11 1 23 4 34z" fill="#2a4a38"/><path d="M42 40c-1-10 2-20 8-26 0 9-1 18-2 26z" fill="#3e6b4f"/><path d="M18 40h28l-3 14H21z" fill="#d96c47" stroke="#2e2a23" stroke-width="2.5" stroke-linejoin="round"/></svg>',
    pothos: '<svg viewBox="0 0 64 64" focusable="false" aria-hidden="true"><path d="M26 22c-6-6-14-7-19-6 3 5 9 9 17 10z" fill="#3e6b4f"/><path d="M38 22c6-6 14-7 19-6-3 5-9 9-17 10z" fill="#2a4a38"/><circle cx="32" cy="20" r="7" fill="#3e6b4f"/><path d="M20 34h24l-3 13H23z" fill="#e9b44c" stroke="#2e2a23" stroke-width="2.5" stroke-linejoin="round"/><path d="M26 47c0 5-3 7-6 8M38 47c0 5 3 7 6 8" stroke="#3e6b4f" stroke-width="2.5" stroke-linecap="round" fill="none"/></svg>',
    cactus: '<svg viewBox="0 0 64 64" focusable="false" aria-hidden="true"><rect x="26" y="12" width="12" height="24" rx="6" fill="#3e6b4f" stroke="#2e2a23" stroke-width="2.5"/><rect x="17" y="22" width="9" height="14" rx="4.5" fill="#3e6b4f" stroke="#2e2a23" stroke-width="2.5"/><rect x="38" y="22" width="9" height="14" rx="4.5" fill="#3e6b4f" stroke="#2e2a23" stroke-width="2.5"/><path d="M20 36h24l-3 13H23z" fill="#f3d9c8" stroke="#2e2a23" stroke-width="2.5" stroke-linejoin="round"/></svg>',
    calathea: '<svg viewBox="0 0 64 64" focusable="false" aria-hidden="true"><ellipse cx="32" cy="20" rx="8" ry="12" fill="#2a4a38"/><path d="M32 8v24M26 14l12 4M26 22l12-4" stroke="#dde3c8" stroke-width="1.6"/><ellipse cx="20" cy="26" rx="6" ry="9" fill="#3e6b4f" transform="rotate(-24 20 26)"/><ellipse cx="44" cy="26" rx="6" ry="9" fill="#3e6b4f" transform="rotate(24 44 26)"/><path d="M20 36h24l-3 13H23z" fill="#3e6b4f" stroke="#2e2a23" stroke-width="2.5" stroke-linejoin="round"/></svg>'
  };

  var DROP_SVG = '<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M8 1.5C8 1.5 3 7 3 10a5 5 0 0 0 10 0c0-3-5-8.5-5-8.5z" fill="currentColor" opacity=".9"/><circle cx="6.4" cy="10.4" r="1.3" fill="#fff" opacity=".8"/></svg>';
  var SNOOZE_SVG = '<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><circle cx="8" cy="9" r="5.5" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M8 6.4V9l1.8 1.2" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M5.5 1.5h5M8 1.5V3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>';
  var CHEV_SVG = '<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M3.5 6l4.5 4.5L12.5 6" fill="none" stroke="#2e2a23" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>';

  var DAYS = ["M", "T", "W", "T", "F", "S", "S"];
  var DAY_NAMES = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];

  var reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  // ---- state ----
  var state = {}; // id -> "todo" | "done" | "snoozed"
  var openId = "fern"; // overdue plant starts expanded so its story is visible
  var lastAction = null;
  var toastTimer = null;

  DATA.plants.forEach(function (p) { state[p.id] = "todo"; });

  // ---- element refs ----
  var queueEl = document.getElementById("queue");
  var allDoneEl = document.getElementById("allDone");
  var doneListEl = document.getElementById("doneList");
  var doneItemsEl = document.getElementById("doneItems");
  var progressCount = document.getElementById("progressCount");
  var progressBar = document.getElementById("progressBar");
  var progressFill = document.getElementById("progressFill");
  var queueSub = document.getElementById("queueSub");
  var live = document.getElementById("live");
  var toast = document.getElementById("toast");
  var toastMsg = document.getElementById("toastMsg");
  var toastTimerBar = document.getElementById("toastTimer");
  var undoBtn = document.getElementById("undoBtn");
  var toastClose = document.getElementById("toastClose");

  function plantById(id) {
    for (var i = 0; i < DATA.plants.length; i++) if (DATA.plants[i].id === id) return DATA.plants[i];
    return null;
  }

  function lastWatered(p) {
    for (var i = 0; i < p.history.length; i++) {
      if (/watered/i.test(p.history[i])) return p.history[i];
    }
    return null;
  }

  function esc(s) {
    return String(s).replace(/[&<>"']/g, function (c) {
      return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c];
    });
  }

  function dueClass(due) {
    if (/overdue/i.test(due)) return "is-overdue";
    if (/today/i.test(due)) return "is-today";
    return "";
  }

  function dueLabel(p) {
    if (state[p.id] === "snoozed") return "Snoozed · back tomorrow";
    return p.due;
  }

  function sortedPlants() {
    return DATA.plants.slice().sort(function (a, b) {
      var sa = state[a.id], sb = state[b.id];
      var rank = function (s) { return s === "todo" ? 0 : s === "snoozed" ? 1 : 2; };
      if (rank(sa) !== rank(sb)) return rank(sa) - rank(sb);
      return b.urgency - a.urgency;
    });
  }

  // ---- render queue ----
  function render() {
    var plants = sortedPlants();
    var todo = plants.filter(function (p) { return state[p.id] === "todo"; });
    var handled = plants.filter(function (p) { return state[p.id] !== "todo"; });

    queueEl.innerHTML = "";
    plants.forEach(function (p, idx) {
      var st = state[p.id];
      var li = document.createElement("li");
      li.className = "plant" + (st === "done" ? " is-done" : st === "snoozed" ? " is-snoozed" : "");
      li.setAttribute("data-urgency", String(p.urgency));
      li.setAttribute("data-id", p.id);

      var isOpen = openId === p.id;
      var detailId = "detail-" + p.id;
      var triggerId = "trigger-" + p.id;
      var lw = lastWatered(p);

      var html = "";
      if (idx === 0 && st === "todo" && p.urgency >= 3) {
        html += '<span class="first-up" aria-hidden="true">First up · overdue</span>';
      }
      html += '<article class="plant-card" aria-label="' + esc(p.name + ", " + p.species) + '">';
      html += '<button type="button" class="disclosure" id="' + triggerId + '" aria-expanded="' + (isOpen ? "true" : "false") + '" aria-controls="' + detailId + '">';
      html += '<span class="pot" aria-hidden="true">' + (POT_SVG[p.id] || "") + "</span>";
      html += '<span><span class="plant-name">' + esc(p.name) + ' <span class="species">' + esc(p.species) + "</span></span>";
      html += '<span class="plant-meta">' + esc(p.location) + " · " + esc(p.light) + "</span></span>";
      html += '<span class="badges"><span class="chip chip-task">' + esc(p.task) + '</span> ';
      html += '<span class="chip chip-due ' + dueClass(dueLabel(p)) + '">' + esc(dueLabel(p)) + "</span></span>";
      html += '<span class="chev" aria-hidden="true">' + CHEV_SVG + "</span>";
      html += "</button>";

      html += '<div class="detail" id="' + detailId + '" role="region" aria-labelledby="' + triggerId + '"' + (isOpen ? "" : " hidden") + ">";
      html += '<dl class="facts">';
      html += '<div class="fact"><dt>Light</dt><dd>' + esc(p.light) + "</dd></div>";
      html += '<div class="fact"><dt>Water</dt><dd>' + esc(WATER[p.id].guide) +
        '<span class="last">Rhythm: ' + esc(WATER[p.id].cadence) + (lw ? " · Last: " + esc(lw) : "") + "</span></dd></div>";
      html += '<div class="fact"><dt>Note</dt><dd>' + esc(QUIRKS[p.id]) + "</dd></div>";
      html += "</dl>";
      html += '<h4 class="obs-heading">Observation history</h4><ul class="obs">';
      p.history.forEach(function (h) { html += "<li>" + esc(h) + "</li>"; });
      html += "</ul></div>";

      html += '<div class="actions">';
      if (st === "done") {
        html += '<button type="button" class="btn btn-snooze" data-act="reopen" data-id="' + p.id + '">Not yet, actually</button>';
        html += '<button type="button" class="mini-undo" data-act="reopen" data-id="' + p.id + '">moves back to the queue</button>';
      } else if (st === "snoozed") {
        html += '<button type="button" class="btn btn-water" data-act="watered" data-id="' + p.id + '">' + DROP_SVG + "Did it anyway</button>";
        html += '<button type="button" class="btn btn-snooze" data-act="reopen" data-id="' + p.id + '">' + SNOOZE_SVG + "Wake up</button>";
      } else {
        html += '<button type="button" class="btn btn-water" data-act="watered" data-id="' + p.id + '">' + DROP_SVG + esc(waterVerb(p)) + "</button>";
        html += '<button type="button" class="btn btn-snooze" data-act="snooze" data-id="' + p.id + '">' + SNOOZE_SVG + "Snooze</button>";
      }
      html += "</div></article>";
      li.innerHTML = html;
      queueEl.appendChild(li);
    });

    // disclosure toggles
    queueEl.querySelectorAll(".disclosure").forEach(function (btn) {
      btn.addEventListener("click", function () {
        var id = btn.closest("li").getAttribute("data-id");
        openId = (openId === id) ? null : id;
        render();
        var next = document.getElementById("trigger-" + id);
        if (next) next.focus();
      });
    });

    // actions (delegated)
    queueEl.querySelectorAll("[data-act]").forEach(function (btn) {
      btn.addEventListener("click", function () {
        handleAction(btn.getAttribute("data-act"), btn.getAttribute("data-id"), btn);
      });
    });

    // progress + all-done
    var doneCount = handled.length;
    var total = DATA.plants.length;
    progressCount.textContent = doneCount + " of " + total + " tended";
    progressBar.setAttribute("aria-valuenow", String(doneCount));
    progressFill.style.width = (doneCount / total * 100) + "%";

    if (todo.length === 0) {
      queueEl.hidden = true;
      allDoneEl.hidden = false;
      var snoozed = handled.filter(function (p) { return state[p.id] === "snoozed"; }).length;
      document.getElementById("allDoneCopy").textContent = snoozed === 0
        ? "Every plant is watered, misted, or spun toward the sun. Go enjoy the green."
        : "Every plant is handled — " + snoozed + " snoozed for a busier day. No guilt; Moss remembers.";
      queueSub.textContent = "All clear. Nicely tended.";
    } else {
      queueEl.hidden = false;
      allDoneEl.hidden = true;
      var first = todo[0];
      queueSub.textContent = /overdue/i.test(first.due)
        ? first.name + " is overdue — start at the top."
        : todo.length + " plant" + (todo.length === 1 ? "" : "s") + " left. " + first.name + " is next.";
    }

    renderDoneList(handled);
  }

  function renderDoneList(handled) {
    if (!doneListEl) return;
    // The done list only appears once the user asks to review the crew.
    if (!doneListOpen || !handled.length) { doneListEl.hidden = true; return; }
    doneListEl.hidden = false;
    doneItemsEl.innerHTML = "";
    handled.forEach(function (p) {
      var li = document.createElement("li");
      var label = state[p.id] === "done" ? "Tended" : "Snoozed";
      li.innerHTML = "<span><strong>" + esc(p.name) + "</strong> · " + esc(label) + "</span>";
      var b = document.createElement("button");
      b.type = "button";
      b.className = "mini-undo";
      b.textContent = "Undo";
      b.setAttribute("aria-label", "Undo " + label.toLowerCase() + " for " + p.name);
      b.addEventListener("click", function () { undoTo(p.id, "todo"); });
      li.appendChild(b);
      doneItemsEl.appendChild(li);
    });
  }

  var doneListOpen = false;

  function waterVerb(p) {
    if (/mist/i.test(p.task)) return "Misted";
    if (/rotate/i.test(p.task)) return "Rotated";
    if (/soil/i.test(p.task)) return "Checked";
    return "Watered";
  }

  // ---- actions + undo ----
  function handleAction(act, id, btn) {
    var p = plantById(id);
    if (!p) return;
    var prev = state[id];
    if (act === "watered") {
      state[id] = "done";
      burst(btn);
      showToast(p.name + " " + waterVerb(p).toLowerCase() + ". Lovely work.", { id: id, prev: prev });
      announce(p.name + " marked as " + waterVerb(p).toLowerCase() + ". Undo available.");
    } else if (act === "snooze") {
      state[id] = "snoozed";
      showToast(p.name + " snoozed until tomorrow. Moss will remind you.", { id: id, prev: prev });
      announce(p.name + " snoozed until tomorrow. Undo available.");
    } else if (act === "reopen") {
      state[id] = "todo";
      hideToast();
      announce(p.name + " is back in the queue.");
    }
    render();
  }

  function undoLast() {
    if (!lastAction) return;
    var p = plantById(lastAction.id);
    state[lastAction.id] = lastAction.prev;
    hideToast();
    render();
    announce(p ? p.name + " restored to the queue." : "Action undone.");
    lastAction = null;
  }

  function undoTo(id, st) {
    state[id] = st;
    hideToast();
    lastAction = null;
    render();
    var p = plantById(id);
    announce(p ? p.name + " restored to the queue." : "Undone.");
  }

  function showToast(msg, action) {
    lastAction = action;
    undoBtn.style.display = action ? "" : "none";
    toastMsg.textContent = msg;
    toast.hidden = false;
    if (toastTimer) window.clearTimeout(toastTimer);
    if (!reduceMotion) {
      toastTimerBar.classList.remove("go");
      void toastTimerBar.offsetWidth; // restart animation
      toastTimerBar.classList.add("go");
    }
    toastTimer = window.setTimeout(function () { hideToast(); lastAction = null; }, 6000);
  }

  function hideToast() {
    toast.hidden = true;
    if (toastTimer) { window.clearTimeout(toastTimer); toastTimer = null; }
  }

  function announce(msg) { live.textContent = ""; window.setTimeout(function () { live.textContent = msg; }, 30); }

  function burst(btn) {
    if (reduceMotion || !btn) return;
    var card = btn.closest(".plant-card");
    if (!card) return;
    var wrap = document.createElement("span");
    wrap.className = "burst";
    wrap.setAttribute("aria-hidden", "true");
    var r = btn.getBoundingClientRect();
    var cr = card.getBoundingClientRect();
    var cx = r.left - cr.left + r.width / 2;
    var cy = r.top - cr.top;
    for (var i = 0; i < 10; i++) {
      var d = document.createElement("i");
      if (i % 3 === 0) d.className = "leaf";
      d.style.left = cx + "px";
      d.style.top = cy + "px";
      d.style.setProperty("--dx", (Math.random() * 120 - 60) + "px");
      d.style.animationDelay = (Math.random() * 0.12) + "s";
      wrap.appendChild(d);
    }
    card.style.position = "relative";
    card.appendChild(wrap);
    window.setTimeout(function () { wrap.remove(); }, 1000);
  }

  undoBtn.addEventListener("click", undoLast);
  toastClose.addEventListener("click", function () { hideToast(); lastAction = null; });

  // Esc collapses the open detail panel
  document.addEventListener("keydown", function (e) {
    if (e.key === "Escape" && openId) {
      var id = openId;
      openId = null;
      render();
      var next = document.getElementById("trigger-" + id);
      if (next) next.focus();
    }
  });

  // ---- header date / greeting ----
  (function header() {
    var now = new Date();
    var h = now.getHours();
    var greet = h < 12 ? "Good morning, plant parent." : h < 18 ? "Good afternoon, plant parent." : "Good evening, plant parent.";
    document.getElementById("greeting").textContent = greet;
    var opts = { weekday: "long", month: "long", day: "numeric" };
    try {
      document.getElementById("datePill").textContent = now.toLocaleDateString(undefined, opts);
    } catch (e) {
      document.getElementById("datePill").textContent = "Today";
    }
  })();

  // ---- weekly rhythm ----
  (function rhythm() {
    var bars = document.getElementById("bars");
    var week = DATA.week;
    var max = Math.max.apply(null, week);
    var total = week.reduce(function (a, b) { return a + b; }, 0);
    // JS: 0=Sunday..6=Saturday → index into Mon-first array
    var todayIdx = (new Date().getDay() + 6) % 7;
    document.getElementById("rhythmTotal").textContent = total + " visits this week";
    week.forEach(function (v, i) {
      var li = document.createElement("li");
      if (i === todayIdx) li.className = "is-today";
      var pct = Math.round((v / max) * 100);
      li.innerHTML =
        '<span class="bar-col"><span class="bar' + (i === todayIdx ? " is-today" : "") + (v === max ? " is-max" : "") +
        '" style="height:' + Math.max(pct, 18) + '%" role="img" aria-label="' + DAY_NAMES[i] + ": " + v +
        ' care visits' + (i === todayIdx ? ", today" : "") + '"><span class="bar-val" aria-hidden="true">' + v + "</span></span></span>" +
        '<span class="day" aria-hidden="true">' + DAYS[i] + "</span>";
      bars.appendChild(li);
    });
    var busiest = week.indexOf(max);
    document.getElementById("rhythmCaption").textContent =
      DAY_NAMES[busiest] + " is the busy day — " + max + " little visits. " +
      DAY_NAMES[todayIdx] + " holds " + week[todayIdx] + ".";
  })();

  // ---- tips ----
  (function tips() {
    var idx = 0;
    var text = document.getElementById("tipText");
    document.getElementById("tipBtn").addEventListener("click", function () {
      idx = (idx + 1) % TIPS.length;
      text.textContent = TIPS[idx];
    });
  })();

  // ---- review / tomorrow / reset ----
  document.getElementById("reviewBtn").addEventListener("click", function () {
    doneListOpen = true;
    render();
    var h = doneListEl.querySelector(".done-heading");
    doneListEl.hidden = false;
    if (h) { h.setAttribute("tabindex", "-1"); h.focus({ preventScroll: false }); }
    document.getElementById("queueHeading").scrollIntoView({ behavior: reduceMotion ? "auto" : "smooth", block: "start" });
  });
  document.getElementById("tomorrowBtn").addEventListener("click", function () {
    announce("Tomorrow: Drama wants a mist, and Frida will want checking again. Moss will have the queue ready.");
    showToast("Tomorrow: Drama wants a mist. Queue preview coming at sunrise.", null);
  });
  document.getElementById("resetBtn").addEventListener("click", function () {
    DATA.plants.forEach(function (p) { state[p.id] = "todo"; });
    openId = "fern";
    doneListOpen = false;
    doneListEl.hidden = true;
    hideToast();
    lastAction = null;
    render();
    announce("Demo day restarted. All four plants are back in the queue.");
  });

  render();
})();

muse/13-frontend-playful/index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Moss — gentle plant-care companion</title>
<meta name="description" content="Moss is a gentle household plant-care companion. Today's care queue, plant details, and weekly rhythm.">
<meta name="theme-color" content="#fbf4e6">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a class="skip" href="#queueHeading">Skip to today's care queue</a>

<header class="site-header">
  <div class="wrap header-bar">
    <p class="brand">
      <span class="brand-mark" aria-hidden="true">
        <svg viewBox="0 0 32 32" width="28" height="28" focusable="false">
          <circle cx="16" cy="16" r="15" fill="#d96c47"/>
          <path d="M16 23c0-5 1-8.5 4.5-11C23 9.7 25 9 25 9c0 3-1.5 6-4.5 8.5" fill="#fbf4e6"/>
          <path d="M16 23c0-4-.8-7-3.8-9.2C9.8 12 8 11.6 8 11.6c.2 2.8 1.7 5.2 4.2 6.8" fill="#e9b44c"/>
          <path d="M16 23v-2.4" stroke="#2e2a23" stroke-width="1.8" stroke-linecap="round"/>
          <path d="M11 24.5h10l-1.2 3.2H12.2z" fill="#2e2a23"/>
        </svg>
      </span>
      <span class="brand-word">Moss <span class="brand-sub">plant-care companion</span></span>
    </p>
    <p class="date-pill" id="datePill">Today</p>
  </div>

  <div class="wrap hero">
    <div class="hero-copy">
      <p class="eyebrow" id="eyebrow">Today &middot; 4 small kindnesses</p>
      <h1 id="greeting">Good morning, plant parent.</h1>
      <p class="lede" id="lede">Frida is thirstiest &mdash; she&rsquo;s two days overdue. Start at the top and work down; Moss keeps score.</p>
      <div class="progress" role="group" aria-labelledby="progressLabel">
        <div class="progress-top">
          <span id="progressLabel" class="progress-label">Today&rsquo;s tending</span>
          <span class="progress-count" id="progressCount" aria-live="polite">0 of 4 tended</span>
        </div>
        <div class="progress-track" role="progressbar" aria-label="Plants tended today" aria-valuemin="0" aria-valuemax="4" aria-valuenow="0" id="progressBar">
          <span class="progress-fill" id="progressFill"></span>
          <span class="progress-pebbles" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
        </div>
      </div>
    </div>
    <div class="hero-art" aria-hidden="true">
      <svg viewBox="0 0 320 210" width="100%" height="auto" focusable="false">
        <rect x="14" y="14" width="292" height="182" rx="88" fill="#dde3c8"/>
        <rect x="14" y="14" width="292" height="182" rx="88" fill="none" stroke="#2e2a23" stroke-width="3"/>
        <rect x="34" y="150" width="252" height="14" rx="7" fill="#2e2a23"/>
        <!-- fern -->
        <g>
          <path d="M70 150c-6-22 2-40 14-50-2 16-4 34-4 50z" fill="#3e6b4f"/>
          <path d="M84 150c-8-18-6-38 2-52 2 16 2 34 6 52z" fill="#2a4a38"/>
          <path d="M96 150c-2-16 2-32 12-42-1 14-2 28-4 42z" fill="#3e6b4f"/>
          <path d="M62 150h48l-5 22H67z" fill="#d96c47" stroke="#2e2a23" stroke-width="3" stroke-linejoin="round"/>
        </g>
        <!-- pothos trailing -->
        <g>
          <path d="M140 150h44l-4 22h-36z" fill="#e9b44c" stroke="#2e2a23" stroke-width="3" stroke-linejoin="round"/>
          <path d="M150 150c-2-14-8-22-18-26 8-2 20 4 24 18" fill="#3e6b4f"/>
          <path d="M166 150c4-16 12-24 24-26-4 8-10 18-18 24" fill="#2a4a38"/>
          <circle cx="141" cy="130" r="7" fill="#3e6b4f"/>
          <circle cx="185" cy="128" r="7" fill="#3e6b4f"/>
          <path d="M150 172c0 8-4 12-8 14M174 172c0 8 4 12 8 14" stroke="#3e6b4f" stroke-width="3" stroke-linecap="round" fill="none"/>
        </g>
        <!-- cactus -->
        <g>
          <rect x="212" y="112" width="20" height="38" rx="10" fill="#3e6b4f" stroke="#2e2a23" stroke-width="3"/>
          <rect x="200" y="124" width="14" height="26" rx="7" fill="#3e6b4f" stroke="#2e2a23" stroke-width="3"/>
          <rect x="230" y="124" width="14" height="26" rx="7" fill="#3e6b4f" stroke="#2e2a23" stroke-width="3"/>
          <path d="M204 150h44l-4 22h-36z" fill="#f3d9c8" stroke="#2e2a23" stroke-width="3" stroke-linejoin="round"/>
        </g>
        <circle cx="258" cy="52" r="13" fill="#e9b44c" stroke="#2e2a23" stroke-width="3"/>
        <path d="M52 66c4-6 10-6 14 0M60 58v-8" stroke="#2e2a23" stroke-width="2.5" stroke-linecap="round" fill="none"/>
      </svg>
    </div>
  </div>
  <div class="scallop" aria-hidden="true"></div>
</header>

<main class="wrap main" id="main">
  <section class="queue-col" aria-labelledby="queueHeading">
    <div class="queue-head">
      <div>
        <h2 id="queueHeading" tabindex="-1">Today&rsquo;s care queue</h2>
        <p class="queue-sub" id="queueSub">Most overdue first. Tap a plant for its story.</p>
      </div>
      <button class="link-btn" id="resetBtn" type="button">Restart demo day</button>
    </div>

    <ol class="queue" id="queue"></ol>

    <div class="alldone" id="allDone" hidden>
      <div class="alldone-art" aria-hidden="true">
        <svg viewBox="0 0 200 140" width="180" height="126" focusable="false">
          <ellipse cx="100" cy="120" rx="70" ry="12" fill="#dde3c8"/>
          <path d="M70 118h60l-6 18H76z" fill="#d96c47" stroke="#2e2a23" stroke-width="3" stroke-linejoin="round"/>
          <path d="M100 118c0-26 2-44 16-58 10-10 22-12 22-12 0 14-6 28-18 38" fill="#3e6b4f" stroke="#2e2a23" stroke-width="3" stroke-linejoin="round"/>
          <path d="M100 118c0-20-2-34-12-46-8-9-18-11-18-11 0 12 5 23 15 30" fill="#2a4a38"/>
          <path d="M52 40l6 6M148 40l-6 6M100 22v8" stroke="#e9b44c" stroke-width="5" stroke-linecap="round"/>
          <circle cx="100" cy="48" r="12" fill="#e9b44c" stroke="#2e2a23" stroke-width="3"/>
        </svg>
      </div>
      <h3>All tended. The jungle exhales.</h3>
      <p id="allDoneCopy">Every plant is watered, misted, or happily snoozed. Go enjoy the green.</p>
      <p class="next-up" id="nextUp">Tomorrow: Drama wants a mist. Dot is still living its best dry life.</p>
      <div class="alldone-actions">
        <button type="button" class="btn btn-primary" id="reviewBtn">Review the crew</button>
        <button type="button" class="btn btn-ghost" id="tomorrowBtn">Peek at tomorrow</button>
      </div>
    </div>

    <div class="done-list" id="doneList" hidden>
      <h3 class="done-heading">Tended &amp; snoozed</h3>
      <ul id="doneItems"></ul>
    </div>
  </section>

  <aside class="aside">
    <section class="card rhythm" aria-labelledby="rhythmHeading">
      <div class="card-top">
        <h2 id="rhythmHeading">Weekly rhythm</h2>
        <span class="chip chip-sun" id="rhythmTotal">16 visits this week</span>
      </div>
      <ol class="bars" id="bars" aria-label="Care tasks per day this week"></ol>
      <p class="rhythm-caption" id="rhythmCaption">Thursday is the busy day &mdash; four little visits.</p>
    </section>

    <section class="card tip" aria-labelledby="tipHeading">
      <h2 id="tipHeading">Field note</h2>
      <p id="tipText">Calatheas fold their leaves up at night like hands. If Drama looks droopy after dark, she&rsquo;s just asleep &mdash; not mad at you.</p>
      <button class="link-btn" id="tipBtn" type="button">Another note &rarr;</button>
    </section>

    <section class="card moss-thinks" aria-labelledby="thinksHeading">
      <h2 id="thinksHeading">How Moss thinks</h2>
      <ul>
        <li><strong>Overdue first.</strong> The thirstiest plant tops the queue.</li>
        <li><strong>Small wins.</strong> One tap logs water; snooze forgives a busy day.</li>
        <li><strong>Nothing vanishes.</strong> Every tap can be undone.</li>
      </ul>
    </section>
  </aside>
</main>

<footer class="wrap footer">
  <p>Moss &middot; made of soil &amp; sunlight. Your plants never saw this page &mdash; they just feel it.</p>
</footer>

<div class="toast-wrap" aria-live="polite" aria-atomic="true">
  <div class="toast" id="toast" hidden role="status">
    <span class="toast-dot" aria-hidden="true"></span>
    <p class="toast-msg" id="toastMsg">Logged.</p>
    <button class="btn btn-toast" id="undoBtn" type="button">Undo</button>
    <button class="toast-close" id="toastClose" type="button" aria-label="Dismiss notification">&times;</button>
    <span class="toast-timer" id="toastTimer" aria-hidden="true"></span>
  </div>
</div>
<p class="sr-only" role="status" id="live"></p>

<script src="app.js" defer></script>
</body>
</html>

muse/13-frontend-playful/PLANTS.json

{
  "plants": [
    {"id":"fern","name":"Frida","species":"Boston fern","location":"Bathroom","task":"Water","due":"2 days overdue","urgency":4,"light":"Low, indirect","history":["Sep 19 · Misted","Sep 16 · Watered","Sep 12 · New frond"]},
    {"id":"pothos","name":"Orbit","species":"Golden pothos","location":"Bookshelf","task":"Rotate","due":"Today","urgency":2,"light":"Medium, indirect","history":["Sep 20 · Watered","Sep 14 · Rotated","Sep 10 · Wiped leaves"]},
    {"id":"cactus","name":"Dot","species":"Bunny ears cactus","location":"South window","task":"Check soil","due":"Today","urgency":1,"light":"Bright, direct","history":["Sep 08 · Watered","Sep 01 · New pad noted","Aug 22 · Rotated"]},
    {"id":"calathea","name":"Drama","species":"Calathea orbifolia","location":"Bedroom","task":"Mist","due":"Tomorrow","urgency":0,"light":"Medium, filtered","history":["Sep 21 · Misted","Sep 18 · Watered","Sep 15 · Brown edge noted"]}
  ],
  "week": [1,3,2,4,2,1,3]
}

muse/13-frontend-playful/styles.css

/* Moss — warm, tactile, a little odd. Mobile-first. No external assets. */

:root {
  --cream: #f2e6cf;
  --paper: #fffdf7;
  --ink: #2e2a23;
  --ink-soft: #5c554a;
  --moss: #3e6b4f;
  --moss-deep: #2a4a38;
  --moss-wash: #dde3c8;
  --clay: #d96c47;
  --clay-deep: #a84322;
  --clay-wash: #f7ddd0;
  --sun: #e9b44c;
  --sun-wash: #f8e8c8;
  --sky-wash: #d7e4dc;
  --line: #e3d7c2;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 1px 0 rgba(46, 42, 35, .9), 0 14px 28px -18px rgba(46, 42, 35, .45);
  --shadow-soft: 0 1px 0 rgba(46, 42, 35, .25), 0 10px 22px -16px rgba(46, 42, 35, .35);
  --font: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--cream);
  background-image: radial-gradient(rgba(42, 74, 56, .1) 1.2px, transparent 1.3px);
  background-size: 26px 26px;
  color: var(--ink);
  line-height: 1.55;
  font-size: 1rem;
}

.wrap { width: min(1120px, 100% - 2rem); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: .75rem; top: -4rem; z-index: 50;
  background: var(--ink); color: var(--cream); padding: .6rem 1rem;
  border-radius: 999px; text-decoration: none; font-weight: 700;
  transition: top .15s ease;
}
.skip:focus { top: .75rem; color: var(--cream); }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--moss-deep);
  outline-offset: 3px;
  border-radius: 10px;
}
.toast :focus-visible, .btn-primary:focus-visible { outline-color: var(--sun); }

/* ---------- header ---------- */
.site-header { position: relative; padding-bottom: 1.2rem; }
.header-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: 1rem;
}
.brand { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.brand-mark { display: inline-flex; filter: drop-shadow(0 2px 0 rgba(46,42,35,.9)); }
.brand-sub { display: block; font-size: .72rem; font-weight: 600; color: var(--ink-soft); letter-spacing: .04em; text-transform: uppercase; }
.date-pill {
  margin: 0; font-size: .85rem; font-weight: 700; white-space: nowrap;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 999px;
  padding: .3rem .9rem; box-shadow: 0 2px 0 rgba(46,42,35,.9);
}

.hero { display: grid; gap: 1.2rem; padding-top: 1.2rem; align-items: center; }
.eyebrow {
  display: inline-block; margin: 0 0 .5rem; font-size: .8rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--moss-deep);
  background: var(--moss-wash); border: 2px solid var(--ink);
  padding: .2rem .8rem; border-radius: 999px; transform: rotate(-1.2deg);
}
.hero h1 { margin: 0 0 .4rem; font-size: clamp(1.9rem, 6vw, 2.9rem); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.lede { margin: 0 0 1.1rem; color: var(--ink-soft); font-size: 1.05rem; max-width: 34rem; }
.lede strong { color: var(--ink); }

.progress { background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius); padding: .8rem 1rem .95rem; box-shadow: var(--shadow-soft); max-width: 30rem; }
.progress-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .5rem; }
.progress-label { font-weight: 800; font-size: .95rem; }
.progress-count { font-size: .85rem; font-weight: 700; color: var(--moss-deep); white-space: nowrap; }
.progress-track { position: relative; height: 18px; background: var(--moss-wash); border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
.progress-fill { position: absolute; inset: 0; width: 0%; background: repeating-linear-gradient(-45deg, var(--moss) 0 10px, var(--moss-deep) 10px 20px); border-radius: 999px; transition: width .45s ease; }
.progress-pebbles { position: absolute; inset: 0; display: flex; justify-content: space-evenly; align-items: center; }
.progress-pebbles i { width: 8px; height: 8px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); }

.hero-art { max-width: 430px; width: 100%; justify-self: center; }
.hero-art svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 0 rgba(46,42,35,.9)); }
@media (prefers-reduced-motion: no-preference) {
  .hero-art svg { animation: bob 7s ease-in-out infinite; transform-origin: 50% 90%; }
  @keyframes bob { 0%,100% { transform: rotate(-.6deg); } 50% { transform: rotate(.8deg); } }
}

.scallop {
  height: 18px; margin-top: 1.4rem;
  background-image: radial-gradient(circle at 12px -4px, transparent 14px, var(--paper) 15px);
  background-size: 28px 18px; background-repeat: repeat-x;
  border-top: 2px solid var(--ink);
  opacity: .9;
}

/* ---------- main layout ---------- */
.main { display: grid; gap: 1.5rem; padding-bottom: 1rem; }
.queue-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin: .4rem 0 1rem; }
.queue-head h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.01em; }
.queue-sub { margin: .15rem 0 0; color: var(--ink-soft); font-size: .95rem; }
.link-btn {
  background: none; border: none; padding: .3rem .1rem; cursor: pointer;
  font: inherit; font-weight: 800; font-size: .88rem; color: var(--clay-deep);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
  white-space: nowrap;
}
.link-btn:hover { color: var(--ink); }

/* ---------- queue cards: deliberately varied, not a wall of cards ---------- */
.queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: queue; }
.plant { position: relative; }
.plant-card {
  background: var(--paper); border: 2px solid var(--ink);
  border-radius: 26px 26px 26px 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.plant:nth-child(2) .plant-card { border-radius: 26px 26px 10px 26px; }
.plant:nth-child(3) .plant-card { border-radius: 60px 26px 26px 26px; }
.plant:nth-child(4) .plant-card { border-radius: 26px 60px 26px 26px; }
@media (prefers-reduced-motion: no-preference) {
  .plant-card:hover { transform: translateY(-2px) rotate(-.2deg); }
}

/* overdue feature card */
.plant[data-urgency="4"] .plant-card {
  border-width: 3px;
  background: linear-gradient(var(--paper), var(--paper)) padding-box,
    repeating-linear-gradient(-45deg, var(--clay) 0 14px, var(--paper) 14px 22px) border-box;
}
.first-up {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: var(--clay); color: #fff; border: 2px solid var(--ink);
  padding: .15rem .7rem; border-radius: 999px; margin: .8rem 1rem 0;
  box-shadow: 0 2px 0 rgba(46,42,35,.9);
}

.disclosure {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto;
  gap: .85rem; align-items: center; text-align: left;
  background: none; border: none; padding: .9rem 1rem .7rem; cursor: pointer; font: inherit; color: inherit;
}
.pot { position: relative; width: 62px; height: 62px; flex: none; display: grid; place-items: center; }
.pot svg { width: 62px; height: 62px; display: block; }
.plant[data-urgency="4"] .pot::after {
  content: ""; position: absolute; top: -4px; right: -4px; width: 16px; height: 16px;
  background: var(--clay); border: 2px solid var(--ink); border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .disclosure[aria-expanded="true"] .pot svg { animation: wiggle .5s ease; }
  @keyframes wiggle { 0% { transform: rotate(0); } 30% { transform: rotate(-7deg); } 60% { transform: rotate(5deg); } 100% { transform: rotate(0); } }
}
.plant-name { display: block; font-weight: 800; font-size: 1.15rem; line-height: 1.2; }
.plant-name .species { font-weight: 600; font-size: .82rem; color: var(--ink-soft); }
.plant-meta { display: block; font-size: .85rem; color: var(--ink-soft); margin-top: .1rem; }
.badges { grid-column: 2; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.chev {
  grid-column: 3; grid-row: 1; align-self: center;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 2px solid var(--ink); border-radius: 50%; background: var(--sun-wash);
  transition: transform .2s ease, background .2s ease;
}
.disclosure[aria-expanded="true"] .chev { transform: rotate(180deg); background: var(--sun); }
.chev svg { width: 16px; height: 16px; }

.chip {
  display: inline-block; font-size: .76rem; font-weight: 800; letter-spacing: .02em;
  padding: .18rem .65rem; border-radius: 999px; border: 2px solid var(--ink); white-space: nowrap;
}
.chip-task { background: var(--moss-wash); color: var(--moss-deep); }
.chip-due { background: var(--paper); color: var(--ink); }
.chip-due.is-overdue { background: var(--clay); color: #fff; }
.chip-due.is-today { background: var(--sun); color: var(--ink); }
.chip-snoozed { background: var(--sky-wash); color: var(--moss-deep); }
.chip-sun { background: var(--sun-wash); }

.detail { border-top: 2px dashed var(--line); margin: 0 1rem; padding: .9rem .1rem .4rem; }
.detail[hidden] { display: none; }
.facts { display: grid; gap: .55rem; margin: 0 0 .8rem; }
.fact { display: grid; grid-template-columns: 86px 1fr; gap: .6rem; font-size: .9rem; }
.fact dt { font-weight: 800; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--moss-deep); padding-top: .15rem; }
.fact dd { margin: 0; }
.fact .last { display: block; font-size: .8rem; color: var(--ink-soft); }
.obs-heading { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--moss-deep); margin: 0 0 .35rem; }
.obs { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.obs li { position: relative; font-size: .88rem; padding-left: 1.3rem; }
.obs li::before { content: ""; position: absolute; left: 0; top: .42em; width: .6rem; height: .6rem; background: var(--moss-wash); border: 2px solid var(--moss); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.obs li:first-child::before { background: var(--sun); border-color: var(--ink); }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: .8rem 1rem 1rem; }
.btn {
  font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer;
  border: 2px solid var(--ink); border-radius: 999px; padding: .6rem 1rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
  box-shadow: 0 3px 0 rgba(46,42,35,.9);
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(46,42,35,.9); }
.btn-water { background: var(--moss); color: #fff; }
.btn-water:hover { background: var(--moss-deep); }
.btn-snooze { background: var(--paper); color: var(--ink); }
.btn-snooze:hover { background: var(--sun-wash); }
.btn-primary { background: var(--clay); color: #fff; }
.btn-primary:hover { background: var(--clay-deep); }
.btn-ghost { background: var(--paper); }
.btn-ghost:hover { background: var(--sun-wash); }
.btn svg { width: 17px; height: 17px; flex: none; }

/* done + snoozed states */
.plant.is-done .plant-card { background: var(--moss-wash); }
.plant.is-done .disclosure { opacity: .75; }
.plant.is-done .plant-name::after {
  content: "tended"; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  background: var(--moss-deep); color: #fff; border-radius: 999px; padding: .12rem .55rem; margin-left: .5rem; vertical-align: middle;
}
.plant.is-snoozed .plant-card { background: #f4f1e7; border-style: dashed; box-shadow: var(--shadow-soft); }
.plant.is-snoozed .badges .chip-due { background: var(--sky-wash); }
.mini-undo { background: none; border: none; font: inherit; font-size: .8rem; font-weight: 700; color: var(--moss-deep); text-decoration: underline; cursor: pointer; padding: .2rem; }

/* water drop burst */
.burst { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.burst i { position: absolute; width: 10px; height: 14px; background: var(--sky-wash); border: 2px solid var(--moss-deep); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); animation: drop .8s ease-out forwards; }
.burst i.leaf { background: var(--moss-wash); border-radius: 60% 5% 60% 5%; transform: none; }
@keyframes drop { 0% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: var(--dx, 0) -70px; } }

/* ---------- all-done ---------- */
.alldone {
  text-align: center; background: var(--paper); border: 3px solid var(--ink);
  border-radius: 34px; padding: 2rem 1.5rem; box-shadow: var(--shadow);
}
.alldone[hidden] { display: none; }
.alldone h3 { margin: .6rem 0 .4rem; font-size: 1.5rem; letter-spacing: -.01em; }
.alldone p { margin: 0 auto .6rem; max-width: 30rem; color: var(--ink-soft); }
.alldone .next-up {
  display: inline-block; background: var(--sun-wash); color: var(--ink);
  border: 2px dashed var(--ink); border-radius: var(--radius-sm);
  padding: .5rem .9rem; font-size: .9rem; font-weight: 600;
}
.alldone-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1rem; }
.done-list { margin-top: 1.2rem; }
.done-list[hidden] { display: none; }
.done-heading { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin: 0 0 .6rem; }
.done-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.done-list li {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius-sm);
  padding: .55rem .9rem; font-size: .9rem;
}

/* ---------- aside cards ---------- */
.aside { display: grid; gap: 1rem; align-content: start; }
.card { background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-soft); }
.card h2 { margin: 0; font-size: 1.05rem; }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.bars { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; margin: 0 0 .6rem; padding: 0; align-items: end; }
.bars li { display: grid; gap: .3rem; justify-items: center; }
.bar-col { height: 96px; display: flex; align-items: flex-end; width: 100%; justify-content: center; }
.bar { width: min(30px, 100%); border: 2px solid var(--ink); border-radius: 999px 999px 10px 10px; background: var(--moss-wash); min-height: 14px; position: relative; }
.bar.is-today { background: var(--sun); box-shadow: 0 3px 0 rgba(46,42,35,.9); }
.bar.is-max { background: var(--clay-wash); }
.bar.is-today.is-max { background: var(--sun); }
.bar-val { position: absolute; top: 4px; left: 0; right: 0; text-align: center; font-size: .68rem; font-weight: 800; }
.day { font-size: .72rem; font-weight: 800; color: var(--ink-soft); }
.bars li.is-today .day { color: var(--ink); background: var(--ink); color: var(--cream); border-radius: 999px; padding: 0 .45rem; }
.rhythm-caption { margin: 0; font-size: .88rem; color: var(--ink-soft); }
.tip p { margin: .5rem 0; font-size: .95rem; }
.moss-thinks ul { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .9rem; display: grid; gap: .4rem; color: var(--ink-soft); }
.moss-thinks strong { color: var(--ink); }

.footer { padding: 1.4rem 0 3rem; text-align: center; color: var(--ink-soft); font-size: .85rem; }

/* ---------- toast ---------- */
.toast-wrap { position: fixed; left: 0; right: 0; bottom: 1rem; display: flex; justify-content: center; padding: 0 1rem; z-index: 40; pointer-events: none; }
.toast {
  pointer-events: auto; position: relative; display: flex; align-items: center; gap: .7rem;
  background: var(--ink); color: var(--cream); border-radius: 18px;
  padding: .75rem .8rem .75rem 1rem; max-width: 26rem; width: 100%;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); overflow: hidden;
}
.toast[hidden] { display: none; }
.toast-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sun); flex: none; }
.toast-msg { margin: 0; font-size: .92rem; font-weight: 600; flex: 1; }
.btn-toast { background: var(--sun); color: var(--ink); border: 2px solid var(--cream); box-shadow: none; padding: .35rem .9rem; font-size: .88rem; }
.btn-toast:hover { background: #fff; }
.toast-close { background: none; border: none; color: var(--cream); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: .2rem .4rem; opacity: .8; }
.toast-close:hover { opacity: 1; }
.toast-timer { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--sun); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .toast:not([hidden]) { animation: rise .25s ease; }
  @keyframes rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
  .toast-timer.go { animation: shrink 6s linear forwards; }
  @keyframes shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
}

/* ---------- desktop composition ---------- */
@media (min-width: 960px) {
  .hero { grid-template-columns: 1.1fr .9fr; gap: 2rem; }
  .hero-art { justify-self: end; }
  .main { grid-template-columns: minmax(0, 1fr) 330px; gap: 1.6rem; align-items: start; margin-top: .6rem; }
  .aside { position: sticky; top: 1.2rem; }
  .queue { grid-template-columns: 1fr 1fr; align-items: start; }
  .queue > li:first-child { grid-column: 1 / -1; }
  .queue > li:first-child .disclosure { grid-template-columns: auto 1fr auto auto; }
  .queue > li:first-child .badges { grid-column: 3; margin-top: 0; }
  .queue > li:first-child .chev { grid-column: 4; grid-row: 1; }
  .queue > li:first-child .actions { grid-template-columns: 220px 220px; }
  .alldone { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 0 1.6rem; text-align: left; align-items: center; }
  .alldone-art { grid-row: span 4; }
  .alldone p { margin-inline: 0; }
  .alldone-actions { justify-content: flex-start; }
}
@media (min-width: 1200px) {
  .main { grid-template-columns: minmax(0, 1fr) 360px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-art svg { transform: none; }
}

mcode-m3.1-flash/13-frontend-playful/RESPONSE.md

mcode-m3.1-flash/13-frontend-playful/TASK.md

mcode-m3.1-flash/13-frontend-playful/app.js

/* ==========================================================================
   Moss — gentle plant care
   Plain ES2018+. No frameworks, no fetch, no network calls.
   PLANTS.json is inlined below (fetch() would be a network request, and the
   file must work from file://), so the screen works offline from disk.
   ========================================================================== */
(function () {
  'use strict';

  /* ---- data -------------------------------------------------------------- */

  var DATA = {
    plants: [
      { id: 'fern', name: 'Frida', species: 'Boston fern', location: 'Bathroom', task: 'Water', due: '2 days overdue', urgency: 4, light: 'Low, indirect', lightLevel: 1,
        history: ['Sep 19 · Misted', 'Sep 16 · Watered', 'Sep 12 · New frond'],
        note: 'Humidity gossip, mostly. The bathroom window suits her better than she lets on.' },
      { id: 'pothos', name: 'Orbit', species: 'Golden pothos', location: 'Bookshelf', task: 'Rotate', due: 'Today', urgency: 2, light: 'Medium, indirect', lightLevel: 3,
        history: ['Sep 20 · Watered', 'Sep 14 · Rotated', 'Sep 10 · Wiped leaves'],
        note: 'Trails off the shelf edge on purpose. Leaves wiped Sep 10 — dust is the real enemy here.' },
      { id: 'cactus', name: 'Dot', species: 'Bunny ears cactus', location: 'South window', task: 'Check soil', due: 'Today', urgency: 1, light: 'Bright, direct', lightLevel: 4,
        history: ['Sep 08 · Watered', 'Sep 01 · New pad noted', 'Aug 22 · Rotated'],
        note: 'Water sparingly, doubt generously. The south window does nearly all the work.' },
      { id: 'calathea', name: 'Drama', species: 'Calathea orbifolia', location: 'Bedroom', task: 'Mist', due: 'Tomorrow', urgency: 0, light: 'Medium, filtered', lightLevel: 2,
        history: ['Sep 21 · Misted', 'Sep 18 · Watered', 'Sep 15 · Brown edge noted'],
        note: 'Drama in every sense. Brown edge Sep 15 — filtered light only, no direct sun.' }
    ],
    week: [1, 3, 2, 4, 2, 1, 3]
  };

  var PASTED = { Water: 'Watered', Rotate: 'Rotated', 'Check soil': 'Checked', Mist: 'Misted' };
  var DAY_NAMES = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
  var DAY_SHORT = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
  var TOAST_MS = 7000;

  /* ---- state ------------------------------------------------------------- */

  var state = {
    plants: DATA.plants.map(function (p) {
      return { raw: p, done: false, snoozed: false, snoozedUntil: null, fresh: [] };
    }),
    open: {},          // plantId -> detail panel open
    undo: null,        // { snapshot, text, focusKey }
    toastTimer: null
  };

  var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
  var todayIndex = (function () {
    var d = new Date().getDay();            // 0 = Sunday
    return d === 0 ? 6 : d - 1;             // Monday-first index
  })();

  var refs = {
    queue: document.getElementById('queue'),
    queueCount: document.getElementById('queue-count'),
    queueEmpty: document.getElementById('queue-empty'),
    alldone: document.getElementById('alldone'),
    alldoneTitle: document.getElementById('alldone-title'),
    alldoneText: document.getElementById('alldone-text'),
    alldoneList: document.getElementById('alldone-list'),
    rhythm: document.getElementById('rhythm-bars'),
    lightmap: document.getElementById('lightmap'),
    note: document.getElementById('note-text'),
    dayStatus: document.getElementById('day-status'),
    heroTitle: document.getElementById('hero-title'),
    toasts: document.getElementById('toasts'),
    reset: document.getElementById('reset-day')
  };

  var pendingFocus = null;

  /* ---- small helpers ----------------------------------------------------- */

  function icon(name, cls) {
    return '<svg class="art' + (cls ? ' ' + cls : '') + '" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#art-' + name + '"></use></svg>';
  }

  function esc(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  }

  function el(tag, attrs, html) {
    var node = document.createElement(tag);
    if (attrs) {
      Object.keys(attrs).forEach(function (k) {
        if (k === 'class') node.className = attrs[k];
        else node.setAttribute(k, attrs[k]);
      });
    }
    if (html != null) node.innerHTML = html;
    return node;
  }

  function findFocusable(key) {
    return key ? document.querySelector('[data-focus-key="' + key + '"]') : null;
  }

  function snapshot() {
    return JSON.stringify(state.plants.map(function (p) {
      return { done: p.done, snoozed: p.snoozed, snoozedUntil: p.snoozedUntil, fresh: p.fresh.slice() };
    }));
  }

  function restore(json) {
    JSON.parse(json).forEach(function (rec, i) {
      var p = state.plants[i];
      p.done = rec.done;
      p.snoozed = rec.snoozed;
      p.snoozedUntil = rec.snoozedUntil;
      p.fresh = rec.fresh.slice();
    });
  }

  /* ---- derived state ----------------------------------------------------- */

  function statusOf(p) {
    if (p.done) return 'done';
    if (p.snoozed) return 'snoozed';
    var u = p.raw.urgency;
    if (u >= 4) return 'overdue';
    if (u >= 1) return 'today';
    return 'soon';
  }

  function dueTextOf(p) {
    var s = statusOf(p);
    if (s === 'done') return 'Cared for today';
    if (s === 'snoozed') return 'Snoozed until ' + (p.snoozedUntil || 'tomorrow');
    return p.raw.due;
  }

  var RANK = { overdue: 0, today: 1, soon: 2, snoozed: 3, done: 4 };

  function ordered() {
    return state.plants.slice().sort(function (a, b) {
      var d = RANK[statusOf(a)] - RANK[statusOf(b)];
      if (d !== 0) return d;
      var du = b.raw.urgency - a.raw.urgency;
      if (du !== 0) return du;
      return 0;
    });
  }

  function counts() {
    var c = { overdue: 0, today: 0, soon: 0, snoozed: 0, done: 0, left: 0, total: state.plants.length };
    state.plants.forEach(function (p) {
      var s = statusOf(p);
      c[s]++;
      if (s === 'overdue' || s === 'today' || s === 'soon') c.left++;
    });
    return c;
  }

  /* ---- render ------------------------------------------------------------ */

  function meter(level, total) {
    var pips = '';
    for (var i = 1; i <= total; i++) {
      pips += '<span class="meter__pip"' + (i <= level ? ' data-on' : '') + '></span>';
    }
    return pips;
  }

  function historyOf(p) {
    var fresh = p.fresh.map(function (e) {
      return '<li data-fresh>' + esc(e.text) + (e.note ? ' <span class="sr-only">' + esc(e.note) + '</span>' : '') + '</li>';
    });
    var old = p.raw.history.map(function (h) {
      var parts = h.split(' · ');
      return '<li><time>' + esc(parts[0]) + '</time> · ' + esc(parts[1] || '') + '</li>';
    });
    return fresh.concat(old).join('');
  }

  function cardHTML(p) {
    var raw = p.raw;
    var st = statusOf(p);
    var done = PASTED[raw.task] || 'Done';
    var open = !!state.open[raw.id];
    var detailId = 'detail-' + raw.id;

    var pill;
    if (st === 'done') pill = icon('check') + '<span>Cared for</span>';
    else if (st === 'snoozed') pill = icon('zzz') + '<span>Snoozed</span>';
    else if (st === 'overdue') pill = icon('clock') + '<span>Overdue</span>';
    else pill = icon('sun') + '<span>' + esc(raw.due) + '</span>';

    var dueIcon = st === 'overdue' ? 'clock'
      : (st === 'done' ? 'check'
        : (st === 'snoozed' ? 'zzz'
          : ((raw.task === 'Water' || raw.task === 'Mist') ? 'drop' : 'sun')));

    var actions;
    if (st === 'done') {
      actions =
        '<button type="button" class="btn btn--quiet" data-action="undo-care" data-id="' + raw.id + '" data-focus-key="' + raw.id + '-undo">' +
        icon('check') + '<span>Mark not done</span></button>';
    } else if (st === 'snoozed') {
      actions =
        '<button type="button" class="btn btn--ghost" data-action="wake" data-id="' + raw.id + '" data-focus-key="' + raw.id + '-wake">' +
        icon('sun') + '<span>Bring it back today</span></button>';
    } else {
      actions =
        '<button type="button" class="btn btn--primary" data-action="water" data-id="' + raw.id + '" data-focus-key="' + raw.id + '-water" aria-label="' + esc(done + ' ' + raw.name) + '">' +
        icon('drop') + '<span>' + esc(done) + '</span></button>' +
        '<button type="button" class="btn btn--ghost" data-action="snooze" data-id="' + raw.id + '" data-focus-key="' + raw.id + '-snooze" aria-label="Snooze ' + esc(raw.name) + ' until tomorrow">' +
        icon('zzz') + '<span>Snooze</span></button>';
    }

    actions +=
      '<button type="button" class="btn btn--quiet" data-action="details" data-id="' + raw.id + '" data-focus-key="' + raw.id + '-details" ' +
      'aria-expanded="' + (open ? 'true' : 'false') + '" aria-controls="' + detailId + '">' +
      '<span>Details</span>' + icon('chevron') + '</button>';

    return '' +
    '<li class="plant" data-plant="' + raw.id + '" data-state="' + st + '" tabindex="-1" id="plant-' + raw.id + '">' +
      '<article class="plant__card" aria-labelledby="name-' + raw.id + '">' +
        '<div class="plant__avatar">' +
          '<svg class="art" viewBox="0 0 64 64" aria-hidden="true" focusable="false"><use href="#art-' + raw.id + '"></use></svg>' +
          '<span class="plant__pill" aria-hidden="true">' + pill + '</span>' +
        '</div>' +
        '<div class="plant__main">' +
          '<h3 class="plant__name" id="name-' + raw.id + '">' + esc(raw.name) +
            '<span class="plant__species">' + esc(raw.species) + '</span></h3>' +
          '<p class="plant__meta">' +
            '<span>' + esc(raw.location) + '</span><span class="plant__dot" aria-hidden="true">·</span>' +
            '<span class="plant__task">' + esc(raw.task) + '</span>' +
          '</p>' +
          '<p class="plant__due' + (st === 'overdue' ? ' plant__due--overdue' : '') + '">' + icon(dueIcon) +
            '<span>' + esc(dueTextOf(p)) + '</span></p>' +
          '<div class="plant__actions">' + actions + '</div>' +
        '</div>' +
      '</article>' +
      '<div class="plant__detail" id="' + detailId + '"' + (open ? '' : ' hidden') + '>' +
        '<div class="detail__grid">' +
          '<section class="detail__block">' +
            '<h4>' + icon('sun') + 'Light</h4>' +
            '<div class="meter" role="img" aria-label="Light need: ' + esc(raw.light) + ', ' + raw.lightLevel + ' of 4">' + meter(raw.lightLevel, 4) + '</div>' +
            '<p class="meter__val">' + esc(raw.light) + '</p>' +
          '</section>' +
          '<section class="detail__block">' +
            '<h4>Care &amp; observations</h4>' +
            '<ol class="history">' + historyOf(p) + '</ol>' +
          '</section>' +
          '<section class="detail__block detail__block--note">' +
            '<h4>Moss observed</h4>' +
            '<p class="detail__note">' + esc(raw.note) + '</p>' +
          '</section>' +
        '</div>' +
      '</div>' +
    '</li>';
  }

  function renderRhythm() {
    var max = Math.max.apply(null, DATA.week) || 1;
    var html = DATA.week.map(function (v, i) {
      var h = Math.round((v / max) * 100);
      var isToday = i === todayIndex;
      return '<li' + (isToday ? ' data-today' : '') + '>' +
        '<span class="bar" style="--h:' + h + '%"></span>' +
        '<span class="bar__n" aria-hidden="true">' + v + '</span>' +
        '<span class="bar__day">' + DAY_SHORT[i] + '</span>' +
        '<span class="sr-only">' + DAY_NAMES[i] + ': ' + v + ' care ' + (v === 1 ? 'action' : 'actions') + (isToday ? ' (today)' : '') + '</span>' +
        '</li>';
    }).join('');
    refs.rhythm.innerHTML = html;
  }

  function renderLightmap() {
    refs.lightmap.innerHTML = state.plants.map(function (p) {
      var raw = p.raw;
      return '<li data-plant="' + raw.id + '">' +
        '<span class="lightmap__art" aria-hidden="true"><svg class="art" viewBox="0 0 64 64"><use href="#art-' + raw.id + '"></use></svg></span>' +
        '<span><span class="lightmap__name">' + esc(raw.name) + '</span><br><span class="lightmap__where">' + esc(raw.location) + '</span></span>' +
        '<span class="meter" role="img" aria-label="' + esc(raw.name) + ' needs ' + esc(raw.light) + ' light, ' + raw.lightLevel + ' of 4">' + meter(raw.lightLevel, 4) + '</span>' +
        '</li>';
    }).join('');
  }

  function renderQueue() {
    refs.queue.innerHTML = ordered().map(cardHTML).join('');
  }

  function renderSummary() {
    var c = counts();

    if (c.left === 0 && c.total > 0) {
      if (refs.alldone.hidden) {
        refs.alldone.hidden = false;
        var leaves = el('div', { 'class': 'alldone__leaves', 'aria-hidden': 'true' },
          '<span></span><span></span><span></span><span></span><span></span>');
        refs.alldone.insertBefore(leaves, refs.alldone.firstChild);
      }
      refs.alldoneTitle.textContent = c.done === c.total
        ? 'All ' + c.total + ' are cared for.'
        : 'Nothing urgent left.';
      refs.alldoneText.textContent = c.snoozed
        ? c.snoozed + ' snoozed for tomorrow, quietly.'
        : 'Nothing else today. Go enjoy the window light.';
      refs.alldoneList.innerHTML = state.plants
        .filter(function (p) { return p.done; })
        .map(function (p) { return '<li>' + esc(p.raw.name) + ' · ' + esc(PASTED[p.raw.task] || 'Done') + '</li>'; })
        .join('');
    } else {
      refs.alldone.hidden = true;
    }

    var parts = [];
    if (c.overdue) parts.push(c.overdue + ' overdue');
    if (c.today) parts.push(c.today + ' due today');
    if (c.soon) parts.push(c.soon + ' coming up');
    refs.queueCount.textContent = c.left
      ? parts.join(' · ') + ' — ' + (c.left) + ' of ' + c.total + ' to go'
      : 'All ' + c.total + ' cared for';

    refs.queueEmpty.hidden = state.plants.length !== 0;

    var tone = c.overdue ? 'urgent' : (c.left ? 'calm' : 'clear');
    refs.dayStatus.setAttribute('data-tone', tone);
    refs.dayStatus.textContent = c.overdue
      ? c.overdue + ' plant' + (c.overdue > 1 ? 's' : '') + ' past due'
      : (c.left ? c.left + ' to tend, nothing on fire' : 'Everything watered, nothing burning');

    // Moss's note: a small opinion about whatever is left
    var next = ordered().filter(function (p) { return !p.done && !p.snoozed; })[0];
    if (next) {
      var raw = next.raw;
      if (raw.urgency >= 4) {
        refs.note.textContent = raw.name + ' is ' + raw.due.toLowerCase() + ' and doing that quiet, brittle thing. Start there.';
      } else if (statusOf(next) === 'today') {
        refs.note.textContent = raw.name + ' is on the list for today — ' + raw.task.toLowerCase() + ', nothing dramatic.';
      } else {
        refs.note.textContent = raw.name + ' can wait until tomorrow. The rest of the house is fine.';
      }
    } else {
      refs.note.textContent = 'Nothing left to fuss over. The windowsill is behaving itself.';
    }
  }

  function render(opts) {
    opts = opts || {};
    renderQueue();
    renderSummary();
    if (opts.celebrate) celebrate();
    if (pendingFocus) {
      var target = findFocusable(pendingFocus) || (pendingFocus.split('-')[0] && document.getElementById('plant-' + pendingFocus.split('-')[0]));
      if (target) target.focus({ preventScroll: true });
      pendingFocus = null;
    }
  }

  /* ---- moments of delight ------------------------------------------------ */

  function celebrate() {
    if (reduceMotion.matches) return;
    document.body.classList.add('is-celebrating');
    refs.heroTitle.classList.remove('is-cheer');
    void refs.heroTitle.offsetWidth;
    refs.heroTitle.classList.add('is-cheer');
    window.setTimeout(function () {
      document.body.classList.remove('is-celebrating');
      refs.heroTitle.classList.remove('is-cheer');
    }, 1400);
  }

  function splash(btn) {
    if (reduceMotion.matches || !btn) return;
    var box = el('span', { 'class': 'splash', 'aria-hidden': 'true' });
    for (var i = 0; i < 5; i++) {
      var d = el('span');
      d.style.setProperty('--dx', ((i - 2) * 9 + (i % 2 ? 3 : -3)) + 'px');
      d.style.setProperty('--dy', (-30 - (i % 3) * 9) + 'px');
      d.style.animationDelay = (i * 45) + 'ms';
      box.appendChild(d);
    }
    btn.appendChild(box);
    window.setTimeout(function () { if (box.parentNode) box.parentNode.removeChild(box); }, 900);
  }

  function settle(plantId) {
    if (reduceMotion.matches) return;
    var li = document.getElementById('plant-' + plantId);
    if (!li) return;
    li.classList.add('is-settling');
    window.setTimeout(function () { li.classList.remove('is-settling'); }, 500);
  }

  /* ---- toasts & undo ----------------------------------------------------- */

  function dismissToast() {
    if (state.toastTimer) { window.clearTimeout(state.toastTimer); state.toastTimer = null; }
    var t = refs.toasts.querySelector('.toast');
    if (!t) return;
    t.classList.add('is-going');
    window.setTimeout(function () { if (t.parentNode) t.parentNode.removeChild(t); }, 220);
  }

  function toast(opts) {
    dismissToast();
    var t = el('div', { 'class': 'toast' },
      '<span class="toast__art" aria-hidden="true">' + icon(opts.icon || 'drop') + '</span>' +
      '<p class="toast__text">' + opts.text + '</p>' +
      (opts.undoKey
        ? '<span class="toast__undo-wrap"><button type="button" class="btn btn--undo" data-action="undo" data-focus-key="toast-undo">Undo</button></span>'
        : '') +
      '<span class="toast__timer" aria-hidden="true"></span>');
    refs.toasts.appendChild(t);
    state.undo = opts.undoKey ? { snapshot: opts.snapshot, focusKey: opts.focusKey } : null;
    if (opts.undoKey) {
      state.toastTimer = window.setTimeout(function () {
        state.undo = null;
        dismissToast();
      }, TOAST_MS);
    }
  }

  function runUndo() {
    if (!state.undo) return;
    restore(state.undo.snapshot);
    pendingFocus = state.undo.focusKey;
    state.undo = null;
    var t = refs.toasts.querySelector('.toast');
    if (t) {
      t.classList.add('toast--undoing');
      var bar = t.querySelector('.toast__timer');
      if (bar) bar.style.animationDuration = '.3s';
    }
    window.setTimeout(function () { dismissToast(); }, 320);
    render();
  }

  /* ---- actions ----------------------------------------------------------- */

  function plantById(id) {
    for (var i = 0; i < state.plants.length; i++) if (state.plants[i].raw.id === id) return state.plants[i];
    return null;
  }

  function doCare(id, btn) {
    var p = plantById(id);
    if (!p || p.done) return;
    var verb = PASTED[p.raw.task] || 'Done';
    var before = snapshot();

    p.done = true;
    p.snoozed = false;
    p.snoozedUntil = null;
    p.fresh.unshift({ text: 'Today · ' + verb, note: 'added just now' });
    pendingFocus = id + '-undo';
    splash(btn);
    settle(id);

    var allDone = counts().left === 0;
    render();
    if (allDone) celebrate();

    toast({
      icon: 'drop',
      text: '<strong>' + esc(p.raw.name) + '</strong> marked ' + esc(verb.toLowerCase()) + '.',
      undoKey: true,
      snapshot: before,
      focusKey: id + '-undo'
    });
  }

  function doSnooze(id) {
    var p = plantById(id);
    if (!p || p.done || p.snoozed) return;
    var before = snapshot();
    p.snoozed = true;
    p.snoozedUntil = 'tomorrow';
    pendingFocus = id + '-wake';
    render();
    toast({
      icon: 'zzz',
      text: '<strong>' + esc(p.raw.name) + '</strong> snoozed until tomorrow. Moss will not mention it again today.',
      undoKey: true,
      snapshot: before,
      focusKey: id + '-wake'
    });
  }

  function doWake(id) {
    var p = plantById(id);
    if (!p) return;
    var before = snapshot();
    p.snoozed = false;
    p.snoozedUntil = null;
    pendingFocus = id + '-water';
    render();
    toast({
      icon: 'sun',
      text: '<strong>' + esc(p.raw.name) + '</strong> is back in the queue.',
      undoKey: true,
      snapshot: before,
      focusKey: id + '-water'
    });
  }

  function undoCare(id) {
    var p = plantById(id);
    if (!p) return;
    var before = snapshot();
    p.done = false;
    pendingFocus = id + '-water';
    render();
    toast({
      icon: 'sun',
      text: '<strong>' + esc(p.raw.name) + '</strong> is back in the queue.',
      undoKey: true,
      snapshot: before,
      focusKey: id + '-water'
    });
  }

  function resetDay() {
    var before = snapshot();
    state.plants.forEach(function (p) { p.done = false; p.snoozed = false; p.snoozedUntil = null; p.fresh = []; });
    state.open = {};
    pendingFocus = 'reset';
    render();
    toast({
      icon: 'sprout-sm',
      text: 'The day starts over. Water cans back on the shelf.',
      undoKey: true,
      snapshot: before,
      focusKey: 'reset'
    });
  }

  function toggleDetails(id) {
    state.open[id] = !state.open[id];
    render();
  }

  /* ---- events ------------------------------------------------------------ */

  document.addEventListener('click', function (e) {
    var btn = e.target.closest ? e.target.closest('[data-action]') : null;
    if (!btn) return;
    var action = btn.getAttribute('data-action');
    var id = btn.getAttribute('data-id');

    if (action === 'water') doCare(id, btn);
    else if (action === 'snooze') doSnooze(id);
    else if (action === 'wake') doWake(id);
    else if (action === 'undo-care') undoCare(id);
    else if (action === 'details') toggleDetails(id);
    else if (action === 'undo') runUndo();
  });

  refs.reset.addEventListener('click', resetDay);

  // Escape closes the last thing you opened — a small keyboard courtesy.
  document.addEventListener('keydown', function (e) {
    if (e.key !== 'Escape') return;
    if (document.activeElement && document.activeElement.getAttribute('data-action') === 'details') {
      var id = document.activeElement.getAttribute('data-id');
      state.open[id] = false;
      pendingFocus = id + '-details';
      render();
      return;
    }
    if (state.undo) runUndo();
  });

  /* ---- boot -------------------------------------------------------------- */

  renderRhythm();
  renderLightmap();
  render();
})();

mcode-m3.1-flash/13-frontend-playful/index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light">
<meta name="description" content="Moss — a gentle household plant-care companion. Today's care queue, plant details, and the weekly rhythm of your windowsill.">
<title>Moss · gentle plant care</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='15' fill='%233F6B32'/><path d='M16 24c0-7 3-11 8-12-1 7-4 11-8 12Z' fill='%23FBF6EA'/><path d='M16 24c0-6-3-9-8-10 1 6 4 9 8 10Z' fill='%235A8A44'/></svg>">
</head>
<body>

<!-- ── Art sprite: every illustration is inline SVG, no network ────────────── -->
<svg class="sprite" aria-hidden="true" focusable="false" width="0" height="0">
  <defs>
    <g id="pot">
      <rect x="20.5" y="34" width="23" height="4" rx="2" fill="#3A2A1E"/>
      <path d="M20 38h24l-3.1 17.6a3.4 3.4 0 0 1-3.3 2.7H26.4a3.4 3.4 0 0 1-3.3-2.7Z" fill="var(--art-pot, #B95A34)"/>
      <path d="M17.4 33.4h29.2a1.6 1.6 0 0 1 1.6 1.7l-.4 4.2a1.6 1.6 0 0 1-1.6 1.5H17.8a1.6 1.6 0 0 1-1.6-1.5l-.4-4.2a1.6 1.6 0 0 1 1.6-1.7Z" fill="var(--art-pot-dark, #8F4526)"/>
    </g>
  </defs>

  <symbol id="art-fern" viewBox="0 0 64 64">
    <g fill="none" stroke="var(--art-leaf-dark,#2C4A22)" stroke-width="1.7" stroke-linecap="round">
      <path d="M32 36C32 25 30 17 26 11"/><path d="M32 36C33 24 37 17 40 10"/>
      <path d="M32 36C31 26 28 21 22 16"/><path d="M32 36C34 26 38 22 44 18"/>
      <path d="M32 36C32 28 32 23 32 15"/>
    </g>
    <g fill="var(--art-leaf,#3F6B32)">
      <ellipse cx="24.5" cy="10" rx="3.4" ry="2" transform="rotate(-32 24.5 10)"/>
      <ellipse cx="41" cy="9" rx="3.4" ry="2" transform="rotate(28 41 9)"/>
      <ellipse cx="20" cy="15" rx="3.2" ry="1.9" transform="rotate(-42 20 15)"/>
      <ellipse cx="45.5" cy="17" rx="3.2" ry="1.9" transform="rotate(40 45.5 17)"/>
      <ellipse cx="29" cy="21" rx="2.7" ry="1.6" transform="rotate(-58 29 21)"/>
      <ellipse cx="35" cy="21" rx="2.7" ry="1.6" transform="rotate(58 35 21)"/>
      <ellipse cx="32" cy="25" rx="2.5" ry="1.5"/>
      <ellipse cx="27" cy="27" rx="2.4" ry="1.5" transform="rotate(-50 27 27)"/>
      <ellipse cx="37" cy="27" rx="2.4" ry="1.5" transform="rotate(50 37 27)"/>
      <ellipse cx="32" cy="31" rx="2.4" ry="1.5"/>
    </g>
    <use href="#pot"/>
  </symbol>

  <symbol id="art-pothos" viewBox="0 0 64 64">
    <g fill="none" stroke="var(--art-leaf-dark,#2C4A22)" stroke-width="1.7" stroke-linecap="round">
      <path d="M32 36c0-8 1-13 0-20"/><path d="M32 30c-3-3-7-4-11-3"/><path d="M32 24c4-3 8-3 11-1"/>
    </g>
    <g fill="var(--art-leaf,#3F6B32)">
      <path d="M32 16c4-5 10-5 12-1 2 5-4 9-12 6Z"/>
      <path d="M21 27c-5-2-9 1-9 5 0 5 6 7 10 3Z"/>
      <path d="M43 23c5-3 10 0 10 5 0 5-6 7-11 2Z"/>
      <path d="M32 30c-4 2-8 0-8-4 0-4 5-6 8-3Z" opacity=".85"/>
    </g>
    <g fill="var(--art-leaf-hi,#5A8A44)" opacity=".9">
      <ellipse cx="41" cy="18" rx="2.4" ry="1.4" transform="rotate(24 41 18)"/>
      <ellipse cx="16.5" cy="31" rx="2.4" ry="1.4" transform="rotate(-16 16.5 31)"/>
      <ellipse cx="48.5" cy="27" rx="2.4" ry="1.4" transform="rotate(14 48.5 27)"/>
    </g>
    <use href="#pot"/>
  </symbol>

  <symbol id="art-cactus" viewBox="0 0 64 64">
    <g fill="var(--art-leaf,#3F6B32)">
      <path d="M27 36c-3-1-4-4-4-8V15c0-4 3-7 6-7s6 3 6 7v13c0 4-1 7-4 8Z"/>
      <path d="M38 36c-2.6-.8-3.6-3.6-3.6-7V21c0-3.4 2.4-6 5-6s5 2.6 5 6v8c0 3.4-1 6.2-3.6 7Z" opacity=".9"/>
    </g>
    <g fill="var(--art-leaf-hi,#5A8A44)">
      <ellipse cx="29" cy="16" rx="2.6" ry="5"/><ellipse cx="39.4" cy="21" rx="2.2" ry="4"/>
    </g>
    <g fill="var(--art-pot-dark,#8F4526)">
      <circle cx="26" cy="12" r="3.1"/><circle cx="45" cy="20" r="2.5"/>
    </g>
    <g fill="var(--art-leaf-dark,#2C4A22)" opacity=".55">
      <circle cx="27.5" cy="22" r="1"/><circle cx="31" cy="27" r="1"/><circle cx="27" cy="31" r="1"/>
      <circle cx="38" cy="27" r="1"/><circle cx="42" cy="30" r="1"/><circle cx="39.5" cy="33" r="1"/>
    </g>
    <use href="#pot"/>
  </symbol>

  <symbol id="art-calathea" viewBox="0 0 64 64">
    <g fill="none" stroke="var(--art-leaf-dark,#2C4A22)" stroke-width="1.6" stroke-linecap="round">
      <path d="M32 37c0-6-8-8-12-13"/><path d="M32 37c0-7 8-9 13-13"/><path d="M32 37v-11"/>
    </g>
    <g fill="var(--art-leaf,#3F6B32)">
      <ellipse cx="18.5" cy="20" rx="7.4" ry="5.4" transform="rotate(-22 18.5 20)"/>
      <ellipse cx="46" cy="20" rx="7.4" ry="5.4" transform="rotate(22 46 20)"/>
      <ellipse cx="32" cy="22" rx="6.4" ry="7"/>
    </g>
    <g fill="none" stroke="var(--art-leaf-hi,#5A8A44)" stroke-width="1.1" opacity=".85">
      <path d="M25.6 20.6 20 19.6M27 22.4l-5.6 2.4M25.4 18.6 21 15.8M38.4 20.6 44 19.6M37 22.4l5.6 2.4M38.6 18.6 43 15.8M32 27.6V17.6"/>
    </g>
    <use href="#pot"/>
  </symbol>

  <symbol id="art-sprout" viewBox="0 0 64 64">
    <g fill="none" stroke="var(--art-leaf-dark,#2C4A22)" stroke-width="2" stroke-linecap="round">
      <path d="M32 38V22"/>
    </g>
    <g fill="var(--art-leaf,#3F6B32)">
      <path d="M32 24c1-8 7-12 13-11 1 8-5 12-13 11Z"/>
      <path d="M32 28c-1-7-7-10-12-9-1 7 5 10 12 9Z"/>
    </g>
    <g class="mascot-eyes" fill="#1E2A20">
      <ellipse class="mascot-eye" cx="28.4" cy="31.6" rx="1.5" ry="1.9"/>
      <ellipse class="mascot-eye" cx="35.6" cy="31.6" rx="1.5" ry="1.9"/>
    </g>
    <path d="M29.4 35.2q2.6 2.4 5.2 0" fill="none" stroke="#1E2A20" stroke-width="1.5" stroke-linecap="round"/>
    <use href="#pot"/>
  </symbol>

  <symbol id="art-bloom" viewBox="0 0 64 64">
    <g fill="var(--art-blossom,#E8A33C)">
      <ellipse cx="32" cy="17" rx="6.4" ry="10"/>
      <ellipse cx="32" cy="47" rx="6.4" ry="10"/>
      <ellipse cx="17" cy="32" rx="10" ry="6.4"/>
      <ellipse cx="47" cy="32" rx="10" ry="6.4"/>
    </g>
    <g fill="var(--art-blossom-deep,#C97A22)" opacity=".75">
      <ellipse cx="32" cy="17" rx="3" ry="8" transform="rotate(14 32 17)"/>
      <ellipse cx="32" cy="47" rx="3" ry="8" transform="rotate(-14 32 47)"/>
      <ellipse cx="17" cy="32" rx="8" ry="3" transform="rotate(-14 17 32)"/>
      <ellipse cx="47" cy="32" rx="8" ry="3" transform="rotate(14 47 32)"/>
    </g>
    <circle cx="32" cy="32" r="8.4" fill="var(--art-pot,#B95A34)"/>
    <circle cx="32" cy="32" r="6" fill="#FBF6EA"/>
    <g fill="#1E2A20">
      <circle cx="29.6" cy="31" r="1.2"/><circle cx="34.4" cy="31" r="1.2"/>
    </g>
    <path d="M29.6 34q2.4 2.2 4.8 0" fill="none" stroke="#1E2A20" stroke-width="1.3" stroke-linecap="round"/>
  </symbol>

  <symbol id="art-drop" viewBox="0 0 24 24">
    <path d="M12 2.5c3.4 4.2 6 7.5 6 10.4A6 6 0 0 1 6 12.9C6 10 8.6 6.7 12 2.5Z" fill="currentColor"/>
  </symbol>

  <symbol id="art-zzz" viewBox="0 0 24 24">
    <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 6h6L4.6 11H10"/><path d="M12 12h6l-5.4 5H18"/>
    </g>
  </symbol>

  <symbol id="art-check" viewBox="0 0 24 24">
    <path d="M4.5 12.5 9.5 17.5 19.5 6.5" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
  </symbol>

  <symbol id="art-chevron" viewBox="0 0 24 24">
    <path d="M6 9.5 12 15.5 18 9.5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
  </symbol>

  <symbol id="art-clock" viewBox="0 0 24 24">
    <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="12" r="9"/>
      <path d="M12 6.8V12l3.6 2.2"/>
    </g>
  </symbol>

  <symbol id="art-sprout-sm" viewBox="0 0 24 24">
    <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
      <path d="M12 21v-8"/>
    </g>
    <g fill="currentColor">
      <path d="M12 15c.5-4 3-6 6.5-5.5C18 13.5 15 15.5 12 15Z"/>
      <path d="M12 17c-.5-3.5-3-5-6-4.5C6.5 15.8 9 17.5 12 17Z"/>
    </g>
  </symbol>

  <symbol id="art-sun" viewBox="0 0 24 24">
    <g stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none">
      <path d="M12 3v2.4M12 18.6V21M3 12h2.4M18.6 12H21M5.6 5.6l1.7 1.7M16.7 16.7l1.7 1.7M18.4 5.6l-1.7 1.7M7.3 16.7l-1.7 1.7"/>
    </g>
    <circle cx="12" cy="12" r="4.2" fill="currentColor"/>
  </symbol>
</svg>

<a class="skip-link" href="#queue">Skip to today&rsquo;s care</a>

<header class="masthead">
  <div class="masthead__inner">
    <p class="brand">
      <span class="brand__mark" aria-hidden="true">
        <svg class="art" viewBox="0 0 64 64"><use href="#art-sprout"></use></svg>
      </span>
      <span class="brand__words">
        <span class="brand__name">Moss</span>
        <span class="brand__tag">gentle plant care</span>
      </span>
    </p>
    <p class="masthead__status" id="day-status">Checking on the windowsill&hellip;</p>
  </div>
</header>

<main class="shell">

  <section class="hero" aria-labelledby="hero-title">
    <div class="hero__copy">
      <h1 class="hero__title" id="hero-title">Good morning, the plants are waiting.</h1>
      <p class="hero__sub" id="hero-sub">Four of them, one bathroom window, and a fern with a two-day thirst.</p>
    </div>

    <section class="rhythm card" aria-labelledby="rhythm-title">
      <div class="rhythm__intro">
        <h2 class="rhythm__title" id="rhythm-title">Weekly rhythm</h2>
        <p class="rhythm__sub">Care given, day by day</p>
      </div>
      <ul class="rhythm__bars" id="rhythm-bars"></ul>
    </section>
  </section>

  <section class="queue-wrap" aria-labelledby="queue-title">
    <div class="section-head">
      <h2 class="section-head__title" id="queue-title">Today&rsquo;s care</h2>
      <p class="section-head__meta" id="queue-count"></p>
    </div>

    <div class="alldone" id="alldone" hidden>
      <span class="alldone__art" aria-hidden="true">
        <svg class="art" viewBox="0 0 64 64"><use href="#art-bloom"></use></svg>
      </span>
      <div class="alldone__copy">
        <h3 class="alldone__title" id="alldone-title">All four are cared for.</h3>
        <p class="alldone__text" id="alldone-text">Nothing else today. Go enjoy the window light.</p>
        <ul class="alldone__list" id="alldone-list"></ul>
      </div>
    </div>

    <ol class="queue" id="queue"></ol>
    <p class="queue__empty" id="queue-empty" hidden>Nothing in the queue. Suspiciously tidy.</p>
  </section>

  <aside class="rail" aria-label="Around the house">
    <section class="card rail__card" aria-labelledby="light-title">
      <h2 class="rail__title" id="light-title">
        <span class="rail__icon" aria-hidden="true"><svg class="art" viewBox="0 0 24 24"><use href="#art-sun"></use></svg></span>
        Light around the house
      </h2>
      <ul class="lightmap" id="lightmap"></ul>
    </section>

    <section class="card rail__card note" aria-labelledby="note-title">
      <h2 class="rail__title" id="note-title">Moss&rsquo;s note</h2>
      <p class="note__text" id="note-text">The bathroom window is doing a lot of quiet work.</p>
      <p class="note__sign"><span class="note__mascot" aria-hidden="true"><svg class="art" viewBox="0 0 64 64"><use href="#art-sprout"></use></svg></span>&mdash; Moss</p>
    </section>

    <section class="card rail__card legend" aria-labelledby="legend-title">
      <h2 class="rail__title" id="legend-title">Reading the queue</h2>
      <ul class="legend__list">
        <li><span class="swatch swatch--overdue" aria-hidden="true"></span> Overdue &mdash; cares first</li>
        <li><span class="swatch swatch--today" aria-hidden="true"></span> Due today</li>
        <li><span class="swatch swatch--soon" aria-hidden="true"></span> Coming up</li>
        <li><span class="swatch swatch--snoozed" aria-hidden="true"></span> Snoozed</li>
        <li><span class="swatch swatch--done" aria-hidden="true"></span> Cared for</li>
      </ul>
      <button type="button" class="btn btn--quiet btn--block" id="reset-day" data-focus-key="reset">Start the day over</button>
    </section>
  </aside>
</main>

<footer class="colophon">
  <p>Moss keeps a small rhythm for four plants. Data in <code>PLANTS.json</code>.</p>
  <p class="colophon__hint">No network, no libraries &mdash; HTML, CSS and a little JavaScript.</p>
</footer>

<div class="toasts" id="toasts" role="status" aria-live="polite"></div>

<noscript>
  <p class="noscript">Moss needs JavaScript to hand out the watering can. The plants forgive you.</p>
</noscript>

<script src="app.js"></script>
</body>
</html>

mcode-m3.1-flash/13-frontend-playful/PLANTS.json

{
  "plants": [
    {"id":"fern","name":"Frida","species":"Boston fern","location":"Bathroom","task":"Water","due":"2 days overdue","urgency":4,"light":"Low, indirect","history":["Sep 19 · Misted","Sep 16 · Watered","Sep 12 · New frond"]},
    {"id":"pothos","name":"Orbit","species":"Golden pothos","location":"Bookshelf","task":"Rotate","due":"Today","urgency":2,"light":"Medium, indirect","history":["Sep 20 · Watered","Sep 14 · Rotated","Sep 10 · Wiped leaves"]},
    {"id":"cactus","name":"Dot","species":"Bunny ears cactus","location":"South window","task":"Check soil","due":"Today","urgency":1,"light":"Bright, direct","history":["Sep 08 · Watered","Sep 01 · New pad noted","Aug 22 · Rotated"]},
    {"id":"calathea","name":"Drama","species":"Calathea orbifolia","location":"Bedroom","task":"Mist","due":"Tomorrow","urgency":0,"light":"Medium, filtered","history":["Sep 21 · Misted","Sep 18 · Watered","Sep 15 · Brown edge noted"]}
  ],
  "week": [1,3,2,4,2,1,3]
}

mcode-m3.1-flash/13-frontend-playful/styles.css

/* ==========================================================================
   Moss — gentle plant care
   Mobile-first. Warm paper, ink, moss, terracotta. No frameworks, no assets.
   Shape language: "leaf-nib" corners (one tight corner, three generous ones),
   arch-topped bars, pot silhouettes, and a hand-cut paper grain.
   ========================================================================== */

:root {
  /* --- palette ------------------------------------------------------- */
  --paper:        #f2e7d6;
  --paper-hi:     #fbf5e8;
  --card:         #fffaef;
  --ink:          #1e2a20;
  --ink-2:        #47534a;
  --ink-3:        #6d7a6b;
  --line:         rgba(30, 42, 32, .16);
  --line-soft:    rgba(30, 42, 32, .09);
  --moss:         #3f6b32;
  --moss-hi:      #5a8a44;
  --moss-deep:    #2c4a22;
  --clay:         #b2562f;
  --clay-deep:    #8b4222;
  --ochre:        #a8730f;
  --ochre-hi:     #d69a2a;
  --blush:        #c9607a;
  --cream:        #fdf8ec;

  /* --- shape --------------------------------------------------------- */
  --r-nib:  28px 28px 28px 10px;
  --r-nib-r: 10px 28px 28px 28px;
  --r-chip: 999px 999px 999px 5px;
  --r-pill: 999px;
  --r-arch: 16px 16px 7px 7px;

  /* --- depth --------------------------------------------------------- */
  --lift-1: 0 1px 0 rgba(255,255,255,.7) inset, 0 6px 14px -10px rgba(74, 52, 30, .45);
  --lift-2: 0 1px 0 rgba(255,255,255,.75) inset, 0 16px 30px -18px rgba(74, 52, 30, .5);
  --press:  0 3px 0;
  --paper-shadow: 0 2px 0 rgba(255,255,255,.6) inset, 0 10px 24px -16px rgba(74, 52, 30, .5);

  /* --- motion -------------------------------------------------------- */
  --dur: 220ms;
  --dur-slow: 420ms;
  --spring: cubic-bezier(.34, 1.36, .48, 1);
  --ease: cubic-bezier(.32, .72, .3, 1);

  --focus: var(--clay-deep);
  --maxw: 1160px;

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--paper);
  /* soft vertical warmth, like light falling down a room */
  background-image:
    radial-gradient(120% 60% at 82% -8%, rgba(214, 154, 42, .20), transparent 60%),
    radial-gradient(90% 46% at 6% 4%, rgba(90, 138, 68, .16), transparent 62%);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.06rem);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* paper grain — a data-uri so it stays local */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .3;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.42'/></svg>");
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  background: rgba(30, 42, 32, .07);
  border-radius: 5px;
  padding: .1em .38em;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: .5rem;
  translate: -50% -180%;
  z-index: 80;
  background: var(--ink);
  color: var(--cream);
  text-decoration: none;
  font-weight: 650;
  padding: .7rem 1.1rem;
  border-radius: var(--r-chip);
  box-shadow: var(--lift-2);
  transition: translate var(--dur) var(--ease);
}
.skip-link:focus-visible { translate: -50% 0; }

.noscript {
  margin: 1rem;
  padding: 1rem 1.2rem;
  background: var(--card);
  border-radius: var(--r-nib);
  box-shadow: var(--paper-shadow);
}

/* ==========================================================================
   Buttons — pill keys with a pressable bottom edge
   ========================================================================== */

.btn {
  --btn-bg: var(--moss);
  --btn-edge: var(--moss-deep);
  --btn-fg: #f6f4e6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 44px;
  padding: .58rem 1.05rem;
  font: inherit;
  font-weight: 640;
  font-size: .95rem;
  line-height: 1.1;
  letter-spacing: .005em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 0;
  border-radius: var(--r-chip);
  box-shadow: 0 3px 0 var(--btn-edge), var(--lift-1);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--btn-edge), var(--lift-1);
}
.btn .art { width: 1.1em; height: 1.1em; flex: none; }

.btn--primary { --btn-bg: var(--moss); --btn-edge: var(--moss-deep); }
.btn--primary:hover { --btn-bg: #487a38; }

.btn--clay { --btn-bg: var(--clay); --btn-edge: var(--clay-deep); }
.btn--clay:hover { --btn-bg: #c05f36; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-edge: var(--line);
  --btn-fg: var(--ink-2);
  background: rgba(255, 253, 246, .7);
  box-shadow: 0 3px 0 rgba(30, 42, 32, .12), var(--lift-1);
}
.btn--ghost:hover { --btn-fg: var(--ink); background: var(--card); }

.btn--quiet {
  --btn-bg: transparent;
  --btn-edge: transparent;
  --btn-fg: var(--ink-3);
  background: none;
  box-shadow: none;
  padding-inline: .8rem;
  font-weight: 600;
}
.btn--quiet:hover { --btn-fg: var(--ink); background: rgba(30, 42, 32, .06); transform: none; }
.btn--quiet:active { transform: none; box-shadow: none; }
.btn--quiet .art { transition: rotate var(--dur) var(--spring); }
.btn--quiet[aria-expanded="true"] .art { rotate: 180deg; }
.btn--quiet[aria-expanded="true"] { --btn-fg: var(--ink); }

.btn--block { width: 100%; margin-top: .9rem; }

.btn__undo {
  --btn-bg: var(--cream);
  --btn-edge: rgba(30, 42, 32, .3);
  --btn-fg: var(--ink);
  min-height: 38px;
  padding: .38rem .9rem;
  font-size: .9rem;
}

/* ==========================================================================
   Masthead
   ========================================================================== */

.masthead {
  padding: 1.15rem clamp(1rem, 4vw, 2.4rem) .35rem;
  max-width: var(--maxw);
  margin-inline: auto;
}
.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.2rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
  background: var(--card);
  border-radius: 56% 44% 52% 48% / 48% 56% 44% 52%;
  box-shadow: var(--paper-shadow);
  rotate: -4deg;
}
.brand__mark .art { width: 34px; height: 34px; }
.brand__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
}
.brand__tag {
  display: block;
  font-size: .78rem;
  font-weight: 620;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: .22rem;
}

.masthead__status {
  font-size: .9rem;
  font-weight: 620;
  color: var(--ink-2);
  background: rgba(255, 250, 239, .8);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-chip);
  padding: .45rem .9rem;
  box-shadow: 0 2px 0 rgba(30, 42, 32, .06);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.masthead__status::before {
  content: "";
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--clay);
  box-shadow: 0 0 0 3px rgba(178, 86, 47, .18);
}
.masthead__status[data-tone="calm"]::before { background: var(--moss-hi); box-shadow: 0 0 0 3px rgba(90, 138, 68, .2); }
.masthead__status[data-tone="clear"]::before { background: var(--ochre-hi); box-shadow: 0 0 0 3px rgba(214, 154, 42, .22); }

/* ==========================================================================
   Shell / layout
   ========================================================================== */

.shell {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 clamp(1rem, 4vw, 2.4rem) 2.5rem;
  display: grid;
  gap: 1.4rem;
  align-content: start;
}

.card {
  background: var(--card);
  border-radius: var(--r-nib);
  box-shadow: var(--paper-shadow);
  position: relative;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .9rem;
  flex-wrap: wrap;
}
.section-head__title {
  font-size: clamp(1.35rem, 1.2rem + .8vw, 1.7rem);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.section-head__title::after {
  content: "";
  display: block;
  width: 2.4rem; height: 6px;
  background: var(--ochre-hi);
  border-radius: var(--r-pill);
  rotate: -1.5deg;
  margin-top: .35rem;
}
.section-head__meta {
  font-size: .9rem;
  font-weight: 620;
  color: var(--ink-3);
}

/* ==========================================================================
   Hero + weekly rhythm
   ========================================================================== */

.hero {
  display: grid;
  gap: 1.2rem;
  padding-top: .4rem;
}
.hero__title {
  font-size: clamp(1.75rem, 1.35rem + 2.4vw, 2.6rem);
  max-width: 20ch;
}
.hero__sub {
  margin-top: .5rem;
  color: var(--ink-2);
  max-width: 46ch;
  font-size: 1.02rem;
}
.hero__title.is-cheer { animation: cheer var(--dur-slow) var(--spring); }

.rhythm {
  display: grid;
  gap: 1rem;
  padding: 1.05rem 1.1rem 1rem;
  rotate: -.4deg;
}
.rhythm__title { font-size: 1.1rem; }
.rhythm__sub {
  font-size: .82rem;
  color: var(--ink-3);
  margin-top: .18rem;
}

.rhythm__bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: clamp(.35rem, 1.6vw, .7rem);
  height: 118px;
}
.rhythm__bars li {
  display: grid;
  grid-template-rows: 1fr auto auto;
  align-items: end;
  justify-items: center;
  gap: .3rem;
  height: 100%;
}
.bar {
  width: 100%;
  max-width: 2.3rem;
  height: var(--h, 20%);
  align-self: end;
  background: linear-gradient(180deg, var(--moss-hi), var(--moss));
  border-radius: var(--r-arch);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .28);
  transform-origin: 50% 100%;
  animation: sway 6s var(--ease) infinite;
  position: relative;
}
.bar::before {
  content: "";
  position: absolute;
  inset: auto 0 -3px;
  height: 3px;
  background: rgba(44, 74, 34, .22);
  border-radius: var(--r-pill);
}
.rhythm__bars li:nth-child(2) .bar,
.rhythm__bars li:nth-child(5) .bar { animation-delay: -1.4s; }
.rhythm__bars li:nth-child(3) .bar { animation-delay: -2.8s; }
.rhythm__bars li:nth-child(4) .bar { animation-delay: -4.1s; }
.rhythm__bars li:nth-child(6) .bar { animation-delay: -2.1s; }
.rhythm__bars li:nth-child(7) .bar { animation-delay: -3.4s; }

.rhythm__bars li[data-today] .bar {
  background: linear-gradient(180deg, var(--ochre-hi), var(--ochre));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 0 0 3px rgba(168, 115, 15, .2);
}
.bar__n {
  font-size: .72rem;
  font-weight: 700;
  color: var(--ink-3);
  line-height: 1;
}
.rhythm__bars li[data-today] .bar__n { color: var(--ochre); }
.bar__day {
  font-size: .7rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rhythm__bars li[data-today] .bar__day { color: var(--ink); }
.rhythm__bars li[data-today] .bar__day::after {
  content: "";
  display: block;
  width: 5px; height: 5px;
  margin: .22rem auto 0;
  border-radius: 50%;
  background: var(--ochre);
}

/* ==========================================================================
   Queue cards
   ========================================================================== */

.queue { display: grid; gap: 1rem; }

.plant { position: relative; }

.plant__card {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: .5rem 1rem;
  align-items: start;
  background: var(--card);
  border-radius: var(--r-nib);
  box-shadow: var(--paper-shadow);
  padding: 1.05rem 1.1rem 1.1rem;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              opacity var(--dur-slow) var(--ease);
}
/* status spine on the left edge */
.plant__card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--tone, var(--ink-3));
  border-radius: 0 4px 4px 0;
}
.plant[data-state="overdue"] { --tone: var(--clay); }
.plant[data-state="today"]   { --tone: var(--ochre); }
.plant[data-state="soon"]    { --tone: var(--moss-hi); }
.plant[data-state="snoozed"] { --tone: #b9a58a; }
.plant[data-state="done"]    { --tone: var(--moss); }

.plant[data-state="overdue"] .plant__card { rotate: -.5deg; }
.plant[data-state="today"] .plant__card { rotate: .4deg; }

.plant__avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px; height: 68px;
  border-radius: 50% 50% 46% 54% / 42% 44% 56% 58%;
  background: var(--blob, var(--paper-hi));
  box-shadow: inset 0 0 0 1px var(--line-soft);
  --art-leaf: var(--leaf, var(--moss));
  --art-leaf-hi: var(--leaf-hi, var(--moss-hi));
  --art-leaf-dark: var(--leaf-dark, var(--moss-deep));
  animation: sway 7s var(--ease) infinite;
}
.plant__avatar .art {
  width: 52px; height: 52px;
  position: relative;
  z-index: 1;
  rotate: -2deg;
}
.plant[data-plant="pothos"]   .plant__avatar { --blob: #f6e7c8; --art-pot: #c07b3a; --art-pot-dark: #96581f; }
.plant[data-plant="cactus"]   .plant__avatar { --blob: #e7efdc; --art-pot: #a8563a; --art-pot-dark: #7d3b24; }
.plant[data-plant="calathea"] .plant__avatar { --blob: #e4eef1; --art-pot: #4f7f96; --art-pot-dark: #376070; }
.plant[data-plant="fern"]      .plant__avatar { --blob: #eaf0dd; --art-pot: #b2562f; --art-pot-dark: #8b4222; }

.plant__pill {
  position: absolute;
  right: -.35rem; bottom: -.3rem;
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  background: var(--card);
  color: var(--tone-ink, var(--ink-2));
  font-size: .72rem;
  font-weight: 700;
  padding: .22rem .5rem;
  border-radius: var(--r-pill);
  box-shadow: 0 2px 0 rgba(30, 42, 32, .1), 0 6px 12px -8px rgba(74, 52, 30, .5);
  z-index: 2;
}
.plant__pill .art { width: .95em; height: .95em; }
.plant[data-state="overdue"] .plant__pill { --tone-ink: var(--clay-deep); }
.plant[data-state="today"] .plant__pill { --tone-ink: #7d5406; }
.plant[data-state="done"] .plant__pill { --tone-ink: var(--moss-deep); }
.plant[data-state="snoozed"] .plant__pill { --tone-ink: #7a6a56; }

.plant__name {
  font-size: 1.28rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .45rem;
}
.plant__species {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-3);
}
.plant__meta {
  margin-top: .2rem;
  font-size: .88rem;
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .5rem;
}
.plant__task {
  font-weight: 700;
  color: var(--ink);
  background: rgba(30, 42, 32, .07);
  border-radius: 6px;
  padding: .05rem .4rem;
}
.plant__dot { color: var(--ink-3); }

.plant__due {
  margin-top: .5rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .92rem;
  font-weight: 680;
  color: var(--clay-deep);
}
.plant[data-state="today"] .plant__due { color: #7d5406; }
.plant[data-state="soon"] .plant__due { color: var(--moss-deep); }
.plant[data-state="snoozed"] .plant__due { color: #7a6a56; }
.plant[data-state="done"] .plant__due { color: var(--moss-deep); }
.plant__due .art { width: 1.05em; height: 1.05em; flex: none; }
.plant__due--overdue {
  position: relative;
  white-space: nowrap;
}
.plant__due--overdue::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.28rem;
  height: 6px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='6' viewBox='0 0 120 6' preserveAspectRatio='none'><path d='M1 4.4c9-3.4 15 1.6 24-.6s15 2 24-.4 15 1.8 24-.5 15 1.6 24-.4 15 1.4 22-.4' fill='none' stroke='%23b2562f' stroke-width='1.7' stroke-linecap='round' opacity='.55'/></svg>") no-repeat center / 100% 100%;
  pointer-events: none;
}

.plant__actions {
  margin-top: .85rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.plant[data-state="done"] .plant__card { background: linear-gradient(180deg, #fdfbf1, #f6f2e2); }
.plant[data-state="done"] .plant__name { color: var(--ink-2); }
.plant[data-state="snoozed"] .plant__card {
  background: repeating-linear-gradient(135deg, rgba(255,250,239,.94) 0 10px, rgba(246,240,227,.94) 10px 20px);
}
.plant.is-leaving { opacity: 0; transform: translateY(-6px) scale(.99); }
.plant.is-settling .plant__card { animation: pop var(--dur-slow) var(--spring); }
.plant.is-settling .plant__avatar { animation: hop var(--dur-slow) var(--spring) 2; }

.plant__undo-note {
  margin-top: .55rem;
  font-size: .82rem;
  color: var(--ink-3);
}

/* ==========================================================================
   Detail panel
   ========================================================================== */

.plant__detail {
  margin: .5rem 0 0 .8rem;
  padding: 1rem 1.05rem 1.1rem;
  background: linear-gradient(180deg, var(--paper-hi), #f6efdf);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--tone, var(--moss-hi));
  border-radius: var(--r-nib-r);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  animation: unroll var(--dur-slow) var(--ease);
}
@keyframes unroll {
  from { opacity: 0; transform: translateY(-8px); clip-path: inset(0 0 92% 0); }
  to   { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
.detail__grid { display: grid; gap: 1.05rem; }
.detail__block h4 {
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 750;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.detail__block h4 .art { width: 1.05em; height: 1.05em; color: var(--ochre); }

.meter { display: flex; align-items: center; gap: .35rem; }
.meter__pip {
  width: 15px; height: 22px;
  border-radius: 8px 8px 3px 3px;
  background: rgba(30, 42, 32, .1);
  box-shadow: inset 0 0 0 1px rgba(30, 42, 32, .07);
  transition: background-color var(--dur) var(--ease);
}
.meter__pip[data-on] { background: var(--ochre-hi); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.meter__val {
  margin-left: .4rem;
  font-size: .88rem;
  font-weight: 650;
  color: var(--ink-2);
}

.history { display: grid; gap: .42rem; }
.history li {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: .9rem;
  color: var(--ink-2);
}
.history li::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50% 40% 50% 40%;
  background: var(--moss-hi);
  translate: 0 -1px;
}
.history li[data-fresh] { color: var(--ink); font-weight: 640; }
.history li[data-fresh]::before { background: var(--clay); }
.history li time { color: var(--ink-3); font-size: .82rem; font-variant-numeric: tabular-nums; }

.detail__note {
  font-size: .92rem;
  color: var(--ink-2);
  font-style: italic;
  border-left: 3px solid var(--ochre-hi);
  padding-left: .7rem;
}

/* ==========================================================================
   All-done state
   ========================================================================== */

.alldone {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: .4rem 1.1rem;
  align-items: center;
  background: linear-gradient(160deg, #fdf6e4, #f3ecd6);
  border-radius: var(--r-nib);
  box-shadow: var(--paper-shadow);
  padding: 1.15rem 1.2rem;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
  animation: pop var(--dur-slow) var(--spring);
}
.alldone__art {
  display: grid;
  place-items: center;
  width: 74px; height: 78px;
  border-radius: 52% 48% 44% 56% / 48% 52% 48% 52%;
  background: var(--cream);
  box-shadow: var(--paper-shadow);
  --art-blossom: var(--ochre-hi);
  --art-blossom-deep: var(--ochre);
  --art-pot: var(--moss);
  animation: spin-slow 9s linear infinite;
}
.alldone__art .art { width: 58px; height: 58px; }
.alldone__title { font-size: 1.3rem; }
.alldone__text { margin-top: .25rem; color: var(--ink-2); font-size: .95rem; }
.alldone__list {
  margin-top: .6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.alldone__list li {
  font-size: .8rem;
  font-weight: 650;
  color: var(--moss-deep);
  background: rgba(90, 138, 68, .16);
  border-radius: var(--r-pill);
  padding: .22rem .6rem;
}
@keyframes pop {
  from { opacity: 0; transform: scale(.94) translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes spin-slow { to { rotate: 360deg; } }

/* little leaves drifting in the all-done panel */
.alldone__leaves { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.alldone__leaves span {
  position: absolute;
  top: -14px;
  width: 11px; height: 7px;
  background: var(--moss-hi);
  border-radius: 50% 0 50% 0;
  opacity: .55;
  animation: drift 3.4s var(--ease) infinite;
}
.alldone__leaves span:nth-child(1) { left: 8%;  animation-delay: 0s; }
.alldone__leaves span:nth-child(2) { left: 26%; animation-delay: .7s; background: var(--ochre-hi); }
.alldone__leaves span:nth-child(3) { left: 48%; animation-delay: 1.4s; }
.alldone__leaves span:nth-child(4) { left: 70%; animation-delay: 2.1s; background: var(--clay); }
.alldone__leaves span:nth-child(5) { left: 88%; animation-delay: 2.8s; }
@keyframes drift {
  0%   { transform: translateY(0) rotate(0); opacity: 0; }
  15%  { opacity: .6; }
  100% { transform: translateY(120px) rotate(200deg); opacity: 0; }
}

/* ==========================================================================
   Rail
   ========================================================================== */

.rail { display: grid; gap: 1rem; align-content: start; }
.rail__card { padding: 1.05rem 1.1rem 1.15rem; }
.rail__title {
  font-size: 1.08rem;
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .8rem;
}
.rail__icon {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 58% 42% 52% 48%;
  background: rgba(214, 154, 42, .18);
  color: var(--ochre);
  flex: none;
}
.rail__icon .art { width: 15px; height: 15px; }

.lightmap { display: grid; gap: .7rem; }
.lightmap li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: .1rem .65rem;
}
.lightmap__art { display: grid; place-items: center; width: 30px; height: 30px; }
.lightmap__art .art { width: 26px; height: 26px; }
.lightmap__name { font-size: .92rem; font-weight: 660; line-height: 1.15; }
.lightmap__where { font-size: .76rem; color: var(--ink-3); }
.lightmap .meter { grid-column: 2 / -1; }
.lightmap .meter__pip { width: 11px; height: 15px; }

.note { background: linear-gradient(165deg, #fdf7e8, #f4ecda); rotate: .5deg; }
.note__text {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.42;
  color: var(--ink);
}
.note__sign {
  margin-top: .7rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.note__mascot { display: grid; place-items: center; width: 30px; height: 30px; }
.note__mascot .art { width: 28px; height: 28px; }

.legend__list { display: grid; gap: .42rem; font-size: .87rem; color: var(--ink-2); }
.legend__list li { display: flex; align-items: center; gap: .55rem; }
.swatch {
  width: 16px; height: 16px;
  flex: none;
  border-radius: 6px 6px 6px 2px;
  background: var(--sw, var(--ink-3));
  box-shadow: inset 0 0 0 1px rgba(30, 42, 32, .1);
}
.swatch--overdue { --sw: var(--clay); }
.swatch--today   { --sw: var(--ochre); }
.swatch--soon    { --sw: var(--moss-hi); }
.swatch--snoozed { --sw: #b9a58a; }
.swatch--done    { --sw: var(--moss); }

/* ==========================================================================
   Toasts
   ========================================================================== */

.toasts {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  translate: -50% 0;
  z-index: 70;
  display: grid;
  gap: .55rem;
  width: min(30rem, calc(100vw - 1.5rem));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: .8rem;
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--r-chip);
  padding: .7rem .8rem .7rem 1rem;
  box-shadow: 0 14px 34px -14px rgba(30, 42, 32, .8);
  position: relative;
  overflow: hidden;
  animation: toast-in var(--dur-slow) var(--spring);
}
.toast.is-going { animation: toast-out 200ms var(--ease) forwards; }
.toast__text { font-size: .92rem; font-weight: 560; }
.toast__text strong { font-weight: 720; }
.toast__art { display: grid; place-items: center; width: 26px; height: 26px; flex: none; color: var(--moss-hi); }
.toast__art .art { width: 22px; height: 22px; }
.toast__undo-wrap { margin-left: auto; }
.toast__timer {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: 100%;
  transform-origin: 0 50%;
  background: var(--ochre-hi);
  animation: shrink 7s linear forwards;
}
.toast--undoing .toast__timer { animation: grow .3s var(--ease) forwards; }
@keyframes shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes grow  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes toast-in  { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px) scale(.98); } }

/* watering droplets */
.splash { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.splash span {
  position: absolute;
  top: 46%;
  width: 8px; height: 8px;
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  background: #7fc4e8;
  opacity: 0;
  animation: splash 620ms var(--ease) forwards;
}
@keyframes splash {
  0%   { opacity: 0; transform: translate(0, 0) scale(.4); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -34px)) scale(1.1); }
}

/* ==========================================================================
   Mascot behaviour
   ========================================================================== */

.mascot-eye { transform-origin: center; animation: blink 5.5s var(--ease) infinite; }
@keyframes blink { 0%, 92%, 100% { scale: 1 1; } 95% { scale: 1 .12; } }

.is-celebrating .brand__mark { animation: hop var(--dur-slow) var(--spring); }
.is-celebrating .mascot-eye { animation: happy 700ms var(--ease) 2; }
.is-celebrating .brand__mark .art { rotate: -6deg; }
@keyframes happy { 0%, 100% { scale: 1 1; } 50% { scale: 1.2 1.2; } }
@keyframes hop {
  0%   { transform: translateY(0) rotate(0); }
  30%  { transform: translateY(-7px) rotate(-7deg); }
  60%  { transform: translateY(0) rotate(3deg); }
  80%  { transform: translateY(-3px) rotate(0); }
  100% { transform: translateY(0) rotate(0); }
}

@keyframes sway {
  0%, 100% { transform: rotate(-1.6deg); }
  50%      { transform: rotate(1.6deg); }
}

/* ==========================================================================
   Colophon
   ========================================================================== */

.colophon {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 clamp(1rem, 4vw, 2.4rem) 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.2rem;
  justify-content: space-between;
  font-size: .82rem;
  color: var(--ink-3);
  border-top: 1px dashed var(--line);
  padding-top: 1rem;
}

/* ==========================================================================
   Desktop — a real composition, not a wider phone column
   ========================================================================== */

@media (min-width: 46rem) {
  .plant__card {
    grid-template-columns: 76px minmax(0, 1fr);
    padding: 1.15rem 1.3rem 1.2rem;
  }
  .plant__avatar { width: 76px; height: 84px; }
  .plant__avatar .art { width: 64px; height: 64px; }
  .plant__name { font-size: 1.4rem; }
  .rhythm { grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr); align-items: center; padding: 1.1rem 1.3rem; }
  .rhythm__bars { height: 104px; }
  .alldone { grid-template-columns: 84px minmax(0, 1fr); padding: 1.25rem 1.4rem; }
  .alldone__art { width: 84px; height: 88px; }
  .alldone__art .art { width: 66px; height: 66px; }
  .detail__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; }
  .detail__block--note { grid-column: 1 / -1; }
}

@media (min-width: 62rem) {
  .masthead { padding-top: 1.6rem; }
  .shell {
    grid-template-columns: minmax(0, 1fr) clamp(17rem, 25vw, 21rem);
    grid-template-areas:
      "hero   hero"
      "queue  rail";
    column-gap: 1.6rem;
    row-gap: 1.5rem;
  }
  .hero { grid-area: hero; }
  .queue-wrap { grid-area: queue; }
  .rail {
    grid-area: rail;
    position: sticky;
    top: 1.1rem;
  }
  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: 1.6rem;
  }
  .rhythm { rotate: .6deg; }
  .note { rotate: -.7deg; }
  /* a little paper edge behind the rail for warmth */
  .rail::before {
    content: "";
    position: absolute;
    inset: -.5rem -.5rem -.6rem;
    background: rgba(255, 250, 239, .5);
    border-radius: 40px 40px 40px 14px;
    z-index: -1;
  }
  .rail { isolation: isolate; }
}

@media (min-width: 80rem) {
  .shell { column-gap: 2.2rem; }
}

/* ==========================================================================
   Reduced motion — honour it everywhere
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .bar, .plant__avatar, .alldone__art, .alldone__leaves span, .mascot-eye {
    animation: none !important;
  }
  .bar { height: var(--h, 20%); }
  .toast__timer { animation: none !important; }
  .splash span { display: none; }
}

@media (prefers-contrast: more) {
  :root { --line: rgba(30, 42, 32, .4); --line-soft: rgba(30, 42, 32, .28); --ink-2: #333c33; --ink-3: #4a544a; }
  .card, .plant__card, .plant__detail { box-shadow: none; border: 1px solid var(--line); }
  :focus-visible { outline-width: 4px; }
}

@media print {
  body::after, .toasts, .rail, .colophon__hint { display: none; }
  .shell { display: block; }
}

gpt-6-astra/13-frontend-playful/RESPONSE.md

gpt-6-astra/13-frontend-playful/TASK.md

gpt-6-astra/13-frontend-playful/app.js

'use strict';

// Embedded from PLANTS.json so opening index.html needs no server or requests.
const PLANT_DATA = {
  plants: [
    { id: 'fern', name: 'Frida', species: 'Boston fern', location: 'Bathroom', task: 'Water', due: '2 days overdue', urgency: 4, light: 'Low, indirect', history: ['Sep 19 · Misted', 'Sep 16 · Watered', 'Sep 12 · New frond'] },
    { id: 'pothos', name: 'Orbit', species: 'Golden pothos', location: 'Bookshelf', task: 'Rotate', due: 'Today', urgency: 2, light: 'Medium, indirect', history: ['Sep 20 · Watered', 'Sep 14 · Rotated', 'Sep 10 · Wiped leaves'] },
    { id: 'cactus', name: 'Dot', species: 'Bunny ears cactus', location: 'South window', task: 'Check soil', due: 'Today', urgency: 1, light: 'Bright, direct', history: ['Sep 08 · Watered', 'Sep 01 · New pad noted', 'Aug 22 · Rotated'] },
    { id: 'calathea', name: 'Drama', species: 'Calathea orbifolia', location: 'Bedroom', task: 'Mist', due: 'Tomorrow', urgency: 0, light: 'Medium, filtered', history: ['Sep 21 · Misted', 'Sep 18 · Watered', 'Sep 15 · Brown edge noted'] }
  ],
  week: [1, 3, 2, 4, 2, 1, 3]
};
const CARE = {
  Water: { icon: 'drop', past: 'Watered', prompt: 'A drink for those thirsty roots.' },
  Rotate: { icon: 'rotate', past: 'Rotated', prompt: 'A little turn toward the light.' },
  'Check soil': { icon: 'soil', past: 'Checked soil', prompt: 'Check in before reaching for water.' },
  Mist: { icon: 'drop', past: 'Misted', prompt: 'A little mist is on the list.' }
};
const STORAGE_KEY = 'moss-garden-v1';
const UNDO_MS = 12000;
const $ = (selector, root = document) => root.querySelector(selector);
const escapeHTML = value => String(value).replace(/[&<>"']/g, character => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[character]));
const icon = name => `<svg class="icon" aria-hidden="true"><use href="#icon-${name}"/></svg>`;
const art = id => `<svg class="plant-art" viewBox="0 0 160 180" aria-hidden="true"><use href="#plant-${id}"/></svg>`;
const plantById = id => PLANT_DATA.plants.find(plant => plant.id === id);
const shortDate = date => new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric' }).format(date);
const localDay = (date = new Date()) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
const dayNumber = day => Date.parse(`${day}T12:00:00Z`) / 86400000;
const addDays = (day, amount) => new Date((dayNumber(day) + amount) * 86400000).toISOString().slice(0, 10);
const validDay = day => typeof day === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(day) && Number.isFinite(dayNumber(day)) && addDays(day, 0) === day;
const newId = () => globalThis.crypto?.randomUUID?.() || `${Date.now()}-${Math.random().toString(36).slice(2)}`;
let storageAvailable = true;

function loadState() {
  const initial = { version: 1, anchorDay: localDay(), tasks: {}, entries: [] };
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (!raw) return initial;
    const saved = JSON.parse(raw);
    if (saved?.version !== 1 || !validDay(saved.anchorDay) || !saved.tasks || typeof saved.tasks !== 'object' || !Array.isArray(saved.entries)) return initial;
    const entries = saved.entries.filter(entry => entry && typeof entry.id === 'string' && plantById(entry.plantId) && ['water', 'task', 'observation'].includes(entry.kind) && typeof entry.label === 'string' && entry.label.length <= 280 && typeof entry.at === 'string' && Number.isFinite(Date.parse(entry.at)));
    const tasks = {};
    for (const plant of PLANT_DATA.plants) {
      const task = saved.tasks[plant.id];
      if (!task || typeof task.operationId !== 'string') continue;
      if (task.status === 'done' && typeof task.completedAt === 'string' && Number.isFinite(Date.parse(task.completedAt)) && entries.some(entry => entry.id === task.eventId && entry.plantId === plant.id && entry.kind !== 'observation')) tasks[plant.id] = task;
      if (task.status === 'snoozed' && validDay(task.dueDay)) tasks[plant.id] = task;
    }
    return { version: 1, anchorDay: saved.anchorDay, tasks, entries };
  } catch {
    storageAvailable = false;
    return initial;
  }
}

let state = loadState();
let openPlantId = null;
let returnFocusKey = null;
let renderedDay = localDay();
const dialog = $('#plant-dialog');
const toastStack = $('#toast-stack');
const receipts = new Map();

function persist() {
  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); storageAvailable = true; }
  catch { storageAvailable = false; }
  $('#storage-status').textContent = storageAvailable ? 'Saved on this device. A little space of your own.' : 'Care works for this visit. Browser storage is unavailable.';
}

function announce(message) {
  $('#announcer').textContent = '';
  window.setTimeout(() => { $('#announcer').textContent = message; }, 30);
}

function dueDay(plant) {
  const task = state.tasks[plant.id];
  if (task?.status === 'snoozed') return task.dueDay;
  return addDays(state.anchorDay, plant.due === 'Tomorrow' ? 1 : plant.due.includes('overdue') ? -2 : 0);
}

function daysUntil(plant) { return dayNumber(dueDay(plant)) - dayNumber(localDay()); }
function isDone(plant) { return state.tasks[plant.id]?.status === 'done'; }
function dueText(plant) {
  if (isDone(plant)) return 'Tended to';
  const days = daysUntil(plant);
  if (days < 0) return `${Math.abs(days)} ${days === -1 ? 'day' : 'days'} overdue`;
  if (days === 0) return 'Today';
  if (days === 1) return 'Tomorrow';
  return `In ${days} days`;
}

function queueRow(plant, upcoming = false) {
  const care = CARE[plant.task];
  const overdue = daysUntil(plant) < 0;
  const snoozed = state.tasks[plant.id]?.status === 'snoozed';
  return `<article class="plant-row ${upcoming ? 'upcoming' : ''} ${overdue ? 'overdue' : ''}" aria-label="${plant.name}, ${plant.task.toLowerCase()}, ${dueText(plant).toLowerCase()}">
    <button class="plant-art-button" data-open-plant="${plant.id}" data-return="queue-art-${plant.id}" aria-label="View ${plant.name}’s care details">${art(plant.id)}</button>
    <div class="row-copy"><div class="row-heading"><h3><button class="plant-name-button" data-open-plant="${plant.id}" data-return="queue-name-${plant.id}" aria-label="View ${plant.name}’s care details">${plant.name}</button></h3><span class="due-label">${dueText(plant)}</span></div>
    <p class="plant-meta">${plant.species} <span aria-hidden="true">·</span> ${plant.location}</p>
    <p class="task-label">${icon(care.icon)}${snoozed ? 'Snoozed · ' : ''}${plant.task}${upcoming ? '' : `<span class="sr-only">. ${care.prompt}</span>`}</p></div>
    ${upcoming ? `<button class="icon-button" data-open-plant="${plant.id}" data-return="queue-next-${plant.id}" aria-label="View ${plant.name}’s upcoming care">${icon('arrow')}</button>` : `<div class="row-actions"><button class="primary-button" data-action="complete" data-plant="${plant.id}" aria-label="Mark ${plant.name} as ${care.past.toLowerCase()}">${icon(care.icon)}${care.past}</button><button class="snooze-button" data-action="snooze" data-plant="${plant.id}" aria-label="Snooze ${plant.name}’s ${plant.task.toLowerCase()} until tomorrow">${icon('clock')}Snooze</button></div>`}
  </article>`;
}

function renderQueue() {
  const sorted = [...PLANT_DATA.plants].sort((a, b) => daysUntil(a) - daysUntil(b) || b.urgency - a.urgency);
  const pending = sorted.filter(plant => !isDone(plant) && daysUntil(plant) <= 0);
  const upcoming = sorted.filter(plant => !isDone(plant) && daysUntil(plant) > 0);
  const completed = sorted.filter(isDone);
  $('#today-queue').innerHTML = pending.map(plant => queueRow(plant)).join('');
  $('#upcoming-queue').innerHTML = upcoming.map(plant => queueRow(plant, true)).join('');
  $('#upcoming-section').hidden = !upcoming.length;
  $('#queue-count').textContent = pending.length;
  $('#queue-count').setAttribute('aria-label', `${pending.length} care ${pending.length === 1 ? 'task' : 'tasks'} remaining`);
  $('#all-done').hidden = pending.length > 0;
  $('#daily-summary').textContent = pending.length ? `${pending.length} ${pending.length === 1 ? 'plant needs' : 'plants need'} a little love` : 'A little room to breathe. All done.';
  $('.daily-pill').classList.toggle('is-done', !pending.length);
  $('#queue-intro').textContent = pending.some(plant => daysUntil(plant) < 0) ? 'Start with the one that’s waited a little longer.' : pending.length ? 'A few small moments. That’s all it takes.' : 'Nothing more needs your attention today.';
  const postponed = upcoming.filter(plant => state.tasks[plant.id]?.status === 'snoozed').length;
  $('#done-description').textContent = postponed ? `${postponed} ${postponed === 1 ? 'plant is' : 'plants are'} snoozed until tomorrow. You’ll find ${postponed === 1 ? 'it' : 'them'} below when you’re ready.` : upcoming.length ? `Today’s care is complete. ${upcoming[0].name}’s ${upcoming[0].task.toLowerCase()} is up ${dueText(upcoming[0]).toLowerCase()} — until then, enjoy the green.` : 'Every plant on your list has been cared for. Take a breath, or add a little observation to a plant’s journal.';
  $('#completed-section').hidden = !completed.length;
  const doneToday = completed.filter(plant => localDay(new Date(state.tasks[plant.id].completedAt)) === localDay()).length;
  $('#completed-summary').textContent = `${completed.length} tended to${doneToday === completed.length ? ' today' : ''}`;
  $('#completed-list').innerHTML = completed.map(plant => `<div class="completed-row">${icon('check')}<button data-open-plant="${plant.id}" data-return="completed-${plant.id}" aria-label="View ${plant.name}’s care history">${plant.name}</button><span>${CARE[plant.task].past}</span></div>`).join('');
}

function renderWeek() {
  const now = new Date();
  const todayIndex = (now.getDay() + 6) % 7;
  const monday = addDays(localDay(now), -todayIndex);
  const counts = [...PLANT_DATA.week];
  for (const entry of state.entries) {
    if (entry.kind === 'observation') continue;
    const offset = dayNumber(localDay(new Date(entry.at))) - dayNumber(monday);
    if (offset >= 0 && offset < 7) counts[offset] += 1;
  }
  const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
  const max = Math.max(...counts, 1);
  const chart = $('#week-chart');
  chart.innerHTML = counts.map((count, index) => `<div class="day-column ${index === todayIndex ? 'is-today' : ''}" aria-hidden="true"><span class="day-count">${count}</span><div class="day-bar"></div><span class="day-label">${days[index].slice(0, 1)}</span></div>`).join('');
  chart.querySelectorAll('.day-bar').forEach((bar, index) => { bar.style.height = `${Math.round(16 + counts[index] / max * 53)}px`; });
  chart.setAttribute('aria-label', `Weekly care moments: ${counts.map((count, index) => `${days[index]}${index === todayIndex ? ', today,' : ''} ${count}`).join('; ')}. Today is underlined.`);
  $('#week-total').textContent = counts.reduce((sum, count) => sum + count, 0);
}

function renderCollection() {
  $('#plant-collection').innerHTML = PLANT_DATA.plants.map(plant => `<button class="collection-plant" data-open-plant="${plant.id}" data-return="collection-${plant.id}" aria-label="View ${plant.name}, ${plant.species}, ${plant.location}. ${dueText(plant)}.">${art(plant.id)}<span><span class="collection-name">${plant.name}</span><span class="collection-location">${plant.location}</span><span class="collection-status">${isDone(plant) ? '✓ Tended to' : `${plant.task} · ${dueText(plant).toLowerCase()}`}</span></span></button>`).join('');
}

function historyFor(plant) {
  const added = state.entries.filter(entry => entry.plantId === plant.id).slice().reverse().map(entry => ({ date: shortDate(new Date(entry.at)), label: entry.label, kind: entry.kind, at: entry.at }));
  const original = plant.history.map(item => {
    const [date, label] = item.split(' · ');
    return { date, label, kind: /new|brown/i.test(label) ? 'observation' : label === 'Watered' ? 'water' : 'task' };
  });
  return [...added, ...original];
}

function renderDetail({ clearDraft = false } = {}) {
  if (!openPlantId) return;
  const plant = plantById(openPlantId);
  const care = CARE[plant.task];
  const draft = clearDraft ? '' : $('#observation')?.value || '';
  const selection = $('#observation')?.selectionStart || 0;
  const focusedKey = dialog.contains(document.activeElement) ? document.activeElement.dataset.focus : null;
  const history = historyFor(plant);
  const lastWater = history.find(entry => entry.kind === 'water');
  const done = isDone(plant);
  const later = daysUntil(plant) > 0;
  const wateredToday = state.entries.some(entry => entry.plantId === plant.id && entry.kind === 'water' && localDay(new Date(entry.at)) === localDay());
  $('#plant-detail').innerHTML = `<div class="detail-top"><p class="eyebrow">FROM YOUR LITTLE JUNGLE</p><button class="icon-button close-detail" data-close-detail data-focus="close" aria-label="Close plant details" autofocus>${icon('close')}</button><div class="detail-identity">${art(plant.id)}<div><h2 id="detail-name">${plant.name}</h2><p>${plant.species}<br>${plant.location}</p></div></div></div>
    <div class="detail-body"><div class="detail-facts"><section><h3>${icon('sun')}Light</h3><p>${plant.light}</p><p class="fact-note">At home in the ${plant.location.toLowerCase()}.</p></section><section><h3>${icon('drop')}Water</h3><p>${lastWater ? `Last watered ${escapeHTML(lastWater.date)}` : 'No watering recorded yet'}</p><p class="fact-note">Check the soil before a drink.</p></section></div>
    <section class="detail-task" aria-label="Current care"><p>${done ? `${icon('check')} <strong>${care.past}.</strong> This care task is complete.` : `<strong>${plant.task}</strong> · ${dueText(plant)}${state.tasks[plant.id]?.status === 'snoozed' ? ' (snoozed)' : ''}`}<br>${care.prompt}</p>
    ${!done ? `<div class="row-actions"><button class="primary-button" data-action="complete" data-plant="${plant.id}" data-focus="complete" aria-label="Mark ${plant.name} as ${care.past.toLowerCase()}">${icon(care.icon)}${care.past}${later ? ' early' : ''}</button>${!later ? `<button class="snooze-button" data-action="snooze" data-plant="${plant.id}" data-focus="snooze" aria-label="Snooze ${plant.name}’s care until tomorrow">${icon('clock')}Snooze until tomorrow</button>` : ''}</div>` : ''}
    ${plant.task !== 'Water' ? `<button class="secondary-button extra-water" data-action="water" data-plant="${plant.id}" data-focus="water" ${wateredToday ? 'disabled' : ''} aria-label="${wateredToday ? `${plant.name} was watered today` : `Log watering for ${plant.name}`}">${icon(wateredToday ? 'check' : 'drop')}${wateredToday ? 'Watered today' : 'Log watered'}</button>` : ''}</section>
    <section class="history-section" aria-labelledby="history-heading"><h3 id="history-heading">Care & observations</h3><ol class="history-list">${history.map(entry => `<li><span class="history-date">${escapeHTML(entry.date)}</span><span>${escapeHTML(entry.label)}${entry.kind === 'observation' ? '<span class="history-kind">Observation</span>' : ''}</span></li>`).join('')}</ol></section>
    <form class="observation-form" id="observation-form"><label for="observation">Notice something new?</label><textarea id="observation" name="observation" maxlength="280" required data-focus="observation" aria-describedby="observation-hint" placeholder="A new leaf? A small victory?">${escapeHTML(draft)}</textarea><div class="form-footer"><span class="form-hint" id="observation-hint">Your little field notes. Up to 280 characters.</span><button class="secondary-button" type="submit" data-focus="save-note">Save note ${icon('arrow')}</button></div></form></div>`;
  if (focusedKey) {
    const target = $(`[data-focus="${focusedKey}"]`, dialog);
    if (target && !target.disabled) target.focus({ preventScroll: true });
    else $('.close-detail', dialog).focus({ preventScroll: true });
    if (focusedKey === 'observation') $('#observation').setSelectionRange(selection, selection);
  }
}

function renderAll(options = {}) {
  renderedDay = localDay();
  const date = $('#today-date');
  date.dateTime = renderedDay;
  date.textContent = new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', weekday: 'short' }).format(new Date());
  renderQueue();
  renderWeek();
  renderCollection();
  renderDetail(options);
}

function openDetail(id, trigger) {
  if (!plantById(id)) return;
  openPlantId = id;
  returnFocusKey = trigger?.dataset.return || `collection-${id}`;
  // A new plant starts a fresh note; actions within this panel preserve its draft.
  renderDetail({ clearDraft: true });
  dialog.append(toastStack);
  dialog.append($('#announcer'));
  if (!dialog.open) dialog.showModal();
  dialog.scrollTop = 0;
}

function removeReceipt(id) {
  const receipt = receipts.get(id);
  if (!receipt) return;
  clearTimeout(receipt.timer);
  receipt.element.remove();
  receipts.delete(id);
}

function offerUndo(transaction, message) {
  // Only a plant's latest change is reversible; other plants keep their own undo.
  for (const [id, receipt] of receipts) if (receipt.transaction.plantId === transaction.plantId) removeReceipt(id);
  const element = document.createElement('div');
  element.className = 'toast';
  element.innerHTML = `<span>${escapeHTML(message)}</span><button class="toast-undo" data-undo="${transaction.id}" aria-label="Undo: ${escapeHTML(message)}">Undo</button>`;
  toastStack.append(element);
  const receipt = { element, transaction, timer: null, remaining: UNDO_MS, started: performance.now(), hovered: false };
  receipts.set(transaction.id, receipt);
  const pause = () => {
    if (receipt.timer === null) return;
    clearTimeout(receipt.timer);
    receipt.timer = null;
    receipt.remaining = Math.max(0, receipt.remaining - (performance.now() - receipt.started));
  };
  const resume = () => {
    if (receipt.hovered || element.contains(document.activeElement) || document.hidden) return;
    receipt.started = performance.now();
    clearTimeout(receipt.timer);
    receipt.timer = setTimeout(() => removeReceipt(transaction.id), Math.max(receipt.remaining, 1500));
  };
  receipt.pause = pause;
  receipt.resume = resume;
  element.addEventListener('pointerenter', () => { receipt.hovered = true; pause(); });
  element.addEventListener('pointerleave', () => { receipt.hovered = false; resume(); });
  element.addEventListener('focusin', pause);
  element.addEventListener('focusout', () => setTimeout(resume, 0));
  resume();
  announce(`${message} Undo is available for 12 seconds and stays available while focused.`);
}

function focusAfterAction(plantId) {
  if (dialog.open) return;
  const target = $(`[data-action="complete"][data-plant="${plantId}"]`) || $('#today-queue [data-action="complete"]') || $('#care-queue');
  target.focus({ preventScroll: true });
}

function act(type, plantId) {
  const plant = plantById(plantId);
  if (!plant || !['complete', 'snooze', 'water'].includes(type)) return;
  if ((type === 'complete' || type === 'snooze') && isDone(plant)) return;
  if (type === 'water' && state.entries.some(entry => entry.plantId === plantId && entry.kind === 'water' && localDay(new Date(entry.at)) === localDay())) return;
  const id = newId();
  const transaction = { id, plantId, previousTask: state.tasks[plantId] ? { ...state.tasks[plantId] } : null, changesTask: type !== 'water', eventId: null };
  let message;
  if (type === 'snooze') {
    state.tasks[plantId] = { status: 'snoozed', dueDay: addDays(localDay(), 1), operationId: id };
    message = `${plant.name}’s ${plant.task.toLowerCase()} can wait until tomorrow.`;
  } else {
    const at = new Date().toISOString();
    const label = type === 'water' ? 'Watered' : CARE[plant.task].past;
    const entry = { id: newId(), plantId, kind: label === 'Watered' ? 'water' : 'task', label, at };
    state.entries.push(entry);
    transaction.eventId = entry.id;
    if (type === 'complete') state.tasks[plantId] = { status: 'done', completedAt: at, eventId: entry.id, operationId: id };
    message = `${plant.name} ${label.toLowerCase()}. A little love, logged.`;
  }
  persist();
  renderAll();
  focusAfterAction(plantId);
  offerUndo(transaction, message);
}

function undo(id) {
  const receipt = receipts.get(id);
  if (!receipt) return;
  const transaction = receipt.transaction;
  if (transaction.eventId) state.entries = state.entries.filter(entry => entry.id !== transaction.eventId);
  if (transaction.changesTask && state.tasks[transaction.plantId]?.operationId === transaction.id) {
    if (transaction.previousTask) state.tasks[transaction.plantId] = transaction.previousTask;
    else delete state.tasks[transaction.plantId];
  }
  removeReceipt(id);
  persist();
  renderAll();
  if (dialog.open) $('.close-detail', dialog).focus({ preventScroll: true });
  else focusAfterAction(transaction.plantId);
  announce(`Undone. ${plantById(transaction.plantId).name}’s previous care record is restored.`);
}

document.addEventListener('click', event => {
  const target = event.target.closest('button');
  if (!target) return;
  if (target.hasAttribute('data-close-detail')) dialog.close();
  else if (target.dataset.openPlant) openDetail(target.dataset.openPlant, target);
  else if (target.dataset.action) act(target.dataset.action, target.dataset.plant);
  else if (target.dataset.undo) undo(target.dataset.undo);
});

dialog.addEventListener('close', () => {
  document.body.append(toastStack);
  document.body.append($('#announcer'));
  const plantId = openPlantId;
  openPlantId = null;
  const target = $(`[data-return="${returnFocusKey}"]`) || $(`[data-return="collection-${plantId}"]`) || $('#care-queue');
  target.focus({ preventScroll: true });
});

// Only a click that both starts and ends outside the panel dismisses it.
let backdropStart = false;
dialog.addEventListener('pointerdown', event => { backdropStart = event.target === dialog && outsideDialog(event); });
dialog.addEventListener('click', event => { if (backdropStart && event.target === dialog && outsideDialog(event)) dialog.close(); backdropStart = false; });
function outsideDialog(event) {
  const rect = dialog.getBoundingClientRect();
  return event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom;
}

document.addEventListener('submit', event => {
  if (event.target.id !== 'observation-form') return;
  event.preventDefault();
  const input = $('#observation');
  const label = input.value.trim();
  if (!label) { input.setCustomValidity('Write a little observation first.'); input.reportValidity(); return; }
  const entry = { id: newId(), plantId: openPlantId, kind: 'observation', label: label.slice(0, 280), at: new Date().toISOString() };
  state.entries.push(entry);
  persist();
  renderAll({ clearDraft: true });
  offerUndo({ id: newId(), plantId: openPlantId, changesTask: false, eventId: entry.id }, `${plantById(openPlantId).name}’s observation is saved.`);
});
document.addEventListener('input', event => { if (event.target.id === 'observation') event.target.setCustomValidity(''); });

document.addEventListener('visibilitychange', () => {
  for (const receipt of receipts.values()) document.hidden ? receipt.pause() : receipt.resume();
  if (!document.hidden && localDay() !== renderedDay) renderAll();
});
// A page left open overnight should bring tomorrow's care back into the queue.
setInterval(() => { if (localDay() !== renderedDay && !document.hidden) renderAll(); }, 60000);

renderAll();
persist();

gpt-6-astra/13-frontend-playful/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#f7f4e9">
  <meta name="description" content="Moss is a gentle place to keep up with your plants. A little care, a little growth.">
  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self' data:; connect-src 'none'; font-src 'none'; base-uri 'none'; form-action 'none'">
  <title>Moss — a little care, a little growth</title>
  <link rel="stylesheet" href="styles.css">
  <script src="app.js" defer></script>
</head>
<body>
  <a class="skip-link" href="#care-queue">Skip to today’s care</a>
  <svg class="svg-library" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <defs>
      <symbol id="icon-drop" viewBox="0 0 24 24"><path d="M12 3s-6 7-6 11a6 6 0 0 0 12 0c0-4-6-11-6-11Z"/><path d="M9 14a3 3 0 0 0 3 3"/></symbol>
      <symbol id="icon-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M12 7v5l3 2"/></symbol>
      <symbol id="icon-check" viewBox="0 0 24 24"><path d="m5 12 4 4L19 6"/></symbol>
      <symbol id="icon-arrow" viewBox="0 0 24 24"><path d="M5 12h14m-5-5 5 5-5 5"/></symbol>
      <symbol id="icon-rotate" viewBox="0 0 24 24"><path d="M20 10a8 8 0 1 0-2 8M20 4v6h-6"/></symbol>
      <symbol id="icon-soil" viewBox="0 0 24 24"><path d="M4 16h16M5 20h2m4 0h2m4 0h2M12 14V4m-4 6 4 4 4-4"/></symbol>
      <symbol id="icon-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5"/></symbol>
      <symbol id="icon-close" viewBox="0 0 24 24"><path d="m6 6 12 12M6 18 18 6"/></symbol>
      <symbol id="icon-leaf" viewBox="0 0 24 24"><path d="M5 19c-3-13 5-15 15-15 0 10-2 18-15 15Zm0 0L16 8"/></symbol>
      <symbol id="plant-fern" viewBox="0 0 160 180">
        <path fill="#cdd8ad" d="M15 113C-5 62 22 8 69 13c48-21 91 21 82 68s-93 75-136 32Z"/>
        <g fill="none" stroke="#355839" stroke-width="3" stroke-linecap="round"><path d="M80 123C80 76 54 32 23 40m57 83c0-63 4-87 22-106m-22 105C64 79 44 73 16 80m65 40c17-58 40-69 68-61M80 123c-9-57 31-78 59-78M80 119C62 67 43 55 18 58"/></g>
        <g fill="#466d43"><path d="M64 84C45 81 43 71 43 61c12 4 21 11 21 23Zm-9-23C38 61 32 51 31 41c14 4 20 11 24 20Zm-15-17C24 48 17 44 13 35c12-3 20 1 27 9Zm32 59C52 100 47 89 47 80c16 5 23 12 25 23Zm-20-9C36 99 24 91 22 81c14-2 24 3 30 13Zm-23-15C15 83 7 80 3 73c11-4 20-3 26 6Zm53-21c-13-12-12-24-6-33 10 10 11 22 6 33Zm5-19C86 25 94 13 104 9c0 14-6 25-17 30Zm-6 45C64 74 63 63 67 53c13 8 19 19 14 31Zm9-16c-1-17 8-29 20-29-2 13-8 23-20 29Zm8 25c1-18 12-26 22-23-4 12-12 20-22 23Zm14-21c3-15 12-23 25-20-6 11-12 17-25 20Zm21-13c2-11 12-17 22-15-3 11-9 15-22 15Zm-17-4c1-17 6-24 18-26-2 12-7 20-18 26Z"/></g>
        <path fill="#b66849" d="m51 113 8 48q21 11 42 0l9-48Z"/><ellipse fill="#88452e" cx="80" cy="114" rx="31" ry="7"/><path fill="#cb8059" d="M48 112h64v13H48z"/><path fill="none" stroke="#e8b48b" stroke-width="2" d="M63 132v20m9-20v23m9-23v24m9-24v23m9-23v19"/>
      </symbol>
      <symbol id="plant-pothos" viewBox="0 0 160 180">
        <path fill="#e5ce88" d="M28 30C65 6 128 18 144 58s-15 95-64 93S-7 77 28 30Z"/>
        <g fill="none" stroke="#42613b" stroke-width="3" stroke-linecap="round"><path d="M78 119C57 88 44 44 74 28m10 89c6-45 39-32 45-66m-47 69c-27 6-52 19-50 45m47-48C72 74 92 71 99 48"/></g>
        <g fill="#547346"><path d="M65 69C31 73 27 49 37 45c14-6 25 6 28 24Zm3-20C50 35 61 16 71 19c14 4 7 21-3 30Zm8 46C44 103 30 77 43 72c14-5 26 6 33 23Zm17-16C80 53 91 34 103 41c13 8 4 28-10 38Zm18 4c-2-27 18-43 28-32 10 13-6 26-28 32ZM52 136c-25-9-40 9-32 20 10 13 29 1 32-20Zm-16 19c19-14 32-5 28 7-4 14-26 16-28-7Z"/></g>
        <g fill="#a6b363"><path d="M60 65 38 49c12 1 19 6 22 16Zm11 23L45 77c12-1 20 3 26 11Zm26-18 5-23c4 9 1 17-5 23Zm22 5 16-20c-1 10-6 16-16 20Z"/></g>
        <path fill="#e1b754" d="m54 110 6 51q23 12 46-1l6-50Z"/><ellipse fill="#8b7039" cx="83" cy="111" rx="30" ry="6"/><path fill="#ebc767" d="M50 109h65v13H50z"/><path fill="none" stroke="#967b39" stroke-width="2" d="M66 135q17 10 34 0m-34 13q17 10 34 0"/>
      </symbol>
      <symbol id="plant-cactus" viewBox="0 0 160 180">
        <path fill="#e5d9d7" d="M12 89C10 40 42 19 85 26s72 32 59 75-54 59-86 41S14 121 12 89Z"/>
        <g stroke="#496245" stroke-width="2"><path fill="#7c965e" d="M76 126c-19-6-23-29-17-48 4-16 27-19 38-7 17 19 6 49-21 55Z"/><path fill="#91a872" d="M65 83C43 79 28 60 35 43c8-17 29-12 35 1 7 14 7 27-5 39Z"/><path fill="#91a872" d="M87 72c-10-21 0-47 17-48 19-1 23 20 15 34-8 15-21 20-32 14Z"/></g>
        <g fill="#e9e5c6"><circle cx="45" cy="47" r="2"/><circle cx="58" cy="47" r="2"/><circle cx="51" cy="60" r="2"/><circle cx="64" cy="67" r="2"/><circle cx="97" cy="40" r="2"/><circle cx="110" cy="40" r="2"/><circle cx="93" cy="53" r="2"/><circle cx="106" cy="54" r="2"/><circle cx="69" cy="85" r="2"/><circle cx="83" cy="82" r="2"/><circle cx="94" cy="93" r="2"/><circle cx="75" cy="99" r="2"/><circle cx="86" cy="110" r="2"/><circle cx="64" cy="110" r="2"/></g>
        <path fill="#9a614f" d="m51 118 9 45q20 9 40 0l10-45Z"/><ellipse fill="#754c3b" cx="80" cy="119" rx="29" ry="6"/><path fill="#b67d64" d="M48 116h64v14H48z"/><path fill="none" stroke="#dfb296" stroke-width="3" d="m60 142 9 9 10-9 10 9 10-9"/>
      </symbol>
      <symbol id="plant-calathea" viewBox="0 0 160 180">
        <path fill="#d9dfc4" d="M19 39C49 10 109 10 135 52s19 84-29 94S-14 95 19 39Z"/>
        <g fill="none" stroke="#567049" stroke-width="3"><path d="M82 126 49 63m33 64 26-76m-25 75-5-88m5 87 45-40"/></g>
        <g fill="#668659" stroke="#355a3c" stroke-width="1.5"><path d="M68 101C23 101 13 60 30 43c31 0 53 29 38 58Z"/><path d="M82 78C52 61 59 24 79 13c25 15 29 46 3 65Z"/><path d="M93 101c-17-35 4-67 35-67 16 28 3 59-35 67Z"/><path d="M103 121c-3-29 20-46 40-40 6 25-10 45-40 40Z"/></g>
        <g fill="none" stroke="#b4c390" stroke-width="2.5"><path d="m32 46 33 48M45 63l-13 2m20 8-3-18m11 30-23-4M79 17l3 54m-2-32-12-9m13 21 13-14m-12 27-15-14m58-13-27 58m18-39 12 1m-18 13-4-21m-3 34 19-9m18 10-29 31m19-21 7 9m-16 0-1-14"/></g>
        <path fill="#c8bdac" d="m53 116 6 46q22 10 44 0l7-46Z"/><ellipse fill="#726e55" cx="81" cy="117" rx="28" ry="6"/><path fill="#ded3bf" d="M49 114h64v14H49z"/><path fill="none" stroke="#a49987" stroke-width="2" d="M65 135v24m11-24v27m11-27v27m11-27v24"/>
      </symbol>
    </defs>
  </svg>

  <div class="page-shell" id="top">
    <header class="site-header">
      <a class="brand" href="#top" aria-label="Moss home"><svg class="brand-mark" viewBox="0 0 40 40" aria-hidden="true"><path d="M20 33V17M20 25C3 26 3 10 6 7c12 1 17 9 14 18Zm1-9C22 4 30 3 35 5c1 10-5 17-14 17"/></svg>moss<span class="brand-period">.</span></a>
      <nav aria-label="Main navigation"><a class="nav-link active" href="#care-queue">Today</a><a class="nav-link" href="#your-plants">Your plants <span>4</span></a></nav>
      <div class="header-note">A little care. A little growth.</div>
    </header>

    <main>
      <section class="hero" aria-labelledby="greeting">
        <div class="hero-copy">
          <p class="eyebrow"><span class="tiny-sun" aria-hidden="true">✳</span> YOUR DAILY PAUSE <span class="eyebrow-rule"></span> <time id="today-date"></time></p>
          <h1 id="greeting">Small rituals.<br><em>Happy roots.</em></h1>
          <p class="hero-description">A sip here, a little sunlight there.<br>Let’s make a little room for growing.</p>
          <a class="daily-pill" href="#care-queue"><span class="pill-dot" aria-hidden="true"></span><span id="daily-summary">Your little jungle is waiting</span><svg class="icon" aria-hidden="true"><use href="#icon-arrow"/></svg></a>
        </div>
        <div class="hero-art" aria-hidden="true">
          <svg viewBox="0 0 520 320" class="garden-illustration">
            <path fill="#e7c66d" d="M72 263V156C72 61 151 21 245 30s181 46 179 142v91Z"/>
            <path fill="none" stroke="#c6a655" stroke-width="1" stroke-dasharray="2 8" d="M97 239V159c0-74 59-112 144-104s159 38 158 116v68"/>
            <path fill="#dbb965" d="M34 263q225-23 451 0l-9 9H44Z"/>
            <use href="#plant-pothos" x="311" y="91" width="171" height="192"/>
            <use href="#plant-fern" x="59" y="56" width="207" height="232"/>
            <use href="#plant-calathea" x="186" y="78" width="184" height="208"/>
            <use href="#plant-cactus" x="282" y="170" width="111" height="125"/>
            <g fill="none" stroke="#42603c" stroke-width="2" stroke-linecap="round"><path d="m431 64 5-10m9 20 11-2m-23 15 7 9M38 184l-8-4m11-5-4-7"/><path d="M475 163q-20 12-24 37m-1-10 1 12 12-4"/></g>
            <g transform="translate(374 36) rotate(12)"><path fill="#f7f4e9" stroke="#536341" stroke-width="1.5" d="m0 0 9 3 8-5 5 8 9 1 1 9 7 5-4 8 2 9-9 4-4 8-9-2-8 4-6-7-9-1-1-9-6-6 5-8-1-9Z"/><path fill="none" stroke="#536341" stroke-width="1.5" d="m5 22 6 6 12-14"/></g>
          </svg>
          <span class="garden-caption">quite a nice little jungle you’ve got.</span>
        </div>
      </section>

      <div class="dashboard-grid">
        <section class="care-section" id="care-queue" aria-labelledby="care-heading" tabindex="-1">
          <div class="section-heading"><div><p class="eyebrow">ONE LEAF AT A TIME</p><h2 id="care-heading">A little love, today.</h2></div><span class="count-badge" id="queue-count" aria-label="Care tasks remaining">3</span></div>
          <p class="queue-intro" id="queue-intro">Start with the one that’s waited a little longer.</p>
          <div id="today-queue"></div>
          <div id="all-done" class="all-done" hidden>
            <span class="done-seal"><svg class="icon" aria-hidden="true"><use href="#icon-check"/></svg></span>
            <p class="eyebrow">ROOM TO JUST BE</p><h3>All tended to.</h3>
            <p id="done-description">Your plants are in a good place. So is your to-do list.</p>
            <a class="text-link" href="#your-plants">Spend a moment with your plants <span aria-hidden="true">↗</span></a>
          </div>
          <section class="upcoming-section" id="upcoming-section" aria-labelledby="upcoming-heading"><div class="mini-heading"><h3 id="upcoming-heading">On the horizon</h3><span>No rush.</span></div><div id="upcoming-queue"></div></section>
          <details class="completed-section" id="completed-section" hidden><summary id="completed-summary">Tended to today</summary><div id="completed-list"></div></details>
        </section>

        <aside class="side-column" aria-label="Your growing rhythm">
          <section class="rhythm-panel" aria-labelledby="rhythm-heading">
            <div class="rhythm-top"><p class="eyebrow">THE BIGGER PICTURE</p><svg class="icon" aria-hidden="true"><use href="#icon-sun"/></svg></div>
            <h2 id="rhythm-heading">A little, often.</h2><p>That’s how good things grow.</p>
            <div class="week-chart" id="week-chart" role="img" aria-label="Weekly care rhythm"></div>
            <div class="rhythm-footer"><span><span class="legend-dot" aria-hidden="true"></span>Care moments this week</span><strong id="week-total">16</strong></div>
          </section>
          <section class="field-note" aria-labelledby="note-heading"><div class="note-pin" aria-hidden="true"></div><p class="eyebrow">A NOTE TO GROW BY</p><h2 id="note-heading">Presence over<br>perfection.</h2><p>Take a closer look. A new leaf, a leaning stem, a tiny change — getting to know your plants is care, too.</p><span class="note-signature">You’re growing together.</span><svg class="note-leaf icon" aria-hidden="true"><use href="#icon-leaf"/></svg></section>
        </aside>
      </div>

      <section class="collection-section" id="your-plants" aria-labelledby="collection-heading" tabindex="-1"><div class="section-heading"><div><p class="eyebrow">GOOD COMPANY</p><h2 id="collection-heading">Your little jungle.</h2></div><span class="collection-count">4 plants, right at home</span></div><div class="collection-grid" id="plant-collection"></div></section>
    </main>
    <footer class="site-footer"><a class="footer-brand" href="#top">moss.</a><span>Grow at your own pace.</span><span id="storage-status">Just you, your plants, and this device.</span></footer>
  </div>

  <dialog id="plant-dialog" aria-labelledby="detail-name"><div id="plant-detail"></div></dialog>
  <div class="toast-stack" id="toast-stack" aria-label="Recent actions"></div>
  <div class="sr-only" id="announcer" role="status" aria-live="polite" aria-atomic="true"></div>
  <noscript><div class="noscript-note">Moss needs JavaScript to show your four plants and save care actions. Please enable it and reopen this page.</div></noscript>
</body>
</html>

gpt-6-astra/13-frontend-playful/PLANTS.json

{
  "plants": [
    {"id":"fern","name":"Frida","species":"Boston fern","location":"Bathroom","task":"Water","due":"2 days overdue","urgency":4,"light":"Low, indirect","history":["Sep 19 · Misted","Sep 16 · Watered","Sep 12 · New frond"]},
    {"id":"pothos","name":"Orbit","species":"Golden pothos","location":"Bookshelf","task":"Rotate","due":"Today","urgency":2,"light":"Medium, indirect","history":["Sep 20 · Watered","Sep 14 · Rotated","Sep 10 · Wiped leaves"]},
    {"id":"cactus","name":"Dot","species":"Bunny ears cactus","location":"South window","task":"Check soil","due":"Today","urgency":1,"light":"Bright, direct","history":["Sep 08 · Watered","Sep 01 · New pad noted","Aug 22 · Rotated"]},
    {"id":"calathea","name":"Drama","species":"Calathea orbifolia","location":"Bedroom","task":"Mist","due":"Tomorrow","urgency":0,"light":"Medium, filtered","history":["Sep 21 · Misted","Sep 18 · Watered","Sep 15 · Brown edge noted"]}
  ],
  "week": [1,3,2,4,2,1,3]
}

gpt-6-astra/13-frontend-playful/styles.css

:root {
  --paper: #f7f4e9;
  --paper-deep: #eeeadc;
  --white: #fffdf6;
  --ink: #293e2c;
  --muted: #58634f;
  --line: #d7dac9;
  --green: #36543b;
  --green-dark: #253e2b;
  --sage: #e3e9d7;
  --sage-dark: #c7d4b6;
  --yellow: #e7c66d;
  --rust: #99462f;
  --peach: #f1e1d5;
  --overlay: #1b3028a6;
  --shadow: #293e2c12;
  --line-on-green: #ffffff30;
  --display: Georgia, 'Times New Roman', serif;
  --body: 'Avenir Next', Avenir, 'Trebuchet MS', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body:has(dialog[open]) { overflow: hidden; }
button, input, textarea { font: inherit; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { color: inherit; cursor: pointer; }
a { color: inherit; text-underline-offset: 5px; }
button:disabled { cursor: default; }
button, input, textarea { border-radius: 0; }
button, a, summary, input, textarea { outline-offset: 5px; }
:focus-visible { outline: 3px solid var(--rust); }
section[tabindex="-1"]:focus { outline: none; }
section[tabindex="-1"]:focus-visible { outline: 3px solid var(--rust); outline-offset: 8px; }
[hidden] { display: none !important; }
::selection { background: var(--yellow); color: var(--ink); }
h1, h2, h3, p { margin: 0; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 16px; padding: 12px 20px; background: var(--ink); color: var(--white); z-index: 20; }
.skip-link:focus { top: 12px; }
.page-shell { max-width: 1232px; padding: 0 48px; margin: auto; }
.site-header { min-height: 106px; display: flex; align-items: center; gap: 60px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; font-family: var(--display); font-size: 42px; font-weight: 700; letter-spacing: -2.8px; text-decoration: none; }
.brand-mark { width: 34px; height: 38px; fill: none; stroke: var(--green); stroke-width: 2.2; margin-right: 10px; }
.brand-period { color: var(--rust); }
nav { display: flex; align-items: center; gap: 30px; }
.nav-link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; gap: 8px; font-size: 14px; font-weight: 600; }
.nav-link.active { position: relative; }
.nav-link.active::after { position: absolute; content: ''; width: 20px; height: 3px; background: var(--green); border-radius: 50%; bottom: 1px; left: calc(50% - 10px); }
.nav-link span { font-size: 11px; border: 1px solid var(--line); border-radius: 50%; width: 21px; height: 21px; display: grid; place-items: center; }
.header-note { margin-left: auto; color: var(--muted); font-size: 12px; }
.hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 16px; padding: 48px 0 52px; }
.eyebrow { font-size: 10px; letter-spacing: 1.7px; font-weight: 700; line-height: 1.5; }
.hero-copy > .eyebrow { display: flex; align-items: center; gap: 10px; letter-spacing: 1.3px; }
.tiny-sun { font-size: 22px; line-height: 1; color: var(--rust); }
.eyebrow-rule { width: 23px; height: 1px; background: var(--line); }
.hero time { color: var(--muted); letter-spacing: .6px; text-transform: uppercase; }
h1 { font-family: var(--display); font-size: clamp(48px, 5.3vw, 69px); font-weight: 400; line-height: 1.04; letter-spacing: -3px; margin: 21px 0 18px; }
h1 em { font-weight: 400; color: var(--green); }
.hero-description { color: var(--muted); font-size: 15px; line-height: 1.75; }
.daily-pill { margin-top: 24px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 30px; padding: 9px 14px; min-height: 44px; text-decoration: none; font-size: 12px; font-weight: 600; background: var(--white); }
.daily-pill .icon { width: 17px; height: 17px; margin-left: 7px; }
.pill-dot { height: 7px; width: 7px; background: var(--rust); border-radius: 50%; }
.daily-pill.is-done .pill-dot { background: var(--green); }
.hero-art { position: relative; padding-top: 15px; transform: rotate(-1deg); }
.garden-illustration { width: 100%; display: block; overflow: visible; }
.garden-caption { display: block; text-align: center; font-family: var(--display); font-size: 14px; font-style: italic; transform: rotate(-3deg); padding-left: 34px; margin-top: -3px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 56px; align-items: start; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.section-heading .eyebrow { color: var(--muted); margin-bottom: 7px; }
h2 { font-family: var(--display); font-size: 31px; font-weight: 400; line-height: 1.15; letter-spacing: -.8px; }
.count-badge { display: grid; place-items: center; background: var(--sage); border-radius: 45% 55% 48% 52%; font-family: var(--display); font-size: 25px; width: 44px; height: 44px; transform: rotate(8deg); }
.queue-intro { color: var(--muted); font-size: 12px; margin: 12px 0 21px; }
.plant-row { position: relative; display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: 0 13px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.plant-row.overdue { margin-bottom: 2px; padding: 19px 17px 19px 6px; background: var(--peach); border: 1px solid transparent; border-radius: 8px 24px 8px 8px; }
.plant-art-button { width: 94px; height: 115px; grid-row: 1 / 3; padding: 0; border: 0; background: transparent; align-self: center; border-radius: 50%; }
.plant-art { display: block; width: 100%; height: 100%; }
.row-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.plant-name-button { border: 0; background: transparent; padding: 0 2px 1px 0; min-height: 35px; font-family: var(--display); font-size: 25px; line-height: 1.2; text-align: left; letter-spacing: -.5px; }
.plant-name-button:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.due-label { color: var(--muted); font-size: 11px; flex-shrink: 0; }
.overdue .due-label { font-size: 10px; font-weight: 700; color: var(--rust); background: var(--white); border-radius: 20px; padding: 4px 8px; }
.plant-meta { font-size: 11px; color: var(--muted); margin: 0 0 7px; }
.task-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; }
.task-label .icon { width: 15px; height: 15px; }
.row-actions { margin-top: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.primary-button, .secondary-button { border: 1px solid var(--green); background: var(--green); color: var(--white); border-radius: 8px; min-height: 42px; padding: 8px 14px; display: inline-flex; justify-content: center; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; transition: background .15s ease, transform .15s ease; }
.primary-button .icon, .secondary-button .icon { width: 16px; height: 16px; }
.primary-button:hover { background: var(--green-dark); }
.primary-button:active, .secondary-button:active { transform: translateY(1px); }
.secondary-button { border-color: var(--line); background: transparent; color: var(--ink); }
.secondary-button:hover { background: var(--sage); }
.snooze-button { min-height: 42px; padding: 8px 10px; display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 0; color: var(--muted); font-size: 12px; border-radius: 8px; }
.snooze-button .icon { width: 16px; height: 16px; }
.snooze-button:hover { color: var(--ink); background: var(--paper); }
.upcoming-section { margin-top: 25px; }
.mini-heading { display: flex; align-items: center; justify-content: space-between; }
.mini-heading h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 700; }
.mini-heading > span { color: var(--muted); font-family: var(--display); font-style: italic; font-size: 13px; }
.plant-row.upcoming { grid-template-columns: 72px minmax(0, 1fr) 40px; align-items: center; gap: 11px; padding: 15px 0; }
.upcoming .plant-art-button { width: 72px; height: 80px; grid-row: auto; }
.upcoming .plant-name-button { font-size: 22px; }
.upcoming .plant-meta { margin-bottom: 3px; }
.upcoming .due-label { color: var(--ink); }
.icon-button { width: 44px; height: 44px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: transparent; flex-shrink: 0; }
.icon-button:hover { background: var(--sage); }
.side-column { display: grid; gap: 27px; padding-top: 2px; }
.rhythm-panel { background: var(--green); color: var(--paper); border-radius: 9px 50px 9px 9px; padding: 25px 24px 20px; }
.rhythm-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.rhythm-top .eyebrow { color: var(--sage-dark); font-size: 9px; }
.rhythm-top .icon { width: 26px; height: 26px; color: var(--yellow); }
.rhythm-panel h2 { font-size: 32px; }
.rhythm-panel > p { color: var(--sage-dark); font-size: 12px; margin: 8px 0 22px; }
.week-chart { height: 118px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: end; }
.day-column { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; gap: 7px; }
.day-bar { width: 20px; max-width: 100%; border-radius: 12px 12px 3px 3px; background: var(--sage-dark); position: relative; }
.day-column.is-today .day-bar { background: var(--yellow); border-radius: 12px 12px 7px 7px; }
.day-count { font-size: 10px; color: var(--paper); }
.day-label { font-size: 10px; color: var(--sage-dark); }
.day-column.is-today .day-label { color: var(--yellow); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.rhythm-footer { border-top: 1px solid var(--line-on-green); display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 15px; font-size: 10px; }
.rhythm-footer > span { display: flex; align-items: center; gap: 6px; }
.rhythm-footer strong { font-family: var(--display); font-size: 21px; font-weight: 400; }
.legend-dot { width: 6px; height: 6px; background: var(--sage-dark); border-radius: 50%; }
.field-note { position: relative; margin: 0 7px; padding: 29px 24px 31px; background: var(--paper-deep); border-radius: 2px 2px 36px 2px; transform: rotate(-2deg); }
.note-pin { position: absolute; width: 40px; height: 15px; left: calc(50% - 20px); top: -7px; background: var(--sage-dark); opacity: .85; transform: rotate(6deg); }
.field-note .eyebrow { font-size: 9px; color: var(--muted); margin-bottom: 15px; }
.field-note h2 { font-size: 28px; font-style: italic; }
.field-note > p:not(.eyebrow) { font-size: 12px; line-height: 1.8; color: var(--muted); margin-top: 15px; max-width: 210px; }
.note-signature { display: inline-block; font-family: var(--display); font-size: 12px; font-style: italic; margin-top: 22px; }
.note-leaf { position: absolute; bottom: 21px; right: 20px; width: 27px; height: 27px; transform: rotate(14deg); }
.collection-section { margin-top: 56px; border-top: 1px solid var(--line); padding-top: 30px; }
.collection-count { color: var(--muted); font-size: 12px; }
.collection-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 24px; }
.collection-plant { position: relative; display: grid; grid-template-columns: 72px 1fr; align-items: center; padding: 10px 8px 10px 0; text-align: left; background: transparent; border: 0; border-radius: 14px; gap: 9px; }
.collection-plant:hover { background: var(--sage); }
.collection-plant .plant-art { width: 72px; height: 90px; }
.collection-name { font-family: var(--display); font-size: 21px; display: block; line-height: 1.2; }
.collection-location { font-size: 10px; color: var(--muted); display: block; margin-top: 7px; }
.collection-status { font-size: 9px; display: block; margin-top: 4px; color: var(--muted); }
.site-footer { margin-top: 34px; min-height: 84px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 11px; }
.footer-brand { font-size: 22px; letter-spacing: -1px; font-family: var(--display); font-weight: 700; text-decoration: none; color: var(--ink); }
#storage-status { margin-left: auto; text-align: right; font-size: 10px; }
.all-done { text-align: center; background: var(--sage); padding: 35px 24px; border-radius: 10px 45px 10px 10px; }
.done-seal { width: 54px; height: 54px; background: var(--green); color: var(--paper); display: grid; place-items: center; border-radius: 48% 52% 38% 62%; margin: 0 auto 19px; transform: rotate(-10deg); }
.done-seal .icon { width: 29px; height: 29px; }
.all-done .eyebrow { color: var(--muted); font-size: 9px; }
.all-done h3 { font-family: var(--display); font-size: 35px; font-weight: 400; margin: 8px 0; }
.all-done > p:not(.eyebrow) { max-width: 310px; margin: auto; font-size: 13px; color: var(--muted); }
.text-link { display: inline-block; padding: 12px 0; font-size: 12px; font-weight: 600; }
.all-done .text-link { margin-top: 9px; }
.completed-section { margin-top: 24px; }
.completed-section summary { padding: 10px 0; cursor: pointer; font-size: 12px; font-weight: 600; min-height: 44px; }
.completed-row { padding: 10px 0; display: flex; align-items: center; gap: 12px; font-size: 12px; }
.completed-row > .icon { color: var(--green); width: 17px; }
.completed-row button { border: 0; background: transparent; padding: 7px 0; min-height: 44px; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.completed-row > span { margin-left: auto; color: var(--muted); font-size: 11px; }
dialog { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 22px 22px 10px 10px; color: var(--ink); background: var(--paper); box-shadow: 0 20px 80px var(--overlay); overscroll-behavior: contain; }
dialog::backdrop { background: var(--overlay); }
dialog[open] { animation: arrive .2s ease-out; }
.detail-top { position: relative; background: var(--sage); padding: 25px 28px 0; }
.detail-top > .eyebrow { padding-right: 50px; color: var(--muted); }
.close-detail { position: absolute; top: 15px; right: 17px; background: var(--paper); border: 0; }
.detail-identity { display: flex; align-items: center; gap: 15px; margin-top: 14px; }
.detail-identity > .plant-art { width: 132px; height: 148px; flex-shrink: 0; }
.detail-identity h2 { font-size: 43px; }
.detail-identity p { font-size: 12px; margin-top: 5px; color: var(--muted); }
.detail-body { padding: 24px 28px 28px; }
.detail-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.detail-facts h3 { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.detail-facts .icon { width: 15px; height: 15px; }
.detail-facts p { font-size: 13px; }
.detail-facts .fact-note { color: var(--muted); font-size: 11px; margin-top: 5px; }
.detail-task { margin-top: 21px; }
.detail-task > p { font-size: 12px; color: var(--muted); }
.detail-task > p strong { color: var(--ink); font-weight: 600; }
.detail-task .row-actions { margin-top: 12px; }
.extra-water { margin-top: 12px; }
.extra-water:disabled { opacity: .7; }
.history-section { margin-top: 27px; }
.history-section h3, .observation-form label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.1px; font-weight: 700; }
.history-list { list-style: none; padding: 0; margin: 15px 0 0; }
.history-list li { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 12px; font-size: 12px; padding: 0 0 16px 16px; overflow-wrap: anywhere; }
.history-list li::before { content: ''; position: absolute; width: 5px; height: 5px; background: var(--sage-dark); border: 1px solid var(--green); border-radius: 50%; top: 6px; left: 0; }
.history-list li:not(:last-child)::after { content: ''; position: absolute; top: 14px; bottom: 2px; left: 3px; border-left: 1px solid var(--line); }
.history-date { color: var(--muted); font-size: 11px; }
.history-kind { display: block; font-size: 9px; color: var(--muted); margin-top: 3px; }
.observation-form { margin-top: 10px; }
.observation-form label { display: block; margin-bottom: 8px; }
.observation-form textarea { width: 100%; min-height: 85px; resize: vertical; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 7px; padding: 11px 12px; font-size: 16px; line-height: 1.5; }
.observation-form textarea::placeholder { color: var(--muted); font-size: 12px; }
.observation-form .form-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 9px; }
.form-hint { font-size: 10px; color: var(--muted); }
.toast-stack { position: fixed; z-index: 10; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 28px)); display: flex; flex-direction: column; gap: 8px; }
.toast { display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 18px; background: var(--ink); color: var(--paper); border-radius: 11px; box-shadow: 0 5px 24px var(--shadow); font-size: 12px; animation: arrive .2s ease-out; }
.toast > span { flex: 1; }
.toast-undo { min-height: 44px; padding: 8px 12px; border: 1px solid var(--sage-dark); background: transparent; color: var(--paper); border-radius: 6px; font-weight: 600; font-size: 12px; }
.toast button:focus-visible, .rhythm-panel :focus-visible { outline-color: var(--yellow); }
.toast-undo:hover { background: var(--green); }
dialog .toast-stack { position: sticky; bottom: 0; transform: none; left: auto; width: auto; padding: 0 16px 16px; margin-top: -4px; }
dialog .toast { box-shadow: none; }
.noscript-note { position: fixed; bottom: 20px; left: 5%; width: 90%; padding: 20px; background: var(--yellow); color: var(--ink); }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1280px) { .hero { padding-top: 55px; padding-bottom: 62px; } .hero-art { margin-left: -16px; margin-right: -12px; } }
@media (max-width: 1000px) { .page-shell { padding: 0 32px; } .site-header { gap: 40px; } .header-note { display: none; } nav { margin-left: auto; } .dashboard-grid { grid-template-columns: minmax(0, 1fr) 270px; gap: 30px; } .rhythm-panel { padding-left: 20px; padding-right: 20px; } .collection-grid { gap: 8px; } .collection-plant { grid-template-columns: 56px 1fr; gap: 5px; } .collection-plant .plant-art { width: 56px; height: 80px; } .collection-name { font-size: 20px; } .row-heading { flex-wrap: wrap; gap: 2px 7px; } }
@media (max-width: 760px) { .page-shell { padding: 0 24px; } .site-header { min-height: 88px; } .brand { font-size: 37px; } .brand-mark { width: 30px; margin-right: 7px; } nav { gap: 23px; } .hero { padding: 34px 0 38px; gap: 0; grid-template-columns: 1.2fr 1fr; } h1 { font-size: 50px; } .hero-copy > .eyebrow { font-size: 8px; gap: 7px; letter-spacing: 1px; flex-wrap: wrap; } .hero-copy .tiny-sun { font-size: 18px; } .eyebrow-rule { width: 12px; } .hero-description { font-size: 13px; } .hero-art { margin-left: -10px; margin-right: -6px; } .garden-caption { font-size: 11px; padding-left: 15px; } .daily-pill { font-size: 11px; padding: 8px 12px; gap: 7px; } .dashboard-grid { grid-template-columns: 1fr; gap: 34px; } .side-column { grid-template-columns: 1fr 1fr; gap: 23px; } .field-note { margin: 5px 0; } .collection-section { margin-top: 40px; } .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; } .collection-plant { grid-template-columns: 76px 1fr; gap: 12px; } .collection-plant .plant-art { width: 76px; height: 90px; } .row-heading { flex-wrap: nowrap; } .plant-row { grid-template-columns: 104px minmax(0, 1fr); } .plant-art-button { width: 104px; height: 118px; } }
@media (max-width: 520px) { .page-shell { padding: 0 21px; } .site-header { min-height: 83px; gap: 15px; } .brand { font-size: 35px; } .brand-mark { width: 27px; margin-right: 6px; } nav { gap: 18px; } .nav-link { font-size: 12px; gap: 5px; } .nav-link span { width: 18px; height: 18px; font-size: 10px; } .hero { display: flex; flex-direction: column; align-items: stretch; padding: 30px 0 31px; } .hero-copy > .eyebrow { font-size: 9px; gap: 8px; } .eyebrow-rule { width: 20px; } h1 { font-size: clamp(47px, 12.5vw, 62px); line-height: 1.03; letter-spacing: -2.3px; margin: 19px 0 15px; } .hero-description { font-size: 14px; line-height: 1.7; } .daily-pill { margin-top: 20px; font-size: 11px; } .hero-art { width: 82%; align-self: flex-end; margin: -5px 0 0; padding-top: 0; } .garden-illustration { margin-top: -5px; } .garden-caption { font-size: 12px; margin-top: -8px; } .section-heading .eyebrow { font-size: 9px; } h2 { font-size: 29px; } .count-badge { width: 39px; height: 39px; font-size: 22px; } .queue-intro { margin-top: 10px; margin-bottom: 17px; font-size: 11px; } .plant-row { grid-template-columns: 79px minmax(0, 1fr); gap: 0 8px; padding-top: 18px; padding-bottom: 18px; } .plant-row.overdue { padding: 15px 11px 16px 2px; } .plant-art-button { width: 79px; height: 99px; align-self: start; margin-top: 11px; } .plant-name-button { font-size: 23px; } .overdue .due-label { font-size: 9px; padding: 3px 7px; } .plant-meta { font-size: 10px; } .due-label { font-size: 10px; } .task-label { font-size: 11px; } .row-actions { gap: 5px; margin-top: 11px; } .primary-button, .secondary-button { min-height: 44px; padding: 8px 11px; font-size: 11px; } .snooze-button { min-height: 44px; font-size: 11px; padding: 8px; } .row-heading { gap: 5px; } .side-column { grid-template-columns: 1fr; gap: 26px; } .rhythm-panel { padding: 24px 25px 19px; } .rhythm-top { margin-bottom: 15px; } .rhythm-panel h2 { font-size: 32px; } .rhythm-panel > p { margin-bottom: 15px; } .week-chart { height: 111px; gap: 15px; } .day-bar { width: 24px; } .field-note { padding: 28px; margin: 0 7px; } .field-note h2 { font-size: 28px; } .field-note h2 br { display: none; } .field-note > p:not(.eyebrow) { max-width: none; margin-top: 12px; } .note-signature { margin-top: 14px; } .collection-count { max-width: 90px; text-align: right; font-size: 10px; } .collection-section h2 { font-size: 28px; } .collection-grid { gap: 5px 10px; margin-top: 16px; } .collection-plant { grid-template-columns: 57px 1fr; gap: 5px; } .collection-plant .plant-art { width: 57px; height: 86px; } .collection-name { font-size: 20px; } .collection-location { font-size: 9px; } .collection-status { font-size: 8px; } .site-footer { padding: 20px 0; flex-wrap: wrap; gap: 5px 15px; margin-top: 26px; } #storage-status { flex-basis: 100%; text-align: left; margin-left: 0; margin-top: 6px; } dialog { width: 100%; max-width: 100%; max-height: calc(100dvh - 22px); margin: auto 0 0; border-radius: 24px 24px 0 0; } .detail-top { padding: 25px 23px 0; } .detail-body { padding: 23px; } .detail-identity > .plant-art { width: 115px; height: 138px; } .detail-identity h2 { font-size: 39px; } .detail-facts { gap: 14px; } .detail-facts p { font-size: 12px; } }
@media (max-width: 520px) {
  .hero { position: relative; }
  .hero-description { max-width: 60%; font-size: 13px; }
  .hero-description br { display: none; }
  .hero-art { position: absolute; right: -7px; bottom: 92px; width: 45%; margin: 0; }
  .garden-caption { display: none; }
  .hero-copy .daily-pill { margin-top: 24px; }
  .plant-meta { font-size: 11px; }
  .collection-location { font-size: 10px; }
  .collection-status { font-size: 10px; }
}
@media (max-width: 360px) { .page-shell { padding: 0 16px; } .brand { font-size: 31px; } .brand-mark { width: 24px; } nav { gap: 13px; } .nav-link { font-size: 11px; } .hero-copy > .eyebrow { font-size: 8px; letter-spacing: .8px; } .row-heading { flex-wrap: wrap; gap: 0 7px; } .row-actions { gap: 2px; } .primary-button { padding: 8px 9px; } .snooze-button { padding: 8px 5px; } .plant-row { grid-template-columns: 68px minmax(0, 1fr); } .plant-art-button { width: 68px; height: 93px; } .plant-meta { margin-top: 3px; } .detail-facts { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (forced-colors: active) { .day-bar, .pill-dot, .legend-dot { background: CanvasText; } .count-badge, .all-done, .rhythm-panel, .plant-row.overdue { border: 1px solid CanvasText; } .toast { border: 1px solid CanvasText; } }

gpt-6-astra/13-frontend-playful/verify.cjs

Binary file, not shown.

gpt-6-luna/13-frontend-playful/RESPONSE.md

gpt-6-luna/13-frontend-playful/TASK.md

gpt-6-luna/13-frontend-playful/app.js

const plants = [
  { id: "fern", name: "Frida", species: "Boston fern", location: "Bathroom", task: "Water", due: "2 days overdue", urgency: 4, light: "Low, indirect", history: ["Sep 19 · Misted", "Sep 16 · Watered", "Sep 12 · New frond"] },
  { id: "pothos", name: "Orbit", species: "Golden pothos", location: "Bookshelf", task: "Rotate", due: "Today", urgency: 2, light: "Medium, indirect", history: ["Sep 20 · Watered", "Sep 14 · Rotated", "Sep 10 · Wiped leaves"] },
  { id: "cactus", name: "Dot", species: "Bunny ears cactus", location: "South window", task: "Check soil", due: "Today", urgency: 1, light: "Bright, direct", history: ["Sep 08 · Watered", "Sep 01 · New pad noted", "Aug 22 · Rotated"] },
  { id: "calathea", name: "Drama", species: "Calathea orbifolia", location: "Bedroom", task: "Mist", due: "Tomorrow", urgency: 0, light: "Medium, filtered", history: ["Sep 21 · Misted", "Sep 18 · Watered", "Sep 15 · Brown edge noted"] }
];

const week = [1, 3, 2, 4, 2, 1, 3];
const days = ["M", "T", "W", "T", "F", "S", "S"];
const state = Object.fromEntries(plants.map((plant) => [plant.id, { status: "active", due: plant.due }]));

const queueList = document.querySelector("#queue-list");
const snoozedList = document.querySelector("#snoozed-list");
const doneList = document.querySelector("#done-list");
const snoozedSection = document.querySelector("#snoozed-section");
const doneSection = document.querySelector("#done-section");
const allDone = document.querySelector("#all-done");
const queueIntro = document.querySelector("#queue-intro");
const queueCount = document.querySelector("#queue-count");
const queueCounter = document.querySelector("#queue-counter");
const toast = document.querySelector("#toast");
const toastMessage = document.querySelector("#toast-message");
const undoButton = document.querySelector("#undo-action");
const dismissButton = document.querySelector("#dismiss-toast");
let undoSnapshot = null;
let toastTimer = null;

function escapeHTML(value) {
  return String(value).replace(/[&<>"']/g, (character) => ({
    "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;"
  })[character]);
}

function plantIllustration(id) {
  const start = '<svg viewBox="0 0 48 48" focusable="false" aria-hidden="true">';
  const finish = '<path class="pot-fill" d="M12 32h24l-2.5 11h-19z"/><path class="pot-line" d="M10 31h28"/></svg>';
  const drawings = {
    fern: '<path d="M24 31V8m0 17C17 16 13 14 9 15c1 7 6 11 15 13m0-10c6-8 11-10 15-9-1 7-6 11-15 13m0 13c-7-7-12-8-17-6 2 6 7 9 17 9m0-9c7-7 12-8 17-6-2 6-7 9-17 9"/><path d="M14 17l8 9m13-12-10 9m-9 5 8 7m12-7-10 7"/>',
    pothos: '<path d="M24 32V11m0 17c-4-7-10-10-16-7 1 9 7 13 16 13m0-13c3-8 9-12 16-9 0 9-5 14-16 15m-1-14c-3-5-2-9 1-12 4 4 4 8 1 12"/>',
    cactus: '<path d="M24 31V10c0-4 6-4 6 0v6m-6 0c0-4-6-4-6 0v7m8-8c4-1 6 1 6 5v7m-12-6c-4-1-6 1-6 5v4"/><path d="M22 14h.1m6 7h.1m-8 4h.1m8-10h.1m4 10h.1" stroke-width="2.5"/>',
    calathea: '<path d="M24 32V9m0 19c-4-9-10-12-16-10 1 9 6 13 16 15m0-13c3-9 10-12 16-9-1 9-6 14-16 16m-1-17c-2-6 0-9 3-11 3 5 2 9-2 12m-7 7 7 6m9-10-9 8"/>'
  };
  return `${start}${drawings[id]}${finish}`;
}

function dueLabel(plant) {
  const plantState = state[plant.id];
  if (plantState.status === "snoozed") return "Later today";
  if (plantState.status === "done") return "Tended";
  return plantState.due;
}

function renderCard(plant, quiet = false) {
  const plantState = state[plant.id];
  const overdue = plantState.status === "active" && plant.due.includes("overdue");
  const due = dueLabel(plant);
  const mainAction = plant.task === "Water" ? "Watered" : "Done for today";
  const actionLabel = plant.task === "Water" ? `Mark ${plant.name} as watered` : `Mark ${plant.name}’s ${plant.task.toLowerCase()} task done`;
  const history = plant.history.map((entry) => `<li>${escapeHTML(entry)}</li>`).join("");
  const quietStatus = plantState.status === "snoozed" ? "Later today · snoozed" : "Done for today";
  return `
    <article class="plant-card${overdue ? " is-overdue" : ""}" style="--portrait-bg:${plant.id === "cactus" ? "#f0e3c7" : plant.id === "calathea" ? "#e6e8dc" : plant.id === "pothos" ? "#e4e9ce" : "#e4ead7"};--portrait-ink:${plant.id === "cactus" ? "#a2764a" : plant.id === "calathea" ? "#687f60" : plant.id === "pothos" ? "#68824d" : "#688554"}">
      <div class="plant-main">
        <span class="plant-portrait">${plantIllustration(plant.id)}</span>
        <div class="plant-copy">
          <div class="card-topline"><span class="due-chip">${overdue ? '<span class="due-dot" aria-hidden="true"></span>' : ""}${escapeHTML(due)}</span></div>
          <div class="plant-title-line"><h3 class="plant-name">${escapeHTML(plant.name)}</h3><span class="plant-species">${escapeHTML(plant.species)}</span></div>
          <p class="plant-task">${escapeHTML(plant.task)} <strong>· ${plant.task === "Water" ? "Give her a drink" : plant.task === "Rotate" ? "Turn toward the light" : plant.task === "Check soil" ? "A fingertip check" : "A soft mist"}</strong></p>
          <p class="plant-location">${escapeHTML(plant.location)}</p>
        </div>
      </div>
      ${quiet ? `<span class="quiet-status">${escapeHTML(quietStatus)}</span>` : `
        <div class="plant-actions" aria-label="Actions for ${escapeHTML(plant.name)}">
          <button class="action-button complete-button" type="button" data-action="complete" data-plant="${plant.id}" aria-label="${escapeHTML(actionLabel)}"><span class="action-icon" aria-hidden="true">${plant.task === "Water" ? "↗" : "✓"}</span>${mainAction}</button>
          <button class="action-button snooze-button" type="button" data-action="snooze" data-plant="${plant.id}" aria-label="Snooze ${escapeHTML(plant.name)} until later today" title="Snooze until later today"><span aria-hidden="true">◷</span><span class="snooze-label">Snooze</span></button>
        </div>
        <details class="plant-detail">
          <summary>Plant notes &amp; recent history</summary>
          <div class="detail-content">
            <div><span class="detail-label">Light likes</span><span class="light-value"><span class="light-symbol" aria-hidden="true">☼</span>${escapeHTML(plant.light)}</span></div>
            <div><span class="detail-label">Recent moments</span><ul class="history-list">${history}</ul></div>
          </div>
        </details>
      `}
    </article>`;
}

function render() {
  const active = plants.filter((plant) => state[plant.id].status === "active").sort((a, b) => b.urgency - a.urgency);
  const snoozed = plants.filter((plant) => state[plant.id].status === "snoozed");
  const done = plants.filter((plant) => state[plant.id].status === "done");
  queueList.innerHTML = active.map((plant) => renderCard(plant)).join("");
  snoozedList.innerHTML = snoozed.map((plant) => renderCard(plant, true)).join("");
  doneList.innerHTML = done.map((plant) => renderCard(plant, true)).join("");
  snoozedSection.hidden = snoozed.length === 0;
  doneSection.hidden = done.length === 0;
  allDone.hidden = active.length > 0 || snoozed.length > 0;
  queueList.hidden = active.length === 0;
  queueIntro.hidden = active.length === 0;
  queueIntro.textContent = active.some((plant) => plant.due.includes("overdue"))
    ? "First, one plant could use a bit of extra love."
    : active.length ? "A few small things, at your own pace." : "Everything is tucked in for today.";
  queueCount.textContent = active.length === 0 ? "All tended for today" : active.length === 1 ? "1 small thing" : `${active.length} small things`;
  queueCounter.innerHTML = `${String(active.length).padStart(2, "0")} <span>to tend</span>`;
}

function showToast(message, snapshot) {
  clearTimeout(toastTimer);
  undoSnapshot = snapshot;
  toastMessage.textContent = message;
  toast.hidden = false;
  undoButton.focus();
  toastTimer = setTimeout(() => {
    toast.hidden = true;
    undoSnapshot = null;
  }, 8000);
}

function changeStatus(id, nextStatus) {
  const plant = plants.find((item) => item.id === id);
  if (!plant) return;
  const previous = { ...state[id] };
  state[id] = nextStatus === "snoozed"
    ? { status: "snoozed", due: "Later today" }
    : { status: "done", due: "Tended" };
  render();
  if (nextStatus === "snoozed") {
    showToast(`${plant.name} is snoozed until later today.`, { id, value: previous });
  } else {
    const message = plant.task === "Water" ? `${plant.name} got a nice drink.` : `${plant.name}’s ${plant.task.toLowerCase()} is all done.`;
    showToast(message, { id, value: previous });
  }
}

function undoLastAction() {
  if (!undoSnapshot) return;
  const restoredId = undoSnapshot.id;
  state[restoredId] = undoSnapshot.value;
  clearTimeout(toastTimer);
  toast.hidden = true;
  undoSnapshot = null;
  render();
  document.querySelector(`[data-plant="${CSS.escape(restoredId)}"]`)?.focus();
}

document.addEventListener("click", (event) => {
  const action = event.target.closest("button[data-action]");
  if (!action) return;
  changeStatus(action.dataset.plant, action.dataset.action === "snooze" ? "snoozed" : "done");
});

undoButton.addEventListener("click", undoLastAction);
dismissButton.addEventListener("click", () => {
  clearTimeout(toastTimer);
  toast.hidden = true;
  undoSnapshot = null;
});

function renderWeek() {
  const todayIndex = (new Date().getDay() + 6) % 7;
  const bars = week.map((value, index) => `
    <div class="day-column${index === todayIndex ? " is-today" : ""}" aria-label="${days[index]}, ${value} care ${value === 1 ? "moment" : "moments"}${index === todayIndex ? ", today" : ""}">
      <div class="bar-wrap"><span class="day-bar" style="height:${Math.max(14, value / 4 * 100)}%"></span></div>
      <span class="day-label" aria-hidden="true">${days[index]}</span>
    </div>`).join("");
  document.querySelector("#chart-bars").innerHTML = bars;
  document.querySelector("#week-total").textContent = `${week.reduce((sum, count) => sum + count, 0)} this week`;
  document.querySelector("#week-chart").setAttribute("aria-label", `Care moments this week: ${week.join(", ")}, Monday through Sunday.`);
}

function renderDate() {
  const date = new Intl.DateTimeFormat("en", { weekday: "long", month: "long", day: "numeric" }).format(new Date());
  document.querySelector("#today-date").textContent = `${date} · a gentle check-in`;
}

render();
renderWeek();
renderDate();

gpt-6-luna/13-frontend-playful/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#f7f5ed">
    <title>Moss — a little care goes a long way</title>
    <link rel="stylesheet" href="styles.css">
    <script src="app.js" defer></script>
  </head>
  <body>
    <a class="skip-link" href="#main">Skip to today’s care</a>
    <div class="app-shell">
      <header class="topbar">
        <a class="brand" href="#main" aria-label="Moss home">
          <span class="brand-mark" aria-hidden="true">
            <svg viewBox="0 0 40 40" focusable="false">
              <path d="M20 32V17" />
              <path d="M20 21c-9 0-13-5-12-12 8 0 13 4 12 12Z" />
              <path d="M20 17c0-7 5-11 12-11 1 8-4 12-12 11Z" />
              <path d="M12 34h16l-2 3H14z" />
            </svg>
          </span>
          <span class="brand-name">moss<span class="brand-period">.</span></span>
        </a>
        <div class="topbar-note"><span class="live-dot" aria-hidden="true"></span> your home, a little greener</div>
        <span class="profile-button" aria-hidden="true">A</span>
      </header>

      <main id="main">
        <section class="welcome-panel" aria-labelledby="welcome-title">
          <div class="welcome-copy">
            <p class="eyebrow" id="today-date">A gentle check-in</p>
            <h1 id="welcome-title">A little care<br class="mobile-break"> goes a long way<span class="title-leaf" aria-hidden="true">↗</span></h1>
            <p class="welcome-subtitle">Your plants are doing their thing. Here’s how you can help.</p>
            <div class="welcome-meta">
              <span class="weather-mark" aria-hidden="true">☼</span>
              <span><strong id="queue-count">4 small things</strong> waiting for your hands</span>
            </div>
          </div>
          <div class="welcome-art" aria-hidden="true">
            <span class="sun-disc"></span>
            <span class="art-spark spark-one">✳</span>
            <span class="art-spark spark-two">·</span>
            <svg class="hero-plant" viewBox="0 0 230 190" focusable="false">
              <path class="hero-stem" d="M116 133c-2-29-1-59 2-95" />
              <path class="hero-stem" d="M117 89c-18-19-32-24-53-22 4 24 21 34 52 31" />
              <path class="hero-stem" d="M119 67c10-21 26-31 49-30 1 24-14 38-47 42" />
              <path class="hero-stem" d="M115 110c-15-10-31-11-47-4 8 19 22 26 47 21" />
              <path class="hero-stem" d="M119 102c13-15 28-20 46-17-4 21-18 31-47 31" />
              <path class="hero-vein" d="M117 90 77 71m42-5 37-23m-42 67-35 1m43-9 39-16" />
              <path class="pot-rim" d="M73 133h88l-9 14H82z" />
              <path class="pot-body" d="m82 147 68 0-8 35H91z" />
              <path class="pot-face" d="M105 162c2-3 5-3 7 0m13 0c2-3 5-3 7 0m-21 9c6 4 13 4 19 0" />
              <path class="pot-shadow" d="M75 184h84" />
            </svg>
            <span class="art-caption">slow days count too</span>
          </div>
          <span class="welcome-stitch" aria-hidden="true"></span>
        </section>

        <div class="content-grid">
          <section class="queue-section" aria-labelledby="queue-heading">
            <div class="section-heading">
              <div>
                <p class="eyebrow section-kicker">The little list</p>
                <h2 id="queue-heading">Today’s care queue</h2>
              </div>
              <span class="queue-counter" id="queue-counter" aria-live="polite">04 <span>to tend</span></span>
            </div>
            <p class="queue-intro" id="queue-intro">First, one plant could use a bit of extra love.</p>
            <div id="queue-list" class="queue-list" aria-live="off"></div>
            <section id="snoozed-section" class="secondary-list" hidden aria-labelledby="snoozed-heading">
              <div class="secondary-heading">
                <h3 id="snoozed-heading">Taking a little breather</h3>
                <span class="tiny-sun" aria-hidden="true">☼</span>
              </div>
              <div id="snoozed-list" class="queue-list queue-list-quiet"></div>
            </section>
            <section id="done-section" class="secondary-list" hidden aria-labelledby="done-heading">
              <div class="secondary-heading">
                <h3 id="done-heading">Lovely work, you two</h3>
                <span class="tiny-sun" aria-hidden="true">✦</span>
              </div>
              <div id="done-list" class="queue-list queue-list-quiet"></div>
            </section>
            <section id="all-done" class="all-done" hidden aria-live="polite">
              <span class="all-done-flower" aria-hidden="true">✿</span>
              <div>
                <p class="eyebrow">That’s the whole lot</p>
                <h3>All tended. Now you can both grow.</h3>
                <p>Your plants are set for today. Put the watering can back somewhere charming.</p>
              </div>
            </section>
          </section>

          <aside class="side-rail" aria-label="Your garden at a glance">
            <section class="rhythm-card" aria-labelledby="rhythm-heading">
              <div class="rail-heading">
                <div>
                  <p class="eyebrow">A soft little streak</p>
                  <h2 id="rhythm-heading">Weekly rhythm</h2>
                </div>
                <span class="rhythm-badge" aria-hidden="true">THIS<br>WEEK</span>
              </div>
              <p class="rhythm-copy">Small check-ins add up to a happy home.</p>
              <figure class="week-chart" id="week-chart" aria-label="Care check-ins this week">
                <div class="chart-grid" aria-hidden="true"></div>
                <div class="chart-bars" id="chart-bars"></div>
                <figcaption class="visually-hidden">Number of care moments each day this week.</figcaption>
              </figure>
              <div class="rhythm-foot"><span><i class="legend-dot" aria-hidden="true"></i> care moments</span><strong id="week-total">16 this week</strong></div>
            </section>

            <section class="note-card" aria-labelledby="note-heading">
              <div class="note-doodle" aria-hidden="true">
                <svg viewBox="0 0 60 60" focusable="false">
                  <path d="M29 50V28m0 11c-11 0-16-6-14-16 10 0 15 5 14 16Zm1-9c0-10 6-15 16-15 1 11-5 17-16 18Z" />
                  <path d="M17 51h27l-3 6H20z" />
                  <path d="M27 28c-4-5-5-9-3-13m8 4c4-5 8-7 12-7" />
                </svg>
              </div>
              <p class="eyebrow">A note from Moss</p>
              <h2 id="note-heading">No perfect plant parents here.</h2>
              <p>Plants have good days and weird days. Showing up when you can is plenty.</p>
              <span class="note-signoff">rooting for you <span aria-hidden="true">♡</span></span>
            </section>

            <p class="rail-footer"><span aria-hidden="true">✳</span> Made for the slow, lovely bits.</p>
          </aside>
        </div>
      </main>

      <footer class="page-footer">
        <span>moss © 2026</span><span>Take what you need. Leave the rest to the leaves.</span>
      </footer>
    </div>
    <div class="toast" id="toast" role="status" aria-live="polite" aria-atomic="true" hidden>
      <span class="toast-message" id="toast-message"></span>
      <button type="button" id="undo-action" class="undo-button">Undo</button>
      <button type="button" id="dismiss-toast" class="dismiss-button" aria-label="Dismiss message">×</button>
    </div>
  </body>
</html>

gpt-6-luna/13-frontend-playful/PLANTS.json

{
  "plants": [
    {"id":"fern","name":"Frida","species":"Boston fern","location":"Bathroom","task":"Water","due":"2 days overdue","urgency":4,"light":"Low, indirect","history":["Sep 19 · Misted","Sep 16 · Watered","Sep 12 · New frond"]},
    {"id":"pothos","name":"Orbit","species":"Golden pothos","location":"Bookshelf","task":"Rotate","due":"Today","urgency":2,"light":"Medium, indirect","history":["Sep 20 · Watered","Sep 14 · Rotated","Sep 10 · Wiped leaves"]},
    {"id":"cactus","name":"Dot","species":"Bunny ears cactus","location":"South window","task":"Check soil","due":"Today","urgency":1,"light":"Bright, direct","history":["Sep 08 · Watered","Sep 01 · New pad noted","Aug 22 · Rotated"]},
    {"id":"calathea","name":"Drama","species":"Calathea orbifolia","location":"Bedroom","task":"Mist","due":"Tomorrow","urgency":0,"light":"Medium, filtered","history":["Sep 21 · Misted","Sep 18 · Watered","Sep 15 · Brown edge noted"]}
  ],
  "week": [1,3,2,4,2,1,3]
}

gpt-6-luna/13-frontend-playful/styles.css

:root {
  color-scheme: light;
  --paper: #f7f5ed;
  --paper-deep: #eeeadd;
  --ink: #25392f;
  --muted: #778078;
  --forest: #315944;
  --forest-dark: #244333;
  --moss: #8caa68;
  --lime: #d6e686;
  --coral: #df765e;
  --coral-dark: #9b4639;
  --line: #e8e5d9;
  --white: #fffef9;
  --shadow: 0 18px 50px rgb(46 61 46 / 7%);
  font-family: ui-rounded, "Avenir Next", Avenir, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 4% 16%, rgb(214 230 134 / 12%), transparent 22rem),
    radial-gradient(ellipse at 98% 46%, rgb(229 203 165 / 18%), transparent 26rem),
    var(--paper);
  color: var(--ink);
}
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; }
::selection { background: #d9e9aa; color: var(--forest-dark); }

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 20;
  padding: 0.8rem 1rem;
  transform: translateY(-160%);
  border-radius: 0.75rem;
  background: var(--forest-dark);
  color: white;
}
.skip-link:focus { transform: translateY(0); }
.app-shell { width: min(1200px, calc(100% - 52px)); margin: 0 auto; }
.topbar {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgb(37 57 47 / 10%);
}
.brand { display: inline-flex; align-items: center; gap: 0.45rem; text-decoration: none; }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 14px 14px 14px 5px; background: #e8edcb; transform: rotate(-4deg); }
.brand-mark svg { width: 28px; fill: none; stroke: var(--forest); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.1; }
.brand-name { font-family: Georgia, "Times New Roman", serif; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.08em; }
.brand-period { color: var(--coral); }
.topbar-note { display: flex; align-items: center; gap: 0.55rem; color: #66756a; font-size: 0.8rem; letter-spacing: 0.025em; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #9ab97a; box-shadow: 0 0 0 4px #e5edd6; }
.profile-button { width: 36px; height: 36px; border: 1px solid #e0e2d4; border-radius: 50%; background: #ecebdc; color: #556846; font-family: Georgia, serif; font-size: 0.9rem; font-weight: 700; }

.welcome-panel {
  position: relative;
  display: flex;
  min-height: 278px;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  margin: 31px 0 42px;
  padding: 37px 66px 36px 58px;
  border-radius: 30px 30px 30px 12px;
  background: #e8edcf;
  isolation: isolate;
}
.welcome-panel::before, .welcome-panel::after { position: absolute; z-index: -1; content: ""; border: 1px solid rgb(92 117 70 / 13%); border-radius: 50%; }
.welcome-panel::before { width: 390px; height: 390px; right: 66px; top: -194px; }
.welcome-panel::after { width: 270px; height: 270px; right: 128px; top: -135px; }
.welcome-copy { position: relative; z-index: 1; max-width: 620px; }
.eyebrow { margin: 0; color: #727c58; font-size: 0.66rem; font-weight: 750; letter-spacing: 0.15em; line-height: 1.4; text-transform: uppercase; }
.welcome-copy > .eyebrow { margin-bottom: 0.72rem; color: #5f774c; }
h1, h2, h3, p { margin-top: 0; }
h1, .section-heading h2, .rail-heading h2, .note-card h2, .all-done h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
h1 { max-width: 580px; margin-bottom: 0.7rem; color: #294a38; font-size: clamp(2.25rem, 4.25vw, 3.45rem); letter-spacing: -0.055em; line-height: 0.99; }
.title-leaf { display: inline-block; margin-left: 0.26rem; color: #b56c4e; font-family: ui-rounded, sans-serif; font-size: 0.56em; transform: rotate(-30deg) translateY(-0.35em); }
.welcome-subtitle { margin-bottom: 1.25rem; color: #63715d; font-size: 0.91rem; line-height: 1.6; }
.welcome-meta { display: inline-flex; align-items: center; gap: 0.6rem; color: #62715d; font-size: 0.75rem; }
.welcome-meta strong { color: #3c5b45; font-weight: 720; }
.weather-mark { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: #f4e4a9; color: #a47738; font-size: 1rem; }
.welcome-art { position: relative; display: flex; width: 270px; height: 210px; flex: 0 0 270px; align-items: flex-end; justify-content: center; margin-right: 9px; }
.sun-disc { position: absolute; top: 1px; right: 43px; width: 66px; height: 66px; border-radius: 50%; background: #f1d88f; }
.hero-plant { position: relative; z-index: 1; width: 230px; height: 190px; overflow: visible; }
.hero-stem { fill: #799c61; stroke: #5e8050; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.hero-vein { fill: none; stroke: #a9be7c; stroke-linecap: round; stroke-width: 1.5; }
.pot-rim { fill: #c7765c; stroke: #a95d49; stroke-width: 1.5; }
.pot-body { fill: #d89070; stroke: #a95d49; stroke-linejoin: round; stroke-width: 1.5; }
.pot-face { fill: none; stroke: #654f3d; stroke-linecap: round; stroke-width: 2.4; }
.pot-shadow { fill: none; stroke: #829267; stroke-linecap: round; stroke-width: 3; opacity: 0.42; }
.art-spark { position: absolute; color: #ae9761; font-family: Georgia, serif; }
.spark-one { top: 43px; left: 17px; font-size: 1.2rem; }
.spark-two { top: 89px; right: 13px; font-size: 2.4rem; }
.art-caption { position: absolute; right: 14px; bottom: 9px; z-index: 2; color: #6c7d55; font-family: Georgia, serif; font-size: 0.72rem; font-style: italic; transform: rotate(-5deg); }
.welcome-stitch { position: absolute; right: 7px; bottom: 12px; width: 48px; height: 20px; border-top: 1px dashed rgb(77 103 60 / 42%); border-radius: 50%; transform: rotate(15deg); }

.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 305px; align-items: start; gap: 58px; padding: 0 16px; }
.queue-section { min-width: 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.section-kicker { margin-bottom: 0.38rem; }
.section-heading h2 { margin: 0; font-size: 1.82rem; letter-spacing: -0.045em; }
.queue-counter { margin-bottom: 0.2rem; color: var(--forest); font-family: Georgia, serif; font-size: 1.38rem; }
.queue-counter span { color: #869087; font-family: ui-rounded, "Segoe UI", sans-serif; font-size: 0.68rem; }
.queue-intro { margin: 0.62rem 0 1.18rem; color: #788179; font-size: 0.79rem; }
.queue-list { display: grid; gap: 12px; }
.plant-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1.1rem;
  padding: 17px 18px 15px 16px;
  border: 1px solid #eae7dc;
  border-radius: 8px 19px 19px 19px;
  background: rgb(255 254 249 / 88%);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.plant-card:hover { transform: translateY(-2px); border-color: #d9dfc7; box-shadow: 0 8px 22px rgb(52 71 49 / 6%); }
.plant-card.is-overdue { border-color: #ebc3b8; background: #fffaf4; }
.plant-card.is-overdue::before { position: absolute; top: 14px; bottom: 14px; left: -1px; width: 3px; border-radius: 0 3px 3px 0; background: var(--coral); content: ""; }
.plant-main { display: flex; min-width: 0; align-items: center; gap: 13px; }
.plant-portrait { display: grid; width: 52px; height: 52px; flex: 0 0 auto; place-items: center; border-radius: 17px 17px 17px 7px; background: var(--portrait-bg, #e2ead1); color: var(--portrait-ink, #5b7a4c); }
.plant-portrait svg { width: 43px; height: 43px; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.plant-portrait .plant-fill { fill: currentColor; stroke: currentColor; }
.plant-portrait .pot-fill { fill: #c98365; stroke: #a9634b; }
.plant-portrait .pot-line { fill: none; stroke: #9e5d48; }
.plant-copy { min-width: 0; }
.plant-title-line { display: flex; min-width: 0; align-items: baseline; gap: 8px; }
.plant-name { overflow: hidden; margin: 0; color: #34473a; font-family: Georgia, "Times New Roman", serif; font-size: 1.16rem; font-weight: 600; letter-spacing: -0.025em; text-overflow: ellipsis; white-space: nowrap; }
.plant-species { overflow: hidden; color: #92978e; font-size: 0.65rem; text-overflow: ellipsis; white-space: nowrap; }
.plant-task { margin: 0.24rem 0 0; color: #5b665b; font-size: 0.74rem; }
.plant-task strong { color: #354e3b; font-weight: 700; }
.plant-location { margin: 0.3rem 0 0; color: #92988e; font-size: 0.65rem; }
.plant-location::before { margin-right: 0.28rem; color: #af9a70; content: "⌖"; font-size: 0.85rem; }
.plant-actions { display: flex; align-items: center; gap: 7px; }
.action-button { display: inline-flex; min-height: 37px; align-items: center; justify-content: center; gap: 0.34rem; padding: 0.56rem 0.78rem; border: 1px solid #d9e0ce; border-radius: 999px; background: #edf2e3; color: #3f6546; cursor: pointer; font-size: 0.7rem; font-weight: 720; white-space: nowrap; transition: background-color 160ms ease, transform 160ms ease; }
.action-button:hover { transform: translateY(-1px); background: #e2ebd3; }
.action-button .action-icon { font-size: 0.87rem; line-height: 1; }
.action-button.snooze-button { min-width: 38px; padding: 0.5rem 0.68rem; border-color: #e6e3d9; background: transparent; color: #7d8479; }
.action-button.snooze-button:hover { background: #f1efe7; }
.snooze-label { display: none; }
.due-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.3rem 0.52rem; border: 1px solid #e9e5d7; border-radius: 999px; background: #f8f6ed; color: #777a6b; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.025em; white-space: nowrap; }
.plant-card.is-overdue .due-chip { border-color: #f0d0c6; background: #f9e9e1; color: #a44f40; }
.due-chip .due-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.card-topline { display: flex; align-items: center; gap: 7px; }
.plant-detail { grid-column: 1 / -1; min-width: 0; margin-top: 14px; border-top: 1px solid #eeece3; }
.plant-detail summary { display: inline-flex; align-items: center; gap: 0.4rem; padding-top: 11px; color: #6d795e; cursor: pointer; font-size: 0.68rem; font-weight: 700; list-style: none; }
.plant-detail summary::-webkit-details-marker { display: none; }
.plant-detail summary::after { display: inline-block; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; content: ""; transform: rotate(45deg) translateY(-2px); transition: transform 180ms ease; }
.plant-detail[open] summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.detail-content { display: grid; grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.2fr); gap: 17px; padding: 12px 0 2px; }
.detail-label { display: block; margin-bottom: 0.35rem; color: #9a9f94; font-size: 0.58rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; }
.light-value { display: flex; align-items: flex-start; gap: 0.4rem; color: #52634f; font-size: 0.7rem; line-height: 1.45; }
.light-symbol { color: #d2a94f; font-size: 0.9rem; line-height: 1; }
.history-list { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.history-list li { padding: 0.35rem 0.5rem; border-radius: 6px 9px 9px 9px; background: #f3f2e9; color: #737b6d; font-size: 0.61rem; }
.history-list li:first-child { background: #eaf0dc; color: #55704d; }
.queue-list-quiet { gap: 9px; }
.queue-list-quiet .plant-card { background: #faf9f3; }
.queue-list-quiet .plant-portrait { width: 42px; height: 42px; border-radius: 13px 13px 13px 5px; }
.queue-list-quiet .plant-portrait svg { width: 35px; height: 35px; }
.queue-list-quiet .plant-detail { display: none; }
.queue-list-quiet .plant-actions { display: none; }
.queue-list-quiet .plant-card { grid-template-columns: minmax(0,1fr) auto; }
.quiet-status { color: #8d9588; font-size: 0.65rem; }
.secondary-list { margin-top: 27px; }
.secondary-heading { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 11px; }
.secondary-heading h3 { margin: 0; color: #74806d; font-family: Georgia, serif; font-size: 1rem; font-weight: 500; }
.tiny-sun { color: #c89d4a; }
.all-done { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 21px 22px; border: 1px dashed #bfcc9e; border-radius: 8px 21px 21px 21px; background: #eef2df; }
.all-done-flower { display: grid; width: 49px; height: 49px; flex: 0 0 auto; place-items: center; border-radius: 16px 16px 16px 5px; background: #dbe6bd; color: #709255; font-size: 2rem; }
.all-done .eyebrow { margin-bottom: 0.3rem; }
.all-done h3 { margin: 0 0 0.35rem; color: #34513a; font-size: 1.22rem; letter-spacing: -0.025em; }
.all-done p:last-child { margin: 0; color: #6c7966; font-size: 0.72rem; line-height: 1.55; }

.side-rail { display: grid; gap: 16px; }
.rhythm-card { padding: 21px 20px 16px; border: 1px solid #e8e5da; border-radius: 19px 9px 19px 19px; background: #fffef9; box-shadow: var(--shadow); }
.rail-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.rail-heading .eyebrow { margin-bottom: 0.35rem; }
.rail-heading h2 { margin: 0; font-size: 1.3rem; letter-spacing: -0.035em; }
.rhythm-badge { display: grid; width: 40px; height: 40px; place-content: center; border: 1px solid #dfe7cf; border-radius: 13px 13px 13px 4px; background: #edf1e2; color: #72865c; font-size: 0.49rem; font-weight: 800; line-height: 1.3; text-align: center; }
.rhythm-copy { margin: 0.55rem 0 0; color: #878d82; font-size: 0.69rem; line-height: 1.5; }
.week-chart { position: relative; height: 106px; margin: 15px 0 8px; }
.chart-grid { position: absolute; inset: 3px 0 22px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 24px, #eeeDE5 25px, transparent 26px); }
.chart-bars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 11px; padding: 0 4px; }
.day-column { position: relative; display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; }
.bar-wrap { display: flex; width: 100%; height: 79px; align-items: end; justify-content: center; }
.day-bar { position: relative; width: min(19px, 75%); min-height: 11px; border-radius: 9px 9px 4px 4px; background: #cbd9ad; transition: height 240ms ease; }
.day-column:nth-child(2n) .day-bar { background: #d9cfa4; }
.day-column.is-today .day-bar { background: var(--forest); }
.day-bar::before { position: absolute; top: -7px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: inherit; content: ""; transform: translateX(-50%); }
.day-label { color: #989c91; font-size: 0.58rem; }
.day-column.is-today .day-label { color: #4b674c; font-weight: 800; }
.rhythm-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid #efede4; color: #92978c; font-size: 0.61rem; }
.rhythm-foot > span { display: inline-flex; align-items: center; gap: 0.38rem; }
.rhythm-foot strong { color: #65765a; font-size: 0.66rem; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; background: #aabd83; }
.note-card { position: relative; min-height: 208px; overflow: hidden; padding: 22px 23px 18px; border: 1px solid #e7ddc4; border-radius: 8px 18px 18px 18px; background: #f4edda; }
.note-card::after { position: absolute; right: -22px; bottom: -44px; width: 142px; height: 142px; border: 1px solid rgb(152 126 77 / 14%); border-radius: 50%; content: ""; }
.note-doodle { position: absolute; top: 16px; right: 16px; display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px 14px 14px 5px; background: #ebe0bf; transform: rotate(4deg); }
.note-doodle svg { width: 38px; fill: none; stroke: #778c59; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.note-card .eyebrow { margin-bottom: 0.55rem; color: #9b8050; }
.note-card h2 { max-width: 185px; margin: 0 0 0.55rem; color: #514b39; font-size: 1.25rem; letter-spacing: -0.035em; line-height: 1.08; }
.note-card > p:not(.eyebrow) { max-width: 235px; margin: 0 0 0.8rem; color: #77705d; font-size: 0.7rem; line-height: 1.55; }
.note-signoff { color: #997852; font-family: Georgia, serif; font-size: 0.7rem; font-style: italic; }
.note-signoff span { color: #cf806b; font-style: normal; }
.rail-footer { margin: 0; color: #9b9e91; font-family: Georgia, serif; font-size: 0.69rem; font-style: italic; text-align: center; }
.rail-footer span { margin-right: 0.25rem; color: #b2a269; }
.page-footer { display: flex; justify-content: space-between; margin: 50px 16px 0; padding: 17px 0 23px; border-top: 1px solid rgb(37 57 47 / 9%); color: #a0a398; font-size: 0.62rem; }
.toast { position: fixed; right: max(22px, calc((100vw - 1200px) / 2)); bottom: 24px; z-index: 10; display: flex; max-width: min(390px, calc(100vw - 32px)); align-items: center; gap: 12px; padding: 11px 12px 11px 16px; border: 1px solid rgb(255 255 255 / 13%); border-radius: 13px 13px 13px 5px; background: #2e4b39; box-shadow: 0 12px 38px rgb(29 47 34 / 22%); color: white; font-size: 0.76rem; animation: toast-in 220ms ease-out both; }
.toast[hidden] { display: none; }
.toast-message { flex: 1; }
.undo-button, .dismiss-button { border: 0; background: none; cursor: pointer; }
.undo-button { padding: 0.4rem 0.65rem; border-radius: 999px; background: #e4edce; color: #34523b; font-size: 0.67rem; font-weight: 800; }
.dismiss-button { padding: 0.12rem 0.2rem; color: #d2ddce; font-size: 1.2rem; line-height: 1; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #bd8450; outline-offset: 3px; }
button:focus-visible, summary:focus-visible, a:focus-visible { border-radius: 5px; }

@keyframes toast-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 1440px) {
  .app-shell { width: min(1260px, calc(100% - 100px)); }
  .content-grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 72px; padding: 0 25px; }
  .welcome-panel { padding-left: 74px; }
}

@media (max-width: 920px) {
  .app-shell { width: min(760px, calc(100% - 40px)); }
  .welcome-panel { min-height: 250px; padding: 32px 36px; }
  .welcome-art { width: 215px; flex-basis: 215px; margin-right: 0; transform: scale(0.88); transform-origin: center right; }
  .content-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 0 5px; }
  .side-rail { grid-template-columns: 1fr 1fr; align-items: start; }
  .rhythm-card { grid-row: span 2; }
  .rail-footer { align-self: center; }
  .page-footer { margin-top: 38px; }
}

@media (max-width: 620px) {
  .app-shell { width: calc(100% - 30px); }
  .topbar { min-height: 67px; }
  .brand-mark { width: 33px; height: 33px; }
  .brand-mark svg { width: 25px; }
  .brand-name { font-size: 1.55rem; }
  .topbar-note { font-size: 0.64rem; }
  .profile-button { width: 32px; height: 32px; }
  .welcome-panel { min-height: 263px; align-items: flex-start; margin: 19px 0 32px; padding: 25px 23px; border-radius: 22px 22px 22px 9px; }
  .welcome-copy { max-width: 100%; }
  .welcome-copy > .eyebrow { font-size: 0.59rem; }
  h1 { max-width: 390px; font-size: clamp(2.15rem, 9vw, 2.8rem); }
  .welcome-subtitle { max-width: 250px; font-size: 0.8rem; }
  .welcome-meta { position: relative; z-index: 2; font-size: 0.68rem; }
  .welcome-art { position: absolute; right: 0; bottom: -15px; width: 157px; height: 140px; opacity: 0.86; transform: scale(0.75); transform-origin: bottom right; }
  .sun-disc { top: 0; right: 20px; width: 52px; height: 52px; }
  .spark-one { left: 0; }
  .spark-two { right: 0; }
  .art-caption, .welcome-stitch { display: none; }
  .mobile-break { display: block; }
  .content-grid { gap: 27px; padding: 0; }
  .section-heading h2 { font-size: 1.55rem; }
  .queue-counter { font-size: 1.14rem; }
  .queue-intro { max-width: 300px; font-size: 0.73rem; line-height: 1.5; }
  .queue-list { gap: 10px; }
  .plant-card { grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.5rem; padding: 13px 11px 11px 11px; }
  .plant-main { gap: 9px; }
  .plant-portrait { width: 43px; height: 43px; border-radius: 14px 14px 14px 5px; }
  .plant-portrait svg { width: 36px; height: 36px; }
  .plant-title-line { flex-wrap: wrap; align-items: baseline; gap: 3px 6px; }
  .plant-name { font-size: 1.06rem; }
  .plant-species { font-size: 0.59rem; }
  .plant-task { font-size: 0.67rem; }
  .plant-location { font-size: 0.6rem; }
  .plant-actions { grid-column: 1 / -1; justify-content: flex-end; margin-top: 10px; padding-left: 52px; }
  .action-button { min-height: 34px; padding: 0.48rem 0.75rem; font-size: 0.67rem; }
  .action-button.snooze-button { min-width: 35px; }
  .due-chip { padding: 0.28rem 0.43rem; font-size: 0.56rem; }
  .card-topline { align-items: flex-start; }
  .plant-detail { margin-top: 9px; }
  .plant-detail summary { padding-top: 9px; }
  .detail-content { grid-template-columns: 1fr; gap: 10px; }
  .history-list { gap: 4px; }
  .history-list li { font-size: 0.58rem; }
  .queue-list-quiet .plant-card { padding: 10px; }
  .queue-list-quiet .plant-actions { display: none; }
  .quiet-status { max-width: 95px; text-align: right; }
  .all-done { align-items: flex-start; gap: 12px; padding: 17px 15px; }
  .all-done-flower { width: 43px; height: 43px; font-size: 1.7rem; }
  .all-done h3 { font-size: 1.06rem; }
  .side-rail { grid-template-columns: 1fr; gap: 12px; }
  .rhythm-card { grid-row: auto; }
  .week-chart { height: 119px; }
  .bar-wrap { height: 91px; }
  .day-bar { width: 22px; }
  .note-card { min-height: 183px; }
  .rail-footer { padding: 2px 0; }
  .page-footer { flex-direction: column; gap: 6px; margin: 29px 0 0; font-size: 0.59rem; }
  .toast { right: 15px; bottom: 14px; left: 15px; max-width: none; }
}

@media (max-width: 370px) {
  .topbar-note { max-width: 136px; line-height: 1.3; }
  .welcome-panel { padding-right: 17px; padding-left: 17px; }
  .welcome-art { right: -12px; opacity: 0.65; }
  .plant-card { padding-right: 8px; padding-left: 8px; }
  .plant-portrait { width: 38px; height: 38px; }
  .plant-portrait svg { width: 32px; height: 32px; }
  .plant-main { gap: 7px; }
  .plant-name { font-size: 1rem; }
  .plant-species { max-width: 100px; }
  .plant-actions { padding-left: 45px; }
  .due-chip { font-size: 0.52rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

mcode-m3/13-frontend-playful/RESPONSE.md

┌──────────────────────────────────────────────────────┐
│  Header: brand  ···  greeting (right-aligned)        │
├──────────────────────────────────────────────────────┤
│  Weekly rhythm (full width)                          │
├───────────────────────────┬──────────────────────────┤
│  Today's care · queue     │  Selected plant · detail  │
│  (compact cards, no btns) │  (large avatar + history) │
└───────────────────────────┴──────────────────────────┘

mcode-m3/13-frontend-playful/TASK.md

mcode-m3/13-frontend-playful/app.js

/* =========================================================
   Moss · plant companion — app logic
   Plain JS, no framework. Keyboard-first, reduced-motion aware.
   ========================================================= */

(() => {
  'use strict';

  /* ---------- Data ---------- */
  const DATA = {
    plants: [
      {
        id: 'fern',
        name: 'Frida',
        species: 'Boston fern',
        location: 'Bathroom',
        task: 'Water',
        due: '2 days overdue',
        urgency: 4,
        light: 'Low, indirect',
        history: [
          { date: 'Sep 19', text: 'Misted' },
          { date: 'Sep 16', text: 'Watered' },
          { date: 'Sep 12', text: 'New frond unfurled' },
        ],
      },
      {
        id: 'pothos',
        name: 'Orbit',
        species: 'Golden pothos',
        location: 'Bookshelf',
        task: 'Rotate',
        due: 'Today',
        urgency: 2,
        light: 'Medium, indirect',
        history: [
          { date: 'Sep 20', text: 'Watered' },
          { date: 'Sep 14', text: 'Rotated' },
          { date: 'Sep 10', text: 'Wiped leaves' },
        ],
      },
      {
        id: 'cactus',
        name: 'Dot',
        species: 'Bunny ears cactus',
        location: 'South window',
        task: 'Check soil',
        due: 'Today',
        urgency: 1,
        light: 'Bright, direct',
        history: [
          { date: 'Sep 08', text: 'Watered' },
          { date: 'Sep 01', text: 'New pad noted' },
          { date: 'Aug 22', text: 'Rotated' },
        ],
      },
      {
        id: 'calathea',
        name: 'Drama',
        species: 'Calathea orbifolia',
        location: 'Bedroom',
        task: 'Mist',
        due: 'Tomorrow',
        urgency: 0,
        light: 'Medium, filtered',
        history: [
          { date: 'Sep 21', text: 'Misted' },
          { date: 'Sep 18', text: 'Watered' },
          { date: 'Sep 15', text: 'Brown edge noted' },
        ],
      },
    ],
    week: [1, 3, 2, 4, 2, 1, 3],
  };

  /* ---------- Inline SVG avatars (expressive, not clip art) ---------- */
  const SVG = {
    fern: (size = '100%') => `
      <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" width="${size}" height="${size}" aria-hidden="true">
        <defs>
          <radialGradient id="potFern" cx="50%" cy="0%" r="80%">
            <stop offset="0%" stop-color="#D58966"/>
            <stop offset="100%" stop-color="#9C5436"/>
          </radialGradient>
        </defs>
        <!-- fronds arching -->
        <g stroke="#3E5A2E" stroke-width="1.6" stroke-linecap="round" fill="none">
          <path d="M50 70 Q 30 48 24 28"/>
          <path d="M50 70 Q 70 48 76 28"/>
          <path d="M50 70 Q 50 50 50 24"/>
          <path d="M50 70 Q 38 56 32 42"/>
          <path d="M50 70 Q 62 56 68 42"/>
          <path d="M50 70 Q 44 60 40 56"/>
          <path d="M50 70 Q 56 60 60 56"/>
        </g>
        <!-- leaf shapes -->
        <g fill="#7A8E58">
          <ellipse cx="24" cy="28" rx="3" ry="9" transform="rotate(-30 24 28)"/>
          <ellipse cx="76" cy="28" rx="3" ry="9" transform="rotate(30 76 28)"/>
          <ellipse cx="50" cy="24" rx="3" ry="9"/>
          <ellipse cx="32" cy="42" rx="2.6" ry="7" transform="rotate(-50 32 42)"/>
          <ellipse cx="68" cy="42" rx="2.6" ry="7" transform="rotate(50 68 42)"/>
          <ellipse cx="40" cy="56" rx="2.2" ry="5.5" transform="rotate(-65 40 56)"/>
          <ellipse cx="60" cy="56" rx="2.2" ry="5.5" transform="rotate(65 60 56)"/>
        </g>
        <g fill="#A2B679">
          <ellipse cx="22" cy="34" rx="2" ry="6" transform="rotate(-30 22 34)"/>
          <ellipse cx="78" cy="34" rx="2" ry="6" transform="rotate(30 78 34)"/>
          <ellipse cx="50" cy="32" rx="2" ry="6"/>
        </g>
        <!-- pot -->
        <path d="M30 70 L 70 70 L 65 92 L 35 92 Z" fill="url(#potFern)"/>
        <ellipse cx="50" cy="70" rx="20" ry="3.6" fill="#7A4329"/>
        <ellipse cx="50" cy="70" rx="18" ry="2.6" fill="#5C2F1B"/>
        <path d="M30 70 L 70 70" stroke="#2A1B12" stroke-width="1" opacity="0.4"/>
      </svg>`,
    pothos: (size = '100%') => `
      <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" width="${size}" height="${size}" aria-hidden="true">
        <defs>
          <radialGradient id="potPothos" cx="50%" cy="0%" r="80%">
            <stop offset="0%" stop-color="#F2EAD0"/>
            <stop offset="100%" stop-color="#C9B998"/>
          </radialGradient>
        </defs>
        <!-- macramé cords -->
        <g stroke="#A89878" stroke-width="1.4" fill="none">
          <line x1="40" y1="22" x2="36" y2="38"/>
          <line x1="60" y1="22" x2="64" y2="38"/>
          <line x1="50" y1="20" x2="50" y2="38"/>
          <line x1="46" y1="22" x2="44" y2="38"/>
          <line x1="54" y1="22" x2="56" y2="38"/>
        </g>
        <!-- pot -->
        <path d="M34 38 L 66 38 L 62 56 L 38 56 Z" fill="url(#potPothos)"/>
        <ellipse cx="50" cy="38" rx="16" ry="3" fill="#9B8C68"/>
        <!-- vines trailing -->
        <path d="M44 56 Q 38 70 32 86" stroke="#3E5A2E" stroke-width="1.6" fill="none"/>
        <path d="M50 56 Q 52 72 50 88" stroke="#3E5A2E" stroke-width="1.6" fill="none"/>
        <path d="M56 56 Q 62 70 68 86" stroke="#3E5A2E" stroke-width="1.6" fill="none"/>
        <!-- heart leaves -->
        <g fill="#6B7F4A">
          <path d="M32 86 c -3 -3 -7 -2 -7 2 c 0 3 4 5 7 7 c 3 -2 7 -4 7 -7 c 0 -4 -4 -5 -7 -2 z"/>
          <path d="M50 88 c -3 -3 -7 -2 -7 2 c 0 3 4 5 7 7 c 3 -2 7 -4 7 -7 c 0 -4 -4 -5 -7 -2 z"/>
          <path d="M68 86 c -3 -3 -7 -2 -7 2 c 0 3 4 5 7 7 c 3 -2 7 -4 7 -7 c 0 -4 -4 -5 -7 -2 z"/>
        </g>
        <g fill="#D6BE6E" opacity="0.85">
          <path d="M30 84 c -1 -2 -3 -2 -3 0 c 0 2 2 3 3 4 c 1 -1 3 -2 3 -4 c 0 -2 -2 -2 -3 0 z" transform="translate(2 1)"/>
          <path d="M48 86 c -1 -2 -3 -2 -3 0 c 0 2 2 3 3 4 c 1 -1 3 -2 3 -4 c 0 -2 -2 -2 -3 0 z" transform="translate(2 1)"/>
        </g>
        <g fill="#A2B679">
          <ellipse cx="38" cy="68" rx="3" ry="4" transform="rotate(-25 38 68)"/>
          <ellipse cx="62" cy="68" rx="3" ry="4" transform="rotate(25 62 68)"/>
        </g>
      </svg>`,
    cactus: (size = '100%') => `
      <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" width="${size}" height="${size}" aria-hidden="true">
        <defs>
          <radialGradient id="potCactus" cx="50%" cy="0%" r="80%">
            <stop offset="0%" stop-color="#D58966"/>
            <stop offset="100%" stop-color="#9C5436"/>
          </radialGradient>
          <radialGradient id="pad" cx="35%" cy="30%" r="70%">
            <stop offset="0%" stop-color="#A2B679"/>
            <stop offset="100%" stop-color="#6B7F4A"/>
          </radialGradient>
        </defs>
        <!-- two bunny-ear pads -->
        <g>
          <ellipse cx="42" cy="58" rx="14" ry="18" fill="url(#pad)"/>
          <ellipse cx="60" cy="58" rx="14" ry="18" fill="url(#pad)"/>
          <ellipse cx="51" cy="68" rx="13" ry="14" fill="url(#pad)"/>
        </g>
        <!-- bunny dots (the namesake) -->
        <g fill="#FBF3DF">
          <circle cx="38" cy="48" r="1.6"/>
          <circle cx="44" cy="52" r="1.6"/>
          <circle cx="36" cy="58" r="1.6"/>
          <circle cx="48" cy="46" r="1.4"/>
          <circle cx="56" cy="48" r="1.6"/>
          <circle cx="64" cy="52" r="1.6"/>
          <circle cx="58" cy="58" r="1.6"/>
          <circle cx="50" cy="58" r="1.4"/>
          <circle cx="48" cy="66" r="1.4"/>
          <circle cx="54" cy="66" r="1.4"/>
        </g>
        <!-- subtle face -->
        <g fill="#3E5A2E">
          <circle cx="48" cy="60" r="1.4"/>
          <circle cx="54" cy="60" r="1.4"/>
        </g>
        <path d="M49 64 Q 51 65.5 53 64" stroke="#3E5A2E" stroke-width="1" fill="none" stroke-linecap="round"/>
        <!-- pot -->
        <path d="M28 70 L 72 70 L 68 92 L 32 92 Z" fill="url(#potCactus)"/>
        <ellipse cx="50" cy="70" rx="22" ry="3.4" fill="#7A4329"/>
        <ellipse cx="50" cy="70" rx="20" ry="2.4" fill="#5C2F1B"/>
      </svg>`,
    calathea: (size = '100%') => `
      <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" width="${size}" height="${size}" aria-hidden="true">
        <defs>
          <radialGradient id="potCal" cx="50%" cy="0%" r="80%">
            <stop offset="0%" stop-color="#3D4A55"/>
            <stop offset="100%" stop-color="#1F2A33"/>
          </radialGradient>
          <linearGradient id="leafCal" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#7A8E58"/>
            <stop offset="100%" stop-color="#4A5C36"/>
          </linearGradient>
        </defs>
        <!-- stems -->
        <path d="M50 70 Q 38 50 30 30" stroke="#4A5C36" stroke-width="2" fill="none"/>
        <path d="M50 70 Q 50 48 50 24" stroke="#4A5C36" stroke-width="2" fill="none"/>
        <path d="M50 70 Q 62 50 70 30" stroke="#4A5C36" stroke-width="2" fill="none"/>
        <!-- round striped leaves -->
        <g>
          <ellipse cx="30" cy="28" rx="14" ry="12" fill="url(#leafCal)" transform="rotate(-30 30 28)"/>
          <ellipse cx="30" cy="28" rx="11" ry="9" fill="none" stroke="#A2B679" stroke-width="1.2" opacity="0.7" transform="rotate(-30 30 28)"/>
          <ellipse cx="30" cy="28" rx="7" ry="6" fill="none" stroke="#C2CC9D" stroke-width="1" opacity="0.7" transform="rotate(-30 30 28)"/>

          <ellipse cx="50" cy="22" rx="15" ry="13" fill="url(#leafCal)"/>
          <ellipse cx="50" cy="22" rx="12" ry="10" fill="none" stroke="#A2B679" stroke-width="1.2" opacity="0.7"/>
          <ellipse cx="50" cy="22" rx="8" ry="6.5" fill="none" stroke="#C2CC9D" stroke-width="1" opacity="0.7"/>

          <ellipse cx="70" cy="28" rx="14" ry="12" fill="url(#leafCal)" transform="rotate(30 70 28)"/>
          <ellipse cx="70" cy="28" rx="11" ry="9" fill="none" stroke="#A2B679" stroke-width="1.2" opacity="0.7" transform="rotate(30 70 28)"/>
          <ellipse cx="70" cy="28" rx="7" ry="6" fill="none" stroke="#C2CC9D" stroke-width="1" opacity="0.7" transform="rotate(30 70 28)"/>
        </g>
        <!-- pot -->
        <path d="M30 70 L 70 70 L 66 92 L 34 92 Z" fill="url(#potCal)"/>
        <ellipse cx="50" cy="70" rx="20" ry="3.4" fill="#1A2228"/>
        <ellipse cx="50" cy="70" rx="18" ry="2.4" fill="#0F161B"/>
      </svg>`,
    water: () => `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3 C 8 8 6 12 6 15 a6 6 0 0 0 12 0 c 0 -3 -2 -7 -6 -12 z" fill="currentColor"/></svg>`,
    sun: () => `<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4" fill="currentColor"/><g stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><line x1="12" y1="3" x2="12" y2="5"/><line x1="12" y1="19" x2="12" y2="21"/><line x1="3" y1="12" x2="5" y2="12"/><line x1="19" y1="12" x2="21" y2="12"/><line x1="5.6" y1="5.6" x2="7" y2="7"/><line x1="17" y1="17" x2="18.4" y2="18.4"/><line x1="18.4" y1="5.6" x2="17" y2="7"/><line x1="7" y1="17" x2="5.6" y2="18.4"/></g></svg>`,
    drop: () => `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3 C 8 8 6 13 6 16 a6 6 0 0 0 12 0 c 0 -3 -2 -8 -6 -13 z" fill="none" stroke="currentColor" stroke-width="1.6"/></svg>`,
    clock: () => `<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M12 7v5l3 2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>`,
    pin: () => `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z" fill="none" stroke="currentColor" stroke-width="1.6"/><circle cx="12" cy="9" r="2.4" fill="currentColor"/></svg>`,
  };

  /* ---------- State ---------- */
  const state = {
    plants: DATA.plants.map(p => ({
      ...p,
      history: [...p.history],
      state: 'pending',     // pending | done | snoozed
    })),
    selectedId: null,
    lastAction: null,       // { plantId, prevState, prevHistory, action, timeout }
    undoWindow: 6000,
  };

  // Default selection = most urgent pending plant
  function pickDefault() {
    const ordered = [...state.plants].sort((a, b) => b.urgency - a.urgency);
    state.selectedId = ordered[0]?.id || null;
  }

  /* ---------- DOM helpers ---------- */
  const $ = (sel, root = document) => root.querySelector(sel);
  const $$ = (sel, root = document) => Array.from(root.querySelectorAll(sel));

  /* ---------- Render cards ---------- */
  function renderCards() {
    const list = $('#cards');
    const tpl = $('#card-tpl');
    list.innerHTML = '';

    const ordered = [...state.plants].sort((a, b) => b.urgency - a.urgency);

    for (const p of ordered) {
      const node = tpl.content.firstElementChild.cloneNode(true);
      node.dataset.id = p.id;
      node.dataset.urgency = String(p.urgency);
      node.dataset.state = p.state;

      const btn = $('[data-select]', node);
      const avatar = $('[data-avatar]', node);
      const name = $('[data-name]', node);
      const species = $('[data-species]', node);
      const loc = $('[data-location]', node);
      const task = $('[data-task]', node);
      const due = $('[data-due]', node);
      const status = $('[data-status]', node);

      avatar.innerHTML = SVG[p.id]();
      name.textContent = p.name;
      species.textContent = p.species;
      loc.textContent = p.location;
      task.textContent = p.task;
      due.textContent = p.due;
      status.textContent = p.state === 'done' ? '— watered' : '— snoozed';

      btn.setAttribute('aria-label', `${p.name}, ${p.species}, ${p.due}. Press to see care notes.`);
      btn.setAttribute('aria-pressed', String(p.id === state.selectedId));

      // Mobile inline expand/collapse via [data-selected]
      if (p.id === state.selectedId) {
        node.dataset.selected = 'true';
      }

      list.appendChild(node);
    }

    bindCardEvents();

    const due = state.plants.filter(p => p.urgency >= 1);
    const done = due.filter(p => p.state !== 'pending');
    $('[data-done]').textContent = String(done.length);
    $('[data-total]').textContent = String(due.length);

    // All-done state
    const alldone = $('#alldone');
    const allTended = due.every(p => p.state !== 'pending');
    if (allTended && due.length > 0) {
      alldone.hidden = false;
    } else {
      alldone.hidden = true;
    }
  }

  /* ---------- Render detail ---------- */
  function renderDetail() {
    const root = $('#detail');
    const p = state.plants.find(x => x.id === state.selectedId);
    if (!p) {
      root.innerHTML = `
        <div class="detail__empty">
          <h3 class="detail__name" style="font-size:22px">Choose a plant</h3>
          <p style="color:var(--ink-mute); margin-top:8px;">Tap any plant in the queue to see its light, history, and care notes.</p>
        </div>`;
      return;
    }

    root.innerHTML = `
      <div class="detail__hero">
        <div class="detail__avatar">${SVG[p.id]()}</div>
        <div>
          <h3 class="detail__name" id="detail-name">${p.name}</h3>
          <p class="detail__species">${p.species}</p>
          <span class="detail__loc">${SVG.pin()}<span>${p.location}</span></span>
        </div>
      </div>

      <div class="detail__grid">
        <div class="fact">
          <span class="fact__icon">${SVG.sun()}</span>
          <span>
            <span class="fact__label">Light</span>
            <span class="fact__value">${p.light}</span>
          </span>
        </div>
        <div class="fact">
          <span class="fact__icon">${SVG.drop()}</span>
          <span>
            <span class="fact__label">Today's task</span>
            <span class="fact__value">${p.task} · ${p.due}</span>
          </span>
        </div>
      </div>

      <div class="detail__history">
        <h3>Recent notes</h3>
        <ol class="timeline" role="list">
          ${p.history.map(h => `
            <li>
              <time>${h.date}</time>
              <span>${h.text}</span>
            </li>
          `).join('')}
        </ol>
      </div>

      <div class="detail__note">
        <span>${noteFor(p)}</span>
      </div>

      <div class="detail__actions">
        <button type="button" class="act act--water" data-detail-water>
          ${SVG.water()}<span>${p.state === 'done' ? 'Watered · undo' : 'Mark watered'}</span>
        </button>
        <button type="button" class="act act--snooze" data-detail-snooze>
          ${SVG.clock()}<span>${p.state === 'snoozed' ? 'Snoozed · undo' : 'Snooze a day'}</span>
        </button>
      </div>
    `;

    // Re-mark selected
    $$('#cards .card').forEach(c => {
      c.dataset.selected = String(c.dataset.id === state.selectedId);
    });
  }

  function noteFor(p) {
    const map = {
      fern: 'Ferns sulk when their soil goes fully bone-dry. A gentle shower in the sink resets her mood.',
      pothos: 'Orbit prefers a quarter-turn each visit so her stems don\u2019t lean toward the window.',
      cactus: 'Stick a finger in: if the top inch is dry, give a small drink. If not, leave her be.',
      calathea: 'Drama likes a soft mist and filtered light. Tap-water can crisp her edges; rainwater is dreamy.',
    };
    return map[p.id] || '';
  }

  /* ---------- Bindings ---------- */
  function bindCardEvents() {
    $$('#cards .card').forEach(card => {
      const id = card.dataset.id;
      const select = () => selectPlant(id);
      $('[data-select]', card).addEventListener('click', select);

      const w = $('[data-water]', card);
      const s = $('[data-snooze]', card);
      if (w) w.addEventListener('click', e => { e.stopPropagation(); doAction(id, 'water'); });
      if (s) s.addEventListener('click', e => { e.stopPropagation(); doAction(id, 'snooze'); });
    });
  }

  function bindGlobalEvents() {
    document.addEventListener('click', e => {
      const dw = e.target.closest('[data-detail-water]');
      const ds = e.target.closest('[data-detail-snooze]');
      if (dw) { dw.blur(); doAction(state.selectedId, 'water'); }
      if (ds) { ds.blur(); doAction(state.selectedId, 'snooze'); }
    });

    // Keyboard navigation
    document.addEventListener('keydown', e => {
      if (e.key === 'Escape') {
        const t = $('#toast');
        if (!t.hidden) hideToast();
      }
      if ((e.key === 'j' || e.key === 'ArrowDown') && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        moveSelection(1);
      }
      if ((e.key === 'k' || e.key === 'ArrowUp') && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        moveSelection(-1);
      }
    });

    // Greeting
    updateGreeting();

    // Toast undo button
    $('#toastUndo').addEventListener('click', undo);
  }

  function updateGreeting() {
    const h = new Date().getHours();
    let g = 'Good day';
    if (h < 5) g = 'Still up';
    else if (h < 12) g = 'Good morning';
    else if (h < 17) g = 'Good afternoon';
    else if (h < 21) g = 'Good evening';
    else g = 'Good night';
    const el = $('#greeting');
    if (el) el.textContent = `${g}.`;
  }

  function selectPlant(id) {
    state.selectedId = id;
    $$('#cards .card').forEach(c => {
      c.dataset.selected = String(c.dataset.id === id);
      $('[data-select]', c)?.setAttribute('aria-pressed', String(c.dataset.id === id));
    });
    renderDetail();

    // On mobile, scroll detail into view if needed
    if (window.matchMedia('(max-width: 859px)').matches) {
      const det = $('#detail');
      if (det && det.firstElementChild) {
        det.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }
  }

  function moveSelection(delta) {
    const cards = $$('#cards .card').map(c => c.dataset.id);
    if (!cards.length) return;
    const idx = cards.indexOf(state.selectedId);
    const next = cards[(idx + delta + cards.length) % cards.length];
    selectPlant(next);
  }

  /* ---------- Actions ---------- */
  function doAction(id, action) {
    const p = state.plants.find(x => x.id === id);
    if (!p) return;

    // Snapshot for undo
    const snapshot = {
      plantId: id,
      prevState: p.state,
      prevHistory: [...p.history],
      action,
    };

    if (action === 'water') {
      if (p.state === 'done') {
        // Already watered: undo via detail button (toggle off)
        snapshot.action = 'water-toggle-off';
        p.state = 'pending';
        p.history = p.history.filter(h => !(h.text === 'Watered today' && h.date === 'Today'));
      } else {
        p.state = 'done';
        const today = todayLabel();
        p.history = [{ date: today, text: 'Watered today' }, ...p.history].slice(0, 6);
      }
    } else if (action === 'snooze') {
      if (p.state === 'snoozed') {
        snapshot.action = 'snooze-toggle-off';
        p.state = 'pending';
      } else {
        p.state = 'snoozed';
      }
    }

    state.lastAction = snapshot;
    renderCards();
    renderDetail();

    // Visual pulse on the affected card
    const card = $(`#cards .card[data-id="${id}"]`);
    if (card && action === 'water' && snapshot.action === 'water') {
      card.classList.add('is-watered');
      setTimeout(() => card.classList.remove('is-watered'), 520);
    }

    showToast(p, action, snapshot.action);
  }

  function todayLabel() {
    const d = new Date();
    return d.toLocaleDateString('en-US', { month: 'short', day: '2-digit' });
  }

  /* ---------- Toast / Undo ---------- */
  let toastTimer = null;
  function showToast(plant, action, kind) {
    const t = $('#toast');
    const msg = $('#toastMsg');
    const ic = $('#toastIcon');
    t.hidden = false;

    let verb, iconSvg;
    if (kind === 'water') { verb = `Watered ${plant.name}`; iconSvg = SVG.water(); }
    else if (kind === 'snooze') { verb = `Snoozed ${plant.name} a day`; iconSvg = SVG.clock(); }
    else if (kind === 'water-toggle-off') { verb = `Reverted ${plant.name}`; iconSvg = SVG.water(); }
    else if (kind === 'snooze-toggle-off') { verb = `Brought ${plant.name} back`; iconSvg = SVG.clock(); }

    ic.innerHTML = iconSvg;
    msg.textContent = verb;

    requestAnimationFrame(() => t.classList.add('is-on'));

    if (toastTimer) clearTimeout(toastTimer);
    toastTimer = setTimeout(hideToast, state.undoWindow);
  }

  function hideToast() {
    const t = $('#toast');
    if (!t || t.hidden) return;
    t.classList.remove('is-on');
    setTimeout(() => { t.hidden = true; }, 280);
    state.lastAction = null;
    if (toastTimer) { clearTimeout(toastTimer); toastTimer = null; }
  }

  function undo() {
    const snap = state.lastAction;
    if (!snap) return;
    const p = state.plants.find(x => x.id === snap.plantId);
    if (!p) return;
    p.state = snap.prevState;
    p.history = [...snap.prevHistory];
    state.lastAction = null;
    renderCards();
    renderDetail();
    hideToast();
    announce(`Restored ${p.name} to its earlier state.`);
  }

  /* ---------- Live region ---------- */
  let announceTimer = null;
  function announce(text) {
    const list = $('#cards');
    if (!list) return;
    // Briefly add a live message inside the list region
    list.setAttribute('aria-live', 'polite');
    // Append a hidden message
    const el = document.createElement('span');
    el.setAttribute('role', 'status');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    el.textContent = text;
    list.appendChild(el);
    clearTimeout(announceTimer);
    announceTimer = setTimeout(() => el.remove(), 1500);
  }

  /* ---------- Init ---------- */
  function init() {
    pickDefault();
    renderCards();
    renderDetail();
    bindGlobalEvents();
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();

mcode-m3/13-frontend-playful/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <meta name="theme-color" content="#F1E6CF">
  <meta name="color-scheme" content="light">
  <title>Moss · a gentle plant companion</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <a class="skip-link" href="#main">Skip to today's care</a>

  <main id="main" class="page" aria-labelledby="greeting">

    <!-- =================== HEADER =================== -->
    <header class="topbar">
      <div class="brand">
        <svg class="brand__mark" viewBox="0 0 36 36" aria-hidden="true">
          <path d="M5 26c0-9 7-15 13-15s13 6 13 15" fill="none" stroke="#3E5A2E" stroke-width="2.2" stroke-linecap="round"/>
          <path d="M18 11c0 5-2 9-6 12" fill="none" stroke="#3E5A2E" stroke-width="2.2" stroke-linecap="round"/>
          <circle cx="13" cy="25" r="1.4" fill="#3E5A2E"/>
          <circle cx="23" cy="25" r="1.4" fill="#3E5A2E"/>
          <circle cx="18" cy="29" r="1.4" fill="#3E5A2E"/>
        </svg>
        <span class="brand__name">Moss</span>
        <span class="brand__dot" aria-hidden="true">·</span>
        <span class="brand__tag">plant companion</span>
      </div>

      <div class="topbar__meta">
        <p class="hello" id="greeting">Good afternoon.</p>
        <p class="date"><time datetime="2026-10-04">Sunday, October 4</time> · <span class="loc">Your windowsill</span></p>
      </div>
    </header>

    <!-- =================== RHYTHM =================== -->
    <section class="rhythm" aria-labelledby="rhythm-title">
      <div class="rhythm__head">
        <h2 id="rhythm-title" class="rhythm__title">This week's rhythm</h2>
        <p class="rhythm__sub">How busy you've been with your green friends.</p>
      </div>

      <ol class="bars" role="list" aria-label="Care events per day">
        <li class="bar bar--mon"><span class="bar__day">M</span><span class="bar__pip" style="--h: 22%"><span class="bar__count">1</span></span></li>
        <li class="bar bar--tue"><span class="bar__day">T</span><span class="bar__pip" style="--h: 66%"><span class="bar__count">3</span></span></li>
        <li class="bar bar--wed"><span class="bar__day">W</span><span class="bar__pip" style="--h: 44%"><span class="bar__count">2</span></span></li>
        <li class="bar bar--thu"><span class="bar__day">T</span><span class="bar__pip" style="--h: 88%"><span class="bar__count">4</span></span></li>
        <li class="bar bar--fri"><span class="bar__day">F</span><span class="bar__pip" style="--h: 44%"><span class="bar__count">2</span></span></li>
        <li class="bar bar--sat"><span class="bar__day">S</span><span class="bar__pip" style="--h: 22%"><span class="bar__count">1</span></span></li>
        <li class="bar bar--sun bar--today"><span class="bar__day">S</span><span class="bar__pip" style="--h: 66%"><span class="bar__count">3</span></span></li>
      </ol>

      <p class="rhythm__caption">A lighter week than last. Your pothos is the steady presence.</p>
    </section>

    <!-- =================== QUEUE + DETAIL =================== -->
    <div class="split">

      <!-- QUEUE -->
      <section class="queue" aria-labelledby="queue-title">
        <div class="queue__head">
          <h2 id="queue-title" class="queue__title">Today's care</h2>
          <p class="queue__count"><span data-done>0</span> of <span data-total>3</span> tended</p>
        </div>

        <ul class="cards" role="list" id="cards" aria-live="polite"></ul>

        <div class="alldone" id="alldone" hidden>
          <svg viewBox="0 0 120 80" class="alldone__art" aria-hidden="true">
            <!-- Sun -->
            <circle cx="92" cy="22" r="11" fill="#E8B547"/>
            <g stroke="#E8B547" stroke-width="2.4" stroke-linecap="round">
              <line x1="92" y1="4"  x2="92" y2="8"/>
              <line x1="92" y1="36" x2="92" y2="40"/>
              <line x1="74" y1="22" x2="78" y2="22"/>
              <line x1="106" y1="22" x2="110" y2="22"/>
              <line x1="79" y1="9"  x2="82" y2="12"/>
              <line x1="102" y1="32" x2="105" y2="35"/>
            </g>
            <!-- Hill -->
            <path d="M0 70 Q 30 50 60 60 T 120 56 L 120 80 L 0 80 Z" fill="#C7B58A"/>
            <!-- Tiny plants -->
            <g>
              <path d="M22 64 q -3 -6 0 -12 q 3 6 0 12 z" fill="#6B7F4A"/>
              <line x1="22" y1="64" x2="22" y2="68" stroke="#3E5A2E" stroke-width="1.6"/>
              <path d="M44 66 q -3 -5 0 -10 q 3 5 0 10 z" fill="#7A8E58"/>
              <line x1="44" y1="66" x2="44" y2="70" stroke="#3E5A2E" stroke-width="1.6"/>
            </g>
          </svg>
          <h3 class="alldone__title">A quiet day, well earned.</h3>
          <p class="alldone__sub">Every plant on your list has been seen to. Drama's misting is waiting for tomorrow morning.</p>
        </div>
      </section>

      <!-- DETAIL -->
      <section class="detail" aria-labelledby="detail-name" id="detail">
        <!-- filled by app.js -->
      </section>

    </div>

    <!-- =================== FOOTER =================== -->
    <footer class="foot">
      <p class="foot__line">Moss listens to leaves, not loudness. Tap any plant to see what it likes.</p>
      <p class="foot__small">Local-only build · no network, no clouds, just soil and water.</p>
    </footer>
  </main>

  <!-- =================== TOAST =================== -->
  <div class="toast" id="toast" role="status" aria-live="polite" hidden>
    <span class="toast__icon" id="toastIcon" aria-hidden="true"></span>
    <span class="toast__msg" id="toastMsg"></span>
    <button class="toast__undo" id="toastUndo" type="button">Undo</button>
  </div>

  <!-- =================== TEMPLATES =================== -->
  <template id="card-tpl">
    <li class="card" role="listitem">
      <button class="card__btn" type="button" data-select>
        <span class="card__avatar" data-avatar aria-hidden="true"></span>
        <span class="card__body">
          <span class="card__name" data-name></span>
          <span class="card__species" data-species></span>
          <span class="card__loc"><span data-location></span>  ·  <span data-task></span></span>
        </span>
        <span class="card__due" data-due></span>
      </button>
      <div class="card__actions" data-actions>
        <button type="button" class="act act--water" data-water>
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3 C 8 8 6 12 6 15 a6 6 0 0 0 12 0 c 0 -3 -2 -7 -6 -12 z" fill="currentColor"/></svg>
          <span>Water</span>
        </button>
        <button type="button" class="act act--snooze" data-snooze>
          <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="13" r="8" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 8v5l3 2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M9 3h6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
          <span>Snooze</span>
        </button>
        <span class="card__status" data-status></span>
      </div>
    </li>
  </template>

  <script src="app.js" defer></script>
</body>
</html>

mcode-m3/13-frontend-playful/PLANTS.json

{
  "plants": [
    {"id":"fern","name":"Frida","species":"Boston fern","location":"Bathroom","task":"Water","due":"2 days overdue","urgency":4,"light":"Low, indirect","history":["Sep 19 · Misted","Sep 16 · Watered","Sep 12 · New frond"]},
    {"id":"pothos","name":"Orbit","species":"Golden pothos","location":"Bookshelf","task":"Rotate","due":"Today","urgency":2,"light":"Medium, indirect","history":["Sep 20 · Watered","Sep 14 · Rotated","Sep 10 · Wiped leaves"]},
    {"id":"cactus","name":"Dot","species":"Bunny ears cactus","location":"South window","task":"Check soil","due":"Today","urgency":1,"light":"Bright, direct","history":["Sep 08 · Watered","Sep 01 · New pad noted","Aug 22 · Rotated"]},
    {"id":"calathea","name":"Drama","species":"Calathea orbifolia","location":"Bedroom","task":"Mist","due":"Tomorrow","urgency":0,"light":"Medium, filtered","history":["Sep 21 · Misted","Sep 18 · Watered","Sep 15 · Brown edge noted"]}
  ],
  "week": [1,3,2,4,2,1,3]
}

mcode-m3/13-frontend-playful/styles.css

/* =========================================================
   Moss · plant companion
   Warm tactile palette · mobile-first · accessible
   ========================================================= */

:root {
  /* Palette — warm, tactile, optimistic */
  --bg: #F1E6CF;
  --bg-deep: #E8DAB9;
  --paper: #FBF3DF;
  --paper-2: #F6EBCF;
  --ink: #2A2418;
  --ink-soft: #5C513F;
  --ink-mute: #8A7C66;

  /* Greens */
  --moss: #6B7F4A;
  --moss-deep: #3E5A2E;
  --moss-soft: #C2CC9D;
  --sage: #97A577;

  /* Warm accents */
  --clay: #C97B5A;
  --clay-deep: #9C5436;
  --sun: #E8B547;
  --butter: #F4D88A;
  --rose: #D98477;
  --sky: #8FA0AB;
  --berry: #7E4F66;

  /* Status */
  --overdue: var(--clay-deep);
  --today: #B8842C;
  --tomorrow: var(--sage);
  --done: var(--moss-deep);

  /* Shape */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pebble: 28px 22px 30px 24px / 22px 30px 22px 28px;

  /* Type */
  --serif: "Iowan Old Style", "Georgia", "Palatino Linotype", "Book Antiqua", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Motion */
  --t-fast: 140ms;
  --t-med: 260ms;
  --t-slow: 480ms;
  --ease: cubic-bezier(.2,.7,.3,1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Paper-grain backdrop built from inline SVG noise */
body {
  background-image:
    radial-gradient(circle at 18% 22%, rgba(201, 123, 90, 0.08), transparent 38%),
    radial-gradient(circle at 82% 8%, rgba(232, 181, 71, 0.10), transparent 36%),
    radial-gradient(circle at 60% 92%, rgba(107, 127, 74, 0.10), transparent 42%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.12  0 0 0 0 0.06  0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-attachment: fixed;
}

::selection { background: var(--moss-soft); color: var(--ink); }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

a { color: var(--moss-deep); }

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 100;
  background: var(--moss-deep);
  color: var(--paper);
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* =================== PAGE LAYOUT =================== */
.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 18px 80px;
}

/* =================== TOPBAR =================== */
.topbar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 6px 4px 18px;
  border-bottom: 1.5px dashed rgba(60, 50, 30, 0.18);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 22px;
  color: var(--moss-deep);
}

.brand__mark {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 1px 0 rgba(60,50,30,0.1));
}

.brand__name { font-size: 1.1em; }

.brand__dot {
  color: var(--ink-mute);
  font-size: 1em;
  margin: 0 -2px;
}

.brand__tag {
  font-family: var(--sans);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: var(--ink-mute);
}

.topbar__meta { padding: 0 4px; }
.hello {
  margin: 6px 0 2px;
  font-family: var(--serif);
  font-size: clamp(28px, 7.5vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-weight: 600;
}
.hello::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 6px;
  vertical-align: 0.18em;
  background: var(--clay);
  border-radius: 50%;
  box-shadow: -16px 4px 0 var(--sun), -32px -2px 0 var(--moss-soft);
}
.date {
  margin: 4px 0 0;
  font-size: 14.5px;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
.loc { color: var(--ink-mute); font-style: italic; }

/* =================== RHYTHM =================== */
.rhythm {
  margin: 22px 0 14px;
  padding: 18px 18px 14px;
  background: var(--paper);
  border-radius: var(--r-xl);
  box-shadow:
    0 1px 0 rgba(60,50,30,0.04),
    0 12px 28px -22px rgba(60,50,30,0.4);
  position: relative;
  overflow: hidden;
}
.rhythm::before {
  content: "";
  position: absolute;
  top: -24px; right: -30px;
  width: 110px; height: 110px;
  background: radial-gradient(circle at center, rgba(232, 181, 71, 0.28), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.rhythm__head { margin-bottom: 10px; }
.rhythm__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--ink);
}
.rhythm__sub {
  margin: 2px 0 0;
  font-size: 13.5px;
  color: var(--ink-mute);
}

.bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin: 16px 0 6px;
  padding: 0;
  list-style: none;
}

.bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.bar__day {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
}

.bar__pip {
  --h: 50%;
  position: relative;
  width: 100%;
  height: 88px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.bar__pip::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: var(--h);
  background:
    linear-gradient(to top, var(--moss) 0%, var(--moss-soft) 100%);
  border-radius: 14px 14px 22px 22px / 12px 12px 30px 30px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.06);
  transition: height var(--t-slow) var(--ease);
}

.bar__pip::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  top: 8px;
  bottom: 6px;
  background-image:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,0.35), transparent 40%);
  pointer-events: none;
  border-radius: 14px;
}

.bar__count {
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 6px;
  background: var(--paper);
  border: 1.4px solid var(--moss);
  border-radius: 999px;
  padding: 2px 7px;
  line-height: 1;
}

/* Today gets a sun */
.bar--today .bar__pip::before {
  background: linear-gradient(to top, var(--clay) 0%, var(--butter) 100%);
}
.bar--today .bar__count {
  border-color: var(--clay-deep);
  background: var(--butter);
}
.bar--today .bar__day {
  color: var(--clay-deep);
}

.rhythm__caption {
  margin: 8px 4px 0;
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
}

/* =================== SPLIT (mobile single, desktop 2-col) =================== */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 18px;
}

/* =================== QUEUE =================== */
.queue__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 10px;
}
.queue__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.queue__count {
  margin: 0;
  font-size: 13px;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

.cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* ---------- Card ---------- */
.card {
  position: relative;
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: 14px 14px 12px;
  box-shadow:
    0 1px 0 rgba(60,50,30,0.04),
    0 10px 22px -16px rgba(60,50,30,0.35);
  transition: transform var(--t-med) var(--ease), background var(--t-med) var(--ease);
}

.card::after {
  content: "";
  position: absolute;
  inset: auto -2px -2px auto;
  width: 22px; height: 22px;
  background: var(--moss-soft);
  border-radius: 50% 0 var(--r-lg) 50%;
  opacity: 0.7;
  pointer-events: none;
}

.card[data-state="done"] { background: linear-gradient(180deg, #E9E6CC 0%, var(--paper) 100%); }
.card[data-state="done"]::after { background: var(--moss); opacity: 0.85; }
.card[data-state="snoozed"] { background: linear-gradient(180deg, #ECDDC4 0%, var(--paper) 100%); }
.card[data-state="snoozed"]::after { background: var(--sky); opacity: 0.85; }

.card[data-selected="true"] {
  outline: 2px solid var(--moss-deep);
  outline-offset: 3px;
}

.card__btn {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 4px 4px 4px 4px;
  text-align: left;
  border-radius: var(--r-md);
}
.card__btn:focus-visible {
  outline: 2.5px dashed var(--moss-deep);
  outline-offset: 3px;
}

.card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1.5px solid rgba(60,50,30,0.08);
  position: relative;
}
.card__avatar svg { width: 100%; height: 100%; display: block; }

.card__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.card__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.card__species {
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.2;
}
.card__loc {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--ink-mute);
}

.card__due {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 13px;
  text-transform: lowercase;
  letter-spacing: 0.01em;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(60,50,30,0.06);
  color: var(--ink-soft);
  white-space: nowrap;
  border: 1.4px solid transparent;
}
.card[data-urgency="4"] .card__due {
  background: rgba(156, 84, 54, 0.14);
  color: var(--overdue);
  border-color: rgba(156, 84, 54, 0.3);
}
.card[data-urgency="2"] .card__due,
.card[data-urgency="1"] .card__due {
  background: rgba(184, 132, 44, 0.16);
  color: var(--today);
  border-color: rgba(184, 132, 44, 0.32);
}
.card[data-urgency="0"] .card__due {
  background: rgba(151, 165, 119, 0.18);
  color: #54633B;
  border-color: rgba(151, 165, 119, 0.42);
}

/* Card actions */
.card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1.4px dashed rgba(60,50,30,0.14);
}

.act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  border: 1.5px solid transparent;
}
.act svg { width: 16px; height: 16px; }

.act--water {
  background: var(--moss-deep);
  color: var(--paper);
  border-color: var(--moss-deep);
}
.act--water:hover { background: #4F6E3B; }
.act--water:focus-visible { outline: 2.5px dashed var(--ink); outline-offset: 3px; }

.act--snooze {
  background: transparent;
  color: var(--ink-soft);
  border-color: rgba(60,50,30,0.22);
}
.act--snooze:hover { background: rgba(60,50,30,0.06); color: var(--ink); }
.act--snooze:focus-visible { outline: 2.5px dashed var(--ink); outline-offset: 3px; }

.act:active { transform: scale(0.96); }

.card__status {
  margin-left: auto;
  font-size: 13px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--moss-deep);
  display: none;
}
.card[data-state="done"] .card__status { display: inline; }
.card[data-state="snoozed"] .card__status { display: inline; color: var(--sky); }

/* Water/snooze pulse on action */
@keyframes pulse-good {
  0%   { box-shadow: 0 0 0 0 rgba(62, 90, 46, 0.4); }
  100% { box-shadow: 0 0 0 16px rgba(62, 90, 46, 0); }
}
.card.is-watered { animation: pulse-good var(--t-slow) var(--ease); }

/* ---------- All-done ---------- */
.alldone {
  text-align: center;
  padding: 24px 18px;
  background: var(--paper);
  border-radius: var(--r-xl);
  box-shadow:
    0 1px 0 rgba(60,50,30,0.04),
    0 12px 28px -22px rgba(60,50,30,0.4);
  margin-top: 8px;
}
.alldone[hidden] { display: none; }
.alldone__art {
  width: 160px;
  height: auto;
  margin: 0 auto 6px;
  display: block;
}
.alldone__title {
  margin: 6px 0 4px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.alldone__sub {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
  max-width: 36ch;
  margin-inline: auto;
}

/* =================== DETAIL PANEL =================== */
.detail {
  background: var(--paper);
  border-radius: var(--r-xl);
  padding: 22px;
  box-shadow:
    0 1px 0 rgba(60,50,30,0.04),
    0 14px 32px -22px rgba(60,50,30,0.4);
  position: sticky;
  top: 16px;
  align-self: start;
}

.detail__hero {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1.5px dashed rgba(60,50,30,0.18);
}

.detail__avatar {
  width: 110px;
  height: 110px;
  background: var(--paper-2);
  border-radius: var(--r-lg);
  border: 1.5px solid rgba(60,50,30,0.08);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.detail__avatar svg { width: 100%; height: 100%; display: block; }

.detail__name {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.detail__species {
  margin: 4px 0 8px;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 15px;
}
.detail__loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-mute);
  padding: 4px 10px;
  background: rgba(60,50,30,0.06);
  border-radius: 999px;
}
.detail__loc svg { width: 13px; height: 13px; }

.detail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 18px;
}

.fact {
  background: var(--paper-2);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: center;
}
.fact__icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--moss-deep);
}
.fact__icon svg { width: 16px; height: 16px; }
.fact__label {
  display: block;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  font-weight: 600;
}
.fact__value {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin-top: 1px;
}

.detail__history {
  margin-top: 20px;
}
.detail__history h3 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 9px; top: 4px; bottom: 4px;
  width: 2px;
  background: linear-gradient(to bottom, var(--moss) 0%, transparent 100%);
  border-radius: 2px;
}
.timeline li {
  position: relative;
  padding: 6px 0 6px 28px;
  font-size: 14px;
  color: var(--ink-soft);
}
.timeline li::before {
  content: "";
  position: absolute;
  left: 4px; top: 11px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--moss);
}
.timeline li:first-child::before { background: var(--clay); border-color: var(--clay-deep); }
.timeline time {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-mute);
  display: inline-block;
  min-width: 6em;
  margin-right: 8px;
}

.detail__actions {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.detail__note {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--butter);
  border-radius: var(--r-md);
  font-size: 13.5px;
  color: #6B4F1A;
  font-style: italic;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.detail__note::before {
  content: "";
  flex: 0 0 auto;
  width: 10px; height: 10px;
  background: var(--clay-deep);
  border-radius: 50%;
  margin-top: 6px;
}

/* =================== FOOT =================== */
.foot {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1.5px dashed rgba(60,50,30,0.18);
  text-align: center;
}
.foot__line {
  margin: 0;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-soft);
  font-style: italic;
}
.foot__small {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}

/* =================== TOAST =================== */
.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(20px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px 10px 14px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-size: 14px;
  box-shadow: 0 18px 30px -10px rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
  z-index: 60;
  max-width: calc(100vw - 36px);
}
.toast[hidden] { display: none; }
.toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.toast__icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }
.toast__icon svg { width: 100%; height: 100%; }
.toast__msg { font-weight: 500; }
.toast__undo {
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.toast__undo:hover { background: var(--butter); }
.toast__undo:focus-visible { outline: 2px solid var(--butter); outline-offset: 2px; }

/* =================== RESPONSIVE — DESKTOP =================== */
@media (min-width: 860px) {
  .page { padding: 36px 32px 60px; }

  .topbar {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 36px;
  }
  .topbar__meta { text-align: right; }
  .hello { text-align: right; }

  .rhythm { padding: 22px 24px; }

  .split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.45fr);
    gap: 24px;
    margin-top: 26px;
    align-items: start;
  }

  .queue__title { font-size: 26px; }

  /* On desktop, hide in-card actions; show via detail panel */
  .card__actions { display: none; }
  .card { padding: 16px 16px 14px; }

  .detail { padding: 26px; }
  .detail__hero { grid-template-columns: 130px 1fr; }
  .detail__avatar { width: 130px; height: 130px; }
  .detail__name { font-size: 36px; }

  .detail__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1080px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .detail__name { font-size: 40px; }
}

/* =================== REDUCED MOTION =================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hello::after { animation: none !important; }
}

/* =================== High contrast =================== */
@media (prefers-contrast: more) {
  :root {
    --ink: #1B1610;
    --ink-soft: #2A2418;
  }
  .card, .detail, .rhythm, .alldone { border: 1px solid rgba(0,0,0,0.4); }
}

mimo/13-frontend-playful/RESPONSE.md

mimo/13-frontend-playful/TASK.md

mimo/13-frontend-playful/app.js

/* Moss — care queue logic (no network, data inlined from PLANTS.json) */

const PLANTS = [
  {
    id: "fern",
    name: "Frida",
    species: "Boston fern",
    location: "Bathroom",
    task: "Water",
    due: "2 days overdue",
    urgency: 4,
    light: "Low, indirect",
    history: ["Sep 19 · Misted", "Sep 16 · Watered", "Sep 12 · New frond"],
  },
  {
    id: "pothos",
    name: "Orbit",
    species: "Golden pothos",
    location: "Bookshelf",
    task: "Rotate",
    due: "Today",
    urgency: 2,
    light: "Medium, indirect",
    history: ["Sep 20 · Watered", "Sep 14 · Rotated", "Sep 10 · Wiped leaves"],
  },
  {
    id: "cactus",
    name: "Dot",
    species: "Bunny ears cactus",
    location: "South window",
    task: "Check soil",
    due: "Today",
    urgency: 1,
    light: "Bright, direct",
    history: ["Sep 08 · Watered", "Sep 01 · New pad noted", "Aug 22 · Rotated"],
  },
  {
    id: "calathea",
    name: "Drama",
    species: "Calathea orbifolia",
    location: "Bedroom",
    task: "Mist",
    due: "Tomorrow",
    urgency: 0,
    light: "Medium, filtered",
    history: ["Sep 21 · Misted", "Sep 18 · Watered", "Sep 15 · Brown edge noted"],
  },
];

const WEEK = [1, 3, 2, 4, 2, 1, 3];
const WEEK_DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
const WATER_PIPS = { 0: 1, 1: 2, 2: 3, 3: 3, 4: 4 };

const state = {
  /** id -> "queued" | "done" | "snoozed" */
  status: Object.fromEntries(PLANTS.map((p) => [p.id, "queued"])),
  /** id -> history lines including new entries */
  histories: Object.fromEntries(PLANTS.map((p) => [p.id, [...p.history]])),
  expanded: null,
  undo: null,
  undoTimer: null,
};

const els = {
  list: document.getElementById("plant-list"),
  allDone: document.getElementById("all-done"),
  doneTitle: document.getElementById("done-title"),
  doneCopy: document.getElementById("done-copy"),
  doneCount: document.getElementById("done-count"),
  queueNote: document.getElementById("queue-note"),
  weekChart: document.getElementById("week-chart"),
  weekLegend: document.getElementById("week-legend"),
  pulseList: document.getElementById("pulse-list"),
  toast: document.getElementById("undo-toast"),
  toastText: document.getElementById("undo-text"),
  undoBtn: document.getElementById("undo-btn"),
  resetBtn: document.getElementById("reset-day"),
};

const PORTRAITS = {
  fern: `
    <svg class="plant-portrait" viewBox="0 0 64 64" aria-hidden="true">
      <path class="portrait-bg" d="M8 34c0-14 11-24 24-24s24 10 24 24-10 22-24 22S8 48 8 34z"/>
      <path class="portrait-line" d="M32 50c2-14 4-22 4-22"/>
      <path class="portrait-fill-a" d="M34 30c10-2 16-12 12-20-9 1-15 9-12 20z"/>
      <path class="portrait-fill-b" d="M32 36c-10-5-14-16-9-24 10 4 14 14 9 24z"/>
      <path class="portrait-fill-a" d="M30 28c-8-6-8-16-2-21 7 5 8 14 2 21z"/>
      <circle class="portrait-accent" cx="44" cy="14" r="2.4"/>
    </svg>`,
  pothos: `
    <svg class="plant-portrait" viewBox="0 0 64 64" aria-hidden="true">
      <path class="portrait-bg" d="M10 30c2-13 13-22 25-22 13 0 21 9 21 21 0 14-10 25-24 25S8 44 10 30z"/>
      <path class="portrait-line" d="M20 20c8 6 14 16 12 30"/>
      <path class="portrait-fill-a" d="M22 22c-2-7 3-13 9-13 1 7-3 13-9 13z"/>
      <path class="portrait-fill-b" d="M32 34c-8 1-13 7-11 13 7 0 12-6 11-13z"/>
      <path class="portrait-fill-a" d="M34 48c-1 7 4 12 10 11 0-7-4-12-10-11z"/>
      <path class="portrait-fill-b" d="M28 30c7-3 10-10 7-15-6 2-10 9-7 15z"/>
      <circle class="portrait-accent" cx="46" cy="18" r="2.4"/>
    </svg>`,
  cactus: `
    <svg class="plant-portrait" viewBox="0 0 64 64" aria-hidden="true">
      <path class="portrait-bg" d="M12 32c0-12 9-22 22-22s20 9 20 21-8 23-21 23-21-9-21-22z"/>
      <ellipse class="portrait-fill-a" cx="32" cy="38" rx="8" ry="14"/>
      <ellipse class="portrait-fill-b" cx="22" cy="28" rx="6" ry="10" transform="rotate(-18 22 28)"/>
      <ellipse class="portrait-fill-b" cx="42" cy="28" rx="6" ry="10" transform="rotate(18 42 28)"/>
      <circle class="portrait-accent" cx="32" cy="20" r="2.2"/>
      <circle class="portrait-line" cx="22" cy="26" r="1.1" fill="none" stroke-width="1.4"/>
      <circle class="portrait-line" cx="41" cy="25" r="1.1" fill="none" stroke-width="1.4"/>
      <circle class="portrait-line" cx="34" cy="36" r="1.1" fill="none" stroke-width="1.4"/>
    </svg>`,
  calathea: `
    <svg class="plant-portrait" viewBox="0 0 64 64" aria-hidden="true">
      <path class="portrait-bg" d="M8 36c0-15 11-26 25-26s23 11 23 25-10 23-24 23S8 50 8 36z"/>
      <ellipse class="portrait-fill-a" cx="26" cy="32" rx="10" ry="16" transform="rotate(-16 26 32)"/>
      <ellipse class="portrait-fill-b" cx="40" cy="30" rx="9" ry="15" transform="rotate(14 40 30)"/>
      <path class="portrait-line" d="M26 46c1-8 2-12 2-12M40 43c0-7 1-11 1-11" stroke-width="1.6"/>
      <path class="portrait-line" d="M22 24c2 4 2 8 1 12M28 22c2 4 2 8 1 12" stroke-width="1.3"/>
      <path class="portrait-line" d="M37 22c1 3 1 7 0 10M43 24c1 3 1 6 0 9" stroke-width="1.3"/>
      <circle class="portrait-accent" cx="50" cy="16" r="2.3"/>
    </svg>`,
};

function badgeClass(urgency) {
  if (urgency >= 3) return "badge-overdue";
  if (urgency >= 1) return "badge-today";
  return "badge-tomorrow";
}

function badgeLabel(plant) {
  if (plant.urgency >= 3) return "Overdue";
  if (plant.urgency >= 1) return "Today";
  return "Tomorrow";
}

function careVerb(task) {
  const map = {
    Water: "Watered",
    Rotate: "Rotated",
    Mist: "Misted",
    "Check soil": "Checked soil",
  };
  return map[task] || "Tended";
}

function actionNote(task) {
  const map = {
    Water: "Watered",
    Rotate: "Rotated",
    Mist: "Misted",
    "Check soil": "Soil checked",
  };
  return map[task] || "Tended";
}

function waterPips(urgency) {
  const level = WATER_PIPS[urgency] ?? 2;
  let html = '<div class="water-meter" aria-label="Recent watering level ' + level + ' of 4">';
  for (let i = 1; i <= 4; i++) {
    html += `<span class="water-pip${i <= level ? " is-on" : ""}"></span>`;
  }
  return html + "</div>";
}

function plantCard(plant) {
  const status = state.status[plant.id];
  const expanded = state.expanded === plant.id;
  const history = state.histories[plant.id]
    .map((h) => `<li>${escapeHtml(h)}</li>`)
    .join("");

  const actions =
    status === "queued"
      ? `
        <button type="button" class="btn btn-primary" data-action="watered" data-id="${plant.id}">
          Watered
        </button>
        <button type="button" class="btn btn-secondary" data-action="snooze" data-id="${plant.id}">
          Snooze
        </button>`
      : `
        <span class="btn btn-done-mark" aria-hidden="true">${
          status === "done" ? "Tended" : "Snoozed"
        }</span>
        <button type="button" class="btn btn-secondary" data-action="undo-inline" data-id="${plant.id}">
          Undo
        </button>`;

  return `
  <li>
    <article class="plant${status !== "queued" ? " is-done" : ""}" data-id="${plant.id}" data-urgency="${
      status === "queued" ? plant.urgency : 0
    }">
      <button
        type="button"
        class="plant-head"
        data-action="toggle"
        data-id="${plant.id}"
        aria-expanded="${expanded}"
        aria-controls="detail-${plant.id}"
      >
        ${PORTRAITS[plant.id] || ""}
        <div class="plant-meta">
          <h3 class="plant-name">${escapeHtml(plant.name)}
            <span class="plant-species">${escapeHtml(plant.species)}</span>
          </h3>
          <p class="plant-taskline">${escapeHtml(plant.task)} · ${escapeHtml(plant.location)}</p>
          <span class="plant-badge-slot badge ${badgeClass(
            status === "queued" ? plant.urgency : 0
          )}">${
            status === "queued"
              ? badgeLabel(plant) + " · " + escapeHtml(plant.due)
              : status === "done"
                ? "Tended just now"
                : "Snoozed to tomorrow"
          }</span>
        </div>
        <span class="chev" aria-hidden="true"></span>
      </button>
      <div class="plant-actions">${actions}</div>
      <div class="plant-detail" id="detail-${plant.id}"${expanded ? "" : " hidden"}>
        <div class="detail-grid">
          <div class="detail-item">
            <span class="detail-label">Light</span>
            <span class="detail-value">${escapeHtml(plant.light)}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">Water rhythm</span>
            <span class="detail-value">${waterPips(plant.urgency)}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">Observation history</span>
            <h4 class="detail-history-title">Notes</h4>
            <ul class="history-list">${history}</ul>
          </div>
        </div>
      </div>
    </article>
  </li>`;
}

function escapeHtml(str) {
  return String(str)
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;");
}

function counts() {
  const values = Object.values(state.status);
  return {
    queued: values.filter((s) => s === "queued").length,
    done: values.filter((s) => s === "done").length,
    snoozed: values.filter((s) => s === "snoozed").length,
  };
}

function renderWeek() {
  const max = Math.max(...WEEK);
  els.weekChart.innerHTML = WEEK.map((level, i) => {
    const h = 18 + (level / max) * 72;
    return `
      <div class="week-bar" data-level="${level}" title="${WEEK_DAYS[i]}: care level ${level} of ${max}">
        <div class="week-bar-fill" style="height:${h}%"></div>
      </div>`;
  }).join("");

  els.weekLegend.innerHTML = WEEK.map(
    (level, i) => `<li><strong>${WEEK_DAYS[i][0]}</strong>${level}</li>`
  ).join("");

  els.weekChart.setAttribute(
    "aria-label",
    `Weekly care load: ${WEEK.map((v, i) => `${WEEK_DAYS[i]} ${v}`).join(", ")}. Scale gentle to busy.`
  );
}

function renderPulse() {
  const c = counts();
  const overdueLeft = PLANTS.filter(
    (p) => state.status[p.id] === "queued" && p.urgency >= 3
  ).length;

  els.pulseList.innerHTML = `
    <li data-tone="overdue"><span>Overdue waiting</span><span class="pulse-count">${overdueLeft}</span></li>
    <li><span>In queue</span><span class="pulse-count">${c.queued}</span></li>
    <li data-tone="done"><span>Tended</span><span class="pulse-count">${c.done}</span></li>
    <li data-tone="snoozed"><span>Snoozed</span><span class="pulse-count">${c.snoozed}</span></li>
  `;
}

function renderAllDone() {
  const c = counts();
  const empty = c.queued === 0;
  els.allDone.hidden = !empty;
  els.list.hidden = empty;

  if (!empty) {
    els.doneCount.textContent = String(c.done);
    els.queueNote.textContent =
      c.done + c.snoozed > 0
        ? "Nice. Overdue first — the rest can wait a breath."
        : "Overdue first — the rest can wait a breath.";
    return;
  }

  els.doneCount.textContent = String(c.done);

  if (c.snoozed === 0) {
    els.doneTitle.textContent = "All clear";
    els.doneCopy.textContent =
      "Every plant is tended. Frida can uncurl, Orbit can turn toward the light, Dot can ignore you majestically.";
    els.queueNote.textContent = "Queue empty. Well done.";
  } else if (c.done === 0) {
    els.doneTitle.textContent = "Queue postponed";
    els.doneCopy.textContent = `Everything snoozed to tomorrow (${c.snoozed}). The plants will keep. Start a fresh day when you are ready.`;
    els.queueNote.textContent = "Nothing due right now.";
  } else {
    els.doneTitle.textContent = "Today is wrapped";
    els.doneCopy.textContent = `${c.done} tended, ${c.snoozed} snoozed to tomorrow. A tidy little queue.`;
    els.queueNote.textContent = "Today’s care is complete.";
  }
}

function render() {
  // Overdue (highest urgency) first, then remaining by urgency desc
  const ordered = [...PLANTS].sort((a, b) => {
    const sa = state.status[a.id];
    const sb = state.status[b.id];
    if (sa !== sb) {
      const rank = { queued: 0, snoozed: 1, done: 2 };
      return rank[sa] - rank[sb];
    }
    return b.urgency - a.urgency;
  });

  els.list.innerHTML = ordered.map(plantCard).join("");
  renderWeek();
  renderPulse();
  renderAllDone();
}

function showToast(message, undoFn) {
  clearTimeout(state.undoTimer);
  state.undo = undoFn;
  els.toastText.textContent = message;
  els.toast.hidden = false;
  state.undoTimer = setTimeout(hideToast, 6500);
}

function hideToast() {
  clearTimeout(state.undoTimer);
  state.undo = null;
  els.toast.hidden = true;
}

function applyAction(id, kind) {
  const plant = PLANTS.find((p) => p.id === id);
  if (!plant || state.status[id] !== "queued") return;

  const prevStatus = state.status[id];
  const prevHistory = [...state.histories[id]];

  if (kind === "watered") {
    state.status[id] = "done";
    state.histories[id] = [`Today · ${actionNote(plant.task)}`, ...state.histories[id]];
  } else {
    state.status[id] = "snoozed";
    state.histories[id] = [`Today · Snoozed to tomorrow`, ...state.histories[id]];
  }

  render();

  const label =
    kind === "watered"
      ? `${plant.name} · Watered`
      : `${plant.name} · Snoozed until tomorrow`;

  showToast(`${label}`, () => {
    state.status[id] = prevStatus;
    state.histories[id] = prevHistory;
    hideToast();
    render();
  });
}

function undoStatus(id) {
  // Inline undo after completion: revert status + newest history line
  const plant = PLANTS.find((p) => p.id === id);
  if (!plant) return;
  if (state.status[id] === "queued") return;

  state.status[id] = "queued";
  // Drop the entry this action prepended
  if (state.histories[id][0]?.startsWith("Today ·")) {
    state.histories[id] = state.histories[id].slice(1);
  }
  hideToast();
  render();
}

function toggleDetail(id) {
  state.expanded = state.expanded === id ? null : id;
  render();
  // Restore focus to the toggled head after re-render
  const head = document.querySelector(`.plant-head[data-id="${id}"]`);
  if (head) head.focus();
}

els.list.addEventListener("click", (event) => {
  const btn = event.target.closest("[data-action]");
  if (!btn) return;
  const id = btn.dataset.id;
  const action = btn.dataset.action;

  if (action === "toggle") toggleDetail(id);
  else if (action === "watered") applyAction(id, "watered");
  else if (action === "snooze") applyAction(id, "snooze");
  else if (action === "undo-inline") undoStatus(id);
});

els.undoBtn.addEventListener("click", () => {
  if (state.undo) state.undo();
});

els.resetBtn.addEventListener("click", () => {
  state.status = Object.fromEntries(PLANTS.map((p) => [p.id, "queued"]));
  state.histories = Object.fromEntries(PLANTS.map((p) => [p.id, [...p.history]]));
  state.expanded = null;
  hideToast();
  render();
});

document.addEventListener("keydown", (event) => {
  if (event.key === "Escape") {
    if (!els.toast.hidden) {
      hideToast();
      return;
    }
    if (state.expanded) {
      const id = state.expanded;
      toggleDetail(id);
    }
  }
});

render();

mimo/13-frontend-playful/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light">
  <title>Moss — gentle plant care</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <a class="skip-link" href="#queue">Skip to care queue</a>

  <header class="site-header">
    <div class="brand" aria-hidden="true">
      <svg class="brand-mark" viewBox="0 0 64 64" width="44" height="44">
        <path class="blob" d="M12 36c0-14 10-24 22-24s20 10 20 22-8 18-20 18-22-6-22-16z"/>
        <path class="stem" d="M32 46c0-10 2-18 2-18"/>
        <path class="leaf leaf-a" d="M34 30c8-2 14-10 12-16-8 0-14 6-12 16z"/>
        <path class="leaf leaf-b" d="M32 34c-8-4-12-14-8-20 8 4 12 12 8 20z"/>
        <circle class="dot" cx="34" cy="14" r="2.2"/>
      </svg>
    </div>
    <div class="brand-text">
      <p class="eyebrow">Household plant companion</p>
      <h1>Moss</h1>
      <p class="tagline">Four green residents. One gentle queue.</p>
    </div>
    <div class="header-aside">
      <p class="day-count" id="day-count"><span id="done-count">0</span> of 4 tended</p>
    </div>
  </header>

  <main class="layout">
    <section class="queue-panel" id="queue" aria-labelledby="queue-title">
      <div class="section-head">
        <h2 id="queue-title">Today’s care</h2>
        <p class="section-note" id="queue-note">Overdue first — the rest can wait a breath.</p>
      </div>

      <ul class="plant-list" id="plant-list"></ul>

      <div class="all-done" id="all-done" hidden>
        <svg class="done-art" viewBox="0 0 220 140" width="220" height="140" aria-hidden="true">
          <ellipse class="done-mound" cx="110" cy="118" rx="78" ry="14"/>
          <path class="done-pot" d="M78 88h64l-8 28H86z"/>
          <path class="done-stem" d="M110 88c0-22 4-34 4-34"/>
          <path class="done-leaf-a" d="M114 62c16-4 28-18 24-32-16 2-28 14-24 32z"/>
          <path class="done-leaf-b" d="M110 70c-16-8-24-28-16-40 16 8 24 24 16 40z"/>
          <circle class="done-z z1" cx="150" cy="40" r="3"/>
          <circle class="done-z z2" cx="162" cy="28" r="2"/>
          <circle class="done-drop" cx="64" cy="52" r="4"/>
        </svg>
        <h3 id="done-title">All clear</h3>
        <p id="done-copy">Nothing left in today’s queue. The moss can photosynthesize in peace.</p>
        <button type="button" class="btn btn-ghost" id="reset-day">Start a fresh day</button>
      </div>
    </section>

    <aside class="side" aria-label="Week at a glance">
      <section class="week-panel" aria-labelledby="week-title">
        <h2 id="week-title">Weekly rhythm</h2>
        <p class="week-note">Care load · gentle to busy</p>
        <div class="week-chart" id="week-chart" role="img" aria-label="Weekly care load chart"></div>
        <ol class="week-legend" id="week-legend"></ol>
      </section>

      <section class="pulse-panel" aria-labelledby="pulse-title">
        <h2 id="pulse-title">Queue pulse</h2>
        <ul class="pulse-list" id="pulse-list"></ul>
      </section>
    </aside>
  </main>

  <div class="undo-toast" id="undo-toast" role="status" aria-live="polite" hidden>
    <span class="undo-text" id="undo-text"></span>
    <button type="button" class="btn btn-undo" id="undo-btn">Undo</button>
  </div>

  <script src="app.js"></script>
</body>
</html>

mimo/13-frontend-playful/PLANTS.json

{
  "plants": [
    {"id":"fern","name":"Frida","species":"Boston fern","location":"Bathroom","task":"Water","due":"2 days overdue","urgency":4,"light":"Low, indirect","history":["Sep 19 · Misted","Sep 16 · Watered","Sep 12 · New frond"]},
    {"id":"pothos","name":"Orbit","species":"Golden pothos","location":"Bookshelf","task":"Rotate","due":"Today","urgency":2,"light":"Medium, indirect","history":["Sep 20 · Watered","Sep 14 · Rotated","Sep 10 · Wiped leaves"]},
    {"id":"cactus","name":"Dot","species":"Bunny ears cactus","location":"South window","task":"Check soil","due":"Today","urgency":1,"light":"Bright, direct","history":["Sep 08 · Watered","Sep 01 · New pad noted","Aug 22 · Rotated"]},
    {"id":"calathea","name":"Drama","species":"Calathea orbifolia","location":"Bedroom","task":"Mist","due":"Tomorrow","urgency":0,"light":"Medium, filtered","history":["Sep 21 · Misted","Sep 18 · Watered","Sep 15 · Brown edge noted"]}
  ],
  "week": [1,3,2,4,2,1,3]
}

mimo/13-frontend-playful/styles.css

/* Moss — warm, tactile, optimistic, a little odd */

:root {
  --paper: #f4eddf;
  --paper-deep: #ebe0cb;
  --card: #fffaf0;
  --ink: #2a2216;
  --ink-soft: #5c4f3c;
  --muted: #8a7a62;
  --line: #ddcfb6;
  --moss: #5f7f4e;
  --moss-deep: #3f5c36;
  --moss-soft: #c5d6b4;
  --clay: #c46a4a;
  --clay-soft: #f0c4b0;
  --sun: #e0b355;
  --sun-soft: #f5e2ad;
  --sky: #7fa0b8;
  --sky-soft: #c9dde8;
  --shadow: 0 10px 24px rgba(62, 48, 28, 0.1);
  --shadow-soft: 0 4px 12px rgba(62, 48, 28, 0.08);
  --radius: 22px;
  --radius-sm: 14px;
  --focus: #1f4f8a;
  --font: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(224, 179, 85, 0.16), transparent 28%),
    radial-gradient(circle at 88% 0%, rgba(95, 127, 78, 0.12), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(196, 106, 74, 0.08), transparent 40%),
    var(--paper);
  line-height: 1.45;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 20;
  background: var(--ink);
  color: var(--card);
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}

/* Header */

.site-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem 1rem;
  align-items: center;
  padding: 1.25rem 1.1rem 0.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.brand-mark .blob {
  fill: var(--moss-soft);
}

.brand-mark .stem {
  fill: none;
  stroke: var(--moss-deep);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.brand-mark .leaf-a {
  fill: var(--moss);
}

.brand-mark .leaf-b {
  fill: var(--moss-deep);
}

.brand-mark .dot {
  fill: var(--sun);
}

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.brand-text h1 {
  font-size: clamp(2.1rem, 6vw, 2.8rem);
  letter-spacing: -0.02em;
}

.tagline {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.header-aside {
  grid-column: 1 / -1;
}

.day-count {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  box-shadow: var(--shadow-soft);
}

/* Layout */

.layout {
  display: grid;
  gap: 1.25rem;
  padding: 0.75rem 1.1rem 2.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin-bottom: 0.85rem;
}

.section-head h2,
.week-panel h2,
.pulse-panel h2 {
  font-size: 1.35rem;
}

.section-note,
.week-note {
  color: var(--muted);
  font-size: 0.88rem;
}

/* Plant cards */

.plant-list {
  display: grid;
  gap: 0.9rem;
}

.plant {
  position: relative;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.plant::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: var(--accent, var(--moss));
  opacity: 0.9;
}

.plant[data-urgency="4"] {
  border-color: var(--clay-soft);
  box-shadow: var(--shadow);
}

.plant[data-urgency="4"]::after {
  content: "";
  position: absolute;
  right: -18px;
  top: -22px;
  width: 72px;
  height: 72px;
  border-radius: 40% 60% 55% 45%;
  background: var(--clay-soft);
  opacity: 0.55;
  pointer-events: none;
}

.plant:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.plant.is-done {
  opacity: 0.55;
  transform: scale(0.98);
}

.plant-head {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  padding: 0.95rem 1rem 0.7rem 1.15rem;
  background: transparent;
  border: 0;
  text-align: left;
}

.plant-portrait {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.plant-portrait .portrait-bg {
  fill: var(--pebble, var(--moss-soft));
}

.plant-portrait .portrait-line {
  fill: none;
  stroke: var(--moss-deep);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plant-portrait .portrait-fill-a {
  fill: var(--moss);
}

.plant-portrait .portrait-fill-b {
  fill: var(--moss-deep);
}

.plant-portrait .portrait-accent {
  fill: var(--accent, var(--sun));
}

.plant[data-id="fern"] {
  --pebble: #d5e3c4;
  --accent: #4e8a5c;
}

.plant[data-id="pothos"] {
  --pebble: #e8d9a8;
  --accent: #c2a03a;
}

.plant[data-id="cactus"] {
  --pebble: #f0cbb4;
  --accent: var(--clay);
}

.plant[data-id="calathea"] {
  --pebble: #c9dde8;
  --accent: #5f86a0;
}

/* Urgency accents override plant tints so overdue reads first */
.plant[data-urgency="4"] {
  --accent: var(--clay);
}

.plant[data-urgency="2"],
.plant[data-urgency="1"] {
  --accent: var(--moss);
}

.plant[data-urgency="0"] {
  --accent: var(--sun);
}

.plant-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
}

.plant-species {
  font-family: var(--font);
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
}

.plant-taskline {
  margin-top: 0.15rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.plant-meta {
  min-width: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1.5px solid transparent;
}

.badge-overdue {
  background: var(--clay-soft);
  color: #7a3218;
  border-color: var(--clay);
}

.badge-today {
  background: var(--moss-soft);
  color: var(--moss-deep);
  border-color: var(--moss);
}

.badge-tomorrow {
  background: var(--sun-soft);
  color: #6b4e10;
  border-color: var(--sun);
}

.chev {
  width: 0.65rem;
  height: 0.65rem;
  border-right: 2.5px solid var(--muted);
  border-bottom: 2.5px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-right: 0.25rem;
}

.plant-head[aria-expanded="true"] .chev {
  transform: rotate(225deg);
  margin-top: 0.3rem;
}

.plant-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0 1rem 0.9rem 1.15rem;
}

.btn {
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font-weight: 650;
  font-size: 0.92rem;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--moss-deep);
  color: #f7f3e8;
  box-shadow: 0 3px 0 rgba(40, 30, 14, 0.18);
}

.btn-primary:hover {
  background: var(--moss);
}

.btn-secondary {
  background: var(--card);
  border-color: var(--line);
  color: var(--ink-soft);
}

.btn-secondary:hover {
  border-color: var(--muted);
  background: var(--paper-deep);
}

.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-soft);
}

.btn-ghost:hover {
  background: var(--card);
}

.btn-undo {
  background: var(--sun-soft);
  border-color: var(--sun);
  color: #5a420c;
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
}

.btn-done-mark {
  background: var(--moss-soft);
  border-color: var(--moss);
  color: var(--moss-deep);
  pointer-events: none;
}

.plant-detail {
  padding: 0 1.15rem 1rem;
  border-top: 1.5px dashed var(--line);
  margin-top: 0.15rem;
}

.detail-grid {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem 0;
}

.detail-item {
  display: grid;
  gap: 0.15rem;
}

.detail-label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.detail-value {
  font-size: 0.95rem;
  color: var(--ink);
}

.water-meter {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

.water-pip {
  width: 0.7rem;
  height: 0.95rem;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: var(--sky-soft);
  border: 1.5px solid var(--sky);
}

.water-pip.is-on {
  background: var(--sky);
}

.detail-history-title {
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

.history-list {
  display: grid;
  gap: 0.35rem;
  padding-bottom: 0.25rem;
}

.history-list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.history-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent, var(--moss));
}

/* All done */

.all-done {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.55rem;
  padding: 2rem 1.25rem;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.all-done[hidden] {
  display: none;
}

.done-art .done-mound {
  fill: var(--paper-deep);
}

.done-art .done-pot {
  fill: var(--clay-soft);
  stroke: var(--clay);
  stroke-width: 2;
}

.done-art .done-stem {
  fill: none;
  stroke: var(--moss-deep);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.done-art .done-leaf-a {
  fill: var(--moss);
}

.done-art .done-leaf-b {
  fill: var(--moss-deep);
}

.done-art .done-z {
  fill: var(--muted);
  opacity: 0.7;
}

.done-art .done-drop {
  fill: var(--sky);
}

.all-done h3 {
  font-size: 1.6rem;
}

.all-done p {
  color: var(--ink-soft);
  max-width: 32ch;
}

/* Side panels */

.side {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.week-panel,
.pulse-panel {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1rem 1.05rem 1.1rem;
}

.week-chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.4rem;
  align-items: end;
  height: 96px;
  margin: 0.85rem 0 0.55rem;
  padding: 0 0.15rem;
}

.week-bar {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.week-bar-fill {
  width: 100%;
  max-width: 1.65rem;
  border-radius: 999px 999px 12px 12px;
  background: var(--moss-soft);
  border: 1.5px solid var(--moss);
  min-height: 0.55rem;
  transition: height 0.4s ease;
}

.week-bar[data-level="4"] .week-bar-fill {
  background: var(--clay-soft);
  border-color: var(--clay);
}

.week-bar[data-level="3"] .week-bar-fill {
  background: var(--sun-soft);
  border-color: var(--sun);
}

.week-bar[data-level="2"] .week-bar-fill {
  background: var(--moss-soft);
  border-color: var(--moss);
}

.week-bar[data-level="1"] .week-bar-fill {
  background: var(--sky-soft);
  border-color: var(--sky);
}

.week-legend {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.4rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
}

.week-legend li strong {
  display: block;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.pulse-list {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.7rem;
}

.pulse-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  padding: 0.35rem 0.55rem;
  border-radius: 12px;
  background: var(--paper);
}

.pulse-list .pulse-count {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.pulse-list li[data-tone="overdue"] {
  background: var(--clay-soft);
}

.pulse-list li[data-tone="done"] {
  background: var(--moss-soft);
}

.pulse-list li[data-tone="snoozed"] {
  background: var(--sun-soft);
}

/* Undo toast */

.undo-toast {
  position: fixed;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 30;
  background: var(--ink);
  color: var(--card);
  padding: 0.65rem 0.7rem 0.65rem 1rem;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(40, 30, 14, 0.28);
  max-width: min(92vw, 420px);
  animation: toast-in 0.28s ease;
}

.undo-toast[hidden] {
  display: none;
}

.undo-text {
  font-size: 0.9rem;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Small delight: portrait wiggle on hover/focus */
.plant-head:hover .plant-portrait,
.plant-head:focus-visible .plant-portrait {
  animation: wiggle 0.45s ease;
}

@keyframes wiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-4deg);
  }
  75% {
    transform: rotate(4deg);
  }
}

/* Desktop composition */
@media (min-width: 760px) {
  .site-header {
    grid-template-columns: auto 1fr auto;
    padding: 1.75rem 1.5rem 0.5rem;
  }

  .header-aside {
    grid-column: auto;
    justify-self: end;
  }

  .layout {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 1.5rem;
    padding: 1rem 1.5rem 3rem;
    align-items: start;
  }

  .plant-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .side {
    position: sticky;
    top: 1rem;
  }

  .plant-head {
    grid-template-columns: 72px 1fr;
    grid-template-areas:
      "portrait meta"
      "portrait badge";
  }

  .plant-portrait {
    grid-area: portrait;
    width: 72px;
    height: 72px;
  }

  .plant-meta {
    grid-area: meta;
  }

  .plant-badge-slot {
    grid-area: badge;
    justify-self: start;
    margin-top: 0.35rem;
  }
}

@media (min-width: 1040px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .week-chart {
    height: 110px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .plant:hover {
    transform: none;
  }
}