/* Farm Simple (dormouse4) toy tokens.
   Most values are Farm Simple's own Tailwind palette (leaf, earth, cream). Tomato red, flower yellow and the frost blues are new,
   because the site palette has none. Approved by Kyle, 16 Sep 2026. */
:root {
  --fs-paper: #fbfaf6;
  --fs-panel: #f3f7f1;
  --fs-ink: #283a23;
  --fs-ink-soft: #395730;
  --fs-line: #2f4628;
  --fs-focus: #395730;
  --fs-leaf: #5c8a4c;
  --fs-leaf-deep: #476e3b;
  --fs-leaf-pale: #c7d9bf;
  --fs-sky: #e3ecde;
  --fs-soil: #735039;
  --fs-soil-pale: #d0b794;
  --fs-root: #f2ebe0;
  --fs-pot: #a87d4f;
  --fs-pot-rim: #8f6743;
  --fs-fruit: #c2412d;
  --fs-fruit-deep: #9b2c1c;
  --fs-fruit-green: #7ba36b;
  --fs-flower: #e7b93a;
  --fs-frost: #cfe0ea;
  --fs-frost-deep: #6f93ab;
}

/* Farm Simple named motion curves. Checked 16 Sep 2026 against World Table, Football Fan Culture and coffee:
   no curve is within 0.03 of another site's at all 21 sample points (closest gaps: grow 0.052, drop 0.041). */
:root {
  --fs-ease-grow: cubic-bezier(.34, .02, .22, 1.12);
  --fs-ease-settle: cubic-bezier(.12, .38, .46, 1);
  --fs-ease-drop: cubic-bezier(.52, 0, .78, .12);
  --fs-ease-sway: cubic-bezier(.44, .06, .56, .94);
}

@property --fs-tomato-t { syntax: "<number>"; inherits: true; initial-value: 0; }

