/* The time controller (timecontrol.ts): interface colours only from the theme (CON-06, DEV-07).
   "Big time and scrubber" (product owner, 28 Oct 2026): current time large, the transport on one row,
   the scrubber over the window, a thin strip of the whole plot, and the window's details folded away.
   It works from a 210 px column to a 390 px phone, never scrolling sideways. */
.timebar { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--vscode-foreground); container-type: inline-size; min-width: 0; }
.timebar[hidden] { display: none; }
.timebar button { font: inherit; margin: 0; }
.timebar button:focus-visible, .timebar select:focus-visible, .timebar input:focus-visible { outline: 2px solid var(--vscode-focusBorder); outline-offset: 1px; }

/* Current time: the largest text in the panel, tabular so it does not jitter while playing; its date small beside it. */
.tc-now { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 0; min-width: 0; }
.timebar .tc-time { padding: 0 2px; margin-left: -2px; background: none; border: 1px solid transparent; border-radius: 3px; color: var(--vscode-foreground); cursor: text;
  font-family: var(--vscode-font-family); font-size: clamp(22px, 10.5cqi, 32px); font-weight: 600; line-height: 1.1; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.timebar .tc-time:hover { border-color: var(--vscode-input-border, var(--vscode-widget-border, var(--vscode-focusBorder))); background: none; }
.tc-time[hidden], .tc-time-input[hidden] { display: none; }
.tc-time-input { width: 100%; max-width: 15em; min-width: 0; box-sizing: border-box; padding: 2px 6px; font-family: var(--vscode-font-family); font-size: clamp(16px, 8cqi, 22px); font-variant-numeric: tabular-nums;
  background: var(--vscode-input-background); color: var(--vscode-input-foreground, var(--vscode-foreground)); border: 1px solid var(--vscode-input-border, var(--vscode-focusBorder)); border-radius: 2px; }
.tc-date { color: var(--vscode-descriptionForeground); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tc-time-problem, .tc-window-problem { color: var(--vscode-errorForeground); font-size: 11px; }
.tc-time-problem:empty, .tc-window-problem:empty { display: none; }

/* The transport: icon buttons of 32 px at least (44 px by touch), the speed and the step beside them. */
.tc-transport { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.timebar .tc-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; box-sizing: border-box; border-radius: 4px; cursor: pointer;
  background: var(--vscode-button-secondaryBackground); color: var(--vscode-button-secondaryForeground); border: 1px solid var(--vscode-button-border, var(--vscode-contrastBorder, transparent)); }
.timebar .tc-icon:hover { background: var(--vscode-button-secondaryHoverBackground); }
.timebar .tc-transport .tc-play { width: 36px; background: var(--vscode-button-background); color: var(--vscode-button-foreground); }
.timebar .tc-transport .tc-play:hover { background: var(--vscode-button-hoverBackground); }
.tc-icon svg { width: 16px; height: 16px; display: block; }
/* Play off: the window is shorter than one tick at this speed. The button stays focusable, to say why. */
.timebar .tc-transport .tc-play.off { opacity: 0.5; cursor: not-allowed; }
.timebar .tc-speed { width: auto; height: 32px; padding: 0 2px; box-sizing: border-box; background: var(--vscode-dropdown-background); color: var(--vscode-dropdown-foreground, var(--vscode-foreground)); border: 1px solid var(--vscode-dropdown-border, transparent); border-radius: 2px; font: inherit; }
.tc-step-label { margin-left: 2px; font-size: 11px; white-space: nowrap; color: var(--vscode-descriptionForeground); font-variant-numeric: tabular-nums; }

/* The scrubber: a full-width slider over the window, with a prominent thumb and tick labels beneath. */
.tc-scrub { display: flex; flex-direction: column; min-width: 0; }
.tc-current { -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; height: 22px; margin: 0; background: transparent; cursor: pointer; }
.tc-current::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--vscode-scrollbarSlider-background, var(--vscode-input-background)); border: 1px solid var(--vscode-widget-border, var(--vscode-contrastBorder, transparent)); }
.tc-current::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--vscode-button-background); border: 2px solid var(--vscode-button-foreground); box-sizing: border-box; }
.tc-current::-moz-range-track { height: 6px; border-radius: 3px; background: var(--vscode-scrollbarSlider-background, var(--vscode-input-background)); }
.tc-current::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--vscode-button-background); border: 2px solid var(--vscode-button-foreground); box-sizing: border-box; }
.tc-current:hover::-webkit-slider-thumb { background: var(--vscode-button-hoverBackground); }
.tc-current:focus-visible { outline: 2px solid var(--vscode-focusBorder); outline-offset: 1px; }
/* Tick labels, under the thumb's travel (half its width in from each end). */
.tc-ticks { position: relative; height: 13px; margin: 0 9px; overflow: hidden; }
.tc-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 10px; line-height: 13px; color: var(--vscode-descriptionForeground); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tc-tick::before { content: ""; position: absolute; left: 50%; top: -3px; height: 3px; border-left: 1px solid var(--vscode-descriptionForeground); }

