/* 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 nav a, header a { color: #9fb4ff; text-decoration: none; }
footer { color: #aab; font-size: 11px; }
main { padding: 10px; }

.grid { display: grid; grid-template-columns: 230px 1fr; gap: 12px; align-items: start; }
.controls { position: sticky; top: 8px; }
.controls fieldset { border: 1px solid #c7ccd6; border-radius: 5px; margin: 0 0 10px; padding: 8px; background: #fff; }
.controls legend { font-weight: 600; font-size: 12px; padding: 0 4px; }
.controls label { display: block; margin: 4px 0; font-size: 12px; }
.controls label.inline { display: inline-flex; align-items: center; gap: 4px; }
.controls input[type=number], .controls input[type=date], .controls input[type=time],
.controls input[type=text], .controls select { width: 100%; padding: 2px 4px; }
.controls label.inline input { width: auto; }
.controls button { margin-top: 6px; padding: 3px 10px; cursor: pointer; }
.eq-list { margin: 6px 0 0; padding-left: 16px; color: #555; font-size: 11px; }

.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; }