/* BotaniLearn: diagram styles shared by the course, the Lab and the Textbook. */
.board { fill: var(--board); stroke: var(--line); }
.ink { stroke: var(--ink); }
svg text { font-family: var(--font-body); fill: var(--fg); }
.lbl { opacity: 0; transition: opacity .3s; pointer-events: none; }
.show-labels .lbl, .lbl.on { opacity: 1; }
.lbl line { stroke: var(--ink); stroke-width: 1.3; stroke-dasharray: 3 3; }
.lbl text, .halo { font-size: 17px; font-weight: 700; paint-order: stroke; stroke: var(--board); stroke-width: 5px; stroke-linejoin: round; }
.lbl.on text { fill: var(--laser); }
.dtxt { font-size: 15px; fill: var(--muted); }
.mono { font-family: var(--font-mono); }

[data-part] { transition: filter .3s; }
[data-part].hl { filter: drop-shadow(0 0 5px var(--glow)) drop-shadow(0 0 10px var(--glow)); animation: hlpulse 1.4s ease-in-out infinite; }
@keyframes hlpulse { 50% { opacity: .78; } }
.zone { fill: var(--glow); opacity: 0; transition: opacity .3s; }
.zone.hl { opacity: .45; }
.tapping [data-part] { cursor: pointer; }
.tapping [data-part]:hover { filter: drop-shadow(0 0 4px var(--green)); }

/* diagram fills */
.soil { fill: var(--soil); } .soil-line { stroke: var(--soil-d); stroke-width: 3; }
.root { fill: var(--root); } .root-s { stroke: var(--root); fill: none; stroke-linecap: round; }
.stem { fill: var(--stem); } .stem-s { stroke: var(--stem); fill: none; stroke-linecap: round; }
.leafb { fill: var(--leaf); stroke: var(--leaf-d); stroke-width: 2; } .rib { stroke: var(--leaf-d); stroke-width: 2; fill: none; }
.node { fill: var(--leaf-d); } .bud { fill: var(--leaf); stroke: var(--leaf-d); stroke-width: 2; }
.petal { fill: var(--petal); stroke: var(--petal-d); stroke-width: 2; } .anther { fill: var(--anther); stroke: var(--ink); stroke-width: 1.5; }
.fil { stroke: var(--ink); stroke-width: 3; fill: none; } .pistil { fill: var(--pistil); stroke: var(--leaf-d); stroke-width: 2; }
.ovule { fill: var(--whitefl); stroke: var(--leaf-d); stroke-width: 1.5; } .sepal { fill: var(--leaf); stroke: var(--leaf-d); stroke-width: 2; }
.pollen { fill: var(--anther); }
.wall { fill: var(--cell-wall); stroke: var(--leaf-d); stroke-width: 2; } .cyto { fill: var(--cyto); }
.memb { fill: none; stroke: var(--membrane); stroke-width: 4; } .vac { fill: var(--vacuole); stroke: var(--water); stroke-width: 2; }
.nuc { fill: var(--nucleus); stroke: var(--nucleolus); stroke-width: 2; } .nucleolus { fill: var(--nucleolus); }
.chl { fill: var(--chloro); stroke: var(--leaf-d); stroke-width: 1.5; } .grana { stroke: var(--leaf-d); stroke-width: 2; }
.mito { fill: var(--mito); stroke: var(--ink); stroke-width: 1.2; } .cris { stroke: var(--ink); stroke-width: 1.2; fill: none; }
.cut { fill: var(--water); opacity: .7; } .epi { fill: var(--cyto); stroke: var(--leaf-d); stroke-width: 1.5; }
.pal { fill: var(--leaf); stroke: var(--leaf-d); stroke-width: 1.5; } .dot { fill: var(--leaf-d); }
.spg { fill: var(--pistil); stroke: var(--leaf-d); stroke-width: 1.5; } .sheath { fill: var(--cyto); stroke: var(--leaf-d); stroke-width: 2; }
.xy { fill: var(--water); stroke: var(--ink); stroke-width: 2; } .ph { fill: var(--pollen); stroke: var(--ink); stroke-width: 1; }
.guard { fill: var(--leaf); stroke: var(--leaf-d); stroke-width: 2; } .pore { fill: var(--ink); }
.arr { stroke: var(--ink); stroke-width: 2.5; fill: none; } .arrhead { fill: var(--ink); }
.ray { stroke: var(--glow); stroke-width: 3; stroke-linecap: round; }
.fl-p { fill: var(--purple); stroke: var(--ink); stroke-width: 1; } .fl-w { fill: var(--whitefl); stroke: var(--ink); stroke-width: 1.2; } .fcenter { fill: var(--anther); }
.cellbox { fill: var(--card); stroke: var(--line); stroke-width: 2; }
.card { fill: var(--card); stroke: var(--line); stroke-width: 2; }
.ct { font-family: var(--font-display); font-weight: 700; font-size: 18px; text-anchor: middle; }
.cs { font-size: 13.5px; text-anchor: middle; fill: var(--muted); }
.gl { fill: var(--glass); stroke: var(--ink); stroke-width: 1.8; } .agar { fill: var(--agar); } .lid { fill: var(--ink); }
.callus { fill: var(--agar); stroke: var(--soil-d); stroke-width: 2; filter: brightness(1.15); }
.pot { fill: var(--soil-d); stroke: var(--ink); stroke-width: 1.5; } .dome { fill: var(--glass); opacity: .7; stroke: var(--ink); stroke-width: 1.5; }
.tool { stroke: var(--ink); stroke-width: 3; fill: none; stroke-linecap: round; }
.liq { fill: var(--water); opacity: .55; }