/* =========================================================
   ASF Cycle Plotter Studio v12 (stable, fast, offline-first)
   - Canvas chart with hover + zoom + reset
   - Two big tabs: AUTO PLOT, BUILDER
   - Dark default, switchable
   ========================================================= */

/* ---- Theme tokens (borrow the maintenance page vibe, but lighter on GPU) ---- */
:root{
  --bg0:#000;
  --bg1:#0b0b0d;
  --txt:rgba(255,255,255,.96);
  --muted:rgba(255,255,255,.74);
  --muted2:rgba(255,255,255,.60);
  --border:rgba(255,255,255,.16);
  --border2:rgba(255,255,255,.10);
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.04);
  --shadow: 0 18px 46px rgba(0,0,0,.55);
  --shadow2: 0 10px 22px rgba(0,0,0,.35);
  --accent:#4ea8ff;
  --accent2:#66ffa8;
  --danger:#ff5a6a;
  --warn:#ffd36a;

  --radius:18px;
  --radius2:14px;

  --focus: 0 0 0 3px rgba(78,168,255,.25);
  --maxw: 1060px;
  --plotH: 540px;
}

/* Light */
body[data-theme="light"]{
  --bg0:#f5f7fb;
  --bg1:#ffffff;
  --txt:rgba(15,18,25,.96);
  --muted:rgba(15,18,25,.72);
  --muted2:rgba(15,18,25,.58);
  --border:rgba(15,18,25,.14);
  --border2:rgba(15,18,25,.10);
  --card:rgba(15,18,25,.04);
  --card2:rgba(15,18,25,.03);
  --shadow: 0 18px 40px rgba(10,14,20,.12);
  --shadow2: 0 10px 22px rgba(10,14,20,.10);
  --focus: 0 0 0 3px rgba(78,168,255,.28);
}

/* Base */
*{box-sizing:border-box; -webkit-tap-highlight-color: transparent}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans";
  color:var(--txt);
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(15,17,21,.85) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(900px 600px at 120% 110%, rgba(11,12,16,.85) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  overflow-x:hidden;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* Low motion */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; transition:none !important; animation:none !important}
}

a{color:inherit}
.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:18px 16px 22px;
  text-align:center;
}

