/* styles/sections/agent-log.css
 * An agent session transcribed from a workflow video, with gutter markers and margin notes.
 * Frames: Coding with Agents "Anatomy" (ZWDMq Aelmk, ITpMT ESl5h, mpVj3 OiuKN).
 *
 * <figure class="agent-log"><div class="agent-log__plate">
 *   <div class="agent-log__terminal"> chapter rows and marked groups, in order </div>
 *   <ol class="agent-log__notes"> one note per marker, style="--row: <terminal row>" </ol>
 * </div></figure>
 *
 * Markers are Pencil exports (assets/figures/coding-with-agents/gutter-*.svg, note-*.svg).
 * Lines sit on the frames' 26px pitch. The figure is a size container: once the terminal reaches
 * its frame width (820) the D and W line breaks show (.agent-log__br-w); below it lines wrap
 * where they fall.
 * The M frame's own breaks (.agent-log__br-m) and indents apply below 900.
 * M, and D figures under 1200: the notes follow the terminal as a list. Wider: the terminal rows
 * are a subgrid of the plate, and each note sits in its marker's row with a leader to the terminal edge; a note takes
 * no height of its own, so it never moves the transcript. */
@layer sections {
  /* The walkthrough holds two bands: this session (.session-anatomy) and its outcome
     (.session-outcome, change-table.css). The frames pad the pair 168 above and below on D
     (100 on M, 202 on W) and 96 between them. */
  .workflow-walkthrough--session {
    padding-block: var(--section-2xl);
  }

  .session-anatomy {
    padding-bottom: var(--section-xs);
  }

  .session-anatomy .section-intro,
  .session-outcome .section-intro {
    --intro-gap: var(--space-24);
    --intro-heading-size: var(--t-h2-size);
    /* Pencil sets each line on a whole pixel: 48 x 1.05 is 50, 64 x 1.05 is 67 */
    --intro-heading-lh: round(nearest, 1.05em, 1px);
    --intro-heading-ls: var(--t-h2-ls);
    --intro-lede-pad: 0px;
    --intro-lede-lh: round(nearest, 1.55em, 1px);
    --intro-lede-color: var(--ink-muted);
  }

  .session-anatomy .section-intro {
    padding-bottom: var(--space-40);
  }

  .session-anatomy .section-intro__lede { max-width: 560px; }

  .workflow-walkthrough :is(.section-intro__heading, .agent-log p) { text-wrap: wrap; }

  /* ---------- Terminal ---------- */
  .agent-log__terminal {
    --log-indent: 22px;
    --log-dot-gap: 8px;
    --log-decision-indent: 22px;
    --log-elbow-gap: 9px;
    --log-mark-x: -25px;
    --log-mark-y: 4px;
    padding: 20px 20px 32px 32px;
    border-radius: 10px;
    background: var(--term-bg);
    color: var(--term-ink);
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 26px;
  }

  .agent-log__terminal b {
    font-weight: 700;
    color: var(--white);
  }

  .agent-log__chapter {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: 20px 0 16px;
    font-size: 13px;
    line-height: 16px;
    letter-spacing: 0.4px;
    white-space: pre;
    color: var(--term-dim);
  }

  .agent-log__chapter::before,
  .agent-log__chapter::after {
    content: "";
    height: 1px;
    background: var(--white-20);
  }

  .agent-log__chapter::before { flex: none; width: 16px; }
  .agent-log__chapter::after { flex: 1; }

  /* The size container is the figure: containment on the terminal would stop it being a subgrid */
  .agent-log { container: agent-log / inline-size; }

  .agent-log__group { position: relative; }

  .agent-log__mark {
    position: absolute;
    top: var(--log-mark-y);
    left: var(--log-mark-x);
    width: 18px;
    height: 18px;
  }

  .agent-log__group--prompt {
    display: flex;
    gap: var(--space-12);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    background: var(--term-raised);
    color: var(--white);
  }

  .agent-log__group--prompt .agent-log__mark { top: calc(var(--log-mark-y) + 12px); }

  .agent-log__caret { flex: none; color: var(--term-dim); }

  /* The 2px rule left of a hook message; drawn inside the box, as Pencil draws strokes */
  .agent-log__rail {
    padding: 0 0 14px 20px;
    box-shadow: inset 2px 0 0 var(--white-20);
  }

  .agent-log__rail--error {
    box-shadow: inset 2px 0 0 var(--term-error);
    color: var(--term-error);
  }

  .agent-log__rail--end { padding-bottom: 0; }

  .agent-log__dim { color: var(--term-dim); }

  /* The dot's 14 x 26 run box; the exported SVG fills it and places the glyph where the frame
     draws it (an 11.9px dot, 12.3 bold, centred at 6.7, 12.6) */
  .agent-log__dot {
    position: relative;
    display: inline-block;
    width: 14px;
    height: 26px;
    margin-right: 9px;
    vertical-align: top;
    text-indent: 0;
  }

  .agent-log__dot img {
    position: absolute;
    inset: 0;
  }

  .agent-log__dot--done { margin-right: var(--log-dot-gap); }

  /* An agent reply: the dot hangs, the wrapped lines and the next paragraph sit at the indent */
  .agent-log__hang {
    padding-left: var(--log-indent);
    text-indent: calc(-1 * var(--log-indent));
  }

  .agent-log__indent { padding-left: var(--log-indent); }

  .agent-log__hang + .agent-log__indent,
  .agent-log__decision { margin-top: 10px; }

  .agent-log__elbow { margin-right: var(--log-elbow-gap); }

  .agent-log__decision {
    position: relative;
    padding-left: var(--log-decision-indent);
  }

  .agent-log__decision .agent-log__mark { left: var(--log-mark-x); }

  /* From D the terminal is at most its 820 frame width; the D and W breaks need all of it */
  @container agent-log (width < 820px) {
    .agent-log__br-w { display: none; }
  }

  /* ---------- Notes ---------- */
  .agent-log__notes {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 24px 0 0;
    list-style: none;
  }

  .agent-log__note-head {
    display: flex;
    align-items: center;
    gap: var(--space-10);
  }

  .agent-log__note-head img { flex: none; }

  .agent-log__note-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0;
    text-wrap: wrap;
    color: var(--ink);
  }

  .agent-log__note-body {
    margin-top: var(--space-6);
    font-size: 14px;
    line-height: 20px;
    color: var(--ink-muted);
  }

  @media (width < 900px) {
    .agent-log__mark--dw,
    .agent-log__br-w { display: none; }
  }

  @media (min-width: 900px) {
    .session-anatomy .section-intro { padding-bottom: var(--space-56); }

    .agent-log__terminal {
      --log-indent: 18px;
      --log-dot-gap: 9px;
      --log-decision-indent: 45px;
      --log-elbow-gap: 18px;
      --log-mark-x: -26px;
      --log-mark-y: 3px;
      max-width: 820px;
      padding-right: 32px;
    }

    .agent-log__br-m,
    .agent-log__mark--m { display: none; }
  }

  /* Side by side once the figure holds the 820 terminal and a rail wide enough for every note
     title on one line (380); narrower, the notes follow the terminal as the 390 frame sets them. */
  @container agent-log (width >= 1200px) {
    .agent-log__plate {
      --leader-w: 60px;
      --note-x: 72px;
      display: grid;
      grid-template-columns: minmax(0, 820px) minmax(380px, 1fr);
      grid-template-rows: repeat(12, auto);
    }

    .agent-log__terminal,
    .agent-log__notes {
      display: grid;
      grid-row: 1 / -1;
      grid-template-rows: subgrid;
    }

    .agent-log__notes { gap: 0; padding: 0; }

    /* Each note is level with its marker: the marker sits 3px into its row (15 in the padded
       prompt), the note's 20px marker centres on it, and the leader runs at that centre. */
    /* --row: the note's marker row in the terminal, set on each note by the page */
    .agent-log__note {
      --row: auto;
      --note-y: 2px;
      position: relative;
      grid-row: var(--row);
      height: 0;
    }

    .agent-log__note:first-child { --note-y: 14px; }

    .agent-log__note::before {
      content: "";
      position: absolute;
      top: calc(var(--note-y) + 10px);
      left: 0;
      width: var(--leader-w);
      height: 1px;
      background: var(--ink-35);
    }

    .agent-log__note-inner {
      width: min(388px, 100% - var(--note-x));
      margin: var(--note-y) 0 0 var(--note-x);
    }
  }

  @media (min-width: 1680px) {
    .session-anatomy .section-intro,
    .session-outcome .section-intro {
      --intro-heading-size: var(--t-h1-size);
      --intro-heading-ls: var(--t-h1-ls);
    }

    .agent-log__plate {
      --leader-w: 112px;
      --note-x: 135px;
    }
  }

  @media (forced-colors: active) {
    .agent-log__rail { border-left: 2px solid CanvasText; padding-left: 18px; }
    .agent-log__note::before { background: CanvasText; }
  }
}