/* ============================================================
   RadioGrub — dashboard.css
   /dashboard. Deliberately plain: this is the frame the real client
   dashboard grows into.
   ============================================================ */

.dashLoading{ padding:60px 0; text-align:center; color:var(--muted); font-weight:800; }

.dashHead{
  display:flex; gap:16px; align-items:center; justify-content:space-between;
  flex-wrap:wrap; margin:8px 0 20px;
}
.dashWho{ display:flex; gap:14px; align-items:center; }
.dashHead h1{ margin:0; font-size:clamp(22px,3vw,30px); font-weight:980; letter-spacing:-.5px; }
.dashHead p{ margin:3px 0 0; font-size:13.5px; }
.dashHeadActions{ display:flex; gap:8px; flex-wrap:wrap; }
/* the light button is base.css's job now — see "ONE BUTTON" */

.dashAvatar{
  width:52px; height:52px; border-radius:50%; object-fit:cover;
  background:var(--surface3); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:950; font-size:17px; letter-spacing:.5px; flex:0 0 auto;
}

.dashGrid{ display:flex; flex-direction:column; gap:16px; }

.dashCard{
  background:var(--surface); border:1px solid var(--line2); border-radius:var(--r20);
  box-shadow:var(--shadow2); padding:20px; margin-bottom:16px;
}
.dashCard h2{ margin:0 0 6px; font-size:17px; font-weight:950; letter-spacing:-.2px; }
.dashCard p{ margin:0 0 10px; }

.dashCardHead{ display:flex; gap:14px; align-items:center; }
.dashArt{ width:64px; flex:0 0 auto; }
.dashTitle h2{ margin:6px 0 2px; font-size:20px; }

.dashPill{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:950; letter-spacing:.08em;
  color:var(--accentText); background:var(--accentSoft); border:1px solid var(--accentLine);
  padding:5px 11px; border-radius:999px;
}
.dashPill.off{ color:var(--muted); background:var(--surface2); border-color:var(--line); }
.dashPill.off .liveDot{ background:var(--muted2); animation:none; }
.dashPill .liveDot{ width:7px; height:7px; border-radius:50%; background:var(--accent); }

.dashStats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0; }
.dashStats .stat{ background:var(--surface2); border:1px solid var(--line2); border-radius:14px; padding:14px; min-width:0; }
.dashStats .statLabel{ font-size:11.5px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--muted2); }
.dashStats .statValue{ font-size:26px; font-weight:980; letter-spacing:-.6px; margin-top:6px; }
.dashStats .statValue.small{
  font-size:14px; font-weight:850; letter-spacing:0; line-height:1.4; margin-top:8px;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}

.dashActions{ display:flex; gap:8px; flex-wrap:wrap; }
.dashSource{ margin:14px 0 0; }
.dashTools h2{ font-size:16px; }

@media (max-width:640px){
  .dashStats{ grid-template-columns:1fr; }
  .dashHead{ align-items:flex-start; }
  .dashHeadActions{ width:100%; }
}

/* the "we're building your station" state */
.dashBuilding h2{ font-size:clamp(22px, 2.6vw, 28px); margin:14px 0 8px; letter-spacing:-.4px; }
.dashBuilding > p{ max-width:66ch; line-height:1.6; }
.dashAppList{ display:grid; grid-template-columns:max-content 1fr; gap:6px 18px; margin:16px 0; padding:14px 16px; background:var(--surface2); border:1px solid var(--line2); border-radius:14px; }
.dashAppList dt{ color:var(--muted2); font-weight:800; font-size:13px; }
.dashAppList dd{ margin:0; font-weight:850; font-size:14px; }

