/* Apollo Span Calculator v3 — Scoped to .asc-root */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

.asc-root *, .asc-root *::before, .asc-root *::after { box-sizing: border-box; margin: 0; padding: 0; }
.asc-root {
  --or:#e0611c; --or-dk:#b84d16; --gy:#5d5d5d; --gy-lt:#e8e8e8; --gy-md:#aaa;
  --blk:#1a1a1a; --wht:#fff; --bg:#f4f4f4; --brd:#ddd;
  --ok:#2e8b57; --fail:#c0392b; --ok-bg:rgba(46,139,87,.08); --fail-bg:rgba(192,57,43,.09);
  --info:#4a7ab5; --info-bg:rgba(74,122,181,.08);
  --font:'Montserrat','Arial',sans-serif;
  --rad:6px; --rad-lg:10px; --shd:0 2px 12px rgba(0,0,0,.09); --shd-lg:0 6px 24px rgba(0,0,0,.12);
  font-family:var(--font); color:var(--blk); background:var(--bg); font-size:14px; line-height:1.5;
}

/* TOPBAR — subtitle only, no title */
.asc-topbar {
  background:var(--blk); padding:.5rem 1.4rem;
  display:flex; align-items:center; gap:1rem;
}
.asc-topbar-title { display:none; }
.asc-topbar-sub   { font-size:.72rem; font-weight:500; color:var(--gy-md); letter-spacing:.06em; }

/* THREE-COLUMN LAYOUT: inputs | results | diagram */
.asc-layout {
  display:grid;
  grid-template-columns: 357px 1fr minmax(0, 0.9fr);
  grid-template-rows: auto;
  gap:1.1rem; padding:1.1rem;
  align-items:start;
}
@media(max-width:1000px){
  .asc-layout { grid-template-columns: 340px 1fr; }
  #diagramPanel { grid-column: 1 / -1; }
}
@media(max-width:680px){
  .asc-layout { grid-template-columns: 1fr; }
}

/* PANELS */
.asc-panel { background:var(--wht); border-radius:var(--rad-lg); box-shadow:var(--shd-lg); overflow:hidden; }
.asc-panel-hdr { background:var(--or); padding:.9rem 1.4rem; }
.asc-panel-hdr h2 { font-size:.82rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--wht); margin:0; line-height:1; }
.asc-panel-hdr .asc-hdr-sub { font-size:.72rem; font-weight:500; color:rgba(255,255,255,.88); letter-spacing:.06em; margin-top:.25rem; text-transform:uppercase; }

/* INPUT SECTIONS */
.asc-section { padding:1rem 1.4rem; border-bottom:1px solid var(--gy-lt); position:relative; }
.asc-section:last-child { border-bottom:none; }
.asc-step { position:absolute; top:.9rem; right:1.2rem; font-size:1.8rem; font-weight:900; color:var(--gy-lt); pointer-events:none; user-select:none; }
.asc-section-title { font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--or); margin-bottom:.75rem; }
.asc-row { display:flex; gap:.6rem; margin-bottom:.6rem; }
.asc-row:last-child { margin-bottom:0; }
.asc-field { flex:1; min-width:0; }
.asc-field label { display:block; font-size:.67rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--gy); margin-bottom:.28rem; }

