/* ══════════════════════════════════════════════════════════════
   TACKIT — Mobile-first responsive & touch-friendly overrides
   Breakpoints: 640px (phone), 768px (tablet)
   Touch targets: minimum 44×44 px per WCAG 2.5.5 / Apple HIG
══════════════════════════════════════════════════════════════ */

/* ── Prevent iOS text inflation ──────────────────────────── */
html { -webkit-text-size-adjust: 100%; }

/* ── Remove tap highlight on interactive board elements ──── */
.board,
.note,
.btn-vote,
.btn-delete,
.btn-add,
.btn-host,
.cp-btn,
.btn-welcome-dismiss,
.btn-primary {
  -webkit-tap-highlight-color: transparent;
}

/* ── Prevent the board canvas from triggering browser
   pan/zoom — our JS handles all gestures ─────────────────── */
.board {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ══════════════════════════════════════════════════════════════
   GATE SCREEN — join / login / register
══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  #gate {
    align-items: flex-start;
    padding: 1rem 0.75rem;
    padding-top: 2.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .gate-card {
    padding: 1.5rem 1.25rem 1.75rem;
    border-radius: 12px;
  }

  .gate-title { font-size: 1.4rem; }

  /* 16 px minimum prevents iOS auto-zoom on input focus */
  .field-group input[type="text"],
  .field-group input[type="email"],
  .field-group input[type="password"],
  .field-group input[type="url"],
  .invite-code-input {
    font-size: 1rem;      /* 16 px */
    padding: 0.75rem 1rem;
    min-height: 48px;
  }

  .btn-primary,
  .btn-danger {
    min-height: 52px;
    font-size: 1.05rem;
    border-radius: 10px;
  }

  .gate-auth-links {
    text-align: center;
    font-size: 0.88rem;
    line-height: 1.9;
  }

  /* Segmented control: full-height touch targets */
  .seg-btn { min-height: 48px; font-size: 1rem; }

  /* Setup invite-code box: stack on mobile */
  .invite-code-box {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .btn-copy-invite,
  .btn-regen-invite { min-height: 44px; flex: 1; }
}

/* ══════════════════════════════════════════════════════════════
   TOOLBAR
══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .toolbar {
    height: auto;
    min-height: 52px;
    padding: 6px 8px;
    gap: 5px;
    /* Horizontally scrollable so every button is reachable */
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .toolbar::-webkit-scrollbar { display: none; }

  /* Compress left section */
  .board-topic {
    max-width: 90px;
    font-size: 0.8rem;
  }
  .company-logo {
    height: 20px;
    max-width: 72px;
  }

  /* De-prioritised items: hidden to reduce toolbar clutter */
  .note-count-badge { display: none !important; }
  .zoom-controls    { display: none !important; } /* pinch-to-zoom replaces this */
  .online-indicator { display: none !important; }
  .user-chip        { display: none !important; }
  .cohost-badge     { display: none !important; }

  /* Bigger touch targets for every toolbar button */
  .btn-host,
  .btn-leave,
  .btn-text-tool,
  .btn-draw-tool {
    height: 40px;
    padding: 0 10px;
    font-size: 0.82rem;
    flex-shrink: 0;
  }

  .btn-add {
    height: 40px;
    padding: 0 14px;
    font-size: 0.9rem;
    flex-shrink: 0;
  }

  /* Larger colour swatches */
  .color-picker {
    padding: 0.3rem 0.65rem;
    gap: 0.45rem;
    flex-shrink: 0;
  }
  .cp-btn {
    width: 26px;
    height: 26px;
  }
}

/* On very narrow screens collapse non-critical host buttons */
@media (max-width: 400px) {
  /* Hide text labels on secondary host buttons, keep them tappable */
  #btnParticipants,
  #btnExport,
  #btnEmbed {
    font-size: 0;       /* hide text */
    padding: 0;
    width: 40px;
    min-width: 40px;
  }
  /* Show only the emoji icon (first character of button text) */
  #btnParticipants::first-line,
  #btnExport::first-line,
  #btnEmbed::first-line {
    font-size: 0.82rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   NOTE CARDS
