/* 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; }