/* responsive.css - swipe hint, desktop/mobile @media queries, mobile drag handle, mobile search overlay, theme toggle, light-mode (body.light) block. Loaded LAST. Part of the split-up style.css; see index.html for load order. */
  /* ── SWIPE HINT OVERLAY ──
     position:fixed so it doesn't move when .preview-area scrolls.
     top/height/left-or-right/width are all set in JS from the preview bounding rect. */
  .swipe-hint {
    position: fixed;
    z-index: 200;
    background: rgba(0, 0, 0, 0.58);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
  }
  .swipe-hint.visible { opacity: 1; }
  .swipe-hint-content {
    position: absolute;
    bottom: 33%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0 8px;
  }
  .swipe-hint-icon {
    font-size: 1.8rem;
    color: var(--gold-light);
    line-height: 1;
  }
  .swipe-hint-label {
    font-family: 'Cinzel', serif;
    font-size: small;
    letter-spacing: 0.06em;
    color: var(--gold-light);
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
    word-break: break-word;
    width: 100%;
  }

  /* ── DESKTOP (≥861px): slim top bar; collections/cards/filter/select/new-card
        all moved into the left rail + center strip, so hide them here. ── */
  @media (min-width: 861px) {
    #leftRail { display: flex; }
    .history-track,
    #collectionLabelWrap,
    #cardsLabelWrap,
    .history-type-filter,
    .bar-select-btn,
    #newCardWrap { display: none !important; }

    /* Slim bar layout: wordmark · search · save chip · Export & Share · theme */
    .bar-wordmark        { order: 0; }
    .history-search-wrap { order: 1; flex: 0 1 340px; margin-right: auto; }
    .history-search-wrap .history-search-input { flex: 1; width: auto; min-width: 0; }
    #saveChip            { order: 2; }
    #exportShareBtn      { order: 3; }
    #themeToggle         { order: 4; }
    #cloudAvatar         { order: 5; }
  }

  /* ── MOBILE DRAG HANDLE (desktop: hidden) ── */
  .mobile-drag-handle { display: none; }

  @media (max-width: 860px) {
    /* Left rail + center strip + card dock are desktop-only; mobile keeps the bar
       dropdowns and the export bottom-sheet (⤓ in the bar). */
    #leftRail,
    .card-strip-head,
    .card-action-dock { display: none !important; }
    .history-track,
    .bar-wordmark,
    .bar-select-btn,
    .history-type-filter { display: none !important; }
    /* Cloud avatar is desktop-only; mobile reaches cloud via Settings */
    .bar-cloud-avatar { display: none !important; }
    /* Export stays reachable on mobile as a compact icon (opens the bottom sheet) */
    .bar-export-label { display: none; }
    .bar-export-btn { padding: 0 0.6rem; font-size: 0.9rem; }
    /* Settings reached from the bottom of the editor on mobile */
    .mobile-settings-btn { display: block; width: 100%; }
    /* Declutter the bar: save chip shows the status dot only */
    .save-chip { padding: 0.28rem 0.45rem; }
    .save-chip-text { display: none; }
    .history-label-wrap { border-right: none; }
    .history-label-text,
    #collectionDropdownLabel { display: none; }
    #themeToggle { margin-left: auto; }
    .theme-label { display: none; }
    .history-search-wrap { flex: 1; flex-shrink: 1; min-width: 0; }
    .history-search-wrap .history-search-input { width: auto; flex: 1; min-width: 0; }
    .history-save-btn { padding-left: 0.35rem; padding-right: 0.35rem; letter-spacing: 0.04em; }
    #newCardBtn { flex: none; padding-left: 0.4rem; padding-right: 0.4rem; letter-spacing: 0; justify-content: center; }
    #themeToggle { width: 36px; padding: 0; justify-content: center; flex-shrink: 0; }

    /* Switch workspace to flex column so children can have explicit heights */
    .workspace {
      display: flex;
      flex-direction: column;
    }

    /* Card preview — top section (card hero); height snaps between peek/expanded */
    .preview-area {
      order: 1;
      flex-shrink: 0;
      height: var(--mobile-preview-h, 42vh);
      min-height: 80px;
      padding: 0.75rem 1rem 0.5rem;
      overflow-y: auto;
      overflow-x: hidden;
    }
    /* Smoothly animate only the snap on release (not every drag frame) */
    .workspace.mobile-snapping .preview-area { transition: height 0.22s ease; }

    /* Drag handle — sits between preview and tabs */
    .mobile-drag-handle {
      display: flex;
      order: 2;
      flex-shrink: 0;
      height: 22px;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      background: rgba(20,10,2,0.98);
      border-top: 1px solid rgba(180,130,60,0.25);
      border-bottom: 1px solid rgba(180,130,60,0.25);
      cursor: ns-resize;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
    }
    .mobile-drag-handle:active { background: rgba(180,130,60,0.1); }
    .mobile-drag-pill {
      width: 36px;
      height: 4px;
      border-radius: 2px;
      background: rgba(180,130,60,0.45);
      flex-shrink: 0;
    }
    .mobile-drag-label {
      font-family: 'Cinzel', serif;
      font-size: small;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(180,130,60,0.35);
    }

    /* Tab panel — fills remaining space, scrolls internally */
    .controls {
      order: 3;
      flex: 1;
      min-height: 0;
      overflow: hidden;
      /* Push content above iOS home indicator / Android nav bar when
         viewport-fit=cover extends the page to screen edges */
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* ── MOBILE SEARCH RESULTS OVERLAY ── */
    .history-search-results {
      position: absolute;
      top: calc(100% + 6px);
      left: -0.5rem;
      right: -0.5rem;
      z-index: 200;
      background: rgba(18,9,2,0.98);
      border: 2px solid rgba(180,130,60,0.65);
      border-radius: 5px;
      max-height: 50vh;
      overflow-y: auto;
      box-shadow: 0 6px 24px rgba(0,0,0,0.6);
    }
    .history-search-results.open { display: block; }
    .history-search-result-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.65rem 0.9rem;
      font-family: 'Crimson Pro', serif;
      font-size: small;
      color: #dabb80;
      cursor: pointer;
      border-bottom: 1px solid rgba(180,130,60,0.12);
    }
    .history-search-result-item:last-child { border-bottom: none; }
    .history-search-result-item:active { background: rgba(180,130,60,0.12); }
    .history-search-result-name { flex: 1; }
    .history-search-result-meta { font-size: small; opacity: 0.55; white-space: nowrap; }
  }

  /* ── THEME TOGGLE BUTTON ── */
  .theme-toggle {
    /* inherits .history-save-btn layout; no extra positioning needed */
  }

  /* ── LIGHT MODE ── */
  body.light {
    color-scheme: light;
    background: #f0e6cc;
    color: #2c1a0e;
  }
  body.light::before {
    background-image:
      repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(0,0,0,0.03) 60px, rgba(0,0,0,0.03) 61px),
      repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(0,0,0,0.03) 60px, rgba(0,0,0,0.03) 61px);
  }
  body.light .theme-toggle {
    border-color: rgba(100,65,20,0.35);
    color: #7a5020;
  }
  body.light .theme-toggle:hover {
    border-color: rgba(100,65,20,0.65);
    color: #3a2008;
    background: rgba(100,65,20,0.07);
  }
  body.light .history-bar {
    background: rgba(210,178,108,0.97);
    border-bottom-color: rgba(120,80,30,0.2);
  }
  body.light .history-label { color: #5a3810; }
  body.light .history-item          { border-right-color: rgba(120,80,30,0.15); }
  body.light .history-item:hover    { background: rgba(120,80,30,0.08); }
  body.light .history-name          { color: #2c1a0e; }
  body.light .history-item.history-active .history-name,
  body.light .history-dropdown-item.history-active .history-name { color: #1a0800; font-weight: 700; }
  body.light .history-empty         { color: #7a5020; }
  body.light .history-save-btn {
    color: #6b4418;
    border-left-color: rgba(120,80,30,0.2);
  }
  body.light .history-save-btn:hover  { background: rgba(120,80,30,0.1); color: #3a2008; }
  body.light .history-save-btn.flash  { background: rgba(120,80,30,0.15); color: #3a2008; }
  body.light .history-search-clear { color: rgba(120,80,30,0.5); border-color: rgba(120,80,30,0.25); }
  body.light .history-search-clear:hover { color: #3a2008; border-color: rgba(120,80,30,0.6); background: rgba(120,80,30,0.06); }
  body.light .history-search-results {
    background: rgba(244,232,193,0.99);
    border-color: rgba(120,80,30,0.55);
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  }
  body.light .history-search-result-item { color: #3a2008; border-bottom-color: rgba(120,80,30,0.15); }
  body.light .history-search-result-item:active { background: rgba(120,80,30,0.08); }
  body.light .history-search-input { color: #3a2008; border-color: rgba(120,80,30,0.35); }
  body.light .history-search-input::placeholder { color: rgba(120,80,30,0.45); }
  body.light .history-search-input:focus { border-color: rgba(120,80,30,0.7); background: rgba(120,80,30,0.05); }
  body.light .history-rarity.rarity-common    { color: #7a5820; }
  body.light .history-rarity.rarity-uncommon  { color: #1e7a3e; }
  body.light .history-rarity.rarity-rare      { color: #1a48a0; }
  body.light .history-rarity.rarity-very-rare { color: #6a2a9a; }
  body.light .history-rarity.rarity-legendary { color: #c05000; }
  body.light .history-rarity.rarity-artifact  { color: #a01818; }
  body.light .history-rarity.rarity-unique    { color: #8a7000; }
  body.light .history-delete { color: rgba(100,65,20,0.4); }
  body.light .history-delete:hover { color: #c0392b; background: rgba(192,57,43,0.1); }
  body.light .history-dropdown {
    background: rgba(244,234,207,0.99);
    border-color: rgba(120,80,30,0.25);
  }
  body.light .history-dropdown-empty { color: #7a5020; }
  body.light .history-dropdown-new {
    color: #6b4418;
    border-bottom-color: rgba(120,80,30,0.2);
  }
  body.light .history-dropdown-new:hover { background: rgba(120,80,30,0.08); }
  body.light .history-dropdown-item { border-bottom-color: rgba(120,80,30,0.1); }
  body.light .history-dropdown-item:hover { background: rgba(120,80,30,0.07); }
  body.light .history-dropdown-item.history-active { background: rgba(120,80,30,0.12); }
  body.light .controls {
    background: rgba(244,234,207,0.98);
    border-right-color: rgba(120,80,30,0.2);
  }
  body.light .tab-bar {
    background: rgba(180,140,70,0.12);
    border-bottom-color: rgba(120,80,30,0.2);
  }
  body.light .btn-primary {
    background: #b8860b;
    border-color: #8b6010;
    color: #1a0800;
  }
  body.light .btn-primary:hover {
    background: #c89a20;
    box-shadow: 0 0 16px rgba(160,104,32,0.3);
  }
  body.light .tab-btn       { color: rgba(100,65,20,0.5); }
  body.light .tab-btn:hover { color: #3a2008; }
  body.light .tab-btn.active {
    color: #4a2e00;
    border-bottom-color: #8b6010;
    background: rgba(140,95,20,0.08);
  }
  body.light .section-title { color: #8b5e08; }
  body.light .section-title::after {
    background: linear-gradient(to right, rgba(120,80,30,0.3), transparent);
  }
  body.light input[type="text"],
  body.light select,
  body.light textarea {
    background: rgba(120,80,30,0.05);
    border-color: rgba(120,80,30,0.28);
    color: #2c1a0e;
  }
  body.light select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a5c18' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
  }
  body.light select option { background: #f0e6cc; color: #2c1a0e; }
  body.light input[type="text"]:focus,
  body.light select:focus,
  body.light textarea:focus {
    border-color: rgba(120,80,30,0.55);
  }
  body.light label,
  body.light .field-group label { color: #4a2c08; }
  body.light .toggle-row        { color: #4a2c08; }
  body.light { --label-color: #5a3810; }
  body.light input.prop-label { color: #7a5020; background: rgba(120,80,30,0.08); border-color: rgba(120,80,30,0.3); }
  body.light input.prop-label:hover { border-color: rgba(120,80,30,0.55); background: rgba(120,80,30,0.12); }
  body.light input.prop-label:focus { border-color: #8b5e08; background: rgba(120,80,30,0.16); }
  body.light .prop-hint { background: rgba(120,80,30,0.07); }
  body.light .btn-secondary {
    border-color: rgba(120,80,30,0.38);
    color: #7a5020;
  }
  body.light .btn-secondary:hover {
    border-color: rgba(120,80,30,0.65);
    color: #3a2008;
  }
  body.light .preview-area { background: #e4d0a5; }
  body.light .scale-control { color: #5a3810; }
  body.light .scale-reset-btn { color: rgba(80,50,15,0.5); }
  body.light .scale-reset-btn:hover { color: #3a2008; border-color: rgba(120,80,30,0.3); }
  body.light .scale-flip-btn { border-color: rgba(120,80,30,0.3); color: #6b4418; }
  body.light .scale-flip-btn:hover { border-color: rgba(120,80,30,0.6); color: #3a2008; }
  body.light .scale-flip-btn[aria-pressed="true"] { background: rgba(120,80,30,0.12); border-color: rgba(120,80,30,0.5); color: #3a2008; }
  body.light .export-hint   { color: #5a3810; }
  body.light .char-count    { color: #5a3810; }
  body.light .char-count.warn { color: #9a6e00; }
  body.light .char-count.over { color: #8b1a1a; }
  body.light .md-hint {
    background: rgba(120,80,30,0.06);
    border-color: rgba(120,80,30,0.2);
    color: #5a3810;
  }
  body.light .md-hint code {
    background: rgba(120,80,30,0.1);
    color: #5a3810;
  }
  body.light .upload-zone {
    border-color: rgba(120,80,30,0.3);
    background: rgba(120,80,30,0.04);
  }
  body.light .upload-zone:hover {
    border-color: rgba(120,80,30,0.55);
    background: rgba(120,80,30,0.08);
  }
  body.light .upload-placeholder { color: rgba(100,65,20,0.65); }
  body.light .oversized-warning {
    background: rgba(139,26,26,0.07);
    border-color: rgba(139,26,26,0.22);
    color: #7a1010;
  }
  body.light .oversized-toggle-row { color: #4a2c08; }
  body.light .color-row input[type="color"] { border-color: rgba(120,80,30,0.3); }
  body.light p[style*="color:rgba(180,130,60"] { color: #5a3810 !important; }