/* INPUTS */
.asc-input-wrap { display:flex; align-items:center; border:1.5px solid var(--brd); border-radius:var(--rad); background:var(--wht); overflow:hidden; transition:border-color .18s; }
.asc-input-wrap:focus-within { border-color:var(--or); }
.asc-input-wrap input, .asc-input-wrap select { border:none; outline:none; font-family:var(--font); font-size:.85rem; font-weight:600; color:var(--blk); padding:.45rem .5rem; flex:1; min-width:0; background:transparent; -moz-appearance:textfield; }
.asc-input-wrap input::-webkit-outer-spin-button, .asc-input-wrap input::-webkit-inner-spin-button { -webkit-appearance:none; }
.asc-unit { font-size:.6rem; font-weight:700; letter-spacing:.04em; color:var(--gy-md); padding:0 .4rem; background:var(--gy-lt); align-self:stretch; display:flex; align-items:center; border-left:1px solid var(--brd); white-space:nowrap; }
.asc-dual { display:flex; gap:.35rem; width:100%; }
.asc-dual .asc-input-wrap { flex:1; }
.asc-dual .asc-input-wrap:first-child { flex:2; }  /* ft wider than in */
.asc-select-wrap { border:1.5px solid var(--brd); border-radius:var(--rad); overflow:hidden; background:var(--wht); transition:border-color .18s; }
.asc-select-wrap:focus-within { border-color:var(--or); }
.asc-select-wrap select { border:none; outline:none; font-family:var(--font); font-size:.85rem; font-weight:600; color:var(--blk); padding:.45rem .5rem; width:100%; background:transparent; cursor:pointer; }

/* COMPUTED DISPLAY */
.asc-computed { display:flex; align-items:center; background:var(--gy-lt); border:1.5px solid transparent; border-radius:var(--rad); padding:.4rem .55rem; gap:.35rem; }
.asc-computed .asc-val { font-size:.9rem; font-weight:700; color:var(--blk); flex:1; }

/* BAYS STEPPER */
.asc-bays-wrap { display:flex; align-items:center; gap:.3rem; }
.asc-bays-btn { width:26px; height:26px; border:1.5px solid var(--brd); border-radius:var(--rad); background:var(--wht); font-size:1rem; font-weight:700; color:var(--gy); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; padding:0; font-family:var(--font); flex-shrink:0; }
.asc-bays-btn:hover { border-color:var(--or); color:var(--or); }
.asc-bays-input-wrap { flex:1; }
.asc-bays-input-wrap input { text-align:center; }
.asc-bays-reset { font-size:.6rem; font-weight:600; color:var(--gy-md); cursor:pointer; text-decoration:underline; white-space:nowrap; background:none; border:none; font-family:var(--font); }
.asc-bays-reset:hover { color:var(--or); }

/* CHECKBOXES */
.asc-checkbox-row { display:flex; flex-direction:column; gap:1.1rem; }
.asc-checkbox-item { display:flex; align-items:flex-start; gap:.55rem; cursor:pointer; padding:.1rem 0; }
.asc-checkbox-item input[type=checkbox] {
  width:15px; height:15px;
  margin-top:2px;       /* align box with cap-height of label text */
  accent-color:var(--or); cursor:pointer; flex-shrink:0;
}
.asc-checkbox-label { font-size:.75rem; font-weight:700; color:var(--blk); line-height:1.25; text-transform:uppercase; letter-spacing:.04em; }
.asc-checkbox-note { font-size:.62rem; color:var(--gy-md); font-weight:400; margin-top:.18rem; text-transform:none; letter-spacing:0; }

/* RESULTS SECTIONS */
.asc-res-section { padding:1rem 1.4rem; border-bottom:1px solid var(--gy-lt); }
.asc-res-section:last-child { border-bottom:none; }
.asc-res-label { font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gy); margin-bottom:.8rem; }

/* STAT GRID */
.asc-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; }
@media(max-width:480px){ .asc-stat-grid { grid-template-columns:repeat(2,1fr); } }
.asc-stat-card { background:var(--bg); border-radius:var(--rad); padding:.55rem .6rem; text-align:center; border:1px solid var(--gy-lt); }
.asc-stat-val { font-size:.95rem; font-weight:800; color:var(--or); line-height:1.1; }
.asc-stat-lbl { font-size:.58rem; font-weight:600; letter-spacing:.04em; color:var(--gy); text-transform:uppercase; margin-top:.15rem; }

