/* ── Design tokens ───────────────────────────────────────────────── */ :root { --bg: #0a0c0f; --bg2: #0f1218; --bg3: #141820; --border: #253040; --border2: #334455; --gold: #c8a96e; --gold2: #e8c98e; --gold-dim: #6b5a38; --edge: #9a8a63; /* interactive edges: hover, focus, active outline */ --text: #dde3ec; --text-dim: #7e8fa0; --text-pale: #8e9aaa; --red: #e05c5c; --blue: #5c9ee0; --green: #5ce0a0; --pin-red: #cc2200; --mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace; --serif: 'Cormorant Garamond', Georgia, serif; --radius: 4px; --tab-h: 3rem; --header-h: 3.4rem; /* slimmed: subtitle removed, so no two-line stack */ } /* ── Reset ───────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--mono); font-size: 1rem; line-height: 1.6; /* Pin to the viewport. Plain height:100vh lets iOS Safari scroll the page up to tuck its address bar away, dragging the banner + tab bar off-screen (out of reach). position:fixed locks the app so that can't happen. */ position: fixed; inset: 0; overflow: hidden; display: flex; flex-direction: column; } /* ── Header ──────────────────────────────────────────────────────── */ .app-header { flex-shrink: 0; display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem; height: var(--header-h); border-bottom: 1px solid var(--border); background: var(--bg); } /* Installed PWA: drop the branding banner — the OS launch splash + the About panel cover identity; don't waste standalone screen space on it. Media query covers modern browsers; .is-standalone (set in index.html) is the fallback for older iOS, which lacks display-mode. Zero --header-h too so the panel max-height calc (uses --header-h) reclaims the space. */ @media all and (display-mode: standalone) { :root { --header-h: 0rem; } .app-header { display: none; } } .is-standalone { --header-h: 0rem; } /* .is-standalone sits on = :root */ .is-standalone .app-header { display: none; } .app-header::before { content: '\2609'; font-size: 1.8rem; color: var(--gold); animation: glow 4s ease-in-out infinite; flex-shrink: 0; } @keyframes glow { 0%, 100% { text-shadow: 0 0 30px rgba(200,169,110,0.4); } 50% { text-shadow: 0 0 60px rgba(200,169,110,0.7); } } .app-title { font-family: var(--serif); font-size: 1.5rem; font-weight: 300; letter-spacing: 0.12em; color: var(--gold2); text-transform: uppercase; } /* ── Tab bar ─────────────────────────────────────────────────────── */ .tab-bar { flex-shrink: 0; display: flex; height: var(--tab-h); border-bottom: 1px solid var(--border2); background: #070911; } .tab-btn { flex: 1; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: all 0.15s; padding: 0 0.5rem; } /* Hamburger as an inline SVG, not the ☰ glyph: the glyph renders hairline-thin on iOS and fuses into a block when stroked. Solid rounded bars read cleanly at any size and match the visual weight of the colour-emoji tab icons. */ .tab-icon-svg { width: 1.15em; height: 1.15em; vertical-align: -0.2em; /* currentColor: every tab icon is SVG now, so the icon simply takes the button's colour and the active state is declared once, on the button. */ fill: currentColor; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35)); } .tab-btn:hover { color: var(--text); } .tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); background: var(--bg); } /* ── Tab content area ────────────────────────────────────────────── */ .tab-content { flex: 1; overflow: hidden; position: relative; } .tab-panel { position: absolute; inset: 0; overflow-y: auto; padding: 1.25rem 1.5rem 2rem; display: none; } .tab-panel.active { display: block; } /* Constrain content width on wide screens */ .tab-panel > * { max-width: 860px; margin-left: auto; margin-right: auto; } /* Map panel has no padding — map fills edge to edge */ #tab-map { padding: 0; overflow: hidden; /* map fills the panel; no outer scroll */ } #tab-map > * { max-width: none; } #map { touch-action: pan-x pan-y; /* allow map panning but not page scroll */ } /* ── Common panel/section styles ─────────────────────────────────── */ .panel { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem; } .section-label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.65rem; } /* Top-level section headers — used for Global Circumstances and Local Circumstances. Stronger than .section-label / .subsection-label. */ .top-section-header { font-family: var(--mono); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); } /* Inline coords appended to a top-section-header — normal case, smaller, so the location reads at a glance without claiming its own row. On narrow screens it wraps to its own line below the heading. */ .header-coords { margin-left: 0.75rem; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: none; color: var(--text-dim); } @media (max-width: 480px) { .header-coords { display: block; margin-left: 0; margin-top: 0.2rem; } } /* ── Form controls ───────────────────────────────────────────────── */ .field { margin-bottom: 1rem; } .field:last-child { margin-bottom: 0; } label { display: block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.35rem; } /* Form controls — applies to select + textarea. The only remaining inputs are type=range sliders, which have their own block below and override most of these properties anyway. */ select, textarea { width: 100%; background: var(--bg3); border: 1px solid var(--border2); border-radius: var(--radius); color: var(--text); font-family: var(--mono); font-size: 0.88rem; padding: 0.5rem 0.7rem; outline: none; transition: border-color 0.2s; appearance: none; } select:focus, textarea:focus { border-color: var(--edge); } select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7788'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; cursor: pointer; } /* ── Buttons ─────────────────────────────────────────────────────── */ .btn { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.55rem 1.2rem; border-radius: var(--radius); border: none; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .btn-primary { background: var(--gold); color: var(--bg); font-weight: 700; } .btn-primary:hover { background: var(--gold2); box-shadow: 0 0 20px rgba(200,169,110,0.25); } .btn-primary:disabled { background: var(--gold-dim); color: var(--bg2); cursor: not-allowed; box-shadow: none; } .btn-ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border2); } .btn-ghost:hover { border-color: var(--edge); color: var(--text); } .btn-danger { background: transparent; color: var(--red); border: 1px solid rgba(224,92,92,0.3); } .btn-danger:hover { background: rgba(224,92,92,0.1); border-color: var(--red); } /* ── Search tab ──────────────────────────────────────────────────── */ .search-box { position: relative; margin-bottom: 0.75rem; } .search-box textarea { box-sizing: border-box; field-sizing: content; /* native auto-height on supporting browsers */ padding-right: 2.5rem; font-size: 0.75rem; resize: none; overflow: hidden; } .search-clear { position: absolute; right: 0.5rem; top: 0.5rem; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1rem; padding: 0.25rem; line-height: 1; } .search-clear:hover { color: var(--text); } .search-hint { font-family: var(--mono); font-size: 0.65rem; color: var(--text-dim); margin-bottom: 0.75rem; line-height: 1.6; } .search-hint strong { color: var(--text-pale); font-weight: 400; } .pill-row { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.75rem; } .pill { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; padding: 0.35rem 0.75rem; /* taller for touch */ border-radius: 20px; border: 1px solid var(--border2); background: transparent; color: var(--text-dim); cursor: pointer; transition: all 0.15s; min-height: 2rem; /* ~32px minimum touch target */ } .pill:hover { border-color: var(--edge); color: var(--text); } .pill.active { background: rgba(200,169,110,0.12); border-color: var(--edge); color: var(--gold); } .pill.pill-loc { background: rgba(200,169,110,0.1); border-color: var(--edge); color: var(--gold); } /* Obscuration slider */ .osc-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; } .osc-label { font-family: var(--mono); font-size: 0.68rem; color: var(--text-dim); white-space: nowrap; min-width: 7rem; } .osc-value { font-family: var(--mono); font-size: 0.72rem; color: var(--gold2); min-width: 3rem; text-align: right; } input[type=range] { flex: 1; padding: 0; background: transparent; border: none; accent-color: var(--gold); } /* Scan progress */ .scan-bar { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.75rem; flex-wrap: wrap; } .scan-progress { font-family: var(--mono); font-size: 0.7rem; color: var(--text-dim); flex: 1; min-width: 8rem; } .progress-track { height: 3px; background: var(--border2); border-radius: 2px; margin-top: 0.3rem; overflow: hidden; } .progress-fill { height: 100%; background: var(--gold-dim); border-radius: 2px; transition: width 0.15s; width: 0%; } /* Eclipse list */ .eclipse-list { border: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); background: var(--bg3); /* Height fills remaining space in tab panel */ max-height: calc(100vh - var(--header-h) - var(--tab-h) - 16rem); min-height: 8rem; overflow-y: auto; } .eclipse-list::-webkit-scrollbar { width: 5px; } .eclipse-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; } .eclipse-item { display: grid; grid-template-columns: 2rem 1fr 4.5rem; align-items: center; gap: 0.5rem; padding: 0.65rem 0.75rem; cursor: pointer; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 0.88rem; transition: background 0.1s; } .eclipse-item:last-child { border-bottom: none; } .eclipse-item:hover { background: rgba(255,255,255,0.03); } .eclipse-item.selected { background: rgba(200,169,110,0.15); border-left: 3px solid var(--gold); color: var(--gold); } .et-T { color: var(--gold2); } .et-A { color: var(--blue); } .et-H { color: var(--green); } .et-P { color: var(--text-dim); } .list-status { padding: 1rem; font-family: var(--mono); font-size: 0.76rem; color: var(--text-dim); text-align: center; } /* Selected eclipse bar */ /* ── Data tab ────────────────────────────────────────────────────── */ .no-selection { text-align: center; padding: 3rem 1rem; color: var(--text-dim); font-style: italic; font-size: 1.05rem; } .result-header { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); } .result-title { font-size: 1.5rem; font-weight: 300; font-style: italic; color: var(--text); margin-bottom: 0.2rem; } .result-title .type-badge { font-size: 0.72rem; vertical-align: middle; position: relative; top: -0.15rem; } .type-badge { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.25rem 0.75rem; border-radius: 20px; white-space: nowrap; } .badge-total { background: rgba(200,169,110,0.15); color: var(--gold2); border: 1px solid var(--gold-dim); } .badge-annular { background: rgba(92,158,224,0.15); color: var(--blue); border: 1px solid #3a6e9e; } .badge-partial { background: rgba(110,119,136,0.15); color: var(--text-pale); border: 1px solid var(--border2); } .badge-hybrid { background: rgba(92,224,160,0.15); color: var(--green); border: 1px solid #3a9e70; } /* ── Details panel ────────────────────────────────────────────────── One type scale, one spacing scale, two columns aligned by a real table. Section header, data table, subsection header, contacts table — same rhythm throughout. */ /* Both tiers are GOLD. The hierarchy is carried by SIZE alone: the top tier is a clear notch larger and bold, the sub tier stays at its original small size. Colour is not doing hierarchy work here, so it is free to mark these as headings against the grey of labels and body text. */ .detail-section-h { font-family: var(--mono); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin: 1.6rem 0 0.5rem; padding: 0; } .detail-section-h:first-child { margin-top: 0; } /* SUB level (Contact Times, Sun Track): gold too, at the original small size. Against .detail-table .l — same size bracket, but grey and not bold — the gold is what says "heading". */ .detail-sub-h { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin: 1.5rem 0 0.4rem; padding: 0; border: none; } .detail-section-h .header-coords { margin-left: 0.6rem; font-size: 0.66rem; letter-spacing: 0.04em; text-transform: none; color: var(--text-dim); } /* Data table: label column left, value column right. Real table so column edges align across all rows. */ .detail-table { width: 100%; border-collapse: collapse; font-family: var(--mono); table-layout: fixed; } .detail-table td { /* Softer than --border and roomier than before. Nine rows of Global Circumstances at full border weight read as a ladder; the eye wants the rows grouped, not fenced. Enough contrast to guide a horizontal read, not enough to draw attention. */ padding: 0.3rem 0; border-bottom: 1px solid var(--border); vertical-align: baseline; } .detail-table tr:last-child td { border-bottom: none; } .detail-table .l { width: 11rem; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; } .detail-table .v { font-size: 0.82rem; color: var(--gold2); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Sits directly under "Local Circumstances" and names the place the figures below are for. No negative margin any more: the heading's own margin-bottom is the gap, so this can't drift when that changes. */ .detail-subloc { font-family: var(--mono); font-size: 0.7rem; color: var(--text-dim); margin: 0 0 0.8rem; padding: 0; } /* Contact-times table — single time column (UT), header band, row stripes. */ .contacts-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.8rem; table-layout: auto; } .contacts-table th, .contacts-table td { padding: 0.16rem 0.7rem 0.16rem 0; vertical-align: middle; white-space: nowrap; } .contacts-table th:last-child, .contacts-table td:last-child { padding-right: 0.4rem; } .contacts-table th { text-align: left; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); font-weight: 400; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); } .contacts-table .day-off { font-size: 0.65em; color: var(--text-dim); margin-left: 0.15rem; vertical-align: super; line-height: 1; } .contacts-table th:first-child { padding-left: 0.55rem; } .contacts-table th.time-mode-toggle { cursor: pointer; color: var(--text); text-decoration: underline dotted; text-underline-offset: 3px; } .contacts-table th.time-mode-toggle:hover { color: var(--text); } .contacts-table th, .contacts-table td { padding-left: 0.55rem; } .contacts-table td { color: var(--text); } .contacts-table tbody tr:nth-child(odd) td { background: rgba(255,255,255,0.025); } .contacts-table td svg { vertical-align: middle; margin-right: 0.4rem; } .contacts-table .row-umbral td { color: var(--gold2); } .contacts-table .row-max td { color: var(--gold2); font-weight: 700; } /* Footnote under the contacts table: small, dim, mono. */ .contacts-note { font-family: var(--mono); font-size: 0.66rem; color: var(--text-dim); margin: 0.4rem 0 0; padding: 0; } /* Empty / loading states */ .no-location, .no-eclipse { text-align: center; padding: 1.5rem 0.5rem; color: var(--text-dim); font-family: var(--mono); font-size: 0.82rem; } .note { margin-top: 0.6rem; font-family: var(--mono); font-size: 0.66rem; color: var(--text-dim); padding: 0.45rem 0.7rem; border-left: 2px solid var(--border); line-height: 1.6; } /* Status message */ #status-msg { font-family: var(--mono); font-size: 0.75rem; min-height: 1.2rem; margin-top: 0.5rem; color: var(--text-dim); } #status-msg.err { color: var(--red); } /* ── Settings tab ────────────────────────────────────────────────── */ .settings-section { margin-bottom: 2rem; } /* Collapsible settings groups */ .settings-group { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1rem; overflow: hidden; } .settings-group-header { display: flex; align-items: center; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); padding: 0.75rem 1rem; background: var(--bg2); cursor: pointer; user-select: none; list-style: none; } .settings-group-header::-webkit-details-marker { display: none; } .settings-group-header::after { content: '▾'; margin-left: auto; font-size: 0.7rem; color: var(--text-dim); transition: transform 0.2s; } .settings-group:not([open]) .settings-group-header::after { transform: rotate(-90deg); } .settings-group > :not(summary) { padding: 0.75rem 1rem 0; } .settings-row { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 0.72rem; } .settings-row:last-child { border-bottom: none; } .settings-row label { flex: 0 0 auto; font-size: 0.72rem; text-transform: none; letter-spacing: 0; color: var(--text); margin: 0; white-space: nowrap; } .settings-row select { width: auto; min-width: 12rem; max-width: 22rem; font-size: 0.72rem; font-family: var(--mono); } .about-text { font-family: var(--mono); font-size: 0.85rem; line-height: 1.6; color: var(--text); } /* Body text here is --text-dim (#7e8fa0) — every .about-text sits inside a .settings-group, and that rule dims it (see below). Emphasis is a SMALL step up from that: #96a4b3, a quarter of the way toward --text, 1.3x luminance. Still plainly grey. Weight does the real work: 700 was invisible because JetBrains Mono's bold is a restrained coding weight, so this is 800 (ExtraBold). To tune, move along the --text-dim -> --text ramp: #8c9cab is subtler, #9facbb is stronger. --text itself (#dde3ec) reads as white here. NOT gold — gold is overloaded in this palette. */ .about-text strong { font-weight: 800; color: #96a4b3; } .settings-group .about-text { font-size: 0.72rem; color: var(--text-dim); } /* Icons quoted inside running prose (see the log block in Instructions). These use TIGHT per-icon viewBoxes, unlike the app's buttons which keep 0 0 20 20 — there the box is the tap target, here it is dead space, and each glyph fills a different fraction of it (the arrow only 38% against the flag's 69%), so a shared box made them look mismatched. Height is set in em so they track the paragraph; vertical-align centres the box on the x-height rather than the baseline, which is what makes an inline icon sit level with lowercase text instead of riding high. */ .inline-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: -0.5em; color: var(--text); } /* The star is a text glyph, not an SVG, so it needs neither. */ span.inline-icon { width: auto; height: auto; vertical-align: baseline; font-size: 1.35em; line-height: 1; } .about-text p { margin-bottom: 0.75rem; } .about-text a { color: var(--text); text-decoration: underline; text-underline-offset: 0.18em; } .about-text a:hover { color: var(--text-pale); } .syntax-dl { margin: 0.5rem 0 0; padding: 0; } .syntax-entry { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0 0.75rem; padding: 0.35rem 0; align-items: baseline; } .syntax-entry dt { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); font-weight: 700; padding-top: 0.1rem; align-self: start; } .syntax-entry dd { margin: 0; font-family: var(--mono); font-size: 0.73rem; color: var(--text); line-height: 1.65; } /* Tolerances table (reuses syntax-table class) */ .syntax-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.72rem; margin: 0.75rem 0; } .syntax-table th { text-align: left; color: var(--text-dim); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border2); font-weight: 400; } .syntax-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); vertical-align: top; } .syntax-table tr:last-child td { border-bottom: none; } .syntax-table td:first-child { color: var(--gold2); white-space: nowrap; } .syntax-table td:last-child { color: var(--text-pale); } .detail-title { display: flex; align-items: center; gap: 0.6rem; font-family: var(--mono); font-size: 1.1rem; color: var(--text); padding: 0.25rem 0 0.5rem; border-bottom: 1px solid var(--border); margin-bottom: 0.5rem; position: sticky; top: -1.25rem; /* cancel the tab-panel top padding */ background: var(--bg); z-index: 5; margin-top: -1.25rem; /* pull up into the padding so it pins flush */ padding-top: 1.25rem; /* restore visual top spacing */ } /* In the sidebar the panel background is lighter than --bg; match it so the pinned header blends with the sheet it sits on. */ .sidebar .detail-title { background: #1a2030; } /* The date takes the slack and ellipsises if it must; the actions never shrink. Without min-width:0 a flex item refuses to go below its content width, so a long date pushed the buttons onto a second line instead. */ .detail-title-date { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .detail-title-icon { display: inline-flex; align-items: center; flex: 0 0 auto; } /* Title actions: icon-only, square, grouped. They used to carry the words "Share" and "Save"; two labelled buttons plus a long date (e.g. "12 August 2026") ran past the sidebar width and wrapped the date onto a second line. The glyphs plus title/aria-label carry the same meaning in a fifth of the space. */ .detail-actions { margin-left: auto; display: flex; gap: 0.3rem; flex: 0 0 auto; } .icon-btn { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; font-size: 0.9rem; line-height: 1; cursor: pointer; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-dim); font-family: var(--mono); } .icon-btn:hover { border-color: var(--edge); color: var(--text); } .icon-btn svg { display: block; width: 0.95rem; height: 0.95rem; } /* The star is SVG, not a text glyph: a glyph centres on its LINE BOX (which includes ascender and descender space), so it sat visibly high in a flex-centred square no matter what line-height was set. An SVG centres on its own box. */ .log-save-btn svg { width: 1.1rem; height: 1.1rem; } /* ── User log panel ─────────────────────────────────── */ /* The saved state of the star button in the detail title (.icon-btn, above, with the rest of the title). */ .log-save-btn.saved { color: var(--gold); border-color: var(--edge); } .log-summary { padding: 0.6rem 0.75rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); border-bottom: 1px solid var(--border); } .log-empty { padding: 1.5rem 1rem; color: var(--text-dim); font-size: 0.85rem; } .log-empty-hint { margin-top: 0.6rem; color: var(--text-dim); line-height: 1.7; } .log-item { border-bottom: 1px solid var(--border); } .log-item:last-child { border-bottom: none; } .log-item.selected .log-date { color: var(--gold); } /* Two grid rows. The actions sit on the DATE line, so the coordinates get the full width of the row underneath instead of being squeezed into whatever the icons leave over — which is what was truncating them. The type icon spans both rows and stays at the top. The LEFT of the type icon is reserved for the coming t-shirt selection checkboxes — do not put anything there. */ .log-row { display: grid; grid-template-columns: auto auto 1fr auto; grid-template-areas: "pick ico date acts" "pick ico loc loc"; align-items: center; column-gap: 0.5rem; row-gap: 0.1rem; padding: 0.55rem 0.6rem; } .log-row:hover { background: rgba(255,255,255,0.03); } .log-ico { grid-area: ico; display: flex; align-self: start; margin-top: 0.15rem; } .log-date { grid-area: date; font-size: 0.88rem; color: var(--text); } /* Tight cluster — these three belong together, so they read as one control group rather than three scattered buttons. */ .log-acts { grid-area: acts; display: flex; gap: 0.05rem; } .log-loc { grid-area: loc; display: flex; align-items: center; gap: 0.2rem; min-width: 0; } .log-coords { font-size: 0.7rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .log-coords.none { font-style: italic; opacity: 0.75; } /* What the eclipse does at that spot — a DATA value, so gold2. */ .log-circ { font-size: 0.7rem; color: var(--gold2); white-space: nowrap; flex: 0 0 auto; margin-left: auto; /* right-justified against the row edge */ } /* Every row action shares one footprint so the icon columns line up. */ .log-act { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; padding: 0; background: transparent; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; color: var(--text-dim); } .log-act svg { width: 1rem; height: 1rem; display: block; } .log-act:hover { border-color: var(--edge); color: var(--text); } .log-act:disabled { opacity: 0.3; cursor: default; } .log-act:disabled:hover { border-color: transparent; color: var(--text-dim); } /* The pencil is inline with the coordinates it edits, so it's smaller and unbordered — it belongs to that line, not to the row's action cluster. */ .log-edit-btn { width: 1.35rem; height: 1.35rem; } .log-edit-btn svg { width: 0.8rem; height: 0.8rem; } /* Seen is a flag that LIGHTS: hollow when unseen, filled gold when seen. No checkbox — a checkbox here would collide with the t-shirt selection control that is coming, and read as the same kind of thing. */ .log-flag.on { color: var(--gold); } .log-del:hover { border-color: var(--red); color: var(--red); } .log-goto:hover { color: var(--text); } /* Grid, not wrapped flex: four equal icon buttons on one row. It was five text buttons in a 2-column grid with "Make map" spanning both — wrapped flex before that, which left Import stranded alone because wrapping depends on text width rather than on any intent. Grid keeps the intent explicit at any label length, which is why it stays now the labels are gone. */ .log-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; padding: 0.85rem 0.75rem; border-top: 1px solid var(--border); } /* The base rule. It was lost in a rewrite of this block, which left every button in the panel as a bare