/* widgets.css — the controls that appear on more than one page, defined once.

   GardenCAD's pages load their own stylesheets: editor.html takes css/editor.css,
   simple.html css/simple.css. That split is fine for page LAYOUT and wrong for
   WIDGETS: five controls existed in both sheets, hand-transcribed, and had drifted
   apart — the shadows checkbox was bolder in the editor, the quantity stepper was
   28px there and 24px in simple mode, and `.species-card` was declared twice with
   two different grids. Same class name, two definitions: whichever sheet a page
   happened to load decided what the control looked like.

   Everything here is a control, not a layout. It carries no page-specific
   positioning; the page sheets place these where they belong. Tokens come from
   css/style.css, which every page loads first.

     .mode-toggle    segmented slider (Plant | Seed, Kind | Category)
     .species-card   a row in the plant library / the simple-mode picker
     .toggle         a checkbox + glyph + label, for canvas chrome
     .qty-stepper    the − N + quantity control
     .status-strip   the strip under a canvas: what the pointer does, plus toggles
*/

/* ── Segmented slider ────────────────────────────────────────────────────────
   TWO mutually exclusive choices, the active one filled. Segments share the width
   equally and centre their label, so "Kind | Category" reads as two halves rather
   than two left-aligned words with a gap after the longer one.

   Two, and not "two or three", which is what this said and what sent the print
   toolbar's document picker out as three abreast. Filling the chosen half of a
   split control is what makes the style read as one choice with two answers; at
   three it reads as three buttons with one stuck down, and a fourth answer has
   nowhere to go without redesigning the row around it. Three or more of anything
   is a select (print.html's is the example) or, where each choice has an icon
   worth showing, a button opening a popover (editor.html#dim-kind-select). */
.mode-toggle {
  display: inline-flex;
  background: var(--paper);
  border: 1px solid var(--slate-faint);
  border-radius: var(--radius);
  padding: 2px;
  box-shadow: var(--shadow-sm);
}
.mode-toggle .seg {
  appearance: none; border: none; background: transparent;
  color: var(--ink);
  font-family: var(--font-ui); font-size: 0.82rem; font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
  white-space: nowrap;
  flex: 1 1 0; min-width: 0;          /* equal halves, label centred in each */
}
/* A segment whose LABEL IS A WORD, not a word or two. `nowrap` above keeps a
   short pair on one line each, which is right for "Bed | Structure" — but it also
   lets one long label push past its half and crowd the panel edge, and the labels
   that do it are the ones a translation lengthens ("Counterclockwise", and its
   Spanish "Antihorario"). So the long-label case opts in to wrapping and a step
   down in size: two short lines inside the segment, in any language, rather than
   one line that overflows in some of them. */
/* Placed after --sm below would read as an afterthought, so it out-specifies it
   instead: --sm sets the size for every small segment, and this is the one that
   has to give a little more. `overflow-wrap` matters because the label that
   overflows is a SINGLE WORD — "Counterclockwise", and Spanish "Antihorario" —
   and `white-space: normal` alone cannot break one. */
.mode-toggle .seg.seg--wrap {
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 0.72rem;
  line-height: 1.15;
  padding-left: 0.3rem; padding-right: 0.3rem;
}
.mode-toggle .seg:hover { background: var(--leaf-soft); }
.mode-toggle .seg.active { background: var(--leaf); color: #fff; }
/* A choice that is not the user's to make right now. The active segment still
   says which way the thing is set — which is the point of leaving the control on
   screen rather than hiding it — while neither segment offers to be clicked. A
   bearing that is HELD is drawn whether or not anyone asked, so its toggle reads
   "Drawn" and refuses.
   Both backgrounds are stated rather than left to the rules above, and NOT by
   narrowing the hover selector to :not(:disabled): a pseudo-class weighs the same
   as a class, so that lifted hover above `.active` and washed out the filled
   segment of every toggle in the app the moment the pointer rested on it. These
   two sit after `.active` and outrank it on count alone. */
.mode-toggle .seg:disabled { cursor: default; opacity: 0.5; background: transparent; }
.mode-toggle .seg.active:disabled { background: var(--leaf); }
.mode-toggle--sm .seg { padding: 0.18rem 0.55rem; font-size: 0.78rem; }
.mode-toggle--block { width: 100%; }
/* The seed segment previews what "Seed" actually draws: the barber-pole fill from
   seed-patch/render.js#drawStripedRegion. */
.mode-toggle .seg[data-action="mode-seed"].active {
  background-color: var(--leaf);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.55) 0,   rgba(255, 255, 255, 0.55) 5px,
    rgba(255, 255, 255, 0)    5px, rgba(255, 255, 255, 0)    10px
  );
  color: #fff;
  text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.45);
}

