/*
 * Talk to Quote, the prototype, wave 5: only what the doors need and app.css
 * and rest.css do not have. The paper of the PDF, version rows and their
 * question, the recap's quoted spans, photo tiles, the search field, the take
 * cards. Tokens from ../tokens.css; nothing new there.
 */

/* The PDF: a page on the desk, white in both themes, as paper is. Its rules and title in Aphotine, as the app's (DEC-085). */
.paper-wrap { padding: 14px 16px 0; }
.paper-page { background: #fff; color: #1c1c1e; border-radius: 6px; padding: 16px 14px 18px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.08); font-size: 11px; line-height: 1.4; letter-spacing: 0; }
.pp-head { display: flex; justify-content: space-between; gap: 12px; border-bottom: 2px solid #012520; padding-bottom: 8px; }
.pp-right { text-align: right; }
.pp-biz { font-size: 13px; font-weight: 700; color: #012520; }
.pp-muted { color: #6e6e73; font-size: 10px; }
.pp-for { margin-top: 10px; font-size: 11px; }
.pp-job { margin-top: 6px; font-size: 11px; color: #3a3a3c; }
.pp-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-variant-numeric: tabular-nums; }
.pp-table th { text-align: left; background: #eef1f6; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: #445; padding: 4px 5px; }
.pp-table th.r, .pp-table td.r { text-align: right; white-space: nowrap; }
.pp-table td { padding: 4px 5px; border-bottom: 1px solid #eee; vertical-align: top; }
.pp-table tr.cat td { background: #eef1f6; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 0.08em; color: #445; }
.pp-table tr.sub td { font-weight: 600; background: #f8f9fc; }
.pp-detail { display: block; color: #6e6e73; font-size: 9.5px; } /* 5.2:1 on the paper (8e8e93 was 3.3:1, under WCAG AA; caught by axe on the product page) */
.paper-page .star { color: #843c00; }
.paper-page .infer-mark { color: #52565f; }
.paper-page .yours-dot { color: #1b7f3b; }
.paper-page .yours-dot .i { width: 11px; height: 11px; }
.pp-totals { margin: 10px 0 0 auto; width: 200px; }
.pp-totals > div { display: flex; justify-content: space-between; padding: 3px 5px; }
.pp-totals .pp-range { border-top: 2px solid #012520; margin-top: 3px; padding-top: 6px; font-size: 13px; font-weight: 700; color: #012520; }
.pp-note { margin-top: 14px; background: #fff8ed; border: 1px solid #ffd280; padding: 8px 10px; font-size: 10px; color: #7a4f00; line-height: 1.5; border-radius: 4px; }
.pp-only { margin-top: 14px; background: #eef1f6; border: 1px solid #d5dbe6; padding: 8px 10px; font-size: 10px; color: #3a3a3c; line-height: 1.5; border-radius: 4px; }
.pp-foot { margin-top: 10px; font-size: 9.5px; color: #6e6e73; line-height: 1.5; }

/* Versions */
.ver-row + .ver-row::before { content: ""; display: block; height: 1px; margin-left: 16px; transform: scaleY(0.5); background: var(--sep); }
.ver-row.current .ver-num { color: var(--tint); }
.ver-acts { display: flex; gap: 6px; padding: 0 16px 10px; margin-top: -6px; }
.ver-link { width: auto; min-height: 36px; padding: 0 10px; font-size: var(--text-sub); background: none; color: var(--tint); font-weight: 500; }
.ver-ask { padding: 4px 16px 14px; }
.ver-ask .pill-row { margin-top: 10px; }
.ver-ask .pill { min-height: 44px; }
.ver-diff { padding: 0 0 6px; }
.ver-diff .row::before { display: none; }

/* Lines */
.row.line .amt { flex: none; max-width: 36%; text-align: right; }

/* The takes */
.row.take { align-items: flex-start; --inset: 58px; }
.take-text { display: block; margin-top: 6px; font-size: var(--text-body); line-height: 1.35; }

/* History filter */
.hist-seg { margin: 10px 16px 0; }
.hist-seg button { font-size: var(--text-foot); min-height: 36px; padding: 0 2px; }

/* The recap: each point and the words it came from */
.row.recap-item { align-items: flex-start; }
.recap-text { display: block; font-size: var(--text-body); line-height: 1.3; }
.recap-span { display: block; margin-top: 3px; font-size: var(--text-sub); line-height: 1.33; color: var(--label-2); font-style: italic; }

/* Photos: a tile is a soft field with a camera, never a stock picture. */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 16px 0; }
.photo-cell { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.photo-tile { display: grid; place-items: center; aspect-ratio: 1; width: 100%; border-radius: 10px; position: relative; overflow: hidden; color: rgba(255, 255, 255, 0.85); }
.photo-tile.tone-a { background: linear-gradient(160deg, #8c6b4f, #4a3522); }
.photo-tile.tone-b { background: linear-gradient(160deg, #b08b5e, #6b4a2b); }
.photo-tile.tone-c { background: linear-gradient(160deg, #6e7a86, #2f363d); }
.photo-tile .i { width: 26px; height: 26px; --icon-stroke: 1.6; opacity: 0.8; }
.photo-tile.lg { aspect-ratio: 4 / 3; border-radius: 14px; }
.photo-tile.lg .i { width: 44px; height: 44px; }
.photo-grain { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 7px); }
.photo-cap { font-size: var(--text-foot); color: var(--label-2); line-height: 1.3; }
.photo-hero { padding: 14px 16px 0; }
.photo-row { display: flex; gap: 8px; margin: 0 16px; overflow-x: auto; padding-bottom: 2px; }
.photo-row .photo-cell { flex: 0 0 104px; }

/* Search */
.search-live { cursor: text; }
.search-in { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: none; color: var(--label); font: inherit; font-size: var(--text-body); }
.search-in::placeholder { color: var(--label-2); }
.hit-kind { display: block; font-size: var(--text-foot); color: var(--label-2); font-weight: 600; letter-spacing: 0.01em; }
mark { background: var(--tint-soft); color: inherit; border-radius: 3px; padding: 0 1px; }

/* The cost sheet's derived line, as the app says it */
.derived { margin: 8px 20px 0; font-size: var(--text-foot); line-height: 1.38; color: var(--amber); }

/* Pause on Talk */
.rec-side.on .circ { background: var(--tint); color: var(--tint-ink); }

/* A sheet's title never runs under Cancel: the middle track is sized (2.6 of 4.6
   parts of the bar, the sides at least 88px), so a long title ends with an
   ellipsis and a short one shows whole. A percentage against the old auto
   track resolved against the title's own width and clipped "What It Cost" to
   "What..." (seen on the product page, 2026-10-01). */
.sheet .talk-head { grid-template-columns: minmax(44px, 1fr) minmax(0, 2.6fr) minmax(44px, 1fr); }
/* Lane 9R: the title wraps to a second line rather than end in an ellipsis (seen at 320: "Save These Changes?"). */
.sheet .talk-head .t { min-width: 0; max-width: 100%; justify-self: center; text-align: center; overflow-wrap: anywhere; text-wrap: balance; padding: 6px 0; }
/* Six filters in one bar: each takes the room its word needs. */
.hist-seg button { flex: 1 1 auto; padding: 0 6px; font-size: 12px; letter-spacing: -0.01em; }