/* ── Responsive ── */

/* Narrow Desktop (≤ 1200px) */
@media (max-width: 1200px) {
  .nominee-top {
    flex-wrap: wrap;
  }
  .nominee-info {
    min-width: 200px;
  }
  .nominee-action {
    flex-basis: 100%;
    flex-direction: row;
    align-items: center;
    padding-left: 64px; /* 52px curate avatar + 12px gap */
  }
  /* Keep action buttons inline on browse cards */
  .vote-pool .nominee-action {
    flex-basis: auto;
    padding-left: 0;
  }
}

/* Tablet (≤ 900px) */
@media (max-width: 900px) {
  .select-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }
  .select-pool {
    max-width: 100%;
    order: 2;
  }
  /* On mobile, sub-bar takes full width; hide desktop alert (it's in bottom bar) */
  .curate-sub-bar {
    max-width: 100%;
  }
  .chip-budget-alert {
    max-width: 100%;
    flex-wrap: wrap;
    gap: var(--space-1);
    row-gap: 0;
  }
  /* Tighten collapsed header — less gap between breadcrumb and alert */
  .curate-sticky-header .page-header--collapsed {
    padding-bottom: 2px;
  }
  .select-sidebar {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    height: auto;
    order: 1;
  }

  /* ── Browse/Vote: hide desktop sidebar, show mobile bottom bar ── */
  .select-sidebar.vote-sidebar {
    display: none;
  }
  .select-pool.vote-pool {
    order: 1;
    padding-bottom: 80px; /* space for sticky bottom bar */
  }
  .vote-bottom-bar {
    display: flex;
  }
  .vote-finalize-modal {
    display: flex;
  }

  /* ── Curate: hide desktop sidebar, show mobile bottom bar + modal ── */
  .select-sidebar.curate-sidebar {
    display: none;
  }
  .select-pool.curate-pool {
    order: 1;
    padding-bottom: 80px;
  }
  .curate-bottom-bar {
    display: flex;
  }
  .curate-circle-modal {
    display: flex;
  }


  /* ── Admin table: horizontal scroll on tablet ── */
  .admin-table-scroll {
    overflow-x: auto;
  }
  .admin-table {
    min-width: 700px;
  }

  .circle-card {
    height: auto;
    max-height: none;
    padding: var(--space-4);
  }
  .circle-card-sticky {
    margin: -16px -16px 0;
    padding: 12px 16px 8px;
  }
  .circle-room {
    height: 420px !important;
    min-height: 420px;
    flex: none;
  }
  .pool-sticky-row {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .pool-sort {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .nominee-action .btn {
    padding: 6px 12px;
    font-size: var(--text-2xs);
  }

  /* ── Nominee modal: full-screen on tablet+ ── */
  .nominee-modal {
    padding: 0;
    background: #1a1a1a;
  }
  .nominee-modal-inner {
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }
  .nominee-modal-close {
    top: 5px;
    right: 10px;
    z-index: 20;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    font-size: 22px;
    color: var(--color-text-tertiary);
  }
  .nominee-modal-close:hover {
    background: none;
  }
  .nominee-modal-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .nominee-modal-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .nominee-modal-columns {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
  }
  .modal-stat-bar {
    padding: 14px 12px;
    font-size: 9px;
    flex-shrink: 0;
  }
  .nominee-dossier {
    flex: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }
  .dossier-header {
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4) var(--space-3);
    flex-wrap: wrap;
  }
  .dossier-avatar {
    width: 48px;
    height: 48px;
  }
  .dossier-name {
    font-size: var(--text-lg);
  }
  .dossier-words {
    font-size: var(--text-xs);
  }
  .dossier-scroll {
    flex: none;
    overflow: visible;
    padding: 0 var(--space-4) var(--space-3);
  }
  .dossier-actions {
    flex-basis: 100%;
    padding-left: 60px;
    margin-top: -4px;
  }
  .dossier-bottom-tray {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--color-white);
    -webkit-transform: translate3d(0, 0, 0);
  }
  .dossier-bottom-tray > * + * {
    border-top: 1px solid var(--color-warm-border);
  }
  .dossier-chip-container {
    padding: 10px 12px;
  }
  .dossier-chip-container .chip-bar-stepper-btn {
    width: 36px;
    height: 36px;
  }
  .dossier-chip-container .chip-bar-stepper-btn svg {
    width: 16px;
    height: 16px;
  }
  .desktop-discussion {
    display: none !important;
  }
  .mobile-discussion {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    background: #f3f3f3;
  }
  .mobile-discussion-shortcut {
    position: sticky;
    bottom: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f3f3f3;
    border-top: 1px solid var(--color-warm-border);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-discussion-shortcut.is-hidden {
    display: none;
  }
  .mobile-discussion-shortcut.is-icon-only {
    height: 0;
    overflow: visible;
    border-top: none;
    padding: 0 14px;
    background: transparent;
    justify-content: flex-end;
  }
  .mobile-discussion-shortcut.is-icon-only .mobile-discussion-label {
    display: none;
  }
  .mobile-discussion-shortcut.is-icon-only .mobile-comment-btn {
    position: relative;
    top: 28px;
    z-index: 7;
  }
  .mobile-discussion-label {
    font-family: var(--font-display);
    font-size: var(--text-3xs);
    font-weight: var(--weight-bold);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .mobile-discussion-full {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f3f3f3;
  }
  .mobile-discussion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 6px;
    border-top: 1px solid var(--color-warm-border);
  }
  .mobile-discussion-thread {
    flex: 1;
    padding: 0 14px;
  }
  .mobile-discussion-input {
    padding: var(--space-2) 14px var(--space-3);
    background: #f3f3f3;
  }
  .mobile-comment-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-circle);
    border: none;
    background: var(--color-accent);
    color: var(--color-white);
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .modal-nav-pill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    background: #1a1a1a;
    padding: 4px var(--space-4);
    padding-bottom: max(4px, env(safe-area-inset-bottom));
    border-top: none;
    justify-content: center;
  }
  .modal-nav-btn {
    width: 28px;
    height: 28px;
    color: rgba(255, 255, 255, 0.6);
  }
  .modal-nav-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
  }
  .modal-nav-btn svg {
    width: 11px;
    height: 11px;
  }
  .modal-nav-counter {
    font-size: var(--text-4xs);
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1.5px;
  }
  .modal-nav-swipe-label {
    display: inline;
  }
  .modal-nav-badge {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
  }
  .nominee-modal-inner {
    padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px));
  }
  .nominee-modal-inner::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(36px + env(safe-area-inset-bottom, 0px));
    background: #1a1a1a;
    z-index: 0;
    pointer-events: none;
  }
  .modal-nav-pill {
    z-index: 1;
  }

  /* Bigger tap targets for chip steppers on touch devices */
  .chip-bar-stepper-btn {
    width: 32px;
    height: 32px;
  }
  .chip-bar-stepper-btn svg {
    width: 14px;
    height: 14px;
  }

  /* Prevent Safari auto-zoom on comment textarea (requires >= 16px) */
  .comment-input {
    font-size: 16px;
  }
}

