/* styles/sections/product-shots.css
 * Decision shots on the home page, built from the frames' node values on the Kestrel sample
 * data: decision chips, the decision log (Web App) and the Claude Code session (MCP), each with
 * the 390 frame's own figure (.frame-m). The persona shots (Jira thread, agent activity, Monday
 * brief) are in persona-shots.css, linked after this file. Rules on auto-height rows are inset
 * box-shadows: Pencil draws strokes inside the box, so a rule takes no height. Shells come from
 * artifacts.css; the 390 bar sizes sit in the artifacts layer so they reach the shared bar. */
@layer sections {
  /* ---------- Decision chip ---------- */
  .chip {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--space-6);
    height: 22px;
    padding: 0 7px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
  }

  .chip b {
    font-weight: 700;
  }

  .chip--pending {
    background: var(--chip-pending-bg);
    color: var(--chip-pending-ink);
  }

  .chip--confirmed {
    background: var(--chip-confirmed-bg);
    color: var(--chip-confirmed-ink);
  }

  .chip--superseded {
    background: var(--chip-superseded-bg);
    color: var(--chip-superseded-ink);
  }

  .shot__label {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.7px;
    color: var(--chip-superseded-ink);
  }

  /* ---------- Decision log ---------- */
  .decision-log__search,
  .decision-log__filter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    height: 28px;
    padding: 0 var(--space-10);
    border: 1px solid var(--line);
    border-radius: 2px;
    font-weight: 400;
    color: var(--ink-muted);
  }

  .decision-log__search {
    width: 220px;
    font-size: 13px;
  }

  .decision-log__filter {
    font-size: 15px;
  }

  .decision-log__table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    text-align: left;
  }

  .decision-log__table th {
    height: 36px;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.2px;
    color: var(--ink-muted);
  }

  .decision-log__table :is(th, td):first-child {
    width: 88px;
    padding-left: var(--space-16);
  }

  .decision-log__table :is(th, td):nth-child(3) {
    width: 150px;
  }

  .decision-log__table :is(th, td):last-child {
    width: 146px;
    padding-right: var(--space-16);
  }

  /* Rows are 60 with their rule; chips sit on the title line, as the frames draw them */
  .decision-log__table td {
    height: 59px;
    padding: 11px 0 10px;
    border-top: 1px solid var(--line);
    vertical-align: top;
    line-height: 1.2;
  }

  .decision-log__table tbody tr:last-child td {
    height: 60px;
  }

  .decision-log__table td .chip {
    vertical-align: top;
  }

  .decision-log__table td:nth-child(2) {
    padding-right: var(--space-24);
  }

  .decision-log__id {
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.55;
  }

  .decision-log__title,
  .decision-log__summary {
    display: block;
  }

  .decision-log__title {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
  }

  .is-superseded .decision-log__title,
  .is-superseded .decision-log-m__title {
    color: var(--ink-muted);
  }

  .decision-log__summary {
    margin-top: 3px;
    font-size: 14px;
    line-height: 1.2;
    color: var(--ink-muted);
  }

  .decision-log__source,
  .decision-log-m__source {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-size: 15px;
    line-height: 1.2;
    color: var(--ink-muted);
  }

  .decision-log__table td.decision-log__source {
    display: table-cell;
  }

  .decision-log__source img {
    display: inline-block;
    margin-right: var(--space-8);
    vertical-align: -3px;
  }

  .decision-log-m__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .decision-log-m__list li {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-12) var(--space-14);
  }

  /* 70px rows with their rule, as the 390 frame draws them */
  .decision-log-m__list li + li {
    padding-top: 11px;
    border-top: 1px solid var(--line);
  }

  .decision-log-m__meta {
    display: flex;
    align-items: center;
    gap: var(--space-8);
  }

  .decision-log-m__id {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.2;
    color: var(--ink-muted);
  }

  .decision-log-m__source {
    flex: 1;
    gap: 5px;
    font-size: 12px;
  }

  .decision-log-m__meta .chip {
    font-weight: 400;
  }

  .decision-log-m__title {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
  }

  /* ---------- Claude Code session ----------
     390 lines fit the frame's window; narrower phones wrap them rather than run into the edge. */
  .term__session {
    margin: 0;
    padding: var(--space-14) var(--space-14) var(--space-16);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    color: var(--mist);
  }

  .term__session code {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    font: inherit;
  }

  .term__line {
    display: block;
  }

  .term__gap {
    display: block;
    height: var(--space-4);
  }

  .term__cmd {
    color: var(--mist);
  }

  .term__dim {
    color: var(--white-65);
  }

  .term__hl {
    font-weight: 600;
    color: var(--term-accent);
  }

  /* ---------- 1440 and 1920 shots ---------- */
  @media (width >= 900px) {
    .term__session {
      padding: var(--space-16) var(--space-16) var(--space-20);
      font-size: 14px;
      white-space: pre;
    }

    .term__session code {
      gap: 7px;
    }

    .term__gap {
      height: var(--space-8);
    }
  }
}

/* 390: smaller window bars, as the 390 frames draw them */
@layer artifacts {
  @media (width < 900px) {
    .decision-log-m .artifact-bar--breadcrumb,
    .term .artifact-bar--breadcrumb {
      min-height: 40px;
      padding-inline: var(--space-14);
      gap: var(--space-6);
      font-size: 12px;
    }
  }
}