/* The overview strip: the whole plot, the window a band on it, an edge at each end, a mark at current time. */
.tc-window { position: relative; height: 16px; margin: 0 9px; touch-action: none; cursor: pointer; }
.tc-rail { position: absolute; left: 0; right: 0; top: 5px; height: 6px; border-radius: 3px; background: var(--vscode-input-background); border: 1px solid var(--vscode-widget-border, var(--vscode-contrastBorder, transparent)); box-sizing: border-box; }
.tc-band { position: absolute; top: 2px; height: 12px; border-radius: 2px; box-sizing: border-box; background: color-mix(in srgb, var(--vscode-focusBorder) 45%, transparent); border: 1px solid var(--vscode-focusBorder); cursor: grab; }
.tc-band:active { cursor: grabbing; }
.tc-band:focus-visible { outline: 2px solid var(--vscode-focusBorder); outline-offset: 2px; }
.tc-now-mark { position: absolute; top: 0; width: 0; height: 16px; margin-left: -1px; border-left: 2px solid var(--vscode-foreground); pointer-events: none; }
.tc-handle { position: absolute; top: 0; width: 8px; height: 16px; margin-left: -4px; box-sizing: border-box; border-radius: 2px; background: var(--vscode-button-background); border: 1px solid var(--vscode-button-foreground); cursor: ew-resize; }
/* A bigger grip than it looks, for a pointer and a finger. */
.tc-handle::before { content: ""; position: absolute; inset: -6px -6px; }
.tc-handle:focus-visible { outline: 2px solid var(--vscode-focusBorder); outline-offset: 1px; }
/* The part of the window shown that is not the saved window: hatched, in the theme's text colour. */
.tc-beyond { position: absolute; top: 2px; height: 12px; box-sizing: border-box; border: 1px dashed var(--vscode-foreground); background: repeating-linear-gradient(135deg, var(--vscode-foreground) 0 1.5px, transparent 1.5px 5px); opacity: 0.75; cursor: grab; }
.tc-beyond[hidden] { display: none; }

/* Until the analyst keeps or reverts it, a one-line note says the window shown is not the saved one:
   the text cut short if it must (whole on hover, and to screen readers), Keep and Revert at the right.
   A live region, always present. */
.tc-cue { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; }
/* Empty, it takes no room: the gap above it is taken back. */
.tc-cue:not(.showing) { margin-top: -4px; }
.tc-cue.showing { padding: 1px 2px 1px 6px; border: 1px solid var(--vscode-inputValidation-warningBorder, var(--vscode-focusBorder)); background: var(--vscode-inputValidation-warningBackground, var(--vscode-editorWidget-background)); color: var(--vscode-foreground); border-radius: 2px; }
.tc-cue-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-cue-actions { display: inline-flex; flex: none; gap: 4px; }
.tc-cue-actions[hidden] { display: none; }
.timebar .tc-cue button { height: 20px; padding: 0 6px; background: var(--vscode-button-secondaryBackground); color: var(--vscode-button-secondaryForeground); border: 1px solid var(--vscode-button-border, transparent); border-radius: 2px; cursor: pointer; }
.timebar .tc-cue .tc-keep { background: var(--vscode-button-background); color: var(--vscode-button-foreground); }
.timebar .tc-cue button:hover { background: var(--vscode-button-secondaryHoverBackground); }
.timebar .tc-cue .tc-keep:hover { background: var(--vscode-button-hoverBackground); }

