/* ============================================================
   Niagara Transit Widget Redesign — transit-widgets.css
   Scoped shell stylesheet for the [transit_widgets] tabbed shell.
   Ported from realtime-widgets/designing/styles.css and
   realtime-widgets/designing-vertical-tabs/styles.css, rescoped
   under .nt-widget-shell so it overrides the individual widget
   stylesheets loaded before it.
   ============================================================ */

/* ---------- Design tokens (+ shell layout) ---------- */
.nt-widget-shell {
  --nt-blue: #00677f;
  --nt-teal: #0cab9b;
  --nt-rapids-01: #042935;
  --nt-rapids-02: #053747;
  --nt-rapids-03: #07495f;
  --nt-rapids-04: #108b8d;
  --nt-legacy-red: #d32f2f;
  --nt-ticket-yellow: #ffe2a1;
  --nt-limestone: #d3d1cb;
  --nt-sandstone: #f0f0ee;

  --nt-accent: var(--nt-blue);
  --nt-accent-light: #e6f2f5;
  --nt-accent-dark: #004d5e;
  --nt-bg: #f0f2f5;
  --nt-card-bg: #ffffff;
  --nt-text: #1a1a1a;
  --nt-text-secondary: #4a4a4a;
  --nt-text-muted: #6b6b6b;
  --nt-border: #e0e0e0;
  --nt-radius: 14px;
  --nt-radius-sm: 6px;
  --nt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --nt-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nt-duration: 0.25s;
  --nt-duration-slow: 0.4s;

  box-sizing: border-box;
  width: 100%;
  max-width: 620px;
  margin: 12px auto 0;
  padding: 0 16px;
  animation: nt-shellIn 0.6s var(--nt-ease) both;
  font-family: var(--nt-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--nt-text);
  -webkit-font-smoothing: antialiased;
}

.nt-widget-shell *,
.nt-widget-shell *::before,
.nt-widget-shell *::after {
  box-sizing: border-box;
}

/* ---------- Keyframes ---------- */
@keyframes nt-shellIn {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes nt-panelIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   BAUHAUS GEOMETRIC BLOCK TABS (mobile/tablet)
   ============================================================ */
.nt-widget-shell .widget-tabs {
  display: flex;
  position: relative;
  background: transparent;
  border-radius: 0;
  padding: 0;
  gap: 0;
  margin-bottom: 0;
}

/* ---------- Individual tab ---------- */
.nt-widget-shell .widget-tab {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 18px 16px;
  background: transparent;
  border: 2px solid #1a1a1a;
  border-bottom: none;
  border-radius: 0;
  color: var(--nt-text);
  font-family: var(--nt-font);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  position: relative;
  z-index: 0;
  transition:
    background 0.2s var(--nt-ease),
    color 0.2s var(--nt-ease),
    filter 0.2s var(--nt-ease),
    transform var(--nt-duration) var(--nt-ease);
  white-space: nowrap;
}

/* Collapse shared borders between adjacent tabs */
.nt-widget-shell .widget-tab + .widget-tab {
  margin-left: -2px;
}

/* Inactive tab — each carries a faded version of its own color */
.nt-widget-shell .widget-tab[data-tab="planner"]    { background: rgba(0, 103, 127, 0.10); color: var(--nt-blue); }
.nt-widget-shell .widget-tab[data-tab="departures"] { background: rgba(5, 55, 71, 0.10);   color: var(--nt-rapids-02); }
.nt-widget-shell .widget-tab[data-tab="alerts"]     { background: rgba(211, 47, 47, 0.10); color: var(--nt-legacy-red); }

.nt-widget-shell .widget-tab:hover {
  filter: brightness(0.92);
}

/* Active tab — full theme color, white text, opens into panel */
.nt-widget-shell .widget-tab--active {
  color: #fff !important;
  margin-bottom: -2px;
  z-index: 1;
}

.nt-widget-shell .widget-tab--active[data-tab="planner"]    { background: var(--nt-blue); }
.nt-widget-shell .widget-tab--active[data-tab="departures"] { background: var(--nt-rapids-02); }
.nt-widget-shell .widget-tab--active[data-tab="alerts"]     { background: var(--nt-legacy-red); }

/* No hover shift on active tab */
.nt-widget-shell .widget-tab--active:hover {
  filter: none;
}

.nt-widget-shell .widget-tab:active:not(.widget-tab--active) {
  transform: scale(0.97);
}

.nt-widget-shell .widget-tab-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  transition: transform var(--nt-duration) var(--nt-ease);
}

