/* Time round (ROU-65, design: docs/design/jj-time.md): the time pill and
 * picker sheet, the notice line in the summary, the "why does the route go
 * this way" card. Signs are drawn by time-ui.js (map symbols) and keep their
 * real sign colours in both themes; everything around them follows the tokens. */

/* ---------- Time pill (§6.1): its own row, right above the summary ---------- */
.when-row { display: flex; align-items: center; gap: var(--jj-space-1); padding-top: var(--jj-space-2); }
.when-pill { min-height: 36px; font-weight: var(--jj-fw-bold); }
.when-pill::after { inset: -4px 0; } /* 44 px hit area */
.when-pill > .jj-icon { width: 18px; height: 18px; }
.when-pill.set { background: var(--jj-accent-soft); color: var(--jj-accent); box-shadow: inset 0 0 0 1.5px var(--jj-accent); }
.when-chev { display: inline-flex; margin-left: -2px; }
.when-chev .jj-icon { width: 16px; height: 16px; transform: rotate(90deg); }
.when-x {
  position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--jj-radius-pill);
  background: var(--jj-surface-2); color: var(--jj-text-2); box-shadow: inset 0 0 0 1px var(--jj-border);
}
.when-x::after { content: ""; position: absolute; inset: -4px; }
.when-x .jj-icon { width: 18px; height: 18px; }

/* ---------- Picker (§6.2): a bottom sheet on phones, docked in the column on wide screens ---------- */
.when-sheet { top: auto; max-height: calc(100% - var(--jj-safe-top) - 56px); }
.when-sheet .dlg-head { padding-top: var(--jj-space-3); }
.when-sheet .dlg-body { display: grid; gap: var(--jj-space-3); padding-top: var(--jj-space-3); }
.when-modes button { min-height: 44px; }
.when-days { margin-bottom: 0; }
.when-days .chip[aria-checked="true"] { background: var(--jj-accent-soft); color: var(--jj-accent); box-shadow: inset 0 0 0 1.5px var(--jj-accent); }
.when-date { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.when-time { display: flex; align-items: center; justify-content: center; gap: var(--jj-space-2); }
.when-num {
  width: 2.6ch; height: 56px; padding: 0 var(--jj-space-1); border: 0; border-radius: var(--jj-radius-md);
  background: var(--jj-surface-2); color: var(--jj-text); text-align: center;
  font: var(--jj-fw-heavy) var(--jj-fs-display)/var(--jj-lh-display) var(--jj-font-display); font-variant-numeric: var(--jj-num);
  box-sizing: content-box;
}
.when-num:focus-visible { outline: 2px solid var(--jj-focus); outline-offset: 2px; }
.when-colon { font: var(--jj-fw-heavy) var(--jj-fs-display)/var(--jj-lh-display) var(--jj-font-display); color: var(--jj-text-3); }
.when-step { position: relative; width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--jj-radius-pill); background: var(--jj-surface-3); color: var(--jj-text); }
.when-step .jj-icon { width: 20px; height: 20px; }
.when-ampm { width: 120px; margin: 0 auto; }
.when-ampm button { min-height: 44px; }
.when-hint { margin: 0; color: var(--jj-text-3); font-size: var(--jj-fs-label); line-height: var(--jj-lh-label); hyphens: auto; }
.when-hint.err { color: var(--jj-danger); font-weight: var(--jj-fw-medium); }
.when-done { width: 100%; min-height: var(--jj-hit-lg); }
.when-done:disabled { opacity: 0.45; }
@media (min-width: 900px), (orientation: landscape) and (max-height: 540px) {
  .when-sheet { top: auto; bottom: calc(var(--jj-safe-bottom) + var(--jj-edge)); max-height: calc(100% - var(--jj-safe-top) - var(--jj-safe-bottom) - 2 * var(--jj-edge)); }
}

/* ---------- Notice line in the summary (§5) ---------- */
.sum-notice {
  display: flex; align-items: center; gap: var(--jj-space-2); width: 100%; min-height: 44px;
  margin-top: var(--jj-space-1); padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
  color: var(--jj-text-2); font: var(--jj-fw-medium) var(--jj-fs-label)/var(--jj-lh-label) var(--jj-font);
}
.sum-notice .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sum-notice.warn { color: var(--jj-warning); }
/* Warnings may take two lines: the end ("… closes") is the point (ROU-71). */
.sum-notice.warn .t { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.sum-notice > .jj-icon { flex: none; width: 16px; height: 16px; color: var(--jj-text-3); }
.sum-notice .more {
  flex: none; padding: 1px 7px; border-radius: var(--jj-radius-pill); background: var(--jj-surface-2);
  color: var(--jj-text-2); font-size: var(--jj-fs-caption); line-height: var(--jj-lh-caption); font-weight: var(--jj-fw-bold);
}
.rx-mini { flex: none; width: 22px; height: 22px; }
.rx-mini-ico { flex: none; display: grid; place-items: center; width: 22px; height: 22px; }
.rx-mini-ico .jj-icon { width: 18px; height: 18px; }
.rx-mini-ico.warn { color: var(--jj-warning); }
.rx-mini-ico.ev { color: var(--jj-danger); }
.sheet.collapsed .sum-notice { display: none; }

/* ---------- Card (§4) ---------- */
.rx-head { display: flex; align-items: center; gap: var(--jj-space-3); margin: 0 40px var(--jj-space-2) 0; }
.rx-head h3 { margin: 0; font-weight: var(--jj-fw-heavy); }
.rx-ttl { min-width: 0; }
.rx-where { color: var(--jj-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-card-sign { flex: none; width: 54px; height: 54px; margin: -3px; }
.rx-ev { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--jj-danger-strong, #D12F2F); color: #FFFFFF; }
.rx-ev.change { background: var(--jj-warning); color: var(--jj-warning-ink, #241800); }
.rx-ev .jj-icon { width: 26px; height: 26px; }
.rx-pager { display: flex; align-items: center; gap: var(--jj-space-1); margin: 0 0 var(--jj-space-1); color: var(--jj-text-3); font-size: var(--jj-fs-caption); }
.rx-pager .icon-btn { position: static; width: 44px; height: 44px; }
.rx-pager .icon-btn:disabled { opacity: 0.35; }
.rx-why { margin: 0 0 var(--jj-space-2); color: var(--jj-text); font-size: var(--jj-fs-body); line-height: var(--jj-lh-body); hyphens: auto; }
.rx-fact { display: flex; align-items: flex-start; gap: var(--jj-space-2); margin: var(--jj-space-1) 0; color: var(--jj-text); }
.rx-fact > .jj-icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--jj-text-2); }
.rx-fact .num { font-variant-numeric: var(--jj-num); }
.rx-fact .s { color: var(--jj-text-2); }
.rx-fact.warn .s { color: var(--jj-warning); }
.rx-links { display: flex; flex-wrap: wrap; gap: var(--jj-space-2); margin-top: var(--jj-space-2); }
.rx-links .pill { position: relative; min-height: 36px; display: inline-flex; align-items: center; color: var(--jj-accent); font-weight: var(--jj-fw-medium); text-decoration: none; }
.rx-links .pill::after { content: ""; position: absolute; inset: -4px 0; }

/* Settings → Map: the row icon is a small sign. */
.rx-set { flex: none; width: 22px; height: 22px; }