:root {
  /* Tailwind's `olive` ramp, v4.3.1 oklch values verbatim.
     ---------------------------------------------------------------------------
     Authored here rather than used as bg-olive-* utilities because this app pins
     tailwindcss-ruby 4.1.18, which predates the family - `bg-olive-50` compiles
     to nothing at all, silently. Copying the real values in means the day the gem
     moves past 4.2 these match exactly and nothing shifts underneath us.

     Despite the name it is not a green: hue 106.5-107.4 at chroma 0.003-0.031, a
     warm near-neutral. That is the point. It is within a percent of lightness of
     the chrome the app already ships - --tk-nav #f9f8f7 is olive-50, --tk-sunken
     #f2f1ef is olive-100, --tk-pill #e8e6e2 is olive-200, --tk-ink #2c2c2b is
     olive-800 - so the marketing site gets a warm ground without inventing a
     palette the product does not have. */
  --public-olive-50:  oklch(98.8% 0.003 106.5);
  --public-olive-100: oklch(96.6% 0.005 106.5);
  --public-olive-200: oklch(93% 0.007 106.5);
  --public-olive-300: oklch(88% 0.011 106.6);
  --public-olive-400: oklch(73.7% 0.021 106.9);
  --public-olive-500: oklch(58% 0.031 107.3);
  --public-olive-600: oklch(46.6% 0.025 107.3);
  --public-olive-700: oklch(39.4% 0.023 107.4);
  --public-olive-800: oklch(28.6% 0.016 107.4);
  --public-olive-900: oklch(22.8% 0.013 107.4);

  /* Roles.
     ---------------------------------------------------------------------------
     The page itself and the nav bar are plain white; olive is what everything
     *raised or recessed against* the page is made of - alternating bands at 100,
     media frames at 200, rules at 300. That is the same arrangement getharvest.com
     uses with the tones the other way round: whatever the page is, a band and a
     screenshot frame are never that tone, and the tone step alone does the
     separating, which is why nothing here needs a card border or a shadow.

     olive-300 is deliberately not a text ground: body copy on it is 2.98:1 and
     the blue CTA 3.67:1, both AA failures. Keep it on rules and edges. */
  --public-bg: #ffffff;
  --public-section-alt-bg: var(--public-olive-100);
  --public-closing-bg: var(--public-olive-200);
  --public-surface: #ffffff;
  --public-frame: var(--public-olive-200);
  --public-border: var(--public-olive-300);
  --public-text: var(--public-olive-800);
  --public-muted: var(--public-olive-600);
  --public-primary: #3b82f6;
  --public-primary-hover: #2563eb;

  /* Display face for marketing headings at 40px and up. Below that the Light
     strokes get too thin, so smaller headings keep --public-font-body. Both are
     loaded by the one Google Fonts link in layouts/public.html.erb. */
  --public-font-display: "Hanken Grotesk", Inter, -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif;
  --public-font-body: Inter, -apple-system, "system-ui", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";

  /* The --color-* / --direction set that used to be duplicated here has moved to
     app/assets/tailwind/application.css, which both layouts already load: the
     public site via stylesheet_link_tag "tailwind", the app via :app. Duplicating
     them meant this file quietly won on app pages — harmless while the values
     matched, fatal to a theme override the moment they did not. */
}

/* Public theme text utilities */
.public-text-primary { color: var(--color-text-primary); }
.public-text-secondary { color: var(--color-text-secondary); }
.public-text-tertiary { color: var(--color-text-tertiary); }
.public-text-accent { color: var(--color-text-accent-primary); }
.public-text-inverse-primary { color: var(--color-text-inverse-primary); }
.public-text-inverse-secondary { color: var(--color-text-inverse-secondary); }

.public-hover-text-primary:hover { color: var(--color-text-primary); }
.public-hover-text-secondary:hover { color: var(--color-text-secondary); }

/* Google renders the help search with an unlayered vendor stylesheet. Keep
   these adapter rules unlayered too, scoped to the search widget. */
