/* ===========================================================
   easy.css — Easy and Easiest modes  (html[data-mode])
   Plain rounded font, technical readouts hidden, words under
   the menu icons. Easiest also scales text 125% (settings.js).
   =========================================================== */

/* Nunito (SIL Open Font License), bundled so it works offline */
@font-face {
  font-family: "Nunito";
  src: url("../assets/fonts/nunito-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

/* things that only exist in Easy modes */
.easy-only { display: none; }

:root[data-mode="easy"],
:root[data-mode="easiest"] {
  --mono: "Nunito", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
}

:root[data-mode="easy"] body,
:root[data-mode="easiest"] body {
  font-variant-numeric: tabular-nums;   /* numbers stay lined up without a typewriter font */
}

:root[data-mode="easy"] .easy-only,
:root[data-mode="easiest"] .easy-only { display: inline; }

:root[data-mode="easy"] .tech,
:root[data-mode="easiest"] .tech { display: none !important; }

/* ---------- boot: a plain loading screen, no scrolling log ---------- */
:root[data-mode="easy"] .boot-log,
:root[data-mode="easiest"] .boot-log,
:root[data-mode="easy"] .boot-pct,
:root[data-mode="easiest"] .boot-pct,
:root[data-mode="easy"] #boot-grid,
:root[data-mode="easiest"] #boot-grid,
:root[data-mode="easy"] #boot-radar,
:root[data-mode="easiest"] #boot-radar { display: none; }

/* ---------- menu: a word under every icon ---------- */
.rail-label { display: none; }

:root[data-mode="easy"] .rail-label,
:root[data-mode="easiest"] .rail-label {
  display: block;
  font-size: 10px;           /* fixed: Easiest's bigger text must not burst the menu */
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
:root[data-mode="easy"] .rail-btn,
:root[data-mode="easiest"] .rail-btn {
  width: 56px; height: 52px;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 4px;
}
/* the hover tooltip just repeats the label now */
:root[data-mode="easy"] .rail-btn::after,
:root[data-mode="easiest"] .rail-btn::after { display: none; }
:root[data-mode="easy"] .rail-btn .badge,
:root[data-mode="easiest"] .rail-btn .badge { top: 2px; right: 6px; }

@media (max-width: 720px) {
  :root[data-mode="easy"] .rail-btn,
  :root[data-mode="easiest"] .rail-btn { width: auto; height: 50px; }
  :root[data-mode="easy"] .rail-label,
  :root[data-mode="easiest"] .rail-label { font-size: 9.5px; }
}

/* ---------- planting card on Now ---------- */
.plant-today { margin: 4px 0 0; color: var(--fg-hi); font-size: var(--fs-sm); }