/* holding.css - THE PRE-LAUNCH APPEARANCE, in one place.
 *
 * 620-636. Until 31/12/2026 the only faces the public may see are the holding
 * page on www. and the newsletter flow on data.. They must look like each
 * other and NOT like the platform: the whole point of the holding page is that
 * the design of TimberAtlas is not public yet, and a signup page rendered in
 * the site's own theme gave it away to every person who subscribed.
 *
 * The palette, the type and the logo were authored inline in
 * public/templates/holding.html by 735-471. They are extracted here rather
 * than copied so the two surfaces cannot drift: a second copy of these six
 * colours is exactly the shape this project keeps closing. holding.html keeps
 * ONLY its own single-screen centring, which the newsletter pages must not
 * have, and links this file for everything else.
 *
 * NO webfont. The holding page deliberately uses the visitor's system stack,
 * so linking /static/vendor/fonts/fonts.css here would reintroduce the brand
 * face this file exists to withhold.
 */

:root {
  color-scheme: dark;

  --hold-bg:       #14110f;
  --hold-ink:      #f2ede7;
  --hold-muted:    #cfc6bd;
  --hold-muted-2:  #b9b0a8;
  --hold-quiet:    #8d8378;
  --hold-line:     #3a332d;
  --hold-sans:     system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html, body { height: 100%; margin: 0; }

body {
  background: var(--hold-bg);
  color: var(--hold-ink);
  font-family: var(--hold-sans);
  box-sizing: border-box;
}

.ta-logo { width: 210px; max-width: 60vw; height: auto; margin-bottom: 2.5rem; }

/* ── The holding page's rotator ─────────────────────────────────────────────
   Fixed-height box with the lines stacked, so a long Finnish sentence after a
   short Korean one does not make the logo jump. The fade duration is set by
   the page, which owns the timing. */
.ta-rotator { position: relative; width: 100%; max-width: 46rem; min-height: 5.5rem; }
.ta-line {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.45;
  font-weight: 400;
  opacity: 0;
}
.ta-line.on { opacity: 1; }

/* Quieter and narrower than the rotating claim: it EXPLAINS, it does not
   compete with it. Not `.ta-line` - that class is absolutely positioned
   inside the rotator and is what the script cycles. */
.ta-intro {
  margin: 2.5rem 0 0;
  max-width: 40rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--hold-muted);
}
.ta-fixed {
  margin: 2.25rem 0 0;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--hold-muted-2);
}
.ta-contact { margin: 1.25rem 0 0; font-size: 0.9rem; }
.ta-contact a { color: var(--hold-ink); }
/* Quieter than the contact line on purpose: it is a door for the few who
   already know it is there, not an invitation to the many. */
.ta-signin { margin: 2.5rem 0 0; font-size: 0.8rem; }
.ta-signin a { color: var(--hold-quiet); text-decoration: none; border-bottom: 1px solid var(--hold-line); }
.ta-signin a:hover { color: var(--hold-ink); border-bottom-color: var(--hold-quiet); }

/* ── The newsletter flow ────────────────────────────────────────────────────
   Same palette, different layout: these pages carry a form and scroll, so they
   are a column at the top of the page rather than one centred screen. */
.hold-shell {
  max-width: 34rem;
  margin: 0 auto;
  padding: 4rem 1.5rem 6rem;
  text-align: left;
}
.hold-shell .ta-logo { margin-bottom: 3rem; }

.hold-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hold-quiet);
  margin-bottom: 0.75rem;
}
.hold-shell h1 {
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 500;
  margin: 0 0 0.75rem;
}
.hold-lead {
  color: var(--hold-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 2rem;
}
.hold-foot {
  margin-top: 2rem;
  font-size: 0.8rem;
  color: var(--hold-muted-2);
}
.hold-foot a { color: var(--hold-ink); border-bottom: 1px solid var(--hold-line); text-decoration: none; }
.hold-foot a:hover { border-bottom-color: var(--hold-quiet); }

.hold-meta {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--hold-quiet);
}

