/* Minimal, dense, legible — a working tool, not a brochure (CLAUDE.md tone). */
* { box-sizing: border-box; }
body {
  margin: 0; font: 13px/1.4 -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: #1a1a1a; background: #f4f5f7;
}
header, footer { padding: 8px 14px; background: #1c2230; color: #e8eaf0; }
header { display: flex; align-items: baseline; gap: 16px; }
header h1 { font-size: 16px; margin: 0; }
header h1 a { color: #e8eaf0; }
header nav { display: flex; gap: 12px; }
header nav a, header a { color: #9fb4ff; text-decoration: none; }
header nav a:hover { text-decoration: underline; }
.site-indicator { color: #cfd6e8; font-size: 13px; padding: 1px 8px; background: #2a3147; border-radius: 3px; }
footer { color: #aab; font-size: 11px; }
footer a { color: #fff; text-decoration: underline; }
main { padding: 10px; }

.grid { display: grid; grid-template-columns: 218px 1fr; gap: 10px; align-items: start; }
.controls { position: sticky; top: 8px; font-size: 11px; }
/* min-width:0 beats the fieldset UA default (min-content), which would let a
   long option in the list dropdown silently widen the panel OVER the table
   and swallow clicks on the first column. */
.controls fieldset { border: 1px solid #c7ccd6; border-radius: 4px; margin: 0 0 5px; padding: 3px 6px 5px; background: #fff; min-width: 0; }
/* Ellipsize long list names (proposal_June_12_2026_...) instead of letting
   them stretch the panel; the full name lives in the title tooltip. */
.controls legend { font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: #667; padding: 0 3px;
  max-width: 188px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.controls select { text-overflow: ellipsis; }
/* Dense one-line rows: label text left, control right. */
.controls label { display: flex; align-items: center; gap: 5px; margin: 2px 0; font-size: 11px; }
.controls label.inline { gap: 4px; }
.controls input[type=number], .controls input[type=date], .controls input[type=time],
.controls input[type=text], .controls input[type=search], .controls select { flex: 1; min-width: 0; width: auto; padding: 1px 3px; font-size: 11px; }
.controls label.inline { justify-content: flex-start; }
.controls label.inline input[type=checkbox] { flex: 0 0 auto; }
.controls #tz-auto { flex: 0 0 auto; padding: 1px 5px; }
.controls button[type=submit] { margin-top: 4px; padding: 2px 9px; cursor: pointer; }
.eq-list { margin: 3px 0 0; padding-left: 14px; color: #555; font-size: 10px; }
/* OBSERVER / EQUIPMENT panels hold two forms, so they use a div wrapper styled
   like a fieldset rather than a real <fieldset> (which can't contain forms). */
.controls .obs-panel { border: 1px solid #c7ccd6; border-radius: 4px; margin: 0 0 5px; padding: 4px 6px 6px; background: #fff; }
.controls .obs-legend { font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: #667; margin-bottom: 3px; }
.controls .obs-panel button { margin-top: 4px; padding: 2px 9px; cursor: pointer; }

.summary { margin: 0 0 8px; }
table#planner { border-collapse: collapse; width: 100%; background: #fff; font-size: 12px; }
table#planner th, table#planner td { border: 1px solid #dde1e8; padding: 3px 6px; vertical-align: top; }
table#planner thead th { position: sticky; top: 0; background: #eef1f6; text-align: left; white-space: nowrap; z-index: 1; }
table#planner td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table#planner td.desc { min-width: 240px; max-width: 360px; font-size: 11px; color: #333; }
table#planner td.type { white-space: nowrap; color: #444; }
a.hsort { color: inherit; text-decoration: none; }
a.hsort:hover { text-decoration: underline; }

/* Row coloring by coarse category (matches the sheet's light shading). */
tr[data-category="nebula"]  { background: #fff6f3; }
tr[data-category="galaxy"]  { background: #f2f7ff; }
tr[data-category="cluster"] { background: #f3fbf3; }
tr[data-category="other"]   { background: #fafafa; }
tr.below td.alt { color: #b00; }
tr.hidden-row { opacity: 0.45; }
td.interval.daylight { color: #999; }

td.img img { width: 64px; height: 42px; object-fit: cover; display: block; }
td.img a.noimg, a.noimg { color: #999; font-size: 10px; }

/* Detail page */
.detail-grid { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; }
.detail-image img { max-width: 320px; border: 1px solid #ccc; }
.detail .credit { color: #777; font-size: 11px; }
.noimg-large { width: 320px; height: 200px; display: flex; align-items: center; justify-content: center;
  text-align: center; color: #888; background: #eee; border: 1px dashed #bbb; }
table.kv { border-collapse: collapse; margin-top: 8px; }
table.kv th, table.kv td { border: 1px solid #ddd; padding: 4px 8px; text-align: left; }
table.kv th { background: #f0f2f6; white-space: nowrap; }
.subtitle { color: #555; margin-top: -6px; }

/* Moon phase badge in the header (§26.2) */
.moon-badge { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: #cfd6e8; font-size: 12px; }
.moon-icon { vertical-align: middle; }
.moon-badge .moon-pct { font-weight: 600; }
.moon-badge .moon-name { color: #9aa3bd; }

/* Moon separation column + daylight trimming (§26.1/§26.2) */
td.moon-sep { color: #555; }
td.moon-warn { background: #ffe2c2; color: #8a3b00; font-weight: 600; }
td.interval.daylight { color: #aaa; font-style: italic; }
.summary em { color: #a35; font-style: normal; }

/* Detail page: night curve + framing preview (§26.3/§26.6) */
.detail-extras { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 18px; align-items: flex-start; }
.curve-box, .framing-box { background: #fff; border: 1px solid #dde1e8; border-radius: 5px; padding: 10px 12px; }
.curve-box h3, .framing-box h3 { margin: 0 0 6px; font-size: 13px; }
svg.curve { display: block; background: #fbfcfe; border: 1px solid #eef1f6; }
svg.framing { display: block; border: 1px solid #222; }
.cap { color: #777; font-size: 11px; margin: 6px 0 0; max-width: 540px; }

/* Always-visible type filter, two-column to save vertical space */
.type-filter { border: 1px solid #d7dbe3; border-radius: 4px; padding: 3px 5px; margin: 3px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 6px; }
.type-filter-label { grid-column: 1 / -1; font-weight: 600; font-size: 10px; color: #667; text-transform: uppercase; }
.type-filter label.inline { font-size: 10px; margin: 1px 0; }
.type-filter .type-group { grid-column: 1 / -1; border-bottom: 1px dotted #ccd; padding-bottom: 1px; margin-bottom: 1px; }
.cap-note { color: #b06000; font-weight: 600; }
.muted { color: #777; }

/* List mode controls (todo: New/Edit/Delete/Plan + db toggle) */
.list-buttons { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
.list-buttons button { padding: 2px 7px; cursor: pointer; font-size: 11px; }
.list-buttons button:disabled { opacity: 0.45; cursor: default; }
.list-buttons button.active { background: #1f5fbf; color: #fff; border-color: #1a4f9f; }
.controls .db-switch { font-weight: 600; }
.controls .db-hint { margin: 2px 0 0; font-size: 10px; color: #667; line-height: 1.3; overflow-wrap: anywhere; }
.list-io { display: flex; gap: 14px; margin-top: 6px; font-size: 11px; }
.list-io a { color: #1f5fbf; cursor: pointer; text-decoration: underline; }
.list-io a.disabled { color: #aab; pointer-events: none; text-decoration: none; cursor: default; }

/* Import dialog */
#import-dialog { border: 1px solid #c7ccd6; border-radius: 6px; padding: 14px 16px; width: min(440px, 92vw); }
#import-dialog::backdrop { background: rgba(20, 24, 34, 0.45); }
#import-dialog h3 { margin: 0 0 8px; font-size: 14px; }
#import-dialog .dlg-row { display: block; font-size: 12px; color: #445; margin: 8px 0; }
#import-dialog input[type=text], #import-dialog textarea { width: 100%; padding: 4px 6px; font-size: 12px; margin-top: 3px; box-sizing: border-box; }
#import-dialog textarea { resize: vertical; font-family: inherit; }
#import-dialog .dlg-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
#import-dialog .dlg-buttons button { padding: 3px 12px; cursor: pointer; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px);
  background: #1c2230; color: #f0f2f8; padding: 9px 16px; border-radius: 6px; font-size: 13px;
  box-shadow: 0 4px 16px rgba(0,0,0,.3); z-index: 1000; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; max-width: 80vw; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Mode banner above the table */
.mode-bar { margin: 0 0 8px; padding: 5px 9px; border-radius: 4px; font-size: 12px; display: flex; align-items: center; gap: 10px; }
.mode-bar.mode-db { background: #eef1f6; }
.mode-bar.mode-list { background: #eef7ee; }
.mode-bar.mode-list_db { background: #fff4e2; }
.mode-bar.mode-edit { background: #fdeaea; }
.mode-bar button.danger { background: #b00; color: #fff; border: 1px solid #900; border-radius: 3px; padding: 3px 10px; cursor: pointer; }

/* Per-row add/remove action column */
table#planner td.act-col, table#planner th.act-col { width: 22px; text-align: center; padding: 1px 2px; }
.row-action { width: 20px; height: 20px; line-height: 16px; padding: 0; font-size: 15px; font-weight: 700; cursor: pointer; border-radius: 3px; }
.row-action.add { color: #137333; border: 1px solid #9cc8a0; background: #eefcef; }
.row-action.remove { color: #b00; border: 1px solid #e0a0a0; background: #fdeeee; }
.row-action:disabled { color: #137333; opacity: 0.7; cursor: default; }


/* Session planner (night plan): picker, rig tracks, block timeline */
.session-title { margin: 4px 0 2px; }
.session-sub { margin: 0 0 10px; color: #445; }
.rig-track { margin: 0 0 18px; }
.rig-track h3 { margin: 8px 0 4px; font-size: 14px; }
.rig-fov { color: #778; font-weight: 400; font-size: 12px; }
.track { position: relative; height: 52px; background: #0f1738; border: 1px solid #2a3147; border-radius: 4px; overflow: hidden; }
.track .tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid rgba(255,255,255,.08);
  color: #99a5c4; font-size: 9px; padding-left: 2px; pointer-events: none; }
.track .block { position: absolute; top: 14px; bottom: 4px; border-radius: 3px; color: #fff; font-size: 11px;
  font-weight: 600; padding: 3px 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.track .block { background: #2f8f3a; border: 1px solid #7fd48a; }
.session-table { border-collapse: collapse; font-size: 12px; margin-top: 5px; }
.session-table td { border: 1px solid #dde1e8; padding: 3px 8px; background: #fff; }
.unscheduled { margin-top: 6px; font-size: 12px; }
.unscheduled h3 { font-size: 13px; margin: 10px 0 4px; }

/* Plan flow: proposal checkboxes, schedule banner, plan-list preface */
.btn-plan:not(:disabled) { background: #1f5fbf; color: #fff; border: 1px solid #1a4f9f; border-radius: 3px; }
.mode-bar.mode-proposal { background: #eef3fb; }
.mode-bar #sched-form { display: inline; }
.mode-bar #sched-form button { padding: 3px 10px; cursor: pointer; background: #1f5fbf; color: #fff; border: 1px solid #1a4f9f; border-radius: 3px; }
input.pick { width: 15px; height: 15px; cursor: pointer; }
.list-preface { background: #0f1738; color: #dde6f8; border-radius: 5px; padding: 10px 14px;
  font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; margin: 0 0 10px; }

/* Seasons flow: best-time-of-year table (12-month heat strip) + season defs */
.seasons-table th { border: 1px solid #dde1e8; padding: 3px 8px; background: #f3f5f9; text-align: left; font-size: 11px; }
.seasons-table tr.never td { color: #889; font-style: italic; }
.ystrip-head span { display: inline-block; width: 13px; text-align: center; font-size: 9px; color: #889; }
.ystrip { white-space: nowrap; line-height: 0; }
.ycell { display: inline-block; width: 12px; height: 14px; border: 1px solid #e3e7ee; box-sizing: border-box; }
.ycell.peak { outline: 1px solid #1a4f9f; outline-offset: -1px; }
.season-defs { margin: 18px 0 8px; }
.season-defs h3 { margin: 8px 0 4px; font-size: 14px; }
.season-rows { border-collapse: collapse; font-size: 12px; margin: 6px 0; }
.season-rows th, .season-rows td { border: 1px solid #dde1e8; padding: 3px 6px; background: #fff; text-align: left; }
.season-rows th { background: #f3f5f9; font-size: 11px; }
.season-rows input[type="text"] { width: 120px; }
.season-del { border: 0; background: none; color: #b03030; font-size: 15px; cursor: pointer; line-height: 1; padding: 0 4px; }
.season-actions { margin-top: 8px; display: flex; gap: 10px; align-items: center; }
.season-actions button { padding: 4px 12px; cursor: pointer; }

/* Manage-lists mode: bulk-delete table + kind tags */
.manage-table th { border: 1px solid #dde1e8; padding: 3px 8px; background: #f3f5f9; text-align: left; font-size: 11px; }
.kind { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: #eef1f6; color: #556; }
.kind-season { background: #e7f5e9; color: #2a6b32; }
.kind-proposal, .kind-plan { background: #e8eefb; color: #29487d; }
.btn-danger:not(:disabled) { background: #b03030; color: #fff; border: 1px solid #8f2424; border-radius: 3px; }
.btn-danger:disabled { opacity: .5; cursor: default; }
.accept-form { margin: 6px 0 0; }
.accept-form button { padding: 3px 12px; cursor: pointer; background: #2f8f3a; color: #fff; border: 1px solid #257231; border-radius: 3px; }

/* Sky-quality fit chip (per-site Bortle suitability) + header badge */
.bortle-badge { color: #14691f; font-weight: 700; }
td.sky-cell { text-align: center; }
.sky-chip { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: middle; border: 1px solid rgba(0,0,0,.25); }
.sky-good { background: #2faf3a; }
.sky-ok   { background: #e0b62f; }
.sky-poor { background: #d94033; }

/* Tonight suitability strip (6pm–6am) */
table#planner td.tonight-cell { padding: 3px 4px; vertical-align: middle; }
svg.tonight { display: block; border: 1px solid #2a3147; border-radius: 2px; }

/* Inline detail expansion (click the catalog # or thumbnail to open) */
table#planner td.detail-toggle { cursor: pointer; }
table#planner td.catalog-cell { color: #1f5fbf; text-decoration: underline; }
table#planner td.detail-toggle:hover { background: #eef3fb; }
table#planner tr.expanded > td { box-shadow: inset 0 2px 0 #1f5fbf; }
table#planner tr.detail-row > td { background: #f7f9fc; padding: 10px 12px; cursor: default; }
.detail-loading { color: #888; font-style: italic; padding: 8px; }
/* Two columns: pic + description on the left, the two charts stacked on the
   right under a shared set of time controls. */
.detail-inline { display: flex; gap: 16px; align-items: flex-start; }
.di-left { flex: 0 0 320px; min-width: 0; }
.di-right { flex: 1; min-width: 0; }
.di-image img { width: 100%; max-width: 320px; height: 150px; object-fit: cover; border: 1px solid #ccc; display: block; }
.di-image .noimg { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 320px; height: 150px; background: #eee; border: 1px dashed #bbb; color: #999; }
.di-left h3 { margin: 6px 0 4px; font-size: 14px; }
.di-sub { font-weight: 400; color: #667; font-size: 12px; margin-left: 6px; }
.di-desc { margin: 4px 0; font-size: 12px; color: #333; }
.di-imm { margin: 4px 0; font-size: 12px; color: #444; }
.di-rating { color: #777; }
.di-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0; padding: 0; font-size: 12px; }
.di-stats strong { color: #556; font-weight: 600; }
.wiki-link, .tsl-link { white-space: nowrap; }

/* Add-to-list menu in the inline detail. */
.di-add { margin: 4px 0 6px; font-size: 12px; }
.di-add label { color: #556; font-weight: 600; }
.di-add select { margin-left: 4px; font-size: 12px; max-width: 220px; }

/* Schedule ordering toggle. */
.order-toggle { display: flex; align-items: center; gap: 6px; margin: 6px 0 12px; }
.order-toggle .order-label { font-size: 12px; color: #556; font-weight: 600; }
.order-btn { font-size: 12px; padding: 3px 10px; border: 1px solid #c7ccd6; border-radius: 4px;
  background: #fff; color: #1f5fbf; cursor: pointer; }
.order-btn:hover { background: #eef1f6; }
.order-btn.active { background: #1f5fbf; color: #fff; border-color: #1f5fbf; cursor: default; }

/* Stacked charts: altitude curve over the monthly visibility grid */
.di-charts-stack { display: flex; flex-direction: column; gap: 8px; }
.di-charts-stack.loading { opacity: 0.5; }
.di-chart { margin: 0; }
.di-chart figcaption { font-size: 10px; color: #667; margin-bottom: 3px; }
.di-chart svg { width: 100%; max-width: 460px; height: auto; }
.di-chart svg.curve { display: block; background: #fbfcfe; border: 1px solid #dde1e8; border-radius: 4px; }
.di-chart svg.monthvis { display: block; border: 1px solid #2a3147; border-radius: 4px; }
.di-chart .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; vertical-align: -1px; margin: 0 2px 0 6px; border: 1px solid rgba(0,0,0,.2); }
.sw-green { background: #2faf3a; } .sw-red { background: #d94033; }
.sw-navy { background: #0f1738; } .sw-day { background: #6b94db; }

/* Shared time controls under the charts */
.di-chart-controls { display: flex; align-items: center; gap: 6px; margin-top: 8px; max-width: 460px; }
.di-chart-controls button { padding: 2px 9px; cursor: pointer; font-size: 12px; }
.di-chart-controls .chart-span { margin-left: auto; display: inline-flex; }
.di-chart-controls .span-btn { border-radius: 0; }
.di-chart-controls .span-btn.active { background: #1f5fbf; color: #fff; border-color: #1a4f9f; }

/* Equipment / lists / schedule pages */
.eq-cols { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.eq-section { min-width: 360px; }
.eq-table { font-size: 12px; }
.eq-form { background: #fff; border: 1px solid #dde1e8; border-radius: 5px; padding: 10px 12px; margin-top: 10px; max-width: 360px; }
.eq-form h4 { margin: 0 0 6px; }
.eq-form label { display: block; margin: 4px 0; font-size: 12px; }
.eq-form input { width: 100%; padding: 2px 4px; }
.eq-form button, .inline-add button, .save-results button { margin-top: 6px; padding: 3px 12px; cursor: pointer; }
.link-btn { background: none; border: none; color: #b00; cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.list-index td a, .list-actions a { color: #1f5fbf; }
.list-actions { margin: 6px 0; }
.btn { background: #1f5fbf; color: #fff !important; padding: 3px 10px; border-radius: 3px; text-decoration: none; }
.inline-add { margin: 8px 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-add input[type=text] { padding: 2px 5px; }
.save-results { margin: 6px 0 10px; padding: 6px 8px; background: #eef3fb; border: 1px solid #cfe; border-radius: 4px; font-size: 12px; }
.save-results select, .save-results input { padding: 2px 4px; }
table.schedule td.num strong { color: #14528f; }

/* Action icons in the header title band, pinned to the far right. */
.header-actions { margin-left: auto; align-self: center; display: flex; gap: 6px; }
.header-actions .icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: 1px solid #3b4358; border-radius: 4px;
  background: #2a3147; color: #cfd6e8; font-size: 15px; line-height: 1;
  text-decoration: none; cursor: pointer;
}
.header-actions .icon-btn:hover { background: #38415c; border-color: #9fb4ff; color: #fff; }
.header-actions .icon-btn.busy { opacity: .5; }

/* Build identifier in the Observer panel — matches the Mac/iPhone "Build" line
   so web/Mac/iPhone can be compared at a glance. Muted, like a legend. */
.build-string { font-size: 10px; color: #889; margin-top: 4px; user-select: all; }

/* Tonight from-to visibility label (military time) above the bar. */
.tonight-cell { text-align: center; }
.tonight-label { font-size: 9px; color: #667; line-height: 1.1; white-space: nowrap; margin-bottom: 2px; }