:root {
  --forest: #3F6B3A; --forest-d: #2F5430; --leaf: #5E8F4E; --ink: #2E3A2C; --muted: #6F7667;
  --cream: #F6F3EA; --card: #FFFFFF; --rule: #DDD7C4; --soft: #EEF0E4; --berry: #A8578A; --warn: #C2543A;
  --shadow: 0 1px 2px rgba(46,58,44,.06), 0 6px 18px rgba(46,58,44,.06);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --sans: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 14px/1.45 var(--sans); }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; color: var(--forest); margin: 0; }
.top .logo { width: 28px; height: 28px; flex: none; }

.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 10px max(20px, calc((100% - 1700px) / 2 + 20px)); background: rgba(246,243,234,.95); backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule); }
/* the title lines up with the work area (the plan, bloom chart and list), and the buttons with its right edge */
.top > div:first-child { margin-left: 0; }
@media (max-width: 1050px) { .top > div:first-child { margin-left: 0; } }
.top h1 { font-size: 22px; line-height: 1.1; }
.top .ttl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.top .beta { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: #E5E2F3; color: #4F4A8A; border: 1px solid #BDB7DD; }
.top .sub { color: var(--muted); font-size: 12px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn { border: 1px solid var(--rule); background: #fff; color: var(--ink); padding: 7px 12px; border-radius: 8px; font-weight: 600; font-size: 13px; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--soft); border-color: #c9c2a8; }
.btn.primary { background: var(--forest); border-color: var(--forest); color: #fff; }
.btn.primary:hover { background: var(--forest-d); }
.btn.small { padding: 4px 9px; font-size: 12px; }
.btn.danger { color: var(--warn); }
.btn:disabled { opacity: .5; cursor: default; }
.filebtn { position: relative; overflow: hidden; display: inline-block; }
.filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; padding: 18px 20px 60px; max-width: 1700px; margin: 0 auto; }
.left { display: flex; flex-direction: column; gap: 16px; align-self: start; position: sticky; top: 66px; max-height: calc(100vh - 80px); overflow: auto; padding-right: 2px; }
.center { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.card { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); padding: 16px; }
.card h2 { font-size: 18px; margin-bottom: 2px; }
.card .lede { color: var(--muted); font-size: 12.5px; margin: 0 0 12px; }
.card h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-family: var(--sans); margin: 14px 0 6px; }

/* shape picker */
.shapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.shape { border: 1.5px solid var(--rule); background: #fff; border-radius: 10px; padding: 6px 2px 4px; text-align: center; font-size: 10.5px; color: var(--muted); line-height: 1.15; }
.shape svg { width: 100%; height: 34px; display: block; margin-bottom: 3px; }
.shape.on { border-color: var(--forest); background: var(--soft); color: var(--forest-d); font-weight: 700; }
.shape:hover { border-color: #b9c79b; }
.hint { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.dims { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.dims label, .field { font-size: 11.5px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
input[type=number], input[type=search], select { font: inherit; padding: 6px 8px; border: 1px solid var(--rule); border-radius: 7px; background: #fff; color: var(--ink); width: 100%; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row.tight { gap: 6px; }
.check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink); margin-top: 8px; }

/* library */
.filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.chips { display: flex; gap: 5px; flex-wrap: wrap; }
.chip { border: 1px solid var(--rule); background: #fff; border-radius: 999px; padding: 3px 10px; font-size: 12px; color: var(--muted); }
.chip.on { background: var(--forest); border-color: var(--forest); color: #fff; }
.lib { display: flex; flex-direction: column; gap: 6px; }
.pcard { display: grid; grid-template-columns: 54px 1fr auto; gap: 9px; align-items: center; padding: 6px; border: 1.5px solid transparent; border-radius: 10px; background: #fbfaf5; cursor: pointer; }
.pcard:hover { border-color: #c9d2b0; }
.pcard.on { border-color: var(--forest); background: #f1f5e6; }
.pcard img { width: 54px; height: 40px; object-fit: cover; border-radius: 6px; display: block; background: var(--soft); }
.pcard .nm { font-weight: 700; font-size: 13px; line-height: 1.15; }
.pcard .meta { font-size: 11px; color: var(--muted); line-height: 1.25; }
.tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; margin-right: 3px; vertical-align: 1px; }
.tag.nat { background: #E1EBCB; color: #3F6B3A; }
.tag.gar { background: #F3DDEA; color: #8A3F72; }
.tag.daisy { background: #FBEBC4; color: #8A6410; }
.tick { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--rule); display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 900; }
.pcard.on .tick { background: var(--forest); border-color: var(--forest); }
.empty { color: var(--muted); font-size: 12.5px; padding: 8px 2px; }

/* plan editor */
.plan-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: #fff; padding: 6px 11px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.seg button.on { background: var(--forest); color: #fff; }
.planwrap { position: relative; border: 1px solid var(--rule); border-radius: 12px; background: #fff; overflow: hidden; }
#plan { width: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
#plan.placing { cursor: crosshair; }
#plan.drawing { cursor: crosshair; }
.pl circle.pc { stroke: #fff; stroke-width: .05; cursor: grab; transition: opacity .12s; }
.pl.dim circle.pc, .pl.dim text { opacity: .28; }
.pl.hl circle.pc { stroke: #2E3A2C; stroke-width: .09; }
.pl.bad circle.pc { stroke: var(--warn); stroke-width: .1; stroke-dasharray: .18 .12; }
.pl text { pointer-events: none; font-family: var(--sans); font-weight: 700; text-anchor: middle; }
.statbar { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.statbar b { color: var(--ink); }
.notice { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #FDF1E3; border: 1px solid #F0D3A8; color: #7A4B10; font-size: 12.5px; }
.armed { display: none; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 999px; background: #FFF3D6; border: 1px solid #F0D49A; font-size: 12.5px; }
.armed.on { display: inline-flex; }
.gridtoggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); font-weight: 600; cursor: pointer; }
.gridtoggle input { margin: 0; cursor: pointer; }

/* right-click plant menu */
.ctxmenu { position: fixed; z-index: 500; background: #fff; border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 5px; min-width: 170px; font-size: 13px; }
.ctxitem { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 7px; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.ctxitem:hover { background: var(--soft); }
.ctxitem.danger { color: var(--warn); }
.ctxitem .arrow { color: var(--muted); font-weight: 400; }
.ctxsep { height: 1px; background: var(--rule); margin: 4px 2px; }
.ctxmenu .has-sub { position: relative; }
.ctxsub { position: absolute; top: -5px; left: 100%; margin-left: 2px; background: #fff; border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 5px; min-width: 160px; display: none; max-height: 220px; overflow-y: auto; }
.ctxmenu .has-sub:hover .ctxsub, .ctxmenu .has-sub.open .ctxsub { display: block; }
.ctxsub .ctxitem { font-weight: 500; }
.ctxitem.on { background: var(--soft); }
.ctxitem.on .check { color: var(--forest); }
.ctxitem .check { width: 14px; color: transparent; font-weight: 700; }

/* popup "select" buttons: open a ctxmenu instead of a native dropdown */
.selbtn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; font-weight: 600; }
.selbtn::after { content: "▾"; color: var(--muted); font-size: 11px; margin-left: 4px; }
.selbtn.open { background: var(--soft); border-color: #c9c2a8; }
.selmenu { max-height: 260px; overflow-y: auto; }

/* bloom chart */
.bloom { --label: 250px; }
.bloom-head, .brow { display: grid; grid-template-columns: var(--label) 1fr; align-items: center; }
.bloom-head { position: sticky; top: 56px; z-index: 5; background: #fff; border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
.months { display: grid; grid-template-columns: repeat(8, 1fr); font-size: 11px; color: var(--muted); text-align: center; font-weight: 700; }
.zone-head { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); padding: 14px 4px 5px; }
.zone-head:first-child { padding-top: 2px; }
.zone-head .zh-hrs { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--muted, #6b6b5e); margin-left: 4px; }
.zone-head .zh-hrs::before { content: "· "; }
.zone-head i { width: 11px; height: 11px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset; }
.brow { min-height: 34px; border-bottom: 1px solid #f0ecdd; cursor: pointer; border-radius: 6px; }
.brow:hover, .brow.hl { background: #f6f8ec; }
.brow.off .bar, .brow.off .lab { opacity: .45; }
.brow .lab { display: grid; grid-template-columns: 36px 1fr; gap: 7px; align-items: center; padding: 3px 4px; font-size: 12.5px; }
.brow .lab img { width: 36px; height: 27px; object-fit: cover; border-radius: 4px; }
.brow .lab .nm { font-weight: 700; line-height: 1.1; }
.brow .lab .nm small { display: block; font-weight: 400; color: var(--muted); font-size: 10.5px; }
.cb { width: 18px; height: 18px; border: 2px solid var(--rule); border-radius: 5px; display: grid; place-items: center; font-size: 12px; color: #fff; font-weight: 900; background: #fff; }
.brow:not(.off) .cb { background: var(--forest); border-color: var(--forest); }
.track { position: relative; height: 22px; background-image: linear-gradient(to right, #ece7d4 1px, transparent 1px); background-size: 12.5% 100%; border-right: 1px solid #ece7d4; }
.bar { position: absolute; top: 3px; height: 16px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.bar.leaf { background: repeating-linear-gradient(90deg, #A9C98F 0 6px, #C8DDB4 6px 12px); box-shadow: none; opacity: .85; }
.cover { display: grid; grid-template-columns: var(--label) 1fr; margin-top: 8px; align-items: center; }
.covcells { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.covcell { height: 24px; border-radius: 4px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; }
.legend-note { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* small-to-big chart */
.ochart { position: relative; }
.ochart-in { position: relative; padding: 8px 14px 10px 0; }
.gridlines { position: absolute; left: 0; right: 0; top: 8px; pointer-events: none; }
.gridlines div { position: absolute; left: 0; right: 0; border-top: 1px dashed #e4dfca; }
.gridlines span { position: absolute; left: 6px; transform: translateY(-50%); background: #fbfaf4; padding: 0 3px; font-size: 10px; color: var(--muted); }
.ocol { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 2px; border-radius: 10px; cursor: pointer; }
.ocol:hover, .ocol.hl { background: rgba(94,143,78,.1); }
.ocol svg.sil { display: block; overflow: hidden; position: relative; z-index: 1; }
.ocol .dim { width: 100%; margin-top: 3px; position: relative; height: 15px; }
.ocol .dim i { position: absolute; left: 0; right: 0; top: 7px; border-top: 1.5px solid #8b8f80; }
.ocol .dim i:before, .ocol .dim i:after { content: ""; position: absolute; top: -5px; height: 9px; border-left: 1.5px solid #8b8f80; }
.ocol .dim i:before { left: 0; } .ocol .dim i:after { right: 0; }
.ocol .dim b { position: absolute; left: 50%; top: 0; transform: translateX(-50%); background: #fbfaf4; padding: 0 4px; font-size: 10.5px; color: #4b5244; white-space: nowrap; }
.ocol img { width: 84px; height: 63px; object-fit: cover; border-radius: 7px; margin-top: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.ocol .on { font-weight: 700; font-size: 11.5px; line-height: 1.15; margin-top: 4px; max-width: 100%; }
.ocol .oh { font-size: 10.5px; color: var(--muted); }
.stepper { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }
.stepper button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--rule); background: #fff; font-weight: 800; line-height: 1; padding: 0; color: var(--forest-d); }
.stepper button:hover { background: var(--soft); }
.stepper span { min-width: 22px; text-align: center; font-weight: 700; font-size: 12.5px; }
.oaxis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); font-weight: 700; padding: 4px 14px 0 44px; }
.scale-note { font-size: 11.5px; color: var(--muted); margin-top: 8px; }

/* shopping list */
table.list { width: 100%; border-collapse: collapse; font-size: 13px; }
table.list th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--rule); }
table.list td { padding: 6px 8px; border-bottom: 1px solid #f0ecdd; vertical-align: middle; }
table.list td img { width: 34px; height: 26px; object-fit: cover; border-radius: 4px; vertical-align: middle; margin-right: 8px; }
table.list tr:hover td { background: #f8f9f0; }
table.list tfoot td { font-weight: 800; border-bottom: 0; }

.toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); opacity: 0; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 13px; transition: .25s; pointer-events: none; z-index: 60; max-width: 90vw; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.pvw { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: #5d675a; }
.pvw[hidden] { display: none; }
.pvw-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--line, #d8dccf); box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.pvw-title { flex: 1; min-width: 0; font-weight: 600; color: var(--ink, #2E3A2C); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.pvw-body { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0 24px; }
.pvw-body iframe { flex: 1; width: 100%; border: 0; background: #5d675a; align-self: stretch; }
.pvw-body canvas { display: block; max-width: calc(100% - 16px); height: auto !important; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.35); }
.pvw-msg { color: #fff; padding: 30px 20px; text-align: center; }
@media (max-width: 560px) { .pvw-bar { gap: 6px; padding: 8px; } .pvw-bar .btn { padding: 8px 10px; font-size: 14px; } .pvw-title { display: none; } #pvSave { margin-left: auto; } }
.overlay { position: fixed; inset: 0; background: rgba(46,58,44,.45); display: none; place-items: center; z-index: 50; }
.overlay.on { display: grid; }
.modal { background: #fff; border-radius: 14px; padding: 20px 22px; width: min(460px, 92vw); max-height: 82vh; box-shadow: 0 20px 60px rgba(0,0,0,.3); display: flex; flex-direction: column; }
.modal h2 { font-size: 20px; margin-bottom: 6px; }
.modal.wide { width: min(640px, 94vw); }
.modal-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.modal-head h2 { margin-bottom: 0; }
.modal-x { border: 0; background: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 2px; border-radius: 6px; flex: none; }
.modal-x:hover { color: var(--ink); background: var(--soft); }
/* top and bottom stay put; only the middle "scroll" section scrolls */
.modal-top { flex: none; }
.modal-top:not(:empty) { margin-bottom: 10px; }
.modal-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.modal-bottom { flex: none; }
.modal-bottom:not(:empty) { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
.modal-top.fillpick, .modal-scroll.fillpick, .modal-bottom.fillpick { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; align-content: flex-start; justify-content: flex-start; margin: 0; padding: 0; background: transparent; border: 0; height: auto; overflow-y: visible; box-sizing: content-box; }
.modal-top.fillpick:not(:empty) { margin-bottom: 10px; }
.modal-scroll.fillpick { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.modal-bottom.fillpick:not(:empty) { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
.progress { height: 8px; background: var(--soft); border-radius: 999px; overflow: hidden; margin: 12px 0 4px; }
.progress i { display: block; height: 100%; width: 0; background: var(--forest); transition: width .2s; }
.tip { font-size: 12px; color: var(--muted); }

@media (max-width: 1050px) {
  .layout { grid-template-columns: 1fr; }
  .left { position: static; max-height: none; }
  .bloom { --label: 170px; }
}
@media print {
  .top, .left, .plan-tools, .toast, .stepper button, .armed, .filters { display: none !important; }
  body { background: #fff; }
  .layout { display: block; padding: 0; }
  .card { box-shadow: none; break-inside: avoid; margin-bottom: 14px; }
  @page { size: letter landscape; margin: .4in; }
}

.pcard img, .brow img, .ochart img, #shop img { cursor: zoom-in; }
.magbtn { position: fixed; z-index: 60; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 0; background: rgba(30,40,28,.82); color: #fff; display: none; align-items: center; justify-content: center; cursor: zoom-in; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.magbtn.on { display: flex; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(20,26,18,.82); display: none; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.lightbox.on { display: flex; }
.lightbox figure { margin: 0; max-width: min(92vw, 1000px); text-align: center; }
.lightbox img { max-width: 100%; max-height: 80vh; border-radius: 10px; box-shadow: 0 8px 40px rgba(0,0,0,.5); background: #fff; }
.lightbox figcaption { color: #fff; margin-top: 10px; font-size: 15px; }
.lightbox .lbmore { display: inline-block; margin-top: 12px; text-decoration: none; cursor: pointer; font-size: 14px; padding: 8px 18px; }
.lightbox .lbmore[hidden] { display: none; }
.lbx { position: absolute; top: 14px; right: 18px; background: none; border: 0; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }

.namefield { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 12px; font-size: 12px; font-weight: 700; color: var(--muted); }
.namefield input { font-size: 15px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 8px; font-weight: 600; color: var(--ink, #2E3A2C); }
.pgroup { margin-top: 12px; }
.plabel { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.plabel small { font-weight: 400; }
.chip.tox.on { background: #F6D9D5; border-color: #E3A9A2; color: #9A2E24; font-weight: 600; }
.chip.o-nat.on { background: #E1EBCB; border-color: #B5CC8E; color: #3F6B3A; font-weight: 600; }
.chip.o-gar.on { background: #F3DDEA; border-color: #D9A9C6; color: #8A3F72; font-weight: 600; }
.chip.o-kind.on { background: #DCEBEE; border-color: #A7C8CF; color: #2F6470; font-weight: 600; }
.chip.o-sun.on { background: #E5E2F3; border-color: #BDB7DD; color: #4F4A8A; font-weight: 600; }
.chip.daisy.on { background: #FBEBC4; border-color: #E6C57A; color: #8A6410; font-weight: 600; }
.tag.tox { background: #F6D9D5; color: #9A2E24; }
.tag.off { background: #EEE; color: #777; }
.brow .toxdot { color: #A8423A; font-weight: 700; margin-left: 4px; }

.brow .toxpill { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 9px; background: #B8392E; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .05em; vertical-align: 1px; }
.ocol .toxflag { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); background: #B8392E; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .06em; padding: 1px 8px; border-radius: 0 0 8px 8px; z-index: 2; }
.ocol .toxwho { color: #B8392E; font-size: 10px; font-weight: 700; }
.pl .tx { pointer-events: none; }
/* the sun badge takes hover so it can show how many hours of sun the plant needs; pressing it still drags the plant */
.pl .tx.sunb { pointer-events: auto; cursor: grab; }
.pl.dim .tx { opacity: .28; }

.plan-tools .tools-right { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.notice .askrow { margin-top: 7px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.notice .askrow { display: block; } .notice .askbtns { margin-top: 6px; display: flex; gap: 8px; }

.fillpick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; margin: 10px 0 10px; padding: 8px 10px; background: #F1F6E8; border: 1px solid #D5E3C0; border-radius: 10px; }
.fillpick[hidden] { display: none; }
.fillpick .fp-lab { font-size: 12.5px; font-weight: 700; color: #3F6B3A; margin-right: auto; }
.fillpick .chip { display: inline-flex; align-items: center; gap: 6px; }
.fillpick .chip img { width: 22px; height: 16px; object-fit: cover; border-radius: 3px; }
.fillpick .chip small { font-size: 10px; opacity: .75; }


.fillpick .fp-lab.idle { font-weight: 600; color: #5E7A52; }
.fillpick .fillgo { font-weight: 600; font-size: 12px; padding: 4px 9px; }
.fillpick .fillgo:hover:not(:disabled) { background: #f6f8ec; }
.fillpick .fillgo:disabled { opacity: .45; cursor: not-allowed; }
.fillpick .fp-acts { flex-basis: 100%; display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* selection spotlight */
svg.hasSel .pl:not(.sel) circle.pc, svg.hasSel .pl:not(.sel) text, svg.hasSel .pl:not(.sel) .tx { opacity: .4; }
.pl.sel circle.pc { stroke-width: .12; }

.fillpick .po-info { display: flex; align-items: center; gap: 10px; margin-right: auto; min-width: 0; }
.fillpick .po-info img { width: 48px; height: 36px; object-fit: cover; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.2); flex: none; }
.fillpick .po-name { font-weight: 800; font-size: 14px; color: #2E3A2C; }
.fillpick .po-sub { font-size: 11.5px; color: #5E7A52; }
.fillpick .toxpill { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 9px; background: #B8392E; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .05em; vertical-align: 1px; }

.fillpick .po-acts { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; padding-left: 0; margin-top: 2px; }

.fillpick .fp-full { flex-basis: 100%; }
.fillpick .fp-tiles { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.fillpick .fp-tile { width: 112px; background: #fff; border: 2px solid #DDD7C4; border-radius: 10px; padding: 5px; cursor: pointer; text-align: center; }
.fillpick .fp-tile:hover { border-color: #c9c2a8; }
.fillpick .fp-tile.on { border-color: #3F6B3A; background: #EEF5E6; box-shadow: 0 0 0 1px #3F6B3A inset; }
.fillpick .fp-tile img { display: block; width: 100%; height: 72px; object-fit: cover; border-radius: 6px; cursor: zoom-in; }
.fillpick .fp-tn { font-size: 11.5px; font-weight: 700; margin-top: 4px; line-height: 1.15; color: #2E3A2C; }
.fillpick .fp-tile small { font-size: 10px; color: #5E7A52; }
.fillpick .fp-tile.on .fp-tn { color: #3F6B3A; }

/* selection bar: hidden until something is selected (see JS), then grows with the selection up to about two tile rows before it scrolls */
.fillpick { height: auto; max-height: 280px; box-sizing: border-box; overflow-y: auto; align-content: flex-start; }
.fillpick .po-info { min-height: 44px; }
.fillpick .fp-tile.tox { border-color: #B8392E; background: #FBE9E6; }
.fillpick .fp-tile .toxtxt { color: #B8392E; }
.fillpick .fp-hint { display: block; font-size: 11.5px; color: #5E7A52; font-weight: 400; margin-top: 2px; }
.fillpick .po-acts .btn { font-weight: 600; }

.sitefoot { margin: 24px 0 0; padding: 14px max(20px, calc((100% - 1700px) / 2 + 20px)); display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; background: rgba(246,243,234,.95); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-top: 1px solid var(--rule); color: var(--muted); font-size: 12.5px; }   /* a bar like the top bar, so it reads over the flower background */
.sitefoot a { color: var(--forest); font-weight: 600; }
@media print { .sitefoot { display: none; } }
.fillpick .fp-desc { flex-basis: 100%; font-size: 13px; color: #2E3A2C; }
.fillpick .fp-desc p { margin: 0 0 9px; }

@media (max-width: 600px) { table.list { display: block; overflow-x: auto; max-width: 100%; } }

.ocol .oh-top { position: absolute; left: 0; right: 0; text-align: center; font-size: 10.5px; font-weight: 700; color: #4b5244; white-space: nowrap; }


/* small to big: drawn like the PDF side view */
.orow { position: relative; background: #F7F5EE; border: 1px solid #D9D3C2; border-radius: 12px; padding: 0 14px 12px 34px; margin-bottom: 10px; }
.orow .otitle { position: absolute; left: 14px; top: 9px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: #6B7464; z-index: 2; }
.orow .otitle span { font-weight: 600; letter-spacing: 0; }
.orow .otitle em { font-style: normal; font-weight: 600; letter-spacing: 0; color: #A8578A; margin-left: 10px; }
.orow .gridlines { position: absolute; left: 0; right: 12px; top: 0; pointer-events: none; }
.orow .gridlines div { left: 34px; border-top: 1px dashed #CFC8B2; }
.orow .gridlines span { left: -26px; background: none; padding: 0; font-size: 10px; color: #6B7464; }
.oground { position: absolute; left: 8px; right: 8px; height: 4px; background: #B89A74; z-index: 2; }
.orow-cols { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 6px; }
.ocol .oplot { position: relative; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.ocol .dim { margin-top: 10px; }
.gf { color: #A8578A; font-weight: 700; }
.ofrontback { display: flex; align-items: center; gap: 12px; background: #B89A74; color: #fff; border-radius: 6px; padding: 5px 12px; font-size: 11px; font-weight: 800; letter-spacing: .03em; }
.ofrontback small { font-size: 11px; font-weight: 600; letter-spacing: 0; }
.ofrontback i { flex: 1; height: 1px; background: #fff; position: relative; margin: 0 8px; }
.ofrontback i::after { content: ""; position: absolute; right: -2px; top: -4px; border-left: 8px solid #fff; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.df { color: #B7791F; font-weight: 700; }
.orow .otitle em.dk { color: #B7791F; margin-left: 6px; }

/* goes well with (options bar) */
.fillpick .po-comp { display: flex; flex-direction: column; gap: 4px; padding-left: 14px; margin-left: 4px; border-left: 1px solid #d5dcc6; min-width: 0; flex: 1; }
.fillpick .po-comp-h { font-size: 12px; color: #3f6b3a; }
.fillpick .po-comp-h span { color: var(--muted); font-size: 11.5px; margin-left: 6px; }
.fillpick .po-comp-tiles { display: flex; flex-wrap: wrap; gap: 6px; }
.fillpick .fp-tile.comp { width: 96px; cursor: pointer; }
.fillpick .fp-tile.comp img { height: 56px; }
.fillpick .fp-tile.comp small { color: #3f6b3a; font-weight: 600; }
.fillpick .fp-tile.comp:hover { border-color: #3f6b3a; box-shadow: 0 0 0 2px rgba(63,107,58,.25); }
.fillpick .po-why { font-size: 11.5px; color: #4b5244; line-height: 1.35; min-height: 16px; }
.fillpick .po-why a { color: #3f6b3a; font-weight: 600; }
.fillpick .fp-tile.comp img { cursor: pointer; }

/* plant icons with hover labels */
.ics { display: inline-flex; gap: 3px; margin-left: 5px; vertical-align: -1px; }
.ic { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; font-size: 9px; font-weight: 800; line-height: 1; cursor: help; flex: none; font-style: normal; }
.ic svg { width: 10px; height: 10px; }
.ic-nat { background: #E1EBCB; color: #3F6B3A; }
.ic-gar { background: #F3DDEA; color: #8A3F72; font-size: 8px; }
.ic-df { background: #FBEBC4; color: #8A6410; font-size: 10px; }
.ic-tox { background: #B8392E; color: #fff; }
.ic-cold { background: #4F7FB4; color: #fff; }
.sc-cold { color: #2F5D8C; font-weight: 600; margin-top: 2px; }
.ic-off { background: #EEE; color: #777; }
.ickey { white-space: normal; }
.ickey .ic { margin: 0 2px 0 6px; vertical-align: -2px; }
.chip svg { width: 11px; height: 11px; vertical-align: -1px; }
.chip .chipic { width: 13px; height: 13px; vertical-align: -2px; margin-left: 2px; cursor: inherit; }
#ictip { position: fixed; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity .12s; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.15); white-space: nowrap; left: -999px; top: -999px; }
#ictip.on { opacity: 1; }
#ictip.k-nat { background: #E1EBCB; color: #3F6B3A; }
#ictip.k-gar { background: #F3DDEA; color: #8A3F72; }
#ictip.k-daisy { background: #FBEBC4; color: #8A6410; }
#ictip.k-tox { background: #F6D9D5; color: #9A2E24; }
#ictip.k-off { background: #EEE; color: #555; }
#ictip.k-cold { background: #DCE7F3; color: #2F5D8C; }
.okey { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.wfit { display: block; color: #9A2E24; font-size: 11px; font-weight: 600; margin-left: 0; }
.brow.sel { background: #E5E2F3 !important; box-shadow: inset 3px 0 0 #6E64B0; }
.ocol.sel { outline: 2px solid #6E64B0; outline-offset: -1px; border-radius: 10px; background: rgba(229,226,243,.55); }
.brow.sel.hl-tox { background: #F6D9D5 !important; box-shadow: inset 3px 0 0 #B8392E; }
.brow.sel.hl-deer { background: #EFE2D3 !important; box-shadow: inset 3px 0 0 #7A5230; }
.brow.sel.hl-daisy { background: #FBEBC4 !important; box-shadow: inset 3px 0 0 #C99A1E; }
.brow.sel.hl-nat { background: #E1EBCB !important; box-shadow: inset 3px 0 0 #5E8F4A; }
.brow.sel.hl-gar { background: #F3DDEA !important; box-shadow: inset 3px 0 0 #B8629B; }
.ocol.sel.hl-tox { outline-color: #B8392E; background: rgba(246,217,213,.7); }
.ocol.sel.hl-deer { outline-color: #7A5230; background: rgba(239,226,211,.8); }
.ocol.sel.hl-daisy { outline-color: #C99A1E; background: rgba(251,235,196,.8); }
.ocol.sel.hl-nat { outline-color: #5E8F4A; background: rgba(225,235,203,.8); }
.ocol.sel.hl-gar { outline-color: #B8629B; background: rgba(243,221,234,.8); }
.orow-cols { align-items: stretch !important; }
.ocol { align-self: stretch; }
.brow:not(.off), .ocol { cursor: pointer; }
.brow .addbtn { margin-left: 8px; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--forest); background: #fff; color: var(--forest); cursor: pointer; }
.brow .addbtn:hover { background: var(--forest); color: #fff; }
.ic-deer { background: #EFE2D3; color: #7A5230; }
#ictip.k-deer { background: #EFE2D3; color: #6A4526; }
.ic-sun { color: #fff; }
#ictip.k-sun { background: #B5A153; color: #fff; }
/* sun tips are two lines: the plant's light, then how many hours of direct sun it needs */
#ictip.k-sun { white-space: pre-line; max-width: 300px; border-radius: 10px; line-height: 1.4; text-align: left; padding: 5px 10px; }
.chip.deer.on { background: #EFE2D3; border-color: #CDB291; color: #6A4526; font-weight: 600; }
.bulbn { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; }

#shop tr.sel td { background: #E5E2F3; }
#shop tr.sel.hl-tox td { background: #F6D9D5; }
#shop tr.sel.hl-deer td { background: #EFE2D3; }
#shop tr.sel.hl-daisy td { background: #FBEBC4; }
#shop tr.sel.hl-nat td { background: #E1EBCB; }
#shop tr.sel.hl-gar td { background: #F3DDEA; }
.modalov { position: fixed; inset: 0; background: rgba(40,44,36,.45); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modalbox { background: #fff; border-radius: 14px; padding: 20px 22px; max-width: 460px; box-shadow: 0 10px 40px rgba(0,0,0,.25); font-size: 14px; line-height: 1.45; }
.modalbox h3 { margin: 0 0 8px; font-size: 17px; }
.modalbox p { margin: 6px 0; }
.modalbox .askbtns { display: flex; gap: 8px; margin-top: 14px; }

/* care timing */
.brow .track { height: 36px; }
.brow .bar { top: 3px; height: 15px; }
.cpill { position: absolute; top: 22px; height: 11px; border-radius: 6px; display: flex; align-items: center; gap: 3px; padding: 0 2px; font-size: 8px; line-height: 1; color: #fff; cursor: help; box-sizing: border-box; overflow: hidden; white-space: nowrap; }
.cpill i { font-style: normal; display: inline-flex; width: 8px; height: 8px; align-items: center; justify-content: center; flex: none; }
.cpill i svg { width: 8px; height: 8px; }
.cpill.k-prep { background: #7FA86A; }
.cpill.k-cut { background: #9C7B5B; }
.cpill.k-trim { background: #fff; color: #8A6A4A; border: 1px dashed #9C7B5B; }
.cpill.k-divide { background: #8C7FC0; }
.cpill.k-bulbs { background: #7FA86A; }
.cpill.k-mulch { background: #A68C72; }
.cpill.k-lift { background: #4F7FB4; }
.cpill.k-replant { background: #6F9AC9; }
.cpill.big { position: absolute; top: 3px; height: 18px; border-radius: 9px; font-size: 10.5px; padding: 0 6px; }
.cpill.big i { width: 11px; height: 11px; font-size: 10px; }
.cpill.big i svg { width: 11px; height: 11px; }
.cpill.big b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.gcare { border-bottom: 2px solid #e4dcc4; padding: 0 0 8px; margin-bottom: 2px; }
.gc-lab { padding: 0 6px; font-size: 12.5px; line-height: 1.2; }
.gc-lab small { display: block; color: var(--muted); font-size: 10.5px; }
.gc-track { background-image: linear-gradient(to right, #ece7d4 1px, transparent 1px); background-size: 12.5% 100%; border-right: 1px solid #ece7d4; }
.gc-lane { position: relative; height: 24px; }
.gc-key { grid-column: 1 / -1; font-size: 11px; color: var(--muted); padding: 6px 6px 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.gc-key .cpill { position: static; width: 22px; margin-left: 8px; }
.gc-key .cpill:first-child { margin-left: 0; }
#ictip.k-prep, #ictip.k-cut, #ictip.k-trim, #ictip.k-divide, #ictip.k-bulbs, #ictip.k-mulch, #ictip.k-lift, #ictip.k-replant { white-space: normal; max-width: 320px; border-radius: 10px; font-weight: 600; line-height: 1.4; padding: 6px 10px; }
#ictip.k-prep { background: #E4EEDA; color: #3F6B3A; }
#ictip.k-cut, #ictip.k-trim, #ictip.k-mulch { background: #EFE6DA; color: #5E4430; }
#ictip.k-divide { background: #E8E4F4; color: #4A3F86; }
#ictip.k-bulbs { background: #E4EEDA; color: #3F6B3A; }
#ictip.k-lift, #ictip.k-replant { background: #DCE7F3; color: #2F5D8C; }
.cpill.big.k-mulch i { display: none; }
.cpill.big.k-mulch { justify-content: center; padding: 0 3px; }

/* bloom bars: nearly full row height, care marks centered on the same line */
.brow .track { height: 38px; }
.brow .bar { top: 4px; height: 30px; border-radius: 15px; }
.brow .cpill { top: 11.5px; height: 11px; box-shadow: 0 0 0 1px #fff; }

#shop tr[data-id] { cursor: pointer; }
.ovlist { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; max-height: 50vh; overflow: auto; }
.ovrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-weight: 600; }
.ovrow span { flex: 1 1 100%; }

/* undo / redo */
.undogrp { display: inline-flex; gap: 4px; }
.btn.ibtn { padding: 4px 9px; font-size: 15px; line-height: 1; }
.btn.ibtn:disabled { opacity: .4; cursor: default; }
.btn.small.on { background: #EEF5E6; border-color: #3F6B3A; color: #2F5430; }

/* plants in light that doesn't suit them */
.pl.wl circle.pc { stroke: #E0A800; stroke-width: .11; stroke-dasharray: .09 .09; }

/* objects on the plan */
.ob { cursor: grab; }
.obh { cursor: pointer; }
#plan.painting { cursor: crosshair; }
#plan.painting .pl, #plan.painting .ob { pointer-events: none; }
#plan.painting .player, #plan.painting .olayer { opacity: .5; }
#plan.placing .pl, #plan.placing .ob { pointer-events: none; }
.objmenu { min-width: 210px; }
.objmenu .ctxitem small { color: var(--muted); font-weight: 500; font-size: 11px; }
.oic { display: inline-block; width: 18px; text-align: center; font-style: normal; margin-right: 6px; color: #6F6B62; }
.oic-shrub, .oic-hedge, .oic-tree { color: #557A47; } .oic-stump { color: #A27A55; } .oic-birdbath { color: #6FA6C0; }
.objfields { flex-basis: 100%; display: flex; gap: 12px; flex-wrap: wrap; }
.objfields .field { width: 130px; }

/* sun paint bar */
.paintbar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 0 0 10px; padding: 8px 10px; background: #FBF6E4; border: 1px solid #EBDDAF; border-radius: 10px; }
.paintbar[hidden] { display: none; }
.paintbar .pb-grp { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.paintbar .pb-right { margin-left: auto; }
.paintbar .pb-lab { font-size: 12px; font-weight: 700; color: #6E5010; }
.paintbar select { width: auto; padding: 4px 6px; font-size: 12.5px; }
.paintbar .pb-hint { flex-basis: 100%; margin: 0; font-size: 11.5px; color: #7A6A3A; }
.zbtn { display: inline-flex; align-items: center; gap: 6px; }
.zsw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.25); }
.zsw.zerase { background: repeating-linear-gradient(45deg, #fff 0 3px, #ddd 3px 6px); }

/* fill gaps: groundcover or companions */
.fillpick .fp-moderow { display: flex; align-items: center; gap: 10px; }
.fillpick .fp-moderow .fp-lab { margin-right: 0; }

/* outline drawing toolbar */
.drawbar { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; align-items: center; background: #fff; border: 1px solid #DDD7C4; border-radius: 10px; padding: 6px 8px; box-shadow: 0 4px 14px rgba(0,0,0,.12); z-index: 3; flex-wrap: wrap; max-width: calc(100% - 20px); }
.drawbar select { width: auto; padding: 4px 6px; font-size: 12px; }
.drawbar .tip { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.ob.out { opacity: .35; }
.gridtoggle[hidden] { display: none; }
.ctxhead { padding: 5px 10px 4px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* hours next to each Paint sun brush name */
.zbtn .zhrs { font-weight: 500; opacity: .7; font-size: .92em; }

/* ---------- bed plan: toolbar menus, right-click menus, the card beside a selection, the paint palette ---------- */
.plan-tools .tmenu { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 5px 11px; }
.plan-tools .tmenu .caret { font-size: 10px; color: var(--muted); }
.plan-tools .tmenu.on { border-color: var(--forest); background: #EAF2DF; color: var(--forest-d); }
.plan-tools .tools-hint { margin-left: auto; font-size: 12px; color: var(--muted); }
.plan-tools .tools-hint[hidden] { display: none; }
.ctxitem small { color: var(--muted); font-weight: 500; font-size: 11px; white-space: nowrap; }
.ctxitem:disabled { opacity: .45; cursor: default; background: none; }
.ctxitem .ctxl { display: inline-flex; align-items: center; flex: 1; }
.ctxmenu .ctxitem .check { flex: none; }
.oic-plant { color: #B4548A; }

.selcard { position: absolute; z-index: 20; width: 300px; max-height: calc(100% - 12px); overflow-y: auto; box-sizing: border-box; background: #fff; border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 10px 28px rgba(40,40,20,.2); padding: 10px 12px 12px; font-size: 12.5px; color: var(--ink); }
.selcard[hidden] { display: none; }
.selcard.addcard { width: 320px; }
.sc-head { position: relative; display: flex; align-items: center; gap: 10px; padding-right: 22px; }
.sc-head img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; flex: none; background: var(--soft); }
.sc-name { font-weight: 800; font-size: 14px; color: var(--forest-d); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sc-sub { font-size: 11.5px; color: var(--muted); font-style: italic; line-height: 1.35; }
.sc-oic { font-size: 18px; flex: none; }
.sc-oic .oic { width: 26px; margin: 0; font-size: 20px; }
.sc-x { position: absolute; top: -6px; right: -6px; border: 0; background: none; font-size: 21px; line-height: 1; color: var(--muted); padding: 2px 5px; border-radius: 6px; cursor: pointer; }
.sc-x:hover { background: var(--soft); color: var(--ink); }
.sc-facts { margin: 9px 0 8px; color: #4A5246; line-height: 1.5; }
.sc-facts > span:not(:last-of-type)::after { content: " · "; color: #B6B09A; }
.sc-facts.sc-hint { color: var(--muted); font-size: 11.5px; }
.sc-sun { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-weight: 600; color: #5E5326; }
.sc-tox { margin-top: 3px; color: #9A2E24; font-weight: 600; }
.sc-lock { margin-top: 3px; color: #6E5010; font-weight: 600; }
.sc-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0; }
.sc-chip { border: 1px solid var(--rule); background: #fff; border-radius: 999px; padding: 3px 9px; font-size: 11.5px; cursor: pointer; }
/* hovering a name shows "Remove" in the same box (stacked, so the box keeps its width and nothing shifts) */
.sc-chip { display: inline-grid; }
.sc-chip > span { grid-area: 1 / 1; }
.sc-chip .sc-rm { visibility: hidden; color: var(--warn); font-weight: 700; text-align: center; }
.sc-chip:hover { border-color: var(--warn); background: #FCEDEA; }
.sc-chip:hover .sc-cn { visibility: hidden; }
.sc-chip:hover .sc-rm { visibility: visible; }
.sc-comp { border-top: 1px solid var(--rule); margin-top: 10px; padding-top: 8px; }
.sc-comp-h { font-size: 12px; margin-bottom: 4px; color: var(--forest-d); }
.sc-comp-h span { color: var(--muted); font-size: 11px; }
.sc-row { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 4px 6px; border-radius: 8px; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.sc-row:hover { background: var(--soft); }
.sc-row img { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; flex: none; background: var(--soft); }
.sc-row .sc-rn { flex: 1; font-weight: 700; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; line-height: 1.25; }
.sc-row .sc-rn em { flex-basis: 100%; font-style: normal; font-weight: 500; font-size: 11px; color: var(--muted); }
.sc-row small { color: var(--forest); font-weight: 700; white-space: nowrap; }
.sc-why { margin-top: 6px; font-size: 11.5px; color: #4A5246; line-height: 1.4; }
.sc-fields { display: flex; gap: 8px; margin: 2px 0 10px; }
.sc-fields label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); font-weight: 600; }
.sc-fields input { width: 76px; padding: 4px 6px; }
.sc-search { margin: 9px 0 6px; }
.sc-list { max-height: 300px; overflow-y: auto; margin: 0 -4px; }
.sc-sec { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px 6px 3px; }
.sc-empty { padding: 12px 6px; color: var(--muted); }

/* the paint palette floats over the top of the plan instead of pushing it down */
.planwrap .paintbar { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 15; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 6px 8px; background: rgba(255,251,238,.97); border: 1px solid #EBDDAF; border-radius: 12px; box-shadow: 0 6px 18px rgba(80,60,10,.15); }
.planwrap .paintbar[hidden] { display: none; }
.paintbar .pb-lab { font-size: 11.5px; font-weight: 700; color: #6E5010; }
.paintbar .pb-sep { width: 1px; height: 20px; background: #E5D8AC; margin: 0 2px; }
.paintbar .pb-grow { flex: 1; }
.paintbar .pb-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--rule); background: #fff; border-radius: 999px; padding: 4px 8px; font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer; }
.paintbar .pb-btn:hover { border-color: #c9c2a8; }
.paintbar .pb-btn.on { border-color: var(--forest); background: #EAF2DF; box-shadow: 0 0 0 1px var(--forest) inset; }
.paintbar .pb-size { width: 26px; height: 26px; justify-content: center; padding: 0; }
.paintbar .pb-dot { display: inline-block; border-radius: 50%; background: #6F6B5E; }
.paintbar select { width: auto; padding: 3px 6px; font-size: 12px; }
@media print { .selcard, .planwrap .paintbar { display: none !important; } }

/* holding Ctrl / Cmd / Shift to pick several plants: the card fades and lets clicks through to plants under it */
.selcard { transition: opacity .12s; }
.selcard.passthru { pointer-events: none; opacity: .15; }
.sc-head { cursor: move; }
.sc-head .sc-x { cursor: pointer; }
.sc-tip { margin-top: 9px; font-size: 11px; color: var(--muted); line-height: 1.4; }

/* ---------- step 1: your bed ---------- */
.bp-lab { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 12px 0 6px; }
#bedPanel .shapes { grid-template-columns: repeat(3, 1fr); gap: 8px; }
#bedPanel .shape { padding: 8px 4px 7px; font-size: 12px; font-weight: 600; color: #4A5246; border-radius: 12px; }
#bedPanel .shape svg { height: 40px; margin-bottom: 4px; }
#bedPanel .shape:hover { border-color: #c9c2a8; background: #FAFAF4; }
#bedPanel .shape.on { border-color: var(--forest); background: #EAF2DF; color: var(--forest-d); box-shadow: 0 0 0 1px var(--forest) inset; }
#bedPanel .hint { margin: 8px 0 2px; }
#bedPanel .dims { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.dimrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dimlab { display: flex; flex-direction: column; line-height: 1.2; }
.dimlab b { font-size: 13px; color: var(--ink); }
.dimlab span { font-size: 11px; color: var(--muted); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: #fff; flex: none; }
.stepper .stbtn { width: 34px; height: 34px; border: 0; background: var(--soft); font-size: 18px; font-weight: 700; color: var(--forest-d); cursor: pointer; line-height: 1; }
.stepper .stbtn:hover { background: #E1E8D2; }
.stepper .stbtn:disabled { color: #B9BBAE; cursor: default; background: #F4F4EE; }
.stepper input[type=number] { width: 54px; border: 0; border-radius: 0; text-align: right; font-size: 15px; font-weight: 700; padding: 6px 2px; -moz-appearance: textfield; }
.stepper input[type=number]::-webkit-outer-spin-button, .stepper input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input[type=number]:focus { outline: none; background: #FFFDF2; }
.stepper .stunit { font-size: 12px; color: var(--muted); padding: 0 8px 0 3px; }
.bp-draw { width: 100%; padding: 9px 12px; font-size: 13.5px; }
.seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg2btn { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; border: 1.5px solid var(--rule); background: #fff; border-radius: 10px; padding: 7px 10px; cursor: pointer; font: inherit; color: var(--ink); }
.seg2btn b { font-size: 13px; }
.seg2btn span { font-size: 11px; color: var(--muted); line-height: 1.25; }
.seg2btn:hover { border-color: #c9c2a8; }
.seg2btn.on { border-color: var(--forest); background: #EAF2DF; box-shadow: 0 0 0 1px var(--forest) inset; }
.seg2btn.on b { color: var(--forest-d); }
.bp-summary { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 4px; padding: 8px 12px; background: #F6F3EA; border-radius: 10px; font-size: 13px; }
.bp-summary:empty { display: none; }
.bp-summary b { color: var(--forest-d); font-size: 14px; }
.bp-summary span { color: var(--muted); }
/* the garden name sits at the top by itself */
#nameCard { padding: 14px 16px; }
#nameCard h2 { margin-bottom: 4px; }
#nameCard .namefield { margin: 0; }
#nameCard .namefield .opt { font-weight: 500; font-size: 12px; color: var(--muted); margin-bottom: 4px; }

/* ---------- step 2: what kind of garden ---------- */
#prefCard .bp-lab small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.pc-count { position: relative; overflow: hidden; margin: 10px 0 2px; padding: 7px 12px; border-radius: 10px; background: #F6F3EA; font-size: 13px; color: var(--muted); }
.pc-count b { color: var(--forest-d); font-size: 15px; }
.pc-count i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--leaf); border-radius: 0 3px 3px 0; transition: width .2s; }
.optlist { display: flex; flex-direction: column; gap: 6px; }
.optrow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1.5px solid var(--rule); background: #fff; border-radius: 10px; padding: 7px 10px; cursor: pointer; font: inherit; color: var(--ink); }
.optrow:hover { border-color: #c9c2a8; }
.optrow.on { border-color: var(--forest); background: #EAF2DF; box-shadow: 0 0 0 1px var(--forest) inset; }
.optrow .optsw { width: 24px; height: 24px; flex: none; margin: 0; }
.optrow .optsw svg { width: 15px; height: 15px; }
.optt { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.optt b { font-size: 13px; }
.optt span { font-size: 11px; color: var(--muted); }
.optrow small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.optck, .kck { width: 18px; height: 18px; flex: none; border-radius: 5px; border: 1.5px solid #C9C2A8; display: inline-grid; place-items: center; font-size: 12px; font-weight: 900; color: #fff; background: #fff; }
.optrow.on .optck, .kchip.on .kck { background: var(--forest); border-color: var(--forest); }
.seg2btn.ck b { display: flex; align-items: center; gap: 5px; }
.seg2btn.ck .ic { margin: 0; }
.kchips { margin-top: 8px; gap: 6px; }
.kchip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--rule); background: #fff; border-radius: 999px; padding: 4px 11px 4px 6px; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.kchip:hover { border-color: #c9c2a8; }
.kchip.on { border-color: var(--forest); background: #EAF2DF; color: var(--forest-d); }
.kchip .kck { width: 16px; height: 16px; border-radius: 50%; font-size: 10px; }
.avoid { display: flex; flex-direction: column; gap: 6px; }
.avrow { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; border: 1.5px solid var(--rule); border-radius: 10px; padding: 8px 10px; background: #fff; }
.avrow.on { border-color: #C9B27A; background: #FBF6E4; }
.avt { display: flex; flex-direction: column; line-height: 1.3; }
.avt b { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.avt b .ic { margin: 0; }
.avt span { font-size: 11.5px; color: var(--muted); }
.whybtn { border: 0; background: none; padding: 0; font: inherit; color: var(--forest); font-weight: 700; text-decoration: underline; cursor: pointer; }
.avmore { grid-column: 1 / -1; margin: 4px 0 0; font-size: 11.5px; color: #4A5246; line-height: 1.45; }
.switch { position: relative; width: 40px; height: 23px; border-radius: 999px; border: 0; background: #CFCAB8; cursor: pointer; flex: none; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; }
.switch.on { background: var(--forest); }
.switch.on::after { left: 20px; }

/* "Include / Leave out" on each plant-to-watch-out-for row: says exactly what it does */
.avrow { grid-template-columns: 1fr; }
.inout { display: inline-flex; justify-self: start; border: 1.5px solid var(--rule); border-radius: 999px; overflow: hidden; margin-top: 4px; }
.inout button { border: 0; background: #fff; padding: 4px 12px; font: inherit; font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; }
.inout button + button { border-left: 1.5px solid var(--rule); }
.inout button:hover { background: #F4F4EC; }
.inout .io-in.on { background: #EAF2DF; color: var(--forest-d); }
.inout .io-out.on { background: #F4E3B5; color: #6E5010; }
.avrow.on .inout { border-color: #D8C185; }

/* ---------- step 3: pick plants ---------- */
#libCard .lede .whybtn { font-size: inherit; }
.liboff { display: block; margin-top: 6px; color: #8A6410; }
.libkey { margin: 2px 0 10px; padding: 8px 10px; border-radius: 10px; background: #F6F3EA; font-size: 12px; line-height: 1.7; }
.libkey[hidden] { display: none; }
.libtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1.5px solid var(--rule); border-radius: 10px; overflow: hidden; margin: 4px 0 10px; }
.libtab { border: 0; background: #fff; padding: 8px 6px; font: inherit; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; }
.libtab + .libtab { border-left: 1.5px solid var(--rule); }
.libtab span { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--soft); font-size: 11.5px; color: var(--muted); }
.libtab:hover { background: #F7F7F0; }
.libtab.on { background: #EAF2DF; color: var(--forest-d); }
.libtab.on span { background: var(--forest); color: #fff; }
.qrow { flex-wrap: nowrap; }
.qrow #q { flex: 1; min-width: 0; }
.qrow #fReset { flex: none; white-space: nowrap; }
#fReset:disabled { opacity: .45; cursor: default; }
.libsort { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
.libsort .selbtn { width: auto; }
.libsort .libn { margin-left: auto; font-weight: 500; }
/* the plant list sits in the page (no scroll box); it shows 15 at a time with Show more / Show all */
.libmore { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 4px 2px; font-size: 12px; color: var(--muted); }
.libmore span { margin-right: auto; }
#libCard .pcard { grid-template-columns: 54px 1fr auto; }
#libCard .pc-main { min-width: 0; }
.pc-add { border: 1.5px solid var(--forest); background: #fff; color: var(--forest-d); font-weight: 700; font-size: 12px; border-radius: 999px; padding: 4px 11px; cursor: pointer; white-space: nowrap; }
.pc-add:hover { background: #EAF2DF; }
.pc-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--forest); border-radius: 999px; overflow: hidden; background: #fff; }
.pc-qty button { width: 26px; height: 26px; border: 0; background: #EAF2DF; color: var(--forest-d); font-size: 15px; font-weight: 800; cursor: pointer; line-height: 1; }
.pc-qty button:hover { background: #D9E8C6; }
.pc-qty b { min-width: 24px; text-align: center; font-size: 13px; color: var(--forest-d); }
#libCard .pcard.on { cursor: default; }

/* with plants selected or pointed at, the bed, its sun colors, grid and objects fade back too, so those plants stand out */
#plan .bedrim, #plan .soil, #plan .zlayer, #plan .glayer, #plan .olayer, #plan .clayer { transition: opacity .15s; }
svg.hasSel .bedrim, svg.hasSel .soil, svg.hasHover .bedrim, svg.hasHover .soil { opacity: .45; }
svg.hasSel .zlayer, svg.hasSel .glayer, svg.hasSel .olayer, svg.hasSel .clayer,
svg.hasHover .zlayer, svg.hasHover .glayer, svg.hasHover .olayer, svg.hasHover .clayer { opacity: .3; }

/* ---------- guided tour: a veil with holes over the step in use, and a coach card beside it ---------- */
#tourVeil { position: fixed; left: 0; top: 0; z-index: 45; pointer-events: none; }
#tourVeil .tv-dim { fill: rgba(34,40,30,.62); pointer-events: auto; cursor: default; }
#tourVeil .tv-ring { fill: none; stroke: #F2C40C; stroke-width: 3; filter: drop-shadow(0 0 6px rgba(242,196,12,.55)); pointer-events: none; }
#tourCoach { position: fixed; z-index: 46; width: 310px; max-width: calc(100vw - 20px); box-sizing: border-box; background: #fff; border-radius: 14px; padding: 14px 16px 12px; box-shadow: 0 14px 40px rgba(0,0,0,.32); border-top: 4px solid var(--forest); font-size: 13px; color: var(--ink); transition: left .25s ease, top .25s ease; }
#tourCoach .tc-kick { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--forest); }
#tourCoach .tc-dots { display: flex; gap: 4px; }
#tourCoach .tc-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--rule); }
#tourCoach .tc-dots i.done { background: var(--leaf); }
#tourCoach .tc-dots i.on { background: var(--forest); width: 18px; border-radius: 4px; }
#tourCoach h3 { margin: 6px 0 4px; font-size: 17px; }
#tourCoach p { margin: 0 0 12px; line-height: 1.5; }
#tourCoach .tc-acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
#tourCoach .tc-back { margin-right: auto; }
#tourCoach .tc-skip { display: block; margin: 8px auto 0; background: none; border: 0; color: var(--muted); font-size: 12px; text-decoration: underline; cursor: pointer; }
#tourCoach .tc-skip:hover { color: var(--ink); }
body.touring .toast { z-index: 60; }

/* ---------- steps 1 to 4: fold down to a summary once done ---------- */
.step .stephead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.step .stephead h2 { display: flex; align-items: center; gap: 7px; }
.step .stepck { display: none; width: 20px; height: 20px; border-radius: 50%; background: var(--forest); color: #fff; font-size: 12px; font-family: system-ui, sans-serif; align-items: center; justify-content: center; flex: none; }
.step.done .stepck { display: inline-flex; }
.step .steptog { background: none; border: 0; padding: 2px 0; color: var(--forest); font-size: 12px; font-weight: 700; text-decoration: underline; cursor: pointer; white-space: nowrap; }
.step .stepsum { display: none; font-size: 12.5px; color: var(--muted); margin: 4px 0 0 27px; line-height: 1.45; cursor: pointer; }
.step .stepsum b { color: var(--ink); font-weight: 700; }
.step:not(.open) { padding-top: 12px; padding-bottom: 12px; }
.step:not(.open), .step:not(.open) .stephead { cursor: pointer; }
.step:not(.open) .stepbody { display: none; }
.step:not(.open) .stepsum { display: block; }
.step:not(.open):hover { border-color: #c9c2a8; }
.step .stepfoot { display: flex; justify-content: flex-end; margin-top: 12px; }
body.touring .step .stepfoot { display: none; }
#nameCard .examplenote { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
#nameCard .examplenote .whybtn { font-size: inherit; }
#sunCard .sunpaintbtn { width: 100%; margin-top: 10px; }

/* ---------- step 3: objects ---------- */
#objCard .objgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
#objCard .objbtn { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 6px; text-align: left; padding: 7px 9px; border: 1px solid var(--rule); border-radius: 10px; background: #fff; cursor: pointer; font: inherit; color: var(--ink); }
#objCard .objbtn:hover { border-color: #c9c2a8; background: #FAFAF4; }
#objCard .objbtn.on { border-color: var(--forest); background: #EAF2DF; box-shadow: 0 0 0 1px var(--forest) inset; }
#objCard .objbtn .oic { grid-row: 1 / 3; width: 26px; margin: 0; font-size: 18px; }
#objCard .objbtn b { font-size: 12.5px; line-height: 1.2; }
#objCard .objbtn span { font-size: 11px; color: var(--muted); }
#objCard .objlist { margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
#objCard .objlist b { color: var(--ink); }
#bedPanel.isdrawing #dims .dimrow, #bedPanel.isdrawing #btnDraw, #bedPanel.isdrawing #bedSummary { display: none; }   /* while drawing: no size boxes, but the front-of-bed pad stays */

/* ---------- step 2: front of the bed ---------- */
#bedPanel .frontrow { display: flex; gap: 12px; align-items: center; }
#bedPanel .frontpad { flex: none; display: grid; grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(3, 30px); gap: 3px; padding: 6px; border-radius: 12px; background: #EFE6D8; box-shadow: inset 0 0 0 2px #C9AE92; }
#bedPanel .frontpad button { border: 1px solid transparent; border-radius: 7px; background: rgba(255,255,255,.55); color: #6F6B62; font-size: 15px; line-height: 1; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#bedPanel .frontpad button:hover { background: #fff; border-color: #c9c2a8; }
#bedPanel .frontpad button.on { background: var(--forest); color: #fff; border-color: var(--forest); }
#bedPanel .frontpad .fp-c span { font-size: 8.5px; font-weight: 800; line-height: 1.05; text-transform: uppercase; }
#bedPanel .frontsay { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
#bedPanel .frontsay b { color: var(--ink); }
#ictip.k-draw { background: #2F5430; color: #fff; }

/* ---------- zoom: a small bar in the bottom right corner of the plan (also while editing the outline) ---------- */
.planwrap .zoombar { position: absolute; right: 10px; bottom: 10px; z-index: 12; display: flex; align-items: center; gap: 2px; padding: 3px; background: rgba(255,255,255,.95); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,.1); }
.planwrap .zoombar[hidden] { display: none; }
.planwrap .zoombar button { border: 0; background: none; min-width: 28px; height: 26px; padding: 0 6px; border-radius: 7px; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; }
.planwrap .zoombar button.zfit { font-size: 12px; }
.planwrap .zoombar button:hover:not(:disabled) { background: var(--soft); }
.planwrap .zoombar button:disabled { opacity: .35; cursor: default; }
.planwrap .zoombar .zpct { min-width: 42px; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.planwrap .zoomhint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 12; background: rgba(46,58,44,.88); color: #fff; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; pointer-events: none; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.planwrap .zoomhint.on { opacity: 1; }
#plan.panning, #plan.drawing.panning { cursor: grabbing; }

/* ---------- touch screens: the plan takes every finger gesture itself (hold for menus, pinch to zoom) ---------- */
#plan { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ---------- phones: a header that scrolls away, smaller buttons, the tour card along the bottom ---------- */
@media (max-width: 700px) {
  .top { position: static; padding: 10px 14px; gap: 8px; backdrop-filter: none; }
  .top h1 { font-size: 19px; }
  .top .sub { font-size: 11px; }
  .actions { gap: 6px; }
  .actions .btn { padding: 6px 10px; font-size: 12px; }
  .layout { padding: 12px 10px 40px; gap: 12px; }
  .card { padding: 14px 14px; }
  .selcard { width: min(300px, calc(100% - 12px)); }
  #tourCoach { width: calc(100vw - 20px); }
  .plan-tools .tools-hint { flex-basis: 100%; }
  .planwrap .zoombar button { min-width: 34px; height: 32px; }
}
.selcard .sc-head { touch-action: none; }   /* the card can be dragged by its top with a finger too */
/* ---------- nothing sits on top of the plan ----------
   The outline editor's buttons and the sun palette dock in a strip right above the plan and the zoom
   buttons right below it, on every screen. On phones and tablets the card for a plant also slides up
   from the bottom of the screen, and the header scrolls away to give the plan more room. */
/* every screen size: the editor's buttons and the sun palette dock above the plan, the zoom buttons below */
.planwrap { display: flex; flex-direction: column; }
.planwrap > #plan { order: 1; }
.planwrap .drawbar, .planwrap .paintbar { position: static; order: 0; margin: 0; max-width: none; left: auto; right: auto; top: auto;
  border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; box-shadow: none; }
.planwrap .zoombar { position: static; order: 2; align-self: flex-end; margin: 4px 6px 6px; box-shadow: none; }
.planwrap .zoombar[hidden] { display: none; }
@media (max-width: 1050px) {
  .top { position: static; }
  .planwrap .selcard { position: fixed; top: auto !important; bottom: 8px; left: 50% !important; right: auto; transform: translateX(-50%);
    width: min(520px, calc(100vw - 16px)); max-height: 62vh; z-index: 40; box-shadow: 0 -4px 30px rgba(40,40,20,.28); }
  .planwrap .selcard .sc-head { cursor: default; }
}
@media (max-width: 700px) {
  .planwrap .drawbar { gap: 4px; padding: 6px; }
  .planwrap .drawbar .btn { padding: 5px 8px; font-size: 12px; }
  .planwrap .drawbar .tip { font-size: 11px; line-height: 1.35; }
  .planwrap .paintbar { gap: 4px; padding: 6px; }
  .planwrap .paintbar .pb-btn { padding: 4px 7px; font-size: 12px; }
  .planwrap .paintbar .zhrs, .planwrap .paintbar .pb-sep { display: none; }
  .planwrap .paintbar select { font-size: 12px; padding: 4px 6px; }
}
#ictip.k-view { background: #4E8C3A; color: #fff; }

/* the plan's legend: a row under the plan, outside the picture */
.planlegend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 2px 0; font-size: 12px; font-weight: 700; color: #4b5244; }
.planlegend[hidden] { display: none; }
.planlegend .lg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.planlegend .lg-tox { color: #B8392E; }
.planlegend .lgic { width: 15px; height: 15px; }
.planlegend .lgsq { width: 13px; height: 13px; border-radius: 3px; border: 1px solid #8E7660; box-sizing: border-box; }
.planlegend .lgline { width: 16px; height: 4px; border-radius: 2px; }

#stats .overfull b { color: var(--warn); }
#stats small { color: var(--muted); font-weight: 500; }
.selcard .sc-check { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 8px 0 2px; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.selcard .sc-check small { flex-basis: 100%; padding-left: 22px; font-weight: 500; color: var(--muted); }
.selcard .sc-check input { accent-color: #4E8C3A; }

/* Edit / Done in each step's header look like the buttons in the top bar */
.step .steptog.btn { font-size: 13px; font-weight: 600; padding: 3px 11px; line-height: 1.35; border: 1px solid var(--rule); border-radius: 8px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.step .steptog.btn:hover { background: var(--soft); border-color: #c9c2a8; }
.step .steptog.btn.primary { background: var(--forest); border-color: var(--forest); color: #fff; }
.step .steptog.btn.primary:hover { background: var(--forest-d); }
.step.done.open .stepfoot { display: none; }   /* a reopened step already has Done in its header */
.step .stephead { align-items: center; }
.step .stepdone.btn { padding: 3px 11px; line-height: 1.35; }
/* no check marks on finished steps: the Edit button and the summary already show a step is done */
.step.done .stepck { display: none; }
.step .stepsum { margin-left: 0; }

/* a plant in the wrong light on the bed plan: its timeline row is grayed and edged in the same dotted gold */
.brow.badlight { background: #FFF8E1; box-shadow: inset 0 0 0 2px #E2B93B; border-radius: 8px; }
.brow.badlight .track .bar { opacity: .45; outline: 2px dotted #C9971A; outline-offset: 1px; }
.brow.badlight .lab img { filter: grayscale(.7); opacity: .7; }
.brow .badl { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; color: #9A6B00; margin-top: 1px; }

/* dragging a plant on the bed plan: the sun zones that suit it stay bright, the rest fade */
/* dragging a plant: the sun areas that don't suit it, and everything in them, go under one dull gray veil */
#plan .zveil rect { fill: #8C8C86; fill-opacity: .82; }
/* while dragging a plant, or pointing at one in the Plants list, nothing else fades: only the veil dims */
#plan.zdrag .zlayer, #plan.zdrag .glayer, #plan.zdrag .olayer, #plan.zdrag .clayer, #plan.zdrag .bedrim, #plan.zdrag .soil,
#plan.zdrag .pl circle.pc, #plan.zdrag .pl text, #plan.zdrag .pl .tx,
#plan.zlook .zlayer, #plan.zlook .glayer, #plan.zlook .olayer, #plan.zlook .clayer, #plan.zlook .bedrim, #plan.zlook .soil,
#plan.zlook .pl circle.pc, #plan.zlook .pl text, #plan.zlook .pl .tx { opacity: 1; }
/* dragging a plant's row between the sun sections of the Garden Timeline */
.brow.canmove .lab { cursor: grab; touch-action: none; }
body.rowdragging, body.rowdragging * { cursor: grabbing !important; user-select: none; }
.brow.dragsrc { opacity: .4; }
#bloomRows.tl-drag .zone-head { opacity: .45; }
#bloomRows.tl-drag .zone-head.zok { opacity: 1; }
#bloomRows.tl-drag .zone-head.zok::after { content: "Drop here"; margin-left: auto; font-size: 10.5px; letter-spacing: 0; text-transform: none; color: #3F6B3A; background: #E1EBCB; border-radius: 999px; padding: 1px 8px; }
#bloomRows .zhover { background: #EAF2DF !important; }
#bloomRows .zone-head.zhover { box-shadow: inset 0 0 0 2px #7FA86A; border-radius: 6px; }
.rowghost { position: fixed; z-index: 9999; pointer-events: none; display: grid; grid-template-columns: 36px auto; gap: 7px; align-items: center; padding: 4px 10px 4px 4px; background: #fff; border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 8px 22px rgba(0,0,0,.2); font-size: 12.5px; max-width: 260px; }
.rowghost img { width: 36px; height: 27px; object-fit: cover; border-radius: 4px; }
.rowghost .nm { font-weight: 700; line-height: 1.1; } .rowghost .nm small { display: block; font-weight: 400; color: var(--muted); font-size: 10.5px; }
.rowghost .addbtn, .rowghost .badl, .rowghost .chipic, .rowghost svg { display: none; }

/* shopping list: the botanical name under the common name */
#shop td.shp { display: flex; align-items: center; }
#shop td.shp .shn { display: block; line-height: 1.25; }
#shop td.shp .lat { display: block; font-style: italic; color: var(--muted); font-size: 11.5px; }

/* steps 1 to 6 sit above the bed plan in three columns (1 and 2, 3 and 4, 5 and 6); the Plants list sits to the
   left of the bed plan and scrolls on its own */
.stepgrid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.stepcol { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (max-width: 1050px) { .stepgrid { grid-template-columns: 1fr; } }
@media print { .stepgrid { display: none !important; } }

/* an open step floats over the page instead of pushing it down: its slot keeps the folded size */
.stepgrid { position: relative; z-index: 20; }   /* above the bed plan, below the sticky top bar */
@media (min-width: 1051px) {
  .stepslot { position: relative; }
  .stepslot.open { z-index: 2; }
  .stepslot.open > .step { position: absolute; top: 0; left: 0; right: 0; box-shadow: 0 22px 50px -12px rgba(31,42,30,.35), 0 2px 6px rgba(31,42,30,.12); }
  /* while the sun is being painted on the bed plan, step 4 folds back so it doesn't cover the plan */
  body.painting .stepslot.open > #sunCard .stepbody { display: none; }
  body.painting .stepslot.open > #sunCard .stepsum { display: block; }
}
.step:not(.done) .stepsum { font-style: italic; }

/* bed, objects and sun open in the left column beside the bed plan; a marker holds their place in the grid */
#sideStep { display: flex; flex-direction: column; gap: 16px; }
#sideStep:empty { display: none; }
#libCard[hidden] { display: none; }
.step-ph { padding: 12px 22px; border: 2px solid var(--forest); background: #EEF3E8; cursor: pointer; }
.step-ph .ph-tag { font-size: 12.5px; font-weight: 700; color: var(--forest); margin-top: 2px; }
.step-ph .ph-tag::before { content: "← "; }

/* dragging a plant in from the Plants list: the pointer becomes the plant's circle */
#lib .pcard { cursor: grab; touch-action: pan-y; }
body.libdragging, body.libdragging * { cursor: none !important; user-select: none; }
.libghost { position: fixed; z-index: 9999; pointer-events: none; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; font-weight: 800; border: 2px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,.3); opacity: .92; transition: width .08s, height .08s; }
.libghost.nowhere { opacity: .6; }
#bloomCard.dropok { outline: 3px dashed #7FA86A; outline-offset: 3px; }

/* the planner is something you click and drag, not read: no accidental text highlighting (typing boxes still work) */
body.planner { -webkit-user-select: none; user-select: none; }
body.planner input, body.planner textarea, body.planner select { -webkit-user-select: text; user-select: text; }


/* all six steps in one row, every box the same height; a box opens with a click and closes with Done at its bottom */
@media (min-width: 1051px) {
  .stepgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
  .stepcol { display: contents; }
  .stepslot > .step:not(.open), .stepslot > .step-ph { height: 100%; }
  .stepgrid .step:not(.open), .stepgrid .step-ph { padding: 12px 14px; }
  .stepgrid .step .stephead h2, .stepgrid .step-ph h2 { font-size: 16.5px; line-height: 1.2; }
  .stepgrid .step:not(.open) .stepsum { margin-left: 0; font-size: 11.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .stepslot.open > .step { width: max(100%, 420px); right: auto; }
  .stepcol:last-child .stepslot.open > .step { left: auto; right: 0; }
}
.step .steptog, .step .steptog.btn { display: none !important; }
.step.done.open .stepfoot { display: flex; }
.step:not(.open):hover { border-color: var(--forest); }


/* the page background: the site's own flowering-plant photos blended together and softly blurred (credited on credits.html), behind every card */
body { background: linear-gradient(rgba(246,243,234,.35), rgba(246,243,234,.35)) fixed, url(img/site-bg.jpg) center / cover fixed, var(--cream); }   /* a light cream wash over the blurred flowers */
@media (max-width: 1050px) { body { background-attachment: scroll; background-size: auto, 100% auto; background-repeat: no-repeat, repeat-y; } }