* { box-sizing: border-box; margin: 0; padding: 0; }
  /* Visually hidden — available to screen readers only */
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f5f0eb; color: #222; }
  .page-wrap { max-width: 1200px; margin: 0 auto; }
  header { background: #1a1a2e; color: #fff; padding: 24px 32px; }
  footer { margin: 40px 32px 24px; padding-top: 16px; border-top: 1px solid #ccc; color: #888; font-size: 0.82rem; }
  header h1 { font-size: 1.8rem; letter-spacing: 1px; }
  header p { color: #aaa; margin-top: 4px; font-size: 0.9rem; }

  .controls { display: flex; flex-direction: column; gap: 10px; padding: 16px 32px; background: #fff; border-bottom: 1px solid #ddd; }
  .controls-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
#day-select {
    padding: 7px 12px; border-radius: 20px; border: 2px solid #1a1a2e;
    background: #1a1a2e; cursor: pointer; font-size: 0.85rem; font-weight: 600;
    color: #fff; outline: none; appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
    padding-right: 28px;
  }
  #day-select:focus { border-color: #555; }

  .going-toggle-btn {
    padding: 7px 18px; border-radius: 20px; border: 2px solid #1a6b2f;
    background: transparent; cursor: pointer; font-size: 0.85rem; font-weight: 600;
    color: #1a6b2f; transition: all 0.15s;
  }
  .going-toggle-btn.active { background: #1a6b2f; color: #fff; }

  .interested-toggle-btn {
    padding: 7px 18px; border-radius: 20px; border: 2px solid #e07b39;
    background: transparent; cursor: pointer; font-size: 0.85rem; font-weight: 600;
    color: #e07b39; transition: all 0.15s;
  }
  .interested-toggle-btn.active { background: #e07b39; color: #fff; }

  .search-wrap { margin-left: auto; }
  .share-help-group { display: flex; gap: 8px; align-items: center; }
  .unscheduled-note { flex: 1; text-align: center; font-size: 0.82rem; color: #767676; font-style: italic; }
  .unscheduled-note.unscheduled-note-alert { background: #fff3cd; color: #7a5800; padding: 4px 12px; border-radius: 12px; font-style: normal; cursor: pointer; }
  .reset-btn {
    padding: 7px 18px; border-radius: 20px; border: 2px solid #e57373;
    background: #f8d7d7; cursor: pointer; font-size: 0.85rem; font-weight: 600;
    color: #b71c1c; transition: all 0.15s;
  }
  .reset-btn:hover { background: #e57373; color: #fff; border-color: #e57373; }
  .undo-reset-btn {
    padding: 7px 18px; border-radius: 20px; border: 2px solid #c62828;
    background: #c62828; cursor: pointer; font-size: 0.85rem; font-weight: 600;
    color: #fff; transition: all 0.15s;
  }
  .undo-reset-btn:hover { background: #b71c1c; border-color: #b71c1c; }

  /* ── Reset confirmation modal ── */
  .modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.45); z-index: 10000;
    align-items: center; justify-content: center;
  }
  .modal-overlay.visible { display: flex; }
  .modal-box {
    background: #fff; border-radius: 12px; padding: 28px 32px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25); max-width: 360px; width: 90%;
    text-align: center;
  }
  .modal-box h2 { font-size: 1.1rem; color: #1a1a2e; margin-bottom: 10px; }
  .modal-box p { font-size: 0.88rem; color: #555; margin-bottom: 24px; line-height: 1.5; }
  .modal-actions { display: flex; gap: 12px; justify-content: center; }
  .modal-confirm {
    padding: 8px 24px; border-radius: 20px; border: 2px solid #e57373;
    background: #f8d7d7; color: #b71c1c; font-weight: 600; font-size: 0.85rem;
    cursor: pointer; transition: all 0.15s;
  }
  .modal-confirm:hover { background: #e57373; color: #fff; }
  .modal-cancel {
    padding: 8px 24px; border-radius: 20px; border: 2px solid #1a1a2e;
    background: transparent; color: #1a1a2e; font-weight: 600; font-size: 0.85rem;
    cursor: pointer; transition: all 0.15s;
  }
  .modal-cancel:hover { background: #1a1a2e; color: #fff; }
  .search-input-wrap { position: relative; display: inline-flex; align-items: center; }
  #search { padding: 7px 30px 7px 14px; border: 2px solid #ccc; border-radius: 20px; font-size: 0.85rem; width: 230px; outline: none; }
  #search:focus { border-color: #1a1a2e; }
  .search-clear-btn {
    position: absolute; right: 9px;
    background: none; border: none; cursor: pointer;
    font-size: 0.75rem; color: #aaa; padding: 2px 3px;
    line-height: 1; display: none; border-radius: 50%;
  }
  .search-clear-btn:hover { color: #333; background: #e0e0e0; }
  .search-clear-btn.visible { display: block; }

  /* Flash animation for the "Show Scheduled only" button when the unscheduled note disappears */
  @keyframes going-btn-flash {
    0%,  100% { box-shadow: none; }
    20%,  60% { box-shadow: 0 0 0 4px rgba(26,107,47,0.35); }
    40%,  80% { box-shadow: none; }
  }
  .going-btn-flash { animation: going-btn-flash 0.75s ease-in-out; }

  /* Getting started strip — shown when no shows are marked Interested */
  .getting-started-strip {
    display: none;
    padding: 14px 32px;
    background: #fdf6ef;
    border-bottom: 1px solid #e8d8c4;
    font-size: 0.85rem;
    color: #444;
    line-height: 1.6;
  }
  .getting-started-strip.visible { display: block; }
  .getting-started-strip strong { color: #1a1a2e; }
  .getting-started-strip ol { margin: 5px 0 0 18px; padding: 0; }
  .getting-started-strip li { margin-bottom: 2px; }

  .table-wrap { padding: 24px 32px; overflow-x: auto; }
  /* Clip the table element while a swipe slide animation is in progress */
  .table-wrap.animating { overflow: hidden; }
  table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
  thead tr { background: #1a1a2e; color: #fff; }
  th { padding: 12px 16px; text-align: left; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
  th.cb-col { text-align: center; }
  td { padding: 10px 16px; font-size: 0.9rem; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
  tr:last-child td { border-bottom: none; }

  .date-cell { font-weight: 700; white-space: nowrap; color: #555; font-size: 0.82rem; }
  .time-cell { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; color: #1a1a2e; }
  .show-cell { font-weight: 500; }
  .venue-cell { color: #666; font-size: 0.82rem; }

  .day-1 .int-cell { border-left: 8px solid #e07b39; }
  .day-2 .int-cell { border-left: 8px solid #3a86d4; }
  .day-3 .int-cell { border-left: 8px solid #5cb85c; }
  .day-4 .int-cell { border-left: 8px solid #9b59b6; }
  .day-5  .int-cell { border-left: 8px solid #c0392b; }
  .day-6  .int-cell { border-left: 8px solid #16a085; }
  .day-7  .int-cell { border-left: 8px solid #d35400; }
  .day-8  .int-cell { border-left: 8px solid #2980b9; }
  .day-9  .int-cell { border-left: 8px solid #8e44ad; }
  .day-10 .int-cell { border-left: 8px solid #27ae60; }
  .day-11 .int-cell { border-left: 8px solid #e07b39; }
  .day-12 .int-cell { border-left: 8px solid #3a86d4; }
  .day-13 .int-cell { border-left: 8px solid #5cb85c; }
  .day-14 .int-cell { border-left: 8px solid #9b59b6; }
  .day-15 .int-cell { border-left: 8px solid #c0392b; }
  .day-16 .int-cell { border-left: 8px solid #16a085; }
  .day-17 .int-cell { border-left: 8px solid #d35400; }
  .day-18 .int-cell { border-left: 8px solid #2980b9; }
  .day-19 .int-cell { border-left: 8px solid #8e44ad; }
  .day-20 .int-cell { border-left: 8px solid #27ae60; }
  .day-21 .int-cell { border-left: 8px solid #e07b39; }
  .day-22 .int-cell { border-left: 8px solid #3a86d4; }
  .day-23 .int-cell { border-left: 8px solid #5cb85c; }
  .day-24 .int-cell { border-left: 8px solid #9b59b6; }
  .day-25 .int-cell { border-left: 8px solid #c0392b; }
  .day-26 .int-cell { border-left: 8px solid #16a085; }
  .day-27 .int-cell { border-left: 8px solid #d35400; }
  .day-28 .int-cell { border-left: 8px solid #2980b9; }
  .day-29 .int-cell { border-left: 8px solid #8e44ad; }
  .day-30 .int-cell { border-left: 8px solid #27ae60; }
  .day-31 .int-cell { border-left: 8px solid #e07b39; }

  .day-group-header th {
    background: #f7f4ef; font-weight: 700; font-size: 0.82rem;
    text-transform: uppercase; letter-spacing: 0.1em; color: #444;
    padding: 20px 16px; border-bottom: 2px solid #e8e2d9;
  }

  /* Cancelled shows */
  tr.is-cancelled td { background: #fde8e8 !important; }
  tr.is-cancelled .show-cell { text-decoration: line-through; color: #a33 !important; }
  tr.is-cancelled .time-cell,
  tr.is-cancelled .venue-cell,
  tr.is-cancelled .runtime-cell { color: #a33 !important; }
  .cancelled-badge {
    font-size: 0.72rem; font-weight: 700; color: #c0392b;
    margin-left: 6px; white-space: nowrap;
  }
  .conflict-badge {
    font-size: 0.8rem; color: #856404;
    margin-left: 2px; white-space: nowrap; cursor: help;
  }

  tr.is-going td { background: #d4edda !important; }
  tr.is-going .time-cell { color: #1a6b2f !important; }
  tr.is-going .show-cell { color: #1a6b2f !important; }
  tr.is-going .date-cell { color: #2a8a3f !important; }
  tr.is-going .venue-cell { color: #3a7a4a !important; }

  tr.is-conflict .time-cell { background: #fff3cd !important; color: #856404 !important; }

  /* Not-interested: dark grey bg, muted text */
  tr.not-interested td {
    background: #555 !important;
    color: #999 !important;
    border-bottom-color: #666;
  }
  tr.not-interested .time-cell { color: #888 !important; }
  tr.not-interested .show-cell { color: #aaa !important; }
  tr.not-interested .venue-cell { color: #888 !important; }
  tr.not-interested .date-cell { color: #888 !important; }

  /* Going-greyed: another occurrence chosen, grey out this row */
  tr.interested-not-going td { color: #bbb !important; background: #f8f8f8 !important; }
  tr.interested-not-going .show-cell { text-decoration: line-through; color: #ccc !important; }

  input[type="checkbox"] { cursor: pointer; width: 15px; height: 15px; accent-color: #1a1a2e; }
  .cb-cell { text-align: center; }

  .no-results { text-align: center; padding: 40px; color: #999; font-style: italic; display: none; }

  /* ── Print styles ── */
  @media print {
    @page { margin: 0.6in 0.5in; }

    /* Hide all screen-only chrome */
    .controls,
    .modal-overlay,
    .shows-list-overlay,
    .tt-popup,
    .ext-link-icon,
    .tt-info-btn { display: none !important; }

    body { background: #fff; font-size: 10pt; }

    /* Header — keep, force dark bg to print */
    header {
      background: #1a1a2e !important;
      print-color-adjust: exact;
      -webkit-print-color-adjust: exact;
      padding: 10px 20px;
      margin-bottom: 0;
    }
    header h1 { font-size: 13pt; }
    header p { font-size: 8.5pt; color: #ccc !important; }

    /* Table container */
    .table-wrap { padding: 0; overflow: visible; }
    table { width: 100%; border-collapse: collapse; box-shadow: none; border-radius: 0; font-size: 9pt; }

    /* Hide checkbox columns */
    th.cb-col, td.cb-cell { display: none; }

    /* Table header */
    thead tr {
      background: #1a1a2e !important;
      print-color-adjust: exact;
      -webkit-print-color-adjust: exact;
    }
    th { padding: 6px 10px; font-size: 8pt; }

    /* Table cells */
    td { padding: 5px 10px; font-size: 8.5pt; border-bottom: 1px solid #e8e8e8; }
    tr:last-child td { border-bottom: none; }

    /* Don't break rows across pages */
    tr { page-break-inside: avoid; }

    /* Day color: shift border from int-cell (hidden) to time-cell */
    tr.day-1 .time-cell,
    tr.day-2 .time-cell,
    tr.day-3 .time-cell,
    tr.day-4 .time-cell {
      print-color-adjust: exact;
      -webkit-print-color-adjust: exact;
      padding-left: 8px;
    }
    tr.day-1 .time-cell { border-left: 6px solid #e07b39 !important; }
    tr.day-2 .time-cell { border-left: 6px solid #3a86d4 !important; }
    tr.day-3 .time-cell { border-left: 6px solid #5cb85c !important; }
    tr.day-4 .time-cell { border-left: 6px solid #9b59b6 !important; }
    tr.day-5  .time-cell { border-left: 6px solid #c0392b !important; }
    tr.day-6  .time-cell { border-left: 6px solid #16a085 !important; }
    tr.day-7  .time-cell { border-left: 6px solid #d35400 !important; }
    tr.day-8  .time-cell { border-left: 6px solid #2980b9 !important; }
    tr.day-9  .time-cell { border-left: 6px solid #8e44ad !important; }
    tr.day-10 .time-cell { border-left: 6px solid #27ae60 !important; }
    tr.day-11 .time-cell { border-left: 6px solid #e07b39 !important; }
    tr.day-12 .time-cell { border-left: 6px solid #3a86d4 !important; }
    tr.day-13 .time-cell { border-left: 6px solid #5cb85c !important; }
    tr.day-14 .time-cell { border-left: 6px solid #9b59b6 !important; }
    tr.day-15 .time-cell { border-left: 6px solid #c0392b !important; }
    tr.day-16 .time-cell { border-left: 6px solid #16a085 !important; }
    tr.day-17 .time-cell { border-left: 6px solid #d35400 !important; }
    tr.day-18 .time-cell { border-left: 6px solid #2980b9 !important; }
    tr.day-19 .time-cell { border-left: 6px solid #8e44ad !important; }
    tr.day-20 .time-cell { border-left: 6px solid #27ae60 !important; }
    tr.day-21 .time-cell { border-left: 6px solid #e07b39 !important; }
    tr.day-22 .time-cell { border-left: 6px solid #3a86d4 !important; }
    tr.day-23 .time-cell { border-left: 6px solid #5cb85c !important; }
    tr.day-24 .time-cell { border-left: 6px solid #9b59b6 !important; }
    tr.day-25 .time-cell { border-left: 6px solid #c0392b !important; }
    tr.day-26 .time-cell { border-left: 6px solid #16a085 !important; }
    tr.day-27 .time-cell { border-left: 6px solid #d35400 !important; }
    tr.day-28 .time-cell { border-left: 6px solid #2980b9 !important; }
    tr.day-29 .time-cell { border-left: 6px solid #8e44ad !important; }
    tr.day-30 .time-cell { border-left: 6px solid #27ae60 !important; }
    tr.day-31 .time-cell { border-left: 6px solid #e07b39 !important; }

    /* Row states */
    tr.is-going td {
      background: #d4edda !important;
      print-color-adjust: exact; -webkit-print-color-adjust: exact;
    }
    tr.is-conflict .time-cell {
      background: #fff3cd !important;
      print-color-adjust: exact; -webkit-print-color-adjust: exact;
    }
    /* Hide not-interested and cancelled rows; interested-not-going rows ARE Interested so they print */
    tr.not-interested,
    tr.is-cancelled { display: none !important; }
    /* Reset interested-not-going screen styles so these Interested rows print normally */
    tr.interested-not-going td { color: inherit !important; background: #fff !important; }
    tr.interested-not-going .show-cell { text-decoration: line-through !important; color: inherit !important; }

    /* Day group headers */
    tr.day-group-header th {
      background: #e8e3dc !important;
      print-color-adjust: exact; -webkit-print-color-adjust: exact;
      padding: 6px 10px;
      border-top: 2px solid #ccc;
    }

    /* Links render as plain text */
    a { color: inherit !important; text-decoration: none !important; }

    .no-results { display: none !important; }

    /* Print-only legend */
    .print-legend {
      display: flex !important;
      gap: 18px;
      flex-wrap: wrap;
      margin: 12px 0 0 0;
      font-size: 7.5pt;
      color: #444;
      align-items: center;
    }
    .print-legend-item { display: flex; align-items: center; gap: 5px; }
    .print-legend-swatch {
      display: inline-block; width: 13px; height: 13px; border: 1px solid #ccc;
      print-color-adjust: exact; -webkit-print-color-adjust: exact;
    }
    .pl-going    { background: #d4edda !important; }
    .pl-conflict { background: #fff3cd !important; }

    /* Footer shows in print */
    footer {
      display: block !important;
      font-size: 7.5pt;
      padding: 8px 0 0 0;
      margin: 0;
      border-top: 1px solid #ddd;
    }
  }

  /* ── Tooltip ── */
  .show-cell { position: relative; cursor: default; }
  .show-cell a { color: inherit; text-decoration: none; }
  .show-cell a:hover { text-decoration: underline; }
  .ext-link-icon { display: inline-block; vertical-align: middle; margin-left: 3px; margin-bottom: 2px; opacity: 0.5; }
  .tt-popup {
    display: none;
    position: fixed;
    z-index: 9999;
    background: #1a1a2e;
    color: #f5f5f5;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.82rem;
    line-height: 1.5;
    max-width: 380px;
    white-space: normal;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    pointer-events: none;
  }
  .tt-genre {
    margin-top: 8px;
    font-weight: 600;
    color: #d4b896;
  }
  .tt-info-btn {
    background: none; border: none; cursor: pointer;
    color: #aaa; font-size: 1rem; padding: 0 0 0 4px;
    vertical-align: middle; line-height: 1; display: inline;
  }
  .tt-info-btn:hover { color: #555; }
  /* ── Share Schedule button ── */
  .share-btn {
    display: none;
    padding: 7px 18px; border-radius: 20px; border: 2px solid #1a6b2f;
    background: #1a6b2f; cursor: pointer; font-size: 0.85rem; font-weight: 600;
    color: #fff; transition: all 0.15s;
  }
  .share-btn.visible { display: inline-block; }
  .share-btn:hover { background: #145224; border-color: #145224; }

  /* ── Share modal ── */
  .share-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.5); z-index: 9000;
    align-items: flex-start; justify-content: center;
    padding-top: 60px;
  }
  .share-overlay.visible { display: flex; }
  .share-panel {
    background: #fff; border-radius: 12px; padding: 28px 32px;
    width: min(560px, 92vw); max-height: 78vh;
    display: flex; flex-direction: column; gap: 14px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.35);
  }
  .share-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  }
  .share-header h2 { font-size: 1rem; color: #1a1a2e; margin: 0; line-height: 1.4; }
  .share-close {
    background: none; border: none; font-size: 1.3rem; cursor: pointer;
    color: #666; line-height: 1; padding: 4px 8px; border-radius: 4px; flex-shrink: 0;
  }
  .share-close:hover { background: #eee; color: #222; }
  .share-textarea {
    width: 100%; flex: 1; min-height: 220px;
    border: 1px solid #ccc; border-radius: 8px;
    padding: 12px; font-family: monospace; font-size: 0.82rem;
    line-height: 1.6; resize: vertical; color: #222; background: #fafafa;
    box-sizing: border-box;
  }
  .share-copy-btn {
    align-self: flex-end;
    padding: 7px 18px; border-radius: 20px; border: 2px solid #1a1a2e;
    background: transparent; cursor: pointer; font-size: 0.82rem; font-weight: 600;
    color: #1a1a2e; transition: all 0.15s;
  }
  .share-copy-btn:hover { background: #1a1a2e; color: #fff; }

  /* ── Instructions button ── */
  .instructions-btn {
    padding: 7px 18px; border-radius: 20px; border: 2px solid #888;
    background: #888; cursor: pointer; font-size: 0.85rem; font-weight: 600;
    color: #fff; transition: all 0.15s;
  }
  .instructions-btn:hover { background: #666; border-color: #666; }

  /* ── Instructions modal ── */
  .instructions-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.5); z-index: 9000;
    align-items: flex-start; justify-content: center;
    padding-top: 60px;
  }
  .instructions-overlay.visible { display: flex; }
  .instructions-panel {
    background: #fff; border-radius: 12px; padding: 28px 32px;
    width: min(620px, 92vw); max-height: 78vh; overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,0.35);
    display: flex; flex-direction: column; gap: 0;
  }
  .instructions-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; flex-shrink: 0;
  }
  .instructions-header h2 { font-size: 1.1rem; color: #1a1a2e; margin: 0; }
  .instructions-close {
    background: none; border: none; font-size: 1.3rem; cursor: pointer;
    color: #666; line-height: 1; padding: 4px 8px; border-radius: 4px;
  }
  .instructions-close:hover { background: #eee; color: #222; }
  .instructions-body { font-size: 0.88rem; line-height: 1.65; color: #333; }
  .instructions-body p { margin: 0 0 12px 0; }
  .instructions-body ul { margin: 0 0 12px 0; padding-left: 20px; }
  .instructions-body li { margin-bottom: 6px; }
  .instructions-body strong { color: #1a1a2e; }

  /* ── Shows List button ── */
  .shows-list-btn {
    padding: 7px 18px; border-radius: 20px; border: 2px solid #5c3d8f;
    background: #5c3d8f; cursor: pointer; font-size: 0.85rem; font-weight: 600;
    color: #fff; transition: all 0.15s;
  }
  .shows-list-btn:hover { background: #4a2e75; border-color: #4a2e75; }

  /* ── Shows List panel ── */
  .shows-list-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.5); z-index: 9000;
    align-items: flex-start; justify-content: center;
    padding-top: 60px;
  }
  .shows-list-overlay.visible { display: flex; }
  .shows-list-panel {
    background: #fff; border-radius: 12px; padding: 24px 28px;
    width: min(860px, 92vw); max-height: 78vh;
    display: flex; flex-direction: column;
    box-shadow: 0 8px 40px rgba(0,0,0,0.35);
  }
  .shows-list-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; flex-shrink: 0;
  }
  .shows-list-header h2 { font-size: 1.15rem; color: #1a1a2e; margin: 0; }
  .shows-list-intro {
    font-size: 0.85rem; color: #555; line-height: 1.5;
    margin: 0 0 14px 0; flex-shrink: 0;
  }
  .shows-list-toolbar { margin-bottom: 12px; flex-shrink: 0; }
  .shows-list-close {
    background: none; border: none; font-size: 1.3rem; cursor: pointer;
    color: #666; line-height: 1; padding: 4px 8px; border-radius: 4px;
  }
  .shows-list-close:hover { background: #eee; color: #222; }
  .shows-list-grid {
    overflow-y: scroll;
    display: grid;
  }
  .shows-list-grid::-webkit-scrollbar { width: 8px; }
  .shows-list-grid::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 4px; }
  .shows-list-grid::-webkit-scrollbar-thumb { background: #bbb; border-radius: 4px; }
  .shows-list-grid::-webkit-scrollbar-thumb:hover { background: #888; }
  .shows-list-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--sl-rows, 50), auto);
    gap: 6px 32px;
  }
  .shows-list-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.87rem; padding: 3px 0;
  }
  .shows-list-item input[type="checkbox"] { flex-shrink: 0; cursor: pointer; }
  .shows-list-label-wrap { flex: 1; }
  .shows-list-item label { cursor: pointer; line-height: 1.3; }
  .shows-list-item label a { color: inherit; text-decoration: none; }
  .shows-list-item label a:hover { text-decoration: underline; }
  .shows-list-item.not-interested label { color: #999; }
  .shows-list-item.not-interested .tt-info-btn { color: #999; }
  .shows-list-item.is-cancelled label { color: #c0392b; text-decoration: line-through; }
  .shows-list-item.is-cancelled input[type="checkbox"] { opacity: 0.25; }
  .shows-list-grid:focus { outline: 2px solid #1a1a2e; outline-offset: 2px; }

  .runtime-cell { color: #888; font-size: 0.8rem; white-space: nowrap; }
  tr.is-going .runtime-cell { color: #2a8a3f !important; }
  tr.is-conflict .runtime-cell { color: #2a8a3f !important; }
  tr.not-interested .runtime-cell { color: #888 !important; }
  tr.interested-not-going .runtime-cell { color: #ccc !important; }

  /* ── Mobile (narrow screen) ── */
  @media (max-width: 640px) {
    header { padding: 12px 16px; }
    header h1 { font-size: 0.9rem; }
    /* Controls — flatten rows and reorder for mobile */
    .controls { padding: 8px 12px; gap: 6px; flex-direction: row; flex-wrap: wrap; align-items: center; }
    .controls-row { display: contents; }
    .share-help-group { display: contents; }
    .search-wrap { margin-left: 0; order: 6; width: 100%; }
    /* Row 1: Shows List | Day select | Reset | Help */
    #shows-list-btn  { order: 1; }
    #day-select      { order: 2; }
    #reset-btn        { order: 3; }
    #undo-reset-btn   { order: 4; }
    #instructions-btn { order: 5; }
    /* Row 2: Search */
    /* Row 3: Show Interested only | Show Going only | Share Schedule */
    #interested-toggle  { order: 7; }
    #going-toggle       { order: 8; }
    #share-btn          { order: 9; }
    #unscheduled-note   { order: 10; flex: none; width: 100%; }
    /* Shorter button labels on mobile */
    #interested-toggle, #going-toggle, #share-btn, #undo-reset-btn { font-size: 0; }
    #undo-reset-btn::after { content: "Undo"; font-size: 0.78rem; }
    #interested-toggle::after         { content: "Shortlist Only"; font-size: 0.78rem; }
    #interested-toggle.active::after  { content: "Show All"; font-size: 0.78rem; }
    #going-toggle::after              { content: "Scheduled Only"; font-size: 0.78rem; }
    #going-toggle.active::after       { content: "Show All"; font-size: 0.78rem; }
    #share-btn::after                 { content: "Share"; font-size: 0.78rem; }
    .going-toggle-btn,
    .interested-toggle-btn,
    .reset-btn,
    .undo-reset-btn,
    .share-btn,
    .instructions-btn,
    .shows-list-btn { padding: 5px 11px; font-size: 0.78rem; line-height: 1; }
    #day-select { padding: 5px 24px 5px 10px; font-size: 0.78rem; line-height: 1; }
    .search-input-wrap { display: flex; width: 100%; }
    #search { padding: 5px 26px 5px 10px; font-size: 0.78rem; width: 100%; }

    /* Getting started strip */
    .getting-started-strip { padding: 10px 12px; }

    /* Table container */
    .table-wrap { padding: 0 0 16px 0; overflow-x: auto; }
    table { font-size: 0.82rem; min-width: 0; }
    td { padding: 8px 5px; }
    th { padding: 9px 5px; font-size: 0.68rem; }

    /* Hide Run Time and Venue columns */
    th.runtime-col, td.runtime-cell,
    th.venue-col,   td.venue-cell { display: none; }

    /* Show venue as a second line under the show name */
    .show-cell::after {
      content: attr(data-venue);
      display: block;
      font-size: 0.75rem;
      font-weight: 400;
      color: #777;
      margin-top: 2px;
    }
    tr.is-going    .show-cell::after { color: #2a8a4a; }
    tr.is-conflict .show-cell::after { color: #2a8a4a; }
    tr.not-interested .show-cell::after { color: #888; }
    tr.interested-not-going   .show-cell::after { color: #ccc; }

    /* Tighter day-group headers */
    .day-group-header td { padding: 10px 10px; font-size: 0.72rem; }

    /* Larger touch targets for checkboxes */
    input[type="checkbox"] { width: 20px; height: 20px; }

    /* Shows List: single column, row flow */
    .shows-list-grid {
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }
    .shows-list-panel { padding: 18px 16px; }
    footer { margin: 24px 16px 16px; }
  }