/** * App styles — the `@layer app` slot. * * Moonboard's own structural and domain CSS. Sits below `theme`, so a palette * can restate a colour without fighting these rules, and above `components`, * so a `ui-*` / `civ-*` element can still be placed in a layout. * * Tokens belong in `theme.css`; setting one here will not win. */ @layer app { /* * Dark mode. Overrides only the neutral application colors — background, * body text, secondary, border — and nudges primary lighter for contrast. * The brand ramp (--green/--red/…) stays at its light values. * * Applied from two selectors so a light/dark/system control works without * restating colours: * * - the media query follows the device but yields to an explicit choice * via :not([data-theme]); * - [data-theme="dark"] is set on by setTheme() from @civility/ui. * * Setting data-theme="light" forces light on a dark device. Removing the * attribute hands control back to the device. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --backgroundH: 237; --backgroundS: 14%; --backgroundL: 11%; --bodyH: 0; --bodyS: 0%; --bodyL: 92%; --secondaryH: 240; --secondaryS: 14%; --secondaryL: 65%; --primaryL: 66%; --borderL: 28%; } } html { -ms-overflow-style: none; scrollbar-width: none; } /*body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }*/ /* ── Header ───────────────────────────────────────────────────────────── */ header { border-bottom: 1px solid currentColor; } /* When a route has no header landmark (e.g. /climb/{id}), the router sets [hidden] on
. Zero out --header-height so ui-sub-header's sticky top offset doesn't reserve a 56px gap above it. */ body:has(> header[hidden]) { --header-height: 0px; } ui-header-content { display: flex; align-items: center; gap: var(--s2); height: var(--header-height); padding: 0 var(--container-padding); } ui-header-content h1 { flex: 1; margin: 0; font-size: var(--f4); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ui-header-content .header-actions { display: flex; align-items: center; gap: var(--s2); } /* ── Area switcher ─────────────────────────────────────────────────────── */ /* Mirrors ui-header-content so / matches every other route's header, except the title doubles as the drawer trigger. */ area-header { display: flex; align-items: center; gap: var(--s2); height: var(--header-height); padding: 0 var(--container-padding); } .area-trigger { display: flex; align-items: center; gap: var(--s1); flex: 1; min-width: 0; cursor: pointer; } .area-trigger h1 { margin: 0; font-size: var(--f4); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .area-trigger-chevron { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.5; } /* Add-climb lives in the header rather than above the list: it's an action on the area, and the list is long. */ #header-add-climb { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; padding: 0; border: none; background: transparent; color: inherit; cursor: pointer; } #header-add-climb img { width: 18px; height: 18px; } area-drawer { display: flex; flex-direction: column; gap: var(--s3); height: 100%; } .area-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); } #area-edit { padding: var(--s1) var(--s2); border: 1px solid currentColor; border-radius: var(--br-base); background: transparent; color: inherit; font-size: var(--f6); cursor: pointer; } #area-edit[aria-pressed='true'] { border-color: var(--primary); color: var(--primary); } .area-move { display: flex; flex-direction: column; flex-shrink: 0; } .area-move button { flex: 1; width: 28px; padding: 0; border: 1px solid currentColor; background: transparent; color: inherit; font-size: var(--f6); line-height: 1; cursor: pointer; } .area-move button:first-child { border-radius: var(--br-base) var(--br-base) 0 0; border-bottom: none; } .area-move button:last-child { border-radius: 0 0 var(--br-base) var(--br-base); } .area-move button:disabled { opacity: 0.25; cursor: default; } .area-drawer-title { margin: 0; font-size: var(--f6); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.5; } .area-list { display: flex; flex-direction: column; gap: var(--s2); flex: 1; overflow-y: auto; } .area-row { display: flex; align-items: stretch; gap: var(--s2); } .area-select { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex: 1; min-width: 0; padding: var(--s3); border: 1px solid currentColor; border-radius: var(--br-base); background: transparent; color: inherit; font-size: var(--f5); text-align: left; cursor: pointer; } .area-select[aria-current='true'] { border-color: var(--primary); color: var(--primary); font-weight: var(--fw-semibold); } .area-remove { flex-shrink: 0; padding: 0 var(--s2); border: 1px solid currentColor; border-radius: var(--br-base); background: transparent; color: inherit; opacity: 0.5; cursor: pointer; font-size: var(--f6); } .area-remove--confirming { border-color: var(--error); color: var(--error); opacity: 1; } .area-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .area-add { display: flex; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s3); cursor: pointer; } .area-add img { width: 18px; height: 18px; } /* ── Add-area dialog ───────────────────────────────────────────────────── */ #area-form-dialog { background: var(--background); color: inherit; border: 1px solid currentColor; border-radius: var(--br-lg); padding: var(--s4); width: min(90vw, 420px); max-height: 80vh; overflow-y: auto; } #area-form-dialog::backdrop { background: rgba(0, 0, 0, 0.5); } #area-form-dialog h2 { margin: 0 0 var(--s3); font-size: var(--f4); } .area-form-modes { margin-bottom: var(--s3); } .area-preset-list { display: flex; flex-direction: column; gap: var(--s2); } .area-preset-list button { width: 100%; padding: var(--s3); border: 1px solid currentColor; border-radius: var(--br-base); background: transparent; color: inherit; text-align: left; cursor: pointer; } .area-custom-form { display: flex; flex-direction: column; gap: var(--s2); } /* Published-area matches, shown under the name field as you type. */ .area-published-list { display: flex; flex-direction: column; gap: var(--s2); max-height: 40vh; overflow-y: auto; } .area-published-list button { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); width: 100%; padding: var(--s2) var(--s3); border: 1px solid currentColor; border-radius: var(--br-base); background: transparent; color: inherit; font-size: var(--f5); text-align: left; cursor: pointer; } .area-published-list small { flex-shrink: 0; opacity: 0.5; } .area-published-empty { margin: 0; font-size: var(--f6); opacity: 0.5; } .area-form-actions { display: flex; justify-content: flex-end; margin-top: var(--s3); } /* ── User-added climbs ─────────────────────────────────────────────────── */ #bm-add-climb { display: flex; align-items: center; justify-content: center; gap: var(--s2); margin: var(--s3); padding: var(--s3); cursor: pointer; } #bm-add-climb img { width: 18px; height: 18px; } /* ── Climb media ───────────────────────────────────────────────────────── */ climb-media { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) 0; } .cp-media-list { display: flex; flex-direction: column; gap: var(--s2); } .cp-media-item { position: relative; margin: 0; border-radius: var(--br-base); overflow: hidden; background: var(--secondary); } .cp-media-item img, .cp-media-item video { display: block; width: 100%; height: auto; /* Nothing pins the intrinsic ratio until the bytes land, so cap the height to stop a tall portrait shot taking over the page. */ max-height: 60vh; object-fit: contain; background: black; } .cp-media-loading { display: flex; align-items: center; justify-content: center; min-height: 120px; } .cp-media-remove { position: absolute; top: var(--s2); right: var(--s2); display: flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 var(--s2); border-radius: var(--br-full); border: none; background: rgba(0, 0, 0, 0.55); color: white; font-size: var(--f6); cursor: pointer; } .cp-media-remove img { width: 16px; height: 16px; } .cp-media-remove--confirming { background: var(--error); } /* The input is the control; the label is what's actually visible. */ .cp-media-add { display: flex; align-items: center; justify-content: center; padding: var(--s3); border: 1px dashed currentColor; border-radius: var(--br-base); cursor: pointer; font-size: var(--f5); } .cp-media-add input { display: none; } /* ── Published rating + safety ─────────────────────────────────────────── */ .cp-published { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) 0 0; } .cp-published small { opacity: 0.5; } /* Fractional stars: a filled row clipped over a track of the same glyphs, so 4.9 reads as 4.9 rather than rounding to 5. */ .cp-stars { position: relative; display: inline-block; flex-shrink: 0; line-height: 1; letter-spacing: 2px; } .cp-stars-track { opacity: 0.2; } .cp-stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: var(--warning); } #lb-date { font: inherit; } .cp-media-unplayable { margin: 0; padding: var(--s4) var(--s3); font-size: var(--f5); text-align: center; opacity: 0.6; } .cp-media-error { margin: 0; color: var(--error); font-size: var(--f5); } .cp-notes { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) 0; } .cp-notes-label { font-size: var(--f6); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.5; } .cp-notes textarea { font: inherit; resize: vertical; } #climb-form-dialog { background: var(--background); color: inherit; border: 1px solid currentColor; border-radius: var(--br-lg); padding: var(--s4); width: min(90vw, 420px); max-height: 85vh; overflow-y: auto; } #climb-form-dialog::backdrop { background: rgba(0, 0, 0, 0.5); } #climb-form-dialog h2 { margin: 0 0 var(--s3); font-size: var(--f4); } .climb-form { display: flex; flex-direction: column; gap: var(--s2); } .climb-form textarea { font: inherit; resize: vertical; } .climb-form button[type='submit'] { margin-top: var(--s2); } .climb-form-actions { display: flex; justify-content: space-between; gap: var(--s2); margin-top: var(--s3); } /* Pushes Cancel right when there's no Delete to balance against. */ .climb-form-actions:not(:has(.climb-form-delete)) { justify-content: flex-end; } .climb-form-delete { color: var(--danger, tomato); border-color: currentColor; } /* ── Fixed bottom tab bar ──────────────────────────────────────────────── */ footer[fixed] { padding: 0; height: var(--footer-height); } ui-bottom-bar img { width: 24px; height: 24px; } /* Stopwatch running indicator in nav */ .sw-running { color: var(--primary); font-variant-numeric: tabular-nums; } /* ── Civility component overrides ─────────────────────────────────────── */ /* Filter bars: sticky below the header, flex column for search/filters */ /* Pages without a sub-header set hidden attribute via JS */ #sub-header[hidden] { display: none; } ui-sub-header { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); border-bottom: 1px solid currentColor; } /* Filter components are transparent to layout — children flow into ui-sub-header's flex */ library-filters { display: contents; } /* Climb header: full-width flex row inside ui-sub-header */ climb-header { display: flex; align-items: center; gap: var(--s2); width: 100%; } ui-sub-header input[type='search'], ui-sub-header select { margin: 0; } ui-sub-header input[type='search'] { padding: var(--s2) var(--s3); border-radius: var(--br-full); font-size: var(--f5); background: transparent; width: 100%; } /* Pill-shaped filter buttons in the sub-header */ ui-sub-header ui-button-group button { flex: 1; border-radius: var(--br-full); font-size: var(--f6); padding: var(--s2); margin: var(--s2) 0 var(--s2) 0; } ui-button-group button[aria-pressed='true'] { background: var(--primary); color: var(--background); border-color: var(--primary); opacity: 1; transform: none; } ui-button-group button[aria-pressed='true']:hover { opacity: 0.85; transform: none; } /* Grade and status badges */ ui-badge { text-transform: none; letter-spacing: normal; } ui-badge.grade { font-size: var(--f7); font-weight: var(--fw-semibold); padding: 2px var(--s2); white-space: nowrap; flex-shrink: 0; } /* ── Page host elements ────────────────────────────────────────────────── */ library-page { display: flex; flex-direction: column; min-height: 100%; } #cp-body { padding: var(--s3); } settings-page, settings-about-page { display: block; padding: var(--s4) var(--s3); max-width: 600px; margin: 0 auto; } settings-about-page section { margin-bottom: var(--s5); } settings-about-page section > p { opacity: 0.6; margin-bottom: var(--s3); } sessions-page, session-page, stats-page { display: flex; flex-direction: column; padding: var(--s4) var(--s3); gap: var(--s4); max-width: 600px; margin: 0 auto; } #stats-range button { flex: 1; border-radius: var(--br-full); font-size: var(--f6); padding: var(--s2); } .stats-summary { display: flex; gap: var(--s3); } .stats-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--s1); padding: var(--s3); border: 1px solid var(--border); border-radius: var(--br-base); } .stats-stat-value { font-size: var(--f1); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; } .stats-stat-label { font-size: var(--f6); opacity: 0.6; text-transform: uppercase; letter-spacing: 0.05em; } .stats-chart-wrap { position: relative; min-height: 280px; } .stats-section { display: flex; flex-direction: column; gap: var(--s2); } .stats-section-title { font-size: var(--f5); font-weight: var(--fw-semibold); margin: 0; } /* ── Hangboard tool ───────────────────────────────────────────────────── */ .hangboard-panel { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3); } .hangboard-connect { align-items: center; text-align: center; padding: var(--s6) var(--s3); gap: var(--s2); } .hangboard-bluetooth-icon { width: 32px; height: 32px; opacity: 0.6; } .hangboard-error { color: var(--error); font-size: var(--f6); margin: 0; } .hangboard-status-row { display: flex; align-items: center; gap: var(--s3); } .hangboard-meta { font-size: var(--f6); opacity: 0.6; } .hangboard-disconnect { margin-left: auto; } .hangboard-readout { display: flex; gap: var(--s2); } .hangboard-reading { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--s1); padding: var(--s3) var(--s2); border: 1px solid var(--border); border-radius: var(--br-base); } .hangboard-reading span { font-size: var(--f3); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; } .hangboard-reading--main span { font-size: var(--f1); color: var(--primary); } .hangboard-reading label { font-size: var(--f7); opacity: 0.6; text-transform: uppercase; letter-spacing: 0.05em; } .hangboard-chart-wrap { position: relative; min-height: 220px; } .hangboard-actions { display: flex; gap: var(--s2); } .hangboard-actions button { flex: 1; } ui-calendar, .cal { display: flex; flex-direction: column; gap: var(--s1); overflow-x: auto; } ui-calendar-months, .cal-months, ui-calendar-grid, .cal-grid { display: grid; gap: 2px; padding: 5px; } .cal-months { font-size: var(--f7); opacity: 0.6; } .cal-months span { white-space: nowrap; } ui-calendar-grid, .cal-grid { grid-template-rows: repeat(7, auto); grid-auto-flow: column; } .cal-cell { width: 100%; aspect-ratio: 1; border-radius: 2px; background: hsla(var(--bodyH), var(--bodyS), var(--bodyL), 0.08); cursor: pointer; user-select: none; } .cal-cell[data-level='0'] { cursor: default; } .cal-cell[data-level='1'] { background: hsla(var(--successH), var(--successS), var(--successL), 0.25); } .cal-cell[data-level='2'] { background: hsla(var(--successH), var(--successS), var(--successL), 0.5); } .cal-cell[data-level='3'] { background: hsla(var(--successH), var(--successS), var(--successL), 0.75); } .cal-cell[data-level='4'] { background: hsl(var(--successH), var(--successS), var(--successL)); } .cal-cell[data-future] { visibility: hidden; } .cal-cell[data-selected] { outline: 2px solid var(--primary); outline-offset: 1px; } .active-session-card { display: flex; flex-direction: column; align-items: center; gap: var(--s4); padding: var(--s4) var(--s3); border: 1px solid var(--border); border-radius: var(--br-lg); } .sessions-history { display: flex; flex-direction: column; gap: var(--s3); } .sessions-history-title, .sessions-section-title { font-size: var(--f5); font-weight: var(--fw-semibold); margin: 0; } .sessions-section { display: flex; flex-direction: column; gap: var(--s2); } .sessions-list { display: flex; flex-direction: column; gap: var(--s2); } .session-row { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3); text-align: left; background: transparent; border: 1px solid var(--border); border-radius: var(--br); cursor: pointer; } .session-row-main { display: flex; justify-content: space-between; align-items: center; font-weight: var(--fw-semibold); } .session-row-meta { display: flex; gap: var(--s3); font-size: var(--f6); color: var(--muted); } #sessions-load-more { margin-top: var(--s2); } .session-detail-header { display: flex; flex-direction: column; gap: var(--s2); } .session-detail-row { display: flex; align-items: center; gap: var(--s2); } .session-detail-meta { display: flex; flex-wrap: wrap; gap: var(--s2); font-size: var(--f6); color: var(--muted); } .session-attempts-list { list-style: none; margin: 0; padding: 0; } .session-notes { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); } .session-notes-label { font-size: var(--f6); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.5; } .session-notes textarea { font: inherit; resize: vertical; } /* ── Grade range filter row ────────────────────────────────────────────── */ .filters-row { display: flex; gap: var(--s4); flex-wrap: wrap; justify-content: space-between; } .sort-filter { display: flex; align-items: center; gap: var(--s1); font-size: var(--f6); flex-grow: 0.5; margin-left: var(--s3); } .sort-filter label { font-weight: var(--fw-medium); margin: 0; } .sort-filter select { padding: var(--s1) var(--s2); font-size: var(--f6); margin: 0; min-width: 6.5em; width: 100%; } .grade-filter { display: flex; align-items: center; gap: var(--s2); font-size: var(--f6); flex-grow: 0.45; } .grade-filter label { font-weight: var(--fw-medium); display: block; margin: 0; flex-shrink: 0; } .grade-filter select { flex: 1; padding: var(--s1) var(--s2); font-size: var(--f6); margin: 0; } /* ── Benchmark list (home page) ────────────────────────────────────────── */ #bm-list { flex: 1; } .empty-message { display: flex; align-items: center; justify-content: center; padding: var(--s6); opacity: 0.6; margin: 0; } .bm-count { padding: var(--s2) var(--s3); font-size: var(--f6); opacity: 0.6; border-bottom: 1px solid currentColor; } [data-bm-id], [data-attempt-climb-id] { display: block; width: 100%; text-align: left; padding: var(--s3); border: none; border-bottom: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; transition: background var(--transition-fast); border-radius: 0; } [data-bm-id]:hover, [data-attempt-climb-id]:hover { background: var(--primary-dull); opacity: 1; transform: none; } [data-bm-id]:active, [data-attempt-climb-id]:active { transform: none; } .bm-item-main { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s1); } .bm-name { font-weight: var(--fw-semibold); font-size: var(--f5); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bm-item-meta { display: flex; align-items: center; justify-content: space-between; font-size: var(--f6); opacity: 0.6; } .bm-setter { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bm-stats { flex-shrink: 0; white-space: nowrap; } #bm-load-more { display: block; width: 100%; padding: var(--s3); text-align: center; border: none; border-radius: 0; background: transparent; color: var(--primary); font-weight: var(--fw-medium); font-size: var(--f5); cursor: pointer; opacity: 1; transform: none; } #bm-load-more:hover { opacity: 0.7; transform: none; } /* ── Climb detail header ───────────────────────────────────────────────── */ .back { display: flex; align-items: center; justify-content: center; background: transparent; border: none; padding: var(--s1); cursor: pointer; border-radius: var(--br-base); flex-shrink: 0; opacity: 0.8; transition: opacity var(--transition-fast); } .back:hover { opacity: 1; transform: none; } .back img { width: 20px; height: 20px; display: block; } .title-info { flex: 1; min-width: 0; } .name { font-size: var(--f4); font-weight: var(--fw-bold); display: block; line-height: var(--lh-tight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .subtitle { font-size: var(--f7); opacity: 0.6; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .meta { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: var(--f6); font-weight: var(--fw-medium); white-space: nowrap; opacity: 0.8; } /* ── Board canvas ──────────────────────────────────────────────────────── */ .board-wrap { position: relative; max-width: 480px; margin: 0 auto var(--s3); border-radius: var(--br-base); overflow: hidden; } .board-wrap img { width: 100%; display: block; } .board-wrap canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .board-placeholder { background: #1a1a1a; aspect-ratio: 450 / 485; border-radius: var(--br-base); max-width: 480px; margin: 0 auto var(--s3); position: relative; overflow: hidden; } .board-placeholder canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ── Generic action link/button (YouTube, Log) ─────────────────────────── */ .action { display: flex; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s3); border: 1px solid currentColor; border-radius: var(--br-base); text-decoration: none; color: inherit; font-weight: var(--fw-medium); transition: opacity var(--transition-base); width: 100%; box-sizing: border-box; background: transparent; } .action:hover { opacity: 0.7; transform: none; } /* ── progress section in climb detail ───────────────────────────────────── */ .lb-log-section { margin-top: var(--s3); padding-top: var(--s3); display: flex; flex-direction: column; gap: var(--s2); } .lb-log-summary { display: flex; align-items: center; gap: var(--s2); font-size: var(--f5); flex-wrap: wrap; } /* ── Settings page ─────────────────────────────────────────────────────── */ settings-page section { margin-bottom: var(--s5); } settings-page section > p { opacity: 0.6; margin-bottom: var(--s3); } /* Radio *cards* — scoped to the group so they do not also dress the plain form label inside `ui-settings-appearance`. */ settings-page [role='radiogroup'] { display: flex; flex-direction: column; gap: var(--s2); } settings-page [role='radiogroup'] label { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border: 1px solid currentColor; border-radius: var(--br-base); cursor: pointer; font-weight: var(--fw-medium); transition: all var(--transition-base); margin: 0; } settings-page [role='radiogroup'] label:has(input:checked) { border-color: var(--primary); background: var(--primary-dull); } settings-page [role='radiogroup'] label input[type='radio'] { margin: 0; width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; border: none; padding: 0; flex-shrink: 0; } settings-page [role='radiogroup'] label small { display: block; font-size: var(--f6); opacity: 0.6; font-weight: var(--fw-normal); margin-top: 2px; } .settings-version-status { font-size: var(--f6); opacity: 0.7; } /* ── Link-style button ──────────────────────────────────────────────────── */ button.link, a.link { background: none; border: none; padding: 0; color: var(--primary, inherit); text-decoration: underline; cursor: pointer; font-size: inherit; font-family: inherit; } button.link:hover, a.link:hover { opacity: 0.7; } /* ── civ-sync-input component ─────────────────────────────────────────────── */ civ-sync-input form { display: flex; flex-direction: column; gap: var(--s3); } civ-sync-input label { display: flex; flex-direction: column; gap: var(--s1); cursor: default; border: none; padding: 0; font-weight: var(--fw-normal); border-radius: 0; background: none; } civ-sync-input label span { font-size: var(--f6); opacity: 0.7; } civ-sync-input label input { width: 100%; box-sizing: border-box; } civ-sync-input .ui-sync-input__error { font-size: var(--f6); color: hsl(var(--errorH), var(--errorS), var(--errorL)); margin: 0; } civ-sync-input .ui-sync-input__error code { font-family: var(--font-family-mono); font-size: var(--f7); opacity: 0.8; } civ-sync-input .ui-sync-input__status { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s3); } civ-sync-input .ui-sync-input__status small { opacity: 0.6; } civ-sync-input .ui-sync-input__indicator { font-weight: var(--fw-medium); } civ-sync-input .ui-sync-input__indicator--ok { color: hsl(var(--successH), var(--successS), var(--successL)); } civ-sync-input .ui-sync-input__indicator--syncing { opacity: 0.7; } civ-sync-input .ui-sync-input__actions { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; } civ-sync-input .ui-sync-input__actions .action { width: auto; padding: var(--s2) var(--s4); } /* ── civ-sync-state component ─────────────────────────────────────────────── */ civ-store-import div { display: flex; gap: var(--s3); margin-bottom: var(--s3); } /* Shared dot shape — used by both badge and inline/detailed inner dot */ .ui-sync-state--badge, .ui-sync-state__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* Badge: the root span IS the dot */ .ui-sync-state--badge { background: currentColor; opacity: 0.3; } /* Status colors — applied via modifier class on the wrapper */ .ui-sync-state--ok .ui-sync-state__dot, .ui-sync-state--badge.ui-sync-state--ok { background: hsl(var(--successH), var(--successS), var(--successL)); opacity: 1; } .ui-sync-state--syncing .ui-sync-state__dot, .ui-sync-state--badge.ui-sync-state--syncing { background: hsl(var(--primaryH), var(--primaryS), var(--primaryL)); opacity: 0.7; } .ui-sync-state--error .ui-sync-state__dot, .ui-sync-state--badge.ui-sync-state--error { background: hsl(var(--errorH), var(--errorS), var(--errorL)); opacity: 1; } .ui-sync-state--disconnected .ui-sync-state__dot, .ui-sync-state--badge.ui-sync-state--disconnected { background: currentColor; opacity: 0.3; } /* Inline variant */ .ui-sync-state--inline { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--f6); } /* Detailed variant */ .ui-sync-state--detailed { display: flex; flex-direction: column; gap: var(--s1); } .ui-sync-state--detailed .ui-sync-state__row { display: flex; align-items: center; gap: var(--s2); font-weight: var(--fw-medium); } .ui-sync-state--detailed .ui-sync-state__meta { font-size: var(--f6); opacity: 0.6; } .ui-sync-state--detailed .ui-sync-state__error { font-size: var(--f6); color: hsl(var(--errorH), var(--errorS), var(--errorL)); margin: 0; } .ui-sync-state--detailed .ui-sync-state__error code { font-family: var(--font-family-mono); font-size: var(--f7); } .action--danger { color: var(--error); border-color: var(--error); } /* ── progress session dialog ─────────────────────────────────────────────── */ #cp-dialog { border: none; padding: 0; background: transparent; } #cp-dialog::backdrop { background: rgba(0, 0, 0, 0.5); } .lb-dialog { background: var(--background); border: 1px solid currentColor; border-radius: var(--br-lg); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); } .lb-dialog-header { display: flex; align-items: center; justify-content: space-between; } .lb-dialog-title { font-weight: var(--fw-semibold); font-size: var(--f3); } .lb-dialog-close { background: none; border: none; cursor: pointer; font-size: var(--f3); opacity: 0.6; padding: var(--s1); line-height: 1; color: inherit; } .lb-dialog-close:hover { opacity: 1; transform: none; } .lb-field { display: flex; flex-direction: column; gap: var(--s1); } .lb-field--row { flex-direction: row; align-items: center; justify-content: space-between; } .lb-field-label { font-size: var(--f6); font-weight: var(--fw-medium); opacity: 0.7; } #lb-dialog-box ui-counter { height: 40px; } #lb-dialog-box ui-counter button { width: 40px; height: 40px; font-size: var(--f2); border-radius: var(--br-base); } #lb-dialog-box ui-counter input { font-size: var(--f3); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; border-radius: var(--br-base); } .lb-checkbox { width: 22px; height: 22px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; } .lb-star-row { display: flex; gap: var(--s1); } .lb-star-btn { background: none; border: none; font-size: 1.75rem; cursor: pointer; color: var(--border); padding: 0 var(--s1); line-height: 1; transition: color var(--transition-fast); opacity: 1; } .lb-star-btn:hover { opacity: 1; transform: none; } .lb-star-btn--active { color: hsl(var(--yellowH), var(--yellowS), var(--yellowL)); } .lb-submit-btn { width: 100%; padding: var(--s3); background: var(--primary); color: var(--background); border: none; border-radius: var(--br-base); font-size: var(--f4); font-weight: var(--fw-semibold); cursor: pointer; transition: opacity var(--transition-fast); } .lb-submit-btn:hover { opacity: 0.85; transform: none; } /* ── Stopwatch page ─────────────────────────────────────────────────────── */ #stopwatch-display { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 40vh; width: 100%; } #stopwatch-time { font-size: clamp(2.5rem, 12vw, 6rem); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.02em; } .stopwatch-rest { margin-top: var(--s3); display: inline-flex; align-items: baseline; gap: var(--s2); font-variant-numeric: tabular-nums; opacity: 0.7; } .stopwatch-rest[hidden] { display: none; } .stopwatch-rest-label { font-size: var(--f6); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.08em; } .stopwatch-rest-value { font-size: var(--f3); font-weight: var(--fw-medium); } #stopwatch-controls { display: flex; gap: var(--s3); width: 100%; justify-content: center; flex-wrap: wrap; } #stopwatch-controls button { padding: var(--s3) var(--s4); font-size: var(--f4); font-weight: var(--fw-semibold); border: 2px solid currentColor; border-radius: var(--br-lg); min-width: 120px; } #stopwatch-controls button.primary { background: var(--primary); color: var(--background); } #laps-container { width: 100%; display: flex; flex-direction: column; gap: var(--s2); max-height: 300px; overflow-y: auto; } .lap-item { display: flex; justify-content: space-between; align-items: center; padding: var(--s2) var(--s3); border: 1px solid currentColor; border-radius: var(--br-base); font-variant-numeric: tabular-nums; } .lap-number { font-weight: var(--fw-semibold); opacity: 0.6; } .lap-time { font-weight: var(--fw-medium); } @media (max-width: 480px) { #stopwatch-display { min-height: 30vh; } #stopwatch-controls button { min-width: 100px; padding: var(--s2) var(--s3); font-size: var(--f5); } } }