/* ============================================================
   GardenCAD — shared styles
   Inherits EdQuest brand tokens (flame, slate, ink, paper, canvas)
   and adds a garden-themed complementary palette (leaf, sun, soil).
   ============================================================ */

:root {
  /* EdQuest base palette (mirrors edquest-incorporated/website/static/css/site.css) */
  --flame: #ff8844;
  --flame-deep: #e66a1a;
  --slate: #666666;
  --slate-soft: #8a8a8a;
  --slate-faint: #e6e6e6;
  --ink: #000000;
  --paper: #ffffff;
  --paper-warm: #fafafa;
  --canvas: #faf7f1;

  /* GardenCAD complementary palette */
  --leaf: #4a8a3e;
  --leaf-deep: #2f6429;
  --leaf-soft: #e2efdd;
  --sun: #ffd166;
  --sun-deep: #d99b1a;
  --soil: #8b6e4e;
  --sky: #c9e2f0;

  --radius: 8px;
  --radius-lg: 14px;
  /* Height of the editor's bottom sun-bar row. Shared so the tutorial's
     "Keyboard shortcuts" bottom button can match it exactly (#312 follow-up). */
  --sunbar-h: 64px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow: 0 4px 14px rgba(0, 0, 0, 0.08);

  /* One sans-serif scheme across the whole app — the landing page and the
     editor share the same system-UI font (no separate marketing serif). */
  --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
  --container: 72rem;

  --focus: 0 0 0 3px rgba(74, 138, 62, 0.35);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--leaf-deep); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
/* Match all native form-control accents to the GardenCAD leaf palette
   so checkboxes and radios feel like part of the same UI as the
   buttons. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--leaf); }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: none; box-shadow: var(--focus); border-radius: 4px;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: 700;
}
h1 { font-size: clamp(1.85rem, 4vw + 0.5rem, 2.75rem); }
h2 { font-size: clamp(1.45rem, 2.5vw + 0.5rem, 2rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 0.5rem 0.75rem; z-index: 100;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- Site header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--slate-faint);
  box-shadow: var(--shadow-sm);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.75rem 0;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  text-decoration: none; color: inherit;
}
.brand__mark { display: inline-flex; width: 2.4rem; height: 2.4rem; flex: 0 0 auto; }
.brand__mark img, .brand__mark svg { width: 100%; height: 100%; display: block; }
/* GardenCAD Q-mark, icon-grade (sprite #gc-logo-icon / #gc-logo-icon-filled).
   These paint with currentColor like the other glyphs, so they need an
   explicit colour — the wordmark is always brand green. Used wherever the
   mark renders small (topbar, site header, onboarding, auth, …); the host
   sets the box size. Defined here in the global sheet so it reaches the
   marketing pages, which load style.css but not editor.css. */
.gc-logo-mark { color: var(--leaf, #4a8a3e); flex: 0 0 auto; display: block; }
/* Stack wordmark + attribution as a tight 2-line column, baseline-
   nudged so "GardenCAD" reads centred against the Q-mark. */
.brand__stack {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
  padding-top: 0.18rem;
}
.brand__wordmark {
  font-weight: 700; font-size: 1.55rem; line-height: 1;
  letter-spacing: -0.01em; color: var(--ink);
}
.brand__sub {
  display: block;
  font-family: var(--font-ui);
  font-weight: 500; font-size: 0.7rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--slate);
}
.brand__sub strong { color: var(--flame-deep); font-weight: 600; }

.site-nav { display: flex; gap: 1.25rem; align-items: center; }
/* Account/sync control slot in the header (filled only in server-sync
   mode). Hidden when empty so it never shifts the local-only layout. */
.site-header__account { display: flex; align-items: center; }
.site-header__account:empty { display: none; }
.site-nav a {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.95rem;
  padding: 0.25rem 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] {
  color: var(--leaf-deep); border-bottom-color: var(--leaf);
}

/* ---------- Hero ---------- */
.hero {
  padding: 3rem 0 2rem;
  background:
    radial-gradient(circle at 85% 10%, rgba(255, 209, 102, 0.25), transparent 50%),
    radial-gradient(circle at 15% 90%, rgba(74, 138, 62, 0.18), transparent 55%),
    var(--canvas);
  border-bottom: 1px solid var(--slate-faint);
}
.hero__eyebrow {
  text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.78rem; color: var(--flame-deep); font-weight: 700;
  margin-bottom: 0.5rem;
}
.hero__lede { font-size: 1.15rem; color: var(--slate); max-width: 42rem; }
.hero__actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--leaf); --fg: var(--paper); --bd: var(--leaf);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1.1rem;
  background: var(--bg); color: var(--fg);
  border: 2px solid var(--bd); border-radius: var(--radius);
  font: inherit; font-weight: 700; text-decoration: none;
  cursor: pointer; min-height: 42px;
  transition: transform 0.05s ease, background 0.2s ease, color 0.2s ease;
}
.btn:hover { background: var(--leaf-deep); border-color: var(--leaf-deep); color: var(--paper); }
.btn:active { transform: translateY(1px); }
/* A disabled button (e.g. the queue "zoom to" with nothing placed, #23)
   reads as disabled and ignores hover, instead of looking clickable. */