.public-layout #search-results .gsc-control-cse {
  padding: 0;
  border: 0;
  background: var(--public-bg);
  font-family: var(--public-font-body);
  color: var(--public-text);
}
.public-layout #search-results table { table-layout: auto; }
.public-layout #search-results td { padding: 0; border: 0; }
.public-layout #search-results .gsc-input-box {
  border: 1px solid var(--public-olive-300);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: none;
}
.public-layout #search-results .gsc-input-box:focus-within {
  border-color: var(--public-olive-500);
  box-shadow: none;
}
.public-layout #search-results button.gsc-search-button {
  margin-left: 8px;
  padding: 14px 22px;
  border: 1px solid var(--public-olive-800);
  border-radius: 999px;
  background: var(--public-olive-800);
}
.public-layout #search-results button.gsc-search-button:hover {
  border-color: var(--public-olive-900);
  background: var(--public-olive-900);
}
.public-layout #search-results :is(.gsc-table-result, .gs-title, .gs-snippet, .gsc-input) {
  font-family: var(--public-font-body);
}
.public-layout #search-results :is(a.gs-title, a.gs-title b, .gsc-cursor-page) {
  color: var(--public-primary);
}
.public-layout #search-results :is(.gs-snippet, .gs-visibleUrl, .gs-visibleUrl-breadcrumb) {
  color: var(--public-muted);
}
.public-layout #search-results .gsc-webResult.gsc-result {
  border-bottom: 1px solid var(--public-border);
  padding: 20px 0;
}
.public-layout #search-results .gsc-tabHeader.gsc-tabhActive {
  border-color: var(--public-olive-700);
  color: var(--public-text);
}

.public-placeholder::placeholder { color: var(--color-text-placeholder); }

.public-icon-primary { color: var(--color-icon-primary); }
.public-icon-secondary { color: var(--color-icon-secondary); }

/* ⚠️ Nothing in this file may use a bare element selector.
   -----------------------------------------------------------------------------
   The `:app` stylesheet group is a catch-all over app/assets/stylesheets, so
   public.css is linked on APP pages too, not just public ones - check the <link>
   list on app.gettimen.dev before assuming otherwise. There used to be an
   unscoped `body { background: var(--public-bg); color: var(--public-text) }`
   here, which therefore painted the app as well; it went unnoticed for as long as
   both values happened to equal the app's (#ffffff / #2c2c2b) and broke the
   moment --public-bg turned olive. It has been folded into .public-layout below,
   which is the class the public layout puts on <body>. The :root block above is
   fine - those custom properties reach app pages but nothing there reads them.
   This is the same trap the note in that block describes. */
.public-layout {
  background: var(--public-bg);
  color: var(--public-text);
  font-family: var(--public-font-body);
  font-optical-sizing: auto;

  /* Ink, re-pointed at the olive ramp for the public site only.
     ---------------------------------------------------------------------------
     These three names are aliases the hand-written public utilities already read
     (~every `[color:var(--color-text-primary)]` in public/*.css), so overriding
     them here re-inks the whole marketing site without touching a single rule.
     Scoping to .public-layout is what keeps the app out of it: the same aliases
     are defined on :root in tailwind/application.css and drive the themed app,
     which must stay pixel-identical.

     It is also a contrast fix, not just a tint. --tk-ink-2 #7d7a75 is 4.27:1 on
     white, an AA failure the site shipped with, and it only gets worse on the
     tinted bands. olive-600 passes on all three grounds in use: 6.90 on white,
     6.26 on olive-100, 5.61 on olive-200. Tertiary improves from 2.67 to 4.25
     but still falls short of 4.5; the next stock step down is olive-600, which
     would collapse it into secondary, so it stays here and stays flagged. */
  --color-text-primary: var(--public-olive-800);
  --color-text-secondary: var(--public-olive-600);
  --color-text-tertiary: var(--public-olive-500);
}

/* Anchor / in-page navigation (e.g. help topic sections) — public layout only */
html:has(body.public-layout) {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.public-layout) {
    scroll-behavior: auto;
  }
}

.footer-social {
  margin-top: 30px;
  background: var(--public-olive-800);
  padding: 20px 0 25px 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  /* Three items now (copyright, social, store badges) need ~530px of content,
     so the row has to wrap on a phone. row-gap only: space-around still
     distributes the desktop row exactly as it did with two items. */
  flex-wrap: wrap;
  row-gap: 16px;
  color: var(--public-olive-100);
  font-size: 14px;
}


.footer-social a:hover {
  color: #fff;
}