.fs-tomato-root { --fs-tomato-now: 8; position: relative; display: grid; gap: 1rem; max-width: 46rem; padding: clamp(.9rem, 3vw, 1.5rem); color: var(--fs-ink); background: var(--fs-paper); border: 1px solid var(--fs-leaf-pale); border-radius: 16px; }
.fs-tomato-root .fs-tomato-head { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-start; justify-content: space-between; }
.fs-tomato-root .fs-tomato-title { margin: 0; font-family: var(--font-serif, Georgia, serif); font-size: 1.45rem; font-weight: 650; line-height: 1.15; }
.fs-tomato-root .fs-tomato-host { flex: 1 1 17rem; margin: 0; padding: .6rem .85rem; background: var(--fs-panel); border: 1px solid var(--fs-leaf-pale); border-radius: 14px 14px 14px 4px; }
.fs-tomato-root .fs-tomato-host-name { display: block; font-size: .8rem; font-weight: 650; color: var(--fs-leaf-deep); }
.fs-tomato-root .fs-tomato-host-line { margin: .1rem 0 0; }
.fs-tomato-root .fs-tomato { display: block; width: 100%; height: auto; border-radius: 12px; }
.fs-tomato-root .fs-tomato-scrub { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; }
.fs-tomato-root .fs-tomato-scrub label { font-weight: 600; }
.fs-tomato-root .fs-tomato-scrub input { flex: 1 1 10rem; min-height: 2.75rem; accent-color: var(--fs-leaf-deep); }
.fs-tomato-root .fs-tomato-now { min-width: 11rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.fs-tomato-root .fs-tomato-key { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin: -.4rem 0 0; padding: 0; list-style: none; font-size: .85rem; color: var(--fs-ink-soft); }
.fs-tomato-root .fs-tomato-sw { display: inline-block; width: .85rem; height: .85rem; margin-right: .35rem; border-radius: 3px; vertical-align: -2px; }
.fs-tomato-root .fs-tomato-sw-in { background: var(--fs-leaf-pale); }
.fs-tomato-root .fs-tomato-sw-out { background: var(--fs-leaf); }
.fs-tomato-root .fs-tomato-sw-pick { background: var(--fs-fruit); }
.fs-tomato-root .fs-tomato-sw-frost { background: var(--fs-frost-deep); }
.fs-tomato-root .fs-tomato-controls { display: grid; gap: .75rem 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.fs-tomato-root .fs-tomato-field { display: grid; gap: .3rem; margin: 0; }
.fs-tomato-root .fs-tomato-field label, .fs-tomato-root legend { font-weight: 600; }
.fs-tomato-root fieldset { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin: 0; padding: .4rem .75rem .6rem; border: 1px solid var(--fs-leaf-pale); border-radius: 10px; }
.fs-tomato-root fieldset label { display: inline-flex; gap: .35rem; align-items: center; min-height: 2rem; font-weight: 400; }
.fs-tomato-root input[type="radio"] { width: 1.1rem; height: 1.1rem; accent-color: var(--fs-leaf-deep); }
.fs-tomato-root select { width: 100%; min-height: 2.75rem; padding: .4rem .6rem; font: inherit; color: var(--fs-ink); background: var(--fs-paper); border: 1.5px solid var(--fs-leaf-pale); border-radius: 8px; }
.fs-tomato-root .fs-tomato-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .5rem; margin: 0; }
.fs-tomato-root .fs-tomato-results div { padding: .5rem .75rem; background: var(--fs-panel); border-radius: 10px; }
.fs-tomato-root dt { font-size: .8rem; color: var(--fs-ink-soft); }
.fs-tomato-root dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.fs-tomato-root[data-pot-verdict="too-small"] .fs-tomato-potres { color: var(--fs-fruit-deep); }
.fs-tomato-root .fs-tomato-risk { margin: 0; padding-left: .75rem; font-weight: 650; border-left: 4px solid var(--fs-leaf); }
.fs-tomato-root:is([data-risk="waiting"], [data-risk="late"]) .fs-tomato-risk { border-left-color: var(--fs-fruit); }
.fs-tomato-root .fs-tomato-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.fs-tomato-root button { min-height: 2.75rem; padding: .5rem 1rem; font: inherit; font-weight: 600; color: var(--fs-ink); background: var(--fs-paper); border: 1.5px solid var(--fs-leaf-deep); border-radius: 999px; cursor: pointer; }
.fs-tomato-root button[data-k-pause] { color: var(--fs-paper); background: var(--fs-leaf-deep); }
.fs-tomato-root :focus-visible { outline: 3px solid var(--fs-focus); outline-offset: 2px; }
.fs-tomato-root .fs-tomato-note { margin: 0; font-size: .85rem; color: var(--fs-ink-soft); }
.fs-tomato-root .fs-tomato-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.fs-tomato-root .fs-tomato-bg { fill: var(--fs-sky); }
.fs-tomato-root .fs-tomato-window { fill: var(--fs-paper); stroke: var(--fs-line); stroke-width: 3; }
.fs-tomato-root .fs-tomato-frame { stroke: var(--fs-line); stroke-width: 3; }
.fs-tomato-root .fs-tomato-sill { fill: var(--fs-pot-rim); }
.fs-tomato-root .fs-tomato-sun { fill: var(--fs-flower); }
.fs-tomato-root .fs-tomato-ground { fill: var(--fs-leaf-pale); }
.fs-tomato-root .fs-tomato-frost path { fill: none; stroke: var(--fs-frost-deep); stroke-width: 2.2; stroke-linecap: round; }
.fs-tomato-root .fs-tomato-body { fill: var(--fs-soil); stroke: var(--fs-pot); stroke-width: 5; stroke-linejoin: round; }
.fs-tomato-root .fs-tomato-pot-growbag .fs-tomato-body { stroke: var(--fs-ink-soft); stroke-width: 3; }
.fs-tomato-root .fs-tomato-rim { fill: var(--fs-pot-rim); }
.fs-tomato-root .fs-tomato-roots { fill: none; stroke: var(--fs-root); stroke-width: 1.6; stroke-linecap: round; }
.fs-tomato-root .fs-tomato-circle { fill: none; stroke: var(--fs-root); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; }
.fs-tomato-root .fs-tomato-seed { fill: var(--fs-soil-pale); stroke: var(--fs-line); stroke-width: 1; }
.fs-tomato-root .fs-tomato-stem { fill: none; stroke: var(--fs-leaf-deep); stroke-width: 3; stroke-linecap: round; }
.fs-tomato-root .fs-tomato-cane { fill: none; stroke: var(--fs-pot-rim); stroke-width: 2.5; stroke-linecap: round; }
.fs-tomato-root .fs-tomato-leaf { fill: var(--fs-leaf); stroke: var(--fs-line); stroke-width: 1.2; }
.fs-tomato-root .fs-tomato-flower { fill: var(--fs-flower); stroke: var(--fs-line); stroke-width: .6; }
.fs-tomato-root .fs-tomato-fruit-g circle { fill: var(--fs-fruit-green); stroke: var(--fs-line); stroke-width: 1; }
.fs-tomato-root .fs-tomato-fruit-r circle { fill: var(--fs-fruit); stroke: var(--fs-line); stroke-width: 1; }
.fs-tomato-root[data-stage="finished"] .fs-tomato-leaf { fill: var(--fs-soil-pale); }
.fs-tomato-root .fs-tomato-cell { fill: var(--fs-panel); stroke: var(--fs-leaf-pale); stroke-width: 1; }
.fs-tomato-root .fs-tomato-cell:is([data-cell="sown"], [data-cell="seedling"], [data-cell="potted-on"]) { fill: var(--fs-leaf-pale); stroke: var(--fs-leaf); }
.fs-tomato-root .fs-tomato-cell:is([data-cell="planted-out"], [data-cell="flowering"], [data-cell="fruiting"]) { fill: var(--fs-leaf); stroke: var(--fs-leaf-deep); }
.fs-tomato-root .fs-tomato-cell[data-cell="picking"] { fill: var(--fs-fruit); stroke: var(--fs-fruit-deep); }
.fs-tomato-root .fs-tomato-cell[data-cell="finished"] { fill: var(--fs-frost-deep); stroke: var(--fs-line); }
.fs-tomato-root .fs-tomato-mlab { fill: var(--fs-ink-soft); font: 600 11px var(--font-sans, system-ui, sans-serif); text-anchor: middle; }
.fs-tomato-root .fs-tomato-playhead { transform: translateX(calc((var(--fs-tomato-now) + .5) * 26.667px + 20px)); }
.fs-tomato-root .fs-tomato-playhead path { fill: var(--fs-ink); }
.fs-tomato-root .fs-tomato-head-line { stroke: var(--fs-ink); stroke-width: 2; }

.fs-tomato-root :is(.fs-tomato-st, .fs-tomato-pot, .fs-tomato-in, .fs-tomato-out, .fs-tomato-frost, .fs-tomato-extra, .fs-tomato-circle) { display: none; }
.fs-tomato-root[data-pot="10L"] .fs-tomato-pot-10,
.fs-tomato-root[data-pot="20L"] .fs-tomato-pot-20,
.fs-tomato-root[data-pot="40L"] .fs-tomato-pot-40,
.fs-tomato-root[data-pot="growbag"] .fs-tomato-pot-growbag { display: inline; }
.fs-tomato-root:is([data-stage="sown"], [data-stage="seedling"], [data-stage="potted-on"]) .fs-tomato-in { display: inline; }
.fs-tomato-root:is([data-stage="planted-out"], [data-stage="flowering"], [data-stage="fruiting"], [data-stage="picking"], [data-stage="finished"]) .fs-tomato-out { display: inline; }
.fs-tomato-root[data-stage="finished"] .fs-tomato-frost { display: inline; }
.fs-tomato-root[data-stage="finished"] .fs-tomato-sun { display: none; }
.fs-tomato-root[data-stage="sown"] .fs-tomato-st-seed,
.fs-tomato-root[data-stage="seedling"] .fs-tomato-st-seedling,
.fs-tomato-root[data-stage="potted-on"] .fs-tomato-st-young { display: inline; }
.fs-tomato-root:is([data-stage="planted-out"], [data-stage="flowering"], [data-stage="fruiting"], [data-stage="picking"], [data-stage="finished"]) .fs-tomato-st-grown { display: inline; }
.fs-tomato-root:is([data-stage="flowering"], [data-stage="picking"]) .fs-tomato-flowers,
.fs-tomato-root[data-stage="fruiting"] .fs-tomato-fruit-g,
.fs-tomato-root[data-stage="picking"] .fs-tomato-fruit-r { display: inline; }
.fs-tomato-root[data-pot-verdict="too-small"]:not([data-stage="sown"], [data-stage="seedling"]) .fs-tomato-circle { display: inline; }
.fs-tomato-root[data-pot="10L"] .fs-tomato-plant { transform: translateY(14px); }
.fs-tomato-root[data-pot="40L"] .fs-tomato-plant { transform: translateY(-18px); }
.fs-tomato-root[data-pot="growbag"] .fs-tomato-plant { transform: translateY(38px); }

@media (prefers-reduced-motion: no-preference) {
  .fs-tomato-root .fs-tomato-plant { transition: transform 320ms var(--fs-ease-settle); }
  .fs-tomato-root .fs-tomato-playhead { transition: transform 240ms var(--fs-ease-settle); }
  .fs-tomato-root .fs-tomato-st { transform-origin: 180px 108px; animation: fs-tomato-grow 520ms var(--fs-ease-grow); }
  .fs-tomato-root .fs-tomato-extra { transform-box: fill-box; transform-origin: center; animation: fs-tomato-pop 380ms var(--fs-ease-grow); }
  .fs-tomato-root .fs-tomato-circle { animation: fs-tomato-draw 900ms var(--fs-ease-settle) both; }
  @keyframes fs-tomato-grow { from { transform: scale(.8); opacity: .3; } to { transform: none; opacity: 1; } }
  @keyframes fs-tomato-pop { from { transform: scale(.3); } to { transform: none; } }
  @keyframes fs-tomato-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
}