/* ===========================================
   TIMEZONES TOOL STYLES
   =========================================== */

    /* Main unified card container */
    .tz-card {
      display: flex;
      flex-direction: column;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--surface-2);
      /* overflow: hidden; -> Removed to allow sticky children */
      position: relative;
      /* For positioning the time line */
    }

    /* Vertical time indicator line - extends from slider through city list */
    .tz-time-line {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 3px;
      background: color-mix(in oklab, var(--border) 80%, var(--text) 20%);
      z-index: 1;
      /* Behind city text (z-index: 2+) */
      pointer-events: none;
      /* The handle captures events */
      transform: translateX(-50%);
    }

    [data-theme="dark"] .tz-time-line {
      background: color-mix(in oklab, var(--border) 70%, var(--surface-hover) 30%);
    }

    /* Invisible wider hit area for dragging */
    .tz-time-line__handle {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 30px;
      cursor: ew-resize;
      pointer-events: auto;
      touch-action: pan-y;
      /* Allow vertical scroll, capture horizontal */
      -webkit-user-select: none;
      user-select: none;
      /* Debug: uncomment to see hit area */
      /* background: rgba(255, 0, 0, 0.1); */
    }

    /* Disabled state when date panel is open */
    .tz-time-line--disabled .tz-time-line__handle {
      cursor: default;
      pointer-events: none;
    }

    /* Control bar - top section with controls */
    .tz-control-bar {
      display: flex;
      flex-direction: column;
      padding: var(--space-3) var(--space-4);
      background: var(--surface-2);

      /* Sticky positioning */
      position: sticky;
      top: 0;
      /* Mobile default (nav is at bottom) */
      z-index: 20;
      border-bottom: 1px solid var(--border);
      /* Optional: adds separation when scrolling */
    }

    /* Desktop/Tablet: Nav is at top (fixed), so offset sticky bar */
    @media (min-width: 601px) {
      .tz-control-bar {
        top: 140px;
        /* Clears top nav (24px + 72px pill + gap) */
      }
    }

    /* Desktop: horizontal row with date pill left, slider block right */
    .tz-controls-row {
      display: flex;
      align-items: center;
      gap: var(--space-4);
      min-height: 44px;
    }

    /* Date controls container - holds pill and panel, they swap in place */
    .tz-date-controls {
      flex-shrink: 0;
      height: 44px;
      display: flex;
      align-items: center;
    }

    /* Date pill button */
    .tz-date-pill {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: 10px 16px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      font-size: 16px;
      font-weight: var(--weight-medium);
      cursor: pointer;
      transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
      height: 44px;
      flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
      width: 160px;
      box-sizing: border-box;
    }

    .tz-date-pill:hover {
      background: var(--surface-hover);
      border-color: color-mix(in oklab, var(--border) 70%, var(--text) 30%);
    }

    .tz-date-pill:focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent-time) 30%, transparent);
    }

    .tz-date-pill[aria-expanded="true"] {
      background: color-mix(in oklab, var(--accent-time) 10%, var(--surface) 90%);
      border-color: color-mix(in oklab, var(--accent-time) 50%, var(--border) 50%);
    }

    .tz-date-pill__text {
      line-height: 1;
      flex-grow: 1;
      text-align: left;
      letter-spacing: 0.55px;
    }

    .tz-date-pill__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      opacity: 0.7;
    }

    .tz-date-pill__icon svg {
      width: 14px;
      height: 14px;
    }

    /* Slider block - contains offset label and slider */
    .tz-slider-block {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .tz-slider-block[hidden] {
      display: none;
    }

    /* Slider row */
    .tz-slider-row {
      display: flex;
      align-items: center;
    }

    /* Slider wrapper - positions ghost pill and slider together */
    .tz-offset-slider-wrap {
      width: 100%;
      display: flex;
      align-items: center;
      position: relative;
      height: 32px;
    }

    /* Ghost pill - pill shape to match thumb, positioned at start */
    .tz-offset-ghost-pill {
      position: absolute;
      left: 0;
      top: calc(50% - 0px);
      transform: translateX(-50%) translateY(-50%);
      width: 40px;
      height: 22px;
      border-radius: var(--radius-pill);
      border: 2px dashed color-mix(in oklab, var(--accent-time) 45%, var(--border) 55%);
      background: transparent;
      padding: 0;
      cursor: pointer;
      z-index: 10;
      pointer-events: none;
      transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
    }

    .tz-offset-ghost-pill:hover {
      background-color: color-mix(in oklab, var(--accent-time) 10%, transparent);
      border-color: color-mix(in oklab, var(--accent-time) 65%, transparent);
    }

    .tz-offset-ghost-pill:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-time) 20%, transparent);
      border-color: var(--accent-time);
    }

    /* Slider - positioned so thumb overlaps ghost pill at 0 */
    .tz-offset-slider {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      height: 32px;
      appearance: none;
      background: transparent;
      cursor: pointer;
      z-index: 2;
      margin: 0;
      padding: 0;
    }

    .tz-offset-slider:focus-visible {
      outline: none;
    }

    /* Slider track - starts behind ghost pill */
    .tz-offset-slider::-webkit-slider-runnable-track {
      height: 6px;
      background: color-mix(in oklab, var(--border) 50%, transparent);
      border-radius: var(--radius-pill);
    }

    [data-theme="dark"] .tz-offset-slider::-webkit-slider-runnable-track {
      background: color-mix(in oklab, var(--surface-hover) 70%, transparent);
    }

    /* Slider thumb - pill shape to overlap ghost pill exactly */
    .tz-offset-slider::-webkit-slider-thumb {
      appearance: none;
      width: 40px;
      height: 22px;
      border-radius: var(--radius-pill);
      background: var(--accent-time);
      border: 2px solid color-mix(in oklab, var(--accent-time) 65%, transparent);
      margin-top: -8px;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
      cursor: grab;
    }

    .tz-offset-slider::-webkit-slider-thumb:active {
      cursor: grabbing;
    }

    .tz-offset-slider:hover::-webkit-slider-thumb,
    .tz-offset-slider:focus-visible::-webkit-slider-thumb {
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-time) 22%, transparent), 0 1px 3px rgba(15, 23, 42, 0.2);
      border-color: var(--accent-time);
    }

    /* Firefox track */
    .tz-offset-slider::-moz-range-track {
      height: 6px;
      background: color-mix(in oklab, var(--border) 50%, transparent);
      border-radius: var(--radius-pill);
    }

    [data-theme="dark"] .tz-offset-slider::-moz-range-track {
      background: color-mix(in oklab, var(--surface-hover) 70%, transparent);
    }

    /* Firefox thumb - pill shape */
    .tz-offset-slider::-moz-range-thumb {
      width: 40px;
      height: 22px;
      border-radius: var(--radius-pill);
      background: var(--accent-time);
      border: 2px solid color-mix(in oklab, var(--accent-time) 65%, transparent);
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
      cursor: grab;
    }

    .tz-offset-slider::-moz-range-thumb:active {
      cursor: grabbing;
    }

    .tz-offset-slider:hover::-moz-range-thumb,
    .tz-offset-slider:focus-visible::-moz-range-thumb {
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-time) 22%, transparent), 0 1px 3px rgba(15, 23, 42, 0.2);
      border-color: var(--accent-time);
    }

    /* Inline date panel - replaces pill when open */
    .tz-date-panel {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      height: 44px;
      max-height: 44px;
    }

    .tz-date-panel[hidden] {
      display: none;
    }

    .tz-date-panel__input {
      -webkit-appearance: none;
      appearance: none;
      padding: 10px 16px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      font-family: inherit;
      font-size: 16px;
      font-weight: var(--weight-medium);
      width: 160px;
      height: 44px;
      box-sizing: border-box;
      line-height: 1;
      cursor: pointer;
      transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
    }

    .tz-date-panel__input::-webkit-calendar-picker-indicator {
      cursor: pointer;
      opacity: 0.7;
      transition: opacity var(--fast) var(--ease);
    }

    .tz-date-panel__input::-webkit-calendar-picker-indicator:hover {
      opacity: 1;
    }

    .tz-date-panel__input:hover {
      background: var(--surface-hover);
      border-color: color-mix(in oklab, var(--border) 70%, var(--text) 30%);
    }

    .tz-date-panel__input:focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent-time) 30%, transparent);
    }

    /* Done button in date panel - standard button size */
    .tz-date-done-btn {
      flex-shrink: 0;
    }

    /* City list - seamless with control bar */
    .tz-city-list {
      display: flex;
      flex-direction: column;
      background: var(--surface-2);
    }

    .tz-city-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-4) var(--space-5);
      gap: var(--space-4);
      border-top: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
      transition: background var(--fast) var(--ease);
    }

    .tz-city-item:hover {
      background: color-mix(in oklab, var(--surface-hover) 50%, transparent);
    }

    .tz-city-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex: 1;
      min-width: 0;
    }

    .tz-city-name {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: var(--space-2);
      font-size: calc(var(--size-20) * 1.1);
      font-weight: var(--weight-semibold);
      line-height: 1;
    }

    .tz-city-name-label {
      line-height: 1;
    }

    .tz-city-meta {
      font-size: var(--size-12);
      color: var(--text-muted);
    }

    .tz-dst-badge {
      display: inline-block;
      margin-left: 6px;
      padding: 1px 5px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
      line-height: normal;
      background-color: rgba(245, 158, 11, 0.15);
      color: #D97706;
      /* Amber-600 */
      vertical-align: middle;
      cursor: help;
    }

    [data-theme="dark"] .tz-dst-badge {
      background-color: rgba(245, 158, 11, 0.2);
      color: #FBBF24;
      /* Amber-400 */
    }

    .tz-time-display {
      display: flex;
      justify-content: flex-end;
    }

    .tz-time-info {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      text-align: right;
      gap: 2px;
    }

    .tz-time-row {
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }

    .tz-time {
      font-size: var(--size-24);
      font-weight: var(--weight-bold);
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    .tz-time-day {
      font-size: var(--size-12);
      color: color-mix(in oklab, var(--text-muted) 80%, transparent);
      text-align: right;
      padding-right: calc(28px + var(--space-2));
    }

    .tz-period-icon {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
    }

    .tz-period-icon svg {
      width: 16px;
      height: 16px;
    }

    /* Timezone period theme colors */
    :root {
      --tz-day-color: #16A34A;
      --tz-dawn-color: #EA580C;
    }

    [data-theme="dark"] {
      --tz-day-color: #7CFF5A;
      --tz-dawn-color: #F4B04A;
    }

    .tz-theme-day {
      color: var(--tz-day-color);
    }

    .tz-theme-dawn,
    .tz-theme-dusk {
      color: var(--tz-dawn-color);
    }

    .tz-theme-night {
      color: color-mix(in oklab, var(--text-muted) 88%, transparent);
    }

    .tz-time.tz-theme-day {
      color: var(--tz-day-color);
    }

    .tz-time.tz-theme-dawn,
    .tz-time.tz-theme-dusk {
      color: var(--tz-dawn-color);
    }

    .tz-time.tz-theme-night {
      color: color-mix(in oklab, var(--text-muted) 78%, transparent);
    }

    .tz-time-info .tz-time-day {
      color: color-mix(in oklab, var(--text-muted) 80%, transparent);
      background: none;
      border: 0;
    }

    .tz-live-badge {
      display: inline-flex;
      align-items: center;
      font-size: var(--size-8);
      line-height: 1;
      vertical-align: baseline;
    }

    /* Location icon badge (replaces "YOUR LOCATION" text on main panel) */
    .tz-location-badge {
      color: var(--text-muted);
      margin-left: var(--space-1);
      flex-shrink: 0;
    }

    .tz-location-badge .location-icon {
      width: 14px;
      height: 14px;
      display: block;
    }

    /* Config panel styles */
    .tz-config-footer-gap {
      height: calc(var(--space-6) + var(--space-2));
      pointer-events: none;
      flex-shrink: 0;
    }

    .time-config-panel .city-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .time-config-panel .wa-combobox-input,
    .time-config-panel .wa-combobox {
      width: 100%;
    }

    .time-config-panel .wa-combobox__trigger {
      padding: var(--space-2) var(--space-3);
    }

    .time-config-panel .city-list-empty {
      padding: var(--space-4);
      text-align: center;
      color: var(--text-muted);
      border: 1px dashed var(--border);
      border-radius: var(--radius-md);
      font-size: var(--size-13);
    }

    /* Only strip padding from the front face card-body, not the config panel */
    #time-tool-card .tool-card__face--front .card-body {
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: 0;
    }

    /* Config panel padding */
    #time-tool-card .tool-card__config {
      padding: var(--space-5);
    }

    #time-tool-card .tool-card__face--front {
      overflow: visible;
    }

    /* ===========================================
   MOBILE STYLES - Compact controls at top
   =========================================== */
    @media (max-width: 900px) {
      /* Hide share bar and footer on mobile */
      /* .share-bar,
  .wa-footer,
  .footer {
    display: none !important;
  } */

      /* Control bar - stays at top, just more compact */
      .tz-control-bar {
        padding: var(--space-2) var(--space-3);
      }

      /* FIX: Add extra bottom padding so content isn't covered by bottom nav */
      /* Note: .page padding didn't work because share-bar is outside it. Padding body instead. */
      body {
        padding-bottom: 120px !important;
      }

      /* No need for page padding if body handles it, but keeping safe */

      /* FIX: Ensure sticky behavior works by preventing overflow clipping on ancestors */
      .tool-card,
      .tool-card__flipper,
      .tool-card__face,
      .card-body,
      .tz-card {
        overflow: visible !important;
        transform: none !important;
        /* Disable transform if it breaks sticky */
      }

      /* Keep same horizontal layout as desktop, just narrower */
      .tz-controls-row {
        flex-direction: row;
        align-items: center;
        gap: var(--space-3);
      }

      /* Date pill - icon-only circle button on mobile */
      .tz-date-pill {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
      }

      /* Hide text by default on mobile */
      .tz-date-pill__text {
        display: none;
      }

      .tz-date-pill__icon {
        width: 18px;
        height: 18px;
      }

      /* When expanded, show full date pill with text */
      .tz-date-pill[aria-expanded="true"] {
        width: auto;
        padding: 4px 10px;
        border-radius: var(--radius-pill);
      }

      .tz-date-pill[aria-expanded="true"] .tz-date-pill__text {
        display: inline;
        font-size: var(--size-13);
      }

      /* Slider block - takes remaining space */
      .tz-slider-block {
        flex: 1;
        min-width: 0;
      }

      /* Smaller offset label on mobile */
      .tz-slider-label {
        font-size: var(--size-11);
      }

      /* Smaller ghost pill and thumb on mobile */
      .tz-offset-ghost-pill {
        width: 32px;
        height: 18px;
      }

      .tz-offset-slider::-webkit-slider-thumb {
        width: 32px;
        height: 18px;
        font-size: 10px;
        margin-top: -7px;
      }

      .tz-offset-slider::-moz-range-thumb {
        width: 32px;
        height: 18px;
        font-size: 10px;
      }

      .tz-offset-slider::-webkit-slider-runnable-track {
        height: 4px;
      }

      .tz-offset-slider::-moz-range-track {
        height: 4px;
      }

      /* Touch behavior for slider */
      .tz-offset-slider-wrap {
        touch-action: pan-y;
        -webkit-user-select: none;
        user-select: none;
        height: 32px;
      }

      .tz-offset-slider {
        touch-action: none;
        height: 32px;
      }

      /* Date panel - inline when expanded */
      .tz-date-panel {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: var(--space-2);
      }

      .tz-date-panel__input {
        flex: 0 1 auto;
        min-width: 110px;
        max-width: 140px;
        padding: 4px 8px;
        font-size: var(--size-13);
      }

      .tz-date-panel__actions {
        flex-shrink: 0;
        gap: var(--space-1);
      }

      .tz-date-panel__actions .btn--sm {
        padding: 4px 10px;
        font-size: var(--size-13);
      }
    }