#line-config-panel .cfg-line-operation-status {
  margin: 12px 0;
  color: var(--ui-danger, #ef4444);
  text-align: center;
  font-weight: 800;
}
#line-config-panel .cfg-line-operation-button {
  min-height: 44px;
  flex: 1;
  border: 1px solid var(--cr-object-border);
  border-radius: 10px;
  background: var(--cr-object-card);
  color: var(--cr-object-text);
  cursor: pointer;
}

.line-config-disclosure > summary:focus-visible,
.line-config-launcher:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 3px;
  border-radius: 10px;
}
.line-config-disclosure-body {
  min-width: 0;
  padding: 16px;
}
/* Calm grouped data surfaces; numbers stay readable without relying on color. */
.service-share-empty {
  margin: 0;
  color: var(--cr-object-muted);
  font-size: 12px;
  line-height: 1.5;
}
.service-share-metric {
  margin: 18px 0;
}
.service-share-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 10px;
}
.service-share-heading h4 {
  margin: 0;
  color: var(--cr-object-text);
  font-size: 13px;
  font-weight: 600;
}
.service-share-heading > span {
  color: var(--cr-object-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.service-share-bar {
  display: flex;
  height: 18px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--cr-object-card-soft);
  box-shadow: inset 0 0 0 1px var(--cr-object-border);
}
.service-share-bar > span {
  flex: 0 0 auto;
}
.service-share-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.service-share-legend li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  color: var(--cr-object-text);
  font-size: 12px;
  line-height: 1.4;
}
.service-share-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.service-share-key i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.service-share-legend strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.service-share-empty {
  margin-top: 8px;
}



/* Editable headways retain a visible unit and the same numeric alignment. */
#line-config-panel .headway-value {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  color: var(--cr-object-accent);
  font-size: 14px;
  font-weight: 600;
}
#line-config-panel .headway-value input {
  box-sizing: border-box;
  width: 76px;
  min-height: 36px;
  padding: 4px 6px;
  border: 1px solid var(--cr-object-border);
  border-radius: 8px;
  background: var(--cr-object-card);
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Use the full card width for one-line period ranges and editable headways. */
#cfg-freq-panel .freq-input-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  column-gap: 8px;
  row-gap: 4px;
}
#cfg-freq-panel .freq-label {
  min-width: 0;
  text-align: left;
}
#cfg-freq-panel .freq-slider-wrp {
  min-width: 0;
}
#cfg-freq-panel .freq-sub {
  grid-column: 1 / -1;
  white-space: nowrap;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

#cfg-ring-direction-row[hidden] {
  display: none;
}

/* Map editor owns these controls; the large configuration panel is released
 * while a session is active, leaving room for one-finger pan/two-finger zoom. */
#line-edit-toolbar {
  position: fixed;
  top: var(--ui-draw-top, max(76px, calc(env(safe-area-inset-top) + 68px)));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2100;
  width: min(540px, calc(100% - 24px));
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  background: var(--material-panel, var(--ui-surface));
  color: var(--ui-text);
  box-shadow: var(--material-shadow, var(--ui-shadow));
  backdrop-filter: var(--material-blur, none);
  -webkit-backdrop-filter: var(--material-blur, none);
}
#line-edit-toolbar.hidden {
  display: none;
}
.line-edit-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
#line-edit-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
#line-edit-toolbar button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-card);
  color: var(--ui-text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  touch-action: manipulation;
}
#line-edit-toolbar button:active {
  opacity: .65;
}
#line-edit-toolbar button:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}
#line-edit-tools,
#line-edit-rails {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
}
#line-edit-tools button[aria-pressed="true"],
#line-edit-rails button[aria-pressed="true"] {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  color: #fff;
}
#line-edit-rails {
  margin-top: 6px;
}
#line-edit-rails[hidden] {
  display: none;
}
#line-edit-toolbar #line-edit-finish {
  font-weight: 650;
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  color: #fff;
}
#line-edit-drag-hint {
  margin: 8px 2px 0;
  color: var(--ui-muted);
  font-size: 12px;
  line-height: 1.5;
}
.line-edit-node-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}
.line-edit-node-icon span {
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .18), 0 3px 8px rgba(0, 0, 0, .2);
  pointer-events: none;
}
.line-edit-node-icon:active {
  cursor: grabbing;
}
@media (max-height: 500px) {
  #line-edit-toolbar {
    top: max(64px, calc(env(safe-area-inset-top) + 56px));
    width: min(640px, calc(100% - 24px));
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(200px,1fr);
    gap: 6px 10px;
  }
  .line-edit-heading {
    margin-bottom: 0;
  }
  #line-edit-drag-hint {
    grid-column: 1 / -1;
    margin-top: 0;
  }
  #line-edit-toolbar.hidden {
    display: none;
  }
}

.station-edit-node-icon span {
  width: 18px;
  height: 18px;
  border-radius: 5px;
}

