/* michaelmorale.com — G-900 Notes + RFI: general notes (about), the RFI (contact), and the set's legends
   (abbreviations, symbols). The sheet title block, crumbs and pager live in site.css.
   Phone and tablet: one column, in reading order. Wide (1180px+): notes beside the RFI, legends beneath. */

.notes-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 22px var(--frame-pad) 0; }
.gn, .rfi, .abbr, .sym { min-width: 0; }

/* ------------------------------------------------------------------ general notes */
.gn-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; font-size: 15px; line-height: 1.5; counter-reset: gn; max-width: 720px; }
.gn-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px; counter-increment: gn; }
.gn-list li::before { content: counter(gn, decimal-leading-zero); font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); padding-top: 3px; }

/* ------------------------------------------------------------------ RFI: the contact, drawn as the form */
.rfi { padding: 18px 16px 18px; border: 2px solid var(--ink); background: var(--panel); }
.rfi-no { letter-spacing: .14em; }
.rfi h2 { margin-top: 8px; font-family: var(--font-narrow); font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -.01em; }
.rfi-text { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.rfi-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 16px; border: 1px solid var(--ink); }
.rfi-form div { padding: 8px 10px 9px; border-bottom: 1px solid var(--ink); min-width: 0; }
.rfi-form div:nth-child(odd):not(.rfi-form-wide) { border-right: 1px solid var(--ink); }
.rfi-form div:last-child { border-bottom: 0; }
.rfi-form .rfi-form-wide { grid-column: 1 / -1; }
.rfi-form dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--ink-2); line-height: 1.3; }
.rfi-form dd { margin-top: 3px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .04em; line-height: 1.35; }
.rfi-links { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.rfi-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 14px;
  border: 1.5px solid var(--ink); background: var(--sheet); text-decoration: none; color: var(--ink);
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .06em; overflow-wrap: anywhere;
  transition: background-color .16s ease, box-shadow .16s ease;
}
.rfi-link:hover { background: var(--hover); color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); }
.rfi-link--mail { border-width: 2px; }
.rfi-addr { color: var(--accent); letter-spacing: .02em; }
.rfi-link .ico { transition: transform .16s ease; }
.rfi-link:hover .ico { transform: translateX(3px); }

/* ------------------------------------------------------------------ legends */
.abbr, .sym { padding-top: 18px; border-top: 1px solid var(--line); }
.abbr-list { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 10px; row-gap: 8px; margin-top: 14px; font-size: 14px; line-height: 1.4; }
.abbr-list div { display: contents; }
.abbr-list dt { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .04em; padding-top: 2px; }
.abbr-list dd { color: var(--ink-2); }

.sym-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 20px; margin-top: 12px; }
.sym-list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 56px; padding: 2px 0; border-bottom: 1px solid var(--line); }
.sym-list li:last-child { border-bottom: 0; }
.sym-glyph { display: flex; align-items: center; justify-content: center; }
.sym-text { font-size: 14px; line-height: 1.4; color: var(--ink-2); }

/* ------------------------------------------------------------------ end of the public set + pager */
/* same dash-dot pen as the match line on the zone sheets */
.setend {
  display: flex; align-items: center; gap: 12px; margin-top: 36px; padding: 0 var(--frame-pad);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; line-height: 1.3; color: var(--ink-2);
}
.setend::before, .setend::after {
  content: ""; flex: 1 1 24px; min-width: 24px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 16px, transparent 16px 21px, var(--ink) 21px 24px, transparent 24px 29px);
}
.setend::before { flex: 0 0 24px; }
.notes .pager { margin-top: 14px; border-top: 0; }
.notes .pager-next { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.notes .pager-next .pager-k { color: var(--sheet); }
.notes .pager-next:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.notes .pager-next:hover .pager-k { color: var(--on-accent); }
/* Phone: PREV SHEET and BACK TO THE COVER each get a full row, in reading and tab order (as on the other sheets) */
@media (max-width: 559px) {
  .notes .pager { grid-template-columns: minmax(0, 1fr); }
  .notes .pager-prev, .notes .pager-next { grid-column: 1; grid-row: auto; }
}

.end-strip .ts-name { display: flex; }
.end-strip .ts-cell:first-of-type { border-left: 1px solid var(--ink); }

/* ------------------------------------------------------------------ tablet (720px+) */
@media (min-width: 720px) {
  .notes-grid { padding: 30px var(--frame-pad) 0; gap: 36px; }
  .gn-list { gap: 14px; font-size: 17px; line-height: 1.6; }
  .gn-list li { grid-template-columns: 36px minmax(0, 1fr); gap: 6px; }
  .gn-list li::before { font-size: 13px; }
  .rule-h--lg { font-size: 22px; letter-spacing: .12em; padding-bottom: 6px; }
  .rfi { padding: 22px 24px 24px; }
  .rfi h2 { font-size: 40px; }
  .rfi-text { font-size: 16px; line-height: 1.6; }
  .rfi-links { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .rfi-link { min-height: 48px; padding: 0 16px; }
  .rfi-link .ico { margin-left: 4px; }
  .abbr-list { grid-template-columns: 96px minmax(0, 1fr) 96px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; font-size: 15px; line-height: 1.45; }
  .sym-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sym-list li:nth-last-child(2) { border-bottom: 0; }
  .notes .pager-next .pager-name { font-size: 22px; }
  .end-strip { grid-template-columns: minmax(0, 1fr) 240px 150px; min-height: 58px; }
}

/* ------------------------------------------------------------------ wide (1180px+) */
@media (min-width: 1180px) {
  .notes-grid {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 500px); grid-template-areas: "gn rfi" "abbr sym";
    column-gap: 56px; row-gap: 40px; padding: 36px 44px 0;
  }
  .gn { grid-area: gn; }
  .rfi { grid-area: rfi; align-self: start; }
  .abbr { grid-area: abbr; }
  .sym { grid-area: sym; }
  .sym-list { grid-template-columns: minmax(0, 1fr); }
  .sym-list li:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .setend { margin-top: 44px; padding: 0 44px; }
  .notes .pager-next .pager-name { font-size: 24px; }
  .abbr-list { grid-template-columns: 96px minmax(0, 1fr); }
}

@media (min-width: 1440px) {
  .abbr-list { grid-template-columns: 96px minmax(0, 1fr) 96px minmax(0, 1fr); }
}

@media (forced-colors: active) {
  .setend::before, .setend::after { forced-color-adjust: none; background: CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .rfi-link:hover .ico { transform: none; }
}
@media print {
  .setend { display: none !important; }
  .rfi { border-width: 1px; }
}