/* Signed-out entry pages (/login, org login, password reset).
   Continues the v3 landing's founder's-letter world: staffroom-paper ground, Newsreader
   headings, a calm sheet-of-paper card. Built on the product tokens, so dark mode still
   flips. (#673; re-skinned for the v3 seam) */
@layer components {
  /* These pages are a self-contained card; the minimal-layout wordmark bar would just
     duplicate the in-card logo, so drop it here. */
  body:has(.session-layout) .navbar--signin { display: none; }

  .session-layout {
    align-items: center;
    background: var(--color-bg);
    display: flex;
    justify-content: center;
    min-block-size: 100dvh;
    padding: var(--space-12);
  }

  .session-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px -32px var(--shadow-color);
    inline-size: 100%;
    max-inline-size: 25rem;
    padding: 2.5rem;

    h1 {
      color: var(--color-text);
      font-family: var(--font-serif);
      font-size: 1.5rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      margin-block-end: var(--space-10);
      text-align: center;
    }
    .session-submit {
      inline-size: 100%;
      margin-block-start: var(--space-10);
    }
  }
  .session-card-logo {
    color: var(--color-text);
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 600;
    margin-block-end: var(--space-10);
    text-align: center;
  }
  .session-card-header {
    margin-block-end: var(--space-10);
    text-align: center;
  }

  .session-field {
    margin-block-end: 1.1rem;

    label {
      color: var(--color-text-secondary);
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      margin-block-end: var(--space-2);
    }
    input {
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      color: var(--color-text);
      font-family: inherit;
      font-size: 1rem;
      inline-size: 100%;
      min-block-size: 44px;
      padding: 0.7rem 0.85rem;
      transition: border-color 150ms, box-shadow 150ms;

      &::placeholder { color: var(--color-text-muted); }
      &:focus {
        border-color: var(--color-focus);
        box-shadow: 0 0 0 3px oklch(var(--oklch-border-focus) / 0.28);
        outline: none;
      }
    }
  }

  .session-links {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin-block-start: 1.1rem;
    text-align: center;

    a {
      color: var(--color-primary);
      text-underline-offset: 0.15em;

      &:hover { color: var(--color-primary-hover); }
    }
  }
  .session-links-divider {
    color: var(--color-text-muted);
    margin: 0 var(--space-1);
  }

  /* Status messages. Variants only set the --session-message-* properties. */
  .session-alert,
  .session-notice {
    background: var(--session-message-background);
    border: 1px solid var(--session-message-border-color);
    border-radius: var(--radius-sm);
    color: var(--session-message-color);
    font-size: 0.875rem;
    margin-block-end: 1.1rem;
    padding: 0.7rem 0.85rem;
  }
  .session-alert {
    --session-message-background: var(--color-danger-surface);
    --session-message-border-color: oklch(var(--oklch-danger) / 0.4);
    --session-message-color: var(--color-danger-text);
  }
  .session-notice {
    --session-message-background: var(--color-success-surface);
    --session-message-border-color: oklch(var(--oklch-success) / 0.4);
    --session-message-color: var(--color-success-text);
  }

  .session-org-logo {
    align-items: center;
    background: var(--color-surface-sunken);
    border-radius: var(--radius-md);
    display: flex;
    justify-content: center;
    margin-block-end: var(--space-8);
    min-block-size: 60px;
    padding: var(--space-6);
  }
  .session-org-logo-img {
    max-block-size: 60px;
    max-inline-size: 100%;
    object-fit: contain;
  }
  .session-org-instructions {
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-block-end: var(--space-10);
    padding: var(--space-8);
  }
  .org-instructions-content {
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;

    p {
      margin: 0 0 var(--space-6);

      &:last-child { margin-block-end: 0; }
    }
  }

  .session-student-info {
    border-block-start: 1px solid var(--color-border);
    margin-block-start: var(--space-10);
    padding-block-start: var(--space-8);
  }
  .session-info-title {
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 var(--space-2);
  }
  .session-info-text {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
    margin: 0;
  }

  /* /login only: the v4 landing family (Schibsted Grotesk, Literata, paper and green, light only).
     Re-points the shared tokens inside this scope so the card, fields and button follow. (#1557) */
  .session-layout--signin {
    --color-bg: #f6f7f5;
    --color-surface: #fff;
    --color-border: #d3dbd7;
    --color-text: #1c2422;
    --color-text-secondary: #5a6662;
    --color-text-muted: #5a6662;
    --color-primary: #2f6b58;
    --color-primary-hover: #25584a;
    --color-text-on-primary: #f6f7f5;
    --color-focus: #2f6b58;
    --shadow-color: rgb(28 36 34 / 0.25);
    color: var(--color-text);
    color-scheme: light;
    font-family: "Literata", Georgia, serif;
    gap: clamp(2rem, 6vw, 5rem);

    h1, .session-field label, .session-submit, .session-brand {
      font-family: "Schibsted Grotesk", "Helvetica Neue", system-ui, sans-serif;
    }
    h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; text-align: start; }
    .session-card { border-radius: 8px; }
    .session-submit { border-radius: 5px; font-weight: 700; }
    a:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
  }
  body:has(.session-layout--signin) { background: #f6f7f5; }
  .session-brand {
    color: #1c2422;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-decoration: none;
  }
  .session-brand--card { display: none; margin-block-end: var(--space-8); }
  .session-brand-panel {
    border-inline-start: 3px solid #2f6b58;
    flex: 0 1 26rem;
    min-inline-size: 0;
    padding-inline-start: var(--space-10);
  }
  .session-tagline {
    font: 800 clamp(1.9rem, 3.6vw, 2.8rem)/1.05 "Schibsted Grotesk", "Helvetica Neue", system-ui, sans-serif;
    letter-spacing: -0.03em;
    margin: var(--space-8) 0 var(--space-6);
    text-wrap: balance;
  }
  .session-tagline-note { color: #5a6662; font-size: 1.05rem; line-height: 1.6; margin: 0; }
  .session-layout--signin .session-card { flex: 0 1 25rem; }

  /* Narrow: drop the panel and show the wordmark in the card. */
  @media (max-width: 860px) {
    .session-layout--signin { padding: var(--space-6); }
    .session-layout--signin .session-brand-panel { display: none; }
    .session-layout--signin .session-brand--card { display: block; }
  }
}