/* ─────────────────────────────────────────────────────────────────────────
   SITES — the shared page layouts for a Site (web/app/sites.py): the
   "welcome" start page and the branded sign-in page, plus .lede, a small
   shared component that landed here alongside them.

   .lede was metis_apps/metis/static/crm/css/styleguide.css's page-local
   .sg-lede — a muted intro paragraph, max-width 60ch — until the welcome
   page needed the identical pattern. Two consumers is the "extract a shared
   piece" trigger (CLAUDE.md), so it graduated here rather than staying
   duplicated under two names; the styleguide templates were repointed to it.

   One template (web/app/templates/sites/welcome.html) renders every site
   whose start_page type is "welcome". Its link row lives here rather than as
   inline styles, so the second site to use this page (issue #322) inherits
   the layout instead of copying it.
   ───────────────────────────────────────────────────────────────────────── */

@layer components {
  /* Unchanged from the original .sg-lede so the styleguide pages that already
     used it render identically after the rename. */
  .lede {
    max-width: 60ch;
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-base);
  }

  /* The welcome page's own layout. Its two columns are the product's existing
     .detail-grid; what is here is only what that grid does not answer.

     The stacking rule is scoped to .welcome-grid rather than added to
     .detail-grid itself: no detail page in the product stacks today, and
     changing that is a product-wide visual change, not part of building this
     page. */
  /* Each module is its own block of the page, with a rule between them: the
     first build ran them together as one column of small grey labels, which
     read as one long list rather than four answers to four questions. */
  .welcome-module + .welcome-module {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
  }

  .welcome-module__title {
    margin: 0 0 var(--space-4);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text);
  }

  /* The group heading inside a module (a membership's holon class) stays the
     quiet uppercase label — it is a subdivision, not a section. */
  .welcome-module .membership-group-label {
    margin-top: var(--space-4);
  }

  .welcome-module .membership-group-label:first-of-type {
    margin-top: 0;
  }

  /* The rows a module lists: a title, and whatever labels it beside it. */
  .welcome-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .welcome-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    font-size: var(--text-base);
  }

  .welcome-row__title {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
  }

  .welcome-row__title:hover {
    text-decoration: underline;
  }

  .welcome-row__when {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }

  .welcome-stages {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* Each stage opens the conversations table filtered to it. */
  .welcome-stage {
    text-decoration: none;
  }

  .welcome-stage:hover {
    background: var(--color-surface-2);
    text-decoration: underline;
  }

  .welcome-module__note {
    margin: var(--space-2) 0 0;
    font-size: var(--text-base);
    color: var(--color-text-muted);
  }

  /* The one module that is a band rather than a list: it is there because
     something is about to start. */
  .welcome-next-up {
    padding: var(--space-4);
    border: 1px solid var(--color-accent-ring);
    border-radius: var(--radius-lg);
    background: var(--color-surface-2);
  }

  .welcome-next-up__title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 700;
  }

  .welcome-next-up__meta {
    margin: var(--space-1) 0 var(--space-3);
    font-size: var(--text-base);
    color: var(--color-text-muted);
  }

  @media (max-width: 700px) {
    .welcome-grid {
      grid-template-columns: minmax(0, 1fr);
    }
    /* A sidebar that is no longer beside anything must not stick. */
    .welcome-grid .detail-sidebar {
      position: static;
    }
  }
}