/* Header */
.header{
  display:grid;
  justify-items:center;
  gap:10px;
  padding:8px 0 16px;
}
.logo{
  width:min(520px, 78vw);
  margin:0 auto;
}
.logo img{display:block; width:100%; height:auto}
.hsub{
  font-size:14px;
  color:var(--muted);
  max-width:74ch;
  line-height:1.35;
  margin:0 auto;
  padding:0 8px;
}
.topbar{
  width:100%;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, var(--card), var(--card2));
  color:var(--txt);
  font-weight:800;
  letter-spacing:.01em;
  cursor:pointer;
  user-select:none;
  min-height:44px;
}
.pill:focus{outline:none; box-shadow:var(--focus)}
.pill:hover{filter:brightness(1.03)}
.pill.primary{
  background:linear-gradient(180deg, rgba(78,168,255,.26), rgba(78,168,255,.14));
  border-color: rgba(78,168,255,.38);
}
.pill.ghost{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
body[data-theme="light"] .pill.ghost{
  background:linear-gradient(180deg, rgba(15,18,25,.04), rgba(15,18,25,.02));
}

/* Tabs */
.tabs{
  width:100%;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin:10px 0 14px;
}
.tab{
  min-width:160px;
  padding:14px 18px;
  font-size:14px;
}
.tab[aria-selected="true"]{
  background:linear-gradient(180deg, rgba(78,168,255,.34), rgba(78,168,255,.18));
  border-color: rgba(78,168,255,.45);
}

/* Cards */
.card{
  position:relative;
  width:100%;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:linear-gradient(180deg, var(--card), var(--card2));
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.card.pad{ padding:16px; }
.card + .card{ margin-top:14px; }

.cardTitle{
  margin:2px 0 8px;
  font-size:18px;
  font-weight:950;
  letter-spacing:.01em;
}
.help{
  margin:0 auto;
  color:var(--muted);
  font-size:14px;
  line-height:1.35;
  max-width:78ch;
}


/* Auto hint: desktop vs mobile */
.hintMobile{ display:none; }
@media (max-width: 680px){
  .hintDesktop{ display:none; }
  .hintMobile{ display:inline; }
}

/* Mobile tightening: keep plot readable and controls scrollable */
@media (max-width: 520px){
  :root{ --plotH: min(72vh, 520px); }
  .mobileOnly{ display:inline-flex; }

  .container{ padding:12px 10px 16px; }
  .plotHead{ padding:12px 12px 8px; }
  .plotTitle{ font-size:18px; }
  .plotSub{ font-size:12px; }

  .legend{
    justify-content:flex-start;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap:8px;
    padding:8px 10px 10px;
    flex-wrap:nowrap;
  }
  .legendItem{
    flex:0 0 auto;
    white-space:nowrap;
    padding:7px 9px;
    font-size:13px;
    line-height:1.1;
  }
  .swatch{ width:14px; height:8px; }

  .actions{
    justify-content:flex-start;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap:8px;
    flex-wrap:nowrap;
  }
.actions .btn, .actions .toggle{ flex:0 0 auto; }
}

/* Inputs */
.field{
  width:100%;
  display:grid;
  gap:10px;
  margin-top:12px;
}
textarea, input[type="text"], input[type="number"], select{
  width:100%;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.18);
  color:var(--txt);
  padding:13px 14px;
  font-size:16px; /* keep >=16 for mobile */
  line-height:1.35;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
body[data-theme="light"] textarea,
body[data-theme="light"] input[type="text"],
body[data-theme="light"] input[type="number"],
body[data-theme="light"] select{
  background: rgba(255,255,255,.85);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.05);
}

/* Select dropdown options must remain readable across themes (Chrome/Windows can inherit white text into native option list). */
select option,
select optgroup{
  background-color:#101216;
  color:rgba(255,255,255,.96);
}
body[data-theme="light"] select option,
body[data-theme="light"] select optgroup{
  background-color:#ffffff;
  color:rgba(15,18,25,.96);
}
textarea{ min-height:92px; resize:vertical; text-align:center; }
textarea::placeholder, input::placeholder{ color:var(--muted2); }
textarea:focus, input:focus, select:focus{ outline:none; box-shadow: var(--focus); }

select{ text-align-last:center; -moz-text-align-last:center; }
option{ background: #0b0d12; color: #f3f6ff; }
body[data-theme="light"] option{ background:#ffffff; color:#0b0d12; }

.row{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color:var(--txt);
  cursor:pointer;
  font-weight:900;
  letter-spacing:.01em;
  min-height:44px;
  user-select:none;
}
.btn:focus{ outline:none; box-shadow:var(--focus) }
.btn:hover{ filter:brightness(1.05) }
.btn.primary{
  border-color: rgba(78,168,255,.45);
  background: linear-gradient(180deg, rgba(78,168,255,.36), rgba(78,168,255,.18));
}
.btn.danger{
  border-color: rgba(255,90,106,.42);
  background: linear-gradient(180deg, rgba(255,90,106,.20), rgba(255,90,106,.10));
}
.btn.small{ padding:10px 12px; border-radius:12px; font-size:13px; min-height:40px; }
.btn.icon{ padding:10px 12px; gap:8px; }

.notice{
  display:none;
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,211,106,.14), rgba(255,211,106,.08));
  color: var(--txt);
  font-weight:800;
}
.notice.bad{
  background: linear-gradient(180deg, rgba(255,90,106,.18), rgba(255,90,106,.10));
  border-color: rgba(255,90,106,.38);
}

/* Builder list */
.builderTop{
  display:grid;
  gap:10px;
  margin-top:12px;
  justify-items:center;
}
.builderTopGrid{
  width:100%;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (max-width: 680px){
  .builderTopGrid{ grid-template-columns: 1fr; }
  :root{ --plotH: 62vh; }
}
.compList{
  display:grid;
  gap:12px;
  margin-top:12px;
}
.compCard{
  border-radius:var(--radius);
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  padding:12px;
  text-align:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
body[data-theme="light"] .compCard{
  background: linear-gradient(180deg, rgba(15,18,25,.04), rgba(15,18,25,.02));
}
.compHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.compName{
  font-weight:950;
  letter-spacing:.01em;
}
.compMeta{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}
.xbtn{
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.18);
  color:var(--txt);
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  cursor:pointer;
  font-weight:950;
}
body[data-theme="light"] .xbtn{ background: rgba(255,255,255,.85); }
.xbtn:hover{ filter:brightness(1.05) }
.compGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:10px;
}
.compGrid .wide{ grid-column:1 / -1; }
@media (max-width: 680px){
  .compGrid{ grid-template-columns: 1fr; }
}
.label{
  font-size:12px;
  color:var(--muted);
  margin:0 0 6px;
  font-weight:850;
  letter-spacing:.02em;
}
.timesRow{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.timeChip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid var(--border2);
  background: rgba(0,0,0,.10);
}
body[data-theme="light"] .timeChip{ background: rgba(255,255,255,.55); }
.timeChip select{
  width:auto;
  min-width:74px;
  padding:10px 10px;
  font-size:14px;
}
.xmini{
  width:34px; height:34px; border-radius:12px;
}

/* Plot */
.plotWrap{
  padding:0;
}
.plotHead{
  padding:16px 16px 10px;
  border-bottom:1px solid var(--border2);
}
.plotTitle{
  margin:0;
  font-size:20px;
  font-weight:950;
  letter-spacing:.01em;
}
.plotSub{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px;
}
.canvasWrap{
  position:relative;
  width:100%;
  height:var(--plotH);
}
#plotCanvas{
  width:100%;
  height:100%;
  display:block;
  border-radius:0 0 var(--radius) var(--radius);
}
#hoverCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
}
#hover{
  position:absolute;
  pointer-events:none;
  display:none;
  min-width:160px;
  max-width:min(280px, 78vw);
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(18,22,30,.96);
  color: #f2f5ff;
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
  text-align:left;
  font-size:12px;
  line-height:1.35;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
}
body[data-theme="light"] #hover{
  background: rgba(255,255,255,.96);
  color:#0b0d12;
  box-shadow: 0 10px 22px rgba(10,14,20,.15);
}
.hoverTitle{ font-weight:950; margin-bottom:6px; }
.legend{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  padding:12px 14px 14px;
}
.legendItem{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:10px 12px;
  cursor:pointer;
  user-select:none;
  font-weight:900;
  background: rgba(0,0,0,.12);
}
body[data-theme="light"] .legendItem{ background: rgba(255,255,255,.7); }
.swatch{
  width:18px;
  height:10px;
  border-radius:999px;
  display:inline-block;
}