/* Names and demand metrics retain the same palette as their containing card. */
.cityrail-line-panel-rename-hint {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--cr-object-muted);
  white-space: nowrap;
}
.cfg-through-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 12px;
  padding: 16px;
  border: 1px solid var(--cr-object-border);
  border-radius: 12px;
  background: var(--cr-object-card);
  color: var(--cr-object-text);
}
.cfg-through-title {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
}
.cfg-through-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}
.cfg-through-row select, .cfg-through-row button {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--cr-object-border);
  border-radius: 10px;
  background: var(--ui-field);
  color: var(--cr-object-text);
}
.cfg-through-row select { max-width: 100%; }
.cfg-through-row button { cursor: pointer; }
.cfg-through-row button.on { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
.cfg-through-note {
  color: var(--cr-object-muted);
  font-size: 12px;
  line-height: 1.5;
}
/* Embedded guide is a centered in-flow card; standalone construction owns fixed placement. */
#cityrail-line-depot-guide-popover {
  display: none;
  width: 100%;
  box-sizing: border-box;
  margin: 12px auto;
  padding: 14px;
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  background: var(--material-panel,var(--ui-surface));
  color: var(--ui-text);
  box-shadow: var(--operation-frame-shadow,var(--material-shadow,var(--ui-shadow)));
  backdrop-filter: var(--material-blur,none);
  -webkit-backdrop-filter: var(--material-blur,none);
}
#cityrail-line-depot-guide-popover.visible { display: block; }
#cityrail-line-depot-guide-popover.standalone {
  position: fixed;
  z-index: 2200;
  left: 50%;
  translate: -50% 0;
  bottom: max(90px,calc(env(safe-area-inset-bottom) + 80px));
  width: min(420px,calc(100% - 24px));
  max-height: calc(100dvh - 180px);
  overflow: auto;
}
.depot-guide-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.depot-guide-panel-head h3 { margin: 0; font-size: 16px; }
.depot-guide-pill { font-size: 11px; color: var(--ui-muted); white-space: nowrap; }
.depot-guide-description { margin: 10px 0; color: var(--ui-muted); font-size: 12px; line-height: 1.5; }
.depot-guide-steps { display: grid; gap: 10px; }
.depot-guide-step { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; }
.depot-guide-step i {
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  height: 22px;
  background: var(--ui-card);
  border: 1px solid var(--ui-line);
  border-radius: 50%;
  font-style: normal;
}
.depot-guide-step.done i { color: var(--ui-accent); }
.depot-guide-step b, .depot-guide-step span { display: block; line-height: 1.5; }
.depot-guide-step span { color: var(--ui-muted); }
.depot-guide-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.depot-guide-actions button {
  min-height: 44px;
  padding: 8px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-card);
  color: var(--ui-text);
  font-size: 12px;
  cursor: pointer;
}
.depot-guide-actions button:disabled { opacity: .5; cursor: default; }
/* Station rename dialog material; runtime owns its promise/focus and exit cleanup. */
.cityrail-station-rename-overlay {
  position:fixed;
  inset:0;
  z-index:2147482500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:var(--material-scrim,var(--site-backdrop));
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
}
.cityrail-station-rename-dialog {
  width:min(380px,calc(100vw - 40px));
  border-radius:18px;
  padding:18px;
  background: var(--material-panel,rgba(28,28,30,.92));
  border:1px solid var(--ui-line);
  box-shadow: var(--material-shadow,0 24px 90px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.08));
  color:var(--ui-text);
  backdrop-filter: var(--material-blur,none);
  -webkit-backdrop-filter: var(--material-blur,none);
}
.cityrail-station-rename-dialog h3 {
  margin:0 0 6px;
  font-size:18px;
  line-height:1.2;
  font-weight:850;
  letter-spacing:0;
}
.cityrail-station-rename-dialog p {
  margin:0 0 14px;
  font-size:12px;
  line-height:1.45;
  color:var(--ui-muted);
}
.cityrail-station-rename-dialog input {
  width:100%;
  height:42px;
  box-sizing:border-box;
  border-radius:12px;
  border:1px solid var(--ui-line);
  background:var(--ui-field);
  color:var(--ui-text);
  outline:0;
  padding:0 12px;
  font:600 14px/42px -apple-system,BlinkMacSystemFont,"SF Pro Text","Microsoft YaHei",sans-serif;
}
.cityrail-station-rename-dialog input:focus {
  border-color:rgba(10,132,255,.76);
  box-shadow:0 0 0 4px rgba(10,132,255,.16);
}
.cityrail-station-rename-actions {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:14px;
}
.cityrail-station-rename-actions button {
  min-height:44px;
  border:0;
  border-radius:999px;
  padding:0 14px;
  font-size:13px;
  font-weight:850;
  letter-spacing:0;
  cursor:pointer;
}
.cityrail-station-rename-cancel {
  background:var(--ui-card);
  color:var(--ui-text);
}
.cityrail-station-rename-save {
  background:#0A84FF;
  color:#fff;
}

/* Construction choice uses the same panel material and readable theme text. */
#loop-choice-overlay {
  position: fixed;
  inset: 0;
  z-index: 22000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--material-scrim,var(--site-backdrop));
}
#loop-choice-overlay.hidden { display: none; }
.loop-choice-panel {
  width: min(420px,calc(100vw - 32px));
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  background: var(--material-panel,var(--ui-surface));
  color: var(--ui-text);
  box-shadow: var(--material-shadow,var(--ui-shadow));
  backdrop-filter: var(--material-blur,none);
  -webkit-backdrop-filter: var(--material-blur,none);
}
.loop-choice-panel h2 { margin: 0 0 8px; font-size: 20px; }
.loop-choice-panel p { margin: 0 0 16px; color: var(--ui-muted); font-size: 13px; line-height: 1.65; }
.loop-choice-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.loop-choice-actions button {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--ui-line);
  background: var(--ui-card);
  color: var(--ui-text);
  font-weight: 600;
  cursor: pointer;
}
.loop-choice-actions .primary { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
.loop-choice-actions .secondary:hover { background: var(--ui-hover); }
}

.line-config-launcher {
  min-height: calc(44px + 2px);
  width: 100%;
  text-align: left;
}