/* ============================================================
   RadioGrub — editor.css
   /dashboard/station/<id>, the profile editor. Plain form styling on
   the shared tokens; the same field look as /login and /about.
   ============================================================ */

#view-editor .wrap{ max-width:880px; margin:0 auto; padding:22px 18px 130px; }
#view-editor .dashHead a{ color:var(--accentText); font-weight:900; text-decoration:none; }

.edNotice{
  background:var(--warmSoft); border:1px solid rgba(255,198,26,.5); border-radius:14px;
  padding:12px 14px; margin-bottom:16px; font-size:13.5px; font-weight:650; line-height:1.55;
}

.edForm fieldset{ min-width:0; }
.edSection legend{ padding:0; margin-bottom:10px; float:left; width:100%; }
.edSection legend + *{ clear:both; }
.edSection legend h2{ margin:0; }

.edSample{
  display:flex; gap:10px; align-items:flex-start; margin:0 0 14px;
  background:var(--warmSoft); border:1px solid rgba(255,198,26,.5); border-radius:12px; padding:10px 12px;
  font-size:13px; font-weight:650; line-height:1.5;
}

.edField{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; min-width:0; }
.edLabel{ font-size:13px; font-weight:900; }
.edHint{ display:block; font-size:12px; color:var(--muted2); font-weight:700; line-height:1.45; }
.edErr{ font-size:12.5px; color:var(--accent2); font-weight:850; }

#view-editor input[type=text], #view-editor input[type=email], #view-editor input[type=tel],
#view-editor input[type=url], #view-editor input[type=number], #view-editor input[type=time],
#view-editor input:not([type]), #view-editor select, #view-editor textarea{
  width:100%; border:1.5px solid var(--line); border-radius:12px; padding:10px 12px;
  font-size:15px; font-family:inherit; background:var(--surface2); color:var(--text); outline:none;
}
#view-editor input:focus, #view-editor select:focus, #view-editor textarea:focus{
  border-color:var(--accentLine); box-shadow:0 0 0 4px var(--accentSoft); background:var(--surface2);
}
#view-editor textarea{ resize:vertical; }

.edRow{ display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
.edRow3{ grid-template-columns:repeat(3,1fr); }
.edLinkRow{ grid-template-columns:1fr 2fr auto; align-items:center; }
.edSub{ font-size:14px; font-weight:950; margin:4px 0 10px; }

.edCheck{ display:flex; gap:10px; align-items:flex-start; margin:0 0 14px; font-size:14px; }
.edCheck input{ margin-top:4px; }

.edGeo{ border-top:1px solid var(--line2); padding-top:12px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.edGeoBadge{ font-size:12px; font-weight:950; padding:4px 10px; border-radius:999px; background:var(--accentSoft); color:var(--accentText); border:1px solid var(--accentLine); }
.edGeoBadge.off{ background:var(--surface2); color:var(--muted); border-color:var(--line); }
.edAdvanced{ width:100%; }
.edAdvanced summary{ cursor:pointer; font-weight:850; font-size:13px; color:var(--muted); margin-bottom:10px; }

.edModes{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.edPill{ display:inline-flex; gap:8px; align-items:center; border:1.5px solid var(--line2); border-radius:999px; padding:8px 14px; font-weight:850; font-size:13.5px; cursor:pointer; }
.edPill:has(input:checked){ border-color:var(--accentText); background:var(--accentSoft); }

.edHours{ width:100%; border-collapse:collapse; margin-bottom:12px; }
.edHours th{ text-align:left; font-size:13.5px; font-weight:900; padding:8px 10px 8px 0; width:110px; vertical-align:top; }
.edHours td{ padding:6px 0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.edHours tr + tr{ border-top:1px solid var(--line2); }
.edRange{ display:inline-flex; gap:6px; align-items:center; }
.edRange input[type=time]{ width:auto; padding:7px 8px; font-size:14px; }

.edArtRow{ display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start; }
.edArtPreviews{ display:flex; gap:14px; }
.edArtPreview{ width:128px; display:flex; flex-direction:column; gap:6px; font-size:11.5px; font-weight:800; color:var(--muted2); text-align:center; }
.edArtControls{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; min-width:0; width:100%; }
.edArtControls .edField{ width:100%; margin-bottom:0; }
.edFileBtn{ cursor:pointer; }

.edMenuImage{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; margin-bottom:14px; }
.edMenuImage .edField{ width:100%; }
.edMenuPreview img{ max-width:260px; max-height:320px; border-radius:12px; border:1px solid var(--line2); display:block; }
.edMenuSection{ border:1px solid var(--line2); border-radius:14px; padding:12px; margin-bottom:12px; }
.edMenuSection .edRow{ grid-template-columns:1fr auto; align-items:end; }
.edMenuItem{ display:grid; grid-template-columns:1.2fr 90px 2fr auto; gap:8px; align-items:center; margin-bottom:8px; }

.edSaveBar{
  position:sticky; bottom:84px; z-index:5;
  display:flex; gap:10px; align-items:center; justify-content:flex-end; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line2); border-radius:var(--r16); box-shadow:var(--shadow); padding:12px 14px;
}
.edSaveBar #edSaveStatus{ margin-right:auto; }

@media (max-width:720px){
  .edRow, .edRow3, .edLinkRow{ grid-template-columns:1fr; }
  .edArtRow{ grid-template-columns:1fr; }
  .edArtPreview{ width:110px; }
  .edMenuItem{ grid-template-columns:1fr 80px auto; }
  .edMenuItem input:nth-child(3){ grid-column:1 / -1; grid-row:2; }
  .edHours th{ width:auto; display:block; padding-bottom:0; }
  .edHours td{ padding-top:4px; }
  .edSaveBar{ bottom:74px; }
}

/* cover banner: the preview is the real proportion and the real overlap */
.edBanner{ display:flex; flex-direction:column; gap:12px; }
.edBannerPreview{
  position:relative; width:100%; aspect-ratio:3 / 1; min-height:120px;
  border-radius:14px; overflow:visible; margin-bottom:46px;
  background:#0d0d10; border:1px solid var(--line2);
}
.edBannerPreview > .edBannerImg{
  position:absolute; inset:0; width:100%; height:100%; border-radius:14px;
  object-fit:cover; object-position:var(--coverPos, center center);
}
.edBannerPreview--default{
  background:
    radial-gradient(70% 140% at 12% 120%, color-mix(in srgb, var(--cover) 62%, transparent), transparent 62%),
    radial-gradient(55% 120% at 92% -20%, color-mix(in srgb, var(--cover) 30%, transparent), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 34px),
    linear-gradient(135deg, #17171d, #0a0a0c 70%);
}
.edBannerArt{ position:absolute; left:18px; bottom:-40px; width:96px; z-index:1; }
.edBannerArt .rgArt{ box-shadow:0 0 0 4px var(--surface), 0 10px 26px rgba(0,0,0,.5); }