/* Window management: a disclosure, collapsed at first. */
.timebar .tc-disclosure { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; width: 100%; padding: 1px 2px; text-align: left; background: none; border: 1px solid transparent; border-radius: 2px; color: var(--vscode-foreground); cursor: pointer; }
.timebar .tc-disclosure:hover { background: var(--vscode-list-hoverBackground); }
.tc-chevron { display: inline-block; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent currentColor; transition: transform 0.1s; align-self: center; }
.tc-disclosure[aria-expanded="true"] .tc-chevron { transform: rotate(90deg); }
.tc-summary-name { font-weight: 600; }
.tc-summary { font-variant-numeric: tabular-nums; }
.tc-summary-context { color: var(--vscode-descriptionForeground); }
.tc-summary-context:empty { display: none; }
.tc-details { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; align-items: center; padding: 2px 0 2px 14px; min-width: 0; }
.tc-details[hidden] { display: none; }
.tc-field { display: contents; }
.tc-field span { color: var(--vscode-descriptionForeground); }
.tc-details input { min-width: 0; width: 100%; box-sizing: border-box; height: 24px; padding: 0 4px; font: inherit; font-variant-numeric: tabular-nums; background: var(--vscode-input-background); color: var(--vscode-input-foreground, var(--vscode-foreground)); border: 1px solid var(--vscode-input-border, var(--vscode-widget-border, transparent)); border-radius: 2px; }
.tc-window-problem, .tc-details-row, .tc-context-row { grid-column: 1 / -1; }
.tc-details-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
.tc-window-length { color: var(--vscode-descriptionForeground); font-variant-numeric: tabular-nums; }
.timebar .tc-whole { height: 24px; padding: 0 8px; background: var(--vscode-button-secondaryBackground); color: var(--vscode-button-secondaryForeground); border: 1px solid var(--vscode-button-border, transparent); border-radius: 2px; cursor: pointer; }
.timebar .tc-whole:hover:not(:disabled) { background: var(--vscode-button-secondaryHoverBackground); }
.timebar .tc-whole:disabled { opacity: 0.5; cursor: default; }
/* How tracks outside the window are drawn, for the plot (the playground; VS Code has it in the view's title menu). */
.tc-context-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--vscode-descriptionForeground); }
.timebar .tc-context { width: auto; height: 24px; padding: 0 2px; background: var(--vscode-dropdown-background); color: var(--vscode-dropdown-foreground, var(--vscode-foreground)); border: 1px solid var(--vscode-dropdown-border, transparent); font: inherit; }
.tc-context-note { font-size: 11px; white-space: normal; }
.tc-context-note:empty { display: none; }

/* A narrow column (under 240 px, such as the docked left column at 1024): the transport closer, still on one row. */
@container (max-width: 240px) {
  .tc-transport { gap: 2px; }
  .timebar .tc-transport .tc-play { width: 32px; }
  .timebar .tc-transport .tc-speed { padding: 0; }
  .tc-step-label { margin-left: 0; }
}

/* By touch (the dock's rule, product owner 23 Oct 2026): the transport at 44 px, the strip's edges easier to take. */
@media (pointer: coarse) {
  .timebar .tc-icon { width: 44px; height: 44px; }
  .timebar .tc-transport .tc-play { width: 52px; }
  .timebar .tc-speed { height: 44px; }
  .tc-current { height: 32px; }
  .tc-current::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -10px; }
  .tc-window { height: 24px; }
  .tc-rail { top: 9px; }
  .tc-band, .tc-beyond { top: 4px; height: 16px; }
  .tc-handle { width: 12px; height: 24px; margin-left: -6px; }
  .tc-handle::before { inset: -8px -10px; }
  .tc-now-mark { height: 24px; }
  .timebar .tc-disclosure { min-height: 32px; align-items: center; }
}

/* Forced colours (Windows High Contrast): the system's colours, so the band, the edges and the thumb never vanish. */
@media (forced-colors: active) {
  .tc-current { -webkit-appearance: auto; appearance: auto; }
  .tc-band { forced-color-adjust: none; background: Highlight; border-color: CanvasText; opacity: 0.6; }
  .tc-handle { forced-color-adjust: none; background: ButtonText; border-color: Canvas; }
  .tc-rail { border-color: CanvasText; }
  .tc-now-mark { forced-color-adjust: none; border-left-color: CanvasText; }
  .tc-beyond { border-color: CanvasText; }
  .tc-tick::before { border-left-color: CanvasText; }
  .tc-chevron { forced-color-adjust: none; border-color: transparent transparent transparent CanvasText; }
  .timebar .tc-transport .tc-play { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
}