/* TechStone Field — modules/documents.css — Documents (BUILD-SPEC-v2 §8.3), Phase 4.
 * Reuses app.css tokens/components (.face, .seg, .chip, .deck, .kv, .empty, .note) — nothing here
 * redefines them. Same rules as app.css: no horizontal scroll ever, 48px targets (44px floor), one
 * breakpoint at 768px, white-space:nowrap only on short pills.
 */

/* ------------------------------------------------------------------ tools row: search + line chips */
.doc-tools { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.doc-search {
  width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--card); font-size: 16px;
}
/* fix B (audit §3 targets): 44 px tall filter chips, 8 px apart (were 32 px, 6 px). */
.doc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* .chip-wrap (app.css) lets a long line name wrap instead of pushing the row sideways — these filter
 * chips carry it in markup (class="chip chip-f chip-wrap") rather than repeating white-space rules here. */
.chip-f {
  min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--btn-rule);
  background: var(--card); color: var(--ink-soft); font: 500 13px var(--f-body);
}
.chip-f.on { background: var(--copper-solid, var(--basalt)); color: var(--ink, var(--tech-dark)); border-color: var(--copper-solid, var(--basalt)); }
.doc-state { margin-bottom: 4px; }
.doc-quota { margin-bottom: 4px; }

/* ------------------------------------------------------------------ document rows (inside ui.deck) */
.drow { display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 48px; justify-content: center; padding: 8px 4px; }
/* A separate tap target from the row itself: tapping the row still opens the document. */
.drow-send { margin-left: auto; flex: none; height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--ink-soft); background: transparent; color: var(--ink-soft); font: 600 12px var(--f-body); }
.drow-send[disabled] { opacity: .5; }
.drow-t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dt { font: 600 15px var(--f-body); color: var(--ink, var(--basalt)); overflow-wrap: anywhere; }
.drow-s { font-size: 13px; color: var(--ink-soft); }

/* ------------------------------------------------------------------ doc face (item view) */
/* fix B (audit §3 targets): "Keep on this phone" is a full-row, 48 px label (the whole row toggles it), and
 * Open is a full-width button under it — the checkbox alone was a 22 px target. */
.docface-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 12px; }
.switch {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px;
  border: 1px solid var(--btn-rule); border-radius: var(--radius); background: var(--card);
  font: 500 15px var(--f-body); cursor: pointer;
}
.switch input { flex: 0 0 auto; width: 24px; height: 24px; margin: 0; accent-color: var(--copper); }
.doc-keep-msg { min-height: 20px; font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
.doc-video { display: block; margin-top: 12px; max-height: 60vh; background: #000; border-radius: 8px; }

/* ------------------------------------------------------------------ images: layout switcher */
.img-tools { gap: 10px; }
.img-body { margin-top: 8px; }

/* Grid */
.img-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.img-grid-sw { grid-template-columns: repeat(4, 1fr); }
.img-cell {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; border: 1px solid var(--rule);
  border-radius: 8px; overflow: hidden; background: var(--card); padding: 0;
}
.img-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* An image is drawn from a blob fetched with the Bearer (fix B, H1); until it arrives the cell shows its
 * background, and a failed fetch leaves a quiet empty tile rather than a broken-image glyph. */
.img-cell img:not([src]), .img-failed { visibility: hidden; }
.img-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; font-size: 11px; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.65)); text-align: left; overflow-wrap: anywhere;
}
@media (min-width: 768px) { .img-grid { grid-template-columns: repeat(5, 1fr); } .img-grid-sw { grid-template-columns: repeat(7, 1fr); } }

/* Lookbook */
.lookbook { display: flex; flex-direction: column; gap: 10px; }
.lb-hero { width: 100%; border-radius: 8px; display: block; }
.lb-h { font: 600 20px var(--f-head); }
.lb-cat { font: 600 15px var(--f-head); margin-top: 6px; color: var(--copper-ink); }

/* Compare — stacked on a phone, side by side at >=768px, with a draggable split handle */
.compare {
  position: relative; display: flex; flex-direction: column; gap: 8px; border-radius: 8px; overflow: hidden;
  --split: 50%;
}
.cmp-pane { width: 100%; aspect-ratio: 4 / 3; background: var(--card); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.cmp-pane img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-handle { display: none; }
.cmp-pickers { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.cmp-pickers select { min-height: 44px; width: 100%; border: 1px solid var(--btn-rule); border-radius: 8px; padding: 0 8px; font-size: 16px; background: var(--card); }
@media (min-width: 768px) {
  .compare { flex-direction: row; aspect-ratio: 16 / 9; }
  .cmp-pane { position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 0; }
  .cmp-pane:first-child { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
  .cmp-pane:last-child { clip-path: inset(0 0 0 var(--split)); }
  .cmp-handle {
    display: block; position: absolute; top: 0; bottom: 0; width: 44px; margin-left: -22px; left: var(--split);
    cursor: ew-resize; touch-action: none; z-index: 2;
  }
  .cmp-handle::before {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px;
    background: var(--copper); box-shadow: 0 0 0 2px rgba(255,255,255,.7);
  }
  .cmp-handle::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px;
    border-radius: 50%; background: var(--copper); border: 3px solid #fff;
  }
  .cmp-pickers { flex-direction: row; }
  .cmp-pickers select { flex: 1 1 0; }
}

/* Present — full-screen overlay, tap left/right side to advance, chrome hidden */
.img-full {
  position: fixed; inset: 0; background: #000; z-index: 500; display: flex; align-items: center; justify-content: center;
}
.img-full img { max-width: 100%; max-height: 100%; object-fit: contain; }
.img-full-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; padding-bottom: calc(16px + var(--safe-b));
  color: #fff; font: 500 15px var(--f-body); text-align: center; background: linear-gradient(transparent, rgba(0,0,0,.7));
}
.img-full-close, .img-full-prev, .img-full-next, .img-full-send {
  position: absolute; width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff;
  border: 0; display: flex; align-items: center; justify-content: center;
}
.img-full-close { top: calc(12px + var(--safe-t)); right: 12px; }
/* Send sits beside Close, wide enough for a word so it is never mistaken for Next. */
.img-full-send { top: calc(12px + var(--safe-t)); right: 68px; width: auto; padding: 0 16px; border-radius: 24px; font: 600 13px var(--f-body); }
.img-present .img-full-close { top: calc(12px + var(--safe-t)); }
.img-full-prev { left: 12px; top: 50%; margin-top: -24px; }
.img-full-next { right: 12px; top: 50%; margin-top: -24px; }
.img-full-next .ic { transform: rotate(0deg); }

/* dark overrides (generated 12 Oct 2026) */
html[data-theme='dark'] .cmp-handle::after{border-color:var(--border,#fff)}