/* Trim activity (approved 9 Nov 2026, docs/mockups/trim-2026-11/): the page's figures dialog, the activity's chart
   inside the video trimmer's window and grips (video-trim.js, TRIM-1), the measurement tiles, the route with its cut
   ends grey. activity-trim.js draws it. */
dialog.trim-layer { padding: 0; margin: 0; border: 0; background: transparent; width: 100vw; height: 100dvh; max-width: none; max-height: none; overflow: hidden; }
dialog.trim-layer::backdrop { background: transparent; }
.figures-dialog.trim { width: min(100%, 720px); max-height: calc(100dvh - 32px); overflow: auto; box-sizing: border-box; padding: 20px 22px; }
.figures-dialog.trim h2 { display: flex; align-items: center; gap: 8px; }
.figures-dialog.trim h2 .icon { width: 20px; height: 20px; color: var(--accent); }
.trim .trim-sub { margin: -4px 0 14px; color: var(--ink-secondary); font-size: 13px; line-height: 1.4; }
.trim .trim-error { color: var(--destructive, #d92d20); font-size: 13px; font-weight: 600; margin: 0 0 10px; }
.trim .trim-chart { max-width: none; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 12px 14px 30px; box-shadow: none; border: 1px solid var(--separator); }
.trim .trim-chart-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.trim .trim-chart-head small { color: var(--ink-secondary); font-size: 12px; }
.trim .trim-strip { position: relative; height: 108px; margin: 0 9px; --l: 0%; --r: 100%; touch-action: none; user-select: none; }
.trim .trim-chart-svg { position: absolute; inset: 6px 0; width: 100%; height: calc(100% - 12px); }
.trim .vt-dim { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--bg-raised, var(--bg)) 72%, transparent); }
.trim .vt-dim.l { left: 0; width: var(--l); }
.trim .vt-dim.r { left: var(--r); right: 0; }
.trim .vt-win { position: absolute; top: -3px; bottom: -3px; left: var(--l); width: calc(var(--r) - var(--l)); box-sizing: border-box; border: 3.5px solid var(--accent); border-radius: 10px; cursor: grab; }
.trim .vt-grip { position: absolute; top: -3px; bottom: -3px; width: 18px; border-radius: 6px; background: var(--accent); cursor: ew-resize; outline-offset: 2px; }
.trim .vt-grip::after { content: ""; position: absolute; left: 7.5px; top: 50%; width: 3px; height: 22px; margin-top: -11px; border-radius: 2px; background: rgba(255, 255, 255, .9); }
.trim .vt-grip.l { left: calc(var(--l) - 9px); }
.trim .vt-grip.r { left: calc(var(--r) - 9px); }
.trim .trim-flag { position: absolute; bottom: -26px; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: #fff; background: var(--accent); padding: 2px 6px; border-radius: 6px; white-space: nowrap; z-index: 2; pointer-events: none; }
.trim .trim-sug { position: absolute; top: 0; bottom: 0; border-left: 1.5px dashed var(--accent); opacity: .9; pointer-events: none; }
.trim .trim-axis { display: flex; justify-content: space-between; margin: 0 9px; font-size: 11px; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.trim .trim-hint { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 9%, var(--bg-raised, var(--bg))); margin: 0 0 12px; font-size: 13px; }
.trim .trim-hint .icon { width: 18px; height: 18px; color: var(--accent); flex: none; }
.trim .trim-hint b { font-weight: 700; }
.trim .trim-hint span { flex: 1; }
.trim .trim-tiles { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.trim .trim-tiles .measurement-tile { background: var(--card); }
.trim .trim-tiles .measurement-context .measurement-content { color: var(--ink-secondary); }
@media (max-width: 600px) { .trim .trim-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.trim .trim-map { position: relative; border-radius: 14px; overflow: hidden; height: 190px; background: linear-gradient(135deg, #1b3a4b, #1f4a3a); }
.trim .trim-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.trim .trim-map .cut { stroke: #9aa3ad; }
.trim .trim-pill { position: absolute; left: 10px; bottom: 10px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 11px; font-weight: 600; padding: 5px 9px; border-radius: 9px; }
.trim .trim-nomap { padding: 14px; border-radius: 12px; background: var(--card); font-size: 13px; color: var(--ink-secondary); line-height: 1.4; }
.trim footer { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.trim footer .trim-restore { margin-right: auto; }
.trim table.trim-review { width: 100%; border-collapse: collapse; font-size: 14px; margin: 4px 0 14px; }
.trim table.trim-review th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-secondary); text-align: right; font-weight: 600; padding: 0 0 8px; }
.trim table.trim-review th:first-child { text-align: left; }
.trim table.trim-review td { padding: 9px 0; border-top: 1px solid var(--separator); text-align: right; font-variant-numeric: tabular-nums; }
.trim table.trim-review td:first-child { text-align: left; color: var(--ink); }
.trim table.trim-review td.was { color: var(--ink-secondary); }
.trim table.trim-review td.now { font-weight: 700; }
.trim .trim-list { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--card); font-size: 13px; line-height: 1.5; }
.trim .trim-list b { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-secondary); margin-bottom: 4px; }
.trim .trim-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--card); margin: 0 0 8px; font-size: 13px; line-height: 1.4; }
.trim .trim-row span { flex: 1; }
.trim .trim-row .icon { width: 18px; height: 18px; flex: none; }
.trim-toast { position: fixed; inset: 16px auto auto 50%; margin: 0; border: 0; transform: translateX(-50%); z-index: 95; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 999px; background: var(--ink); color: var(--bg-raised, var(--bg)); font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); white-space: nowrap; }
.trim-toast .btn { color: var(--accent); background: color-mix(in srgb, var(--bg-raised, var(--bg)) 92%, transparent); border-radius: 999px; padding: 4px 12px; }