/* ATS owns its full-width canvas and compact chrome. Themes use shared tokens. */
.ats-dialog {
  --ats-rail: #7f8c9c;
  --ats-danger: #ff6961;
  --ats-platform: #303a47;
  position: fixed;
  /* Fixed edges keep Safari's zoomed layout inside the viewport without
   * dividing viewport lengths by a scale inside calc(). */
  inset: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  width: auto;
  height: auto;
  z-index: 9300;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--material-rim,var(--ui-line));
  border-radius: 20px;
  background: var(--material-panel,var(--ui-field));
  -webkit-backdrop-filter: var(--material-blur,none);
  backdrop-filter: var(--material-blur,none);
  color: var(--ui-text);
  box-shadow: var(--material-shadow,var(--ui-shadow));
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.ats-dialog.hidden { display: none; }
html.cityrail-light-ui .ats-dialog { --ats-rail: #697d94; --ats-platform: #e0e7ef; --ats-danger: #b42318; }
.ats-toolbar { display: flex; align-items: center; gap: 16px; padding: 14px 20px; background: var(--material-inset,var(--ui-surface)); }
.ats-toolbar h2 { margin: 0; font-size: 18px; letter-spacing: -.025em; white-space: nowrap; }
.ats-toolbar h2 span { margin-left: 6px; font-size: 13px; font-weight: 500; color: var(--ui-muted); }
.ats-dialog button, .ats-dialog select { font: inherit; color: var(--ui-text); background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: 9px; min-height: 34px; padding: 5px 12px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
.ats-dialog button:hover { background: color-mix(in srgb, var(--ui-card), var(--ui-text) 7%); }
}
.ats-dialog :is(button,select,[tabindex]):focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; }
.ats-dialog button:disabled { opacity: .4; cursor: default; }
.ats-commands [data-command="remove"] { color: var(--ats-danger); }
.ats-line-picker { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ats-line-picker select { max-width: 230px; min-width: 100px; }
.ats-line-color { width: 4px; height: 22px; border-radius: 3px; flex: none; }
.ats-count { color: var(--ui-muted); white-space: nowrap; margin-right: auto; font-variant-numeric: tabular-nums; }
.ats-time { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.ats-time span { font-size: 11px; color: var(--ui-muted); }
.ats-time time { font-size: 16px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ats-view-tools { display: flex; gap: 4px; margin-left: auto; }
.ats-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 8px 20px 12px; border-bottom: 1px solid var(--ui-line); background: var(--material-inset,var(--ui-surface)); color: var(--ui-muted); font-size: 11px; }
.ats-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ats-legend i { width: 14px; height: 3px; border-radius: 2px; }
.ats-viewport { flex: 1; min-height: 120px; overflow: auto; overscroll-behavior: contain; cursor: grab; position: relative; }
.ats-viewport.is-dragging { cursor: grabbing; user-select: none; }
.ats-sheet {
  min-width: 100%;
  min-height: 100%;
  display: grid;
  align-items: center;
  justify-items: start;
  width: max-content;
  transition: translate 400ms cubic-bezier(.32,.72,0,1);
}
.ats-diagram[hidden] { display: none; }
.ats-diagram { display: block; flex: none; overflow: visible; }
.ats-diagram text { fill: var(--ui-text); font-size: 12px; }
.ats-diagram .ats-station-name { font-size: 15px; font-weight: 600; }
.ats-diagram .ats-station-note { fill: var(--ui-muted); font-size: 11px; }
.ats-transfers { display: grid; gap: 4px; justify-items: center; font: 11px/16px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--ui-muted); }
.ats-transfers span { display: flex; align-items: center; gap: 5px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ats-transfers i { width: 3px; height: 12px; border-radius: 2px; flex: none; }
.ats-rail { stroke: var(--ats-rail); fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ats-platform, .ats-depot { fill: var(--ats-platform); stroke: var(--ui-line); }
.ats-guide { stroke: var(--ui-line); }
.ats-diagram .ats-link { fill: var(--ui-focus); cursor: pointer; font-size: 11px; }
.ats-train { cursor: pointer; }
.ats-train rect { fill: var(--train-color); stroke: var(--ui-field); stroke-width: 2; }
.ats-train path { stroke: white; stroke-width: 1.5; fill: none; }
.ats-train.selected rect { stroke: var(--ui-text); stroke-width: 3; }
.ats-footer { padding: 12px 20px; background: var(--material-inset,var(--ui-surface)); border-top: 1px solid var(--ui-line); }
.ats-hint { margin: 0; color: var(--ui-muted); font-size: 12px; }
.ats-selection { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; }
.ats-selection[hidden], .ats-hint[hidden], .ats-empty[hidden] { display: none; }
.ats-train-heading { display: grid; gap: 3px; }
.ats-train-heading span { font-size: 12px; color: var(--ui-muted); }
.ats-selection dl { display: flex; gap: 22px; margin: 0; font-variant-numeric: tabular-nums; }
.ats-selection dt { font-size: 10px; color: var(--ui-muted); }
.ats-selection dd { margin: 3px 0 0; white-space: nowrap; }
.ats-commands { display: flex; gap: 5px; margin-left: auto; }
.ats-commands button { font-size: 12px; }
.ats-empty { position: absolute; inset: 35% 20px auto; text-align: center; color: var(--ui-muted); }
@media (max-width: 700px) {
  .ats-dialog { inset: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); border-radius: 0; border: 0; }
  .ats-toolbar { padding: 12px; gap: 8px; flex-wrap: wrap; }
  .ats-toolbar h2 span { display: none; }
  .ats-count { flex: 1; order: 3; font-size: 12px; }
  .ats-time { order: 3; margin-left: auto; }
  .ats-line-picker { flex:1 1 140px; min-width:140px; }
  .ats-line-picker select { width: 100%; min-width: 70px; }
  .ats-legend { padding: 6px 12px 10px; gap: 6px 12px; }
  .ats-footer { padding: 10px 12px max(10px, env(safe-area-inset-bottom)); }
  .ats-selection { gap: 10px; }
  .ats-selection dl { gap: 12px; flex-wrap: wrap; }
  .ats-commands { margin: 0; flex-wrap: wrap; }
  .ats-hint { font-size: 11px; }
}

.ats-command-feedback { margin: 6px 0 0; color: var(--ui-muted); font-size: 11px; }
.ats-command-feedback:empty { display: none; }

.ats-candidates {display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:10px;}
.ats-candidates[hidden] {display:none;}
.ats-candidates span {color:var(--ui-muted); font-size:11px;}
.ats-candidates button[aria-pressed="true"] {border-color:var(--ui-focus);}

@media (pointer:coarse) {
  .ats-dialog button, .ats-dialog select { min-height:44px; }
  .ats-dialog button { min-width:44px; }
  .ats-dialog select { height:44px; font-size:16px; }
}
@media (pointer:coarse) and (max-height:500px) {
  .ats-toolbar { padding:8px 12px; }
  .ats-viewport { min-height:60px; }
  .ats-footer { max-height:45%; overflow:auto; }
}

.ats-viewport.is-dragging .ats-sheet { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .ats-sheet { transition: none; translate: none; }
}

.ats-formation { fill: #fff; font-size: 10px; pointer-events: none; }

/* Task controls share the selected train's existing footer surface. */
.ats-task-controls { display:flex; align-items:end; flex-wrap:wrap; gap:10px; flex-basis:100%; }
.ats-task-controls label { display:grid; gap:5px; color:var(--ui-muted); font-size:10px; }
.ats-task-controls label > span { color:var(--ui-text); font-size:12px; min-height:32px; display:flex; align-items:center; }
.ats-task-controls select { height:32px; font:inherit; color:var(--ui-text); background:var(--ui-surface); border:1px solid var(--ui-line); border-radius:8px; padding:4px 8px; }
.ats-task-controls button { font-size:12px; }
.ats-task-status { margin-left:auto; align-self:center; font-size:12px; }
@media (pointer:coarse) {
  .ats-task-controls select { height:44px; font-size:16px; }
}
@media (max-width:700px) {
  .ats-task-status { margin-left:0; }
}