.nt-widget-shell .widget-tab--active .widget-tab-icon {
  transform: scale(1.08);
}

/* ---------- Panel container (tab mode) ---------- */
.nt-widget-shell .widget-panels {
  background: var(--nt-card-bg);
  border-radius: 0 0 var(--nt-radius) var(--nt-radius);
  border: 2px solid #1a1a1a;
  border-top: none;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 6px 20px rgba(0, 0, 0, 0.1);
  /* visible, not hidden: the stop-search suggestion overlay must be able
     to extend past the panel edge (it was clipped and unscrollable) */
  overflow: visible;
}

/* ---------- Panel ---------- */
.nt-widget-shell .widget-panel {
  padding: 32px 24px 24px;
  opacity: 0;
  transform: translateY(10px);
}

.nt-widget-shell .widget-panel--active {
  animation: nt-panelIn 0.35s var(--nt-ease) forwards;
}

.nt-widget-shell .widget-panel[hidden] {
  display: none;
}

/* ---------- Panel title headers (hidden in tab mode) ---------- */
.nt-widget-shell .widget-panel-title {
  display: none;
}

/* ============================================================
   SHARED: Buttons, inputs
   ============================================================ */
.nt-widget-shell h2 { font-size: 1.2rem; font-weight: 700; color: var(--nt-text); margin: 0 0 16px; }

.nt-widget-shell .widget-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--nt-radius-sm);
  border: 2px solid var(--nt-accent);
  background: transparent;
  color: var(--nt-accent);
  cursor: pointer;
  transition: all var(--nt-duration) var(--nt-ease);
  line-height: 1.4;
}

.nt-widget-shell .widget-btn:hover { background: var(--nt-accent-light); }
.nt-widget-shell .widget-btn:active { transform: translateY(1px); }

.nt-widget-shell .widget-btn-primary {
  background: var(--nt-accent);
  color: #fff;
  border-color: var(--nt-accent);
  width: 100%;
  padding: 10px 18px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.nt-widget-shell .widget-btn-primary:hover {
  background: var(--nt-accent-dark);
  border-color: var(--nt-accent-dark);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

.nt-widget-shell .widget-btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.nt-widget-shell .widget-select,
.nt-widget-shell .widget-text-input,
.nt-widget-shell .form-select,
.nt-widget-shell .trip-planner-text-input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 1rem;
  font-family: var(--nt-font);
  color: var(--nt-text);
  background: var(--nt-card-bg);
  border: 1.5px solid #c5c5c5;
  border-radius: var(--nt-radius-sm);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  transition:
    border-color var(--nt-duration) var(--nt-ease),
    box-shadow var(--nt-duration) var(--nt-ease);
}

.nt-widget-shell .widget-select:focus,
.nt-widget-shell .widget-text-input:focus,
.nt-widget-shell .form-select:focus,
.nt-widget-shell .trip-planner-text-input:focus {
  border-color: var(--nt-accent);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.06),
    0 0 0 3px rgba(0, 0, 0, 0.35);
}

.nt-widget-shell .widget-select,
.nt-widget-shell .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* ============================================================
   REALTIME DEPARTURES
   ============================================================ */
.nt-widget-shell .transit-departures-widget {
  --nt-accent: var(--nt-rapids-02);
  --nt-accent-dark: var(--nt-rapids-01);
  --nt-accent-light: #e8eef1;
}

