/* imatx:circle-cards-2026-10-22 -- the Circle cards (claude/platform-model.md Part 23, Y8;
   session 04 pilot, D41). Per-session on purpose while it is a pilot: it moves to
   /shared/ only if the cards go fleet-wide. Loaded by cards.html, and by index.html for
   the one line under the .session-start buttons (D38).
   On a phone: numbered cards top to bottom. Printed: each card its own box, two or three
   to a Letter page (D36); the long passage card may run over a page, one ayah never does. */
.session-start .start-cards{flex-basis:100%;margin:0;font-size:.95rem;line-height:24px}
.session-start .start-cards a{display:inline-flex;align-items:center;min-height:24px}
/* At 390 the card must still end above 844px (invariant 2): one short line, tucked into the
   slack under the 44px links, and a little less space above the card. */
@media(max-width:560px){.session-start:has(.start-cards){margin-top:10px;padding-bottom:10px}
  .session-start .start-cards{margin-top:-12px;font-size:.85rem}}

.cards-page .circle-card{background:var(--card);border:1px solid var(--rule);border-radius:12px;
  padding:16px 18px;margin:18px 0}
.cards-page .card-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;
  flex-wrap:wrap;border-bottom:1px solid var(--rule);padding-bottom:8px;margin-bottom:10px}
.cards-page .card-head h2{margin:0;font-size:1.25rem}
.cards-page .card-no{display:inline-flex;align-items:center;justify-content:center;min-width:1.8em;
  height:1.8em;margin-right:.4em;border-radius:50%;background:var(--teal-light);color:var(--ink);
  font-family:var(--font-ui);font-size:.85em;font-weight:700}
.cards-page .card-time{margin:0;font-family:var(--font-ui);font-size:.85rem;color:var(--muted);white-space:nowrap}
.cards-page .cue{margin:14px 0 4px;font-family:var(--font-ui);font-size:.75rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.cards-page .say{margin:4px 0 10px;padding-left:12px;border-left:3px solid var(--teal-light)}
.cards-page .card-ayah{margin:8px 0 12px;padding:0}
.cards-page .card-ayah .ayah-ref{margin:8px 0 0;font-family:var(--font-ui);font-size:.8rem;font-weight:700;color:var(--muted)}
.cards-page .card-ayah .ar{margin:4px 0;padding-top:20px}  /* room for a high waqf or hizb mark (7:31) */
.cards-page .card-ayah .en{margin:4px 0}
.cards-page .source-label{margin:4px 0 10px;font-family:var(--font-ui);font-size:.8rem;color:var(--muted)}
.cards-page .card-q{margin:10px 0 4px;padding:10px 12px;border-radius:8px;background:var(--teal-light)}
.cards-page .card-q p{margin:4px 0}
.cards-page .card-q .q-then{font-size:.95rem}
.cards-page .q-link a,.cards-page .circle-card p a{display:inline-flex;align-items:center;min-height:24px}
.cards-page .take-home{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.cards-page .take-home img{width:160px;height:160px;background:#fff;padding:6px;border-radius:6px}
.cards-page .take-home p{margin:4px 0}
.cards-page .print-meta{display:none}

@media print{
  @page{size:Letter;margin:0.45in}
  .cards-page .wrap{max-width:none}
  .cards-page .pagehead .headmeta,.cards-page .page-chips,.cards-page .lead,.cards-page .eyebrow,
  .cards-page .breadcrumb,.cards-page .kicker,.cards-page .q-link,.cards-page footer{display:none!important}
  .cards-page .pagehead{padding:0}
  .cards-page .brand{margin:0}
  .cards-page .brand img{height:16px}
  .cards-page .pagehead h1{font-size:14pt;margin:2px 0 0}
  .cards-page .pagehead .deck{font-size:9pt;margin:0 0 2px}
  .cards-page main{margin-top:0}
  .cards-page .print-meta{display:block;font-size:7.5pt;color:#333;margin:0 0 6px}
  .cards-page .circle-card{break-inside:avoid;border:1px solid #888;border-radius:6px;background:#fff;
    padding:5px 10px 6px;margin:0 0 7px;font-size:9pt;line-height:1.3}
  .cards-page .circle-card p{margin:2px 0}
  .cards-page .circle-card.long{break-inside:auto;break-before:page}
  .cards-page .card-ayah{break-inside:avoid;margin:3px 0;padding:2px 0!important;border:0!important;background:none!important}
  .cards-page .card-ayah>*{border:0!important;padding-left:0!important;padding-right:0!important}
  .cards-page .card-ayah .ayah-ref{font-size:7.5pt;margin:2px 0 0}
  .cards-page .card-ayah .ar{font-size:13.5pt!important;line-height:1.45!important;padding-top:6px;margin:0!important}
  .cards-page .tr{font-size:7.5pt;line-height:1.25;margin:1px 0!important}
  .cards-page .card-ayah .en{margin:1px 0 2px}
  .cards-page .source-label{font-size:7.5pt;margin:1px 0 3px}
  .cards-page .card-head{padding-bottom:2px;margin-bottom:2px;border-color:#aaa}
  .cards-page .card-head h2{font-size:11pt}
  .cards-page .card-time{font-size:8pt}
  .cards-page .card-no{background:#eee}
  .cards-page .cue{color:#000;margin:4px 0 1px;font-size:7pt}
  .cards-page .say{border-left-color:#aaa;padding-left:8px}
  .cards-page .card-q{background:transparent;border:1px solid #ccc;padding:2px 8px;margin:4px 0 2px}
  .cards-page .take-home img{width:1.1in;height:1.1in;padding:0}
}