/* One vintage listening-room palette across every page and shared surface. */
:root { --paper:#f3e8d2; --white:#fff7e5; --ink:#3d4937; --muted:#61664d; --green:#536d50; --line:#d4bd91; --gold:#a47b3e; }
body { background:#e4cfaa; color:var(--ink); }
.preview-note { background:#e7d5b3; color:#68583d; }
.preview-note span { color:#4f5e42; }
.site-header {
  background: repeating-linear-gradient(2deg,transparent 0 12px,#fff1d018 13px 14px),linear-gradient(90deg,#e9d8b8,#f6ecd4 45%,#ddc49a);
  border-bottom:3px solid #987140;
  box-shadow:inset 0 2px 0 #fff4d9,inset 0 -2px 0 #e7c58a;
}
body { grid-template-rows:20px 92px minmax(0,1fr) 26px; }
.site-header .header-inner { padding-left:18px; padding-right:22px; }
.site-header .brand { width:clamp(210px,22vw,270px); height:84px; flex-shrink:0; }
.site-header .brand-mark { width:100%; height:100%; object-fit:contain; object-position:left center; filter:none; }
.site-header .nav a { color:#47513c; border:1px solid transparent; }
.site-header .nav a:hover { background:#efdfb9; border-color:#c4a36a; }
.site-header .nav a[aria-current=page] { background:linear-gradient(#efe4c7,#dfcca3); border-color:#b39761; color:#3e5139; box-shadow:inset 0 1px 0 #fff9e6,0 2px 0 #b39461; }
.header-meadow { height:37px; width:420px; opacity:.9; }
.site-header .menu-toggle { background:#eadbbc; border:1px solid #b79a67; color:#526044; box-shadow:inset 0 1px 0 #fff3d6; }
.app-shell { background:#ead9b9; }
body[data-page] #main {
  background:linear-gradient(#fff8e74d,#fff8e74d),url('/assets/prototype/vintage-listening-wall.png') center 70% / cover;
  background-color:#f3e7d0;
  box-shadow:inset 0 0 0 4px #ad773f,inset 0 0 0 7px #edc78b,inset 0 0 0 9px #98703d;
}
.portal-hero { background:#f5e8c9; }
.portal-hero:after { background:linear-gradient(90deg,#fff1d5 5%,#fff1d5 27%,#fff1d5ed 42%,#fff1d578 60%,transparent 78%); }
.portal-copy .portal-message { color:#3d583d; }
.portal-copy .portal-message-detail { color:#4e5940; }
.portal-panel { background:#fff4dff5; }
.portal-panel>h2 { background:#e8d6ac; color:#45513a; }
.portal-panel h2 small,.news-date,.news-type,.news-body,.news-more { color:#62664a; }
.guild-total { color:#53663e; }
.panel-tabs { background:#e8d6ac; }
.shared-library .track-row.selected { background:#e0dfb8; }
.shared-library .track-meta,.shared-library .playing-label { color:#5c6649; }
.record:after { background:#f4e6c9; }
.mini-player { background:#f8edd5f5; border-color:#b89b66; }
.mini-progress { background:#ddcca8; }
.mini-progress div { background:#8b9b61; }
.icon-button { background:#f5ebd4; border-color:#c3ad7e; color:#536347; }
.icon-button.primary { background:#5e7856; border-color:#3f5b3d; color:#fff6dd; }
.btn { background:#5d7a54; border-color:#4b653f; box-shadow:0 3px 0 #3c5432; }
.btn:hover { background:#4f6d47; box-shadow:0 2px 0 #3c5432; }
.app-footer { background:linear-gradient(#e9d8b5,#dac099); border-top:2px solid #a17a45; box-shadow:inset 0 1px 0 #fff0ce; }
.app-footer,.app-footer button,.app-footer a { color:#5d5b3e; }
.usage-page { margin:0 auto; padding:24px 28px 30px; border:2px solid #ac884f; border-radius:15px; background:#fff6e4f5; box-shadow:inset 0 0 0 3px #f0d7a5,0 4px 12px #68482c26; }
.usage-step,.usage-terms { border-color:#d3ba89; }
.step-num { color:#a17a40; }
.usage-lead { color:#61694d; }
#info-dialog { background:#fff5df; border-color:#ad8951; box-shadow:inset 0 0 0 3px #efd4a0,0 15px 80px #49341c66; }
#info-dialog::backdrop { background:#3e35225e; }
.dialog-bar { background:#e9d6af; border-color:#c6a977; color:#5c5c3e; }
.toast { background:#4b6145; color:#fff7df; border:1px solid #b59b65; }
:focus-visible { outline-color:#9f7134; }
.top-panels { grid-template-columns:1.05fr 1fr; }
.usage-page>.usage-terms { margin:0; padding:0; border-top:0; }
.usage-procedure { margin-top:30px; padding-top:25px; border-top:2px solid #c8aa72; }
.usage-procedure>h2 { font-size:22px; line-height:1.6; margin-bottom:20px; }
.usage-step h3 { font-size:21px; line-height:1.6; margin-bottom:10px; }
@media(max-width:760px) {
  body { grid-template-rows:18px 72px minmax(0,1fr) 21px; }
  .site-header .header-inner { padding-left:10px; padding-right:14px; gap:8px; }
  .site-header .brand { width:216px; max-width:calc(100% - 48px); height:66px; }
  body[data-page] #main { box-shadow:inset 0 0 0 2px #ad773f,inset 0 0 0 4px #edc78b; }
  .header-meadow { width:140px; height:20px; right:0; max-width:calc(100% - 224px); }
  .site-header .nav { background:#f8ecd2; border-color:#ae8b55; }
  .portal-hero:after { background:linear-gradient(90deg,#fff1d5fa,#fff1d5ef 38%,#fff1d5b3 76%,#fff1d54d); }
  .top-panels { background:#fff4df; }
  .panel-tabs { background:#e8d6ac; }
  .panel-tabs button[aria-pressed=true] { background:#fff4df; color:#45553a; }
  .guild-panel>h2 { background:transparent; }
  .usage-page { padding:17px 14px 22px; border-radius:11px; }
  .top-panels { grid-template-columns:1fr; }
  .news-row { grid-template-columns:83px minmax(0,1fr); }
  .news-content { display:block; grid-column:1 / -1; width:100%; min-width:0; }
  .news-title,.news-body { width:100%; max-width:none; overflow-wrap:anywhere; }
  .news-body { margin-top:5px; }
  .news-type { justify-self:start; padding-left:7px; padding-right:7px; }
  .usage-procedure { margin-top:22px; padding-top:18px; }
  .usage-procedure>h2 { font-size:18px; margin-bottom:15px; }
  .usage-step h3 { font-size:17px; margin-bottom:6px; }
}

/* Sharing controls after removal of the like button. */
.social-row { justify-content: flex-end; }

/* Lightly shaded artwork, raised title and a full-window light display. */
.radio-room .player-scene>img { opacity:1; filter:none; }
.radio-room .player-scene:after { display:block; background:linear-gradient(#10252238,#10252261); }
.radio-room .scene-title { top:14px; bottom:auto; margin:0; font-size:clamp(20px,2vw,28px); line-height:1.45; text-shadow:0 1px 3px #253428cc,0 2px 8px #25342899; }
.radio-room .scene-title { z-index:2; }
.radio-room .visualizer { inset:0; height:100%; max-height:none; min-height:0; opacity:1; }
@media(max-width:760px) {
  .radio-room .scene-title { top:9px; left:10px; right:10px; font-size:17px; line-height:1.4; }
}
@media(max-width:760px) and (max-height:740px) {
  .radio-room .scene-title { top:7px; bottom:auto; font-size:16px; }
}

/* Put sharing beside MML copy; give the saved room to the radio display. */
.radio-room .player-column { grid-template-rows:minmax(0,1fr) auto; }
.radio-room .radio-face { grid-template-columns:minmax(36px,.75fr) minmax(0,4fr) minmax(36px,.75fr); gap:12px; }
.radio-room .mml-meta { min-width:0; }
.radio-room .mml-meta .social-right { justify-content:flex-end; flex-wrap:wrap; gap:12px; margin-top:3px; }
.radio-room .mml-meta .social-action { padding:3px 0; }
@media(max-width:760px) {
  .radio-room .radio-face { grid-template-columns:24px minmax(0,1fr) 24px; gap:6px; }
  .radio-room .mml-meta .social-right { gap:7px; }
  .radio-room .mml-meta .social-action { font-size:11px; gap:3px; }
}
@media(max-width:360px) {
  .radio-room .radio-face { grid-template-columns:18px minmax(0,1fr) 18px; gap:5px; }
}

/* Production layout has no prototype banner. */
body { grid-template-rows:92px minmax(0,1fr) 26px; }
@media(max-width:760px) { body { grid-template-rows:72px minmax(0,1fr) 21px; } }
.catalogue-status { padding:15px; font-size:13px; line-height:1.8; }

/* Use the desktop room width, with the display taking the remaining height. */
@media(min-width:761px) {
  :root { --shelf:clamp(264px,17vw,360px); }
  .site-header .nav { gap:clamp(2px,.7vw,18px); min-width:0; }
  .site-header .nav a { padding-inline:clamp(8px,1vw,18px); white-space:nowrap; }
  .radio-room { max-width:2400px; }
  .radio-room .listening-room {
    width:100%;
    height:100%;
    margin:auto;
  }
  .radio-room .player-column { max-width:none; height:100%; min-height:480px; }
  .radio-room .player-card { grid-template-rows:minmax(140px,1fr) auto; }
  .radio-room .player-scene { aspect-ratio:auto; }
  .radio-room .player-intro { max-height:4.8em; overflow:auto; }
  .portal-top { max-width:2400px; grid-template-rows:minmax(0,1fr) clamp(244px,28dvh,340px); }
  .reports-page { max-width:1440px; }
  .usage-page { max-width:1120px; }
  body[data-page=playlist] #main { overflow:auto; }
}
@media(min-width:761px) and (max-width:1100px) {
  .site-header .brand { width:210px; }
  .site-header .header-inner { gap:10px; padding-inline:14px; }
  .site-header .nav a { font-size:13px; padding-inline:7px; }
  .portal-copy .portal-message { white-space:normal; }
}
@media(min-width:761px) and (max-height:650px) {
  .portal-top { grid-template-rows:minmax(220px,1fr) 200px; }
  body[data-page=top] #main { overflow:auto; }
}
@media(min-width:761px) and (max-height:800px) {
  .radio-room .player-column { gap:8px; }
  .radio-room .player-main { padding:6px 12px; }
  .radio-room .transport { margin:3px 0 5px; }
  .radio-room .transport .icon-button { width:36px; height:36px; }
  .radio-room .transport .play-main { width:42px; height:42px; }
  .radio-room .player-preferences { padding-top:4px; }
  .radio-room .player-intro { font-size:12px; line-height:1.5; margin-top:5px; padding-top:4px; }
  .radio-room .player-status:empty { display:none; }
  .radio-room .mml-panel { padding:7px 12px; }
  .radio-room .mml-copy { min-height:36px; padding:5px 14px; }
  .radio-room .mml-panel .usage-link { margin-top:3px; }
}

/* Keep the complete desktop composition within the approved 1920 by 1200 view. */
@media(min-width:761px) {
  html { display:grid; place-items:center; background:#d8bf98; }
  body { position:relative; width:100%; max-width:1920px; max-height:1200px; }
  :root { --shelf:clamp(264px,17vw,326px); }
  .site-header .nav { gap:clamp(2px,.7vw,13.44px); }
  .radio-room .radio-face { display:flex; align-items:stretch; }
  .radio-room .radio-speaker {
    flex:0 0 auto;
    height:100%;
    width:auto;
    aspect-ratio:.32;
    max-width:210px;
    min-width:28px;
  }
  .radio-room .player-scene { flex:1; min-width:0; }
  .mini-player {
    position:fixed;
    left:calc(max(0px,(100vw - 1920px) / 2) + var(--shelf));
    right:max(0px,calc((100vw - 1920px) / 2));
    bottom:calc(26px + max(0px,(100dvh - 1200px) / 2));
  }
  .toast { position:absolute; max-width:calc(100% - 24px); }
  .portal-top { grid-template-rows:minmax(0,1fr) clamp(244px,28dvh,336px); }
}
@media(max-width:380px) {
  .radio-room .mml-panel { grid-template-columns:minmax(0,1fr); }
  .radio-room .mml-meta { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:3px 8px; text-align:left; }
  .radio-room .mml-meta .social-right { margin-top:0; }
  .radio-room .player-preferences { flex-wrap:wrap; }
}
@media(max-width:760px) and (max-height:600px) {
  body[data-page=top] #main { overflow:auto; }
  .portal-top { height:auto; grid-template-rows:240px 180px; }
}
@media(min-width:761px) {
  .radio-room .radio-speaker { max-width:min(210px,14%); }
}
@media(min-width:761px) and (max-width:1000px) {
  .radio-room { height:auto; min-height:100%; align-content:start; }
  .radio-room .listening-room { height:auto; }
  .radio-room .player-column { height:auto; min-height:0; }
  .radio-room .player-card { grid-template-rows:auto auto; }
  .radio-room .radio-face { display:grid; grid-template-columns:36px minmax(0,1fr) 36px; gap:8px; }
  .radio-room .radio-speaker { width:100%; height:auto; max-width:none; min-width:0; aspect-ratio:auto; }
  .radio-room .player-scene { aspect-ratio:4 / 3; }
  .radio-room .player-preferences { flex-wrap:wrap; }
}
@media(max-width:760px) {
  .radio-room { height:auto; min-height:100%; align-content:start; }
  .radio-room .listening-room { height:auto; }
  .radio-room .player-column { height:auto; min-height:0; grid-template-rows:auto auto; }
  .radio-room .player-card { grid-template-rows:auto auto; }
  .radio-room .player-scene { height:auto; min-height:140px; aspect-ratio:4 / 3; }
}

/* Optional music-library introduction, kept compact beside the copy controls. */
.catalogue-guide { margin-top:6px; font-size:12px; line-height:1.7; }
.catalogue-guide summary { cursor:pointer; }
.catalogue-guide p { margin:6px 0 0; overflow-wrap:anywhere; }

/* Keep the player and copy controls before the library introduction. */
.catalogue-page { height:100%; }
@media(min-width:1001px) {
  .catalogue-page > .radio-room { min-height:480px; }
}
.catalogue-intro { margin-top:16px; min-width:0; padding:14px 18px; border:1px solid #c8ad73; border-radius:12px; background:#fff5ddec; color:#3c513e; }
.track-introduction { overflow-wrap:anywhere; }
.track-introduction h2 { margin:0 0 6px; font-size:16px; }
.catalogue-intro h1 { margin:0 0 6px; font-size:clamp(18px,2vw,24px); line-height:1.5; overflow-wrap:anywhere; }
.catalogue-intro p { margin:0 0 6px; font-size:14px; line-height:1.8; }
.catalogue-intro a { font-size:13px; text-decoration:underline; text-underline-offset:3px; }
@media(max-width:760px) {
  .catalogue-intro { margin-top:12px; padding:12px; }
}

/* Keep the requested two headline lines; narrow screens wrap only at phrases. */
.portal-message .hero-line { display:block; }
.portal-message .copy-phrase, .portal-message-detail .copy-phrase { max-width:100%; vertical-align:top; }
@media(max-width:760px) {
  .portal-copy .portal-message { font-size:clamp(18px,5vw,22px); line-height:1.6; }
}