/* Phase 3 additions: real media, loading and error feedback, admin forms. Built on tokens.css. */

/* Real media in cards, thumbnails and the viewer */
.thumb-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.art-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text-3); font-size: var(--fs-cap); background: var(--bg-2); }
.viewer-stage { display: flex; align-items: center; justify-content: center; }
.viewer-img, .viewer-video, .viewer-frame { display: block; width: 100%; height: 100%; object-fit: contain; background: #0E1A2B; border: 0; }
.viewer-stage .thumb-img { object-fit: cover; }
.viewer-stage.is-browser { flex-direction: column; background: var(--surface); }
.viewer-stage.is-browser .browser-bar { display: flex; gap: 5px; align-self: stretch; padding: 8px 12px; background: var(--bg-2); border-bottom: 1px solid var(--border); }
.viewer-stage.is-browser .browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--n-300); }
.viewer-stage.is-browser .thumb-img, .viewer-stage.is-browser .art { flex: 1; min-height: 0; }
.play-over { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.5); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.play-over .i { width: 22px; height: 22px; fill: currentColor; stroke: none; margin-left: 3px; }
.play-over:focus-visible { border-radius: 50%; }
.viewer-actions { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.thumbs .thumb-img { border-radius: 0; }

/* Busy buttons */
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: om-spin 0.7s linear infinite; flex: none; }
.btn.is-busy { cursor: progress; opacity: 0.85; }
@keyframes om-spin { to { transform: rotate(360deg); } }

/* Plan lines that need attention (unavailable service or removed option) */
.pl-item.needs-attention, .fline.needs-attention { background: var(--danger-tint); margin-inline: calc(var(--s-5) * -1); padding-inline: var(--s-5); }
.pl-item.needs-attention .pl-cfg, .fline.needs-attention small { color: var(--danger); }
.pl-item.needs-attention .pl-price .i, .fline.needs-attention .price .i { color: var(--danger); }
.pl-note { font-size: var(--fs-cap); color: var(--accent); margin-top: 2px; }
.attn { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-xs); color: var(--danger); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--danger-tint); }
.attn .i { flex: none; margin-top: 1px; }
.nudge-actions { grid-column: 2; grid-row: 1 / span 3; display: grid; justify-items: end; gap: 4px; }
.nudge .btn { grid-row: auto; grid-column: auto; }
.fline-actions { grid-column: 1 / -1; display: flex; gap: var(--s-4); margin-top: 4px; }

/* Admin sign-in */
.login-wrap { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: var(--s-7) var(--s-4); background: var(--bg-2); }
.login { width: min(400px, 100%); padding: var(--s-7); display: grid; gap: var(--s-4); }
.login .logo svg { height: 28px; }

/* Admin editor additions */
.switch.sm { width: 38px; height: 24px; }
.switch.sm::after { width: 18px; height: 18px; }
.switch.sm[aria-checked="true"]::after { transform: translateX(14px); }
.qo-row.is-off { opacity: 0.55; }
.qo-row .per.input { font-size: var(--fs-xs); }
.ex-card { padding: var(--s-4); display: grid; gap: var(--s-3); }
.ex-card.is-off { opacity: 0.6; }
.ex-card-top { display: flex; gap: var(--s-3); align-items: flex-end; }
.ex-card .ex-thumb { width: 112px; aspect-ratio: 16 / 10; flex: none; }
.ex-card-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.ex-card-foot .mv button, .ex-card-foot .del { width: 34px; height: 34px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); }
.ex-card-foot .mv button:hover:not(:disabled), .ex-card-foot .del:hover { background: var(--bg-3); }
.ex-card-foot .mv button:disabled { opacity: 0.3; }
.ex-card-foot .i { width: 15px; height: 15px; }
.upload-btn { position: relative; flex: none; cursor: pointer; }
.upload-btn:focus-within { box-shadow: var(--focus-ring); }
.rec-row { padding: var(--s-4); display: grid; gap: var(--s-3); }
.step-row { align-items: center; }
.field-err { font-size: var(--fs-cap); color: var(--danger); }
.cat-modal { width: min(560px, calc(100% - 32px)); max-height: calc(100% - 48px); overflow-y: auto; }
.tbl-wrap .switch { vertical-align: middle; }

/* Laptop widths: a slimmer category list and slightly narrower cards, so more fit across. */
@container dev (min-width: 1101px) and (max-width: 1320px) {
  .b-grid { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-6); }
  .b-main { --card-min: 224px; }
}

@container dev (max-width: 700px) {
  .login { padding: var(--s-5); }
  .ex-card-top { flex-direction: column; align-items: stretch; }
  .ex-card .ex-thumb { width: 100%; }
  .pl-item.needs-attention, .fline.needs-attention { margin-inline: calc(var(--s-4) * -1); padding-inline: var(--s-4); }
}