/* ============================================================
   LOST AMERICANA skin — v123. The first album theme: MGK's
   "lost americana" era (Aug 2025). Vintage Americana at dusk —
   midnight-navy page, bold azure (the album cover's dominant
   blue), aged-paper cards, western poster typography.
   Loaded after styles.css; everything scoped under
   body.lost-americana. ADMIN-ONLY until Jordan releases it.
   ============================================================ */

/* ---- base: midnight navy dusk, cream ink, western display ---- */
body.lost-americana {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(1000px 520px at 50% -10%, rgba(58, 168, 255, .22) 0%, transparent 60%) fixed,
    radial-gradient(700px 500px at 85% 115%, rgba(179, 64, 46, .12) 0%, transparent 55%) fixed,
    #0b1526;
  background-image:
    radial-gradient(1000px 520px at 50% -10%, rgba(58, 168, 255, .22) 0%, transparent 60%),
    radial-gradient(700px 500px at 85% 115%, rgba(179, 64, 46, .12) 0%, transparent 55%);
  background-color: #0b1526;
  color: #f3ead6;
  --accent: #3aa8ff;        /* azure — the era's signature blue */
  --accent-deep: #1a6fd4;   /* darker azure */
  --accent2: #7cc7ff;       /* light azure (gradients) */
  --gold: #e8b33c;          /* star gold */
  --barn: #b3402e;          /* barn red — stamps and small touches */
  --card: #f0e5cb;          /* aged paper */
  --card2: #e7d9b8;         /* darker paper */
  --line: #8a7a5c;          /* dark tan rule */
  --text: #f3ead6;          /* cream on navy */
  --ink: #221c12;           /* ink on paper */
  --muted: #a89a7d;         /* muted cream */
  --ink-muted: #6b5f4c;     /* muted ink on paper */
  --radius: 6px;
  --shadow: 0 8px 28px rgba(0, 0, 0, .5);
  --font-display: 'Rye', 'Oswald', serif;
}
body.lost-americana input, body.lost-americana select,
body.lost-americana textarea, body.lost-americana button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.lost-americana .muted { color: #a89a7d; }

/* ---- navy scrollbars ---- */
body.lost-americana::-webkit-scrollbar { width: 14px; height: 14px; }
body.lost-americana::-webkit-scrollbar-track { background: #0e1c33; }
body.lost-americana::-webkit-scrollbar-thumb { background: #1e3a63; border: 2px solid #0e1c33; border-radius: 7px; }

/* ============================================================
   BUTTONS — azure ticket stubs: solid azure, cream text,
   double-rule vintage edge
   ============================================================ */
.lost-americana .btn {
  background: #1a6fd4;
  color: #fdf6e3;
  border: 1px solid #0e4a96;
  outline: 1px solid rgba(253, 246, 227, .35);
  outline-offset: -4px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 12px 18px;
  min-height: 44px;
}
.lost-americana .btn:hover { background: #3aa8ff; }
.lost-americana .btn:active { background: #0e4a96; transform: none; box-shadow: inset 0 2px 4px rgba(0,0,0,.4); }
.lost-americana .btn.primary { background: #1a6fd4; color: #fdf6e3; outline: 1px solid rgba(253, 246, 227, .35); }
.lost-americana .btn.ghost { background: transparent; color: #7cc7ff; border: 1px solid #3aa8ff; outline: none; box-shadow: none; text-shadow: none; }
.lost-americana .btn.ghost:hover { background: rgba(58, 168, 255, .12); }
.lost-americana .btn.danger { background: #b3402e; border-color: #7e2b1e; color: #fdf6e3; }
.lost-americana .btn:disabled { background: #33445f; color: #8fa0b8; border-color: #22314a; outline: none; box-shadow: none; opacity: 1; text-shadow: none; }
.lost-americana .btn.tiny { font-size: 11px; padding: 5px 10px; min-height: 0; }

/* icon-ish buttons */
.lost-americana .icon-btn, .lost-americana .sheet-x, .lost-americana .wl-popup-x, .lost-americana .modal-x {
  background: #f0e5cb;
  color: #1a6fd4;
  border: 1px solid #8a7a5c;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  min-width: 30px;
  min-height: 28px;
}
.lost-americana .icon-btn:hover, .lost-americana .sheet-x:hover { border-color: #3aa8ff; color: #0e4a96; }

/* ============================================================
   POPUPS — aged-paper cards, navy title bar
   ============================================================ */
.lost-americana .modal { backdrop-filter: none; background: rgba(5, 10, 22, .7); }
.lost-americana .modal-card,
.lost-americana .wl-popup-card {
  position: relative;
  background: #f0e5cb;
  color: #221c12;
  border: 3px double #8a7a5c;
  border-radius: 4px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .6);
  text-align: left;
  animation: none;
}
.lost-americana .modal-card h2, .lost-americana .modal-card h3,
.lost-americana .wl-popup-card h2, .lost-americana .wl-popup-card h3 {
  font-family: 'Rye', serif;
  color: #1a2c4e;
  letter-spacing: .04em;
}
.lost-americana .modal-card .muted, .lost-americana .wl-popup-card .muted { color: #6b5f4c; }

/* ============================================================
   FORM FIELDS — cream inset on paper
   ============================================================ */
.lost-americana input[type="text"], .lost-americana input[type="search"],
.lost-americana input[type="email"], .lost-americana input[type="password"],
.lost-americana input[type="number"], .lost-americana input[type="date"],
.lost-americana select, .lost-americana textarea {
  background: #faf3df;
  color: #221c12;
  border: 1px solid #8a7a5c;
  border-radius: 4px;
  box-shadow: inset 0 2px 4px rgba(90, 70, 40, .18);
}
.lost-americana input::placeholder, .lost-americana textarea::placeholder { color: #9a8a6c; }

/* ============================================================
   NAV TABS — cream text, active tab is an azure brand
   ============================================================ */
.lost-americana .tab {
  color: #cbbd9c;
  font-weight: 600;
  letter-spacing: .06em;
}
.lost-americana .tab:hover { color: #7cc7ff; }
.lost-americana .tab.active {
  background: #1a6fd4;
  color: #fdf6e3;
  border: 1px solid #0e4a96;
  outline: 1px solid rgba(253, 246, 227, .35);
  outline-offset: -4px;
  border-radius: 4px;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

/* ============================================================
   CARDS & PANELS — aged paper, double-rule edge
   ============================================================ */
.lost-americana .card, .lost-americana .panel, .lost-americana .sheet,
.lost-americana .show-card, .lost-americana .thread-card {
  background: #f0e5cb;
  color: #221c12;
  border: 3px double #8a7a5c;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
.lost-americana .card .muted, .lost-americana .panel .muted,
.lost-americana .show-card .muted { color: #6b5f4c; }

/* ============================================================
   HEADER — western wordmark: Rye, cream with azure drop shadow
   ============================================================ */
.lost-americana .brand-name, .lost-americana .site-title {
  font-family: 'Rye', serif;
  color: #f3ead6;
  text-shadow: 2px 2px 0 #1a6fd4, 4px 4px 0 rgba(0, 0, 0, .6);
  letter-spacing: .05em;
}
.lost-americana header, .lost-americana .topbar {
  background: linear-gradient(#12233f, #0b1526);
  border-bottom: 2px solid #1a6fd4;
}

/* ============ LOST AMERICANA HOMEPAGE ============ */
.lost-americana .home-wrap { max-width: 860px; margin: 0 auto; padding: 18px 14px 40px; display: flex; flex-direction: column; gap: 18px; }

/* framed-poster window chrome: navy title bar, cream type, star bullet */
.lost-americana .mac-window {
  background: #f0e5cb;
  border: 3px solid #1a2c4e;
  outline: 1px solid #8a7a5c;
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.lost-americana .mac-titlebar {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(#1e3a63, #12233f);
  border-bottom: 2px solid #3aa8ff;
  padding: 7px 12px;
  font: 700 12px/1.2 Tahoma, Verdana, sans-serif;
  color: #f3ead6;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lost-americana .mac-titlebar::before { content: "\2605"; color: #e8b33c; }
.lost-americana .mac-lights { display: none; }
.lost-americana .mac-filename { flex: 1; text-align: left; }

/* Masthead — dusk sky, big western logo */
.lost-americana .home-masthead-body {
  padding: 30px 18px 34px; text-align: center;
  background:
    radial-gradient(600px 300px at 50% 110%, rgba(232, 179, 60, .25) 0%, transparent 60%),
    linear-gradient(#12233f 0%, #1e3a63 55%, #0b1526 100%);
}
.lost-americana .home-kicker {
  display: inline-block; margin: 0 0 14px; padding: 5px 16px;
  background: #b3402e; color: #fdf6e3; font-weight: 700; letter-spacing: .22em; font-size: 12px;
  transform: rotate(-2deg); border-radius: 2px;
  box-shadow: 2px 2px 0 rgba(0,0,0,.5);
  text-transform: uppercase;
}
.lost-americana .home-logo {
  margin: 0; font-family: 'Rye', serif;
  font-size: clamp(34px, 8vw, 68px); font-weight: 400;
  letter-spacing: .04em; color: #f3ead6;
  text-shadow: 3px 3px 0 #1a6fd4, 6px 6px 0 rgba(0, 0, 0, .65);
  line-height: 1.05;
}
.lost-americana .home-logo span { display: block; font-size: .5em; letter-spacing: .3em; color: #7cc7ff; }
.lost-americana .home-tagline { margin: 16px 0 0; color: #cbbd9c; font-size: 15px; font-style: italic; }

/* home tiles — paper cards on navy */
.lost-americana .home-tile {
  background: #f0e5cb; color: #221c12;
  border: 3px double #8a7a5c; border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
.lost-americana .home-tile:hover { border-color: #3aa8ff; }
.lost-americana .home-tile .tile-label { color: #1a2c4e; font-weight: 800; letter-spacing: .08em; }
.lost-americana .home-tile .tile-sub { color: #6b5f4c; }

/* readme window body */
.lost-americana .home-readme-body { padding: 16px 18px 18px; font-size: 14px; color: #221c12; }
.lost-americana .home-readme-body p { margin: 0 0 10px; }
.lost-americana .home-readme-body p:last-child { margin-bottom: 0; }

/* ticker — azure marquee on navy */
.lost-americana .home-ticker {
  background: #0e1c33; border: 1px solid #1a6fd4; border-radius: 4px;
  color: #7cc7ff; overflow: hidden; white-space: nowrap; padding: 8px 0;
  font-weight: 700; letter-spacing: .1em; font-size: 13px;
}

/* ============================================================
   CHAT — paper bubbles; own messages azure
   ============================================================ */
.lost-americana .chat-bubble, .lost-americana .msg {
  background: #f0e5cb; color: #221c12;
  border: 1px solid #8a7a5c; border-radius: 10px;
}
.lost-americana .chat-bubble.own, .lost-americana .msg.own {
  background: #1a6fd4; color: #fdf6e3; border-color: #0e4a96;
}
.lost-americana .chat-launcher {
  background: #1a6fd4; color: #fdf6e3;
  border: 2px solid #0e4a96;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}

/* ============================================================
   NOTIFICATIONS — paper ledger, azure selection
   ============================================================ */
.lost-americana .notif-list, .lost-americana .notif-item {
  background: #f0e5cb; color: #221c12;
  border-color: #8a7a5c;
}
.lost-americana .notif-item.unread { border-left: 4px solid #3aa8ff; }
.lost-americana .notif-item:hover { background: #e7d9b8; }

/* ============================================================
   FOOTER — EST 19XX as a western brand
   ============================================================ */
.lost-americana .site-footer, .lost-americana footer {
  border-top: 2px solid #1a6fd4;
  background: #0e1c33;
  color: #a89a7d;
}
.lost-americana .est-stamp, .lost-americana .footer-est {
  font-family: 'Rye', serif;
  color: #e8b33c;
  border: 2px solid #e8b33c;
  border-radius: 4px;
  letter-spacing: .18em;
  transform: rotate(-3deg);
}
.lost-americana .foot-donate a, .lost-americana .donate-link {
  color: #7cc7ff;
}

/* ============================================================
   DE-PINK — hard-coded pink glows in the base stylesheet
   become azure. (var(--accent) already flips; these are the
   literal pink values the variable swap can't reach.)
   ============================================================ */
.lost-americana .attend-btn.on { box-shadow: 0 4px 14px rgba(26,111,212,.4); }
.lost-americana .alert-btn.on { background: rgba(58,168,255,.14); }
.lost-americana .chip.active { box-shadow: 0 4px 16px rgba(26,111,212,.45); }
.lost-americana .stat-card.hero { background: linear-gradient(135deg, rgba(26,111,212,.22), #f0e5cb 65%); }
.lost-americana .badge-pick.sel { box-shadow: 0 0 0 1px var(--accent), 0 0 14px rgba(58,168,255,.35); }
.lost-americana .dm-row.unread { box-shadow: 0 0 12px rgba(58,168,255,.22); }
.lost-americana .filters input[type="search"]:focus,
.lost-americana .search-wrap input:focus,
.lost-americana .auth-card input:focus,
.lost-americana .form-grid input:focus,
.lost-americana .form-grid textarea:focus { box-shadow: 0 0 0 3px rgba(58,168,255,.22); }
.lost-americana .home-logo { text-shadow: 3px 3px 0 #1a6fd4, 6px 6px 0 rgba(0, 0, 0, .65); }

/* ============================================================
   My Shows tiles + hero + install banner — v124: aged-paper
   cards, azure icon chips, matching the Lost Americana theme.
   ============================================================ */
.lost-americana .my-subnav-card {
  background: #f0e5cb;
  color: #221c12;
  border: 3px double #8a7a5c;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
.lost-americana .my-subnav-card::before {
  background: radial-gradient(120% 90% at 50% 0%, rgba(26, 111, 212, .14), transparent 70%);
}
.lost-americana .my-subnav-card[data-goto="songs"] { --tile-glow: rgba(26, 111, 212, .18); }
.lost-americana .my-subnav-card[data-goto="states"] { --tile-glow: rgba(26, 111, 212, .18); }
.lost-americana .my-subnav-card:hover { border-color: #3aa8ff; }
.lost-americana .my-subnav-emoji {
  background: linear-gradient(140deg, #3aa8ff, #1a6fd4);
  border: 1px solid #0e4a96;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .3);
  border-radius: 14px;
}
.lost-americana .my-subnav-txt b { color: #1a2c4e; }
.lost-americana .my-subnav-txt small { color: #6b5f4c; }
.lost-americana .songpct {
  background: linear-gradient(160deg, rgba(26, 111, 212, .12), rgba(240, 229, 203, .02)), #f0e5cb;
  color: #221c12;
  border: 3px double #8a7a5c;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
.lost-americana .songpct-num { color: #1a6fd4; }
.lost-americana .songpct-txt .muted { color: #6b5f4c; }
.lost-americana .songpct-bar { background: rgba(26, 111, 212, .15); }
.lost-americana .install-banner {
  background: linear-gradient(135deg, rgba(26, 111, 212, .14), rgba(232, 179, 60, .10));
  border: 1px solid #1a6fd4;
  border-radius: 4px;
  color: #f3ead6;
}