.btn:disabled, .btn[disabled] {
  opacity: 0.4; cursor: not-allowed; transform: none;
}
.btn:disabled:hover, .btn[disabled]:hover {
  background: var(--bg); color: var(--fg); border-color: var(--bd);
}
.btn--ghost { --bg: transparent; --fg: var(--ink); --bd: var(--slate); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* Button colour vocabulary: solid leaf `.btn` is the primary /
   affirmative action of a panel; `.btn--ghost` is secondary / neutral;
   `.btn--danger` is destructive. A ghost button that toggles ON adopts
   the same pale-leaf "active" treatment the tool rail uses, so green
   always reads as go / active and we never reach for an off-palette
   accent for the on-state. */
.btn--ghost[aria-pressed="true"] {
  --bg: var(--leaf-soft); --fg: var(--leaf-deep); --bd: var(--leaf);
}
.btn--ghost[aria-pressed="true"]:hover {
  background: var(--leaf-soft); color: var(--leaf-deep); border-color: var(--leaf-deep);
}
.btn--sm { padding: 0.35rem 0.75rem; min-height: 34px; font-size: 0.9rem; }
/* Danger button: subtle at rest, distinctly bordered red on hover so it
   reads as "this destroys something" right before the click commits. */
.btn--danger {
  --bg: transparent; --fg: #c0392b; --bd: rgba(192, 57, 43, 0.45);
}
.btn--danger:hover {
  background: #fdecea;
  color: #a02e22;
  border-color: #c0392b;
  box-shadow: 0 0 0 1px #c0392b inset;
}

/* ---------- Icons (GardenCAD line-art, shared with the editor) ----------
   The sprite (assets/gc-icons/sprite.svg) is injected at boot; these
   rules give the landing page the same stroke-only glyphs the editor
   uses, so its buttons and cards speak one visual language. .gc-icon
   itself is duplicated from editor.css because the marketing pages don't
   load editor.css. */
.gc-icon {
  width: 22px; height: 22px;
  stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  flex: 0 0 auto;
}
.btn--sm .gc-icon { width: 18px; height: 18px; }
.gc-icon--lg { width: 28px; height: 28px; }

/* Feature-card medallion — echoes the editor's active-tool chip (a soft
   tint behind an accent-coloured glyph), tinted per card to match its
   left-border accent. */
.feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: var(--radius);
  background: var(--leaf-soft); color: var(--leaf-deep);
  margin-bottom: 0.5rem;
}

/* ---------- Garden list (landing) ---------- */
section { padding: 2rem 0; }
.section-title { margin-bottom: 1.5rem; }
.section-title small {
  display: block; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.78rem; color: var(--flame-deep); font-weight: 700;
  margin-bottom: 0.25rem;
}
/* Section header with a trailing action (e.g. "Manage" beside the gardens). */
.section-title--with-action {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
}

.garden-grid {
  display: grid; gap: 1.25rem;
  /* Container-driven, not viewport-driven: fit as many cards as the width
     allows at a comfortable minimum, so the same grid renders 3-up in the
     full-width landing and 2-up in the narrower Manage content pane — without
     cramping the cards (which wrapped the Rename/Delete buttons). */
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.garden-card {
  background: var(--paper);
  border: 1px solid var(--slate-faint);
  border-left: 5px solid var(--leaf);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 0.6rem;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  cursor: pointer;
  position: relative;
}
.garden-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-left-color: var(--leaf-deep);
}
.garden-card:focus-visible {
  outline: none; box-shadow: var(--focus);
}
.garden-card__title { margin: 0; font-size: 1.2rem; }
.garden-card__title { color: var(--ink); }
.garden-card:hover .garden-card__title { color: var(--leaf-deep); }
.garden-card__meta { color: var(--slate); font-size: 0.9rem; margin: 0; }
/* Landing feature cards. The icon sits on the same row as the heading (icon
   in column 1, title in column 2, the description spanning beneath) instead
   of stacking. The icon family CSS lives in editor.css, so .feature-icon is a
   small self-contained rule. Monochromatic leaf glyph; card border carries
   the accent colour. */
.garden-card--feature {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.7rem;
  row-gap: 0.5rem;
  cursor: default;
  border-left-color: var(--accent, var(--leaf));
}
.garden-card--feature .feature-icon { grid-column: 1; grid-row: 1; }
.garden-card--feature .garden-card__title { grid-column: 2; grid-row: 1; }
.garden-card--feature .garden-card__meta { grid-column: 1 / -1; }
/* Not clickable, so no hover affordance at all — hold the resting look (no
   lift, shadow change, border tint, or title recolour). */
