/* airtime web: the desktop's look (shared/app.css: tokens, Brown, components)
   adapted to a browser: pages that scroll, signed-out pages, phones. Only
   what differs from the desktop is written here. */

/* ---- Page frame ------------------------------------------------------------ */
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { display: block; overflow: auto; height: auto; min-height: 100%; user-select: text; }
body.booting main { visibility: hidden; }
body.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); height: 100%; overflow: hidden; }
body.shell main { overflow-y: auto; padding: 22px 40px 96px; min-width: 0; }
main:focus { outline: none; }
/* The editor fills its page edge to edge. */
body.shell main.editing { padding: 0; position: relative; overflow: hidden; }
a { color: var(--accent); text-underline-offset: 3px; }
a.btn, a.nav, a.folder-tile, a.account-chip, a.brand, a.auth-brand { text-decoration: none; color: inherit; }
a.btn.primary { color: #00262B; }
textarea, input, select, button { font: inherit; }
input::placeholder { color: rgba(138, 144, 152, 0.75); }
input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn, .icon-btn, .chip, .nav, .card, .folder-tile, .pad, .list-row, .swatch, .icon-choice { -webkit-tap-highlight-color: transparent; }
.grow { flex: 1; min-width: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: #00262B; padding: 10px 16px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }
.noscript { text-align: center; color: var(--dim); padding: 40px 16px; }
h1:focus { outline: none; }

/* ---- Rail (wide) ------------------------------------------------------------ */
.rail { min-height: 0; overflow: hidden; }
.rail-top { display: flex; align-items: center; justify-content: space-between; min-height: 36px; }
.brand { display: inline-flex; border-radius: 10px; padding: 2px 0; }
.wordmark { height: auto; }
.rail-nav { display: grid; gap: 2px; }
.rail-nav .nav .i { width: 19px; height: 19px; }
.rail-scroll { border-top: 1px solid var(--line); padding-top: 14px; }
body:not(.has-browse) .rail-scroll { display: none; }
.rail-label-actions { display: inline-flex; gap: 2px; }
.rail-hint { color: var(--dim); font-size: 13px; padding: 2px 12px; margin: 0; line-height: 1.4; }
.nav .twisty { margin-right: -2px; }
.nav .twisty:focus-visible { outline-offset: 0; border-radius: 4px; }
.account-chip { min-height: 44px; }
.rail-foot { margin-top: auto; }
.browse-toggle { display: none; }
.browse-toggle[aria-expanded="true"] { background: var(--surface-higher); box-shadow: inset 0 0 0 1.5px var(--accent); }

/* ---- Head of a page ---------------------------------------------------------- */
.head-text { min-width: 0; }
h1 .h1-text { min-width: 0; overflow-wrap: anywhere; }
.crumbs a { color: var(--dim); text-decoration: none; padding: 2px 4px; border-radius: 6px; }
.crumbs a:hover { color: var(--text); background: var(--surface-high); }
.search input { -webkit-appearance: none; appearance: none; }
.search input::-webkit-search-cancel-button { filter: invert(0.6); }

/* ---- Cards are buttons on the web --------------------------------------------- */
button.card { display: block; width: 100%; padding: 0; text-align: left; color: var(--text); font: inherit; }
.card .poster, .card .card-body, .card .card-text, .card .card-title, .card .card-meta { display: block; }
.card .card-body { display: flex; }
.card .poster.blank { display: grid; }
.card-text { flex: 1; min-width: 0; }
.poster .badges { pointer-events: none; }
.only-on { position: absolute; left: 10px; top: 10px; max-width: calc(100% - 20px); display: inline-flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, 0.72); color: var(--text); padding: 4px 10px 4px 8px; border-radius: 999px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.only-on .i { width: 14px; height: 14px; color: var(--warn); }
.folder-tile { color: var(--text); }
.chip { font-family: inherit; }
.chip .chip-x { border: 0; background: none; padding: 2px; margin: -2px -4px -2px 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--dim); }
.chip .chip-x:hover { color: var(--text); background: rgba(255, 255, 255, 0.08); }
.chip .chip-x .x { width: 14px; height: 14px; margin: 0; }
.chip.add-tag { border-style: dashed; }

/* ---- The clip sheet ------------------------------------------------------------- */
.player-sheet h2 { overflow-wrap: anywhere; }
.offline-note { display: flex; gap: 14px; align-items: center; background: var(--surface-high); border-radius: 16px; padding: 18px 20px; border: 1px solid var(--line); }
.offline-note > .i { width: 28px; height: 28px; color: var(--warn); }
.offline-note div { display: grid; gap: 4px; }
.offline-note b { font-size: 16px; }
.offline-note span { color: var(--dim); font-size: 14px; line-height: 1.45; }
.dialog-sheet .field > .label { color: var(--dim); font-size: 13px; letter-spacing: 0.04em; }
.tag-editor { display: grid; gap: 18px; }
.tag-editor input { width: 100%; font-size: 17px; padding: 13px 16px; }
.icon-grid.locked { opacity: 0.5; }
.icon-grid.locked .icon-choice { cursor: not-allowed; }
.hint { color: var(--dim); font-size: 13px; margin: 0; line-height: 1.45; }

/* ---- Media Player (read only) ----------------------------------------------------- */
div.pad { cursor: default; }
.pad.vacant { gap: 4px; flex-direction: column; }
.pad.vacant .slot-label { font-size: 13px; color: var(--dim); }
.pad.vacant .vacant-text { font-size: 15px; color: rgba(255, 255, 255, 0.35); }
.pad .mode { top: 14px; }

/* ---- Skeletons (no jump when data arrives) --------------------------------------------- */
@keyframes shimmer { 0% { opacity: 0.55; } 50% { opacity: 1; } 100% { opacity: 0.55; } }
.skeleton, .skeleton-block, .skeleton-card .poster, .skeleton-card .card-body, .skeleton-row { animation: shimmer 1.4s ease-in-out infinite; background: var(--surface-high); }
.skeleton-card { pointer-events: none; }
.skeleton-card .card-body { height: 62px; background: var(--surface); }
.skeleton-head { display: grid; gap: 10px; margin: 26px 0 30px; }
.skeleton-block { border-radius: 10px; }
.skeleton-block.title { width: 220px; height: 34px; }
.skeleton-block.line { width: 140px; height: 16px; }
.skeleton-row { min-height: 76px; border: 0; }

/* ---- Account ---------------------------------------------------------------------- */
.account .settings { max-width: 860px; }
.settings h2.section-title { font-weight: 400; font-size: 12px; margin: 0; }
.settings .section-body { display: grid; gap: 10px; }
/* The desktop styles every span in a setting row as a dim block line; nested pieces opt out. */
.setting .what b span { margin-top: 0; font-size: inherit; color: inherit; }
.setting .what b .light-title, .setting .what b .session-title { display: inline-flex; }
.setting .what b .light { display: inline-block; flex: none; }
.setting .what b .pill { display: inline-block; font-size: 12px; font-weight: 400; line-height: 1.4; }
.setting .what b .pill.available { color: var(--accent); }
.setting .what .usage span { margin-top: 0; }
.setting .what .usage-line b { display: inline; }
.setting .what .usage-line span { display: inline; color: var(--dim); }
.settings section { scroll-margin-top: 20px; }
.setting.form-row { grid-template-columns: 1fr auto; align-items: end; }
.form-fields { display: grid; gap: 14px; min-width: 0; }
.form-fields .field input { width: 100%; }
.field > label { color: var(--dim); font-size: 13px; letter-spacing: 0.04em; }
input.readonly { color: var(--dim); background: transparent; }
.light-title { display: inline-flex; align-items: center; }
.session-title { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.usage { display: grid; gap: 10px; margin-top: 6px; }
.usage-line { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.usage-line b { font-size: 15px; color: var(--text); font-weight: 400; }
.usage .bar { margin: 0; height: 8px; }
.usage .bar span.full { background: var(--warn); }
.usage-row { grid-template-columns: auto 1fr; }
.usage-row .act { display: none; }
.btn.destroy-outline { background: transparent; color: var(--record); box-shadow: inset 0 0 0 1.5px rgba(255, 59, 48, 0.55); }
.btn.destroy-outline:hover { background: rgba(255, 59, 48, 0.12); filter: none; }
.danger-row { border-color: rgba(255, 59, 48, 0.25); }
.danger-row .i.lead { color: var(--record); }

/* ---- Forms ----------------------------------------------------------------------- */
.field input { min-height: 48px; }
.password-wrap { position: relative; display: block; }
.password-wrap input { width: 100%; padding-right: 72px; }
.password-wrap .reveal { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--dim); font-size: 13px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.password-wrap .reveal:hover { color: var(--text); background: var(--surface-high); }
.form-error { margin: 0; color: var(--warn); font-size: 14px; line-height: 1.45; min-height: 1.45em; }
.form-error:empty { min-height: 0; margin-top: -6px; }
.btn.block { width: 100%; justify-content: center; }
.btn.big { min-height: 56px; font-size: 17px; }
.btn.outline { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.22); }
.btn.outline:hover { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5); filter: none; }
.btn.busy { position: relative; color: transparent !important; }
.btn.busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid currentColor; border-color: rgba(255, 255, 255, 0.6) transparent rgba(255, 255, 255, 0.6) transparent; animation: spin 0.8s linear infinite; }
.btn.primary.busy::after { border-color: #00262B transparent #00262B transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.strength { display: grid; gap: 6px; }
.strength-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.strength-bars span { height: 4px; border-radius: 999px; background: var(--surface-higher); transition: background 0.2s; }
.strength-text { color: var(--dim); font-size: 13px; }
.strength[data-score="1"] .strength-bars span:nth-child(-n+1) { background: var(--record); }
.strength[data-score="2"] .strength-bars span:nth-child(-n+2) { background: var(--warn); }
.strength[data-score="3"] .strength-bars span:nth-child(-n+3) { background: var(--accent); }
.strength[data-score="4"] .strength-bars span { background: var(--ok); }
.notice { margin: 0; padding: 12px 14px; background: rgba(255, 159, 10, 0.08); border: 1px solid rgba(255, 159, 10, 0.3); border-radius: 12px; font-size: 14px; line-height: 1.5; color: #f3d9b1; }
.status-line { margin: 0; min-height: 1.4em; color: var(--dim); font-size: 14px; text-align: center; }

/* ---- Signed-out pages --------------------------------------------------------------- */
body.bare { background: radial-gradient(1100px 520px at 50% -12%, rgba(18, 181, 203, 0.12), transparent 62%), var(--bg); background-attachment: fixed; }
main.auth-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: start center; padding: max(40px, 8vh) 16px 48px; }
.auth { width: min(440px, 100%); display: grid; gap: 28px; justify-items: center; }
.auth.wide { width: min(560px, 100%); }
.auth-brand { display: inline-flex; padding: 6px; border-radius: 12px; }
.auth-brand img { width: 150px; height: auto; display: block; }
.auth-card { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 30px 30px 26px; display: grid; gap: 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); }
.auth-head { display: grid; gap: 4px; }
.auth-card h1 { font-size: 28px; }
.auth-form { display: grid; gap: 16px; }
.auth-form .field input { width: 100%; font-size: 16px; }
.field.with-link { position: relative; }
.field-link { position: absolute; right: 0; top: 0; font-size: 13px; color: var(--accent); text-decoration: none; }
.field-link:hover { text-decoration: underline; }
.auth-alt { margin: 0; text-align: center; color: var(--dim); font-size: 14px; }
.auth-alt a { color: var(--accent); }
.auth-card.result { justify-items: center; text-align: center; }
.result-mark, .link-mark { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: var(--surface-high); }
.result-mark .i, .link-mark .i { width: 34px; height: 34px; }
.result-mark.ok, .link-mark.result.ok { background: rgba(48, 209, 88, 0.14); color: var(--ok); }
.result-mark.warn, .link-mark.result.warn { background: rgba(255, 159, 10, 0.14); color: var(--warn); }
.result-mark.dim, .link-mark.result.dim { color: var(--dim); }
.result-text { display: grid; gap: 10px; }
.result-text .sub { margin: 0; line-height: 1.55; }
.auth-actions { display: grid; gap: 10px; width: 100%; }

