/* Garden workbench: the illustrated plot and its selected record share one surface. */
.garden-panel { min-width: 0; }
.garden-selectors { display: grid; grid-template-columns: 1.06fr 1fr; gap: 12px; padding: 15px 18px 12px; }
.garden-selectors label { min-width: 0; display: grid; gap: 6px; font-size: 10px; color: #5f6e58; }
.garden-selectors select { width: 100%; min-width: 0; height: 36px; padding: 0 28px 0 10px; border: 1px solid #d7dace; border-radius: 5px; background-color: #fffef9; font: 11px var(--sans); color: #3c503d; text-overflow: ellipsis; }
.garden-context-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin: 0 18px; padding: 0 0 11px; border-bottom: 1px solid #e6e7dd; }
.garden-context-row .garden-context { margin: 0; font-size: 10px; color: #5f6e58; }
.garden-context-row .schematic-tag { font-size: 9px; color: #5f6e58; white-space: nowrap; }
.garden-panel .inline-warning { margin: 10px 18px; }
.garden-panel .action-strip { display: flex; align-items: center; gap: 6px; margin: 0; padding: 11px 18px; }
.garden-panel .garden-action { min-width: 0; min-height: 31px; gap: 6px; padding: 6px 9px; border-radius: 5px; border: 1px solid #d9ddd0; background: #fffef9; color: #4c6245; font-size: 10px; transition: background .18s, border-color .18s; }
.garden-panel .garden-action:hover:not(:disabled) { background: #eaf0e1; border-color: #a5b495; transform: none; }
.garden-panel .garden-action:disabled { opacity: .42; }
.garden-panel .action-symbol { width: 15px; height: 15px; flex: 0 0 15px; background: none; border-radius: 0; color: inherit; }
.garden-panel .action-symbol svg { width: 15px; height: 15px; display: block; }
.garden-panel .garden-action b { font-size: 10px; font-weight: 500; }
.garden-panel .garden-action small, .garden-panel .action-arrow { display: none; }
.garden-stage { display: grid; grid-template-columns: minmax(0, 1fr) 188px; align-items: stretch; margin: 0 12px; border: 1px solid #dce1d2; border-radius: 8px; background: #eef0e4; overflow: hidden; }
.garden-stage .garden-map { display: flex; justify-content: center; align-items: flex-start; min-height: 292px; max-height: 390px; padding: 6px 2px 0; gap: 0; background: #e9edde; background-image: radial-gradient(#b6c49f55 .7px, transparent .7px); background-size: 11px 11px; overflow: auto; }
.garden-stage .garden-map::before, .garden-stage .garden-map::after { display: none; }
.garden-stage .garden-map .garden-svg { display: block; flex: 1 0 100%; align-self: flex-start; margin-block: auto; width: 100%; min-width: 230px; max-width: 400px; height: auto; max-height: none; overflow: visible; }
.garden-svg .garden-ground { fill: #e2e8d6; stroke: #cdd6bd; stroke-width: 1; }
.garden-svg .garden-path { stroke: #f4efdb; stroke-width: 30; stroke-dasharray: 3 6; opacity: .65; }
.garden-svg .garden-fence { stroke: #c0ba9f; stroke-width: 5; stroke-linecap: round; fill: none; }
.garden-stage .garden-svg .bed-tile { cursor: pointer; outline: none; transform: none; }
.garden-stage .garden-svg .bed-tile rect { stroke: none; stroke-width: 0; filter: none; }
.garden-stage .garden-svg .bed-tile .bed-selection { fill: transparent; stroke: transparent; stroke-width: 2; transition: stroke .18s, fill .18s; }
.garden-stage .garden-svg .bed-tile .bed-timber-side { fill: #9b7951; stroke: #8e714c; stroke-width: 1; }
.garden-stage .garden-svg .bed-tile .bed-timber { fill: #c3a576; stroke: #a58b61; stroke-width: 1.4; }
.garden-stage .garden-svg .bed-tile .bed-soil { fill: #a28b68; stroke: #927d5d; stroke-width: 1; }
.garden-stage .garden-svg .bed-tile.status-planted .bed-soil { fill: #8a7f57; }
.garden-svg .soil-row { stroke: #6c6149; stroke-width: 1.6; stroke-dasharray: 2 7; stroke-linecap: round; fill: none; opacity: .35; }
.garden-stage .garden-svg .bed-tile .bed-hatching { fill: url(#garden-hatch); }
.garden-stage .garden-svg .bed-tile .bed-label rect { fill: #fffdf2; stroke: #d9d7bc; stroke-width: 1; }
.garden-svg .bed-label circle { fill: #bc9b5f; }
.garden-svg .status-planted .bed-label circle { fill: #729354; }
.garden-svg .status-locked .bed-label circle { fill: #9c7f63; }
.garden-stage .garden-svg .bed-number { font: 600 20px var(--sans); fill: #344b37; letter-spacing: -.4px; }
.garden-stage .garden-svg .bed-caption { font: 500 14px var(--sans); fill: #6d765f; }
.garden-stage .garden-svg .bed-tile.is-selected .bed-selection, .garden-stage .garden-svg .bed-tile:hover .bed-selection, .garden-stage .garden-svg .bed-tile:focus-visible .bed-selection { stroke: #68854d; fill: #fcfbea42; }
.garden-stage .garden-svg .bed-tile.is-selected .bed-label rect { fill: #f8fbe9; stroke: #6c874e; stroke-width: 1.5; }
.garden-stage .garden-svg .bed-tile:focus-visible .bed-selection { stroke: #354f35; stroke-width: 3; stroke-dasharray: 5 3; }
.garden-svg .bed-padlock rect { fill: #f4efdd; }
.garden-svg .bed-padlock path { stroke: #75684e; stroke-width: 2.5; stroke-linecap: round; fill: none; }
.garden-svg .bed-check circle { fill: #5b7946; stroke: #f7f9ed; stroke-width: 2; }
.garden-svg .bed-check path { stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.garden-svg .garden-scale { font: 10px var(--mono); letter-spacing: .8px; fill: #879173; }
.garden-svg .garden-compass path { fill: #8d9979; }
.garden-svg .garden-compass text { font: 9px var(--mono); fill: #8d9979; }
.garden-svg .garden-seedling { transform-box: fill-box; transform-origin: center bottom; }
.garden-stage #bed-details { align-self: stretch; min-width: 0; min-height: 0; margin: 0; padding: 16px 13px 11px; border: 0; border-left: 1px solid #d9dfcc; border-radius: 0; background: #fbfbf1f5; color: #425540; }
.inspector-heading { padding-bottom: 11px; }
.inspector-kicker { display: block; color: #5f6e58; font: 8px var(--mono); letter-spacing: .7px; }
.inspector-heading > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 5px; }
.inspector-heading h3 { margin: 0; font: 500 23px var(--serif); letter-spacing: -.7px; color: #344d37; white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.inspector-heading .status-chip { font: 8px var(--sans); padding: 4px 6px; background: #f0e8d2; color: #725825; }
.inspector-heading .status-chip.planted { background: #e4ecd6; color: #425f2e; }
.inspector-heading .status-chip.locked { background: #ede3d6; color: #715237; }
.inspector-facts { display: grid; gap: 11px; padding-bottom: 13px; border-bottom: 1px solid #e4e7d9; }
.inspector-fact { display: flex; gap: 9px; align-items: center; min-width: 0; }
.inspector-fact > svg { width: 17px; height: 17px; flex: 0 0 17px; color: #8b9a76; }
.inspector-fact > span { min-width: 0; }
.inspector-fact strong { display: block; font-size: 12px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.inspector-fact small { display: block; color: #5f6e58; font: 9px/1.5 var(--sans); }
.inspector-fact strong small { display: inline; color: inherit; font-size: 10px; }
.inspector-measurements { padding-top: 11px; }
.measurement-heading { display: flex; justify-content: space-between; align-items: center; gap: 4px; font-size: 10px; color: #5f6e58; }
.measurement-heading > span { color: #5f6e58; font: 8px var(--mono); }
.measurement-value { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.measurement-value > svg { width: 18px; height: 18px; flex: 0 0 18px; color: #819875; }
.measurement-value > div { min-width: 0; flex: 1; }
.measurement-value > div > span { display: block; font-size: 9px; color: #5f6e58; }
.measurement-value strong { display: inline-block; margin: 1px 0; color: #40583b; font: 500 24px/1.15 var(--serif); letter-spacing: -.5px; }
.measurement-value strong > small { padding-left: 4px; font: 11px var(--sans); letter-spacing: 0; color: #7c8d6a; }
.measurement-value time { display: block; color: #5f6e58; font: 8px/1.4 var(--mono); white-space: normal; overflow-wrap: anywhere; }
.inspector-key { margin-top: 12px; padding-top: 8px; border-top: 1px solid #e4e7d9; font: 8px var(--mono); color: #5f6e58; overflow-wrap: anywhere; }
.inspector-key span { margin: 0 4px; }
.no-measurements { margin: 12px 0; font-size: 10px; line-height: 1.6; color: #5f6e58; }
.garden-inspector-empty { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 185px; gap: 10px; }
.garden-inspector-empty > svg { width: 29px; height: 29px; color: #8b9e74; }
.garden-inspector-empty b { font: 500 18px var(--serif); }
.garden-inspector-empty p { margin: 0; font-size: 10px; line-height: 1.6; color: #5f6e58; }
.garden-stage .empty-map { min-height: 200px; display: grid; place-content: center; max-width: 320px; padding: 22px; font: 12px/1.7 var(--sans); }
.garden-panel .garden-legend { min-height: 37px; height: auto; padding: 10px 18px; gap: 14px; border: 0; font-size: 9px; color: #5f6e58; }
.garden-panel .legend-dot { width: 6px; height: 6px; margin-right: 5px; }
.garden-panel .legend-note { font-size: 8px; font-style: normal; }
#bed-records { min-width: 0; border-top: 1px solid #e1e4d7; }
.garden-records-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 17px; background: #fcfcf5; }
.garden-record-tabs { display: flex; gap: 17px; min-width: 0; }
.garden-record-tabs button { position: relative; border: 0; background: none; color: #5f6e58; padding: 13px 0 12px; font-size: 10px; white-space: nowrap; }
.garden-record-tabs button[aria-selected=true] { color: #4b6242; font-weight: 600; }
.garden-record-tabs button[aria-selected=true]::after { content: ''; height: 2px; position: absolute; left: 0; right: 0; bottom: 0; background: #6f8957; }
.garden-record-tabs button > span { margin-left: 3px; padding: 2px 5px; border-radius: 4px; background: #edf0e4; font: 9px var(--mono); color: #5f6e58; }
.records-bed-key { flex-shrink: 0; color: #5f6e58; font: 8px var(--mono); letter-spacing: .4px; }
.garden-record-scroll { width: 100%; overflow: auto; max-height: 205px; scrollbar-width: thin; scrollbar-color: #cbd2bd transparent; }
.garden-record-table { width: 100%; border-collapse: collapse; white-space: nowrap; text-align: left; font-size: 10px; }
.garden-record-table th { position: sticky; top: 0; z-index: 1; padding: 8px 17px; background: #f4f6ec; border-top: 1px solid #e5e8dc; border-bottom: 1px solid #e3e6d8; color: #5f6e58; font: 8px var(--mono); }
.garden-record-table td { padding: 11px 17px; border-bottom: 1px solid #e9ecdf; color: #5f6e58; font-variant-numeric: tabular-nums; }
.garden-record-table tr:last-child td { border-bottom: 0; }
.garden-record-table tbody tr:nth-child(even) { background: #fdfdf7; }
.garden-record-table td:first-child svg { display: inline-block; vertical-align: middle; width: 15px; height: 15px; margin-right: 7px; color: #8ca175; }
.garden-record-table td strong { font-size: 10px; font-weight: 500; }
.garden-record-table .record-number { color: #4d6243; font-weight: 500; }
.record-null { color: #5f6e58; font-size: 9px; }
.record-no-rows { padding: 18px; color: #5f6e58; font-size: 10px; }
.records-empty { display: flex; align-items: center; gap: 9px; padding: 19px; color: #5f6e58; font-size: 10px; }
.records-empty svg { width: 18px; height: 18px; flex: 0 0 18px; }
@keyframes garden-grow { from { opacity: .3; transform: scale(.8) rotate(-5deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: no-preference) { .garden-svg .is-selected .garden-seedling { animation: garden-grow .45s ease-out both; animation-delay: calc(var(--plant-delay) * -.12); } }
@media (max-width: 1150px) and (min-width: 821px) {
  .garden-stage { grid-template-columns: minmax(0, 1fr) 173px; margin: 0 10px; }
  .garden-stage #bed-details { padding: 14px 11px 10px; }
  .garden-stage .garden-map .garden-svg { min-width: 205px; }
  .garden-selectors { gap: 8px; padding-right: 14px; padding-left: 14px; }
  .garden-panel .action-strip { padding-right: 14px; padding-left: 14px; gap: 5px; }
  .garden-panel .garden-action { padding: 6px 7px; font-size: 9px; gap: 5px; }
  .garden-panel .garden-action b { font-size: 9px; }
  .garden-record-table th, .garden-record-table td { padding-left: 13px; padding-right: 13px; }
}
@media (max-width: 820px) { .garden-stage .garden-map .garden-svg { max-width: 355px; } .garden-stage { grid-template-columns: minmax(0, 1fr) 215px; } .garden-stage #bed-details { padding: 18px 17px 12px; } }
@media (max-width: 500px) {
  .garden-selectors { padding: 13px 12px 10px; gap: 7px; }
  .garden-selectors select { height: 34px; font-size: 10px; padding-left: 7px; }
  .garden-context-row { margin: 0 12px; }
  .garden-context-row .schematic-tag { font-size: 8px; }
  .garden-context-row .garden-context { font-size: 9px; }
  .garden-panel .action-strip { padding: 10px 12px; gap: 5px; }
  .garden-panel .garden-action { padding: 7px; flex: 1; justify-content: center; }
  .garden-panel .garden-action b { font-size: 9px; }
  .garden-panel .action-symbol { width: 13px; flex-basis: 13px; }
  .garden-panel .action-symbol svg { width: 13px; height: 13px; }
  .garden-stage { grid-template-columns: 1fr; margin: 0 10px; }
  .garden-stage .garden-map { min-height: 0; max-height: 340px; padding: 1px 22px; }
  .garden-stage .garden-map .garden-svg { max-width: 330px; min-width: 240px; }
  .garden-stage #bed-details { display: grid; grid-template-columns: 1fr 1.05fr; column-gap: 18px; padding: 13px; border-left: 0; border-top: 1px solid #d9dfcc; }
  .inspector-heading { grid-column: 1; padding-bottom: 10px; }
  .inspector-heading h3 { font-size: 21px; }
  .inspector-facts { grid-column: 1; border-bottom: 0; padding-bottom: 0; gap: 9px; }
  .inspector-measurements { grid-column: 2; grid-row: 1 / span 3; border-left: 1px solid #e3e7d8; padding: 0 0 0 14px; }
  .measurement-heading { font-size: 9px; }
  .measurement-heading > span { font-size: 7px; }
  .measurement-value { margin-top: 9px; gap: 6px; }
  .measurement-value strong { font-size: 22px; }
  .measurement-value time { font-size: 7px; }
  .inspector-key { grid-column: 1; font-size: 7px; border: 0; margin-top: 8px; padding-top: 0; }
  .garden-inspector-empty { grid-column: 1/-1; min-height: 0; display: grid; grid-template-columns: 25px 1fr; gap: 5px 10px; align-items: center; }
  .garden-inspector-empty > svg { grid-row: 1/span 2; width: 25px; height: 25px; }
  .garden-inspector-empty b { font-size: 15px; }
  .garden-inspector-empty p { grid-column: 2; font-size: 9px; }
  .garden-records-head { padding: 0 13px; }
  .garden-record-tabs { gap: 14px; }
  .garden-record-tabs button { font-size: 9px; }
  .records-bed-key { font-size: 7px; }
  .garden-record-table th, .garden-record-table td { padding-left: 13px; padding-right: 13px; }
  .garden-panel .garden-legend { padding: 10px 13px; font-size: 8px; }
}
.garden-panel .garden-legend { display: flex; align-items: center; }
.garden-panel .garden-legend > span { white-space: nowrap; }
.garden-panel .legend-note { margin-left: auto; }
.garden-panel .legend-dot { display: inline-block; vertical-align: 1px; border-radius: 50%; }
.garden-panel .legend-dot.free { background: #bc9b5f; }
.garden-panel .legend-dot.planted { background: #729354; }
.garden-panel .legend-dot.locked { background: #9c7f63; }
.inspector-heading .status-chip { border-radius: 4px; white-space: nowrap; }
@media (max-width: 500px) { .garden-panel .legend-note { display: none; } }
/* Keep the workbench legible at the compact desktop column width. */
.garden-selectors label, .garden-selectors select { font-size: 12px; }
.garden-context-row .garden-context, .garden-context-row .schematic-tag { font-size: 11px; }
.garden-panel .garden-action { display: flex; align-items: center; font-size: 12px; }
.garden-panel .garden-action b { font-size: 12px; }
.inspector-kicker { font-size: 10px; letter-spacing: .25px; }
.inspector-heading .status-chip { font-size: 11px; }
.inspector-fact small { font-size: 11px; }
.inspector-fact strong small { font-size: 11px; }
.measurement-heading { font-size: 11px; }
.measurement-heading > span, .measurement-value > div > span, .measurement-value time { font-size: 10px; }
.inspector-key { font-size: 10px; }
.garden-inspector-empty p, .no-measurements { font-size: 12px; }
.garden-panel .garden-legend, .garden-panel .legend-note { font-size: 11px; }
.garden-record-tabs button { font-size: 12px; }
.garden-record-tabs button > span, .records-bed-key { font-size: 10px; }
.garden-record-table { font-size: 11px; }
.garden-record-table th, .garden-record-table td strong, .record-null { font-size: 11px; }
.record-no-rows, .records-empty { font-size: 12px; }
.garden-stage .garden-svg .bed-caption { font-size: 16px; }
@media (max-width: 1150px) and (min-width: 821px) {
  .garden-panel .garden-action { padding: 7px 6px; gap: 4px; }
  .garden-panel .garden-action b { font-size: 11px; }
  .garden-panel .action-symbol, .garden-panel .action-symbol svg { width: 13px; height: 13px; flex-basis: 13px; }
  .garden-panel .legend-note { display: none; }
}
@media (max-width: 500px) {
  .garden-selectors select { font-size: 11px; }
  .garden-context-row .garden-context, .garden-context-row .schematic-tag { font-size: 10px; }
  .garden-panel .garden-action b { font-size: 11px; }
  .garden-record-tabs { gap: 13px; }
  .garden-record-tabs button { font-size: 11px; }
  .records-bed-key { font-size: 9px; }
  .inspector-kicker { font-size: 9px; }
  .inspector-key { font-size: 9px; }
  .measurement-value time { font-size: 9px; }
  .measurement-heading > span { font-size: 9px; }
}
.garden-stage .garden-map.has-many-beds .garden-svg { margin-block: 0; }
.measurement-heading > span, .measurement-value > div > span, .measurement-value time, .inspector-key, .garden-record-tabs button > span, .records-bed-key { font-size: 11px; }
@media (max-width: 500px) { .garden-panel .action-strip { flex-wrap: wrap; } .garden-panel .garden-action { flex: 1 1 auto; } .measurement-value time, .measurement-heading > span, .inspector-key, .records-bed-key { font-size: 10px; } }