.garden-card--feature:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
  border-left-color: var(--accent, var(--leaf));
}
.garden-card--feature:hover .garden-card__title { color: var(--ink); }
.feature-icon {
  width: 26px; height: 26px;
  box-sizing: content-box;
  padding: 7px;
  border-radius: 10px;
  stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  color: var(--accent, var(--leaf-deep));
  background: color-mix(in srgb, var(--accent, var(--leaf)) 14%, transparent);
}
.garden-card__stats {
  display: flex; gap: 0.75rem; flex-wrap: wrap;
  font-family: var(--font-ui);
  font-size: 0.8rem; color: var(--slate);
}
.garden-card__stats span {
  background: var(--leaf-soft);
  color: var(--leaf-deep);
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
}
.garden-card__actions { display: flex; gap: 0.5rem; margin-top: auto; flex-wrap: wrap; }
.garden-card--add {
  background: transparent;
  border: 2px dashed var(--slate-faint);
  border-left: 2px dashed var(--slate-faint);
  color: var(--slate);
  display: flex; align-items: center; justify-content: center;
  min-height: 8.5rem; cursor: pointer; font-weight: 700;
  text-align: center;
}
.garden-card--add:hover {
  border-color: var(--leaf); color: var(--leaf-deep);
  background: var(--leaf-soft);
}

/* Inline card edit states (rename / create form, delete confirm) reuse the
   card box — shared by the landing grid and the Manage page's My gardens. */
.garden-card--editing {
  cursor: default;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.7rem;
}
.garden-card--editing:hover {
  transform: none; box-shadow: var(--shadow-sm); border-left-color: var(--leaf);
}
.garden-card__input {
  width: 100%; box-sizing: border-box;
  padding: 0.5rem 0.65rem; font: inherit;
  border: 1px solid var(--slate-faint); border-radius: var(--radius);
}
.garden-card__input:focus { outline: none; border-color: var(--leaf); box-shadow: var(--focus); }
.garden-card--confirm { cursor: default; border-left-color: var(--flame, #e0662b); }
.garden-card--confirm:hover {
  transform: none; box-shadow: var(--shadow-sm); border-left-color: var(--flame, #e0662b);
}

.empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
  border: 2px dashed var(--slate-faint);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.empty-state h3 { margin-top: 0; }

/* ---------- Forms / dialogs ---------- */
dialog {
  border: 0;
  border-radius: var(--radius-lg);
  padding: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  max-width: 26rem;
  width: calc(100% - 2rem);
  background: var(--paper);
  color: var(--ink);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
dialog .dialog__head {
  padding: 1rem 1.25rem 0.5rem;
  border-bottom: 1px solid var(--slate-faint);
}
dialog .dialog__body { padding: 1rem 1.25rem; }
dialog .dialog__foot {
  padding: 0.75rem 1.25rem 1rem;
  display: flex; gap: 0.5rem; justify-content: flex-end;
  border-top: 1px solid var(--slate-faint);
}
dialog h2 { margin: 0; font-size: 1.2rem; }

.field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.75rem; }
.field label { font-weight: 700; font-size: 0.9rem; font-family: var(--font-ui); }
.field .help { color: var(--slate); font-size: 0.8rem; }
.field input, .field select, .field textarea {
  font: inherit; line-height: 1.4; color: var(--ink); background: var(--paper);
  border: 2px solid var(--slate-faint); border-radius: var(--radius);
  padding: 0.55rem 0.7rem; min-height: 38px; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--leaf); }
.field--row { flex-direction: row; gap: 0.5rem; align-items: center; }
.field--row > label { flex: 0 0 auto; min-width: 5rem; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink); color: var(--paper);
  padding: 2rem 0 1.25rem;
  margin-top: 3rem;
}
.site-footer a { color: var(--flame); text-decoration: none; }
.site-footer a:hover { color: var(--paper); }
.site-footer__grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr; }
}
.site-footer__lockup {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem;
}
.site-footer__lockup img, .site-footer__lockup svg { width: 2.4rem; height: 2.4rem; }
/* The footer sits on the dark --ink panel, so the filled Q-mark paints
   paper-white (overriding .gc-logo-mark's brand green) to match the wordmark. */
.site-footer__mark { color: var(--paper); }
.site-footer__wordmark {
  font-size: 1.4rem; font-weight: 700; line-height: 1;
  margin: 0; color: var(--paper); letter-spacing: -0.01em;
}
.site-footer__fine {
  margin-top: 1.5rem; padding-top: 0.75rem; border-top: 1px solid #333;
  color: #aaa; font-size: 0.85rem;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
/* Terse build identity, pinned to the lower right of the page. */
.site-footer__build {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.78rem; color: #888; white-space: nowrap;
}
.muted { color: var(--slate); }

/* App-wide tooltip (#360): the single styled bubble shown for any element with
   a `title`, matching the tool rail's black-on-paper look so every tooltip is
   consistent across the editor, landing, and settings pages. Positioned by
   js/tooltip.js (initTooltips). Lives here — the shared stylesheet — so it's
   available wherever a page opts into initTooltips(). */
.app-tooltip {
  position: fixed;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-ui); font-size: 0.78rem; line-height: 1.35;
  padding: 0.3rem 0.55rem; border-radius: 4px;
  max-width: 260px; white-space: normal;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  z-index: 9700;
}
.app-tooltip[hidden] { display: none; }

/* ---------- Utility ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}