/* ---------- v6.1: layout (Play above the chart, sound/volume/share below), bigger desktop chart, readability ---------- */
:root { --dim:#b4bbe3; }

/* header: logo 1.5x, title row never wraps the badge onto its own line */
h1 { flex-wrap:nowrap; gap:8px; font-size:clamp(19px,6.2vw,30px); }
h1 .logo { width:45px; height:45px; flex:0 0 auto; }
h1 .ttl { white-space:nowrap; }
.tag { flex:0 0 auto; font-size:10.5px; }
@media (max-width:360px) { h1 { gap:6px; font-size:19px; } h1 .logo { width:38px; height:38px; } }

/* tabs: taller tap targets on phones */
.tab { height:44px; font-size:14px; }

/* quotes: lavender italic serif + small attribution on its own line; reserved height so the page doesn't jump */
.quotebox { min-height:86px; display:flex; align-items:center; justify-content:center; }
#tab-sky .zenq, #tab-mix .zenq { font-family:'Noto Serif','DejaVu Serif',Georgia,serif; font-style:italic; font-size:13px; line-height:1.5; color:#dccdff; opacity:1; margin:10px 14px 0; padding-top:9px; position:relative; max-width:520px; text-align:center; }
#tab-sky .zenq:before, #tab-mix .zenq:before { content:""; position:absolute; left:34%; right:34%; top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(190,160,255,.7),transparent); }
.zenq .qt { display:block; }
.zenq .qa { display:block; font-family:'Ubuntu','Fira Sans','Segoe UI',system-ui,sans-serif; font-style:normal; font-size:12px; color:#c9c4ef; margin-top:3px; letter-spacing:.2px; }
#tab-mix .mixtag { margin:12px auto 0; max-width:560px; }
#tab-mix .mixtag .la, #tab-mix .mixtag .lb { text-shadow:none; }

/* place + date row: place on its own row on phones, date/time + Now underneath (nothing clipped) */
#tab-sky .controls { padding:12px 0 6px; }
.citywrap { position:relative; flex:1 1 100%; display:flex; }
.citywrap:before { content:"📍"; position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:14px; pointer-events:none; z-index:1; }
.citywrap.nopin:before { display:none; }
#tab-sky .controls #city { flex:1 1 auto; max-width:none; width:100%; height:44px; padding:0 10px 0 34px; font-size:14px; }
.citywrap.nopin #city { padding-left:10px !important; }
.whenrow { flex:1 1 100%; display:flex; gap:8px; min-width:0; }
#tab-sky .controls #when { flex:1 1 auto; min-width:0; height:44px; padding:0 10px; font-size:14px; }
#tab-sky .controls #now { flex:0 0 auto; height:44px; padding:0 16px; }
.placenote { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 10px; font-size:12px; color:#bcd3ec; opacity:1; margin:-2px 6px 0 12px; }
@media (min-width:520px) {
  .citywrap { flex:0 1 200px; }
  .whenrow { flex:1 1 0; }
}

/* Play above the chart */
.playrow { display:flex; margin:4px 0 8px; }
.playrow #play { flex:1; height:50px; font-size:19px; }
#sound-hint { padding:0 10px 4px; }

/* below the chart: sound selector, volume, share */
#tab-sky .controls.below { padding:8px 0 4px; gap:10px; }
.sharerow { flex:1 1 100%; display:flex; }
.sharerow #share { flex:1; height:46px; border-radius:24px; font-size:15px; transition:background .2s, border-color .2s; }
#share.copied { border-color:#d8ffa8; color:#eaffd0; background:linear-gradient(rgba(180,255,120,.28),rgba(120,220,80,.12) 50%,rgba(90,200,60,.08) 51%,rgba(160,240,110,.2)); }
.seg.big .tx small { font-size:12px; }

/* volume: bigger knob and hit area */
.vol { padding:2px 6px 0; font-size:13px; }
input.volrange { height:34px; border:0; box-shadow:none; background:transparent; cursor:pointer; }
input.volrange::-webkit-slider-runnable-track { height:10px; border-radius:6px; border:1px solid rgba(255,255,255,.35); box-shadow:inset 0 1px 2px rgba(0,0,0,.4);
  background:linear-gradient(90deg,#86d22a 0%,#b8ef62 var(--p,80%),rgba(255,255,255,.12) var(--p,80%)); }
input.volrange::-moz-range-track { height:10px; border-radius:6px; border:1px solid rgba(255,255,255,.35); background:linear-gradient(90deg,#86d22a 0%,#b8ef62 var(--p,80%),rgba(255,255,255,.12) var(--p,80%)); }
input.volrange::-webkit-slider-thumb { width:30px; height:30px; margin-top:-11px; }
input.volrange::-moz-range-thumb { width:30px; height:30px; }
.vol .vval { opacity:1; color:#d6ebff; width:40px; }

/* readability: lighter small texts (>= 4.5:1 on the dark blue) and >= 12px */
#info { color:#bcd3ec; font-size:13px; }
footer { color:#bcd3ec; font-size:12.5px; }
.extras { display:block; margin-top:6px; color:#bcd3ec; font-size:12px; opacity:.95; }
#tab-mix .mixinfo, #tab-mix .fadelabel, #tab-mix .astatus, .fine, .sub, .form label { color:#c3cdee; }
.astatus[data-state=running], #audio-status[data-state=running] { color:#d8ffa8; }
.opt { font-size:12px; }
.zen-attr { font-size:12px; opacity:1; color:#c9c4ef; }
.tznote { font-size:12px; color:#bcd3ec; }
.mixtz { flex:1 1 100%; margin-top:-4px; }
.kofi-foot .url { display:inline-block; font-size:12px; color:#e8f4ff; opacity:1; margin-top:6px; padding:2px 10px; border-radius:10px; background:rgba(4,14,34,.55); }
.kofi-foot .love { color:#f0f8ff; text-shadow:0 1px 3px rgba(0,10,30,.85); }
.fine { font-size:12.5px; }

/* Sky Mix date fields: A and B stacked on phones so the full date and time fit */
@media (max-width:560px) {
  #mix-form .mixdate { flex:1 1 100%; }
  #mix-form .mixdate label { flex-direction:row; align-items:center; gap:10px; }
  #mix-form .mixdate label > span { flex:0 0 auto; min-width:92px; }
  #mix-form .mixdate input { flex:1 1 auto; min-width:0; }
}
#mix-form input[type=datetime-local] { height:44px; font-size:14px; padding:0 10px; }
#mix-form select { height:44px; }

/* desktop: a much bigger chart; controls stay a comfortable width */
@media (min-width:769px) {
  #tab-sky { max-width:1100px; }
  #tab-sky > .tagline, #tab-sky > .quotebox, #tab-sky > .controls, #tab-sky > .playrow, #tab-sky > #sound-hint { max-width:560px; margin-left:auto; margin-right:auto; }
  #tab-sky > .controls.below { max-width:560px; margin:0 auto; }
  #tab-sky > main { padding:8px 0; }
  .quotebox { min-height:70px; }
}

/* headphones tag */
.hp-tag { width:fit-content; margin:6px auto 6px; padding:3px 12px; border-radius:999px; font-size:12.5px; color:#d9ecff; background:rgba(120,170,255,.12); border:1px solid rgba(160,200,255,.28); text-align:center; }