/* Articles: body typography, play embeds, pack panel, listing cards. Uses spedia.css variables. */

/* The whole article (prose and play embeds alike) sits in the print sheet's 900px column, so the
   step cards are as big as on the print view and the text lines up with them on both edges. */
.ar-article { max-width: 900px; margin: 0 auto; }

.ar-article .sp-h1 { font-size: 33px; line-height: 1.12; letter-spacing: -.015em; }
.ar-summary { font-size: 16px; line-height: 1.55; color: #4b5563; margin-top: 12px; }

.ar-body { font-size: 15px; line-height: 1.75; }
.ar-body h2 { font-family: 'Baloo 2', sans-serif; font-size: 22px; line-height: 1.22; margin: 36px 0 12px; }
.ar-body h3 { font-family: 'Baloo 2', sans-serif; font-size: 18px; line-height: 1.25; margin: 32px 0 10px; }
.ar-body p, .ar-body ul, .ar-body ol, .ar-body blockquote { margin: 0 0 20px; }
.ar-body ul, .ar-body ol { padding-left: 1.4em; }
.ar-body ul { list-style: disc; }
.ar-body ol { list-style: decimal; }
.ar-body a { color: var(--sp-accent); text-decoration: underline; }
.ar-body blockquote { border-left: 4px solid var(--sp-accent); padding: 4px 0 4px 18px; color: var(--sp-accent-dark); font-family: 'Baloo 2', sans-serif; font-weight: 600; font-size: 17px; line-height: 1.45; }

.ar-embed { margin: 32px 0; padding: 0; }
.ar-embed-title { font-weight: 700; }
.ar-embed-error { margin: 24px 0; padding: 12px 16px; border-radius: 10px; background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; font-size: 15px; }

/* Steps embed: one card per step, modelled on the viewer's print sheet; two per row on desktop */
.ar-steps-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ar-steps-head .ar-embed-title { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 14.5px; }
.ar-steps-count { font-size: 13px; color: #4b5563; }
.ar-body .ar-steps-list, .ar-steps-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ar-steps--single .ar-steps-list { grid-template-columns: 1fr; } /* a single-step embed is one full-width card, no caption */
.ar-body .ar-steps-branches, .ar-steps-branches { list-style: none; padding-left: 0; }
.ar-step { background: var(--sp-surface); border: 2px solid var(--sp-border); border-radius: 14px; padding: 12px; min-width: 0; }
/* A portrait field is tall, so its card is capped at the viewer embed's portrait width and centred
   in its column; a landscape card keeps filling the column. */
.ar-step--portrait { max-width: 360px; margin-left: auto; margin-right: auto; width: 100%; }
.ar-step-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.ar-step-badge { flex-shrink: 0; display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--sp-accent); color: var(--sp-accent-fg); font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 13px; line-height: 1.3; }
.ar-step-desc { margin: 3px 0 0; font-size: 14px; font-weight: 600; line-height: 1.4; }
.ar-step-figure { border-radius: 10px; overflow: hidden; background: var(--sp-bg); }
.ar-step-figure svg { display: block; width: 100%; height: auto; }
.ar-steps-branches { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ar-steps-branches li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #4b5563; background: var(--sp-bg); border: 2px solid var(--sp-border); padding: 4px 11px; border-radius: 999px; }
.ar-steps-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; }
.ar-steps-dot--1 { background: #10b981; }
.ar-steps-dot--2 { background: #ec4899; }

/* Viewer embed: locked-size board so the poster and the injected iframe occupy the identical rect */
.ar-viewer-caption { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.ar-viewer-caption .ar-embed-title { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 14.5px; margin: 0; }
.ar-viewer-stage { position: relative; background: var(--sp-surface); border: 2px solid var(--sp-border); border-radius: 18px; padding: 10px; }
.ar-viewer-board { border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; }
.ar-viewer-board svg, .ar-viewer-board iframe { display: block; width: 100%; height: 100%; border: 0; }
.ar-viewer-stage--portrait { max-width: 360px; margin: 0 auto; }
.ar-viewer-stage--portrait .ar-viewer-board { aspect-ratio: 3 / 5; }
.ar-viewer-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 3px solid var(--sp-surface); box-shadow: 0 4px 0 var(--sp-accent-dark), 0 10px 24px rgba(30, 42, 74, .28); }
.ar-viewer-foot { font-size: 13px; color: #4b5563; margin-top: 8px; }
.ar-viewer-links { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ar-body .ar-viewer-btn, .ar-viewer-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 2px solid var(--sp-border); border-radius: 999px; background: var(--sp-surface); color: var(--sp-accent-dark); font: inherit; font-family: 'Baloo 2', sans-serif; font-size: 13px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; }
.ar-viewer-btn:hover { background: var(--sp-tint); border-color: var(--sp-tint); }
.ar-viewer-btn svg { flex-shrink: 0; }
.ar-viewer--dead .ar-viewer-play, .ar-viewer--dead .ar-viewer-open, .ar-viewer--dead .ar-viewer-full { display: none; }

/* Full screen: the stage (which holds the iframe) fills the screen, natively or as a fixed overlay */
.ar-viewer-stage:fullscreen, .ar-viewer-stage--overlay { display: flex; flex-direction: column; padding: 0; border: 0; border-radius: 0; background: var(--sp-bg); max-width: none; margin: 0; }
.ar-viewer-stage--overlay { position: fixed; inset: 0; z-index: 1000; }
.ar-viewer-stage:fullscreen .ar-viewer-board, .ar-viewer-stage--overlay .ar-viewer-board { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; border-radius: 0; }
.ar-viewer-fullbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px 8px 16px; background: var(--sp-surface); border-bottom: 2px solid var(--sp-border); font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 14.5px; }
.ar-has-overlay { overflow: hidden; }

@media (max-width: 639px) {
  .ar-body .ar-steps-list, .ar-steps-list { grid-template-columns: 1fr; }
  .ar-viewer-stage--portrait { max-width: none; }
}

.ar-article .sp-page-head .sp-tags { margin-bottom: 14px; }
.ar-cta { margin-top: 48px; text-align: center; }
.ar-cta .sp-p { font-size: 14px; color: #4b5563; }
.ar-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.ar-card { display: block; overflow: hidden; color: inherit; text-decoration: none; }
.ar-card-image { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
.ar-card-body { padding: 16px 18px 20px; }
.ar-card-title { font-family: 'Baloo 2', sans-serif; font-size: 22px; line-height: 1.2; margin: 10px 0 6px; }
.ar-card-summary { margin: 0 0 10px; color: #4b5563; font-size: 15px; line-height: 1.5; }
.ar-card-date { font-size: 13px; color: #6b7280; }
.ar-pagination { margin-top: 32px; }

.ar-admin-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ar-admin-table th, .ar-admin-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid #eef0f4; white-space: nowrap; }
.ar-admin-table td:first-child { white-space: normal; }
.ar-admin-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.ar-admin-wide { grid-column: 1 / -1; }
.ar-admin-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; margin-top: 8px; }
.ar-admin-body { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.ar-admin-preview { border: 2px solid #eef0f4; border-radius: 12px; padding: 20px 24px; max-height: 80vh; overflow-y: auto; font-size: 16px; }
.ar-admin-actions { display: flex; gap: 10px; }
@media (max-width: 900px) { .ar-admin-fields, .ar-admin-split { grid-template-columns: 1fr; } }

.ar-editor-toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border: 2px solid #eef0f4; border-bottom: 0; border-radius: 12px 12px 0 0; background: #fafbfc; position: sticky; top: 0; z-index: 2; }
.ar-editor-btn { border: 0; background: transparent; padding: 6px 10px; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 700; color: #374151; cursor: pointer; }
.ar-editor-btn:hover { background: #eef0f4; }
.ar-editor-btn.is-active { background: #e0e7ff; color: #3730a3; }
.ar-editor-btn--play { margin-left: auto; background: #4f46e5; color: #fff; }
.ar-editor-btn--play:hover { background: #4338ca; }
.ar-editor-surface { border: 2px solid #eef0f4; border-radius: 0 0 12px 12px; padding: 20px 24px; min-height: 480px; font-size: 16px; }
.ar-editor-surface .ProseMirror { outline: none; min-height: 440px; }
.ar-editor-surface .ProseMirror > :first-child { margin-top: 0; }
.ar-chip { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: default; user-select: none; }
.ar-chip.ProseMirror-selectednode { outline: 2px solid #4f46e5; }
.ar-dialog { border: 0; border-radius: 16px; padding: 0; width: min(560px, 92vw); }
.ar-dialog::backdrop { background: rgba(17, 24, 39, 0.5); }
.ar-dialog-inner { padding: 24px; display: grid; gap: 14px; }
.ar-dialog-results { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; display: grid; gap: 4px; }
.ar-dialog-results button { width: 100%; text-align: left; border: 0; background: transparent; padding: 10px 12px; border-radius: 8px; font: inherit; cursor: pointer; }
.ar-dialog-results button:hover, .ar-dialog-results .is-chosen button { background: #eef2ff; }
.ar-dialog-mode { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.ar-dialog-mine { font-size: 14px; display: flex; gap: 8px; align-items: center; }

.ar-pack { margin: 40px 0; }
.ar-pack-strip { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--sp-surface); border: 2px solid var(--sp-border); border-radius: 16px; padding: 14px 18px; margin: 32px 0 8px; }
.ar-pack-strip-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ar-pack-icon-well { width: 42px; height: 42px; border-radius: 50%; background: var(--sp-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ar-pack-icon-well img { width: 24px; height: 24px; object-fit: contain; }
.ar-pack-strip-title { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 14.5px; }
.ar-pack-strip-meta { font-size: 12.5px; color: #4b5563; margin-top: 1px; }
.ar-pack-plays { list-style: none; margin: 18px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; font-size: 14px; font-weight: 600; }
.ar-pack-plays img { display: block; width: 100%; height: auto; border-radius: 8px; margin-bottom: 6px; }
.ar-pack-note { margin: 12px 0 0; font-size: 14px; color: #6b7280; }
.ar-pack-inline { display: flex; align-items: center; gap: 14px; }