/* SPAN ROWS */
.asc-span-list { display:flex; flex-direction:column; gap:.5rem; }
.asc-span-row { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:.6rem; padding:.65rem .8rem; border-radius:var(--rad); border:1.5px solid var(--brd); background:var(--wht); transition:all .2s; }
.asc-span-row.pass { border-color:var(--ok); background:var(--ok-bg); }
.asc-span-row.fail { border-color:var(--fail); background:var(--fail-bg); }
.asc-span-left { min-width:0; }
.asc-span-name { font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--blk); }
.asc-span-sub { font-size:.58rem; color:var(--gy-md); margin-top:.12rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.asc-bar-wrap { width:60px; height:4px; background:var(--gy-lt); border-radius:3px; overflow:hidden; }
.asc-bar-fill { height:100%; border-radius:3px; background:var(--or); transition:width .4s ease; }
.asc-span-row.pass .asc-bar-fill { background:var(--ok); }
.asc-span-row.fail .asc-bar-fill { background:var(--fail); }
.asc-span-right { display:flex; align-items:center; gap:.45rem; }
.asc-span-val { font-size:.82rem; font-weight:800; color:var(--blk); white-space:nowrap; min-width:46px; text-align:right; }
.asc-span-icon { font-size:.68rem; font-weight:900; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.asc-span-row.pass .asc-span-icon { background:var(--ok); color:var(--wht); }
.asc-span-row.fail .asc-span-icon { background:var(--fail); color:var(--wht); }

/* ALERT */
.asc-alert { display:flex; align-items:flex-start; gap:.8rem; padding:.9rem 1rem; border-radius:var(--rad); border:1.5px solid var(--brd); background:var(--bg); }
.asc-alert.ok   { border-color:var(--ok);   background:var(--ok-bg);   }
.asc-alert.yes  { border-color:var(--fail);  background:var(--fail-bg); }
.asc-alert.info { border-color:var(--info);  background:var(--info-bg); }
.asc-alert-icon { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.9rem; font-weight:900; flex-shrink:0; color:var(--wht); }
.asc-alert-icon.good    { background:var(--ok); }
.asc-alert-icon.warn    { background:var(--fail); }
.asc-alert-icon.neutral { background:var(--info); }
#carryMsg { font-size:.73rem; font-weight:500; color:var(--gy); line-height:1.5; }
#carryMsg strong { color:var(--blk); font-weight:700; }
#carryMsg em     { font-style:normal; font-weight:700; }

/* DIAGRAM PANEL */
#diagramPanel .asc-panel-hdr { background:var(--blk); }
.asc-diagram-wrap { background:var(--wht); border-radius:var(--rad); border:1px solid var(--gy-lt); padding:.4rem; overflow:hidden; }
.asc-diagram-wrap svg { display:block; width:100%; height:auto; }

/* LOAD TABLE */
.asc-collapse-btn { display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none; cursor:pointer; font-family:var(--font); font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gy); padding:0; margin-bottom:.7rem; }
.asc-collapse-btn:hover { color:var(--or); }
.asc-toggle-arrow { transition:transform .2s; display:inline-block; }
.asc-toggle-arrow.open { transform:rotate(180deg); }
.asc-load-table { width:100%; border-collapse:collapse; font-size:.7rem; }
.asc-load-table th { background:var(--blk); color:var(--wht); padding:.4rem .6rem; text-align:left; font-size:.6rem; letter-spacing:.07em; text-transform:uppercase; }
.asc-load-table td { padding:.38rem .6rem; border-bottom:1px solid var(--gy-lt); font-weight:500; color:var(--gy); }
.asc-load-table td:nth-child(2) { font-weight:700; color:var(--blk); }
.asc-load-table tr.controls-row td { background:rgba(224,97,28,.07); color:var(--or); font-weight:700; }
.load-summary-row { font-size:.6rem !important; color:var(--gy-md) !important; font-weight:400 !important; padding-top:.45rem !important; border-bottom:none !important; }

/* WIND NOTE */
.asc-wind-note { font-size:.62rem; color:var(--gy-md); margin-top:.4rem; font-style:italic; }