:root {
color-scheme: light dark;
/* Design tokens (design system step 1, 22 Sep 2026). The app has the
same names in Theme.swift — keep the two tables equal. The palette
starts from the logo's oxblood; map data colours stay functional. */
--oxblood-900: #3B0D0D; --oxblood-800: #4D1111; --oxblood-700: #611616; --oxblood-600: #7A2020;
--oxblood-500: #932B2B; --oxblood-400: #B34848; --oxblood-300: #D1807F; --oxblood-200: #E8B8B7;
--oxblood-100: #F5E1E0; --oxblood-50: #FBF3F2;
--brand: var(--oxblood-700);
--accent: var(--oxblood-400); /* interactive accent on the dark panels */
--accent-text: var(--oxblood-300); /* links and small accent text */
--accent-tint: rgba(179, 72, 72, 0.16);
--ground: #151312; --surface: #1F1B1A; --elevated: #2A2524; --line: #3A3332;
--text: #F4F0EE; --muted: #A39C99;
--glass: rgba(31, 27, 26, 0.92); --on-glass: #F4F0EE;
--live: #2FB35A; --recent: #F0A030; --stale: #8E8E93; --danger: #E0443E; --frost: #4DA3FF; --ice: #BF5AF2;
/* Network coverage (Theme.coverage*): the route analysis' gutter lines. */
--cov-telia: #A259D9; --cov-telenor: #1E7FE0; --cov-nodnett: var(--danger); --cov-none: var(--stale);
/* «Mitt mobilnett» (Theme.cellular*): a recording's own network, by type. */
--cell-5g: #15935A; --cell-4g: #B8860B; --cell-older: var(--cell-4g); --cell-flight: #E0701B;
/* «Sol og måne» (Theme.sun, Theme.moon): the dial's tracks and discs. */
--sun: #D97706; --moon: #6B7FA3;
--radius-control: 8px; --radius-card: 12px; --radius-sheet: 16px;
--space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px; --space-32: 32px;
--touch: 44px;
/* the older names, now aliases */
--panel-bg: rgba(31, 27, 26, 0.95);
--panel-fg: var(--text);
--error: var(--danger);
--sidebar-width: 350px;
/* A share page's banner (28 Sep 2026): warm yellow, dark text. */
--share-banner-bg: #FFD60A; --share-banner-fg: #1C1C1E;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--accent); }
/* The flex rules below would otherwise beat the hidden attribute's UA style. */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; }
#map { position: absolute; inset: 0; }
#topbar {
position: absolute; top: 0; left: 0; z-index: 10;
padding: 10px 16px;
color: #fff; pointer-events: none;
text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
/* The app's own mark, on its maroon, so the browser tab and the page carry
the same identity as the icon on the phone. */
.brand-logo {
width: 28px; height: 28px; flex: none; border-radius: var(--radius-control);
box-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.brand-text { line-height: 1.2; }
/* ---------------- map mode controls -------------------------------------- */
/* Tool stack mirrors the app: round 44px buttons down the RIGHT edge, same
order, same spacing. Zoom +/- stay bottom-left — a browser has no pinch. */
#map-controls {
/* Sits just LEFT of the sidebar, which overlays the map — at the right edge
the whole stack hid behind it. Slides out to the edge when it collapses. */
position: absolute; top: 64px; right: calc(var(--sidebar-width) + 12px); z-index: 15;
display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
transition: right 0.25s ease;
}
body.sidebar-collapsed #map-controls { right: 12px; }
body.sidebar-collapsed .map-pop,
body.sidebar-collapsed #search-box { right: 64px; }
.mapctl {
width: 44px; height: 44px; flex: 0 0 44px;
display: flex; align-items: center; justify-content: center;
background: rgba(17, 18, 21, 0.78);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
backdrop-filter: blur(14px) saturate(1.4);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 50%;
color: #e7e7ec; cursor: pointer; font-family: inherit;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
transition: background 0.12s ease, color 0.12s ease;
}
.mapctl:hover { background: rgba(38, 40, 46, 0.9); }
.mapctl.active { background: var(--brand); color: #fff; border-color: transparent; }
.mapctl svg { width: 21px; height: 21px; fill: none; stroke: currentColor;
stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mapctl .ctl-text { font-size: 12px; font-weight: 700; letter-spacing: 0.3px; }
select.mapctl {
appearance: none; -webkit-appearance: none;
width: 44px; padding: 0; text-align: center; font-size: 11px;
}
select.mapctl option { background: #1c1c1e; color: #f2f2f7; }
/* Panels hanging off the stack — the app's sheets, web-sized. */
.map-pop {
position: absolute; top: 64px; right: calc(var(--sidebar-width) + 64px); z-index: 16;
background: rgba(24, 25, 28, 0.94);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
backdrop-filter: blur(16px) saturate(1.4);
border: 1px solid rgba(255, 255, 255, 0.09);
color: var(--panel-fg);
border-radius: var(--radius-sheet); padding: 10px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
display: flex; flex-direction: column; gap: 2px;
max-height: calc(100vh - 140px); overflow-y: auto; min-width: 250px;
}
.map-pop .pop-title { font-size: 15px; font-weight: 700; padding: 4px 8px 8px; }
.map-pop .pop-group {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
color: var(--muted); padding: 10px 8px 4px;
}
.map-pop button, .map-pop label {
display: flex; align-items: center; gap: 10px;
background: none; border: none; color: inherit; font: inherit;
text-align: left; padding: 9px 8px; border-radius: var(--radius-control); cursor: pointer;
width: 100%;
}
.map-pop button:hover, .map-pop label:hover { background: rgba(255, 255, 255, 0.07); }
.map-pop .row-sub { display: block; font-size: 11px; color: var(--muted); }
.map-pop .base-row.active { color: #79b8ff; }
.map-pop .base-row.active::after { content: "✓"; margin-left: auto; }
.map-pop input[type="checkbox"] { accent-color: var(--accent); }
/* Search opens from its button, in the stack's column. */
#search-box {
position: absolute; top: 64px; right: calc(var(--sidebar-width) + 64px);
z-index: 16; width: min(340px, 60vw);
}
/* Bars and notes over the map sit in the MAP's part of the window: left
of the open sidebar, centred there, wrapping inside it. Centred on the
whole window they ran under the sidebar wherever the window is narrow —
in the stormops.no iframe the route editor's «Lagre» was under its edge
(field report 28 Sep 2026). --map-right is what the sidebar covers. */
:root { --map-right: min(var(--sidebar-width), calc(100vw - 52px)); }
body.sidebar-collapsed, body.logged-out { --map-right: 0px; }
#measure-bar, #polyedit-bar, #toast, #status, #write-status {
left: 12px; right: calc(var(--map-right) + 12px);
width: fit-content; margin-inline: auto;
transition: right 0.25s ease;
}
/* Too narrow beside the open sidebar (a phone): the whole width, over it.
(body: these rules come before the bars' own z-index.) */
@media (max-width: 680px) {
body:not(.sidebar-collapsed) { --map-right: 0px; }
body #measure-bar, body #polyedit-bar, body #status, body #write-status { left: 8px; right: 8px; z-index: 30; }
}
#measure-bar {
position: absolute; bottom: 24px; z-index: 17;
display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
background: rgba(24, 25, 28, 0.94); color: var(--panel-fg);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: var(--radius-card); padding: 8px 12px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
#measure-readout { font-variant-numeric: tabular-nums; font-weight: 600; }
body.measuring .maplibregl-canvas { cursor: crosshair !important; }
.measure-vtx { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2.5px solid #5856D6;
box-shadow: 0 1px 3px rgba(0,0,0,0.4); cursor: grab; }
.measure-vtx:active { cursor: grabbing; }
body.placing-point .maplibregl-canvas { cursor: crosshair !important; }
/* The layers panel is a .map-pop like the others. It used to be its own card
pinned under a toolbar that no longer exists, and that id rule outranked
.map-pop: the panel opened at 100% of the body height — just below the
bottom edge, off screen, so the button looked dead (field report
17 Sep 2026). Only the bits .map-pop does not cover are left here. */
#layers-pop label {
display: flex; align-items: center; gap: 8px;
font-size: 13px; cursor: pointer; white-space: nowrap;
}
#layers-pop input[type="checkbox"] { accent-color: var(--accent); }
/* ---------------- weather (P2-27) ------------------------------------------ */
/* The app's weather box under the brand: the Yr symbol and the temperature. */
#weather-chip {
position: absolute; top: 52px; left: 12px; z-index: 12;
display: flex; align-items: center; gap: 4px;
height: 44px; min-width: 44px; padding: 0 12px 0 8px;
background: rgba(17, 18, 21, 0.78);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
backdrop-filter: blur(14px) saturate(1.4);
border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 22px;
color: #fff; font: inherit; font-size: 20px; font-weight: 700; cursor: pointer;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
#weather-chip:hover { background: rgba(38, 40, 46, 0.9); }
#weather-chip img { width: 30px; height: 30px; }
#weather-card {
position: absolute; top: 52px; left: 12px; z-index: 16;
width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - 110px); overflow-y: auto;
background: rgba(24, 25, 28, 0.94);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
backdrop-filter: blur(16px) saturate(1.4);
border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--radius-sheet);
color: var(--panel-fg); padding: 12px 14px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
#weather-card .dlg-head { margin-bottom: 2px; }
#weather-card .dlg-head h3 { flex: 1; margin: 0; font-size: 18px; font-weight: 800; }
#weather-close {
background: rgba(255,255,255,0.12); color: var(--panel-fg);
border: none; border-radius: 50%; width: 30px; height: 30px;
font-size: 14px; cursor: pointer; flex: none;
}
#weather-refresh { color: var(--accent-text); }
#weather-refresh.spinning .icon-glyph { animation: weather-spin 0.9s linear infinite; }
@keyframes weather-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #weather-refresh.spinning .icon-glyph { animation: none; } }
#weather-where { margin: 0 0 8px; font-size: 12px; }
.weather-note { margin: 16px 0; text-align: center; }
.weather-stamp { display: flex; align-items: center; justify-content: center; gap: 6px;
font-size: 12px; color: var(--muted); margin: 6px 0 8px; }
.weather-stamp .icon-glyph { width: 14px; height: 14px; }
.weather-stamp.flash { color: var(--live); font-weight: 700; }
.weather-hours { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.weather-hour {
flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 8px; min-width: 62px;
background: rgba(255, 255, 255, 0.06); border-radius: var(--radius-card);
}
.wh-time, .wh-dir { font-size: 12px; color: var(--muted); }
.wh-temp { font-size: 16px; font-weight: 700; }
.wh-wind { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--muted); }
.wh-wind .icon-glyph { width: 11px; height: 11px; }
.wh-rain { font-size: 11px; color: var(--accent-text); }
.weather-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; margin: 10px 0 4px; }
.wd-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.wd-cell .icon-glyph { width: 14px; height: 14px; color: var(--muted); }
.wd-value { font-size: 14px; font-weight: 600; }
.wd-label { font-size: 11px; color: var(--muted); }
.weather-credit { text-align: center; font-size: 12px; margin: 10px 0 0; }
/* «Sol og måne»: the weather card's row (the app's SunMoonEntryRow). */
.sunmoon-entry {
display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--touch);
margin: 0 0 8px; padding: 8px 10px; border: none; border-radius: var(--radius-card);
background: rgba(255, 255, 255, 0.06); color: var(--panel-fg); font: inherit; text-align: left; cursor: pointer;
}
.sunmoon-entry:hover { background: rgba(255, 255, 255, 0.1); }
.sunmoon-entry .sm-sun-icon { width: 22px; height: 22px; flex: none; }
.sunmoon-entry-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sunmoon-entry-text strong { font-size: 15px; }
.sunmoon-entry-text .muted { font-size: 12px; }
.sunmoon-entry-chevron { width: 14px; height: 14px; color: var(--muted); flex: none; }
.sm-sun-icon { color: var(--sun); }
/* The «Sol og måne» window (the app's SunMoonView). */
dialog#sunmoon-dialog {
border: none; border-radius: var(--radius-sheet); padding: 16px;
background: var(--panel-bg); color: var(--panel-fg);
width: 460px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow-y: auto;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
dialog#sunmoon-dialog::backdrop { background: rgba(0,0,0,0.45); }
#sunmoon-close {
background: rgba(255,255,255,0.12); color: var(--panel-fg);
border: none; border-radius: 50%; width: 30px; height: 30px; font-size: 14px; cursor: pointer;
}
.sm-place { margin-bottom: 12px; }
.sm-place-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.sm-place-line .icon-glyph { width: 16px; height: 16px; color: var(--accent-text); }
.sm-place-line .muted { font-size: 13px; }
.sm-zone { font-size: 12px; margin: 6px 0 0; }
.sm-place-actions { display: flex; gap: 8px; margin-top: 8px; }
.sm-place-actions .tn-btn, .sm-now { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; }
.sm-place-actions .icon-glyph, .sm-now .icon-glyph { width: 16px; height: 16px; }
.sm-card { background: rgba(255,255,255,0.05); border-radius: var(--radius-card); padding: 12px; margin-bottom: 12px; }
.sm-chips { display: flex; gap: 8px; }
.sm-chip {
display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
border: none; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.sm-chip .icon-glyph { width: 16px; height: 16px; }
.sm-chip.sun { --c: var(--sun); } .sm-chip.moon { --c: var(--moon); }
.sm-chip { color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.sm-chip.on { color: #fff; background: var(--c); }
.sm-heading { text-align: center; font-size: 14px; font-weight: 600; color: var(--muted); margin: 8px 0 4px;
font-variant-numeric: tabular-nums; }
.sm-dial { display: block; width: 100%; max-width: 380px; margin: 0 auto; }
.sm-dial text { fill: var(--text); font-family: inherit; }
.sm-dial .sm-dial-small { font-size: 9px; fill: var(--muted); }
.sm-dial .sm-dial-cardinal { font-size: 12px; font-weight: 700; }
.sm-dial .sm-dial-cardinal.north { fill: var(--accent-text); }
.sm-dial .sm-dial-ordinal { font-size: 11px; fill: var(--muted); }
.sm-dial .sm-dial-hour { font-size: 9px; font-weight: 600; }
.sm-dial .sm-dial-hour.below { fill: var(--muted); }
.sm-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; font-size: 12px; color: var(--muted); margin-top: 8px; }
.sm-legend span { display: inline-flex; align-items: center; gap: 4px; }
.sm-key { display: inline-block; width: 18px; height: 0; border-top: 2.5px solid var(--sun); }
.sm-key.moon { border-top: 2px solid var(--moon); }
.sm-key.solstice { border-top: 1px dashed color-mix(in srgb, var(--sun) 60%, transparent); }
.sm-key.equinox { border-top: 1.5px dotted color-mix(in srgb, var(--sun) 60%, transparent); }
.sm-when { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.sm-date { font-size: 16px; font-weight: 700; }
.sm-time { font-size: 14px; font-variant-numeric: tabular-nums; }
.sm-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 8px; }
.sm-card input[type="range"] { width: 100%; accent-color: var(--accent); }
.sm-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sm-months span { flex: 1; text-align: center; }
.sm-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sm-card-head h4 { margin: 0; font-size: 16px; flex: 1; }
.sm-card-head .sm-sun-icon { width: 20px; height: 20px; }
.sm-moon-glyph { width: 20px; height: 20px; flex: none; }
.sm-light { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
background: color-mix(in srgb, var(--sun) 8%, transparent); }
.sm-light.up { background: color-mix(in srgb, var(--sun) 18%, transparent); }
.sm-phase { font-size: 12px; font-weight: 600; text-align: right; }
.sm-polar { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--accent-text); }
.sm-row { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; padding: 3px 0; }
.sm-row .k { color: var(--muted); }
.sm-row .v { font-variant-numeric: tabular-nums; text-align: right; }
.sm-card hr { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 6px 0; }
.sm-note { font-size: 11px; margin: 6px 0 0; }
/* ---------------- place search ------------------------------------------- */
#search-box {
position: absolute; top: 96px; left: 12px; z-index: 14;
width: 320px;
max-width: max(220px, calc(100vw - var(--sidebar-width) - 40px));
}
#search-input {
width: 100%; height: 34px; padding: 0 14px 0 32px;
background: rgba(17, 18, 21, 0.78);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
backdrop-filter: blur(14px) saturate(1.4);
border: 1px solid rgba(255, 255, 255, 0.09);
color: var(--panel-fg);
border-radius: var(--radius-card); font-size: 13px; font-family: inherit;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: left 11px center;
}
#search-input:focus {
outline: none; border-color: var(--accent);
}
#search-input::placeholder { color: var(--muted); }
#search-results {
margin-top: 6px; background: var(--panel-bg); color: var(--panel-fg);
border-radius: var(--radius-card); padding: 4px;
box-shadow: 0 8px 30px rgba(0,0,0,0.45);
max-height: 45vh; overflow-y: auto;
}
/* A row: the kind's icon, name and subtitle; a hit's «Opprett punkt her» pin at its end. */
.sr-item { display: flex; align-items: center; gap: 2px; }
.sr-row {
display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
background: none; border: none; color: var(--panel-fg);
padding: 7px 10px; border-radius: var(--radius-control); cursor: pointer; text-align: left;
}
.sr-row:hover { background: rgba(255,255,255,0.08); }
.sr-row .icon-glyph { width: 18px; height: 18px; flex: none; color: var(--muted); }
.sr-row .icon-glyph.sr-ic-accent { color: var(--accent); }
.sr-row .icon-glyph.sr-ic-red { color: #FF3B30; }
.sr-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
button.icon.sr-add { width: 32px; height: 32px; padding: 0; color: var(--accent); }
button.icon.sr-add .icon-glyph { width: 18px; height: 18px; }
.sr-name { font-size: 13.5px; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-sub { font-size: 11.5px; color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-note { padding: 8px 10px; font-size: 12.5px; color: var(--muted); }
dialog#exporthub-dialog,
dialog#export-dialog,
dialog#report-dialog {
border: none; border-radius: var(--radius-sheet); padding: 18px;
background: var(--panel-bg); color: var(--panel-fg);
width: 340px; max-width: calc(100vw - 40px);
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
dialog#exporthub-dialog::backdrop,
dialog#export-dialog::backdrop,
dialog#report-dialog::backdrop { background: rgba(0,0,0,0.45); }
.hub-buttons { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.hub-buttons button { text-align: left; padding: 10px 12px; }
.hub-sub { margin: 16px 0 4px; font-size: 13px; }
#hub-shares { max-height: 36vh; overflow-y: auto; margin: 6px 0; }
.share-row {
display: flex; align-items: center; gap: 4px; padding: 7px 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.share-main { flex: 1; min-width: 0; }
.share-title {
font-size: 13.5px; font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
dialog#export-dialog h3,
dialog#report-dialog h3 { margin: 0 0 12px; font-size: 16px; }
#export-list, #report-list, #sharepreview-list { max-height: 45vh; overflow-y: auto; margin: 6px 0; }
#export-list .exp-group,
#sharepreview-list .exp-group,
#report-list .exp-group {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
color: var(--muted); margin: 10px 0 4px;
display: flex; justify-content: space-between; align-items: center;
}
#export-list .exp-group button,
#sharepreview-list .exp-group button,
#report-list .exp-group button {
background: none; border: none; color: var(--accent);
font-size: 12px; cursor: pointer; text-transform: none; letter-spacing: 0;
}
#export-list label,
#sharepreview-list label,
#report-list label {
display: flex; align-items: center; gap: 8px; padding: 4px 2px;
font-size: 13.5px; cursor: pointer;
}
#export-list input[type="checkbox"],
#report-list input[type="checkbox"] { accent-color: var(--accent); }
/* ---------------- right sidebar, full height, horizontal collapse -------- */
#sidebar {
position: absolute; top: 0; right: 0; bottom: 0; z-index: 20;
width: var(--sidebar-width); max-width: calc(100vw - 52px);
background: var(--panel-bg); color: var(--panel-fg);
-webkit-backdrop-filter: blur(14px); /* Safari < 18 */
backdrop-filter: blur(14px);
box-shadow: -8px 0 30px rgba(0,0,0,0.35);
transition: transform 0.25s ease;
}
/* 100% of the ACTUAL width: with max-width active on narrow windows a fixed
350px translate pushed the handle off-screen, leaving no way back. */
#sidebar.collapsed { transform: translateX(100%); }
#sidebar-handle {
position: absolute; left: -40px; top: 50%; transform: translateY(-50%);
display: flex; align-items: center; justify-content: center;
width: 40px; height: 72px;
border: none; border-radius: var(--radius-card) 0 0 12px;
background: var(--panel-bg); color: var(--panel-fg);
font-size: 15px; cursor: pointer;
box-shadow: -6px 0 18px rgba(0,0,0,0.3);
}
#sidebar.collapsed #sidebar-handle { border-radius: var(--radius-card) 0 0 12px; }
#sidebar-scroll {
height: 100%; overflow-y: auto; padding: 14px;
display: flex; flex-direction: column; gap: 12px;
}
#userbox {
display: flex; align-items: center; gap: 8px; font-size: 14px;
padding: 2px 2px 0;
}
#userbox .spacer { flex: 1; }
#user-chip { display: inline-flex; }
#sidebar section {
background: rgba(255,255,255,0.05);
border-radius: var(--radius-sheet); padding: 16px;
}
#sidebar h1 { font-size: 17px; margin: 0 0 8px; }
#sidebar h2 { font-size: 13px; margin: 0 0 8px; text-transform: uppercase;
letter-spacing: 0.6px; color: var(--muted); }
#sidebar p { font-size: 13px; line-height: 1.45; color: var(--muted); margin: 0 0 12px; }
#apple-button {
width: 100%; padding: 11px 14px;
background: #fff; color: #000;
border: none; border-radius: var(--radius-card);
font-size: 15px; font-weight: 600; cursor: pointer;
}
#apple-button:hover { background: #e8e8ed; }
#dev-button {
width: 100%; margin-top: 8px; padding: 9px;
background: rgba(255,255,255,0.12); color: var(--panel-fg);
border: 1px dashed rgba(255,255,255,0.3); border-radius: var(--radius-card);
font-size: 13px; cursor: pointer;
}
button.ghost {
background: rgba(255,255,255,0.14); color: #fff;
border: none; border-radius: var(--radius-control); padding: 6px 12px;
font-size: 13px; cursor: pointer;
}
button.ghost:hover { background: rgba(255,255,255,0.24); }
button.small { padding: 4px 9px; font-size: 14px; }
.error { color: var(--error) !important; }
.muted { color: var(--muted); }
/* ---------------- projects and items ------------------------------------ */
/* A project is a card: its head, members and sections all live inside one
frame, so where one project ends and the next begins is plain (field
request 19 Sep 2026). The active project's frame is green. */
.project {
position: relative; /* the active tag hangs on the top edge */
background: rgba(255,255,255,0.045);
border: 1px solid rgba(255,255,255,0.10);
border-radius: var(--radius-card);
padding: 4px 10px 6px;
margin: 8px 0;
}
/* Room for the tag: it reaches 10 px above the border, and the name moves
down so the tag does not sit on it. */
.project.is-active { border-color: rgba(52,199,89,0.55); margin-top: 18px; padding-top: 12px; }
/* The card (24 Sep 2026): the name runs the full width on top with the eye
level with it at the right; under the name the 80×60 thumbnail and the
summary; the right column stacks eye, ⋯, chevron top to bottom. The
active card wears a tag on its top edge (.active-mark). */
.project-head { display: flex; align-items: flex-start; gap: 6px; padding: 4px 0 2px; }
.project-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.project-row { display: flex; align-items: flex-start; gap: 10px; }
.project-head input { accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.project-tools { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.project-head .project-tools button.icon { width: 34px; height: 28px; padding: 0; flex: none;
display: inline-flex; align-items: center; justify-content: center; }
/* The top button (the eye) is as tall as the name's line, so the two share
a centre. */
.project-head .project-tools > button.icon:first-child { height: 20px; }
.project-thumb-col { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 80px; flex: none; }
.project-thumb { width: 80px; height: 60px; border-radius: 8px; overflow: hidden;
background: rgba(255,255,255,0.10); border: 0.5px solid rgba(255,255,255,0.12);
display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.project-thumb canvas { width: 100%; height: 100%; display: block; }
.project-thumb-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); }
.project-text { flex: 1; min-width: 0; min-height: 60px; display: flex; flex-direction: column; gap: 4px; }
.project-name {
width: 100%; min-width: 0; display: flex; align-items: center;
text-align: left; background: none; border: none; cursor: pointer;
color: var(--panel-fg); font-size: 17px; font-weight: 600; padding: 0 2px;
}
.project-name-label {
min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.project-summary { font-size: 12px; line-height: 1.3; color: var(--muted);
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.project-controls { margin-top: auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
button.icon.project-chevron { color: var(--muted); }
button.icon.project-chevron .icon-glyph { width: 16px; height: 16px; }
.chevron { color: var(--muted); font-size: 12px; flex: none;
display: inline-flex; align-items: center; }
.chevron .icon-glyph { width: 13px; height: 13px; stroke-width: 2; }
/* The ⋯ project menu button and its popover. */
button.icon.kebab { padding: 3px 6px; }
.vertex-menu { position: fixed; z-index: 60; }
.ctx-menu button.destructive { color: #ff453a; }
.ctx-menu {
position: fixed; z-index: 80; min-width: 195px;
background: rgba(28, 29, 33, 0.95);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
backdrop-filter: blur(14px) saturate(1.4);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-card); padding: 4px;
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
display: flex; flex-direction: column;
}
.ctx-menu button {
display: flex; align-items: center; gap: 9px; width: 100%;
background: none; border: none; cursor: pointer;
color: var(--panel-fg); font-size: 13px; font-weight: 500;
padding: 8px 10px; border-radius: var(--radius-control); text-align: left;
font-family: inherit;
}
.ctx-menu button:hover { background: rgba(255, 255, 255, 0.09); }
.ctx-glyph {
width: 18px; flex: none; color: var(--muted); font-size: 14px;
display: inline-flex; align-items: center; justify-content: center;
}
.ctx-glyph .icon-glyph { width: 16px; height: 16px; }
/* Member photo-chips, like the app's avatar row. */
.member-chip {
width: 26px; height: 26px; border-radius: 50%;
border: 2px solid rgba(255,255,255,0.55);
box-shadow: 0 1px 4px rgba(0,0,0,0.4);
overflow: hidden; flex: none;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; color: #fff;
background: #666;
}
.member-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.member-chip.small { width: 20px; height: 20px; font-size: 10px; border-width: 1.5px; }
.group { margin: 2px 0 8px 4px; }
.group-empty { font-size: 12px; color: var(--muted); padding: 2px 8px 8px 26px; line-height: 1.4; }
/* The app's sortMenuRow: the sort icon and the current choice, quiet, on
top of a section (P2-29). */
.sort-row {
display: inline-flex; align-items: center; gap: 6px;
background: none; border: none; cursor: pointer; font: inherit;
font-size: 12px; color: var(--muted); padding: 2px 8px 6px 26px;
border-radius: var(--radius-control);
}
.sort-row:hover { color: var(--panel-fg); }
.sort-row .icon-glyph { width: 14px; height: 14px; }
#projects-sort .sort-row { padding: 8px 2px 2px; }
.group-title {
display: flex; align-items: center; gap: 6px; width: 100%;
background: none; border: none; cursor: pointer;
padding: 6px 2px 4px; margin: 2px 0 0; text-align: left;
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.6px; color: var(--muted); border-radius: var(--radius-control);
}
.group-title:hover { color: var(--panel-fg); background: rgba(255,255,255,0.06); }
.group-count { margin-left: 6px; font-weight: 500; opacity: 0.7; }
.item {
display: flex; align-items: center; gap: 9px;
padding: 5px 4px; border-radius: var(--radius-control);
}
.item:hover { background: rgba(255,255,255,0.07); }
/* Map thumbnails, same anatomy as the app's 106x80 cards. */
.thumb {
width: 88px; height: 66px; flex: none;
border-radius: var(--radius-control); object-fit: cover;
background: rgba(255,255,255,0.08);
box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.25);
}
.thumb-doc {
display: flex; align-items: center; justify-content: center;
font-size: 26px; cursor: pointer;
}
.item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item-name {
text-align: left; background: none; border: none;
cursor: pointer; color: var(--panel-fg); font-size: 13.5px; font-weight: 600;
padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item-sub { font-size: 11.5px; color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The app's left column: owner, padlock, eye — one round chip each. */
.item-side { display: flex; flex-direction: column; align-items: center; gap: 4px;
width: 26px; flex: none; }
button.icon.side-chip { width: 24px; height: 24px; padding: 0; border-radius: 50%;
background: rgba(255,255,255,0.09); font-size: 12px; }
button.icon.side-chip:hover { background: rgba(255,255,255,0.18); }
button.icon.side-chip.lock-private { color: #FF9500; }
button.icon.side-chip:disabled { cursor: default; opacity: 1; }
.item-title-line { display: flex; align-items: center; gap: 2px; min-width: 0; }
.item-title-line .item-name { flex: 0 1 auto; min-width: 0; }
button.icon.item-pencil { padding: 2px 4px; }
button.icon {
flex: none; background: none; border: none; cursor: pointer;
font-size: 14px; color: var(--muted); padding: 3px 4px; border-radius: var(--radius-control);
display: inline-flex; align-items: center; justify-content: center;
}
button.icon:hover { background: rgba(255,255,255,0.12); color: var(--panel-fg); }
button.icon.eye-on { color: #34c759; }
/* The folder eye's middle state: only the projects whose own eye is on. */
button.icon.eye-own { color: #FFCC00; }
/* Drawn to read like the app's SF Symbols: same subjects, rounded strokes,
one weight. `.solid` is the filled part of a .fill symbol. */
.icon-glyph {
width: 17px; height: 17px; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round;
}
.icon-glyph .solid { fill: currentColor; stroke: none; }
button.icon:disabled { opacity: 0.5; cursor: default; }
button.ghost .icon-glyph { width: 15px; height: 15px; vertical-align: -3px; }
#reload { display: inline-flex; align-items: center; justify-content: center; }
/* ---------------- dialog, toast, status, pins ---------------------------- */
dialog#edit-dialog {
border: none; border-radius: var(--radius-sheet); padding: 0;
background: var(--panel-bg); color: var(--panel-fg);
width: 320px; max-width: calc(100vw - 40px);
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
dialog#edit-dialog::backdrop { background: rgba(0,0,0,0.45); }
#edit-form { padding: 18px; }
#edit-form h3 { margin: 0 0 12px; font-size: 16px; }
.field { display: block; margin-bottom: 10px; }
.field span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.field input[type="text"] {
width: 100%; padding: 8px 10px; border-radius: var(--radius-control);
border: 1px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.08); color: var(--panel-fg); font-size: 14px;
}
.field input[type="color"] {
width: 48px; height: 32px; border: none; background: none; padding: 0; cursor: pointer;
}
.field input[type="range"] { width: 100%; accent-color: var(--accent); }
.field select {
width: 100%; padding: 9px 10px; border-radius: var(--radius-control);
border: 1px solid rgba(255,255,255,0.16);
background: rgba(255,255,255,0.06); color: var(--panel-fg);
font: inherit; font-size: 14px;
}
.field select option { background: #1c1c1e; color: var(--panel-fg); }
.dialog-buttons { display: flex; gap: 8px; margin-top: 14px; align-items: center; }
.dialog-buttons .spacer { flex: 1; }
button.primary {
background: var(--accent); color: #fff; border: none; border-radius: var(--radius-control);
padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
}
button.ghost.dark { background: rgba(255,255,255,0.12); }
button.destructive {
background: none; border: none; color: var(--error);
font-size: 14px; cursor: pointer; padding: 8px 4px;
}
/* ---------------- point photo card -------------------------------------- */
dialog#photo-dialog {
border: none; border-radius: var(--radius-sheet); padding: 16px;
background: var(--panel-bg); color: var(--panel-fg);
/* Large, like the app's full-height photo card (field request 19 Sep 2026). */
width: min(960px, calc(100vw - 32px)); max-width: calc(100vw - 32px);
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
dialog#photo-dialog::backdrop { background: rgba(0,0,0,0.45); }
#photo-head, .dlg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
#photo-head h3, .dlg-head h3 {
flex: 1; margin: 0; font-size: 17px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#photo-close, #cluster-close, #vern-close, #route-close, #album-close, #speeds-close, #settings-close, #analysis-close {
background: rgba(255,255,255,0.12); color: var(--panel-fg);
border: none; border-radius: 50%; width: 30px; height: 30px;
font-size: 14px; cursor: pointer;
}
#photo-strip {
display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
gap: 8px; border-radius: var(--radius-card); scrollbar-width: none;
}
#photo-strip::-webkit-scrollbar { display: none; }
.photo-frame { flex: 0 0 100%; width: 100%; scroll-snap-align: center; border-radius: var(--radius-card); overflow: hidden;
background: rgba(0,0,0,0.35); }
#photo-strip img { display: block; width: 100%; height: 72vh; max-height: 72vh; object-fit: contain; }
#photo-stage { position: relative; }
.photo-arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
background: rgba(0,0,0,0.4); color: #fff; font-size: 26px; line-height: 1;
display: flex; align-items: center; justify-content: center; padding-bottom: 3px;
}
.photo-arrow:hover { background: rgba(0,0,0,0.6); }
.photo-arrow[hidden] { display: none; }
#photo-prev { left: 10px; }
#photo-next { right: 10px; }
/* Dots: at most ~220 px; more than fit scroll with the current one and fade
at both ends. */
#photo-dots { display: flex; gap: 6px; margin: 8px auto 0; max-width: 220px; width: max-content;
overflow: hidden; scroll-behavior: smooth; padding: 0 2px; }
#photo-dots.overflow { width: 220px; padding: 0 24px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
#photo-caption { margin: 10px 2px 0; font-size: 14px; }
#photo-dots span {
flex: none;
width: 7px; height: 7px; border-radius: 50%;
background: rgba(255,255,255,0.3);
}
#photo-dots span.active { background: var(--panel-fg); }
#photo-meta { margin: 12px 2px 12px; font-size: 14px; display: grid; gap: 8px; }
#photo-coord-row { display: flex; align-items: center; gap: 8px; }
#photo-coord {
flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13px; letter-spacing: 0.3px;
}
#photo-format {
background: rgba(255,255,255,0.1); color: var(--panel-fg);
border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-control);
font-size: 12px; padding: 4px 6px;
}
#photo-details { width: 100%; padding: 11px; font-size: 15px; }
/* Polygon shape editor: floating save bar + vertex handles. */
#polyedit-bar {
position: absolute; bottom: 24px;
z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
background: rgba(28, 28, 30, 0.92); color: #f2f2f7;
padding: 10px 14px; border-radius: var(--radius-sheet);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); font-size: 13px;
max-width: 560px;
}
/* The hint takes the line; the three buttons keep together and drop under
it, to the right, when the map is too narrow for both. */
#polyedit-hint { line-height: 1.35; flex: 1 1 240px; min-width: 0; }
.bar-actions { display: flex; gap: 10px; flex: none; margin-left: auto; }
#polyedit-save:disabled { opacity: 0.5; cursor: default; }
.poly-vtx {
width: 15px; height: 15px; border-radius: 50%;
background: #fff; border: 3px solid #5856D6;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); cursor: grab;
/* Like .pin: never set position — the div IS the maplibre marker element. */
}
/* The «+» on the line where a click inserts a point (no pointer events: the click is the map's). */
.insert-plus { width: 22px; height: 22px; border-radius: 50%; background: #5856D6; color: #fff; font: 700 18px/22px system-ui, sans-serif;
text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,0.5); pointer-events: none; }
.maplibregl-canvas.insert-cursor { cursor: copy !important; }
body.poly-adding .maplibregl-canvas { cursor: crosshair !important; }
.card-head {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.card-head h2 { margin: 0; }
/* The app's three starting points, same shape: equal accent-tinted cards with
the icon above the label. */
.action-bar { display: flex; gap: 6px; margin: 8px 0 2px; }
/* The three ways in are peers: joining a project someone shared is no lesser
an action than making one. They sit on the elevated surface in ordinary
text — the faint tint they used to carry read washed out, and filling one
of them invented a hierarchy the product does not have (22 Sep 2026). The
app's Prosjekter tab does the same. All three carry oxblood 600, chosen by
eye over the lighter 400 and the darker 700: 1.48:1 against the panel and
10.2:1 for the white text. */
.action-bar .action {
flex: 1 1 0; min-width: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px; padding: 10px 4px; min-height: 66px;
background: var(--oxblood-700); color: #fff;
border: none; border-radius: var(--radius-card); cursor: pointer;
font: inherit; font-size: 11.5px; font-weight: 700; line-height: 1.2;
text-align: center;
}
.action-bar .action:hover { filter: brightness(1.18); }
.action-bar .action .icon-glyph { width: 21px; height: 21px; }
.folder-empty { margin: 2px 0 6px 18px; font-size: 12px; }
/* Folder tree in the project list. */
/* A folder is a tinted header bar with its contents framed underneath —
nothing like a project card, and its end is where the frame closes. */
.folder {
margin: 10px 0;
border: 1px solid rgba(179, 72, 72, 0.35);
border-radius: var(--radius-sheet);
background: rgba(179, 72, 72, 0.05);
overflow: hidden;
}
.folder .folder { margin: 8px 0; }
.folder-head {
display: flex; align-items: center; gap: 6px; padding: 7px 8px;
background: rgba(179, 72, 72, 0.16);
}
.folder.collapsed .folder-head { background: rgba(179, 72, 72, 0.12); }
.folder-body { padding: 2px 8px 6px; }
/* Two lines: the name over the count, and the two tools stacked opposite. */
.folder-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.folder-count { font-size: 11.5px; font-weight: 500; color: var(--muted); }
/* The count line: the count, then a green dot and «Aktiv» when the active
project sits in this folder or below it. */
.folder-meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.folder-active { display: inline-flex; align-items: center; gap: 5px;
font-size: 11.5px; font-weight: 700; color: #34c759; white-space: nowrap; }
.folder-active-dot { width: 7px; height: 7px; border-radius: 50%; background: #34c759; }
.folder-tools { display: flex; flex-direction: column; align-items: center; gap: 0; flex: none; }
.folder-name {
flex: 1; min-width: 0; text-align: left;
display: flex; align-items: center; gap: 7px;
background: none; border: none; cursor: pointer;
color: var(--panel-fg); font-size: 14.5px; font-weight: 700;
overflow: hidden;
}
.folder-name .icon-glyph:first-child { width: 13px; height: 13px; stroke-width: 2;
color: var(--muted); }
.folder-name .icon-glyph:nth-child(2) { width: 19px; height: 19px; color: var(--accent);
fill: rgba(179, 72, 72, 0.45); }
.folder-name-label { min-width: 0; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
/* Share preview: floating panel beside the live map preview. */
#sharepreview-panel {
position: absolute; top: 76px; left: 12px; z-index: 25;
width: 300px; max-width: calc(100vw - 24px);
max-height: calc(100vh - 120px); overflow-y: auto;
background: var(--panel-bg); color: var(--panel-fg);
border-radius: var(--radius-sheet); padding: 14px 16px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
#sharepreview-panel h3 { margin: 0 0 8px; font-size: 15px; }
#sharepreview-list { max-height: 38vh; overflow-y: auto; margin: 6px 0; }
/* Nothing can be made while a share page is previewed: the pencil, its
menu and the measure bar go with the sidebar (P1-34, 25 Sep 2026). */
body.share-previewing #sidebar,
body.share-previewing #weather-chip,
body.share-previewing #weather-card,
body.share-previewing #search-box,
body.share-previewing #btn-tools,
body.share-previewing #tools-pop,
body.share-previewing #measure-bar,
body.share-previewing #polyedit-bar { display: none; }
#toast {
position: absolute; top: 20px;
z-index: 40; background: rgba(38,38,38,0.92); color: #fff;
padding: 10px 18px; border-radius: var(--radius-card);
font-size: 14px; font-weight: 600; text-align: center;
box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
/* A save waiting for its retry, or one that did not land: the toast's place,
under it, and it stays while it is true. */
#write-status {
position: absolute; top: 20px; z-index: 39;
background: rgba(38,38,38,0.94); color: #fff;
border-left: 3px solid var(--recent);
padding: 9px 16px; border-radius: var(--radius-card);
font-size: 13.5px; font-weight: 600; text-align: center;
box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
#status {
position: absolute; bottom: 18px;
z-index: 10; background: var(--panel-bg); color: var(--panel-fg);
padding: 8px 16px; border-radius: 999px; font-size: 13px;
box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.pin {
width: 16px; height: 16px; border-radius: 50%;
border: 2.5px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,0.5);
cursor: pointer;
/* NEVER set position here: the pin div IS the maplibre marker element,
whose absolute positioning + transform glue it to the map. Overriding
it made every pin float loose from the map (field bug 13 Sep 2026).
Absolute children still anchor fine — the marker is a positioned box. */
}
/* Live member positions: avatar chip pinned to the map. */
.peer-chip {
width: 32px; height: 32px; border-radius: 50%;
border: 2.5px solid #34c759; box-shadow: 0 1px 6px rgba(0,0,0,0.5);
overflow: hidden; background: #666; cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 700; color: #fff;
}
.peer-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* "Someone is out there right now", in the project row. */
.live-pill {
flex: none; display: inline-flex; align-items: center; gap: 4px;
padding: 2px 7px 2px 5px; border: none; border-radius: var(--radius-control); cursor: pointer;
background: rgba(52, 199, 89, 0.18); color: #34c759;
font: inherit; font-size: 11px; font-weight: 800;
}
.live-pill:hover { background: rgba(52, 199, 89, 0.3); }
.live-dot {
width: 7px; height: 7px; border-radius: 50%; background: #34c759;
box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.7);
animation: live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse {
70% { box-shadow: 0 0 0 6px rgba(52, 199, 89, 0); }
100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
/* Member status by the age of the last position: green live, amber recent,
grey stale (dimmed). Fill stays the member's colour; the ring is status. */
.peer-wrap.presence-recent .peer-chip { border-color: #ff9f0a; }
.peer-wrap.presence-stale .peer-chip { border-color: #98989e; filter: grayscale(0.6); opacity: 0.75; }
.peer-wrap.off-map { display: none !important; }
.peer-card-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px;
vertical-align: middle; box-shadow: 0 0 0 2.5px #34c759; }
.peer-card-dot.presence-recent { box-shadow: 0 0 0 2.5px #ff9f0a; }
.peer-card-dot.presence-stale { box-shadow: 0 0 0 2.5px #98989e; }
.peer-card-value.presence-live { color: #34c759; }
.peer-card-value.presence-recent { color: #ff9f0a; }
.peer-card-value.presence-stale { color: #98989e; }
/* A lone person carries a name tag too — the same tag a group shows. */
.peer-name-tag {
position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%);
}
.peer-name-tag.left { left: auto; right: calc(100% + 6px); }
/* Start/end of a route: the emoji itself, sitting on the coordinate. */
.route-end {
font-size: 20px; line-height: 1; cursor: default;
text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 0 2px rgba(255,255,255,0.8);
pointer-events: none;
}
/* The route's numbers, directly under its name in the edit dialog. */
.route-stats {
display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
gap: 8px 14px;
margin: 0 0 14px; padding: 10px 12px;
background: rgba(255,255,255,0.05); border-radius: var(--radius-card);
}
.route-stats .stat-cell { display: flex; flex-direction: column; gap: 1px; }
.route-stats .stat-label { font-size: 10.5px; text-transform: uppercase;
letter-spacing: 0.5px; color: var(--muted); }
.route-stats .stat-value { font-size: 14px; font-weight: 700; }
/* A badge that includes someone sharing their position wears their green
ring, so a pile with people in it reads as live at a glance. */
.cluster-badge.with-people { border-color: #34c759; }
/* Cluster badge: count circle standing in for huddled points. */
.cluster-badge {
width: 34px; height: 34px; border-radius: 50%;
background: #5856D6; color: #fff; border: 2.5px solid #fff;
box-shadow: 0 1px 6px rgba(0,0,0,0.5);
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 800; cursor: pointer;
}
dialog#cluster-dialog {
border: none; border-radius: var(--radius-sheet); padding: 16px;
background: var(--panel-bg); color: var(--panel-fg);
width: 340px; max-width: calc(100vw - 32px);
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
dialog#cluster-dialog::backdrop { background: rgba(0,0,0,0.45); }
#cluster-list { max-height: 55vh; overflow-y: auto; }
#cluster-list .cl-row {
display: flex; align-items: center; gap: 10px; width: 100%;
background: none; border: none; color: var(--panel-fg);
padding: 8px 4px; border-radius: var(--radius-card); cursor: pointer; text-align: left;
}
#cluster-list .cl-row:hover { background: rgba(255,255,255,0.08); }
#cluster-list .cl-pin {
width: 30px; height: 30px; flex: none;
display: flex; align-items: center; justify-content: center; font-size: 19px;
}
#cluster-list .cl-dot {
width: 14px; height: 14px; border-radius: 50%;
border: 2.5px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
#cluster-list .cl-main { flex: 1; min-width: 0; }
#cluster-list .cl-name { font-size: 14px; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cluster-list .cl-sub { font-size: 12px; color: var(--muted); }
#cluster-list .cl-thumb {
width: 44px; height: 44px; flex: none; border-radius: var(--radius-control); object-fit: cover;
}
.pin-photo-badge {
position: absolute; top: -8px; right: -9px;
width: 13px; height: 13px; border-radius: 50%;
background: var(--accent); color: #fff; border: 1.5px solid #fff;
font-size: 8px; font-weight: 800; line-height: 13px; text-align: center;
pointer-events: none;
}
.pin-emoji {
width: auto; height: auto; border: none; box-shadow: none;
background: none !important; font-size: 22px;
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.maplibregl-popup-content {
font-family: inherit; font-size: 13px; border-radius: var(--radius-card); padding: 10px 12px;
}
/* ---------------- route/track detail card -------------------------------- */
dialog#detail-dialog {
border: none; border-radius: var(--radius-sheet); padding: 16px;
background: var(--panel-bg); color: var(--panel-fg);
width: 380px; max-width: calc(100vw - 32px);
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
dialog#detail-dialog::backdrop { background: rgba(0,0,0,0.45); }
#detail-canvas {
width: 100%; height: auto; display: block;
border-radius: var(--radius-card); background: rgba(255,255,255,0.05);
}
#detail-noelev { margin: 4px 2px 0; font-size: 13px; }
#detail-stats {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px;
margin-top: 14px;
}
.stat-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
color: var(--muted); }
.stat-value { font-size: 15px; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---------------- member management --------------------------------------- */
dialog#members-dialog, dialog#history-dialog {
border: none; border-radius: var(--radius-sheet); padding: 16px;
background: var(--panel-bg); color: var(--panel-fg);
width: 360px; max-width: calc(100vw - 32px);
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
dialog#members-dialog::backdrop, dialog#history-dialog::backdrop { background: rgba(0,0,0,0.45); }
#history-body { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
#members-close, #detail-close, #history-close {
background: rgba(255,255,255,0.12); color: var(--panel-fg);
border: none; border-radius: 50%; width: 30px; height: 30px;
font-size: 14px; cursor: pointer; flex: none;
}
#members-list { display: flex; flex-direction: column; gap: 2px; }
.mem-row {
display: flex; align-items: center; gap: 10px;
padding: 6px 4px; border-radius: var(--radius-card);
}
.mem-row:hover { background: rgba(255,255,255,0.06); }
.mem-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mem-name { font-size: 14px; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mem-role { font-size: 11.5px; color: var(--muted); }
.mem-note { margin: 6px 4px 0; font-size: 12px; line-height: 1.4; }
#invite-row {
display: flex; align-items: center; gap: 8px;
margin-top: 12px; padding: 8px 10px;
background: rgba(255,255,255,0.06); border-radius: var(--radius-card); font-size: 12.5px;
}
#invite-code {
flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 15px; font-weight: 700; letter-spacing: 2px;
}
/* History (P2-28): the card's section, the windows' folded box, the
⋯ menu's dialog. */
.history-box { display: flex; flex-direction: column; gap: 2px; padding: 0 4px 4px 22px; }
.entity-history .history-box { padding: 4px 0 0; }
.entity-history-head {
display: flex; align-items: center; gap: 8px; width: 100%;
background: none; border: none; cursor: pointer; font: inherit;
color: var(--panel-fg); font-weight: 600; padding: 2px 0; text-align: left;
}
.entity-history-head .chevron { margin-left: auto; color: var(--muted); }
.entity-history-head .group-mark { color: var(--accent); width: 18px; height: 18px; }
.hist-creator { padding-bottom: 8px; }
.hist-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px;
color: var(--muted); padding: 6px 2px 2px; }
button.icon.item-kebab { flex: none; padding: 3px 4px; align-self: center; }
.hist-row { display: flex; align-items: center; gap: 9px; padding: 4px 2px; }
.hist-main { flex: 1; min-width: 0; }
.hist-text { font-size: 12.5px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-sub { font-size: 11px; color: var(--muted); }
.hist-note { font-size: 12.5px; color: var(--muted); padding: 6px 2px; }
/* «Medlemmer» rows: the whole row opens the members dialog. */
button.member-row {
width: 100%; background: none; border: none; cursor: pointer;
color: inherit; font: inherit; text-align: left;
}
button.member-row .item-name { display: block; }
button.member-row > .icon-glyph { width: 12px; height: 12px; flex: none; color: var(--muted); }
/* ---------------- sidebar filter + sort ----------------------------------- */
/* «Aktivt prosjekt: NAME» above the list: a line of information, not a card
— it must not read as one of the project boxes (23 Sep 2026). */
#active-project-row { display: flex; align-items: center; gap: 4px;
/* As much blank over this line as under it: the app's 21 px from the
buttons to the words and 22 px from the words to the first card, measured
on the phone (24 Sep 2026; 40 px read as a hole). */
margin: 17px 2px 18px; }
#active-project-box {
flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 5px;
background: none; border: none; padding: 2px 0; margin: 0; cursor: pointer;
font: inherit; font-size: 13px; text-align: left; color: var(--muted);
}
#active-project-box .apb-name { font-weight: 700; color: var(--panel-fg);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#active-project-box .apb-name.none { color: #ff9f0a; }
#active-project-box:hover .apb-name { text-decoration: underline; }
#active-project-help .icon-glyph { width: 16px; height: 16px; }
#filter-row { margin: 10px 0 2px; }
button.icon.filter-open { color: var(--accent-text); }
#filter-input {
width: 100%; padding: 7px 10px;
border-radius: var(--radius-control); border: 1px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.08); color: var(--panel-fg); font-size: 13px;
}
#filter-input::placeholder { color: var(--muted); }
/* The app's active switch, same shape and colour: a green capsule with a
white knob. New points, routes and drawings are saved into an active
project — on the phone and here. */
/* The project the user last put something into. A label, not a control. */
/* The active tag: a pill on the card's top edge at the left, in the card's
own green border, a pulsing dot and «Aktiv» inside (24 Sep 2026). The
fill is the panel's, so it cuts the border where it sits; the pulse is
the live pill's. */
.active-mark { position: absolute; top: -11px; left: 10px; z-index: 1;
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px 3px 7px; border-radius: 999px;
background: rgb(31, 27, 26); border: 1px solid rgba(52,199,89,0.55); }
.active-dot {
width: 8px; height: 8px; border-radius: 50%; background: #34c759;
box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.7);
animation: live-pulse 1.8s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) { .active-dot { animation: none; } }
.active-word { color: #34c759; font-size: 11px; font-weight: 800; letter-spacing: 0.03em;
line-height: 1; }
.active-switch {
flex: none; width: 34px; height: 20px; padding: 0; border: none;
border-radius: var(--radius-card); cursor: pointer; position: relative;
background: rgba(255,255,255,0.22); transition: background 0.15s ease;
}
.active-switch.on { background: #34c759; }
.active-switch > span {
position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.4);
transition: transform 0.15s ease;
}
.active-switch.on > span { transform: translateX(14px); }
/* The member card on the map: the app's fields, and the position in the
format you choose. */
.peer-card { display: flex; flex-direction: column; gap: 6px; min-width: 210px; }
.peer-card strong { font-size: 14px; }
.peer-card-lines { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.peer-card-lines > div { display: flex; justify-content: space-between; gap: 12px; }
.peer-card-value { color: #555; font-variant-numeric: tabular-nums; }
.peer-card-coord {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding-top: 4px; border-top: 1px solid rgba(0,0,0,0.1);
}
.peer-card-coord .peer-card-value {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: #222;
}
.peer-card-copy {
flex: none; border: none; background: var(--accent-tint); color: var(--accent-text);
border-radius: var(--radius-control); padding: 3px 8px; font: inherit; font-size: 11px; cursor: pointer;
}
.peer-card-format {
width: 100%; font: inherit; font-size: 12px; padding: 4px 6px;
border-radius: var(--radius-control); border: 1px solid rgba(0,0,0,0.18); background: #fff;
}
/* A point's coordinates in the chosen format, in the edit dialog. */
.coord-block-input {
flex: 1; min-width: 0; padding: 8px 10px; border-radius: var(--radius-control);
border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08);
color: var(--panel-fg);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px;
}
.coord-block-hint { font-size: 11.5px; color: var(--muted); min-height: 14px; }
.coord-block-hint.bad { color: var(--error); }
/* Faces and photos in the "what did you mean?" list. */
#cluster-list .cl-pin.cl-face {
width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
color: #fff; font-size: 14px; font-weight: 700;
box-shadow: 0 0 0 2px rgba(255,255,255,0.5);
}
#cluster-list .cl-pin.cl-photo { width: 34px; height: 34px; border-radius: var(--radius-control); overflow: hidden; }
#cluster-list .cl-pin img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Names of the people inside a badge, floating beside it. A grid, so the
tags never overlap each other however many there are. */
/* No `position` on marker elements: MapLibre places markers with its own
absolute positioning, and overriding it (as a `position: relative` here
once did) drops them into normal flow — badges landed kilometres off. The
marker's own absolute box already anchors the tags below. */
.cluster-tags {
position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%);
display: grid; grid-auto-flow: column; gap: 3px 4px;
pointer-events: auto;
}
.cluster-tag {
display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
padding: 2px 8px 2px 5px; border-radius: var(--radius-card); border: none; cursor: pointer;
background: rgba(28, 29, 33, 0.88); color: #fff;
font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.3;
box-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.cluster-tag:hover { background: rgba(48, 50, 56, 0.95); }
.cluster-tag-dot {
width: 8px; height: 8px; border-radius: 50%; flex: none;
box-shadow: 0 0 0 2px #34c759;
}
.cluster-tag.presence-recent .cluster-tag-dot { box-shadow: 0 0 0 2px #ff9f0a; }
.cluster-tag.presence-stale { opacity: 0.7; }
.cluster-tag.presence-stale .cluster-tag-dot { box-shadow: 0 0 0 2px #98989e; }
.cluster-tags.left { left: auto; right: calc(100% + 6px); }
.peer-wrap.presence-recent .peer-name-tag .cluster-tag-dot { box-shadow: 0 0 0 2px #ff9f0a; }
.peer-wrap.presence-stale .peer-name-tag { opacity: 0.7; }
.peer-wrap.presence-stale .peer-name-tag .cluster-tag-dot { box-shadow: 0 0 0 2px #98989e; }
/* Layer groups fold away, like the app's panel. */
.map-pop .pop-group-toggle {
display: flex; align-items: center; justify-content: space-between; width: 100%;
background: none; border: none; cursor: pointer; text-align: left;
font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
text-transform: uppercase; color: var(--muted); padding: 10px 8px 6px;
}
.map-pop .pop-group-toggle:hover { color: var(--panel-fg); }
.pop-group-chev { display: inline-flex; }
.pop-group-chev .icon-glyph { width: 14px; height: 14px; stroke-width: 2; }
.pop-group-body { display: flex; flex-direction: column; gap: 2px; }
.pop-note { margin: 2px 8px 6px; font-size: 12px; line-height: 1.35; color: var(--muted); }
.map-pop label input[disabled] + span { opacity: 0.5; }
/* Protected-area document — the app's VernDocView. */
dialog#vern-dialog {
border: none; border-radius: var(--radius-sheet); padding: 16px;
background: var(--panel-bg); color: var(--panel-fg);
width: 480px; max-width: calc(100vw - 32px);
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
dialog#vern-dialog::backdrop { background: rgba(0,0,0,0.45); }
#vern-body { max-height: 70vh; overflow-y: auto; font-size: 14px; line-height: 1.45; }
.vern-drone { background: var(--drone); color: #fff; border-radius: var(--radius-card); margin-bottom: 14px; }
.vern-drone summary {
display: flex; align-items: center; gap: 12px; padding: 12px;
cursor: pointer; list-style: none;
}
.vern-drone summary::-webkit-details-marker { display: none; }
.vern-drone summary::after { content: '›'; font-size: 20px; opacity: 0.85; transition: transform 0.15s; }
.vern-drone[open] summary::after { transform: rotate(90deg); }
.vd-icon { font-size: 22px; }
.vd-text { flex: 1; display: flex; flex-direction: column; }
.vd-text small { opacity: 0.9; font-size: 12px; }
.vd-detail { background: var(--panel-bg); color: var(--panel-fg); margin: 0 3px 3px;
border-radius: 0 0 10px 10px; padding: 4px 12px 10px; }
.vd-detail h5 { margin: 10px 0 4px; font-size: 14px; }
.vd-detail p { margin: 0 0 6px; }
.vd-source { display: flex; flex-direction: column; margin: 4px 0; }
.vd-source a { color: var(--accent-text); }
.vd-source small { opacity: 0.7; }
.vd-disclaimer { font-size: 11px; margin-top: 8px; }
.vern-meta { display: grid; grid-template-columns: 92px 1fr; gap: 4px 8px; margin: 0 0 12px; }
.vern-meta dt { opacity: 0.65; }
.vern-meta dd { margin: 0; }
.vern-links { display: flex; gap: 16px; font-size: 13px; padding-bottom: 12px;
border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: 10px; }
.vern-links a { color: var(--accent-text); }
.vern-forskrift h4 { font-size: 16px; margin: 14px 0 6px; }
.vern-forskrift h5 { font-size: 14px; margin: 12px 0 4px; }
.vern-forskrift p { margin: 0 0 10px; user-select: text; }
.vern-credit { font-size: 11px; margin-top: 12px; }
/* Route summary — the app's RouteSummaryView. */
dialog#route-dialog {
border: none; border-radius: var(--radius-sheet); padding: 16px;
background: var(--panel-bg); color: var(--panel-fg);
width: 460px; max-width: calc(100vw - 32px);
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
dialog#route-dialog::backdrop { background: rgba(0,0,0,0.45); }
#route-map {
display: block; width: 100%; aspect-ratio: 880 / 520; object-fit: cover;
border-radius: var(--radius-card); background: rgba(255,255,255,0.06); margin-bottom: 12px;
}
#route-info { margin-bottom: 12px; }
/* The secondary role, as the app draws the same list (step 4, 22 Sep 2026). */
.route-edit-btn {
width: 100%; min-height: var(--touch); padding: 0 var(--space-16);
display: flex; align-items: center; gap: 8px;
border: none; border-radius: 999px; cursor: pointer;
background: var(--accent-tint); color: var(--accent-text); font-size: 15px; font-weight: 600;
}
.route-edit-btn:hover { filter: brightness(1.15); }
.route-edit-btn .icon-glyph { flex: none; }
.route-profile-btn { display: none; } /* the expandable block replaced it (21 Sep 2026) */
.route-profile { margin: 0 0 12px; padding: 10px 12px; background: rgba(255,255,255,0.05); border-radius: var(--radius-card); }
.route-profile summary { cursor: pointer; display: flex; justify-content: space-between; font-weight: 600; list-style: none; }
.route-profile summary::before { content: '▸ '; }
.route-profile[open] summary::before { content: '▾ '; }
.route-profile-canvas { width: 100%; height: auto; margin-top: 10px; display: block; touch-action: none; cursor: crosshair; }
.route-coord-value.link-btn { font: inherit; padding: 0; color: var(--accent-text); }
/* Reisehastigheter: one dark panel, a column per number, a worked example per row. */
dialog#speeds-dialog { border: none; border-radius: var(--radius-sheet); padding: 16px 18px 18px; width: 560px; max-width: calc(100vw - 32px);
background: var(--panel-bg); color: var(--panel-fg); box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
dialog#speeds-dialog::backdrop { background: rgba(0,0,0,0.45); }
.speeds-intro { font-size: 12.5px; line-height: 1.45; margin: 0 0 12px; }
.speed-row { display: grid; grid-template-columns: minmax(0, 1.5fr) 92px 84px minmax(72px, 0.9fr) 28px; gap: 8px;
align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.speed-row:last-child { border-bottom: none; }
.speed-head { padding: 0 0 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); }
.speed-head span:nth-child(4) { text-transform: none; letter-spacing: 0; }
.speed-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.speed-name input { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; font-weight: 600; color: inherit;
background: none; border: 1px solid transparent; border-radius: var(--radius-control); padding: 5px 8px; margin-left: -8px; }
.speed-name input:hover { border-color: rgba(255,255,255,0.12); }
.speed-name input:focus { outline: none; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); }
.speed-tag { font-size: 10.5px; color: var(--muted); }
.speed-num { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px 0 0; border-radius: var(--radius-control);
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); }
.speed-num input { width: 100%; min-width: 0; font: inherit; font-size: 14px; color: inherit; background: none; border: none;
padding: 6px 0 6px 8px; text-align: right; -moz-appearance: textfield; }
.speed-num input::-webkit-outer-spin-button, .speed-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.speed-num:focus-within { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.09); }
.speed-num span { font-size: 11px; color: var(--muted); white-space: nowrap; }
.speed-example { font-variant-numeric: tabular-nums; font-size: 13px; text-align: right; color: var(--panel-fg); }
.speed-del { color: var(--muted); }
.speed-del:hover { color: #ff453a; }
.speed-del:disabled { opacity: 0.3; cursor: default; }
.speeds-foot { margin-top: 12px; }
.route-edit-btn.ghostish { color: var(--muted); }
.link-btn { background: none; border: none; color: var(--accent-text); cursor: pointer; padding: 6px 0 0; font-size: 13px; }
.route-nav-note { font-size: 12px; text-align: center; margin: 10px 0 0; }
/* Route start/end in the chosen coordinate format (the app's RouteInfoBox). */
.route-coords { display: flex; flex-direction: column; gap: 6px; margin-top: 10px;
padding: 10px 12px; border-radius: var(--radius-card); background: rgba(255,255,255,0.05); }
.route-coord-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.route-coord-value { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
text-align: right; user-select: text; }
.coord-format-select { max-width: 60%; }
/* Log-in only: logged out, the page is the login screen and nothing else
(share links never get this class). */
body.logged-out #map,
body.logged-out #weather-chip,
body.logged-out #weather-card,
body.logged-out #map-controls,
body.logged-out .map-pop,
body.logged-out #search-box,
body.logged-out #measure-bar,
body.logged-out #polyedit-bar,
body.logged-out #sharepreview-panel,
body.logged-out #sidebar-handle { display: none !important; }
body.logged-out { background: var(--panel-bg, #1c1c1e); }
body.logged-out #sidebar {
left: 0; width: auto; max-width: none; transform: none !important;
display: flex; align-items: center; justify-content: center;
box-shadow: none;
}
body.logged-out #sidebar-scroll {
width: min(440px, calc(100vw - 32px)); height: auto; overflow: visible;
}
body.logged-out #login-card { text-align: center; }
body.logged-out #apple-signin { display: flex; justify-content: center; }
/* The notice before the login (privacy round, 27 Sep 2026): what an account
stores and the policy link, small and above the button. */
#login-card p { font-size: 13.5px; line-height: 1.45; }
#login-card .login-note { color: var(--muted); font-size: 12.5px; margin-top: -4px; }
#login-card .login-links { margin: 4px 0 12px; font-size: 13px; }
#login-card .login-links a { color: var(--accent-text); }
/* A share page's footer: who publishes it and where its policy is. Bottom
centre, under MapLibre's own controls, over the map. */
#share-footer {
position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
z-index: 9; padding: 5px 12px; border-radius: 999px;
background: var(--glass); color: var(--muted); font-size: 12px; white-space: nowrap;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
#share-footer a { color: var(--accent-text); }
/* A share page's banner (owner request, 28 Sep 2026): a tester opened an old
share link, saw one project and thought the rest were gone. Top centre of
the MAP area — clear of the brand on the left, the tool stack and the
sidebar on the right; the open search box and pop-ups sit above it. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --share-banner-bg: #F5C400; --share-banner-fg: #141414; }
}
:root[data-theme="dark"] { --share-banner-bg: #F5C400; --share-banner-fg: #141414; }
.share-banner {
display: flex; flex-direction: column; align-items: center; gap: 4px;
text-align: center;
padding: 10px 18px; border-radius: var(--radius-control);
background: var(--share-banner-bg); color: var(--share-banner-fg);
font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.share-banner strong { font-size: 14.5px; font-weight: 700; }
.share-banner a {
color: var(--share-banner-fg); font-weight: 700;
text-decoration: underline; text-underline-offset: 2px;
border-radius: 4px;
}
.share-banner a:focus-visible { outline: 2px solid var(--share-banner-fg); outline-offset: 2px; }
#share-banner {
position: absolute; top: 12px; z-index: 13;
left: 200px; right: calc(var(--sidebar-width) + 68px);
/* As wide as the sentence needs, so it stays on one line wherever the map
has room; it wraps (still centred) only when the map is too narrow. */
width: fit-content; max-width: none; margin-inline: auto;
transition: right 0.25s ease;
}
body.sidebar-collapsed #share-banner { right: 68px; }
/* The copy at the top of the sidebar: only on a phone, where the open
sidebar covers the whole map. */
#share-banner-side { display: none; }
/* Too little room beside the brand: under it instead. */
@media (max-width: 1000px) {
#share-banner { top: 50px; left: 16px; margin-inline: 0; }
}
/* A phone: the open sidebar is the whole screen, so the banner rides at its
top; the map's copy shows once the sidebar is folded away. */
@media (max-width: 700px) {
body:not(.sidebar-collapsed) #share-banner { display: none; }
body:not(.sidebar-collapsed) #share-banner-side { display: flex; }
}
/* «Slett konto» closes the settings dialog: danger text, alone, last. */
.set-delete-account { margin-top: 24px; }
/* Project photos: one strip in the list, and the album (the app's
PhotoStripView and ProjectAlbumView). */
.photo-strip-list { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px;
scrollbar-width: thin; }
.photo-thumb { position: relative; flex: none; padding: 0; border: none; cursor: pointer;
border-radius: var(--radius-control); overflow: hidden; background: rgba(255,255,255,0.08); }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-thumb .photo-owner { position: absolute; left: 4px; bottom: 4px; }
.photo-thumb .photo-pin { position: absolute; right: 4px; top: 4px; font-size: 12px;
background: rgba(0,0,0,0.45); border-radius: 50%; padding: 2px 3px; }
dialog#album-dialog {
border: none; border-radius: var(--radius-sheet); padding: 16px;
background: var(--panel-bg); color: var(--panel-fg);
width: 560px; max-width: calc(100vw - 32px);
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
dialog#album-dialog::backdrop { background: rgba(0,0,0,0.45); }
#album-body { max-height: 70vh; overflow-y: auto; }
.album-section { margin: 12px 0 8px; font-size: 15px; }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.album-grid .photo-thumb { width: 100% !important; height: auto !important; aspect-ratio: 1; }
#photo-goto { margin-bottom: 8px; }
.route-details { margin: 0 0 12px; }
.route-detail-value.link-btn { font: inherit; padding: 0; color: var(--accent-text); text-align: right; max-width: 65%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-detail-value:disabled { color: inherit; cursor: default; }
.route-color-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 50%;
border: 2px solid rgba(255,255,255,0.6); vertical-align: middle; }
.route-actions { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
.route-actions .route-edit-btn { margin: 0; text-align: left; }
select.route-project-pick { appearance: none; -webkit-appearance: none; font: inherit; }
.route-nav-note { margin: 0 0 10px; }
.route-edit-btn:disabled { opacity: 0.45; cursor: default; }
/* «Lagrer ruten»: a small card with a line of status and a bar. */
dialog#saving-dialog { border: none; border-radius: var(--radius-sheet); padding: 18px 20px; background: var(--panel-bg); color: var(--panel-fg);
width: 320px; max-width: calc(100vw - 32px); box-shadow: 0 10px 40px rgba(0,0,0,0.5); text-align: center; }
dialog#saving-dialog::backdrop { background: rgba(0,0,0,0.45); }
dialog#saving-dialog h3 { margin: 0 0 6px; font-size: 16px; }
#saving-info { margin: 0 0 12px; font-size: 13px; min-height: 16px; }
#saving-bar { width: 100%; height: 8px; accent-color: var(--accent); }
dialog#settings-dialog { border: none; border-radius: var(--radius-sheet); padding: 16px 16px 20px; background: var(--surface); color: var(--panel-fg); width: 460px; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px); overflow: auto; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
dialog#settings-dialog::backdrop { background: rgba(0,0,0,0.45); }
#settings-dialog > p.muted { margin: 0 2px 4px; font-size: 12px; line-height: 1.4; }
/* Innstillinger in the project page's cards (24 Sep 2026): a heading with
the accent glyph over each group, the group's rows in one bordered card
with hairlines between them, a muted note under it. The app's page. */
.set-head { display: flex; align-items: center; gap: 8px; margin: 20px 4px 6px;
font-size: 16px; font-weight: 700; color: var(--text); }
.set-head .icon-glyph { width: 18px; height: 18px; color: var(--accent-text); flex: none; }
.set-card { background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.10);
border-radius: var(--radius-card); padding: 0 12px; }
.set-row { padding: 10px 0; }
.set-row + .set-row { border-top: 1px solid rgba(255,255,255,0.10); }
.set-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.set-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-title { font-size: 14.5px; color: var(--text); }
.set-sub { font-size: 12px; line-height: 1.35; color: var(--muted); }
.set-note { margin: 6px 12px 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.set-app-only { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
font-size: 10.5px; font-weight: 600; vertical-align: 1px; background: rgba(255,255,255,0.10); color: var(--muted); }
.set-value { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--muted); font-size: 14px; }
.set-value .icon-glyph { width: 13px; height: 13px; }
.set-accent { color: var(--accent-text); }
.set-link { cursor: pointer; }
.set-link:hover .set-title { text-decoration: underline; }
.set-select { font: inherit; font-size: 13.5px; padding: 5px 8px; border-radius: var(--radius-control); flex: none;
background: rgba(255,255,255,0.10); color: var(--accent-text); border: none; }
.set-range { width: 100%; margin: 8px 0 0; }
.set-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.set-swatch { width: 26px; height: 26px; padding: 0; border-radius: 50%; cursor: pointer;
border: 1px solid rgba(255,255,255,0.10); box-sizing: border-box; }
.set-swatch.chosen { outline: 2.5px solid var(--oxblood-300); outline-offset: 2px; }
.set-segments { display: flex; gap: 8px; margin-top: 8px; }
.set-segment { flex: 1; padding: 8px 0; font: inherit; font-size: 13.5px; cursor: pointer;
border-radius: var(--radius-card); border: 1.5px solid transparent;
background: rgba(255,255,255,0.08); color: var(--text); }
.set-segment.chosen { font-weight: 600; border-color: var(--oxblood-300); background: rgba(209,128,127,0.15); }
.set-summary { margin: 6px 0 0; }
/* The app's switch: oxblood 300 when on, as the app's toggles. */
input.tn-switch { appearance: none; -webkit-appearance: none; flex: none; margin: 0; cursor: pointer;
width: 44px; height: 26px; border-radius: 13px; position: relative;
background: rgba(255,255,255,0.18); transition: background 0.15s; }
input.tn-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.3); transition: transform 0.15s; }
input.tn-switch:checked { background: var(--oxblood-300); }
input.tn-switch:checked::after { transform: translateX(18px); }
input.tn-switch:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
/* Route window: the details rows are the editor (21 Sep 2026). */
.route-detail-row input[type="text"], .route-detail-row select {
font: inherit; font-size: 13px; padding: 5px 8px; border-radius: var(--radius-control); max-width: 62%; min-width: 0;
border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color: inherit; text-align: right; }
.route-detail-row input[type="color"] { width: 34px; height: 26px; padding: 0; border: none; background: none; cursor: pointer; }
.route-detail-text { font-size: 13px; text-align: right; max-width: 65%; }
.route-edit-row { display: flex; gap: 8px; }
.route-edit-row .route-edit-btn { flex: 1; }
/* Slett: the last button in the route and point windows, centred (22 Sep 2026). */
.route-delete-btn { margin-top: 8px; }
.route-save-btn { margin-top: 8px; }
.route-save-btn:hover { filter: brightness(1.1); }
.route-detail-value.link-btn { font: inherit; font-size: 13px; padding: 0; color: var(--accent-text); text-align: right; max-width: 65%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
.route-detail-value.muted { color: var(--muted); }
#route-info .route-details { margin-top: 10px; }
/* Route window head: the name is the title, centred and large; the
description a quiet field under the note. */
dialog#route-dialog .dlg-head { position: relative; justify-content: center; min-height: 44px; }
dialog#route-dialog .dlg-head h3 { flex: 1; text-align: center; margin: 0 44px; font-size: 24px; font-weight: 800; }
dialog#route-dialog .dlg-head #route-close { position: absolute; right: 0; top: 0; }
.route-name { background: none; border: none; color: inherit; font: inherit; cursor: text; padding: 0;
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-name-input { font: inherit; text-align: center; width: 100%; background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-card); color: inherit; padding: 4px 8px; }
.route-top { margin: 0 0 12px; }
.route-desc { display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; text-align: center;
background: rgba(255,255,255,0.05); border: 1px solid transparent; border-radius: var(--radius-card); color: inherit; padding: 9px 12px; }
.route-desc-wrap { position: relative; }
.route-desc-wrap .route-desc { padding-right: 36px; }
/* A textarea while editing, a rendered block while reading: both keep the
line breaks the writer put in. */
textarea.route-desc { resize: none; overflow: hidden; line-height: 1.45; min-height: 38px; }
.route-desc-read { white-space: pre-wrap; text-align: center; background: transparent;
min-height: 21px; line-height: 1.45; }
.route-desc-read a { color: var(--accent-text); }
.route-desc-read code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em;
background: rgba(255,255,255,0.08); border-radius: 4px; padding: 1px 4px; }
.route-desc-expand { position: absolute; right: 6px; top: 11px; color: var(--muted); padding: 4px; }
.route-desc-expand svg { width: 16px; height: 16px; }
.route-desc-expand:hover { color: var(--accent-text); }
dialog#desc-dialog { border: none; border-radius: var(--radius-sheet); padding: 16px; background: var(--panel-bg); color: var(--panel-fg);
width: min(900px, calc(100vw - 32px)); height: min(85vh, 900px); box-shadow: 0 10px 40px rgba(0,0,0,0.5); display: none; flex-direction: column; }
dialog#desc-dialog[open] { display: flex; }
dialog#desc-dialog::backdrop { background: rgba(0,0,0,0.45); }
dialog#desc-dialog .dlg-head { justify-content: space-between; }
#desc-area { flex: 1; width: 100%; box-sizing: border-box; resize: none; font: inherit; font-size: 15px; line-height: 1.5;
padding: 12px; border-radius: var(--radius-card); border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color: inherit; }
#desc-area:focus { outline: none; border-color: rgba(255,255,255,0.3); }
.route-desc::placeholder { color: var(--muted); }
.route-desc:focus { outline: none; border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); }
.route-coord-cell { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.route-coord-copy { padding: 2px 3px; }
.route-coord-copy .icon-glyph, .route-coord-copy svg { width: 15px; height: 15px; }
#route-map-wrap { position: relative; margin-bottom: 12px; }
#route-map-wrap #route-map { margin-bottom: 0; }
#route-map-dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
background: #ff3b30; border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.5); pointer-events: none; }
.route-speeds-edit { padding: 2px 3px; }
.route-speeds-edit svg { width: 15px; height: 15px; }
/* Webkamera: thumbnails on the map, the picture large in a popup. */
.cam-thumb { width: 72px; height: 46px; padding: 0; border: 2px solid #fff; border-radius: var(--radius-control); overflow: hidden;
background: #2c2c2e; box-shadow: 0 2px 8px rgba(0,0,0,0.45); cursor: pointer; }
.cam-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-thumb:hover { border-color: var(--accent-text); }
.cam-popup-wrap .maplibregl-popup-content { background: var(--panel-bg); color: var(--panel-fg); border-radius: var(--radius-card); padding: 10px; }
.cam-popup-wrap .maplibregl-popup-tip { border-top-color: var(--panel-bg); }
.cam-popup-wrap .maplibregl-popup-close-button { color: var(--panel-fg); font-size: 18px; }
.cam-popup img { display: block; width: 100%; max-width: 340px; border-radius: var(--radius-control); background: #2c2c2e; aspect-ratio: 4 / 3; object-fit: cover; }
.cam-popup-title { font-weight: 700; margin-top: 8px; font-size: 14px; }
.cam-popup-sub { font-size: 12px; }
/* Point window (22 Sep 2026): the route window's parts, plus the name's
pencil and the coordinate field that replaces the value on click. */
.route-name-edit { padding: 2px 3px; margin-left: 4px; vertical-align: middle; color: var(--muted); }
.route-name-edit svg { width: 16px; height: 16px; }
.route-name-edit:hover { color: var(--accent-text); }
.route-coords .coord-block-hint:empty { display: none; }
.point-photo-actions { margin: -4px 0 12px; }
.point-photo-actions .route-edit-btn { font-size: 14px; padding: 10px; }
.point-nearby { gap: 4px; }
.point-nearby-row { display: flex; flex-direction: column; gap: 3px; }
.point-nearby-title { font-size: 13px; font-weight: 600; }
.point-nearby-title.link-btn { font: inherit; font-size: 13px; font-weight: 600; padding: 0; text-align: left; cursor: pointer; }
.point-nearby-body { font-size: 12.5px; line-height: 1.45; }
/* «Ved punktet»'s rows: the app's icon in its colour, title, a muted line
under it, a chevron when the row opens something (P1-32, 25 Sep 2026). */
.nearby-findings { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.nearby-finding { display: flex; align-items: flex-start; gap: 10px; width: 100%;
padding: 6px 2px; background: none; border: none; color: inherit; font: inherit;
text-align: left; border-radius: var(--radius-control); }
.nearby-finding.tappable { cursor: pointer; }
.nearby-finding.tappable:hover { background: rgba(255,255,255,0.06); }
.nearby-icon { flex: none; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.nearby-icon svg { width: 18px; height: 18px; }
.nearby-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nearby-title { font-size: 13px; font-weight: 600; }
.nearby-detail { font-size: 12px; line-height: 1.35; }
.nearby-chevron { flex: none; width: 14px; height: 14px; align-self: center; color: var(--muted); }
/* Point window header: the point's photos, one or an album. */
#point-album { position: relative; margin-bottom: 12px; }
.point-album-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--radius-card); scrollbar-width: none;
background: rgba(255,255,255,0.06); }
.point-album-strip::-webkit-scrollbar { display: none; }
.point-album-strip img { flex: 0 0 100%; width: 100%; aspect-ratio: 880 / 520; object-fit: cover; scroll-snap-align: center;
display: block; cursor: zoom-in; }
.point-album-expand { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%;
background: rgba(0,0,0,0.45); color: #fff; display: flex; align-items: center; justify-content: center; }
.point-album-expand svg { width: 18px; height: 18px; }
.point-album-expand:hover { background: rgba(0,0,0,0.65); }
#photo-expand { font-size: 20px; margin-right: 6px; }
dialog#photo-dialog:fullscreen { width: 100vw; height: 100vh; max-width: none; max-height: none; border-radius: 0; background: #000; }
dialog#photo-dialog:fullscreen #photo-strip img { height: calc(100vh - 140px); max-height: none; }
.point-album-prev { left: 10px; }
.point-album-next { right: 10px; }
.point-album-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.point-album-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.45); box-shadow: 0 0 2px rgba(0,0,0,0.6); }
.point-album-dots span.active { background: #fff; }
/* The viewer's zoom: the picture grows around the clicked spot inside its own frame. */
#photo-strip img { cursor: zoom-in; transition: transform 0.2s ease; }
#photo-strip img.zoomed { transform: scale(2.5); cursor: zoom-out; }
#photo-strip { overflow-y: hidden; }
.route-coord-row.editing { flex-direction: column; align-items: stretch; gap: 6px; }
.coord-fields { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: flex-end; }
.coord-field { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.coord-field span { text-align: center; }
.coord-field input, .coord-field select { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; box-sizing: border-box;
min-width: 3.4em; text-align: center; padding: 7px 8px; border-radius: var(--radius-control); border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); color: var(--panel-fg); }
.coord-field select { align-self: flex-end; }
.coord-field input:focus, .coord-field select:focus { outline: none; border-color: rgba(255,255,255,0.35); }
/* ---- design system components (step 3, 22 Sep 2026) --------------------
The same four button roles, one card and one row the app has in
TNComponents.swift. One primary action per window; delete is danger
text with no fill, centred and last, so it never reads as an accent. */
.tn-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: var(--touch); padding: 0 var(--space-24);
border: 0; border-radius: 999px;
font: inherit; font-size: 16px; font-weight: 600; line-height: 1;
cursor: pointer; transition: opacity 120ms ease-out;
}
.tn-btn:active { opacity: 0.72; }
.tn-btn:disabled { opacity: 0.4; cursor: default; }
.tn-btn-wide { width: 100%; }
.tn-btn-primary { background: var(--brand); color: #fff; }
.tn-btn-secondary { background: var(--accent-tint); color: var(--accent-text); }
.tn-btn-quiet { background: none; color: var(--accent-text); }
.tn-btn-danger { background: none; color: var(--danger); }
.tn-card {
padding: var(--space-16); border-radius: var(--radius-card);
background: var(--surface); border: 1px solid var(--line);
display: flex; flex-direction: column; gap: var(--space-8);
}
.tn-row {
display: flex; align-items: center; gap: var(--space-12);
min-height: var(--touch);
}
.tn-row-text { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.tn-row-title { font-size: 15px; font-weight: 600; }
.tn-row-sub { font-size: 12.5px; color: var(--muted); }
.tn-row .icon-glyph { color: var(--accent); flex: none; }
.tn-section-head { display: flex; align-items: center; gap: var(--space-8); font-size: 15px; font-weight: 700; }
/* A project picker is a