.nt-widget-shell .transit-departures-widget .widget-btn-primary {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.nt-widget-shell .transit-departures-widget .widget-btn-primary:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.nt-widget-shell .transit-departures-widget .widget-btn-primary:active {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.nt-widget-shell .transit-departures-widget .widget-btn-check:focus-visible + .widget-btn {
  box-shadow: 0 0 0 3px #005566;
}
.nt-widget-shell .transit-departures-widget .widget-select:focus,
.nt-widget-shell .transit-departures-widget .widget-text-input:focus {
  border-color: var(--nt-accent);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.06),
    0 0 0 3px rgba(0, 0, 0, 0.35);
}

.nt-widget-shell .widget-btn-group {
  display: flex;
  border-radius: var(--nt-radius-sm);
  overflow: hidden;
  border: 2px solid var(--nt-accent);
}

.nt-widget-shell .widget-btn-group .widget-btn {
  flex: 1;
  border: none;
  border-radius: 0;
  padding: 8px 12px;
  font-size: 1rem;
  transition: all var(--nt-duration) var(--nt-ease);
}

.nt-widget-shell .widget-btn-check {
  position: absolute;
  width: 0; height: 0;
  opacity: 0;
  pointer-events: none;
}

.nt-widget-shell .widget-btn-check:checked + .widget-btn {
  background: var(--nt-accent);
  color: #fff;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.15);
}

.nt-widget-shell .widget-btn-check:focus-visible + .widget-btn {
  box-shadow: 0 0 0 3px #005566;
  z-index: 1;
}

.nt-widget-shell .widget-section { margin-bottom: 14px; }
.nt-widget-shell .widget-button-row { margin-top: 4px; }
.nt-widget-shell .hidden-form { display: none; }
.nt-widget-shell .stop-code-invalid { display: none; color: #d32f2f; font-size: 1rem; margin-top: -8px; margin-bottom: 8px; }

.nt-widget-shell .departure-results { margin-top: 20px; display: none; }

.nt-widget-shell .departure-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.nt-widget-shell .departure-results-stop { font-weight: 700; font-size: 1.05rem; color: var(--nt-text); }
.nt-widget-shell .departure-results-stop-unknown { display: none; }

.nt-widget-shell .departure-results-refresh-button {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: 1.5px solid var(--nt-border);
  border-radius: var(--nt-radius-sm);
  padding: 4px 10px;
  font-size: 1rem;
  color: var(--nt-text-secondary);
  cursor: pointer;
  transition: all var(--nt-duration) var(--nt-ease);
}

.nt-widget-shell .departure-results-refresh-button:hover {
  border-color: var(--nt-accent);
  color: var(--nt-accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.nt-widget-shell .departure-results-refresh-button:active { transform: translateY(0); }

.nt-widget-shell .departure-results-stop-code-container { font-size: 1rem; color: var(--nt-text-secondary); margin-bottom: 16px; }

.nt-widget-shell .departure-results-container { display: flex; flex-direction: column; gap: 10px; }

.nt-widget-shell .departure-results-none,
.nt-widget-shell .departure-results-error { display: none; text-align: center; padding: 20px; color: var(--nt-text-secondary); font-size: 1rem; }

.nt-widget-shell .departure-result {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 0;
  background: var(--nt-bg);
  border-radius: var(--nt-radius-sm);
  padding: 10px 14px;
  border: 1px solid #c5c5c5;
  transition:
    background var(--nt-duration) var(--nt-ease),
    transform var(--nt-duration) var(--nt-ease),
    box-shadow var(--nt-duration) var(--nt-ease);
}

.nt-widget-shell .departure-result:hover {
  background: var(--nt-accent-light);
  transform: translateX(4px);
  box-shadow: -4px 0 0 0 var(--nt-accent);
}

.nt-widget-shell .departure-result-route-circle {
  flex-shrink: 0;
  min-width: 38px;
  height: 32px;
  padding: 0 8px;
  border-radius: var(--nt-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform var(--nt-duration) var(--nt-ease);
}

.nt-widget-shell .departure-result:hover .departure-result-route-circle { transform: scale(1.08); }

.nt-widget-shell .departure-result-route-direction {
  flex: 1;
  font-size: 1rem;
  color: var(--nt-text);
  min-width: 0;
  line-height: 1.35;
}

.nt-widget-shell .departure-result-time-container {
  flex-shrink: 0;
  padding: 4px 10px;
  border-left: 2px solid var(--nt-border);
  font-size: 1rem;
  color: var(--nt-text-secondary);
  white-space: nowrap;
  transition: border-color var(--nt-duration) var(--nt-ease);
}

.nt-widget-shell .departure-result:hover .departure-result-time-container { border-left-color: rgba(5, 55, 71, 0.3); }

.nt-widget-shell .departure-result-time { font-weight: 700; font-size: 1.15rem; color: var(--nt-accent); }

.nt-widget-shell .loader { display: none; text-align: center; padding: 24px; color: var(--nt-text-secondary); font-size: 1rem; }

/* ============================================================
   SERVICE ALERTS
   (production markup: flat divs from service-alerts.js — no
   details/summary accordion, no .stop-list wrapper)
   ============================================================ */
/* Neutralize the standalone widget's gray container card. */
.nt-widget-shell .service-alerts {
  margin-bottom: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.nt-widget-shell .service-alerts-list { display: flex; flex-direction: column; gap: 14px; }

.nt-widget-shell .service-alert {
  background: var(--nt-bg);
  border-radius: var(--nt-radius-sm);
  border: 1px solid #c5c5c5;
  border-left: 4px solid var(--nt-legacy-red);
  padding: 0;
  transition:
    box-shadow var(--nt-duration) var(--nt-ease),
    transform var(--nt-duration) var(--nt-ease);
}

.nt-widget-shell .service-alert:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* ---------- Alert header ---------- */
.nt-widget-shell .alert-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 0;
}

.nt-widget-shell .alert-header .alert-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--nt-text);
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}

/* Accordion behaviour (shell renders alerts as details/summary) */
.nt-widget-shell summary.alert-header {
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 14px 16px;
}

.nt-widget-shell summary.alert-header::-webkit-details-marker {
  display: none;
}

.nt-widget-shell summary.alert-header:focus-visible {
  outline: 3px solid #005566;
  outline-offset: 2px;
}

.nt-widget-shell .alert-summary-routes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  flex-shrink: 0;
}

.nt-widget-shell .alert-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--nt-text-muted);
  transition: transform var(--nt-duration) var(--nt-ease);
}

