/* Plan document rendering.

   Loaded by BOTH the coach layout and the client-facing auth layout, because a
   plan document renders in two places that share nothing else: the coach's
   preview modal, and the client's own plan page at /plans/:token. The Markdown
   block below lived in coach.css and was already written generically for reuse;
   it moved here so the client pages, which never load coach.css, can have it.

   Coach-only modal chrome (.st-plan-preview) stays in coach.css. */
@layer components {
  /* =========================================================================
     Rendered Markdown (MarkdownRenderer output) -- used by the plan-document
     preview. Body type for prose; tokenized headings, GFM tables with real
     borders, and code blocks. Kept generic (.st-markdown) so any future
     rendered-Markdown surface can reuse it.
     ========================================================================= */
  .st-markdown {
    font-family: var(--font-body);
    line-height: var(--type-body-lh);
    color: var(--color-on-surface);
  }

  .st-markdown > :first-child {
    margin-top: 0;
  }

  .st-markdown > :last-child {
    margin-bottom: 0;
  }

  .st-markdown h1,
  .st-markdown h2,
  .st-markdown h3,
  .st-markdown h4,
  .st-markdown h5,
  .st-markdown h6 {
    font-family: var(--font-body);
    font-weight: 700;
    line-height: var(--type-label-lh);
    margin: var(--space-24) 0 var(--space-8);
  }

  .st-markdown h1 { font-size: var(--type-md-h1-size); }
  .st-markdown h2 { font-size: var(--type-md-h2-size); }
  .st-markdown h3,
  .st-markdown h4,
  .st-markdown h5,
  .st-markdown h6 { font-size: var(--type-body-size); }

  .st-markdown p {
    margin: 0 0 var(--space-12);
  }

  .st-markdown ul,
  .st-markdown ol {
    margin: 0 0 var(--space-12);
    padding-left: var(--space-24);
  }

  .st-markdown li {
    margin-bottom: var(--space-4);
  }

  .st-markdown a {
    color: var(--bs-link-color);
    text-underline-offset: var(--space-2);
  }

  .st-markdown blockquote {
    margin: 0 0 var(--space-12);
    padding: var(--space-4) var(--space-16);
    border-left: 3px solid var(--color-primary);
    color: var(--color-muted);
  }

  .st-markdown code {
    font-family: var(--font-mono);
    font-size: var(--type-small-size);
  }

  .st-markdown pre {
    margin: 0 0 var(--space-12);
    padding: var(--space-12);
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    overflow-x: auto;
  }

  .st-markdown pre code {
    white-space: pre;
  }

  /* GFM tables: real borders (from tokens) so the plan grid reads as a table.
     The panel already scrolls; let a wide table scroll within it too. */
  .st-markdown table {
    width: 100%;
    margin: 0 0 var(--space-12);
    border-collapse: collapse;
  }

  .st-markdown th,
  .st-markdown td {
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
  }

  .st-markdown thead th {
    background-color: var(--color-surface);
    font-weight: 700;
  }

  /* =========================================================================
     The client's own plan page (/plans/:token and /my_program), shared/_plan_body
     and shared/_plan_blocks. Reading, not filing: the document body renders in
     the page and the download stays as a secondary action.
     ========================================================================= */

  /* The auth shell centers a sign-in panel in the viewport at form width. A plan
     is a document: it wants a reading width, and it wants to start at the top,
     because a plan longer than the viewport centered vertically hides its own
     opening line. */
  .st-auth__panel.st-auth__panel--wide {
    max-width: var(--size-doc-panel-max-w);
  }

  .st-auth__viewport:has(.st-auth__panel--wide) {
    align-items: flex-start;
  }

  .st-plan-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-12);
  }

  .st-plan-head__meta {
    color: var(--color-muted);
    font-size: var(--type-small-size);
  }

  /* The rendered body scrolls inside itself so a long plan never turns the page
     into an endless scroll with the actions stranded at the bottom. */
  .st-plan-body__text {
    max-height: var(--size-plan-body-max-h);
    overflow: auto;
    margin: 0;
    padding: var(--space-16);
    background-color: var(--color-surface-warm-tint);
    border-radius: var(--radius-md);
    overflow-wrap: anywhere;
  }

  /* Fallback when MarkdownRenderer returned nil: verbatim monospace dump. */
  .st-plan-body__text--raw {
    font-family: var(--font-mono);
    font-size: var(--type-small-size);
    white-space: pre-wrap;
  }

  /* The browser's own PDF viewer. Given a fixed height rather than an aspect
     ratio because page proportions vary and the viewer supplies its own paging. */
  .st-plan-body__pdf {
    display: block;
    width: 100%;
    height: var(--size-plan-pdf-h);
    border: 0;
    border-radius: var(--radius-md);
    background-color: var(--color-surface-warm-tint);
  }

  .st-plan-body__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-top: var(--space-16);
  }

  /* Cross-links to the other blocks of the plan. Each block is its own page. */
  .st-plan-nav__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--type-body-size);
    margin-top: var(--space-32);
    margin-bottom: var(--space-12);
  }

  .st-plan-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
  }

  .st-plan-nav__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .st-plan-nav__label,
  .st-plan-nav__dates {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--type-small-size);
  }

  .st-plan-nav__name {
    margin: 0;
    overflow-wrap: anywhere;
  }

  .st-plan-nav__here {
    color: var(--color-muted);
    font-size: var(--type-small-size);
  }
}