/* Public landing, authentication and system pages.
 *
 * WHY THIS FILE EXISTS. The family's templates (planner/landing, planner/login,
 * planner/register, home, error, coming_soon, search_results, job) had no
 * stylesheet of their own: they leaned on app.css, which is shared with a dozen
 * other surfaces and is owned elsewhere. Everything below either
 *
 *   a) styles a class this family alone renders (the `lwp-` prefix), or
 *   b) corrects an off-token rule those templates inherit, scoped to a wrapper
 *      class so no other surface moves.
 *
 * Linked from {% block head_extra %} in this family's templates only — NOT from
 * base.html, and it loads after app.css so the scoped corrections win at equal
 * specificity.
 *
 * RULES THIS FILE HOLDS ITSELF TO
 *   - Every colour is a --ds-* token or a design-system.css alias of one. No new
 *     hardcoded colours.
 *   - Logical properties only: padding-inline, margin-block, inset-inline-start,
 *     border-inline-start, text-align: start.
 *   - Font weights are 400 / 500 / 600 / 700 (the --weight-* tokens) and nothing
 *     else; no shipped face has an 800 master.
 *   - Breakpoints are the product's two tiers, 1024 (tablet) and 560 (phone).
 *   - Motion is opt-in inside prefers-reduced-motion: no-preference.
 *   - BLUE is the operational action, GOLD is a selected state. Nothing here
 *     fills a button with gold.
 */

/* ==========================================================================
   1. Auth — sign in and create account
   --------------------------------------------------------------------------
   One panel, and beside it the reassurance. Calm page: default --content-wide,
   never shell-wide.
   ========================================================================== */

/* The tracks are CAPPED, not fractional, and the pair is centred. A 1fr/0.8fr
   split on a 1400px screen gave the 520px panel a 738px track and left 200px of
   dead space between the panel and the reassurance beside it — an auth screen is
   a calm surface, so it stays one readable pair in the middle of the page rather
   than stretching to fill the shell. */
.lwp-auth {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 480px);
  justify-content: center;
  gap: var(--space-7);
  align-items: start;
  min-width: 0;
}

.lwp-auth-col {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  min-width: 0;
  width: 100%;
}

.lwp-auth-head {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.lwp-auth-head h1 {
  font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
}

.lwp-auth-head p {
  margin: 0;
}

/* .panel carries a trailing margin for stacked page bands; inside a grid the
   gap already does that job. */
.lwp-auth-panel {
  margin-block-end: 0;
  padding: var(--space-6);
}

.lwp-auth-form {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

/* A failure states what happened first, then lists the reasons. The list is
   indented from the LOGICAL start so the bullets sit on the correct edge in
   Arabic. */
.lwp-alert-title {
  display: block;
  margin-block-end: var(--space-1);
  font-weight: var(--weight-semibold);
}

.lwp-error-list {
  display: grid;
  gap: var(--tac-1);
  margin-block: var(--tac-2) 0;
  margin-inline: 0;
  padding-inline-start: var(--space-4);
}

/* The primary action is BLUE and full width — one action, unmissable, and a
   44px thumb target on every tier rather than only on phones. */
.lwp-auth-submit {
  width: 100%;
  min-height: var(--control-touch);
}

.lwp-auth-switch {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.lwp-auth-note {
  margin: 0;
  max-width: var(--content-readable);
  color: var(--text-faint);
  font-size: var(--text-xs);
  line-height: var(--leading-prose);
}

.lwp-auth-aside {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  min-width: 0;
}

.lwp-auth-aside h2 {
  font-size: var(--text-lg);
}

.lwp-auth-aside p {
  margin: 0;
}

.lwp-points {
  display: grid;
  gap: var(--tac-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lwp-points li {
  min-width: 0;
  padding-block: var(--tac-4);
  padding-inline: var(--tac-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--stat-surface);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.lwp-points li b {
  display: block;
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

/* ==========================================================================
   2. Public landing — hero, capability groups, fan-made identity band
   --------------------------------------------------------------------------
   2026-07-29 stabilization: the landing is a focused fan-made page — a hero
   with one primary and one secondary action, three capability groups, and the
   disclaimer band. No product grid and no status pills; those belonged to the
   rejected catalog composition.
   ========================================================================== */

.lwp-hero {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  max-width: 880px;
  margin-inline: auto;
  padding-block: clamp(var(--space-6), 7vh, 72px) var(--space-6);
  text-align: start;
}

.lwp-hero-kicker {
  margin: 0;
  padding-inline-start: var(--tac-6);
  border-inline-start: 2px solid var(--accent-selected);
}

.lwp-hero-title {
  margin: 0;
  color: var(--text-headline);
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl));
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-page-title);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

/* Tracking is a Latin affordance: positive letter-spacing breaks connected
   Arabic script, and this heading carries no lw-* utility for the token
   layer's reset to catch. */
[dir="rtl"] .lwp-hero-title {
  letter-spacing: 0;
}

.lwp-hero-body {
  max-width: 62ch;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  text-wrap: pretty;
}

.lwp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tac-4);
  margin-block-start: var(--tac-3);
}

.lwp-caps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  max-width: 1080px;
  margin-inline: auto;
  margin-block-end: var(--space-6);
}

.lwp-cap {
  display: grid;
  align-content: start;
  gap: var(--tac-4);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--card-surface);
}

.lwp-cap-title {
  margin: 0;
  color: var(--text-headline);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
}

.lwp-cap-body {
  max-width: var(--content-readable);
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* The landing sections share one measure so the page reads as one column. */
.lwp-hero + .lwp-caps + .lwp-identity {
  max-width: 1080px;
  margin-inline: auto;
}

.lwp-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-block-end: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-inline-start: 3px solid var(--action);
  border-radius: var(--radius-md);
  background: var(--stat-surface);
  padding-block: var(--tac-5);
  padding-inline: var(--space-4);
}

.lwp-identity-copy {
  flex: 1 1 320px;
  min-width: 0;
  display: grid;
  gap: var(--tac-2);
}

.lwp-identity-title {
  margin: 0;
  color: var(--text-headline);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
}

.lwp-identity-copy p {
  max-width: var(--content-readable);
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.lwp-identity-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tac-4);
}