.nt-widget-shell details.service-alert[open] > summary .alert-chevron {
  transform: rotate(180deg);
}

/* ---------- Alert body ---------- */
.nt-widget-shell .alert-body { margin-top: 0; padding: 0 16px 16px; font-size: 1rem; color: var(--nt-text-secondary); line-height: 1.55; }
.nt-widget-shell .alert-body p { margin: 0 0 12px; }

.nt-widget-shell .alert-body a {
  color: var(--nt-blue);
  text-decoration: none;
  background-image: linear-gradient(var(--nt-blue), var(--nt-blue));
  background-size: 0% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size var(--nt-duration) var(--nt-ease);
}
.nt-widget-shell .alert-body a:hover { color: var(--nt-accent-dark); background-size: 100% 1px; }

.nt-widget-shell .route-list { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.nt-widget-shell .alert-body .alert-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--nt-text);
  margin-top: 10px;
}

.nt-widget-shell .alert-body ul {
  margin: 4px 0 10px;
  padding-left: 18px;
  font-size: 1rem;
  color: var(--nt-text-secondary);
}

.nt-widget-shell .route-color-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--nt-radius-sm);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform var(--nt-duration) var(--nt-ease);
}
.nt-widget-shell .route-color-swatch:hover { transform: scale(1.1); }

