/* Shared application layout. Keep media canvases and editor geometry independent. */
:root {
  --page-gutter: clamp(1rem, 3vw, 2.5rem);
  --layout-line: #e9e7ef;
  color-scheme: light;
}
body { -webkit-font-smoothing: antialiased; }
body > main { min-width: 0; max-width: 1120px; padding: 2.5rem var(--page-gutter) 5rem; }
body > .topbar { padding: .9rem var(--page-gutter); gap: 1rem 1.5rem; }
.topbar nav { gap: .3rem .45rem; font-size: .86rem; }
.topbar nav a { padding: .4rem .55rem; border-radius: 7px; line-height: 1.4; }
.topbar nav a:hover { background: #f4f2fc; }
.topbar .identity { margin: 0; font-size: .78rem; }
main > h1, .page-heading h1, body.studio .masthead h1,
body.studio .ready-library-hero h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.65rem);
  line-height: 1.15;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
  margin: .5rem 0 1rem;
}
main > h2 { font-size: 1.35rem; margin: 2rem 0 1rem; }
main > p { max-width: 75ch; }
main > form, main > section, main > div { min-width: 0; }
main :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button, .button { line-height: 1.4; }
button:disabled { cursor: not-allowed; opacity: .55; }
main > details { margin: 1rem 0; padding: 1rem 1.2rem; border: 1px solid var(--layout-line); border-radius: 12px; }
main > details > summary { cursor: pointer; font-weight: 600; }
main > details[open] > summary { margin-bottom: 1rem; }
body.studio .masthead, body.studio .ready-library-hero { padding: 2.5rem 0 1.25rem; margin-bottom: 1.5rem; }
body.studio .lede, body.studio .ready-library-hero > p:last-child { max-width: 65ch; font-size: 1rem; line-height: 1.65; }
.permission-card {
  padding: clamp(1rem, 2.5vw, 1.75rem);
  border: 1px solid var(--layout-line);
  border-radius: 14px;
  margin: 1rem 0;
  background: #fff;
}
.permission-card h2 { margin-top: 0; font-size: 1.25rem; }
.permission-card p { overflow-wrap: anywhere; }
.ready-media-library .permission-card > details { padding: .8rem 0; border-top: 1px solid var(--layout-line); }
.ready-media-library .permission-card > details > summary { cursor: pointer; font-size: .92rem; }
.ready-media-library .permission-card > details > summary::marker { color: var(--accent); }
.library-source-tree { padding-left: 1.25rem; }
.library-source-tree li { padding: .25rem 0; overflow-wrap: anywhere; }
.ready-media-library .permission-card > h2 { font-size: .82rem; letter-spacing: .08em; }
.ready-media-library .permission-card > p { font-size: .92rem; color: var(--muted); }
body.studio .studio-draft { border-radius: 12px; }
body.studio .studio-draft-grid { gap: 1rem; }
.page-heading { margin-bottom: 2rem; }
.back-link { display: inline-block; margin-bottom: 1.5rem; color: var(--muted); font-size: .88rem; text-decoration: none; }
.back-link:hover { color: var(--accent); text-decoration: underline; }
.page-eyebrow { margin: 0; color: var(--accent); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.page-description { color: var(--muted); margin: 0; font-size: 1rem; }
.page-notice { padding: 1rem; border: 1px solid #dfca90; border-radius: 10px; background: #fffaed; overflow-wrap: anywhere; }
.file-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.file-list-heading h2 { margin: 0; font-size: 1rem; }
.file-list-heading > span { color: var(--muted); font-size: .8rem; }
.permission-file-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.permission-file-card { border: 1px solid var(--layout-line); border-radius: 14px; background: #fff; box-shadow: 0 2px 8px #2417b805; }
.permission-file-form { padding: 1.3rem 1.5rem; margin: 0; }
.permission-file-title { display: flex; align-items: flex-start; gap: .9rem; min-width: 0; }
.permission-file-title h3 { margin: .1rem 0 0; font-size: 1rem; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.file-type { flex-shrink: 0; border: 1px solid #e3defa; background: #f5f3ff; color: var(--accent); padding: .4rem .5rem; border-radius: 6px; font-size: .6rem; letter-spacing: .06em; font-weight: 700; }
.permission-file-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid #f0eef4; }
.permission-likeness { display: inline-flex; align-items: center; gap: .6rem; font-size: .88rem; cursor: pointer; }
.permission-likeness input { margin: 0; width: 1.1rem; height: 1.1rem; accent-color: var(--accent); flex-shrink: 0; }
.permission-file-actions button { padding: .7rem 1rem; border-radius: 8px; font-size: .86rem; min-height: 44px; }
.page-footer { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--layout-line); font-size: .85rem; }
.page-footer p { color: var(--muted); max-width: 68ch; margin: 0 0 .8rem; }
.page-footer a { color: var(--accent); text-underline-offset: 3px; }
.page-empty { padding: 2rem; text-align: center; color: var(--muted); border: 1px dashed var(--layout-line); border-radius: 12px; }
body > main > .permission-page { margin: 0 auto; padding: 0; }
.snd .page-heading h1 { color: var(--text); }
.snd h2 { font-size: 1.3rem; margin: 2rem 0 1rem; }
.snd h2 small { display: inline-block; margin-left: .5rem; font-size: .85rem; }
.snd > p { max-width: 74ch; color: var(--muted); font-size: .94rem; }
.snd > form { padding: 1rem; background: #f7f6fb; border: 1px solid var(--layout-line); border-radius: 12px; align-items: center; margin: 1.5rem 0; }
.snd > form > a { font-size: .86rem; padding: .5rem; }
.snd > form > input { min-width: 0 !important; }
.saved-song-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.saved-song-card { border: 1px solid var(--layout-line); border-radius: 12px; padding: 1.25rem; }
.saved-song-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.saved-song-heading > div { min-width: 0; }
.saved-song-heading h3 { margin: 0 0 .2rem; font-size: 1.1rem; overflow-wrap: anywhere; }
.saved-song-heading p { margin: 0; color: var(--muted); font-size: .88rem; }
.saved-song-heading a.button { font-size: .88rem; }
.saved-song-status { font-size: .82rem; margin: 1rem 0; }
.saved-song-card details { border-top: 1px solid var(--layout-line); padding-top: .7rem; font-size: .82rem; }
.saved-song-card summary { cursor: pointer; color: var(--muted); }
.saved-song-card dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1rem; }
.saved-song-card dt { color: var(--muted); }
.saved-song-card dd { margin: 0; overflow-wrap: anywhere; }
.reel-steps { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.5rem 0 0; counter-reset: reel-step; }
.reel-steps li { counter-increment: reel-step; padding: .4rem .65rem; border: 1px solid var(--layout-line); border-radius: 7px; color: var(--muted); font-size: .8rem; }
.reel-steps li::before { content: counter(reel-step) ". "; }
.reel-steps li[aria-current] { color: var(--accent); background: #f4f1ff; border-color: #dcd5fb; font-weight: 600; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 1100px) {
  body > .topbar, body.studio > .topbar { display: grid; grid-template-columns: 1fr auto; gap: .7rem 1rem; }
  .topbar .brand { grid-column: 1; grid-row: 1; }
  .topbar .identity { grid-column: 2; grid-row: 1; }
  .topbar nav { grid-column: 1 / -1; grid-row: 2; width: 100%; }
}
@media (max-width: 640px) {
  body > main { padding-top: 1.5rem; }
  body > .topbar { padding: .75rem 1rem; }
  .topbar nav { gap: .2rem; font-size: .8rem; }
  .topbar nav a { padding: .35rem .45rem; }
  .topbar .identity > span { display: none; }
  .snd > form > input { flex-basis: 100% !important; }
  .snd > form > button { min-height: 44px; }
  .permission-file-form { padding: 1rem; }
  .permission-file-title { gap: .65rem; }
  .permission-file-actions { align-items: stretch; flex-direction: column; }
  .permission-file-actions button { width: 100%; }
  .permission-likeness { min-height: 44px; }
  .back-link { margin-bottom: 1.1rem; }
}