.hold-form { display: flex; flex-direction: column; gap: 1.25rem; }
.hold-form label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hold-quiet);
  margin-bottom: 0.4rem;
}
.hold-form input[type="email"],
.hold-form input[type="text"],
.hold-form select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.8rem;
  background: #1f1c19;
  border: 1px solid var(--hold-line);
  border-radius: 2px;
  color: var(--hold-ink);
  font: inherit;
  font-size: 0.95rem;
}
.hold-form input:focus, .hold-form select:focus {
  outline: 0;
  border-color: var(--hold-quiet);
}
.hold-form input::placeholder { color: #6b635b; }

.hold-check {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.85rem; line-height: 1.5; color: var(--hold-muted);
}
.hold-check a { color: var(--hold-ink); }

.hold-btn {
  align-self: flex-start;
  padding: 0.75rem 1.4rem;
  background: var(--hold-ink);
  color: var(--hold-bg);
  border: 0;
  border-radius: 2px;
  font-family: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.hold-btn:hover { background: #ffffff; }
.hold-btn.danger { background: #7d2424; color: var(--hold-ink); }
.hold-btn.danger:hover { background: #8f2a2a; }

.hold-error {
  padding: 0.7rem 0.9rem;
  margin-bottom: 1.5rem;
  border: 1px solid #7d2424;
  background: #2a1717;
  color: #f0d5d5;
  font-size: 0.85rem;
  border-radius: 2px;
}

/* Tom Select ships a light skin (the account area is a light surface). The
   country and language pickers are the only enhanced controls in this flow, so
   they are repainted here rather than given a second stylesheet.
 *
 * 620-637. NOT SCOPED UNDER `.hold-shell`, and that is the whole fix. The
 * enhancer opens every picker with `dropdownParent: "body"` so the panel
 * escapes any clipping ancestor - which also means the panel is a SIBLING of
 * .hold-shell, never a descendant. A `.hold-shell .ts-dropdown` rule therefore
 * matched nothing: the control went dark, the panel stayed on Tom Select's
 * white, and the light body ink rendered the typed search text invisible on it.
 * These rules are unscoped because this stylesheet is loaded by the pre-launch
 * surfaces ONLY, so the file itself is the scope. */
/* THE BACKGROUND IS DECLARED ON THE VENDOR'S OWN THREE SELECTORS, deliberately.
   Tom Select paints white from `.ts-control`, from `.full .ts-control` and
   again from `.ts-wrapper.single.input-active .ts-control` - that last one only
   while the picker is OPEN, which is exactly when the panel is on screen and
   the mismatch shows. Mirroring the three means each wins on load order rather
   than on a specificity count that a `.hold-shell` prefix used to supply by
   accident. Measured open on the served page after: rgb(31,28,25). */
.ts-control,
.full .ts-control,
.ts-wrapper.single.input-active .ts-control { background: #1f1c19; }

.ts-wrapper .ts-control {
  border: 1px solid var(--hold-line);
  border-radius: 2px;
  color: var(--hold-ink);
  padding: 0.7rem 0.8rem;
}
.ts-wrapper.focus .ts-control { border-color: var(--hold-quiet); box-shadow: none; }
.ts-control input, .ts-control input::placeholder { color: var(--hold-ink); }

.ts-dropdown {
  background: #1f1c19;
  border: 1px solid var(--hold-line);
  border-radius: 2px;
  color: var(--hold-ink);
}
/* Tom Select paints the search field, the options and the "no results" note
   with its own light values; each is named here so none of them is left on a
   white default the page never shows. */
.ts-dropdown .ts-dropdown-content { background: #1f1c19; }
.ts-dropdown .option, .ts-dropdown .no-results, .ts-dropdown .optgroup-header {
  background: #1f1c19;
  color: var(--hold-ink);
}
.ts-dropdown .optgroup-header { color: var(--hold-quiet); }
.ts-dropdown .option.active,
.ts-dropdown .option:hover { background: #2c2723; color: var(--hold-ink); }
.ts-dropdown .option.selected { background: #342e28; color: var(--hold-ink); }
.ts-dropdown .dropdown-input {
  background: #1f1c19;
  border-color: var(--hold-line);
  color: var(--hold-ink);
}

@media (prefers-reduced-motion: reduce) { .ta-line { transition: none; } }