.nt-widget-shell .alert-more-info {
  display: inline-flex;
  align-items: center;
  height: auto;
  line-height: 1.4;
  padding: 7px 16px;
  background: var(--nt-blue);
  color: #fff !important;
  text-decoration: none !important;
  background-image: none !important;
  border-radius: var(--nt-radius-sm);
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition:
    background var(--nt-duration) var(--nt-ease),
    box-shadow var(--nt-duration) var(--nt-ease),
    transform var(--nt-duration) var(--nt-ease);
}
.nt-widget-shell .alert-more-info:hover {
  background: var(--nt-accent-dark) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}
.nt-widget-shell .alert-more-info:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }

/* ============================================================
   TRIP PLANNER
   ============================================================ */
.nt-widget-shell .trip-planner-form {
  /* Reset the standalone widget's card chrome — the panel provides it. */
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  max-width: none;
  margin: 0;
}
.nt-widget-shell .trip-planner-title { display: none; }
.nt-widget-shell .trip-planner-input-group { margin-bottom: 14px; }

.nt-widget-shell .trip-planner-input-group > label,
.nt-widget-shell .trip-planner-form > label {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--nt-text);
  margin-bottom: 5px;
}

.nt-widget-shell .trip-planner-two-columns { display: flex; gap: 10px; }
.nt-widget-shell .trip-planner-two-columns > select { flex: 1; }

.nt-widget-shell .trip-planner-button {
  display: block;
  width: 100%;
  padding: 11px 18px;
  margin-top: 6px;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--nt-font);
  color: #fff;
  background: var(--nt-blue);
  border: none;
  border-radius: var(--nt-radius-sm);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  transition:
    background var(--nt-duration) var(--nt-ease),
    box-shadow var(--nt-duration) var(--nt-ease),
    transform var(--nt-duration) var(--nt-ease);
}
.nt-widget-shell .trip-planner-button:hover {
  background: var(--nt-accent-dark);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
}
.nt-widget-shell .trip-planner-button:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); }
.nt-widget-shell .trip-planner-button:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 2px; }

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */
@media (max-width: 480px) {
  .nt-widget-shell { padding: 0 8px; margin-top: 8px; }

  .nt-widget-shell .widget-tabs { border-radius: 0; padding: 0; }

  .nt-widget-shell .widget-tab {
    padding: 12px 8px;
    gap: 5px;
    font-size: 0.85rem;
    border-radius: 0;
    min-height: 44px;
  }

  .nt-widget-shell .widget-tab-icon { width: 18px; height: 18px; }
  .nt-widget-shell .widget-panel { padding: 18px; }

  .nt-widget-shell .departure-result { flex-wrap: wrap; }
  .nt-widget-shell .departure-result-route-direction { flex-basis: calc(100% - 50px); }
  .nt-widget-shell .departure-result-time-container { border-left: none; border-top: 1px solid var(--nt-border); padding: 6px 8px 2px; text-align: center; }
  .nt-widget-shell .departure-result-time-container:first-of-type { margin-left: 50px; }
  .nt-widget-shell .departure-result:hover { transform: none; box-shadow: -4px 0 0 0 var(--nt-accent); }
}

/* ============================================================
   RESPONSIVE — DESKTOP COMFORT
   ============================================================ */
@media (min-width: 1024px) {
  .nt-widget-shell {
    max-width: 680px;
  }
}

/* ============================================================
   PRODUCTION-MARKUP DELTAS (not in the prototype)
   ============================================================ */

/* The departures template wraps itself in a card; the panel is the card here. */
.nt-widget-shell .widget-card {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  max-width: none;
  box-shadow: none;
  border-radius: 0;
}
.nt-widget-shell .widget-card-body { padding: 0; }

/* Widget-internal <h2>s stay in the document outline for AT but the tab /
   panel header carries the visible title. */
.nt-widget-shell .trip-planner-title,
.nt-widget-shell .transit-departures-widget h2,
.nt-widget-shell .service-alerts > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The live alerts widget renders a real empty state — the prototype hid its
   mock version. Show it quietly. */
.nt-widget-shell .service-alert-empty {
  display: block;
  text-align: center;
  padding: 20px;
  color: var(--nt-text-secondary);
  font-size: 1rem;
  background: transparent;
  border-radius: 0;
  margin-bottom: 0;
}