/* ==========================================================================
   3. System pages — error, coming soon, job
   --------------------------------------------------------------------------
   Each states the consequence and then the way forward, inline. None of them
   dead-ends, and none of them prints a technical detail a reader cannot act on.
   ========================================================================== */

.lwp-sys {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.lwp-sys h1 {
  font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
}

.lwp-sys p {
  margin: 0;
}

.lwp-sys-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tac-4);
  margin-block-start: var(--space-2);
}

/* The support reference. It is an opaque identifier, so it is mono, isolated
   and quiet — never the loudest thing on a failure page. */
.lwp-sys-ref {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--tac-3);
  margin: 0;
  padding-block: var(--tac-4);
  padding-inline: var(--tac-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--input-surface);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* SINGLE-CLASS on purpose. tokens/base.css zeroes tracking with
   `[dir="rtl"] .lw-label`, specificity (0,2,0); this rule is (0,1,0), so the
   Arabic reset still wins even though this file loads later. Writing
   `.lwp-sys-ref .lw-label { letter-spacing: … }` would tie at (0,2,0), win on
   order, and break Arabic silently. The markup carries BOTH classes:
   `class="lw-label lwp-ref-label"`. */
.lwp-ref-label {
  color: var(--text-faint);
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-title);
  line-height: var(--leading-flat);
  text-transform: uppercase;
}

.lwp-sys-ref code {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* --- Job progress -------------------------------------------------------- */

/* The "this page refreshes itself" line. Quiet: it is reassurance, not status —
   the status is the pill and the figures above it. */
.lwp-job-note {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-dense);
}

/* ==========================================================================
   4. Legacy tools hub — token corrections, scoped to this page
   --------------------------------------------------------------------------
   app/static/css/app.css still paints this hub from the pre-token palette: a
   blue that is not --ds-blue, a fabricated 820 weight, and physical left/right
   offsets that mirror the wrong way in Arabic. Those rules are shared with other
   surfaces and are owned elsewhere, so every correction below is scoped to
   `.lwp-hub` and moves this page alone.
   ========================================================================== */

.lwp-hub {
  display: grid;
  gap: var(--space-5);
}

/* Gold-to-blue diagonal over the panel surface — the approved hero wash. The
   shipped rule used rgba(99,179,255,...) and rgba(165,180,252,...), neither of
   which is in the palette. */
.lwp-hub .product-hero {
  gap: var(--space-6);
  border-color: var(--border-subtle);
  border-radius: var(--ds-radius-card);
  background:
    linear-gradient(
      135deg,
      var(--ds-gold-soft),
      color-mix(in srgb, var(--ds-blue) 4%, transparent) 42%,
      color-mix(in srgb, var(--ds-bright) 1.2%, transparent)
    ),
    var(--section-surface);
  box-shadow: var(--shadow-panel);
}