/* ---- /dashboard/admin ---- */
#view-admin .wrap{ max-width:980px; margin:0 auto; padding:22px 18px 130px; }
#view-admin .dashHead a{ color:var(--accentText); font-weight:900; text-decoration:none; }
.adSection{ margin-top:34px; }
.adSection > h2{ margin:0 0 14px; font-size:20px; font-weight:950; letter-spacing:-.3px; }
.adApp h3{ margin:0; font-size:17px; font-weight:950; }
.adAppHead{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.adStatus{ font-size:11px; font-weight:950; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:999px; border:1px solid var(--line3); color:var(--muted); white-space:nowrap; }
.adStatus--pending{ color:var(--text); border-color:var(--accentLine); background:var(--accentSoft); }
.adStatus--approved{ color:#7ee2a8; border-color:rgba(126,226,168,.35); }
.adTableWrap{ overflow-x:auto; border:1px solid var(--line2); border-radius:14px; }
.adTable{ width:100%; border-collapse:collapse; font-size:14px; }
.adTable th{ text-align:left; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted2); padding:10px 14px; border-bottom:1px solid var(--line2); }
.adTable td{ padding:10px 14px; border-bottom:1px solid var(--line2); vertical-align:middle; }
.adTable tr:last-child td{ border-bottom:none; }
.adTable a{ color:var(--accentText); }
.adTable select{ background:var(--surface2); color:var(--text); border:1px solid var(--line3); border-radius:10px; padding:6px 10px; font:inherit; font-weight:800; }

/* ---------- embed your station ---------- */
.dashEmbedCode{ display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; margin-top:12px; }
.dashEmbedCode textarea{
  flex:1 1 320px; min-width:0; resize:vertical;
  font:12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color:var(--text);
  background:var(--surface2); border:1px solid var(--line2); border-radius:12px; padding:10px 12px;
}
.dashEmbedCode textarea:focus-visible{ outline:2px solid var(--accentHot); outline-offset:2px; }
.dashEmbedCode .btn{ align-self:flex-start; }
.dashEmbedLabel{ margin:16px 0 8px !important; font-weight:900; letter-spacing:.06em; text-transform:uppercase; font-size:11.5px; }
.dashEmbedPreview{ display:block; width:100%; max-width:560px; height:96px; border:0; border-radius:16px; background:transparent; }

/* ============================================================
   GET LISTED + PODCAST APPS  (views/getlisted.js)
   A table on a laptop, a stack of rows on a phone — same markup,
   so the status control is never inside a sideways scroll.
   ============================================================ */

.distHead{ margin:22px 0 4px; font-size:12px; font-weight:950; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.distProgress{ font-size:13.5px; color:var(--muted); margin:2px 0 6px; }
.distWarn{
  background:var(--surface2); border:1px solid var(--line2); border-left:3px solid var(--accentHot);
  border-radius:12px; padding:10px 12px; font-size:13.5px; margin:8px 0;
}

/* --- the facts every form asks for --- */
.distFacts{ margin:8px 0 0; display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line2); border-radius:14px; overflow:hidden; }
.distFact{ display:grid; grid-template-columns:160px 1fr; gap:12px; padding:10px 12px; background:var(--surface); align-items:baseline; }
.distFact dt{ font-weight:900; font-size:13px; }
.distFact dd{ margin:0; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.distFact code{
  font-size:12.5px; background:var(--surface2); border:1px solid var(--line2); border-radius:8px;
  padding:3px 7px; max-width:100%; overflow-wrap:anywhere;
}
.distFact.is-missing code{ color:var(--muted2); }
.distHint{ flex:1 1 100%; }
.btn.tiny{ padding:3px 10px; font-size:11.5px; border-radius:999px; }
.distClipboard{ position:fixed; left:-9999px; top:0; opacity:0; }

/* --- the directory table --- */
.distGrid{ margin-top:8px; border:1px solid var(--line2); border-radius:14px; overflow:hidden; }
.distRow{
  display:grid; grid-template-columns:1.1fr 1.7fr .5fr 1.1fr .9fr;
  gap:14px; padding:12px; align-items:start; font-size:13px;
  background:var(--surface); border-top:1px solid var(--line);
}
.distRow:first-child{ border-top:0; }
.distRowHead{ background:var(--surface2); font-weight:950; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.distName{ display:flex; flex-wrap:wrap; gap:6px; align-items:baseline; }
.distName b{ font-size:14px; }
.distHow{ display:block; margin-top:4px; font-size:12px; opacity:.85; }
.distLink{ flex:1 1 100%; font-weight:900; font-size:12.5px; }
.distCost{
  display:inline-block; font-size:11px; font-weight:950; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; background:var(--surface2); border:1px solid var(--line2); color:var(--muted);
}
.distCost.is-free{ color:var(--accentText); background:var(--accentSoft); border-color:var(--accentLine); }
.distStatus{
  width:100%; max-width:220px; font:inherit; font-size:12.5px; padding:6px 8px;
  border-radius:10px; border:1px solid var(--line2); background:var(--surface2); color:inherit;
}
.distDot{ width:9px; height:9px; border-radius:50%; background:var(--muted2); flex:0 0 auto; align-self:center; }
.distDot.is-submitted{ background:#e0a52b; }
.distDot.is-listed{ background:#2fa84f; }
.distDot.is-rejected{ background:#c0392b; }
.distGated{ border:1px solid var(--line2); border-radius:14px; padding:12px; margin-top:8px; background:var(--surface2); }
.distGated p{ margin:6px 0; font-size:13.5px; }

/* --- podcast --- */
.podFeed label{ display:block; font-weight:900; font-size:12.5px; margin:10px 0 6px; }
.podFeedRow{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.podFeedRow input{
  flex:1 1 320px; min-width:0; font:inherit; font-size:13px; padding:9px 11px;
  border-radius:12px; border:1px solid var(--line2); background:var(--surface2); color:inherit;
}
.podReport{ margin-top:12px; }
.podCheckList{ list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.podCheckList li{ display:grid; grid-template-columns:minmax(200px,auto) 1fr; gap:12px; font-size:13px; padding:9px 11px; border-radius:12px; background:var(--surface2); border:1px solid var(--line2); }
.podCheckList li.ok b{ color:#2fa84f; }
.podCheckList li.no b, .podCheckList li.warn b{ color:#c0392b; }
.podChecks.is-ready .distHead{ color:#2fa84f; }
.podPlatforms{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; margin-top:16px; }
.podPlatform{ border:1px solid var(--line2); border-radius:14px; padding:12px; background:var(--surface2); }
.podPlatformHead{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.podPlatformHead b{ flex:1 1 auto; font-size:14.5px; }
.podPlatformHead .distStatus{ flex:0 0 auto; width:auto; }
.podSteps{ margin:8px 0 10px 18px; padding:0; font-size:13px; }
.podSteps li{ margin:4px 0; }
.podPublish{ margin-top:18px; border:1px solid var(--line2); border-radius:14px; padding:12px; }
.podPublish summary{ font-weight:950; cursor:pointer; }
.podForm{ display:flex; flex-direction:column; gap:10px; margin:10px 0; }
.podForm label{ display:flex; flex-direction:column; gap:5px; font-weight:900; font-size:12.5px; }
.podForm input[type=text], .podForm textarea{
  font:inherit; font-size:13px; padding:9px 11px; border-radius:12px;
  border:1px solid var(--line2); background:var(--surface2); color:inherit;
}
.podCheck{ flex-direction:row !important; align-items:center; }
.podNote{ flex:1 1 100%; }

@media (max-width:820px){
  .distRow{ grid-template-columns:1fr; gap:6px; }
  .distRowHead{ display:none; }
  .distRow [role=cell]:nth-child(3){ order:-1; }
  .distFact{ grid-template-columns:1fr; gap:4px; }
  .podCheckList li{ grid-template-columns:1fr; gap:3px; }
}