@layer components {
  /* ── The branded sign-in page ──────────────────────────────────────
     web/app/templates/sites/login_branded.html — one template rendering the
     sign-in screen for every site whose Site.login_template names it, so the
     third site inherits this instead of copying it. Gathering keeps its own
     bespoke portal (registration/login.html + common/css/login.css) and is
     untouched by anything here.

     It is a masthead, not a form on a page: the accent wash runs top-to-
     bottom behind the whole viewport, the site's mark and name sit in the
     coloured band, and the card lands on the pale end of the wash. That is
     the Coherence brand's own hero recipe (specs/coherence-style.zip
     style.md §5 — "vertical, full-bleed, hero or masthead only, never a card
     background"), expressed in platform tokens so every site gets its own
     colour out of --color-accent. Coherence swaps in its exact multi-stop
     gradient from its theme; nothing else needs to.

     The form markup is registration/_login_form.html, shared verbatim with
     Gathering. Its classes (.form-row, .login-errors, .forgot-password) are
     styled here only under .site-login, because their other definitions live
     in login.css, which this page deliberately never loads. The button is
     the real .btn component rather than a fork — see the note on
     .btn-portal:hover in web/static/common/css/login.css for why it could
     not carry .btn before. */

  /* No rail is rendered signed-out, so the shell's fixed gutter for it is
     dead space; and the wash has to reach all four edges. */
  body:has(.site-login) { padding-left: 0; }
  .main:has(.site-login) { padding: 0; }

  .site-login {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Top-anchored, not centred: the wash is strongest at the top, so the
       mark and name have to sit *in* the colour for this to read as a
       masthead rather than a form on a tinted page. */
    justify-content: flex-start;
    gap: var(--space-12);
    padding: var(--space-16) var(--space-4) var(--space-12);
    background: linear-gradient(180deg,
      var(--color-accent) 0%,
      color-mix(in oklab, var(--color-accent) 40%, var(--color-surface)) 24%,
      color-mix(in oklab, var(--color-accent) 12%, var(--color-surface)) 46%,
      var(--color-surface) 72%);
  }

  .site-login__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
  }

  /* 44px, and never tinted or recoloured — the mark is artwork, not an icon
     (style.md §7). Fixed rather than fluid so it never lands under 32px. */
  .site-login__mark {
    display: block;
    width: 44px;
    height: 44px;
  }

  /* The site's name as an eyebrow, not a heading: the heading is the verb
     the visitor came to do. Uppercase and widely tracked — never run a
     sentence in this style. */
  .site-login__wordmark {
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--color-text);
  }

  .site-login__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 400;
    color: var(--color-text-strong);
  }

  .site-login__intro {
    max-width: 42ch;
    color: var(--color-text-muted);
    font-size: var(--text-md);
    text-align: center;
  }

  .site-login__card {
    width: 100%;
    max-width: 22rem;
    animation: site-login-enter var(--dur-slow) var(--ease-out) both;
  }

  /* A 12px upward fade, the brand's canonical entrance — no slide from the
     side, no scale, no bounce. The global prefers-reduced-motion rule in
     components/motion.css collapses it to 1ms. */
  @keyframes site-login-enter {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }

  .site-login .form-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
  }

  .site-login .form-row label {
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
  }

  .site-login .form-row input {
    width: 100%;
    padding: var(--space-3);
    font-family: inherit;
    font-size: var(--text-md);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
  }

  .site-login .form-row input::placeholder { color: var(--color-text-faint); }

  /* Solid accent edge plus the soft halo, matching the pattern in
     coherence/css/iris_config_form.css. The ring is never removed. */
  .site-login .form-row input:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-halo);
    outline-offset: 0;
    border-color: var(--focus-ring);
  }

  .site-login .login-errors {
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    font-size: var(--text-md);
    color: var(--color-danger-strong);
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger-border);
    border-radius: var(--radius-md);
  }

  /* The shared partial's button is `.btn .btn-portal`; .btn-portal is inert
     here (login.css is not loaded), so this is the platform button, made
     full width because it is the only action on the card. */
  .site-login .btn {
    width: 100%;
    justify-content: center;
    padding-block: var(--space-3);
  }

  .site-login .forgot-password {
    margin-top: var(--space-4);
    text-align: center;
    font-size: var(--text-sm);
  }

  .site-login .forgot-password a {
    color: var(--color-text-muted);
    text-decoration: none;
  }

  .site-login .forgot-password a:hover {
    color: var(--color-text);
    text-decoration: underline;
  }
}