/* ── Species card ────────────────────────────────────────────────────────────
   One species offered for picking: a round colour dot, the name, and the
   size/spacing/days/life line under it. The third column holds the library's edit
   button and collapses to nothing on the simple-mode picker, which has none — so
   one grid serves both. Simple mode's card is a <button>, the library's a <div>;
   the cells are spans either way, which is valid inside both. */
.species-list { display: flex; flex-direction: column; gap: 0.35rem; }
.species-list__cat {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--slate); margin: 0.7rem 0 0.25rem; font-weight: 700;
}
.species-list__cat:first-child { margin-top: 0; }

.species-card {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 0.6rem;
  align-items: center;
  width: 100%;
  font: inherit; text-align: left;
  background: var(--paper);
  border: 1px solid var(--slate-faint);
  border-radius: var(--radius);
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.species-card:hover { border-color: var(--leaf); background: var(--leaf-soft); }
.species-card[aria-pressed="true"] {
  border-color: var(--flame);
  background: rgba(255, 136, 68, 0.08);
}
/* A ROW THAT IS AN OBJECT: a 1px rule, the shared radius, paper under it -- the
   plantings list's rows and the Layers panel's cards. A row you can pick up has
   to look like a thing before it looks like a line of text. The fallbacks are
   inventory.css's, which simple mode renders the same rows with. */
.list-card {
  border: 1px solid var(--slate-faint, #e6e6e6);
  border-radius: var(--radius, 8px);
  background: var(--paper, #fff);
}

.species-card__swatch {
  grid-column: 1; grid-row: 1 / span 2; align-self: center;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--slate-faint);
}
.species-card__name {
  grid-column: 2; grid-row: 1; align-self: end;
  font-weight: 700; font-size: 0.92rem; color: var(--ink); line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.species-card__meta {
  grid-column: 2; grid-row: 2; align-self: start;
  color: var(--slate); font-size: 0.76rem; line-height: 1.15; margin-top: 0.1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.species-card__actions {
  grid-column: 3; grid-row: 1 / span 2; align-self: center;
  display: inline-flex; align-items: center; gap: 0.2rem;
}

/* ── Canvas-chrome checkbox ──────────────────────────────────────────────────
   A native checkbox, a glyph and a label, sitting on a status strip or a sun bar.
   No chrome of its own — no border, no hover fill, no padding: it lives ON a
   strip that already has a surface, and a second surface inside it reads as a
   button that isn't one.
   `.toggle--icon` marks the ones whose glyph carries the meaning, so a narrowed
   strip can drop the words (the editor does this when the tutorial opens). */
.toggle {
  display: inline-flex; align-items: center; gap: 0.3rem;
  flex-shrink: 0;
  font-size: 0.85rem; font-weight: 600; color: var(--ink);
  cursor: pointer;
  user-select: none;
  /* These are toggle LABELS; opt out of any all-caps field-caption styling the
     surrounding panel sets on `label`. */
  text-transform: none; letter-spacing: normal;
}
.toggle input {
  width: 16px; height: 16px; margin: 0;
  cursor: pointer;
  accent-color: var(--leaf);
}
.toggle .gc-icon { color: var(--slate); }
/* No focus ring on the LABEL: it drew a green box around the whole control, which
   read as a selected / active state it never was. The checkbox inside still shows
   its own native focus ring, so keyboard users lose nothing. */

/* ── Quantity stepper ────────────────────────────────────────────────────────
   − N + : the control that grows and shrinks a count in place. The plant queue
   sets a target with it, the plantings list changes what's actually planted; it's
   the same gesture, so it's the same widget at the same size. Buttons are square
   at the same 28px as the row's action buttons, so a row reads at one height. */
.qty-stepper { display: inline-flex; align-items: center; gap: 0.2rem; flex: 0 0 auto; }
/* Border and hover are .btn--ghost's, rule for rule (css/style.css): a 2px slate
   outline at rest, filling with ink on hover. The focus / remove buttons sitting
   beside these on the same row ARE ghost buttons, so anything else made the ± read
   as a different class of control. */
.qty-stepper__btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--slate);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font: 700 0.95rem/1 var(--font-ui);
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.qty-stepper__btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.qty-stepper__btn:active { transform: translateY(1px); }
/* Off, two ways. `disabled` is the plain case (− at a count of 1). aria-disabled is
   the case that has something to SAY — + when the bed has no room for another: a
   real disabled button fires no pointer events, so its tooltip could never appear,
   and the explanation is the whole point. Both read identically. */
.qty-stepper__btn:disabled,
.qty-stepper__btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.qty-stepper__btn:disabled:hover,
.qty-stepper__btn[aria-disabled="true"]:hover,
.qty-stepper__btn[aria-disabled="true"]:active {
  background: var(--paper); color: var(--ink); border-color: var(--slate);
  transform: none;
}
.qty-stepper__input {
  width: 44px; height: 28px;
  padding: 0 0.2rem;
  border: 1px solid var(--slate-faint); border-radius: 4px;
  background: var(--paper); color: var(--ink);
  font: 600 0.9rem var(--font-ui);
  text-align: center;
  font-variant-numeric: tabular-nums;
  /* Hide the native spinners — the ± buttons are easier to hit (#106). Typing
     still works. */
  -moz-appearance: textfield;
}
.qty-stepper__input::-webkit-outer-spin-button,
.qty-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Status strip ────────────────────────────────────────────────────────────
   The line under a canvas: what the pointer does on the left (scrolling when it
   overflows), the view toggles pinned right. The page sheet owns where the strip
   sits and how it is bordered — the editor's spans the full canvas footer, simple
   mode's closes the canvas box — but the contents read identically. */
.status-strip__sheet {
  display: flex; align-items: center; gap: 0.55rem;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.status-strip__sheet::-webkit-scrollbar { height: 0; }
.status-strip__tool {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--leaf-deep);
  background: var(--leaf-soft);
  border: 1px solid var(--leaf);
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
}
.status-strip__items {
  display: inline-flex; align-items: center; gap: 0.45rem;
  flex-wrap: nowrap;
}
.status-strip__item { display: inline-flex; align-items: center; gap: 0.3rem; flex-shrink: 0; }
.status-strip__action { font-weight: 600; color: var(--ink); }
.status-strip__sep { color: var(--slate-faint); user-select: none; }

/* ── Phone: the same widgets, finger-sized ───────────────────────────────────
   Same breakpoint as the rest of the site (css/style.css). Nothing here changes
   what a control looks like — only how much of it there is to hit. A 28px stepper
   button and a 16px checkbox are fine under a mouse and a coin-toss under a
   thumb, and these are the controls a beginner uses most on a phone: the ± on a
   planting, the Plant | Seed choice, the view toggles under the canvas. */
@media (max-width: 640px) {
  .mode-toggle .seg { min-height: 38px; }
  .mode-toggle--sm .seg { min-height: 34px; }

  .qty-stepper { gap: 0.3rem; }
  .qty-stepper__btn { width: 38px; height: 38px; font-size: 1.05rem; }
  .qty-stepper__input { width: 50px; height: 38px; font-size: 0.95rem; }

  /* The checkbox itself grows; the label's own box grows with it, so the whole
     "glyph + words" reads as one 40px target rather than a 16px square. */
  .toggle { min-height: 40px; gap: 0.4rem; }
  .toggle input { width: 20px; height: 20px; }

  .species-card { padding: 0.5rem 0.6rem; }
  .species-card__name { font-size: 0.95rem; }
}

/* ── Harvest panel (js/yield-panel.js) ────────────────────────────────
   An expanding <details> with one stacked bar per week of the season. Bars are
   divs rather than a canvas: crisp at any zoom or device pixel ratio with no
   redraw on resize or theme change, and no charting library.
   Shared by the plant-queue inspector and simple mode's Plantings list, so the
   two show the same chart at the same size. */
.hpanel {
  border: 1px solid var(--slate-faint);
  border-radius: var(--radius);
  background: var(--paper);
  margin-bottom: 0.5rem;
}
.hpanel__head {
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  font-size: 0.82rem;
  list-style: none;              /* the default marker; the chevron below replaces it */
}
.hpanel__head::-webkit-details-marker { display: none; }
/* THE DISCLOSURE TRIANGLE: a CSS-drawn wedge in the text colour, turned a quarter
   while its section is open. One convention for the app, worn by the harvest
   panel's summary here and the Layers panel's twisties (css/editor.css), which
   were a number-for-number copy of it. Open is an open <details> around it, or a
   control that says aria-expanded. */
.disclosure::before {
  content: '';
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 120ms ease;
}
details[open] > .disclosure::before,
.disclosure[aria-expanded="true"]::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .disclosure::before { transition: none; }
}
.hpanel__head::before {
  color: var(--slate);
  flex: none;
  /* Nudged to sit on the text baseline rather than the flex line's top. */
  align-self: center;
}
.hpanel__head:hover { color: var(--leaf-deep); }
.hpanel__head:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius); }
.hpanel__title { font-weight: 600; }
.hpanel__total { color: var(--slate); margin-left: auto; font-variant-numeric: tabular-nums; }
.hpanel__body { padding: 0 0.6rem 0.6rem; }