/* Refresh button: keep "As of 2:34 PM" on one line at mobile widths. */
.nt-widget-shell .departure-results-refresh-button {
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 8px;
}

/* Production inputs newer than the prototype: Mapbox search boxes and the
   accessible-autocomplete stop search. */
.nt-widget-shell mapbox-search-box { display: block; width: 100%; }
.nt-widget-shell .autocomplete__input {
  border: 1.5px solid #c5c5c5;
  border-radius: var(--nt-radius-sm);
  font-size: 1rem;
  font-family: var(--nt-font);
}
.nt-widget-shell .autocomplete__input:focus {
  outline: 3px solid #005566;
  outline-offset: 2px;
  border-color: var(--nt-accent);
}

/* Salient styles content-area submit buttons at higher specificity than
   the shell's class-only rules, inflating their font and padding. Pin the
   two widget submit buttons back to the design sizes. */
.nt-widget-shell button.trip-planner-button[type="submit"],
.nt-widget-shell button.widget-btn-primary[type="submit"] {
  font-family: var(--nt-font);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  height: auto;
  min-width: 0;
  border-radius: var(--nt-radius-sm);
}

.nt-widget-shell button.trip-planner-button[type="submit"] {
  padding: 11px 18px;
}

.nt-widget-shell button.widget-btn-primary[type="submit"] {
  padding: 10px 18px;
}

/* ============================================================
   RESPONSIVE — DESKTOP STAGGERED 2-ROW
   At 1400px+, tabs disappear, staggered layout:
   Row 1: Trip Planner (full-width compact banner)
   Row 2: Departures (left) | Alerts (right)
   ============================================================ */
@media (min-width: 1400px) {
  .nt-widget-shell {
    max-width: 60vw;
    padding: 0 24px;
    margin-top: 24px;
  }

  /* Hide tabs */
  .nt-widget-shell .widget-tabs { display: none; }

  /* Panels become a staggered 2-row grid */
  .nt-widget-shell .widget-panels {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    grid-template-rows: auto auto;
    gap: 28px;
    background: transparent;
    box-shadow: none;
    border: none;
    border-radius: 0;
    overflow: visible;
    align-items: start;
  }

  /* Trip planner — full-width banner row */
  .nt-widget-shell .widget-panel[data-panel="planner"] {
    grid-row: 1;
    grid-column: 1 / -1;
  }

  /* Departures — bottom left */
  .nt-widget-shell .widget-panel[data-panel="departures"] {
    grid-row: 2;
    grid-column: 1;
  }

  /* Alerts — bottom right */
  .nt-widget-shell .widget-panel[data-panel="alerts"] {
    grid-row: 2;
    grid-column: 2;
  }

  /* All panels visible, each is its own card */
  .nt-widget-shell .widget-panel,
  .nt-widget-shell .widget-panel[hidden] {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none;
    background: var(--nt-card-bg);
    border-radius: var(--nt-radius);
    /* visible, not hidden: the stop-search suggestion overlay must escape
       the card; the panel-title carries its own top radius instead */
    overflow: visible;
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.05),
      0 6px 24px rgba(5, 55, 71, 0.1);
    padding: 0;
    transition:
      box-shadow var(--nt-duration) var(--nt-ease),
      transform var(--nt-duration) var(--nt-ease);
  }

  .nt-widget-shell .widget-panel:hover {
    transform: translateY(-4px);
    box-shadow:
      0 2px 6px rgba(0, 0, 0, 0.07),
      0 12px 40px rgba(5, 55, 71, 0.14);
  }

  /* Show colored panel headers (top radius matches the card now that the
     panel no longer clips its children) */
  .nt-widget-shell .widget-panel-title {
    display: block;
    padding: 18px 24px;
    position: relative;
    border-radius: var(--nt-radius) var(--nt-radius) 0 0;
    color: #fff;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  .nt-widget-shell .widget-panel-title::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.25);
  }

  .nt-widget-shell .widget-panel-title::after {
    content: "";
    position: absolute;
    bottom: -6px; left: 0; right: 0;
    height: 6px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), transparent);
    pointer-events: none;
  }

  .nt-widget-shell .widget-panel-title--departures { background: var(--nt-rapids-02); }
  .nt-widget-shell .widget-panel-title--alerts     { background: var(--nt-legacy-red); }
  .nt-widget-shell .widget-panel-title--planner    { background: var(--nt-blue); }

  /* Panel body padding */
  .nt-widget-shell .widget-panel { padding: 0; }
  .nt-widget-shell .widget-panel > :not(.widget-panel-title) { padding: 24px; }

  /* Alerts-specific shadow tint */
  .nt-widget-shell .widget-panel[data-panel="alerts"] {
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.05),
      0 6px 24px rgba(255, 65, 41, 0.08);
  }
  .nt-widget-shell .widget-panel[data-panel="alerts"]:hover {
    box-shadow:
      0 2px 6px rgba(0, 0, 0, 0.07),
      0 12px 40px rgba(255, 65, 41, 0.12);
  }

  /* Planner-specific shadow tint */
  .nt-widget-shell .widget-panel[data-panel="planner"] {
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.05),
      0 6px 24px rgba(0, 103, 127, 0.08);
  }
  .nt-widget-shell .widget-panel[data-panel="planner"]:hover {
    box-shadow:
      0 2px 6px rgba(0, 0, 0, 0.07),
      0 12px 40px rgba(0, 103, 127, 0.12);
  }

  /* Trip planner — horizontal form when spanning full width */
  .nt-widget-shell .trip-planner-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    align-items: end;
  }

  .nt-widget-shell .trip-planner-form > label {
    grid-column: 1 / -1;
    margin-bottom: -6px;
  }

  .nt-widget-shell .trip-planner-form > .trip-planner-button {
    grid-column: 1 / -1;
    max-width: 280px;
  }

  /* Cap departures button width in desktop cards */
  .nt-widget-shell .widget-panel .widget-btn-primary {
    max-width: 280px;
  }
}

