/* /if-then — after /page.css. On screen only: the sheet's own details.
   The sheet's stage, its intro lines and its width live in page.css
   (Printables), shared with /full-list, as does the plans' grid; paper is
   page.css's print rules. */

@media screen {
  .sheet-head { gap: 12px; margin-bottom: 12px; }
  .sheet-head .sheet-note { font-size: 1rem; color: var(--ink-2); max-width: 40rem; }

  /* The labels on the sheet in mint, as captions are in every panel. */
  :where(.doc) .sheet h3, .sheet h3 { margin-top: 40px; margin-bottom: 14px; color: var(--mint); }
  .plan-rows b { color: var(--mint); }
  .sheet .box { border-color: rgba(108, 222, 190, 0.45); }

  /* The plans: When, then I, on lines to write on. */
  .plan-rows { margin-top: 8px; }
  .plan-rows > li { padding: 14px 0 12px; column-gap: 14px; }

  /* The two lists to pick from, set off by a hairline. */
  .pick-cols { margin-top: 32px; border-top: 1px solid var(--line); }
  .pick-cols h3 { margin-top: 28px; }
  .ticks > li { padding: 7px 0; font-size: 1.0625rem; }
  /* The write-in choice keeps its two words on one line; its line gives. */
  .ticks > li:last-child { white-space: nowrap; }
  .ticks > li:last-child .blank { min-width: 4em; }

  /* The four basics: the word in display type, as terms are on the guides. */
  .halt-sheet > div { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 16px; padding: 16px 0; align-items: baseline; }
  .halt-sheet dt {
    font-family: var(--display);
    font-stretch: 80%;
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.05;
    letter-spacing: -0.01em;
  }
  .halt-sheet dd { font-size: 1.0625rem; line-height: 1.5; }
}

/* From 1080px the four basics sit two by two. */
@media screen and (min-width: 1080px) {
  .halt-sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}

@media screen and (max-width: 639px) {
  .plan-rows > li { padding: 10px 0 14px; }
  .plan-rows > li + li { border-top: 1px solid var(--line); }
  .halt-sheet > div { grid-template-columns: 1fr; gap: 4px; }
}