/* Shared hierarchy and solid comparison traces. */
.trace-b{stroke-dasharray:none!important}.graph-zoom-toolbar:after{display:none}
/* Drag shares the existing neutral surfaces and RaceBox red. */
#drag-analysis{color:var(--ink)}.drag-shell{display:grid;grid-template-columns:218px minmax(0,1fr);max-width:1960px;margin:auto;align-items:start}.drag-rail{padding:22px 16px;background:var(--surface);border-right:1px solid var(--line);position:sticky;top:var(--development-toolbar-height,0px);max-height:calc(100dvh - var(--development-toolbar-height,0px));overflow-y:auto;overscroll-behavior:contain}.drag-rail-title{margin:25px 0}.drag-rail-title h2{font-size:18px;font-weight:600;line-height:1.3;margin:8px 0}.drag-rail-title p{font-size:12px;color:var(--secondary)}.drag-run-heading{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;color:var(--secondary);margin-bottom:10px}.drag-run-list{display:grid;gap:7px}.drag-run{display:grid;grid-template-columns:1fr auto;gap:5px;text-align:left;border:1px solid transparent;border-radius:9px;background:transparent;padding:13px 10px;color:var(--ink);cursor:pointer}.drag-run>span{font-size:12px}.drag-run strong{font-size:16px;font-variant-numeric:tabular-nums;font-weight:600}.drag-run small{grid-column:1/-1;color:var(--secondary);font-size:10px}.drag-run:hover{background:var(--surface-alt)}.drag-run.selected{background:var(--surface-alt);border-color:var(--line)}.drag-run.best strong{color:var(--green,#31b77e)}.drag-run:disabled{opacity:.4;cursor:default}.drag-demo-label{margin-top:28px;color:var(--secondary);font-size:9px;letter-spacing:1px}.drag-demo-label p{line-height:1.6;font-size:11px;letter-spacing:0}.drag-main{min-width:0;padding:28px 32px}.drag-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px}.drag-heading h1{font-size:28px;font-weight:600;letter-spacing:-.9px;line-height:1.2;margin:7px 0}.drag-heading p{font-size:12px;color:var(--secondary);margin:0}.drag-heading-actions{display:flex;gap:7px}.drag-heading-actions .button{font-size:12px}.drag-best-strip{display:flex;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:auto}.drag-best-strip>button,.drag-best-strip>div{flex:1;min-width:112px;text-align:left;color:var(--ink);background:none;border:0;border-right:1px solid var(--line);padding:16px 20px;display:grid;gap:5px}.drag-best-strip>button{cursor:pointer}.drag-best-strip>button:hover{background:var(--surface-alt)}.drag-best-strip>:last-child{border-right:0}.drag-best-strip span{font-size:12px;color:var(--secondary)}.drag-best-strip strong{font-size:25px;font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.7px}.drag-best-strip small{font-size:10px;color:var(--green,#31b77e)}.drag-context-strip{display:flex;align-items:center;flex-wrap:wrap;gap:12px 26px;margin:17px 0 22px;color:var(--secondary);font-size:11px}.drag-context-strip>span{display:inline-flex;align-items:center;gap:6px}.drag-context-strip b{font-weight:550;color:var(--ink)}.drag-context-strip .icon{width:15px;height:15px}.drag-context-strip .drag-vehicle{margin-left:auto}.drag-info{border:1px solid var(--line);color:var(--secondary);border-radius:50%;background:transparent;font-size:10px;width:17px;height:17px;cursor:pointer}.drag-telemetry{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}.drag-telemetry-heading{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 14px;gap:16px}.drag-telemetry-heading>div:first-child{display:flex;align-items:baseline;gap:15px}.drag-telemetry-heading h2{font-size:17px;font-weight:550;margin:0}.drag-result-time{color:var(--red,#ed2939);font-size:29px;font-weight:600;letter-spacing:-1px;font-variant-numeric:tabular-nums}.drag-unit-toggle{display:flex;border:1px solid var(--line);background:var(--surface-alt);border-radius:7px;padding:3px;gap:2px}.drag-unit-toggle button{color:var(--secondary);background:none;border:0;font-size:12px;border-radius:4px;padding:6px 10px;cursor:pointer}.drag-unit-toggle [aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px #0001}.drag-disciplines{display:flex;gap:8px;padding:0 22px 18px;overflow-x:auto}.drag-disciplines button{border:1px solid var(--line);background:var(--surface-alt);border-radius:8px;padding:10px 13px;color:var(--secondary);display:flex;align-items:center;gap:13px;white-space:nowrap;font-size:12px;cursor:pointer}.drag-disciplines b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}.drag-disciplines button[aria-pressed=true]{border-color:color-mix(in srgb,var(--red,#ed2939) 55%,var(--line));background:color-mix(in srgb,var(--red,#ed2939) 7%,var(--surface));color:var(--ink)}.drag-disciplines button:disabled{opacity:.4;cursor:default}.drag-result-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--line);padding:16px 22px;gap:18px}.drag-stat{display:flex;gap:10px;min-width:0}.drag-stat-icon{color:var(--secondary);padding-top:2px}.drag-stat-icon .icon{width:17px;height:17px}.drag-stat>div{display:grid;gap:6px}.drag-stat span:not(.drag-stat-icon){font-size:11px;color:var(--secondary)}.drag-stat strong{font-size:17px;font-weight:550;line-height:1.25;font-variant-numeric:tabular-nums}.drag-stat small{font-size:10px;color:var(--secondary);line-height:1.4}.drag-chart-toolbar{padding:18px 22px 3px;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}.drag-channel-legend{display:flex;gap:8px}.drag-channel-legend button{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border:0;background:transparent;color:var(--secondary);font-size:12px;cursor:pointer;opacity:.4}.drag-channel-legend [aria-pressed=true]{color:var(--ink);opacity:1}.drag-channel-legend i{width:17px;height:3px;border-radius:3px;background:var(--channel)}.drag-chart-zoom{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--secondary)}.drag-chart-zoom button{font-size:12px;background:var(--surface-alt);color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:4px 9px;min-height:26px;cursor:pointer}.drag-chart-zoom b{min-width:33px;text-align:center;font-weight:500}.drag-chart-host{position:relative;padding:0 12px;touch-action:pan-y}.drag-chart{display:block;width:100%;height:auto;min-height:260px;max-height:470px;overflow:visible;font-size:11px;font-family:inherit}.drag-grid{stroke:var(--line);stroke-width:1;fill:none}.drag-axis-label{fill:var(--secondary)}.drag-cursor-line{stroke:var(--secondary);stroke-width:1;stroke-dasharray:4 3}.drag-hit{cursor:crosshair;touch-action:none}.drag-live-values{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;padding:6px 15px 12px}.drag-live-values>span{display:grid;gap:5px;min-width:75px}.drag-live-values small{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--secondary)}.drag-live-values b{font-size:18px;font-weight:550;color:var(--channel,var(--ink));font-variant-numeric:tabular-nums}.drag-live-values em{font-size:11px;font-style:normal;font-weight:400;color:var(--secondary)}.drag-chart-footer{padding:8px 22px 15px;display:flex;justify-content:space-between;gap:10px;font-size:11px;line-height:1.5;color:var(--secondary)}.drag-no-channels,.drag-incomplete{text-align:center;font-size:13px;color:var(--secondary)}.drag-environment{border-top:1px solid var(--line);background:var(--surface-alt)}.drag-environment summary{padding:14px 22px;font-size:12px;cursor:pointer;color:var(--ink)}.drag-environment summary span{color:var(--secondary);font-size:10px;margin-left:12px}.drag-environment p{font-size:11px;color:var(--secondary);padding:0 22px 15px;line-height:1.6;max-width:800px}.drag-environment .drag-result-stats{border-bottom:0}.drag-footer{padding:20px 0;font-size:11px;color:var(--secondary)}.drag-library-intro{display:flex;align-items:baseline;gap:14px;margin:22px 0;color:var(--ink)}.drag-library-intro>span{font-size:18px;font-weight:550}.drag-library-intro small{color:var(--secondary);font-size:12px}.drag-library-row .session-row-main{grid-template-columns:130px minmax(160px,1fr) 150px auto}.drag-library-overview{padding:18px 24px;background:var(--surface-alt);border-top:1px solid var(--line)}.drag-library-overview p{font-size:11px;color:var(--secondary);margin:14px 0 0}.drag-library-overview .drag-best-strip strong{font-size:22px}.drag-shell button:focus-visible,.drag-chart:focus-visible,.drag-hit:focus-visible{outline:2px solid var(--blue,#578ef0);outline-offset:3px}
@media(min-width:1600px){.drag-main{padding:32px 44px}.drag-chart{max-height:510px}}
@media(max-width:1100px){.drag-shell{grid-template-columns:182px minmax(0,1fr)}.drag-main{padding:22px}.drag-heading{align-items:flex-start;flex-wrap:wrap}.drag-result-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.drag-library-row .session-row-main{grid-template-columns:105px minmax(120px,1fr) 110px}.drag-library-row .session-row-actions{grid-column:2/-1}.drag-best-strip>button,.drag-best-strip>div{padding:14px}.drag-context-strip .drag-vehicle{margin-left:0}}
@media(max-width:760px){.drag-shell{grid-template-columns:1fr}.drag-rail{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--line);padding:14px 18px}.drag-rail-title,.drag-demo-label,.drag-run-heading{display:none}.drag-run-list{display:flex;overflow:auto;margin-top:12px;gap:6px}.drag-run{flex-shrink:0;min-width:135px;padding:10px}.drag-main{padding:20px 14px}.drag-heading h1{font-size:25px}.drag-best-strip strong{font-size:21px}.drag-context-strip{gap:12px 18px}.drag-stat strong{font-size:16px}.drag-telemetry-heading{padding:16px 14px}.drag-disciplines{padding:0 14px 14px}.drag-result-stats{padding:15px 14px;gap:16px 10px}.drag-stat-icon{display:none}.drag-chart-toolbar{padding:13px 10px 0}.drag-chart-host{padding:0;overflow-x:auto}.drag-chart{min-width:540px;min-height:230px}.drag-live-values{gap:14px;justify-content:flex-start;padding-left:20px}.drag-live-values>span{min-width:65px}.drag-live-values b{font-size:16px}.drag-chart-footer{padding:10px 14px;flex-wrap:wrap}.drag-chart-footer>span{max-width:260px}.drag-heading-actions .button{font-size:11px;padding:8px 10px}.drag-library-row .session-row-main{grid-template-columns:1fr auto}.drag-library-row .session-date{grid-column:1/-1}.drag-library-row .session-row-actions{grid-column:1/-1}.drag-library-overview{padding:12px}.drag-chart-zoom{margin-left:auto}.drag-channel-legend{gap:0}.drag-channel-legend button{font-size:11px;padding:6px}.drag-library-intro{flex-wrap:wrap;gap:6px}}
/* Optional v30 polish draft. Append after revision29.css.
   Existing selectors only. No dimensions, layout, visibility, telemetry colors,
   default states or AI Coach rules are changed. */

