/* Compare setups: side-by-side pixel scale and field of view.
   Self-contained under .cmp, so it works on its own page or inside the site's page() template
   (whose --ink means text, not ground). Setup accents: A = OIII teal, B = H-alpha rose, C = amber. */
.cmp{
  --ink:#06080F; --deep:#0D111C; --lift:#151B2A; --line:#222A3B; --line2:#344059;
  --text:#F3F1EC; --dim:#A6ADBE; --faint:#737C90;
  --good:#7FD99A; --ok:#F2C46B; --bad:#FF8A7A; --r:16px;
  --a:#4FD1C5; --b:#FF7A8C; --c:#F2C46B;
  color:var(--text); font-size:17px; line-height:1.55;
}
.cmp button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; text-align:inherit}
.cmp button:focus-visible,.cmp select:focus-visible,.cmp input:focus-visible{outline:2px solid var(--text); outline-offset:3px; border-radius:6px}
.cmp .lead{color:var(--dim); margin-top:6px}
.cmp .hint{color:var(--dim); font-size:14px; margin-top:10px; line-height:1.5}
.cmp .flabel{display:flex; align-items:baseline; gap:10px; font-weight:600; font-size:16px; margin-bottom:10px}
.cmp .flabel output{margin-left:auto; font-size:24px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.cmp .seg{display:flex; flex-wrap:wrap; gap:6px}
.cmp .seg button{padding:8px 14px; border-radius:999px; background:var(--deep); color:var(--dim); font-size:14px; font-weight:600}
.cmp .seg button:hover{color:var(--text)}
.cmp .seg button.on{background:var(--text); color:var(--ink)}
.cmp select{background:var(--deep); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:10px 12px; font:inherit; font-size:15px; width:100%}
.cmp input[type=range]{width:100%; accent-color:var(--text); height:28px}
.cmp .gbar .seg button{background:var(--lift)}
.cmp .gbar .seg button.on{background:var(--text)}
body.nv .cmp{--a:#FF6B57; --b:#E55A45; --c:#C4503F}
.cmp .herocopy{padding:34px 20px 24px}
.cmp .herocopy h1{max-width:20ch}
.back{display:inline-flex; gap:6px; align-items:center; color:var(--dim); font-size:15px; text-decoration:none; margin-top:4px}
.back:hover{color:var(--text)}
.cwrap{max-width:1180px; margin:0 auto; padding:0 20px}
.mock{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); background:var(--ok); border-radius:6px; padding:2px 8px; margin-bottom:10px}

/* global controls */
.gbar{display:grid; grid-template-columns:1fr; gap:18px; background:var(--deep); border-radius:var(--r); padding:18px; margin-top:22px}
@media(min-width:820px){.gbar{grid-template-columns:1.3fr 1fr 1fr}}
.gbar .flabel{margin-bottom:8px; font-size:15px}
.gbar .flabel output{font-size:18px}
.presets{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.presets span{color:var(--faint); font-size:14px; align-self:center; margin-right:4px}
.chip{padding:7px 13px; border-radius:999px; background:var(--deep); color:var(--dim); font-size:14px; font-weight:600}
.chip:hover{color:var(--text); background:var(--lift)}

/* setup editors */
.setups{display:grid; gap:14px; margin-top:22px; grid-template-columns:1fr}
@media(min-width:760px){.setups.n2{grid-template-columns:1fr 1fr}.setups.n3{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.setups.n3{grid-template-columns:1fr 1fr 1fr}}
.setup{background:var(--deep); border-radius:var(--r); padding:16px; border-top:4px solid var(--acc); display:flex; flex-direction:column; gap:12px; min-width:0}
.setup[data-k="0"]{--acc:var(--a)} .setup[data-k="1"]{--acc:var(--b)} .setup[data-k="2"]{--acc:var(--c)}
.shead{display:flex; align-items:center; gap:10px}
.badge{width:28px; height:28px; border-radius:50%; background:var(--acc); color:var(--ink); display:grid; place-items:center; font-weight:800; font-size:15px; flex:none}
.stitle{font-weight:700; font-size:16px; line-height:1.25; min-width:0; overflow:hidden; text-overflow:ellipsis}
.rm{margin-left:auto; color:var(--faint); font-size:14px; padding:4px 8px; border-radius:8px}
.rm:hover{color:var(--text); background:var(--lift)}
.setup .seg button{padding:7px 12px; font-size:13px}
.setup .seg button.on{background:var(--acc)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.fl{display:flex; flex-direction:column; gap:5px; min-width:0}
.fl>span{font-size:13px; color:var(--faint); font-weight:600}
.fl select{padding:9px 10px; font-size:14px}
.chk{display:flex; gap:8px; align-items:center; font-size:13px; color:var(--dim)}
.chk input{accent-color:var(--acc)}
.flrow output{font-weight:800; font-size:15px; color:var(--text); margin-left:auto}
.flrow .fl>span{display:flex}
.setup input[type=range]{accent-color:var(--acc); height:24px}
.note{font-size:13px; color:var(--faint); line-height:1.45}
.note b{color:var(--dim); font-weight:600}
.warn{color:var(--ok)}
.addbtn{border:2px dashed var(--line2); border-radius:var(--r); color:var(--dim); font-weight:600; display:grid; place-items:center; min-height:120px; padding:16px; text-align:center}
.addbtn:hover{color:var(--text); border-color:var(--dim)}

/* side by side results */
.sec{margin-top:40px}
.sec h2{font-size:clamp(22px,3.6vw,28px); font-weight:800; letter-spacing:-.02em; line-height:1.15}
.sec .lead{margin-top:4px}
.views{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; align-items:center}
.views .chk{margin-left:auto}
.tiles{display:grid; gap:10px; margin-top:14px}
.tiles.n1{grid-template-columns:1fr} .tiles.n2{grid-template-columns:1fr 1fr} .tiles.n3{grid-template-columns:1fr 1fr 1fr}
.rtile{background:var(--deep); border-radius:14px; padding:8px 8px 10px; border-top:3px solid var(--acc); min-width:0}
.rtile[data-k="0"]{--acc:var(--a)} .rtile[data-k="1"]{--acc:var(--b)} .rtile[data-k="2"]{--acc:var(--c)}
.frame{position:relative; background:var(--lift); border-radius:8px; overflow:hidden; display:grid; place-items:center; aspect-ratio:1}
.frame canvas{display:block; width:100%; height:100%; object-fit:contain}
.frame.px canvas{image-rendering:pixelated}
.rlab{display:flex; gap:6px; align-items:baseline; margin:8px 2px 0; font-size:13px; color:var(--dim); flex-wrap:wrap}
.rlab b{color:var(--text); font-size:clamp(15px,2.6vw,20px); font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.rname{font-size:13px; color:var(--faint); margin:2px 2px 0; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.verdict{margin-top:16px; background:var(--lift); border-radius:14px; padding:14px 16px; font-size:16px; line-height:1.5}
.verdict p+p{margin-top:8px}
.verdict .k0{color:var(--a); font-weight:700} .verdict .k1{color:var(--b); font-weight:700} .verdict .k2{color:var(--c); font-weight:700}

/* detail-limit bars */
.lims{margin-top:8px; display:flex; flex-direction:column; gap:4px}
.lim{display:grid; grid-template-columns:62px 1fr 42px; gap:6px; align-items:center; font-size:11.5px; color:var(--faint)}
.lim i{display:block; height:6px; border-radius:3px; background:var(--line2)}
.lim i u{display:block; height:100%; border-radius:3px; background:var(--dim)}
.lim.top i u{background:var(--acc)}
.lim.top{color:var(--text)}
.lim em{font-style:normal; text-align:right; font-variant-numeric:tabular-nums}

/* table */
.cmp .tblwrap table{min-width:520px}
.tblwrap{overflow-x:auto; margin-top:14px; border-radius:14px; background:var(--deep)}
table.cmpt{border-collapse:collapse; width:100%; font-size:14px; min-width:520px}
.cmpt th,.cmpt td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
.cmpt thead th{text-transform:none; letter-spacing:0; font-size:13px; color:var(--text); position:sticky; top:0; background:var(--deep)}
.cmpt thead th span{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px}
.cmpt tbody th{text-transform:none; letter-spacing:0; color:var(--faint); font-weight:600; font-size:13px; width:28%}
.cmpt td{font-variant-numeric:tabular-nums}
.cmpt td.best{color:var(--good); font-weight:700}
.cmpt tr.key td{font-size:16px; font-weight:800}
.cmpt tr.key td.best{color:var(--good)}
.cmpt td small{display:block; color:var(--faint); font-weight:400; font-size:12px}

.explain{margin-top:14px; color:var(--dim); font-size:15px; line-height:1.6; max-width:72ch}
.explain p+p{margin-top:10px}
.cfoot{margin-top:46px; padding-top:18px; border-top:1px solid var(--line); color:var(--faint); font-size:13px}

/* the Telescope Simulator's "Check my seeing condition now" panel */
.cmp .astro-local{margin-top:12px; background:var(--lift); border-radius:12px; padding:12px 14px; font-size:14px}
.cmp .astro-local-head{font-weight:700; margin-bottom:6px}
.cmp .astro-local .readout{display:flex; gap:10px; justify-content:space-between; font-size:13px; padding:3px 0}
.cmp .astro-local .readout .k{color:var(--faint)}
.cmp .astro-local .readout .v{text-align:right}
.cmp .astro-local .btn{margin-top:6px; padding:7px 14px; border-radius:999px; background:var(--text); color:var(--ink); font-size:14px; font-weight:700}
.cmp .astro-local .btn:disabled{opacity:.4}
.cmp .astro-local .note,.cmp .astro-local .muted{font-size:12.5px; color:var(--faint); margin-top:6px; line-height:1.45}
.cmp .astro-local .note.warn{color:var(--ok)}
.cmp .astro-local .note.ok{color:var(--good)}
.cmp .note{font-size:13px; color:var(--faint); line-height:1.45}

/* share link under the images */
.cmp .sec.top { margin-top: 8px; }
.cmp .share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; }
.cmp .share .flabel { margin: 0; }
.cmp .share code { font-size: 13px; color: var(--text); background: var(--deep); border: 1px solid var(--lift); border-radius: 6px; padding: 4px 8px; overflow-wrap: anywhere; max-width: 100%; }
.cmp .share #copyMsg { color: var(--good); }