/* FIREWALL rights card page. Uses the colors and type from styles.css.
   The wallet card is drawn at its real size (two 3.375 x 2.125 inch sides,
   side by side, folded in the middle) so it prints ready to cut out. */

.card-main { padding-block: 24px 48px; }
.card-main h1 { margin: 0 0 .3em; }
.card-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 16px 0 8px; }
.card-actions a { font-weight: 600; }
.cut-hint { color: var(--muted); margin: 24px 0 6px; }

/* ---- wallet card */
.wallet { overflow-x: auto; padding-bottom: 4px; }
.wallet-card {
  display: grid; grid-template-columns: 3.375in 3.375in; width: 6.75in;
  border: 1.5px dashed var(--ink); background: #fff; color: #111;
}
.side {
  height: 2.125in; padding: .1in .12in; overflow: hidden; box-sizing: border-box;
  font-size: 7pt; line-height: 1.28; display: flex; flex-direction: column; gap: 3px;
}
.side p, .side ul { margin: 0; }
.side-officer { border-inline-end: 1px dashed #777; }
.side-hint { font-size: 6pt; color: #555; }
.officer-title { font-weight: 800; font-size: 9.5pt; }
.officer-text { font-size: 8.8pt; line-height: 1.3; }
.side-brand { margin-top: auto !important; font-weight: 900; letter-spacing: .08em; font-size: 6.5pt; color: var(--brand-base); }
.side-title { font-weight: 800; font-size: 9pt; color: var(--brand-base); }
.side ul { padding-inline-start: 1.1em; }
.side .short { font-size: 8pt; }
.side .short li { margin-bottom: 2px; }
.side-nums { list-style: none; padding: 0 !important; margin-top: auto !important; border-top: 1px solid #ccc; padding-top: 3px !important; }
.side-nums li { display: flex; gap: 4px; justify-content: space-between; align-items: baseline; }
.side-nums .num { font-weight: 700; white-space: nowrap; }
.side-nums .blank .line { flex: 1; border-bottom: 1px solid #999; min-width: 40%; height: 1em; }

/* ---- the sheet */
.sheet { margin-top: 28px; }
.sheet h2 { font-size: 1.3rem; margin: 0 0 .6em; }
.sheet h3 { font-size: 1.05rem; margin: 1em 0 .4em; color: var(--brand); }
.sheet-cols { display: grid; gap: 8px 32px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rights li, .say li { margin-bottom: 6px; }
.say-en { display: block; font-weight: 700; }
.say-tr { display: block; color: var(--muted); }
.nums { list-style: none; padding: 0; margin: 0; }
.nums li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); }
.n-label { flex: 1 1 260px; }
.n-name { color: var(--muted); }
.n-phone { font-weight: 700; white-space: nowrap; }
.n-hint { color: var(--muted); font-size: .9em; }
.blanks .line { flex: 1 1 200px; border-bottom: 1px solid var(--ink); min-height: 1.4em; }
.sheet-foot { color: var(--muted); margin-top: 18px; }

@media (max-width: 720px) {
  /* Phones: the two sides stack (still real size) so neither is cut off. */
  .wallet-card { grid-template-columns: 3.375in; width: 3.375in; }
  .side-officer { border-inline-end: none; border-bottom: 1px dashed #777; }
}

@media print {
  @page { size: letter; margin: .5in; }
  .card-page .top, .card-actions, #c-privacy, .skip { display: none !important; }
  body.card-page { background: #fff; color: #000; font-size: 9.5pt; }
  .rights li, .say li { margin-bottom: 3px; }
  .nums li { padding: 4px 0; }
  .card-main { padding: 0; max-width: none; }
  .card-main h1 { font-size: 13pt; }
  .card-main .lead { font-size: 9.5pt; }
  .wallet { overflow: visible; }
  .wallet-card { grid-template-columns: 3.375in 3.375in !important; width: 6.75in !important; border-color: #000; break-inside: avoid; }
  .side-officer { border-inline-end: 1px dashed #000 !important; border-bottom: none !important; }
  .side-brand, .side-title, .sheet h3 { color: #000; }
  .sheet { margin-top: .25in; }
  .sheet h2 { font-size: 12pt; }
  .sheet h3 { font-size: 10.5pt; }
  .nums li, .rights li, .say li { break-inside: avoid; }
  .sheet h3 { break-after: avoid; }
  .say-tr, .n-name, .n-hint, .sheet-foot { color: #333; }
  .nums li { border-color: #bbb; }
}