/* Root & Wire grow: buildboard 49e729e packs/grow/grow.css. Built in ~/buildboard; do not edit here. */
/* Root & Wire growth simulator (static/bb/grow.css), in the site's "Studio" language: the stage is one large tile, the tools a
   column of square tiles, the timeline a thin copper line with a round handle, small type for toasts and notes. Everything
   through the site's custom properties; dark follows the same tokens. Only the wire's copper is a fixed colour (in the 3D chunk). */
/* the studio fits the viewport under the sticky header (--rw-head, measured by the studio): stage plus timeline, no taller; everything in
   it shares one width, so nothing sits beside dead space. 4:3 from 600 px, square below; the canvas follows the stage's box */
.grow-tile { background: none; }
#rw-grow { --rw-head: 3.5rem; position: relative; width: min(100%, calc((100dvh - var(--rw-head) - 7.5rem) * 4 / 3)); min-width: min(100%, 22rem); margin: 0 auto; }
@media (max-width: 599px) { #rw-grow { width: min(100%, calc(100dvh - var(--rw-head) - 10.5rem)); min-width: min(100%, 16rem); } }
@supports not (height: 100dvh) { #rw-grow { width: min(100%, calc((100vh - var(--rw-head) - 7.5rem) * 4 / 3)); } @media (max-width: 599px) { #rw-grow { width: min(100%, calc(100vh - var(--rw-head) - 10.5rem)); } } }
.rw-stage { position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--bone); border-radius: 4px; border: 0; overflow: hidden; touch-action: none; }
@media (max-width: 599px) { .rw-stage { aspect-ratio: 1 / 1; } }
#rw-grow .rw-toast, #rw-grow .rw-hint, #rw-grow .rw-note { padding: 0; max-width: none; }
.rw-stage canvas, .rw-grow-canvas { display: block; width: 100%; height: 100%; }
.rw-stage[data-cursor=hand] canvas { cursor: grab; }
.rw-stage[data-cursor=prune] canvas { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23b87333' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 5l6 9M17 5l-6 9M9 16a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0zM20 16a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z'/%3E%3C/svg%3E") 14 14, crosshair; }
.rw-stage[data-cursor=wire] canvas { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23b87333' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3v18M9 5c2 1 4 1 6 0M9 9c2 1 4 1 6 0M9 13c2 1 4 1 6 0M9 17c2 1 4 1 6 0'/%3E%3C/svg%3E") 14 14, crosshair; }
.rw-stage[data-cursor=pinch] canvas { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23b87333' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 20v-7M12 13c-3 0-5-2-5-5 2 0 4 1 5 3 1-2 3-3 5-3 0 3-2 5-5 5zM9 4l3 3 3-3'/%3E%3C/svg%3E") 14 14, crosshair; }
.rw-stage[data-cursor=defoliate] canvas { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23b87333' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 21V11M12 11c-4 0-7-3-7-7 4 0 7 3 7 7zM5 19l3-3M19 19l-3-3'/%3E%3C/svg%3E") 14 14, crosshair; }
.rw-stage-fallback { padding: 1rem; aspect-ratio: auto; }
.rw-stage-fallback svg { width: 100%; max-height: 70vh; display: block; }
/* the tool palette: a column of square tiles, pressed = ink on paper */
.rw-tools { position: absolute; left: .75rem; top: .75rem; display: flex; flex-direction: column; gap: .4rem; z-index: 4; }
@media (max-width: 599px) { .rw-tools { left: .5rem; right: .5rem; top: auto; bottom: .5rem; flex-direction: row; justify-content: center; gap: .5rem; } }
.rw-tool { position: relative; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; min-width: 44px; min-height: 44px; padding: 0 !important; border: 0 !important; border-radius: 4px !important; background: var(--paper) !important; color: var(--ink); }
#rw-grow .rw-tool[aria-pressed=true] { background: var(--ink) !important; color: var(--paper); }
/* the word stays hidden until hover or focus, then shows whole as a label to the right of the tile */
.rw-tool-word { position: absolute; left: calc(100% + .5rem); top: 50%; transform: translateY(-50%); display: none; padding: .3rem .65rem; border-radius: 4px; background: var(--ink); color: var(--paper); font-size: .85rem; white-space: nowrap; pointer-events: none; z-index: 7; }
.rw-tool:hover .rw-tool-word, .rw-tool:focus-visible .rw-tool-word, .rw-tool.rw-tool-hint .rw-tool-word { display: block; }
@media (max-width: 599px) { .rw-tool-word { left: 50%; top: auto; bottom: calc(100% + .5rem); transform: translateX(-50%); white-space: normal; width: max-content; max-width: 80vw; text-align: center; } }
.rw-tool svg { flex: none; }
.rw-tool-q { font-family: var(--serif); font-size: 1.15rem; color: var(--stone); }
.rw-tool.rw-pulse { animation: rw-tile-pulse 1.1s ease-out 1; }
@keyframes rw-tile-pulse { 0% { box-shadow: 0 0 0 0 var(--copper); } 60% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
/* the first-visit coach: one short line beside what it talks about; never in the way of a press */
.rw-coach { position: absolute; z-index: 8; display: flex; align-items: center; gap: .5rem; max-width: 17rem; padding: .45rem .55rem .45rem .8rem; border-radius: 4px; background: var(--ink); color: var(--paper); font-size: .92rem; line-height: 1.3; pointer-events: none; animation: rw-coach-in .3s ease-out both; }
.rw-coach[hidden] { display: none; }
#rw-grow .rw-coach-skip { pointer-events: auto; flex: none; width: 1.5rem; height: 1.5rem; padding: 0; background: transparent; color: inherit; opacity: .7; }
#rw-grow .rw-coach-skip:hover { background: transparent; opacity: 1; }
.rw-coach-skip::before { content: "\00d7"; }
.rw-coach-ring { position: absolute; z-index: 6; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 2px solid var(--copper); border-radius: 50%; pointer-events: none; animation: rw-ring 1.8s ease-in-out infinite; }
.rw-coach-ring[hidden] { display: none; }
@keyframes rw-ring { 0%, 100% { transform: scale(.75); opacity: .9; } 50% { transform: scale(1.15); opacity: .35; } }
@keyframes rw-coach-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rw-coach, .rw-coach-ring, .rw-tool.rw-pulse { animation: none; } }
/* the bend handle: a 14 px copper disc at the branch's tip, dragged to wire */
.rw-handle { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; padding: 0 !important; border-radius: 50% !important; background: var(--copper) !important; border: 2px solid var(--paper) !important; box-shadow: 0 0 0 2px var(--copper); z-index: 5; cursor: move; touch-action: none; }
.rw-handle[hidden] { display: none; }
.rw-handle::after { content: ""; position: absolute; inset: -10px; }
/* the toast above the timeline and the care note: the system's small type */
.rw-toast:empty { visibility: hidden; }   /* hidden outright when empty, not merely transparent */
.rw-toast { margin: .4rem 0 0; min-height: 1.3em; font-size: .9rem; color: var(--ink); opacity: 0; transition: opacity .4s ease; }
.rw-toast[data-kind=no] { color: var(--copper-text); }
.rw-toast.rw-toast-show { opacity: 1; }
.rw-hint { font-size: .9rem; color: var(--stone); margin: .4rem 0; }
.rw-note { font-size: .9rem; color: var(--bark); margin: .4rem 0; min-height: 1.2em; }
.rw-note:empty { display: none; }
.rw-live { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* the timeline: Grow a season first, Play and its speed quieter, the year, then a thin copper line with a round handle */
.rw-tl { margin: .5rem 0 .4rem; }
.rw-tl-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; }
.rw-tl-range { display: block; width: 100%; height: 22px; margin: .35rem 0 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.rw-tl-range::-webkit-slider-runnable-track { height: 2px; background: var(--copper); border-radius: 1px; }
.rw-tl-range::-moz-range-track { height: 2px; background: var(--copper); border-radius: 1px; }
.rw-tl-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -7px; border-radius: 50%; background: var(--paper); border: 2px solid var(--copper); }
.rw-tl-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--copper); }
.rw-tl-range:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; }
.rw-tl-label { margin-left: auto; font-family: var(--serif); font-size: 1.1rem; color: var(--ink); white-space: nowrap; }
.rw-tl-speed { display: inline-flex; gap: 2px; }
#rw-grow .rw-tl-speed button { padding: .45rem .55rem; min-width: 2.4rem; }
#rw-grow .rw-tl-speed button[aria-pressed=true] { background: var(--rule); font-weight: 600; }
.rw-tl-season.rw-growing { opacity: .75; }
#rw-grow button { font: inherit; font-size: .9rem; padding: .45rem .9rem; border: 0; border-radius: 4px; background: var(--bone); color: var(--ink); cursor: pointer; }
#rw-grow button:hover { background: var(--rule); }
#rw-grow button:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
#rw-grow button:disabled { opacity: .45; cursor: default; }
#rw-grow .rw-tl-season { min-width: 9rem; min-height: 44px; background: var(--ink); color: var(--paper); font-size: 1rem; }
#rw-grow .rw-tl-season:hover { background: var(--ink); opacity: .9; }
.rw-tl-play { min-width: 4.5rem; min-height: 44px; }
.rw-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; position: relative; }
.rw-pop { position: absolute; top: 2.8rem; left: 0; display: flex; flex-wrap: wrap; gap: .4rem; padding: .6rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; z-index: 5; max-width: 22rem; }
.rw-pop[hidden] { display: none; }
/* the radial menu (long-press on touch), placed at the touch point through --rx/--ry (set via CSSOM): an 8rem box centred on the point */
.rw-radial { position: absolute; left: var(--rx); top: var(--ry); width: 8rem; height: 8rem; margin: -4rem 0 0 -4rem; z-index: 6; pointer-events: none; }
.rw-radial-btn, .rw-radial-close { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; animation: rw-pop .18s ease-out both; pointer-events: auto; background: var(--paper) !important; }
.rw-radial-close { width: 2rem; height: 2rem; padding: 0 !important; border-radius: 50% !important; }
.rw-radial-2 .rm-0 { left: calc(50% - 3.2rem); } .rw-radial-2 .rm-1 { left: calc(50% + 3.2rem); }
.rw-radial-3 .rm-0 { top: calc(50% - 3.2rem); } .rw-radial-3 .rm-1 { left: calc(50% + 3.4rem); top: calc(50% + 1.6rem); } .rw-radial-3 .rm-2 { left: calc(50% - 3.4rem); top: calc(50% + 1.6rem); }
.rw-radial-4 .rm-0 { top: calc(50% - 3.4rem); } .rw-radial-4 .rm-1 { left: calc(50% + 3.8rem); } .rw-radial-4 .rm-2 { top: calc(50% + 3.4rem); } .rw-radial-4 .rm-3 { left: calc(50% - 3.8rem); }
@keyframes rw-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .rw-radial-btn, .rw-radial-close, .rw-tool { animation: none; transition: none; } }

/* the species chooser sits first in the actions row, styled as the other tiles */
.rw-actions .rw-species { font: inherit; font-size: .95rem; padding: .55rem .8rem; background: var(--bone); color: var(--ink); border: 1px solid var(--rule); border-radius: 4px; min-width: 11rem; }
.rw-actions .rw-species:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }