/* ============================================================
   home-app.css — the Tenonfold Home app page at /home.

   Page-specific only. Colour, type and elevation come from
   tenonfold-tokens.css (brand v1.2, 2026-10-04).

   THE OCHRE ACCENT IS GONE. It was added 2026-10-04 to work around
   two v1.1 constraints: Clay failed AA as body text at 4.12:1, and
   "one Clay per composition" meant two warm accents competed. v1.2
   removed both — Clay clears AA at 4.70 on White, and the rationing
   rule is withdrawn — so the workaround has nothing left to work
   around. Clay is the single accent again.

   Clay as type requires a WHITE ground. 4.70 passes; the same
   colour on Paper is 4.31 and does not. The two grounds look
   nearly identical, so check the ground, not the colour.
   Guidelines §9 / production spec §3.
   ============================================================ */

/* ============================================================
   GROUNDS
   Paper -> Sunk -> Paper -> Sunk -> Forest -> Paper.
   This rhythm carries the depth; the accent hue barely does any of
   it. Guidelines §15 Visual Rhythm asks for exactly this:
   "occasional solid fields", "full-bleed moments".

   Sunk sits only 1.07:1 from Paper, which is deliberate. Over a
   full-bleed band that reads as a change of ground, and it makes
   the WHITE cards on top of it separate harder than they do on
   Paper. The band is a stage for the cards, not a stripe.
   ============================================================ */

.app-wash   { background: var(--tf-sunk); }

.app-forest { background: var(--tf-forest); }
/* §9: a Forest ground takes White, Paper or Stone type. Never Ink. */
.app-forest h2 { color: var(--tf-white); }
.app-forest p  { color: var(--tf-stone); }

/* ---------- hero ---------- */

.app-herogrid { position: relative; overflow: hidden; }

/* The drafting grid, the same device the homepage hero uses
   (site/index.html, .p-grid). Drawn as inline SVG rather than a CSS
   gradient, per the standing caution in the template system. */
.app-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* No max-width on this element: `.wrap` sets the page measure and centres it,
   and narrowing the same element re-centres the hero inside that, knocking its
   left edge out of line with every `.wrap` below. Constrain children instead. */
.app-hero {
  position: relative;
  z-index: 1;
  padding-block: 4.5rem 3.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.25rem;
  align-items: center;
}

.app-hero .title { margin-top: 0.5rem; max-width: 16ch; }
.app-hero .deck  { max-width: 34rem; }

.app-sub {
  margin-top: 1rem;
  font-family: var(--tf-serif);
  font-style: italic;
  font-size: var(--tf-size-h2);
  color: var(--tf-clay);
}

/* ---------- the zigzag ---------- */
/* The figure leads on desktop and the sides alternate. At one column the
   alternation must STOP, or half the sections read figure-then-text and half
   the reverse. `order` is reset below, not just the columns. */

.zig {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.25rem;
  align-items: center;
  padding-block: 3.5rem;
}

.zig--flip .zig__fig  { order: 2; }
.zig--flip .zig__text { order: 1; }

.zig__text h2 { margin-top: 0; }

/* ---------- the drawings ---------- */
/* `.dgm` itself is styled in fold.css, which this page links. Only the things
   fold.css has no opinion about live here: how a drawing sits inside a
   `.section`, and the one SVG class plandraw.py does not ship. */

.dgm {
  margin-block: 2.25rem 0;
  padding-block: 0.5rem;
}

/* plandraw's CSS defines d-solid, d-line, d-thin, d-ghost, d-fill and the
   dimension classes. Overdue is the one state that needs a filled accent, and
   adding it to the shared module would push a page-specific need into four
   other drawings. Page CSS reaches inline SVG, so it belongs here. */
.dgm .d-clay { fill: var(--tf-clay); }

/* No accent override here any more. plandraw.py already emits Clay for
   d-ghost and d-fill, and Clay is unchanged in v1.2, so the drawings are
   correct straight out of the module. */

/* ---------- the app's own room vignettes ---------- */
/* Geometry and stroke weights are lifted unchanged from the app's
   packages/ui/src/components/Placeholder.tsx so the drawings on the page and
   the drawings in the product are the same drawings. */

.rooms {
  list-style: none;
  margin: 2.25rem 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

.rooms__card {
  border: 1px solid var(--tf-rule);
  background: var(--tf-white);
  border-radius: 10px;
  box-shadow: var(--tf-shadow-1);
  padding: 0.875rem 0.875rem 0.75rem;
}

.rooms__art { display: block; width: 100%; height: auto; }

.v-l {
  fill: none;
  stroke: var(--tf-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.v-f {
  fill: var(--tf-stone);
  fill-opacity: 0.45;
  stroke: var(--tf-ink);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.rooms__name {
  margin: 0.625rem 0 0;
  font-size: var(--tf-size-small);
  font-weight: 500;
}

/* ---------- small editorial pieces ---------- */

.app-aside {
  font-size: var(--tf-size-small);
  color: var(--tf-quiet);
}

/* The honesty mark on the V3 section. A rule, never type. */
.app-flag {
  border-left: 2px solid var(--tf-clay);
  padding-left: 0.875rem;
  margin-top: 1.25rem;
}

.app-quote {
  border-left: 1px solid var(--tf-rule);
  padding-left: 1rem;
  color: var(--tf-quiet);
}

/* ---------- the signup ---------- */

.signup {
  border: 1px solid var(--tf-rule);
  background: var(--tf-white);
  padding: 1.75rem;
  margin: 2.5rem 0 1rem;
  border-radius: 10px;
  box-shadow: var(--tf-shadow-1);
}

.signup__label {
  display: block;
  margin-bottom: 0.875rem;
}

.signup__row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.signup__input {
  flex: 1 1 18rem;
  min-width: 0;
  font-family: var(--tf-sans);
  font-size: var(--tf-size-body);
  line-height: var(--tf-lh-body);
  color: var(--tf-ink);
  background: var(--tf-paper);
  border: 1px solid var(--tf-rule);
  border-radius: 2px;
  padding: 0.75rem 0.875rem;
}

.signup__input::placeholder { color: var(--tf-quiet); }

.signup__input:focus-visible {
  outline: 2px solid var(--tf-forest);
  outline-offset: 1px;
  border-color: var(--tf-forest);
}

.signup__btn { flex: 0 0 auto; }

.signup__btn[disabled] {
  opacity: 0.55;
  cursor: default;
}

/* Turnstile renders itself in here. In interaction-only mode it stays empty and
   collapses for most visitors, so the margin belongs to the widget, not the slot. */
.signup__challenge:not(:empty) { margin-top: 0.875rem; }

.signup__note {
  font-size: var(--tf-size-small);
  color: var(--tf-quiet);
  margin: 0.875rem 0 0;
}

.signup__status:empty { display: none; }

/* 14px, i.e. body size. Under v1.1 this was a real §9 violation at 4.12:1.
   The signup sits on White, where Clay is 4.70:1 and clears AA. */
.signup__status {
  font-size: var(--tf-size-small);
  color: var(--tf-clay);
  margin: 0.625rem 0 0;
}

.signup__done {
  margin: 0;
  font-size: var(--tf-size-body);
}

/* ---------- the three store-required links ---------- */

.app-legal {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--tf-rule);
  padding-top: 1.25rem;
  margin-top: 2.5rem;
  color: var(--tf-quiet);
}

/* ---------- narrow ---------- */

@media (max-width: 52rem) {
  .rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 52rem) {
  /* One column. `order` is reset too, so every section reads figure then text
     rather than alternating, which at one column just looks inconsistent. */
  .app-hero, .zig { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .zig--flip .zig__fig  { order: 0; }
  .zig--flip .zig__text { order: 0; }
  .app-hero .title { max-width: none; }
}

@media (max-width: 40rem) {
  .app-hero { padding-block: 2.5rem 1.5rem; }
  .zig { padding-block: 2.25rem; }
  .signup { padding: 1.25rem; }
  .dgm { margin-block: 1.75rem 0; }
  /* The drawings are wide and dimensioned. Below this width they would set
     their type at four or five pixels, so they scroll horizontally inside
     their own figure rather than shrinking into illegibility. */
  .dgm svg {
    width: 640px;
    max-width: none;
  }
  .dgm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dgm figcaption { padding-right: 1rem; }
  /* A figure that scrolls sideways with no affordance just looks cropped, so
     say so. Only at this width, because only at this width is it true. */
  .dgm figcaption::after {
    content: "Scroll the drawing sideways to see all of it.";
    display: block;
    margin-top: 0.375rem;
    font-size: var(--tf-size-micro);
    letter-spacing: var(--tf-track-label);
    text-transform: uppercase;
    color: var(--tf-quiet);
  }
}