/* ---- /link: approving a device ---------------------------------------------------------- */
.link-wrap { display: grid; place-items: start center; padding: 4vh 0 20px; }
.link-card { width: min(520px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 30px; display: grid; gap: 18px; justify-items: center; text-align: center; }
.link-card h1 { font-size: 28px; display: block; overflow-wrap: anywhere; line-height: 1.2; }
.link-card .sub { margin: 0; line-height: 1.5; }
.link-mark { background: rgba(18, 181, 203, 0.14); color: var(--accent); }
.link-mark.skeleton { background: var(--surface-high); }
.device-name { color: var(--accent); }
.link-form { display: grid; gap: 12px; width: 100%; justify-items: center; margin-top: 4px; }
.code-label { color: var(--dim); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.code-input { width: min(340px, 100%); text-align: center; font-size: 32px; font-weight: 700; letter-spacing: 0.14em; padding: 14px 10px; border-radius: 18px; color: var(--accent); background: var(--surface-high); border: 1.5px solid var(--line); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.code-input::placeholder { color: rgba(138, 144, 152, 0.35); letter-spacing: 0.14em; }
.code-input:focus { border-color: var(--accent); }
.link-form .hint { text-align: center; }
.link-form .form-error { text-align: center; }
.link-form .btn { margin-top: 6px; }
.link-facts { width: 100%; margin: 0; display: grid; gap: 0; background: var(--surface-high); border-radius: 18px; padding: 6px 18px; text-align: left; }
.link-facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.link-facts > div:last-child { border-bottom: 0; }
.link-facts dt { color: var(--dim); }
.link-facts dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.link-facts dd.soon { color: var(--warn); }
.link-facts.skeleton-block { height: 196px; }
.link-actions { display: grid; gap: 10px; width: 100%; }
.link-actions.skeleton-block { height: 122px; }
.link-warning { display: flex; gap: 10px; align-items: flex-start; text-align: left; margin: 0; color: var(--dim); font-size: 14px; line-height: 1.45; width: 100%; }
.link-warning .i { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--accent); }
.link-who { display: inline-flex; gap: 8px; align-items: center; margin: -8px 0 0; color: var(--dim); }
.link-who .i { width: 18px; height: 18px; }

/* ---- Toasts and overlays on the web ---------------------------------------------------- */
.toasts { left: 50%; top: 18px; width: max-content; max-width: calc(100vw - 32px); }
body.shell .toasts { left: calc(50% + 116px); }
.toast { text-align: center; }
.overlay { overscroll-behavior: contain; }
.sheet { -webkit-overflow-scrolling: touch; grid-template-columns: minmax(0, 1fr); }
.sheet > * { min-width: 0; }
.sheet-head > div { min-width: 0; }
.menu input { width: calc(100% - 4px); }

/* ---- Phones and narrow windows ------------------------------------------------------------ */
@media (max-width: 760px) {
  body.shell { display: block; height: auto; overflow: visible; }
  body.shell main { overflow: visible; padding: 18px 16px 72px; }
  body.shell main.editing { height: calc(100dvh - 58px); overflow: hidden; padding: 0; }
  .rail { position: sticky; top: 0; z-index: 8; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "top nav foot" "browse browse browse"; align-items: center; gap: 0 8px; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); border-right: 0; border-bottom: 1px solid var(--line); background: rgba(22, 22, 26, 0.94); backdrop-filter: blur(14px); overflow: visible; }
  .rail-top { grid-area: top; gap: 4px; min-height: 0; }
  .wordmark { width: 92px; margin: 0 4px 0 2px; }
  .rail-nav { grid-area: nav; display: flex; gap: 2px; justify-content: flex-end; }
  .rail-nav .nav { width: auto; padding: 9px 10px; }
  .rail-foot { grid-area: foot; border-top: 0; padding-top: 0; }
  .account-chip { padding: 4px; min-height: 0; flex: none; }
  .account-chip .who { display: none; }
  .rail-scroll { grid-area: browse; display: none; margin: 8px -12px -8px; padding: 12px 12px 16px; max-height: min(70vh, 560px); overflow-y: auto; border-top: 1px solid var(--line); }
  body.has-browse.browse-open .rail-scroll { display: grid; }
  .browse-toggle { display: inline-flex; }
  .rail-nav .nav .label { white-space: nowrap; }
  h1 { font-size: 26px; }
  .head { gap: 14px; }
  .head-actions { width: 100%; }
  .search { flex: 1 1 100%; min-width: 0; order: -1; }
  .search input { width: 100%; }
  .head-actions .browse-toggle, .head-actions .select { flex: 1; justify-content: center; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .card { border-radius: 14px; }
  .card:hover { transform: none; }
  .card-title { font-size: 14px; }
  .card-meta { font-size: 12px; }
  .card-body { padding: 9px 10px 11px; }
  .poster .dur { right: 6px; bottom: 6px; font-size: 12px; padding: 2px 6px; }
  .poster .badges { left: 6px; bottom: 6px; }
  .tag-badge { width: 22px; height: 22px; }
  .tag-badge .i { width: 13px; height: 13px; }
  .only-on { left: 6px; top: 6px; font-size: 11px; max-width: calc(100% - 12px); }
  .pads { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pad { border-radius: 14px; }
  .pad .pad-body { padding: 8px 10px; gap: 8px; }
  .pad .pad-icon { width: 28px; height: 28px; }
  .pad .plays { white-space: normal; font-size: 11px; }
  .setting { grid-template-columns: auto 1fr; padding: 16px; gap: 12px 14px; }
  .setting .act { grid-column: 1 / -1; justify-content: flex-start; }
  .setting.form-row { grid-template-columns: 1fr; }
  .setting.form-row .act { grid-column: auto; }
  .overlay { padding: 0; place-items: end center; }
  .sheet { border-radius: 24px 24px 0 0; padding: 20px 16px max(20px, env(safe-area-inset-bottom)); max-height: 92vh; max-height: 92dvh; }
  .sheet-actions { justify-content: flex-start; }
  .sheet-actions .head-actions { width: auto; margin-left: auto; }
  .toasts, body.shell .toasts { left: 50%; top: 64px; }
  .link-wrap { padding: 2vh 0 8px; }
  .link-card { padding: 24px 18px; border-radius: 24px; }
  .link-card h1 { font-size: 24px; }
  .code-input { font-size: 28px; }
  .auth-card { padding: 24px 18px 22px; border-radius: 24px; }
  .auth-card h1 { font-size: 24px; }
  main.auth-page { padding-top: 28px; }
  .auth { gap: 20px; }
}
@media (max-width: 380px) {
  .rail-nav .nav .label { display: none; }
  .code-input { font-size: 24px; letter-spacing: 0.1em; }
}
@media (hover: none) {
  .card:hover { transform: none; border-color: var(--line); }
}

/* Narrow phones: the top bar's links show their icons; the names stay for screen readers. */
@media (max-width: 480px) {
  .rail-nav .nav .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rail-nav .nav { padding: 9px; }
}

/* The prompter screen (/prompter/<id>/show): black, edge to edge, nothing else. */
main.prompter-show { position: fixed; inset: 0; background: #000; }
main.prompter-show .pv-waiting { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #8A9098; font: 700 5cqh Brown, system-ui, sans-serif; }

/* Live's look is shared (desktop app.css, js/live). Here only the page frame: the cockpit fills the page. */
main.run-page { display: flex; flex-direction: column; }
@media (max-width: 760px) { body.shell main.run-page { height: auto; overflow: visible; } }