.legendText{
  display:inline-block;
  max-width: 62vw;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mobileOnly{ display:none; }

#plotCard.legendCollapsed .legend{ display:none; }

body.chartFocus{ overflow:hidden; }
body.chartFocus .container{ max-width:none; padding:0; }
body.chartFocus header,
body.chartFocus #panelAuto,
body.chartFocus #panelBuilder,
body.chartFocus .smallNote{ display:none !important; }
body.chartFocus #plotCard{
  position:fixed;
  inset:0;
  margin:0 !important;
  border-radius:0;
  z-index:9999;
}
body.chartFocus #plotCanvas{ border-radius:0; }
body.chartFocus{ --plotH: calc(100vh - 132px); }
.legendItem.off{ opacity:.45; text-decoration:line-through; }

/* Footer actions */
.actions{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  padding:14px 16px 16px;
  border-top:1px solid var(--border2);
}
.toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.12);
  font-weight:900;
  cursor:pointer;
  user-select:none;
  min-height:44px;
}
body[data-theme="light"] .toggle{ background: rgba(255,255,255,.7); }
.toggle input{ width:18px; height:18px; margin:0; }

/* Confetti overlay (only on plot) */
#confetti{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.confettiDot{
  position:absolute;
  width:8px; height:8px;
  border-radius:2px;
  opacity:0;
  transform:translate3d(0,0,0);
}

/* Small */
.smallNote{
  font-size:12px;
  color:var(--muted2);
  margin:12px auto 0;
  max-width:84ch;
  line-height:1.35;
}
.kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:11px;
  padding:2px 6px;
  border-radius:8px;
  border:1px solid var(--border2);
  background: rgba(0,0,0,.12);
}
body[data-theme="light"] .kbd{ background: rgba(255,255,255,.65); }

/* Presets + interpretation */
.presetRow{ gap:10px; align-items:center; flex-wrap:wrap; }
.presetRow .select{ min-width:220px; flex: 1 1 220px; }
.interp{ margin-top:12px; border:1px solid var(--border); border-radius:14px; background:var(--card); box-shadow: var(--shadow); padding:8px 12px; }
.interp > summary{ cursor:pointer; font-weight:700; user-select:none; }
.interpList{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.interpItem{ border:1px solid var(--border); border-radius:12px; padding:10px 12px; background:var(--card2); }
.interpItem.ok{ border-color: rgba(125,255,154,.35); }
.interpItem.bad{ border-color: rgba(255,85,85,.35); }
.interpTop{ display:flex; gap:10px; align-items:baseline; justify-content:space-between; }
.interpRaw{ font-weight:700; }
.interpMeta{ color: var(--mutedTxt); font-size: 12px; }
.interpErr{ color: rgba(255,85,85,.95); font-weight:700; margin-top:6px; }
.interpSug{ margin-top:6px; font-size:12px; color: var(--mutedTxt); }
.hoverRow.locked{ outline:1px solid rgba(255,255,255,.20); border-radius:10px; padding:2px 6px; }


/* Toast (fixed, low cost notifications) */
#toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:99999;
  display:none;
  max-width:min(640px, calc(100vw - 24px));
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(15,18,25,.92);
  color:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.55);
  font-size:13px;
  line-height:1.35;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  cursor:pointer;
}
body[data-theme="light"] #toast{
  background: rgba(255,255,255,.96);
  color:#111;
  border:1px solid rgba(0,0,0,.10);
}
#toast.bad{ border-color: rgba(255,90,106,.55); }
#toast.good{ border-color: rgba(102,255,168,.45); }