:root {
    --green-900:#1b3a2b; --green-700:#2d6a4f; --green-600:#3a7d5d;
    --green-500:#4a9c6d; --green-300:#95d5b2; --green-100:#d8f3dc;
    --earth:#9c6644; --earth-light:#e6ccb2;
    --bg:#f6f8f4; --panel:#ffffff; --line:#e2e7df; --ink:#243027; --muted:#6b7a70;
    --warn:#d7263d; --shadow:0 1px 3px rgba(20,40,30,.10),0 6px 18px rgba(20,40,30,.06);
    --radius:12px;
    /* surfaces and text that change with the theme */
    --field:#ffffff; --hover:#f1f4ef; --subtle:#eef2ec; --soft:#f7faf6;
    --accent:#2d6a4f;          /* green text on a page surface */
    --canvas:#d8f3dc;          /* the garden drawing stays daylight in both themes */
    --danger-bg:#fdf1f2; --danger-line:#f1c9cf; --note-bg:#fff8e6; --note-ink:#4a2c00;
}
/* Dark theme — the app only (html.app); the public pages share this file
   but are drawn for a light page. Follows the system setting unless the
   gardener picked one in the menu (html[data-theme], set before first paint
   by the snippet in views/app.php). The map and the garden canvas keep their
   light colours — satellite imagery and crop colours are what they are. */
@media (prefers-color-scheme: dark) {
    :root.app:not([data-theme="light"]) {
        color-scheme:dark;
        --bg:#121814; --panel:#1a221d; --field:#212b25; --line:#314038; --ink:#e3ebe5; --muted:#9fb1a5;
        --hover:#26332c; --subtle:#2a3830; --soft:#1e2822; --accent:#86d3a8;
        --green-100:#1e3a2b; --green-300:#2e5a43; --canvas:#cbe5d0; --warn:#ff6b7d;
        --danger-bg:rgba(255,107,125,.12); --danger-line:rgba(255,107,125,.4); --note-bg:#3a3017; --note-ink:#ffe7a8;
        --shadow:0 1px 3px rgba(0,0,0,.45),0 6px 18px rgba(0,0,0,.3);
    }
}
:root.app[data-theme="dark"] {
    color-scheme:dark;
    --bg:#121814; --panel:#1a221d; --field:#212b25; --line:#314038; --ink:#e3ebe5; --muted:#9fb1a5;
    --hover:#26332c; --subtle:#2a3830; --soft:#1e2822; --accent:#86d3a8;
    --green-100:#1e3a2b; --green-300:#2e5a43; --canvas:#cbe5d0; --warn:#ff6b7d;
    --danger-bg:rgba(255,107,125,.12); --danger-line:rgba(255,107,125,.4); --note-bg:#3a3017; --note-ink:#ffe7a8;
    --shadow:0 1px 3px rgba(0,0,0,.45),0 6px 18px rgba(0,0,0,.3);
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; }
body {
    font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink); background:var(--bg);
}
h2 { font-size:18px; margin:0 0 12px; }
h3.sub { font-size:14px; margin:18px 0 8px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }

/* topbar ---------------------------------------------------------------- */
/* One row, always: brand and field picker on the left, everything else
   right-aligned. Below 900px the right-hand box collapses into a hamburger
   drawer rather than wrapping onto a second line. */
.topbar {
    display:flex; align-items:center; flex-wrap:nowrap; gap:14px; padding:6px 18px;
    background:var(--green-700); color:#fff; box-shadow:var(--shadow); position:sticky; top:0; z-index:30;
}
.brand { font-weight:700; font-size:18px; display:flex; align-items:center; gap:6px; flex:none; }
.brand span { letter-spacing:.01em; white-space:nowrap; }
/* The mole is drawn in dark earth colours, so on the green bar he only reads
   at a decent size. The artwork is cropped to its own ink, so 40px of height
   is 40px of mole — the bar simply gives up a little padding for him. */