/* ============================================================
   RESPONSIVE — LARGE 4K
   ============================================================ */
@media (min-width: 2200px) {
  .nt-widget-shell {
    max-width: 60vw;
    padding: 0 48px;
    margin-top: 48px;
  }

  .nt-widget-shell .widget-panels {
    gap: 40px;
  }

  .nt-widget-shell .widget-panel,
  .nt-widget-shell .widget-panel[hidden] {
    border-radius: 18px;
    box-shadow:
      0 2px 6px rgba(0, 0, 0, 0.06),
      0 12px 40px rgba(5, 55, 71, 0.12),
      0 0 0 1px rgba(0, 0, 0, 0.03);
  }

  .nt-widget-shell .widget-panel-title {
    padding: 22px 32px;
    font-size: 1.25rem;
    border-radius: 18px 18px 0 0;
  }

  .nt-widget-shell .widget-panel { padding: 0; }
  .nt-widget-shell .widget-panel > :not(.widget-panel-title) { padding: 32px; }

  .nt-widget-shell .departure-result {
    padding: 14px 20px;
    gap: 16px;
    border-radius: 10px;
  }

  .nt-widget-shell .departure-result-route-circle {
    min-width: 44px;
    height: 36px;
    font-size: 1.05rem;
    border-radius: 8px;
  }

  .nt-widget-shell .service-alert { border-radius: 10px; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .nt-widget-shell,
  .nt-widget-shell *,
  .nt-widget-shell *::before,
  .nt-widget-shell *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

.nt-widget-shell .widget-tab:focus-visible {
  outline: 3px solid #1a1a1a;
  outline-offset: -2px;
}

.nt-widget-shell a:focus-visible,
.nt-widget-shell button:focus-visible:not(.widget-tab),
.nt-widget-shell select:focus-visible,
.nt-widget-shell input:focus-visible {
  outline: 3px solid #005566;
  outline-offset: 2px;
}