/* styles/sections/doc-mock.css
 * A Brief document transcribed into a product shot (an annotated beat's `art`): a window with the
 * collapsed sidebar strip, the breadcrumb top bar and the document body (title, meta lines, section
 * headings, a left-ruled quote, tables, a dotted list). The window does not clip: the beat's pins
 * straddle its left edge. Colors are the app's (--app-*) and the frame's (--doc-*) tokens.
 * The rows switch from the 390 frame's (stacked tables, crumbs one per line) to the 1440 frame's
 * by the window's own width (container "doc", 600px), so the narrow D window between 900 and about
 * 1150 keeps the stacked rows.
 * Geometry is the Decision History frames (bJkDT 1440, s2ecXm 390, iu5y0 1920). */
@layer sections {
  /* The edge is drawn inside the box, as Pencil draws strokes. D and W hold the frame's 1302 */
  .doc-window {
    container: doc / inline-size;
    display: flex;
    min-width: 0;
    margin: 0;
    border-radius: 6px;
    background: var(--white);
    box-shadow: var(--doc-window-shadow);
    color: var(--app-ink);
    outline: 1px solid var(--shot-field-edge);
    outline-offset: -1px;
  }

  .doc-sidebar {
    display: flex;
    flex: 0 0 32px;
    flex-direction: column;
    align-items: center;
    padding-block: var(--space-16);
    border-radius: 6px 0 0 6px;
    background: var(--doc-sidebar);
    box-shadow: inset -1px 0 0 var(--doc-sidebar-edge);
  }

  .doc-sidebar > img { display: block; }

  /* The 390 frame's strip stops 17 short of the window's foot (2314 of 2331) */
  @media (width < 900px) {
    .doc-sidebar {
      margin-bottom: 17px;
      border-radius: 6px 0 0;
    }
  }

  .doc-main {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
  }

  /* Breadcrumb bar: one crumb per line on M, one row from D */
  .doc-crumbs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-10);
    margin: 0;
    padding: 15px var(--space-16) 14px;
    border-bottom: 1px solid var(--app-line);
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: var(--app-ink-2);
  }

  .doc-crumbs__sep { display: block; }

  .doc-crumbs__current {
    font-weight: 600;
    color: var(--app-ink);
  }

  .doc-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding: 36px var(--space-20) var(--space-32);
  }

  :where(.doc-body) p { margin: 0; }

  .doc-title {
    font-family: var(--font-display);
    font-size: var(--t-h5-size);
    font-weight: 600;
    line-height: round(nearest, 1.05em, 1px);
    letter-spacing: -0.01em;
  }

  .doc-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    font-size: 13px;
    line-height: 16px;
  }

  .doc-meta > p:first-child { font-weight: 600; }

  .doc-meta__line {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    color: var(--doc-text);
  }

  /* Label and value inline, as the frames draw them; in a narrow window the value wraps under */
  .doc-meta__pair {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-4);
  }

  /* The owner's trailing separator is drawn only where the pairs share a line */
  .doc-meta__sep { display: none; }

  .doc-meta strong {
    font-weight: 600;
    color: var(--app-ink);
  }

  /* Each heading follows the frame's 12px spacer: 12 + 12 + 12 above it */
  .doc-heading {
    position: relative;
    margin-top: var(--space-24);
    font-size: 17px;
    font-weight: 600;
    line-height: 20px;
  }

  .doc-quote {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: 680px;
    margin: 0;
    padding: 2px 0 2px 18px;
    box-shadow: inset 3px 0 0 var(--app-line-strong);
    font-size: 14px;
    line-height: round(nearest, 1.55em, 1px);
  }

  .doc-quote__lead {
    font-weight: 600;
    line-height: 17px;
  }

  .doc-text,
  .doc-list {
    max-width: 680px;
    font-size: 14px;
    line-height: round(nearest, 1.6em, 1px);
    color: var(--doc-text);
  }

  .doc-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .doc-list > li {
    position: relative;
    padding-left: 17px;
  }

  .doc-list > li::before {
    content: "";
    position: absolute;
    top: 8.5px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--doc-bullet);
  }

  /* Tables (definition-list rows under a drawn column head): cells stack per row in the narrow
     window, columns in the wide one. Rules and the edge sit inside the cells, as the frame draws
     them (42 a line: 11 + 20 + 11). */
  .doc-table {
    border-radius: 6px;
    outline: 1px solid var(--app-line);
    outline-offset: -1px;
    font-size: 13px;
    line-height: 20px;
  }

  .doc-table__head,
  .doc-table__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
  }

  .doc-table__head {
    border-bottom: 1px solid var(--app-line);
    border-radius: 6px 6px 0 0;
    background: var(--doc-table-head);
    font-weight: 600;
    color: var(--app-ink);
  }

  .doc-table__rows { margin: 0; }

  .doc-table__row { color: var(--doc-text); }
  .doc-table__row:not(:last-child) { border-bottom: 1px solid var(--app-line); }

  .doc-table__head > *,
  .doc-table__row > * {
    margin: 0;
    padding: 11px 14px;
  }

  .doc-table__head > :last-child,
  .doc-table__row:not(:last-child) > :last-child { padding-bottom: 10px; }

  /* The review table's trigger cells keep their 250 in the 390 frame */
  .doc-table--review :is(.doc-table__head, .doc-table__row) > :first-child { max-width: 250px; }

  @media (min-width: 900px) {
    .doc-window { min-height: 1302px; }
  }

  @container doc (width >= 600px) {
    .doc-crumbs {
      flex-direction: row;
      align-items: center;
      padding-inline: 28px;
    }

    .doc-body { padding: 36px var(--space-48) var(--space-48); }

    .doc-title { font-size: 24px; }

    .doc-meta__line { flex-direction: row; }
    .doc-meta__sep { display: inline; }

    .doc-table--thirds :is(.doc-table__head, .doc-table__row) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .doc-table--review :is(.doc-table__head, .doc-table__row) { grid-template-columns: 250px minmax(0, 1fr); }

    .doc-table__head > *,
    .doc-table__row:not(:last-child) > * { padding-bottom: 10px; }
  }
}