.brand-mark { display:block; flex:none; height:40px; width:auto; }
.field-picker { display:flex; gap:6px; align-items:center; flex:0 1 190px; min-width:120px; }
.field-picker .combobox { width:100%; }
.nav-wrap { display:flex; align-items:center; gap:10px; margin-left:auto; min-width:0; }
.tabs { display:flex; gap:2px; min-width:0; }
.tab {
    background:transparent; border:none; color:rgba(255,255,255,.92); padding:8px 13px;
    border-radius:8px; cursor:pointer; font-size:14.5px; font-weight:500; white-space:nowrap;
}
.tab:hover { background:rgba(255,255,255,.16); color:#fff; }
.tab.active { background:#fff; color:var(--green-700); font-weight:600; }
.topbar :is(.tab,.btn,.menu-btn,.nav-toggle,.sub-warn):focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* hamburger — only below the drawer breakpoint */
.nav-toggle {
    display:none; flex:none; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.42);
    color:#fff; border-radius:8px; font-size:18px; line-height:1; padding:7px 11px; cursor:pointer;
}
/* lightening the translucent fill would drop white text under 4.5:1, so the
   hover/open state flips to solid white with green ink instead */
.nav-toggle:hover, .nav-toggle[aria-expanded=true] { background:#fff; border-color:#fff; color:var(--green-700); }

/* settings / account menu ------------------------------------------------ */
.bar-menu { position:relative; flex:none; }
.menu-btn {
    display:inline-flex; align-items:center; gap:4px; background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.42); color:#fff; border-radius:8px; padding:7px 12px;
    font:inherit; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.menu-btn:hover, .menu-btn[aria-expanded=true] { background:#fff; border-color:#fff; color:var(--green-700); }
.menu-btn .caret { font-size:11px; opacity:.8; }
.menu-pop {
    position:absolute; right:0; top:calc(100% + 8px); min-width:290px; background:var(--field); color:var(--ink);
    border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 30px rgba(20,40,30,.22);
    padding:6px; z-index:40;
}
.menu-head {
    font-size:12px; color:var(--muted); padding:6px 10px 8px; border-bottom:1px solid var(--line);
    margin-bottom:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.menu-item {
    display:block; width:100%; text-align:left; background:none; border:none; border-radius:8px;
    padding:8px 10px; font:inherit; font-size:14px; color:var(--ink); cursor:pointer; text-decoration:none;
}
.menu-item small { display:block; font-size:11.5px; color:var(--muted); margin-top:1px; }
.menu-item:hover { background:var(--green-100); }
.menu-item.danger { color:var(--warn); }
.menu-item.danger:hover { background:var(--danger-bg); }
.menu-sep { height:1px; background:var(--line); margin:6px 4px; }
.menu-pop form { margin:0; }

/* first steps ----------------------------------------------------------- */
.onboard {
    position:relative; display:flex; gap:18px; align-items:center; margin-bottom:18px; padding:16px 44px 16px 18px;
    background:var(--panel); border:1px solid var(--green-300); border-left:4px solid var(--green-600);
    border-radius:var(--radius); box-shadow:var(--shadow);
}
.onboard-mole { flex:none; width:96px; height:auto; }
.onboard-body { flex:1; min-width:0; }
.onboard h2 { display:flex; align-items:center; gap:8px; margin:0 0 8px; }
.onboard-count { font-size:12px; font-weight:600; color:var(--accent); background:var(--green-100); border-radius:10px; padding:1px 8px; }
.onboard-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.onboard-steps li { display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap; padding:10px; border:1px solid var(--line); border-radius:10px; }
.onboard-steps li.next { border-color:var(--green-600); background:var(--green-100); }
.onboard-steps li.done { opacity:.6; }
.onboard-steps li.done b { text-decoration:line-through; }
.onboard-num { flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
    font-size:12.5px; font-weight:700; background:var(--line); color:var(--ink); }
.onboard-steps li.next .onboard-num, .onboard-steps li.done .onboard-num { background:var(--green-600); color:#fff; }
.onboard-txt { flex:1 1 calc(100% - 40px); min-width:0; display:flex; flex-direction:column; gap:2px; font-size:13.5px; }
.onboard-txt small { color:var(--muted); font-size:12.5px; }
.onboard-steps li .btn { margin-left:34px; }
.onboard-x { position:absolute; top:8px; right:10px; border:none; background:none; font-size:20px; line-height:1;
    color:var(--muted); cursor:pointer; padding:4px 6px; border-radius:6px; }
.onboard-x:hover { background:var(--green-100); color:var(--ink); }
@media (max-width:900px) {
    .onboard-mole { display:none; }
    .onboard-steps { grid-template-columns:minmax(0,1fr); }
}

/* icons (sprite in views/app.php) --------------------------------------- */
.ic { width:1.15em; height:1.15em; vertical-align:-0.2em; flex:none; fill:none; stroke:currentColor;
    stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn .ic, .menu-item .ic, .menu-btn .ic { pointer-events:none; }
.menu-item .ic { margin-right:4px; color:var(--accent); }
.menu-item .ic ~ small { margin-left:calc(1.15em + 8px); }   /* line up under the label */
.menu-item.danger .ic { color:inherit; }
.menu-btn .caret .ic { width:14px; height:14px; vertical-align:-2px; }
.nav-toggle .ic { width:20px; height:20px; vertical-align:middle; }
.zoomctl .ic { width:15px; height:15px; vertical-align:-3px; }

/* buttons --------------------------------------------------------------- */
.btn { font:inherit; cursor:pointer; border-radius:8px; padding:8px 14px; border:1px solid var(--line); background:var(--field); color:var(--ink); }
.btn:hover { background:var(--hover); }
.btn.primary { background:var(--green-600); border-color:var(--green-600); color:#fff; }
.btn.primary:hover { background:var(--green-700); }
/* Ghost = chrome-less button. It must stay legible wherever it is used, so the
   default is ink-on-light; only the dark topbar flips it to white. */
.btn.ghost { background:transparent; border-color:transparent; color:var(--ink); }
.btn.ghost:hover { background:var(--subtle); }
.topbar .btn.ghost { color:#fff; }
.topbar .btn.ghost:hover { background:rgba(255,255,255,.16); }
.btn.icon { padding:6px 10px; font-size:17px; line-height:1; }
.btn.block { width:100%; }
.btn.danger { color:var(--warn); border-color:var(--danger-line); background:var(--danger-bg); }
.btn.small { padding:4px 9px; font-size:13px; }

/* layout ---------------------------------------------------------------- */
main { padding:18px; max-width:1320px; margin:0 auto; }
.view.hidden { display:none; }
.layout { display:grid; grid-template-columns:1fr 320px; gap:18px; align-items:start; }
.view#view-planner .layout  { grid-template-columns:340px 1fr; } /* sidebar | map */
.view#view-journal .layout  { grid-template-columns:340px 1fr; } /* form | entries */
.view#view-calendar .layout { grid-template-columns:1fr 340px; } /* calendar | sidebar */
.canvas-wrap, .sidepanel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
/* a zoomed-in drawing scrolls inside its card; without this the grid column
   grew to the drawing's width and pushed the side panel off the screen */
.layout > * { min-width:0; }
.canvas-wrap { padding:16px; }
.sidepanel { padding:16px; }
.canvas-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.canvas-actions { display:flex; gap:8px; align-items:center; }
.hint { color:var(--muted); font-size:12.5px; }
.hint.block { display:block; margin:-4px 0 10px; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.seg-btn { border:none; background:var(--field); color:var(--muted); padding:7px 12px; cursor:pointer; font:inherit; font-size:13px; }
.seg-btn + .seg-btn { border-left:1px solid var(--line); }
.seg-btn.active { background:var(--green-600); color:#fff; }
.map-search { display:flex; gap:4px; }
.map-search input { padding:7px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; min-width:180px; }

/* combobox -------------------------------------------------------------- */
.cb-host { display:block; }
.combobox { position:relative; }
.cb-input { width:100%; box-sizing:border-box; padding:7px 9px; border:1px solid var(--line); border-radius:8px; font:inherit; background:var(--field); color:var(--ink); }
.cb-input::placeholder { color:var(--muted); }
.cb-chips { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:5px; }
.cb-chip { display:inline-flex; align-items:center; gap:4px; background:var(--green-100); color:var(--accent);
    border:1px solid var(--green-300); border-radius:14px; padding:2px 6px 2px 10px; font-size:12.5px; }
.cb-chip .cb-x { border:none; background:transparent; color:var(--accent); cursor:pointer; font-size:15px; line-height:1; padding:0; }
.cb-panel { position:fixed; z-index:80; max-height:260px; overflow:auto; background:var(--field); color:var(--ink);
    border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); }
.cb-panel.hidden { display:none; }
.cb-opt { display:flex; align-items:baseline; gap:8px; padding:6px 10px; cursor:pointer; font-size:14px; }
.cb-opt:hover, .cb-opt.active { background:var(--green-100); }
.cb-opt.sel .cb-lbl { font-weight:600; }
.cb-opt.sel::after { content:'✓'; color:var(--accent); margin-left:auto; }
.cb-sub { color:var(--muted); font-size:12px; font-style:italic; }
.cb-empty { padding:8px 10px; color:var(--muted); font-size:13px; }
.field-picker .combobox { min-width:170px; }
/* the field picker used to be a bare white box that read as a text field:
   a plot icon on the left and a caret on the right say „pick one of these" */
.field-picker .cb-input {
    padding:7px 28px 7px 31px; font-weight:600; cursor:pointer; text-overflow:ellipsis;
    background:var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d6a4f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l6-3 6 3 6-3v13l-6 3-6-3-6 3z'/%3E%3Cpath d='M9 4v13M15 7v13'/%3E%3C/svg%3E") no-repeat 9px 50% / 16px;
}
.field-picker .cb-input:focus { cursor:text; font-weight:400; }
.field-picker .combobox::after {
    content:''; position:absolute; right:11px; top:50%; width:7px; height:7px; margin-top:-5px;
    border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
    transform:rotate(45deg); pointer-events:none;
}
.inline-pick .cb-host { min-width:190px; }

/* map ------------------------------------------------------------------- */
#fieldMap { width:100%; height:68vh; min-height:460px; border-radius:10px; border:1px solid var(--line); overflow:hidden; z-index:1; }
#view-map .layout { grid-template-columns:1fr 340px; }  /* map | field panel */
.field-tip { background:rgba(27,58,43,.82); color:#fff; border:none; box-shadow:none; font-weight:600; font-size:12px; padding:2px 8px; border-radius:6px; }
.field-tip::before { display:none; }
/* grab handles for editing the selected field directly on the map */
.fh { background:#fff; border:2px solid #e09f3e; box-shadow:0 1px 3px rgba(0,0,0,.35); }
.fh-vertex { border-radius:3px; cursor:nwse-resize; }
.fh-move { border-radius:50%; background:#e09f3e; border-color:#fff; cursor:move; }
.fh-rotate { border-radius:50%; background:#2d6a4f; border-color:#fff; cursor:grab; }
.leaflet-container { font:inherit; }
.drawing #fieldMap { cursor:crosshair; }
#drawFieldBtn.active { background:#bb3e03; border-color:#bb3e03; }
.dim-tip { background:#fff; color:#1b3a2b; border:1px solid var(--green-700); font-weight:700;
    font-size:11px; padding:1px 6px; border-radius:5px; box-shadow:var(--shadow); white-space:nowrap; }
.dim-tip::before { display:none; } /* hide tooltip arrow */

/* svg host -------------------------------------------------------------- */
/* as tall as the drawing, up to 70vh — a fixed height left half a phone
   screen of empty green under a wide field */
.svg-host { width:100%; max-height:70vh; background:var(--canvas); border:1px solid var(--green-300); border-radius:10px; overflow:auto; }
.svg-host svg { display:block; touch-action:none; }
.zoomctl { display:inline-flex; gap:3px; }
.zoomctl .btn { min-width:30px; text-align:center; }
.inline-pick { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
.inline-pick select { padding:6px 8px; border:1px solid var(--line); border-radius:8px; font:inherit; }
.bed-rect { fill:var(--earth-light); stroke:var(--earth); stroke-width:1.5; cursor:grab; }
.bed-rect.vertical { fill:url(#hatch); }
.bed-rect.selected { stroke:var(--green-700); stroke-width:3; }
/* canvas units are centimetres; --u (cm per screen px, set by sizeCanvas)
   turns these into fixed on-screen sizes. The white halo keeps a name
   readable over hatching and crop dots. */
.bed-label, .bed-sub { pointer-events:none; paint-order:stroke; stroke:rgba(255,255,255,.85);
    stroke-linejoin:round; stroke-width:calc(3px * var(--u, 1)); }
.bed-label { font-size:calc(12.5px * var(--u, 1)); fill:var(--green-900); font-weight:700; }
.bed-sub { font-size:calc(10.5px * var(--u, 1)); fill:var(--muted); }
.planting-dot { stroke:#fff; stroke-width:1; cursor:grab; }
.planting-dot.conflict { stroke:var(--warn); stroke-width:2; }
/* working paths: ground reserved for feet and tools, not for planting.
   Hatched so it reads as "technical" rather than as another crop colour. */
.bed-path {
    fill:rgba(120,110,100,.30); stroke:#6b5e52; stroke-width:1.5; stroke-dasharray:6 4;
    cursor:move;
}
.bed-path.sel { stroke:var(--green-900); stroke-width:2.5; stroke-dasharray:none; }
.path-editor .path-row {
    border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin-bottom:8px;
    display:flex; flex-direction:column; gap:6px;
}
.path-editor .path-row.sel { border-color:var(--green-600); background:var(--green-100); }

/* picked out for a group move — a dark ring reads on every crop colour */
.planting-dot.sel { stroke:var(--green-900); stroke-width:3; }
/* standing closer to a neighbour than the spacing allows. Dashed, to tell it
   apart from the solid ring a companion/rotation conflict already draws — and
   it wins over both, because too close is the problem you fix first. */
.planting-dot.crowded { stroke:var(--warn); stroke-width:2.5; stroke-dasharray:3 2; }
.planting-dot.sel.crowded { stroke-width:3; }
.sel-handles { pointer-events:auto; }
.sel-band { pointer-events:none; }
.sel-info {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 8px;
    padding:6px 10px; border:1px solid var(--green-600); border-radius:8px;
    background:var(--green-100); font-size:13px;
}
.sel-info.hidden { display:none; }
.sel-info button { margin-left:auto; }
.grid-line { stroke:rgba(0,0,0,.05); stroke-width:.5; }

/* side panel forms ------------------------------------------------------ */
.stack { display:flex; flex-direction:column; gap:10px; }
.stack label, .row label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
.stack input, .stack select, .row input, .row select {
    font:inherit; padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:var(--field); color:var(--ink);
}
.row { display:flex; gap:10px; }
/* Flex items default to min-width:auto, so an <input> refuses to shrink below
   its intrinsic ~20-character width and two of them overflow a narrow panel. */
.row > * { min-width:0; }
.row .grow { flex:1 1 0; }
.stack input:not([type=checkbox]):not([type=radio]),
.stack select,
.row input:not([type=checkbox]):not([type=radio]),
.row select { width:100%; }
label.check { flex-direction:row; align-items:center; gap:6px; font-size:14px; color:var(--ink); align-self:flex-end; padding-bottom:8px; }
.placeholder { color:var(--muted); font-size:14px; padding:20px 4px; text-align:center; }
/* An empty panel is where someone decides whether the app is worth the effort,
   so it gets the mole and a sentence instead of a grey line of text. The
   drawing needs ~100px before it reads as a mole, hence the floor. */
.placeholder.with-mole {
    display:flex; flex-direction:column; align-items:center; gap:10px; padding:24px 8px;
}
.placeholder.with-mole img { width:min(150px, 60%); height:auto; opacity:.95; }
.placeholder.with-mole > div { max-width:34ch; }
.bed-list { display:flex; flex-direction:column; gap:5px; margin-top:4px; }
.bed-item { display:flex; align-items:center; gap:8px; padding:7px 9px; border:1px solid var(--line);
    border-radius:8px; cursor:pointer; font-size:13.5px; background:var(--field); }
.bed-item:hover { background:var(--hover); }
.bed-item.active { border-color:var(--green-600); background:var(--green-100); }
.bed-item .nm { font-weight:600; }
.bed-item .sp { color:var(--muted); margin-left:auto; font-size:12px; }
.panel-edit { margin-top:14px; border-top:1px solid var(--line); padding-top:12px; }
.actions { margin-top:14px; }

.plant-info { font-size:12.5px; color:var(--muted); background:var(--soft); border:1px solid var(--line); border-radius:8px; padding:8px 10px; min-height:8px; }
/* with no plant picked this rendered as an empty bordered pill floating in the form */
.plant-info:empty, .summary:empty { display:none; }
.plant-info .good { color:var(--accent); }
.plant-info .bad { color:var(--warn); }
.plant-info b { color:var(--ink); }

/* lists ----------------------------------------------------------------- */
.req-list, .sched-list { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.req-list li, .sched-list li {
    display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line);
    border-radius:8px; background:var(--field); font-size:13.5px;
}
.req-list .swatch { width:12px; height:12px; border-radius:3px; flex:none; }
.req-list .name { font-weight:600; }
.req-list .meta { color:var(--muted); margin-left:auto; font-size:12px; }
.req-list input.qty { width:56px; padding:3px 6px; border:1px solid var(--line); border-radius:6px; font:inherit; }
.req-list .count { margin-left:auto; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.req-list .count.ok { color:var(--accent); font-weight:600; }
.tag-v { background:var(--green-100); color:var(--accent); border-radius:5px; padding:1px 6px; font-size:11px; }
.li-del { margin-left:6px; }

/* crop rotation advice — read before planning, one block per bed ---------- */
.rotation-advice { margin-top:14px; font-size:12.5px; }
.rotation-advice .ra-row {
    border:1px solid var(--line); border-left:3px solid var(--green-600);
    border-radius:8px; background:var(--field); padding:7px 10px; margin-bottom:6px;
}
.rotation-advice .ra-bed { font-weight:600; }
.rotation-advice .ra-past { color:var(--muted); font-variant-numeric:tabular-nums; }
.rotation-advice .ra-good { color:var(--accent); }
.rotation-advice .ra-bad { color:var(--warn); }
.rotation-advice .hint { margin-top:6px; }

.summary { margin-top:12px; font-size:13px; }
.summary .ok { color:var(--accent); }
.summary .warn { color:var(--warn); }
.summary ul { margin:6px 0 0; padding-left:18px; }

/* legend ---------------------------------------------------------------- */
.legend { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.legend .item { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); }
.legend .dot { width:11px; height:11px; border-radius:50%; }

/* calendar -------------------------------------------------------------- */
.cal-nav { display:flex; align-items:center; gap:6px; }
.cal-nav h2 { margin:0; min-width:170px; text-align:center; text-transform:capitalize; }
.cal-filters { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.cal-filters .chip {
    font-size:12px; padding:4px 10px; border-radius:20px; border:1px solid var(--line);
    background:var(--field); cursor:pointer; display:flex; align-items:center; gap:5px; color:var(--muted);
}
.cal-filters .chip.active { color:#fff; border-color:transparent; }
.cal-filters .chip .dot { width:9px; height:9px; border-radius:50%; }
.cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.cal-dow { text-align:center; font-size:11px; color:var(--muted); text-transform:uppercase; padding:4px 0; font-weight:600; }
.cal-cell { min-height:96px; border:1px solid var(--line); border-radius:8px; padding:4px; background:var(--field); display:flex; flex-direction:column; gap:2px; }
.cal-cell.other { background:var(--soft); opacity:.6; }
.cal-cell.today { border-color:var(--green-500); box-shadow:0 0 0 1px var(--green-500) inset; }
.cal-cell .num { font-size:11px; color:var(--muted); align-self:flex-end; }
.cal-ev { font-size:11px; padding:2px 5px; border-radius:5px; color:#fff; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-ev.done { opacity:.45; text-decoration:line-through; }
.cal-ev.skipped { opacity:.4; text-decoration:line-through dashed; }
/* phone: the month as a list of busy days */
.cal-agenda { display:flex; flex-direction:column; gap:6px; }
.cal-aday { display:flex; gap:10px; align-items:flex-start; padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--field); }
.cal-aday.today { border-color:var(--green-500); box-shadow:0 0 0 1px var(--green-500) inset; }
.cal-aday.past { opacity:.7; }
.cal-adate { flex:0 0 38px; display:flex; flex-direction:column; align-items:center; line-height:1.1; }
.cal-adate b { font-size:18px; }
.cal-adate span { font-size:11px; color:var(--muted); text-transform:uppercase; }
.cal-aevs { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.cal-aevs .cal-ev { font-size:12.5px; padding:4px 8px; white-space:normal; }
.cal-more { font:inherit; font-size:11px; font-weight:600; color:var(--accent); background:none; border:none;
    padding:1px 5px; text-align:left; cursor:pointer; border-radius:5px; }
.cal-more:hover { background:var(--green-100); }

.sched-list li .sw { width:10px; height:10px; border-radius:3px; flex:none; }
.sched-list .auto { font-size:10px; color:var(--muted); background:var(--subtle); border-radius:4px; padding:1px 5px; }
.sched-list .meta { color:var(--muted); font-size:12px; margin-left:auto; }

/* modal & toast --------------------------------------------------------- */
.modal-host {
    position:fixed; inset:0; background:rgba(20,30,24,.4); display:flex; align-items:center;
    justify-content:center; z-index:50; padding:18px; overflow-y:auto;  /* never touch the screen edge */
}
/* `.hidden` must beat the layout rules that give labels/rows a display value
   (e.g. `.stack label{display:flex}`), otherwise hiding an element does nothing. */
.modal-host.hidden, .toast.hidden, .hidden { display:none !important; }
.modal {
    background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; width:min(420px,92vw);
    /* a tall modal must scroll inside itself — otherwise it grows past the
       viewport and its buttons become unreachable */
    display:flex; flex-direction:column; max-height:100%;
}
.modal h3 { margin:0 0 14px; flex:none; }
.modal .stack { gap:12px; }
.modal.wide { width:min(680px,95vw); }
/* Only the designated body scrolls. Toolbars above it (e.g. „+ Nowa roślina"
   and the search box in the catalogues) keep their natural height — as flex
   items they used to be squeezed flat and pushed out of reach. */
.modal > * { flex:0 0 auto; min-height:0; }
.modal > .stack, .modal > .modal-scroll { flex:0 1 auto; overflow-y:auto; }
/* a column flex-box inside a height-capped scroller shrinks its children until
   they overlap — pin them to their natural height and let the wrapper scroll */
.modal .stack > *, .modal .modal-scroll > * { flex-shrink:0; }
.modal-scroll { max-height:none; overflow:auto; padding:2px; margin-top:4px; }
/* search + „new item" sit on one row above the scrolling list */
.modal-toolbar { display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.modal-toolbar .cb-input { flex:1 1 auto; min-width:0; }
.modal-toolbar .btn { flex:none; white-space:nowrap; }
@media (max-width:520px) { .modal-toolbar { flex-wrap:wrap; } .modal-toolbar .btn { width:100%; } }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.form-grid > label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
.form-grid > label.full { grid-column:1 / -1; }
.form-grid label.check { flex-direction:row; align-items:center; gap:6px; color:var(--ink); font-size:14px; padding-top:6px; }
.form-grid input, .form-grid select, .form-grid textarea { font:inherit; padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:var(--field); color:var(--ink); resize:vertical; }
.form-grid input[type=color] { padding:2px; height:36px; }
.form-grid select[multiple] { min-height:120px; }
.checklist { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:2px 10px;
    max-height:170px; overflow:auto; border:1px solid var(--line); border-radius:8px; padding:8px; background:var(--field); }
.checklist .chk { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink); font-weight:400; cursor:pointer; }
.checklist .chk input { margin:0; }
.plant-row { display:flex; align-items:center; gap:8px; padding:7px 9px; border:1px solid var(--line); border-radius:8px; margin-bottom:6px; }
.plant-row .swatch { width:14px; height:14px; border-radius:4px; flex:none; }
.plant-row .nm { font-weight:600; }
.plant-row .lat { color:var(--muted); font-size:12px; font-style:italic; }
.plant-row .sp { color:var(--muted); font-size:12px; margin-left:auto; }
/* pinned below the scrolling body so Zapisz/Zamknij are always reachable */
.modal .modal-actions {
    display:flex; gap:8px; justify-content:flex-end; margin-top:18px; flex:none; flex-wrap:wrap;
    padding-top:14px; border-top:1px solid var(--line);
}
.modal .modal-actions .left { margin-right:auto; }
.toast {
    position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--green-900); color:#fff;
    padding:10px 18px; border-radius:10px; box-shadow:var(--shadow); z-index:60; font-size:14px;
}
.toast.warn { background:var(--warn); }
.toast { display:flex; align-items:center; gap:12px; }
.toast-undo { font:inherit; font-size:13.5px; font-weight:700; color:#fff; background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.45); border-radius:8px; padding:4px 10px; cursor:pointer; white-space:nowrap; }
.toast-undo:hover { background:#fff; color:var(--green-900); }
.offline-bar {
    position:fixed; left:16px; bottom:16px; z-index:55; max-width:360px; display:flex; align-items:center; gap:10px;
    padding:8px 14px 8px 8px; background:var(--panel); color:var(--ink); border:1px solid var(--line);
    border-left:4px solid #4c8fd6; border-radius:12px; box-shadow:var(--shadow); font-size:13px;
}
.offline-bar img { flex:none; width:72px; height:auto; }

/* tasks ----------------------------------------------------------------- */
#taskList { display:flex; flex-direction:column; gap:4px; }
.task-group { margin:14px 0 4px; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.task-group.overdue { color:var(--warn); }
.task-group.today { color:var(--accent); }
.task-past { display:flex; flex-direction:column; gap:4px; }
.task-past > summary { display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none; }
.task-past > summary::-webkit-details-marker { display:none; }
.task-past > summary::before { content:'▸'; font-size:11px; }
.task-past[open] > summary::before { content:'▾'; }
.task-past > summary .btn { margin-left:auto; text-transform:none; letter-spacing:0; font-weight:500; }
.task-past .hint.block { margin:0 0 4px; }
.task-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; cursor:pointer; }
.task-row:hover { background:var(--hover); }
.task-date { font-size:12px; color:var(--muted); min-width:76px; font-variant-numeric:tabular-nums; }
.task-dot { width:10px; height:10px; border-radius:50%; flex:none; }
.task-title { flex:1; }
.task-row input:checked ~ .task-title { text-decoration:line-through; color:var(--muted); }
.task-field { font-size:12px; color:var(--muted); background:var(--subtle); border-radius:5px; padding:1px 7px; }

/* journal --------------------------------------------------------------- */
#journalList { display:flex; flex-direction:column; gap:6px; }
.journal-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:13.5px; }
.journal-item .j-date { font-size:12px; color:var(--muted); min-width:76px; }
.j-kind { font-size:12px; padding:1px 7px; border-radius:5px; background:var(--subtle); color:var(--muted); white-space:nowrap; }
.j-kind.harvest { background:#fff0e0; color:#bb3e03; }
.j-plant { font-weight:600; white-space:nowrap; }
.j-amount { font-weight:700; color:#bb3e03; white-space:nowrap; }
.j-text { flex:1; }
.j-field { font-size:12px; color:var(--muted); white-space:nowrap; }
#journalForm textarea { font:inherit; padding:7px 9px; border:1px solid var(--line); border-radius:8px; resize:vertical; }

/* timeline (succession) ------------------------------------------------- */
/* keeps the wide timeline inside its card on narrow screens */
.tl-scroll { overflow-x:auto; }
#timeline { display:flex; flex-direction:column; gap:6px; min-width:640px; }
.tl-row { display:grid; grid-template-columns:132px 1fr; align-items:stretch; gap:8px; }
.tl-label { font-size:13px; font-weight:600; align-self:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tl-head { display:flex; }
.tl-mth { font-size:11px; color:var(--muted); text-align:center; border-left:1px solid var(--line); box-sizing:border-box; }
.tl-mth:first-child { border-left:none; }
.tl-track { position:relative; min-height:26px; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.tl-bar { position:absolute; height:18px; border-radius:4px; color:#fff; font-size:11px; line-height:18px; padding:0 6px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:0 1px 2px rgba(0,0,0,.18); }
.tl-name { position:relative; }
/* harvest window: the bar's own colour, lightened and striped */
.tl-harvest { position:absolute; top:0; bottom:0; right:0;
    background:repeating-linear-gradient(135deg, rgba(255,255,255,.42) 0 4px, rgba(255,255,255,.2) 4px 8px); }
.tl-gap { position:absolute; top:2px; bottom:2px; border:1px dashed var(--green-500); border-radius:4px;
    background:rgba(149,213,178,.18); display:flex; align-items:center; justify-content:center;
    font:inherit; font-size:10px; color:var(--accent); overflow:hidden; padding:0; }
button.tl-gap { cursor:pointer; }
button.tl-gap:hover { background:rgba(149,213,178,.4); border-style:solid; }
.modal .btn.block { display:flex; align-items:center; gap:6px; text-align:left; }
.modal .btn .swatch { width:12px; height:12px; border-radius:3px; flex:none; }
.tl-today { position:absolute; top:-1px; bottom:-1px; width:2px; background:var(--warn); }

/* weather card (Open-Meteo) --------------------------------------------- */
.weather-card { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:12px; background:var(--panel); }
.wx-note { font-size:13px; color:var(--muted); }
.wx-advice { display:flex; flex-direction:column; gap:5px; margin-bottom:10px; }
.wx-adv { font-size:13px; padding:6px 9px; border-radius:8px; border-left:3px solid var(--line); background:rgba(0,0,0,.03); }
.wx-adv.frost { border-left-color:#4c8fd6; background:rgba(76,143,214,.10); }
.wx-adv.water { border-left-color:var(--green-500); background:rgba(149,213,178,.14); }
.wx-adv.spray { border-left-color:var(--warn); background:rgba(230,168,71,.12); }
.wx-strip { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.wx-day { text-align:center; padding:7px 2px; border:1px solid var(--line); border-radius:8px; }
.wx-day.frost { border-color:#4c8fd6; background:rgba(76,143,214,.10); }
.wx-dow { font-size:11px; color:var(--muted); text-transform:uppercase; }
.wx-dt { font-size:11px; color:var(--muted); margin-bottom:3px; }
.wx-temp { font-size:13px; }
.wx-temp b { font-weight:700; }
.wx-tmin { color:var(--muted); margin-left:4px; }
.wx-sky { margin:2px 0 4px; line-height:0; }
.wx-sky .ic { width:26px; height:26px; stroke-width:1.7; }
.sky-sun { color:#e09f3e; }
.sky-cloud-sun { color:#c98a2e; }
.sky-cloud, .sky-fog { color:var(--muted); }
.sky-drizzle, .sky-rain { color:#3d7cc9; }
.sky-snow { color:#4c8fd6; }
.sky-storm { color:#7b6cd9; }
.wx-tmin.cold { color:#3d7cc9; font-weight:700; }
.wx-rain { font-size:11px; color:var(--muted); margin-top:3px; white-space:nowrap; }
.wx-rain .ic { width:11px; height:11px; vertical-align:-1px; }
.wx-rain.wet { color:#3d7cc9; font-weight:600; }
.wx-adv .ic, .wx-note .ic { color:var(--accent); }
.wx-adv.frost .ic { color:#4c8fd6; }
.wx-adv.water .ic { color:#3d7cc9; }
.wx-adv.spray .ic { color:#bb3e03; }
.wx-stale { font-size:11px; color:var(--muted); margin-top:8px; font-style:italic; }
/* a phone gets the week as one swipeable row instead of a 4+3 block */
@media (max-width:640px) {
    .wx-strip { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:66px; overflow-x:auto;
        scroll-snap-type:x mandatory; padding-bottom:4px; }
    .wx-day { scroll-snap-align:start; }
}

/* varieties (cultivars) ------------------------------------------------- */
.variety-box { border:1px solid var(--line); border-radius:8px; padding:8px; }
.variety-list { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.variety-item, .variety-add { display:grid; grid-template-columns:1fr 84px 1.3fr auto; gap:6px; align-items:center; }
.variety-item input, .variety-add input { font:inherit; padding:5px 7px; border:1px solid var(--line); border-radius:6px; min-width:0; }
.variety-add { padding-top:8px; border-top:1px dashed var(--line); }
.req-list .variety { color:var(--muted); font-weight:400; font-style:italic; }
.field-label { font-size:13px; font-weight:600; margin-bottom:4px; }
@media (max-width:640px) { .variety-item, .variety-add { grid-template-columns:1fr 64px auto; } .variety-item input:nth-child(3), .variety-add input:nth-child(3) { grid-column:1 / -1; } }

/* seeds (inventory + shopping list) ------------------------------------- */
.shop-row, .seed-row { display:flex; align-items:center; gap:8px; padding:7px 8px; border:1px solid var(--line); border-radius:8px; margin-bottom:6px; }
.shop-row .name, .seed-row .name { font-weight:600; }
.shop-fields { margin-left:auto; font-size:12px; color:var(--muted); }
.shop-what { display:flex; flex-direction:column; min-width:0; }
.shop-what small { font-size:12px; color:var(--muted); }
.shop-row .btn { flex:0 0 auto; }
.seed-row .qty { width:70px; margin-left:auto; font:inherit; padding:5px 7px; border:1px solid var(--line); border-radius:6px; }
.seed-row .seed-unit { width:96px; font:inherit; padding:5px 7px; border:1px solid var(--line); border-radius:6px; }
.seed-row .seed-notes { font-size:12px; color:var(--muted); max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.seed-row.empty { opacity:.6; }
.seed-ok { padding:10px 12px; border:1px solid var(--green-500); border-radius:8px; background:rgba(149,213,178,.14); color:var(--accent); font-weight:600; }

/* bed edit handles on the garden canvas --------------------------------- */
.bh { fill:#fff; stroke:#bb3e03; stroke-width:2; cursor:pointer; }
.bh-vertex { cursor:nwse-resize; }
.bh-rotate { fill:#bb3e03; stroke:#fff; cursor:grab; }
/* decorative only — must not steal pointer events from the bed underneath */
.bh-arm { stroke:#bb3e03; stroke-width:1.5; stroke-dasharray:4 3; pointer-events:none; }
/* highlight shown where a dragged point latches onto a neighbouring shape */
.bh-snap { fill:none; stroke:#e09f3e; stroke-width:3; pointer-events:none; }

/* field boundary on the garden canvas ----------------------------------- */
.field-outline {
    fill:rgba(149,213,178,.14); stroke:var(--green-700); stroke-width:3;
    stroke-dasharray:14 8; stroke-linejoin:round;
}
.plant-row.current { background:rgba(149,213,178,.18); border-radius:8px; }
.bed-item .sp.warn, .plant-row .sp.warn { color:#bb3e03; font-weight:600; }

/* print ----------------------------------------------------------------- */
@media print {
    .topbar, .sidepanel, .cb-panel, .modal-host, .toast, .cal-filters, .canvas-actions, .cal-nav .btn, .hint { display:none !important; }
    main { padding:6px; max-width:none; }
    .layout { display:block !important; }
    .canvas-wrap, .sidepanel { border:none; box-shadow:none; padding:0; }
    .svg-host { height:auto !important; max-height:none !important; overflow:visible !important; border:1px solid #ccc; background:#fff; }
    .svg-host svg { width:100% !important; height:auto !important; }
    .cal-cell { min-height:64px; }
}

@media (max-width:900px) {
    .layout, .view#view-planner .layout, .view#view-calendar .layout,
    .view#view-journal .layout, #view-map .layout { grid-template-columns:minmax(0,1fr); }
}

/* Eight tabs + the settings button stop fitting one row at ~1030px, so the
   whole right-hand box folds into a hamburger drawer from here down. */
@media (max-width:1080px) {
    /* --- hamburger drawer ------------------------------------------------ */
    .nav-toggle { display:inline-flex; order:-1; }
    .nav-wrap {
        display:none; position:absolute; left:0; right:0; top:100%;
        flex-direction:column; align-items:stretch; gap:0; margin:0; padding:8px;
        background:var(--green-700); box-shadow:0 10px 24px rgba(20,40,30,.28);
        max-height:calc(100vh - 100%); overflow-y:auto;
    }
    .nav-wrap.open { display:flex; }
    .tabs { flex-direction:column; gap:2px; }
    .tab { text-align:left; padding:11px 14px; font-size:15px; }
    /* inside the drawer the options are already open — no nested dropdown */
    .menu-btn { display:none; }
    .bar-menu { margin-top:8px; border-top:1px solid rgba(255,255,255,.25); padding-top:8px; }
    .menu-pop {
        display:block !important; position:static; min-width:0; background:transparent; border:none;
        box-shadow:none; padding:0; color:#fff;
    }
    .menu-head { color:rgba(255,255,255,.88); border-bottom-color:rgba(255,255,255,.25); }
    .menu-item { color:#fff; padding:11px 14px; }
    .menu-item small { color:rgba(255,255,255,.78); }
    .menu-item .ic { color:inherit; }
    .menu-item:hover { background:rgba(255,255,255,.16); }
    .menu-item.danger { color:#ffdde1; }
    .menu-item.danger:hover { background:rgba(255,255,255,.16); }
    .menu-sep { background:rgba(255,255,255,.25); }
}
@media (max-width:640px) {
    /* app bar only — the picker needs the room. The public header keeps its name. */
    .topbar .brand span { display:none; }
    /* action rows must wrap, not overflow, on narrow screens */
    .canvas-actions { flex-wrap:wrap; }
    .map-search { flex:1 1 200px; }
    .map-search input { min-width:0; flex:1 1 auto; }
    .inline-pick { flex:1 1 100%; }
}

/* family planner --------------------------------------------------------- */
.fam-counts { flex-wrap:wrap; }
.fam-table { display:flex; flex-direction:column; gap:2px; margin-top:6px; }
.fam-row { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:8px; padding:6px 8px;
    border-bottom:1px solid var(--line); font-size:13px; align-items:center; }
.fam-row.head { font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); border-bottom:2px solid var(--line); }
.fam-row .nm { font-weight:600; }
.fam-row .sug { font-weight:700; color:var(--accent); }
.fam-row .ok { color:var(--accent); }
@media (max-width:640px) { .fam-row { grid-template-columns:1.4fr 1fr 1fr; } .fam-row > :nth-child(3) { display:none; } }

/* live side lengths while resizing a bed */
.bed-dim { font-size:calc(11.5px * var(--u, 1)); fill:var(--green-900); font-weight:700; paint-order:stroke;
    stroke:#fff; stroke-width:calc(3px * var(--u, 1)); stroke-linejoin:round; }

/* catalogue badges: own entry vs a shared one this account has tweaked */
.plant-row .tag-v { flex:none; }
.tag-v.edited { background:#fde2c8; color:#bb3e03; }

/* journal photos: drop zone, picker preview, thumbnails, gallery */
/* !important: form rules like `.stack input { width:100% }` are more specific,
   and a full-width invisible input widened the whole page */
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important;
    margin:-1px; border:0 !important; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.stack label.dropzone {
    position:relative;
    flex-direction:row; align-items:center; gap:12px; padding:14px; cursor:pointer; color:var(--ink);
    border:2px dashed var(--line); border-radius:10px; background:var(--soft); font-size:13.5px;
}
.dropzone .ic { width:28px; height:28px; color:var(--accent); stroke-width:1.6; }
.dropzone > span { display:flex; flex-direction:column; gap:2px; }
.dropzone small { color:var(--muted); font-size:12px; }
.dropzone:hover, .dropzone.over { border-color:var(--green-500); background:var(--green-100); }
.dropzone:focus-within { outline:2px solid var(--green-500); outline-offset:2px; }
h3.sub.gal-head { display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0; font-size:14px; color:var(--ink); }
.gal-head .swatch { width:12px; height:12px; border-radius:3px; }
.gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:8px; }
.gal-item { position:relative; display:block; aspect-ratio:1; border-radius:10px; overflow:hidden; border:1px solid var(--line); }
.gal-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s; }
.gal-item:hover img { transform:scale(1.04); }
.gal-cap { position:absolute; left:0; right:0; bottom:0; padding:14px 8px 5px; font-size:11.5px; color:#fff;
    background:linear-gradient(transparent, rgba(0,0,0,.6)); }
@media (prefers-reduced-motion: reduce) { .gal-item img { transition:none; } }
.photo-preview { display:flex; align-items:center; gap:8px; margin-top:-4px; }
.photo-preview img { width:76px; height:76px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.journal-item { flex-wrap:wrap; }
.journal-item .j-photo { flex:0 0 auto; order:9; margin-left:auto; line-height:0; }
.journal-item .j-photo img {
    width:56px; height:56px; object-fit:cover; border-radius:6px; border:1px solid var(--line);
}
.journal-item .j-photo:hover img { border-color:var(--green-600); }

/* read-only garden: hide what the API would refuse anyway */
body[data-access="view"] .needs-edit { display:none !important; }
.view-only-note {
    display:flex; align-items:center; gap:8px; margin-bottom:12px; padding:8px 12px;
    background:var(--note-bg); border:1px solid #ffd166; border-radius:8px; font-size:13px; color:var(--note-ink);
}
.tag-v.view { background:var(--subtle); color:var(--muted); }

/* computed dose shown next to a treatment task */
.task-row .task-dose {
    flex: none; font-size: 12px; color: var(--accent); background: var(--green-100);
    border-radius: 6px; padding: 1px 8px; white-space: nowrap;
}
@media (max-width: 640px) { .task-row .task-dose { display: none; } }

/* per-plant treatment doses in the plant editor */
.dose-list { display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.dose-row { display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; }
.dose-row .sw { width:10px; height:10px; border-radius:3px; flex:none; }
.dose-row .nm { flex:1 1 auto; font-size:13.5px; min-width:0; }
.dose-row input { width:72px; flex:none; font:inherit; padding:5px 7px; border:1px solid var(--line); border-radius:6px; }
.dose-row .unit { flex:none; font-size:12px; color:var(--muted); }
.dose-row { flex-wrap:wrap; }