/* Mobile (≤ 600px) */
@media (max-width: 600px) {
  .page-wide {
    padding: var(--space-4);
    overflow-x: clip;
  }
  .page-wide .page-header::after,
  .page-wide .page-header.page-header--collapsed::before {
    left: -16px;
    right: -16px;
  }
  .curate-sticky-header::before,
  .manage-sticky-header::before {
    left: -16px;
    right: -16px;
  }
  .pool-sticky-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .pool-label {
    font-size: var(--text-2xs);
  }
  .circle-card {
    padding: var(--space-3);
  }
  .circle-card-sticky {
    margin: -12px -12px 0;
    padding: 10px 12px 6px;
  }
  .circle-room {
    height: 300px !important;
    min-height: 300px;
    flex: none;
  }
  .nominee-top {
    flex-wrap: wrap;
  }
  .nominee-info {
    flex: 1 1 0;
    min-width: 0;
  }
  .nominee-action {
    flex-basis: 100%;
    justify-content: flex-start;
    margin-top: -2px;
    margin-bottom: 2px;
    padding-left: 64px; /* 52px curate avatar + 12px gap */
  }
  .discuss-btn--full {
    display: none;
  }
  .discuss-btn--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-accent);
    font-size: 16px;
    padding: 4px;
    cursor: pointer;
    flex-shrink: 0;
  }
  /* Discuss icon sits inline, not on wrapped row */
  .nominee-action:has(.discuss-btn--icon) {
    flex-basis: auto;
    margin-top: 0;
    padding-left: 0;
  }
  /* Keep action buttons inline on browse cards */
  .vote-pool .nominee-action {
    flex-basis: auto;
    margin-top: 0;
  }
  .vote-pool .nominee-top {
    flex-wrap: nowrap;
  }
  .nominee-action .btn {
    padding: 8px 14px;
    font-size: var(--text-xs);
  }
  .nominee-avatar {
    width: 48px;
    height: 48px;
  }
  .nominee-expand-hint {
    margin-left: 60px; /* 48px avatar + 12px gap */
  }
  .nominee-detail-inner {
    margin-left: 60px;
  }
  .nominee-name {
    font-size: var(--text-base);
  }
  .nominee-words {
    font-size: var(--text-xs);
  }
  .nominee-sub {
    font-size: var(--text-3xs);
  }
  .page-header-title {
    font-size: 28px;
  }
  .circle-card-header {
    font-size: var(--text-3xs);
  }
  .user-avatar {
    width: 44px;
    height: 44px;
  }

  /* ── Overview page: mobile ── */
  .centered {
    padding: 0 16px;
    overflow-x: clip;
  }
  .centered-narrow {
    max-width: 100%;
    padding: 0 16px;
  }
  .app-avatar-wrap {
    top: var(--space-3);
    right: 16px;
  }
  .timeline-header {
    gap: var(--space-2);
  }
  .timeline-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  /* ── Admin / Manage: mobile ── */
  .manage-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .manage-tabs::-webkit-scrollbar {
    display: none;
  }
  .manage-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }
  .admin-card {
    padding: var(--space-4);
  }
  .admin-table-scroll {
    overflow-x: auto;
  }
  .admin-table {
    min-width: 700px;
  }
  .admin-add-form {
    flex-direction: column;
    gap: var(--space-3);
  }
  .admin-add-form .nom-field {
    width: 100%;
  }
  .admin-add-form > div:last-child {
    width: 100%;
  }
  /* Settings: save buttons on own line on mobile */
  .phase-row,
  .admin-setting-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: var(--space-3);
  }
  .phase-chips {
    flex-wrap: wrap;
  }
  /* Admin nominations: keep delete icon inline on right */
  .admin-delete-label {
    display: none;
  }

  /* ── Nominate page: mobile — paper starts at form ── */
  .nom-page {
    padding: 0;
    max-width: none;
  }
  .nom-page .page-header {
    padding-left: 16px;
    padding-right: 16px;
  }
  .nom-page .page-header::after,
  .nom-page .page-header.page-header--collapsed::before {
    left: 0;
    right: 0;
  }
  .nom-page .page-subtitle,
  .nom-criteria-list {
    padding-left: 16px;
    padding-right: 16px;
  }
  .nom-criteria-list {
    padding-left: 36px;
    box-sizing: border-box;
    max-width: 100%;
  }
  .nom-card {
    border-radius: 0;
    box-shadow: none;
    transform: none;
    isolation: isolate;
  }
  .nom-card::before {
    border-radius: 0;
  }
  .nom-section-inner {
    padding: 20px 16px;
  }
  .nom-actions,
  .nom-submit-area {
    padding: 20px 16px 32px;
  }
  .nom-submit-hint {
    background: #fffef9;
    padding: 0 16px 48px;
    margin-top: 0;
  }
  .nom-spacer {
    height: 24px;
  }

  /* Prevent horizontal scroll — use clip to avoid breaking sticky */
  .nom-page {
    overflow-x: clip;
  }


  /* Grid stacking */
  .nom-identity-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .nom-photo-circle {
    width: 128px;
    height: 128px;
  }
  .nom-identity-fields {
    grid-template-columns: 1fr;
    width: 100%;
  }
  .nom-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* Small Mobile (≤ 400px) */
@media (max-width: 400px) {
  .circle-room {
    height: 280px !important;
    min-height: 280px;
  }
  .room-group-label {
    display: none;
  }
  .nominee-action .btn {
    padding: 8px 10px;
    font-size: var(--text-3xs);
  }
  .cohort-avatar {
    width: 44px;
    height: 44px;
  }
  .cohort-name {
    font-size: var(--text-4xs);
  }

  /* ── Nominate: tighter padding ── */
  .nom-section-inner,
  .nom-actions,
  .nom-submit-area {
    padding-left: 12px;
    padding-right: 12px;
  }
  .nom-page .page-header,
  .nom-page .page-subtitle {
    padding-left: 12px;
    padding-right: 12px;
  }
  .nom-criteria-list {
    padding-left: 32px;
    padding-right: 12px;
  }
}