/* Give the page title and session identity a consistent, restrained weight. */
:where([data-interface-design="simplified"]) .library-heading h1,
:where([data-interface-design="simplified"]) .workspace-heading h1,
:where([data-interface-design="simplified"]) .session-identity h2 {
  font-weight: 600;
}
:where([data-interface-design="simplified"]) .workspace-heading p,
:where([data-interface-design="simplified"]) .session-date small,
:where([data-interface-design="simplified"]) .session-identity > span,
:where([data-interface-design="simplified"]) .session-identity small,
:where([data-interface-design="simplified"]) .session-row-pace > small,
:where([data-interface-design="simplified"]) .session-row-pace > span {
  color: var(--secondary);
}

/* Keep the selected session and active tab clear without additional chrome. */
:where([data-interface-design="simplified"]) .library-tabs button[aria-selected="false"]:hover {
  color: var(--ink);
  background: transparent;
}
:where([data-interface-design="simplified"]) .library-tabs button[aria-selected="true"] {
  font-weight: 600;
}
:where([data-interface-design="simplified"]) .session-library-row:not(.is-new-import) {
  box-shadow: none;
}
:where([data-interface-design="simplified"]) .session-library-row:not(.is-new-import):hover,
:where([data-interface-design="simplified"]) .session-library-row:not(.is-new-import):has([aria-expanded="true"]) {
  border-color: color-mix(in srgb, var(--secondary) 30%, var(--line));
}
:where([data-interface-design="simplified"]) .session-row-actions .session-overview-button {
  box-shadow: none;
}