/* The hero H1 is body font at the approved fluid step. 52px was above the
   scale's ceiling. */
.lwp-hub .product-hero h1 {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  letter-spacing: -0.01em;
}

.lwp-hub .product-hero p {
  font-size: var(--text-md);
}

.lwp-hub .product-hero-actions {
  gap: var(--tac-4);
}

/* auto-FIT, not auto-fill: with three cards in a 1400px shell auto-fill leaves a
   fourth, empty 327px track sitting there as dead space. auto-fit collapses the
   empty track and lets the three cards share the row. Neither needs a media
   query. */
.lwp-hub .available-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--tac-5);
}

.lwp-hub .product-card {
  border-color: var(--border-subtle);
  border-radius: var(--ds-radius-card);
  background: var(--card-surface);
}

/* Available is an operational state, so its accent is the action blue; the
   3px edge sits on the logical start so it follows the reading direction. */
.lwp-hub .product-card.is-available {
  border-color: var(--ds-blue-line);
  border-inline-start: 3px solid var(--action);
  background: var(--ds-blue-soft);
}

/* Coming next is a warning-register state, not a selected one: amber, so
   "warning" and "selected" never share a hue. */
.lwp-hub .coming-next-card {
  border-color: var(--ds-amber-line);
  border-inline-start: 3px solid var(--warning);
  background: var(--ds-amber-soft);
}

.lwp-hub .product-card h3 {
  font-size: var(--text-lg);
}

/* 820 has no master in any shipped face — the browser fabricates the stem. */
.lwp-hub .product-icon {
  border-color: var(--ds-blue-line);
  background: var(--ds-blue-soft);
  color: var(--action-text);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.lwp-hub .hub-highlight-list li {
  border-color: var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--input-surface);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: var(--leading-dense);
}

.lwp-hub .planned-row {
  border-color: var(--border-subtle);
  border-radius: var(--ds-radius-card);
  background: var(--card-surface);
}

.lwp-hub .planned-row h3 {
  font-size: var(--text-md);
}

.lwp-hub .preview-map {
  border-color: var(--border-subtle);
  border-radius: var(--ds-radius-card);
  background: var(--input-surface);
}

.lwp-hub .preview-map span {
  border: 1px solid var(--ds-blue-line);
  background: var(--ds-blue-soft);
}

/* Decorative marks. The shipped rules used physical left/right, which pins them
   to the wrong edge under [dir="rtl"]. */
.lwp-hub .preview-map i {
  background: var(--warning);
}

.lwp-hub .preview-map i:nth-of-type(1) {
  inset-block-start: 23px;
  inset-inline-start: 24px;
  inset-inline-end: auto;
}

.lwp-hub .preview-map i:nth-of-type(2) {
  inset-block-start: 58px;
  inset-inline-end: 29px;
  inset-inline-start: auto;
}

.lwp-hub .preview-map i:nth-of-type(3) {
  inset-block-end: 21px;
  inset-inline-start: 62px;
  inset-inline-end: auto;
}

/* ==========================================================================
   5. Search results — the legacy candidate picker
   ========================================================================== */

.lwp-search-form {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.lwp-search-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.lwp-search-depth {
  max-width: 220px;
}

/* ==========================================================================
   6. Responsive — the product's two tiers
   ========================================================================== */

@media (max-width: 1024px) {
  /* One column, panel first and reassurance second — that is why the aside is
     last in DOM order. */
  .lwp-auth {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .lwp-auth-col,
  .lwp-auth-aside {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
  }
}

@media (max-width: 560px) {
  .lwp-auth-panel {
    padding: var(--space-4);
  }

  .lwp-hero {
    padding-block: var(--space-5) var(--space-4);
  }

  .lwp-hero-actions {
    inline-size: 100%;
  }

  .lwp-hero-actions > * {
    flex: 1 1 100%;
    min-height: var(--control-touch);
  }

  .lwp-identity {
    padding-inline: var(--tac-5);
  }

  .lwp-identity-actions > * {
    flex: 1 1 100%;
  }

  .lwp-sys-actions > * {
    flex: 1 1 100%;
    min-height: var(--control-touch);
  }

  .lwp-search-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .lwp-search-depth {
    max-width: none;
  }

  .lwp-hub .available-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}