══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .note {
    /* Fluid width: comfortable on phone without being too wide */
    width: clamp(190px, 72vw, 230px);
  }

  .note-header {
    padding: 0.45rem 0.5rem;
    gap: 0.35rem;
  }

  /* Drag handle: large enough to grab easily */
  .note-drag-handle {
    font-size: 1.15rem;
    padding: 4px 6px;
    min-width: 32px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
  }

  /* Vote button: 44 px minimum touch height */
  .btn-vote {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 0.78rem;
  }

  /* Delete button: 32×32 visible, tap area covered by min-height */
  .btn-delete {
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
  }

  /* Note body: 16 px prevents iOS keyboard zoom on focus */
  .note-body {
    font-size: 1rem;    /* 16 px */
    min-height: 90px;
    padding: 0.7rem 0.75rem;
    line-height: 1.5;
  }
}

/* ══════════════════════════════════════════════════════════════
   MODALS — slide up from bottom on mobile
══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .modal {
    border-radius: 18px 18px 0 0;
    max-height: 92vh;
    width: 100%;
    animation: mobileSlideUp 0.28s cubic-bezier(0.32, 1, 0.32, 1) both;
  }

  @keyframes mobileSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* All modal variants: full width */
  .modal-wide,
  .modal-embed,
  .modal-share,
  .modal-queue {
    max-width: 100%;
  }

  .modal-header { padding: 0.85rem 1rem; }

  /* Bigger close button */
  .modal-x {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }

  .modal-body {
    padding: 0.75rem 1rem;
    -webkit-overflow-scrolling: touch;
  }

  /* Footer: wrap buttons so they each get enough width */
  .modal-footer {
    padding: 0.75rem 1rem 1.25rem; /* extra bottom padding for home bar */
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .modal-footer .btn-copy,
  .modal-footer .btn-secondary {
    flex: 1 1 80px;
    min-height: 48px;
    text-align: center;
    justify-content: center;
  }

  /* Data tables: scroll horizontally inside modal */
  .data-table {
    font-size: 0.78rem;
    min-width: 480px;
  }
  /* Wrap the table in a scrollable container */
  .modal-body > .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ══════════════════════════════════════════════════════════════
   SHARE MODAL — mobile layout
══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .share-url-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .share-url-text {
    font-size: 0.82rem;
  }
  .share-copy-url-btn {
    min-height: 44px;
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
  }
  .share-social {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .share-soc-btn {
    flex: 1 1 80px;
    min-height: 48px;
  }
  .share-message {
    font-size: 1rem; /* 16 px — prevent iOS zoom */
  }
}

/* ══════════════════════════════════════════════════════════════
   MODERATION QUEUE MODAL
══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .queue-layout {
    flex-direction: column !important;
  }
  .queue-list {
    max-height: 160px;
    overflow-y: auto;
    border-right: none !important;
    border-bottom: 1px solid #1e1e40;
  }
  .queue-detail { padding: 0.75rem !important; }

  .btn-queue-approve,
  .btn-queue-reject,
  .btn-queue-skip {
    flex: 1;
    min-height: 48px;
    font-size: 0.9rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   WELCOME TOOLTIP
══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .welcome-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .welcome-card {
    border-radius: 18px 18px 0 0;
    width: 100%;
    max-width: 100%;
    padding: 1.5rem 1.25rem 2rem; /* extra bottom for home bar */
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .btn-welcome-dismiss {
    min-height: 52px;
    font-size: 1rem;
    border-radius: 10px;
  }
}

/* ══════════════════════════════════════════════════════════════
   BOARD WATERMARK — scale down on mobile
══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .board-watermark {
    font-size: 28px;
    bottom: 8px;
    right: 10px;
  }
}

/* ══════════════════════════════════════════════════════════════
   LANDING PAGE — additional mobile improvements
══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .lp-headline {
    font-size: 2rem;
    line-height: 1.18;
  }
  .lp-subheadline { font-size: 1rem; }

  .lp-hero-ctas { flex-direction: column; }

  .lp-btn {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .lp-nav-cta {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
  }

  .lp-board-mock {
    transform: scale(0.85);
    transform-origin: top center;
  }
}

/* ══════════════════════════════════════════════════════════════
   TOUCH-ONLY CURSOR RESETS
   (hover cursors are meaningless on touch devices)
══════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
  .board,
  .note-drag-handle,
  .board.panning { cursor: default; }
}