/* The chart. A fixed height so the bars are comparable between renders, and
   `align-items: flex-end` so every stack grows from the baseline. */
.hpanel__chart {
  display: flex; align-items: flex-end; gap: 2px;
  height: 76px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--slate-faint);
}
.hbar {
  flex: 1 1 0; min-width: 3px;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: 2px 2px 0 0;
  overflow: hidden;
}
/* A quiet week is drawn as a baseline stub, not as nothing: a gap you can see is
   the actionable fact in the chart (it is what succession sowing fills), and an
   absent bar would read as the chart ending early. */
.hbar--empty { background: linear-gradient(to top, var(--slate-faint) 3px, transparent 3px); }
.hbar__seg { display: block; width: 100%; flex: none; }
.hbar:hover .hbar__seg { filter: brightness(1.1); }
.hpanel__axis {
  display: flex; justify-content: space-between;
  margin-top: 0.2rem;
  font-size: 0.68rem; color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.hpanel__note { margin: 0.35rem 0 0; font-size: 0.72rem; color: var(--slate); }

/* Per-crop breakdown — also the chart's legend, since the swatches are the same
   colours the bars are stacked in. */
.hcrops { list-style: none; margin: 0.45rem 0 0; padding: 0; display: grid; gap: 0.2rem; }
.hcrop {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto auto;
  align-items: center; gap: 0.4rem;
  font-size: 0.74rem;
}
.hcrop__swatch { width: 10px; height: 10px; border-radius: 3px; }
.hcrop__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcrop__amount { color: var(--slate); font-variant-numeric: tabular-nums; }
.hcrop__when {
  color: var(--slate); font-size: 0.68rem;
  background: var(--leaf-soft); padding: 0 0.35rem;
  /* A rounded RECTANGLE, not a pill: at this height 999px collapses into two half
     arcs, which is a different shape language from every other panel here. 4px is
     --radius scaled to a chip two lines of text tall. */
  border-radius: 4px;
  white-space: nowrap;
}


/* Inline variant: the chart as part of a block that already has its own heading —
   the plant inspector's Growth section, whose Harvest row is the sentence this
   chart illustrates. No border of its own, since it is not a separate card. */
.hpanel--inline {
  border: 0;
  background: transparent;
  margin: 0.3rem 0 0.2rem;
}
.hpanel--inline .hpanel__body { padding: 0; }

/* ── the angle field: a value, and the notation it is written in ────────────
   One text box for every angle in the app -- north, a corner, an arc's sweep, a
   course's bearing -- with a small button INSIDE it at the right naming the
   notation: the protractor for decimal degrees, the compass needle for survey
   notation, switching to the other when pressed.

   Inside rather than beside, and light grey rather than the ink of a real
   control, because survey notation is an advanced feature. It should be there
   for whoever reaches for it and quiet for everybody else -- a novice never has
   to decide anything about it. Hover or keyboard focus brings it to full ink, so
   it reads as a button the moment it is aimed at. */
/* The LENGTH field (length-field.js) is the same widget for the other quantity
   -- a text box with a small notation mark inside it -- so it is the same rules
   rather than a copy of them, and the two cannot drift apart. */
.angle-field, .length-field { position: relative; display: flex; flex: 1; min-width: 0; }
.angle-field > input, .length-field > input { width: 100%; padding-right: 2.1rem; }
/* ...except where there is no button to leave room for: a garden in metres has
   no second notation, so the length field draws none and the gutter would be a
   dead indent on every value in the panel. */
.length-field:not(:has(> .length-field__mode)) > input { padding-right: 0.45rem; }
.angle-field__mode, .length-field__mode {
  position: absolute; right: 0.45rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--slate-faint, #c9c6bf); cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}
.angle-field__mode .gc-icon, .length-field__mode .gc-icon { width: 17px; height: 17px; }
.angle-field__mode:hover, .length-field__mode:hover,
.angle-field__mode:focus-visible,
.length-field__mode:focus-visible { color: var(--ink, #1a1a1a); }
.angle-field__mode:focus-visible,
.length-field__mode:focus-visible { outline: 2px solid var(--leaf, #4a8a3e); outline-offset: 1px; }
/* The box's own focus ring belongs to the box, so the button inside it does not
   also paint one when the field is being typed into. */
.angle-field > input:focus + .angle-field__mode,
.length-field > input:focus + .length-field__mode { color: var(--slate, #666); }