/* styles/sections/record-hero.css
 * The record hero (fwpzT, qwfUo, JXrAy): the split intro, then a side caption beside the decision
 * record plate (uucjF). The plate is transcribed Brief UI on sample data: a fern title bar, the
 * record body, the dark agent log, and the footnotes under the window. The record switches from
 * its stacked 390 layout (aM410) to the 1440 layout on its own width, so the narrow D plates
 * between 900 and about 1200 stay stacked. */
@layer sections {
  .ai-hero {
    padding-block: var(--space-56);
  }

  .ai-hero__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
  }

  /* Split intro (Recipe section-intro-split): 44/42 on M, 88/84 on D, 120/114 on W */
  .ai-hero__intro {
    --intro-gap: var(--space-40);
    --intro-heading-size: var(--t-display-md-size);
    --intro-heading-lh: 42px;
    --intro-heading-ls: var(--t-display-md-ls);
    --intro-lede-pad: 0px;
    --intro-lede-measure: 420px;
  }

  .ai-hero__aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
  }

  .ai-hero__deck {
    margin: 0;
    font-size: 17px;
    line-height: 26px;
    color: var(--ink-deck);
  }

  .ai-hero__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-20);
  }

  .ai-hero__figure {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    margin: 0;
  }

  @media (width >= 900px) {
    .ai-hero {
      padding-block: var(--space-80) var(--space-96);
    }

    .ai-hero__inner {
      gap: var(--space-56);
    }

    .ai-hero__intro {
      --intro-heading-size: var(--t-display-lg-size);
      --intro-heading-lh: 84px;
      --intro-heading-ls: var(--t-display-lg-ls);
      --intro-heading-measure: 760px;
      --intro-lede-pad: var(--space-6);
      flex-wrap: wrap;
      align-items: flex-end;
      column-gap: var(--space-64);
    }

    .ai-hero__intro .section-intro__head {
      flex: 0 1 760px;
    }

    .ai-hero__deck {
      font-size: 19px;
      line-height: 29px;
    }

    .ai-hero__actions {
      flex-direction: row;
      align-items: center;
    }

    .ai-hero__figure {
      flex-direction: row;
      align-items: flex-start;
    }
  }

  @media (width >= 1680px) {
    .ai-hero {
      padding-block: var(--space-96) 115px;
    }

    .ai-hero__intro {
      --intro-heading-lh: 114px;
      --intro-heading-measure: 1026px;
    }

    .ai-hero__intro .section-intro__head {
      flex-basis: 1026px;
    }
  }

  /* ---------- The plate: window and footnotes ---------- */
  .record {
    container: record / inline-size;
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
  }

  .record__bar {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    height: 46px;
    padding-inline: var(--space-20);
    background: var(--fern);
  }

  .record__mark {
    --brief-avatar-size: 22px;
    --brief-avatar-mark: 24px;
  }

  .record__crumbs {
    font-size: 14px;
    line-height: 17px;
    white-space: pre;
    color: var(--white-80);
  }

  .record__body {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 28px var(--space-20);
  }

  .record__top {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    margin: 0;
  }

  .record__id {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    color: var(--ink-muted);
  }

  .record__status {
    padding: 3px var(--space-10);
    border-radius: 6px;
    background: var(--pending-tint);
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    color: var(--chip-pending-ink);
  }

  .record__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 23px;
    font-weight: 600;
    line-height: 25px;
    letter-spacing: -0.27px;
  }

  .record__why,
  .record__reasons {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin: 0;
    padding: 0;
  }

  .record__key,
  .record__log-label {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 13px;
    letter-spacing: 1px;
  }

  .record__key {
    font-weight: 500;
    color: var(--ink-muted);
  }

  .record__reasons li {
    font-size: 16px;
    line-height: 24px;
  }

  .record__ref {
    margin-left: 3px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    line-height: 13px;
    vertical-align: top;
    color: var(--fern);
  }

  .record__fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
    margin: 0;
    padding-top: 18px;
    box-shadow: inset 0 1px 0 var(--line);
  }

  .record__fields div {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .record__fields dt {
    font-size: 13px;
    line-height: 16px;
    color: var(--ink-muted);
  }

  .record__fields dd {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
  }

  .record__log {
    padding: var(--space-16) var(--space-20) 18px;
    background: var(--agents-bg);
  }

  .record__log-label {
    color: var(--white-50);
  }

  .record__log-lines {
    margin: 0;
    padding: 0;
  }

  .record__log-lines li {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    padding-block: 9px;
    box-shadow: inset 0 -1px 0 var(--white-8);
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 16px;
  }

  .record__agent {
    color: var(--paper);
  }

  .record__did {
    color: var(--white-50);
  }

  .record__now {
    color: var(--mint-ink);
  }

  .record__notes {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    margin: var(--space-20) 0 0;
    padding: var(--space-16) 0 0;
    box-shadow: inset 0 1px 0 var(--ink);
  }

  .record__notes li {
    display: flex;
    align-items: baseline;
    gap: var(--space-10);
  }

  .record__mark-no {
    flex: none;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    color: var(--fern);
  }

  .record__note {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }

  .record__where {
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: var(--ink-muted);
  }

  .record__note-body {
    font-size: 14px;
    line-height: 20px;
    color: var(--ink-deck);
  }

  /* The 1440 record (fP5aO): body 28/32, a 34px title, fields in a row, the log in columns and
     the footnotes in three. */
  @container record (width >= 800px) {
    .record__body {
      padding-inline: var(--space-32);
    }

    .record__title {
      font-size: 34px;
      line-height: 37px;
      letter-spacing: -0.4px;
    }

    .record__reasons li {
      font-size: 18px;
      line-height: 27px;
    }

    .record__fields {
      flex-direction: row;
      gap: var(--space-40);
    }

    .record__log {
      padding-inline: var(--space-32);
    }

    .record__log-lines li {
      flex-direction: row;
    }

    .record__agent {
      flex: none;
      width: 250px;
    }

    .record__did {
      flex: none;
      width: 230px;
    }

    .record__notes {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-32);
    }
  }
}

/* The window: the shared shell (artifacts layer) at the frame's radius 6 with its drop shadow */
@layer artifacts {
  .artifact-window.record__window {
    border-radius: 6px;
    box-shadow: 0 24px 56px var(--line);
  }
}