/* --- commute ribbon ------------------------------------------ */
  .commute[hidden] { display: none; }
  /* single narrow column on phones; on wider screens the drive info moves
     up beside the trains instead of stacking under them (the panel has
     always been full width - it just wasn't using the right-hand space) */
  .commute #cm-body { display: flex; flex-direction: column; gap: 14px; max-width: 34rem; }
  .commute .cm-src, .commute .cm-drive-example { max-width: 34rem; }
  .commute.cm-dormant #cm-body { gap: 3px; }
  .cm-rail { display: flex; flex-direction: column; gap: 14px; }

  @media (min-width: 720px) {
    /* signed-in + open window: trains | live drive block (both are direct
       children of #cm-body - renderSnapshot puts legs in .cm-rail) */
    .commute.cm-has-road #cm-body {
      flex-direction: row; align-items: flex-start; gap: 22px; max-width: none;
    }
    .commute.cm-has-road #cm-body > .cm-rail { flex: 1 1 0; min-width: 0; }
    .commute.cm-has-road #cm-body > .cm-road { flex: 0 1 20rem; }

    /* anon + open window: trains | static drive example (siblings in .cm-main) */
    .commute.cm-anon-example .cm-main {
      display: flex; align-items: flex-start; gap: 22px;
    }
    .commute.cm-anon-example #cm-body { flex: 1 1 0; min-width: 0; max-width: none; }
    .commute.cm-anon-example .cm-drive-example { flex: 0 1 20rem; max-width: none; margin: 0; }
    /* the example gets its own column now, so let it fill it */
    .commute.cm-anon-example .cm-drive-example img,
    .commute.cm-anon-example .cm-drive-example figcaption { max-width: none; }
  }
  .cm-line { margin: 0; font: 500 0.92rem/1.4 var(--sans); color: var(--ink-soft); }
  .cm-last { margin: 0; font: 400 0.74rem/1.4 var(--mono); color: var(--ink-dim); }
  .cm-leg, .cm-road {
    background: rgba(9, 20, 37, 0.24);
    border: 1px solid var(--panel-brd);
    border-radius: 12px;
    padding: 11px 13px;
  }
  @media (prefers-color-scheme: dark) {
    .cm-leg, .cm-road { background: rgba(0, 0, 0, 0.22); }
  }
  .cm-leg-h {
    font: 700 0.62rem/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 8px;
  }
  .cm-trip {
    display: grid;
    grid-template-columns: minmax(3.6rem, max-content) 1fr auto;
    align-items: baseline;
    gap: 2px 10px;
    padding: 4px 0;
    font: 500 0.86rem/1.35 var(--mono);
    color: var(--ink);
  }
  .cm-trip + .cm-trip { border-top: 1px solid color-mix(in srgb, var(--panel-brd) 55%, transparent); }
  .cm-num { font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
  .cm-num.cm-cancel { text-decoration: line-through; color: var(--ink-dim); }
  .cm-dep { color: var(--ink); }
  .cm-sched-strike { text-decoration: line-through; color: var(--ink-dim); margin-right: 3px; }
  .cm-arr { grid-column: 2 / 4; font-size: 0.76rem; color: var(--ink-dim); }
  .cm-delay { font: 700 0.72rem/1 var(--mono); white-space: nowrap; }
  .cm-delay.cm-mute { color: var(--ink-dim); }
  .cm-delay.cm-warn { color: #ffb454; }
  .cm-delay.cm-alert { color: #ff8a6b; }
  .cm-tag {
    margin-left: 5px; padding: 1px 5px; border-radius: 4px;
    font: 600 0.6rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--ink-dim); border: 1px solid var(--panel-brd);
  }
  .cm-none { font: 400 0.8rem/1.4 var(--mono); color: var(--ink-dim); padding: 3px 0; }
  .cm-amtrak { opacity: 0.9; }
  .cm-amtrak .cm-num { color: var(--accent-2); }
  .cm-amtrak-note { font: 400 0.68rem/1.4 var(--mono); color: #ffb454; margin-top: 3px; }
  .cm-road-line { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font: 500 0.9rem/1.3 var(--mono); }
  .cm-road-min { font-weight: 700; color: var(--ink); }
  .cm-seg { font: 400 0.78rem/1.5 var(--mono); color: var(--ink-soft); }
  .cm-incident { font: 400 0.76rem/1.4 var(--mono); color: #ffb454; margin-top: 6px; }
  .cm-incident.cm-alert { display: flex; align-items: flex-start; gap: 8px; }
  .cm-incident.cm-alert .cm-alert-body { flex: 1; min-width: 0; }
  .cm-incident.cm-alert .cm-alert-trip { margin-top: 3px; font-size: 0.72rem; color: var(--ink-dim); }
  .cm-incident .cm-x { flex-shrink: 0; width: 18px; height: 18px; padding: 0; line-height: 16px; text-align: center; font: 400 0.95rem/1 var(--mono); color: var(--ink-dim); background: transparent; border: 1px solid var(--panel-brd); border-radius: 5px; cursor: pointer; }
  .cm-incident .cm-x:hover { color: var(--ink-soft); border-color: currentColor; }
  .cm-src { margin: 10px 0 0; font: 400 0.66rem/1.4 var(--mono); color: var(--ink-dim); }
  .cm-drive-example { margin: 12px 0 0; }
  .cm-drive-example[hidden] { display: none; }
  .cm-drive-example img {
    display: block; width: 100%; height: auto; max-width: 280px;
    border: 1px solid var(--panel-brd); border-radius: 10px;
  }
  .cm-drive-example figcaption {
    margin: 5px 0 0; font: 400 0.66rem/1.4 var(--mono); color: var(--ink-dim);
    max-width: 280px;
  }
  .cm-drive-example figcaption a { color: var(--ink-soft); }