/* The complaint (BT-67): Print Studio throughout. This page is the lesson and
   the field guide; it must read without JavaScript and without having played. */
.complaint-page-shell { --page-title-accent: #626f76; }
.complaint-page-shell .exit-emblem { background: var(--sheet); border: 1px solid #827e6f55; }
.complaint-page-shell .exit-strokes { color: #626f76; }
.complaint-main { gap: 0; }
.exit-opening { margin-bottom: 20px; }
.complaint-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; }
.complaint-actions-end { margin: 24px 0 0; }
.complaint-actions .button { min-height: 48px; border: 2px solid var(--ink); font: 700 18px/1.2 Barlow, sans-serif; padding: 12px 20px; text-align: center; text-decoration: none; }
.complaint-doc { background: var(--sheet); border: 2px solid var(--ink); padding: 28px 32px 24px; max-width: 980px; }
.docket { margin: 0 0 6px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .06em; color: #4a5860; }
.doc-title { margin: 0 0 8px; font: 900 clamp(30px, 3vw, 40px)/1.1 Barlow, sans-serif; position: relative; display: inline-block; }
.doc-title > span { padding-bottom: 3px; }
.parties { margin: 10px 0 6px; font-size: 17px; }
.ledger { margin: 0 0 12px; font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: #4a5860; }
.ledger .circle-num { padding: 0 6px; }
.takeaway { margin: 0 0 16px; font-size: 17px; line-height: 1.5; max-width: 72ch; }
.counts { width: 100%; font-size: 16px; }
.count-head, .count-line { display: grid; grid-template-columns: 56px minmax(200px, 1.1fr) minmax(220px, 1.4fr) 150px; column-gap: 12px; align-items: start; border-bottom: 1px solid #827e6f55; padding: 8px 0; }
.complaint-doc.has-run .count-head, .complaint-doc.has-run .count-line { grid-template-columns: 56px minmax(200px, 1.1fr) minmax(220px, 1.4fr) 150px 130px; }
.count-head { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .06em; color: #4a5860; border-bottom: 1px solid var(--ink); padding: 6px 0; }
.c-num { font-family: 'IBM Plex Mono', monospace; grid-column: 1; grid-row: 1; }
/* The pattern cell dissolves into the row so the Nutshell bubble, inserted after
   its trigger, can take the full row width beneath the cells. */
.c-pattern { display: contents; }
.c-pattern > .nutshell-expandable, .c-pattern > a { grid-column: 2; grid-row: 1; }
.c-pattern > span:empty { display: none; }
.c-pattern > .nutshell-bubble { grid-column: 1 / -1; grid-row: 2; }
.c-exhibit { grid-column: 3; grid-row: 1; }
.c-status { grid-column: 4; grid-row: 1; }
.c-run { grid-column: 5; grid-row: 1; }
.counts .run-col { display: none; white-space: nowrap; }
.complaint-doc.has-run .counts .run-col { display: block; }
.status-key { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: #4a5860; max-width: 80ch; }
.settled { margin: 18px 0 6px; font-size: 17px; }
.settled b { font-weight: 700; }
.next-time { margin: 0 0 10px; font-size: 16px; line-height: 1.5; max-width: 76ch; }
.next-time code { font-family: 'IBM Plex Mono', monospace; font-size: 14px; background: var(--paper); padding: 1px 6px; border: 1px solid #827e6f55; border-radius: 4px; }
.report-line { margin: 0; font-size: 15px; line-height: 1.5; color: #4a5860; max-width: 76ch; }
.complaint-explanations { display: block; margin-top: 24px; }
.complaint-enhanced .complaint-explanations { display: none; }
.complaint-doc [data-explanation-visual] { margin: 12px 0; }
.complaint-doc [data-explanation-visual] figcaption { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .06em; color: #4a5860; margin-bottom: 6px; }
.complaint-doc [data-explanation-example] { padding: 10px 12px; background: var(--paper); border: 1px solid #827e6f55; border-radius: 6px; font-size: 15px; line-height: 1.5; }
.complaint-doc { width: 100%; max-width: none; padding: 32px; }
.case-instruction { margin: 24px 0 10px; font: 500 15px/1.5 Barlow, sans-serif; color: #4a5860; }
.count-line { padding-block: 14px; }
.count-head, .count-line { grid-template-columns: 56px minmax(0, 1.15fr) minmax(0, 1.5fr) minmax(120px, .8fr); gap: 16px; }
.complaint-doc.has-run .count-head, .complaint-doc.has-run .count-line { grid-template-columns: 56px minmax(0, 1.15fr) minmax(0, 1.5fr) minmax(110px, .7fr) minmax(120px, .8fr); }
.counts .run-col { white-space: normal; }
.count-line > * { min-width: 0; }
.count-line:has(.nutshell-expandable[aria-expanded="true"]) { padding-bottom: 18px; }
.status-key { margin-top: 18px; max-width: none; }
.report-line { max-width: none; margin-top: 18px; }
@media (max-width: 760px) {
  .complaint-doc { padding: 20px 16px; }
  .counts { font-size: 14px; }
  .count-head, .count-line, .complaint-doc.has-run .count-head, .complaint-doc.has-run .count-line { grid-template-columns: 32px minmax(0, 1fr); }
  .c-exhibit, .count-head span:nth-child(3) { display: none; }
  .count-line { row-gap: 2px; }
  .count-head span:nth-child(4), .complaint-doc.has-run .count-head .run-col { display: none; }
  .c-status { grid-column: 2; grid-row: 2; font-size: 13px; color: #4a5860; }
  .c-status::before { content: "Case status: "; }
  .c-run { grid-column: 2; grid-row: 3; font-size: 12px; color: #4a5860; }
  .c-run::before { content: "Your run: "; }
  .c-pattern > .nutshell-bubble { grid-row: 4; }
}

/* Numbers and pattern names share a baseline. The shared 44px target stays as an
   invisible hit area, so it adds no blank space to the row. */
.count-line { align-items: baseline; }
#main .count-line .nutshell-expandable { min-height: 0; padding-block: 0; --nutshell-dot-line-start: 0px; }
#main .count-line .nutshell-expandable::after { content: ''; position: absolute; inset: -9px 0; }

/* The closing buttons stand clear of the footer rule. */
.complaint-actions-end { margin-bottom: 40px; }

/* Lossless WebP twins of the shared logo. */
.brand[data-preview-logo="01"] .logo-study-crop {
  background-image: image-set(
    url("/assets/bt-soft-upright-01-44-1x-8de6f0b2bfff.webp") 1x,
    url("/assets/bt-soft-upright-01-44-2x-d499ca3895f0.webp") 2x,
    url("/assets/bt-soft-upright-01-44-3x-ab15e44a48bc.webp") 3x,
    url("/assets/bt-soft-upright-01-44-4x-adc2be220271.webp") 4x
  );
}
@media (max-width: 1000px), (min-width: 1001px) and (max-height: 780px) {
  .brand[data-preview-logo="01"] .logo-study-crop {
    background-image: image-set(
      url("/assets/bt-soft-upright-01-40-1x-9036f3a7bceb.webp") 1x,
      url("/assets/bt-soft-upright-01-40-2x-9514ec0848cf.webp") 2x,
      url("/assets/bt-soft-upright-01-40-3x-dc50163d2f4d.webp") 3x,
      url("/assets/bt-soft-upright-01-40-4x-0b2b9f15a7c3.webp") 4x
    );
  }
}