/* Preserve the frosted direction while reducing repeated raised-card effects.
   Alternative appearance previews retain their established styling. */
:where([data-interface-design="simplified"])[data-accent-style="frosted"] :is(.summary-strip, .analysis-card, .chart-card) {
  box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 5%, transparent);
}
:where([data-interface-design="simplified"])[data-accent-style="frosted"] .section-toolbar {
  box-shadow: none;
}
:where([data-interface-design="simplified"])[data-accent-style="frosted"] .summary-strip .metric-label {
  color: var(--secondary);
}
:where([data-interface-design="simplified"])[data-accent-style="frosted"] .summary-strip > div:first-child > strong {
  font-weight: 650;
}

/* Quiet utility actions without relocating any control or changing selection. */
:where([data-interface-design="simplified"])[data-accent-style="frosted"] .header-actions :is(#export-btn, #more-btn) {
  color: var(--secondary);
  box-shadow: none;
}
:where([data-interface-design="simplified"])[data-accent-style="frosted"] .header-actions :is(#export-btn, #more-btn):hover {
  color: var(--ink);
}
:where([data-interface-design="simplified"])[data-accent-style="frosted"] #compare-btn:not(.engaged) {
  border-color: color-mix(in srgb, var(--secondary) 35%, var(--line));
  box-shadow: none;
}

/* Use the same muted label tone for the two graph interaction control groups. */
:where([data-interface-design="simplified"]) .graph-behavior-bar > span,
:where([data-interface-design="simplified"]) .graph-zoom-toolbar > span:first-child {
  color: var(--secondary);
  font-weight: 550;
}
:where([data-interface-design="simplified"]) .graph-behavior-bar small,
:where([data-interface-design="simplified"]) .graph-zoom-toolbar::after {
  color: var(--secondary);
}

/* Compact graph mode deliberately keeps its inner charts flat. */
:where([data-interface-design="simplified"])[data-accent-style="frosted"][data-graph-style="compact"] .chart-card {
  box-shadow: none;
}