/* The conversation, the map view and browse (docs/r2/DESIGN.md §6.1–6.4). Tokens only.
   The field, messages, rows, chips and the segmented control are components (components.css);
   this file places them and adds what only these pages have. */

/* The column: 720 wide, centred. One field; the thread scrolls behind it. */
.convo-col { width: 100%; max-width: calc(45rem + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.home-q { margin-top: max(var(--s8), 20dvh); max-width: 12ch; }
.thread:empty { display: none; }
.convo:not(.in-thread) .ask-dock, .convo-page .ask-dock { position: static; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.convo:not(.in-thread) .ask-dock { margin-block: var(--s6) var(--s3); }
.in-thread .convo-col { display: flex; flex-direction: column; min-height: calc(100dvh - var(--nav-h)); }
.in-thread .thread { flex: 1; padding-block: var(--s6) var(--s7); }
.in-thread .ask-dock { margin-inline: calc(-1 * var(--gutter)); }
.in-thread [data-home-only], .in-thread .foot, .in-thread .skip { display: none; }
.skip-latest:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-latest:focus { display: inline-block; margin-bottom: var(--s2); font: var(--t-subhead); }

/* A turn: your words in a bubble, the reply as plain text, then what it found. */
.turn { scroll-margin-top: calc(var(--nav-h) + var(--s3)); }
.turn:focus { outline: 0; }
.turn.is-new { animation: turn-in var(--dur-state) var(--ease-out); }
@keyframes turn-in { from { opacity: 0; transform: translateY(8px); } }
.turn-note, .turn-past, .thread-note { font: var(--t-footnote); color: var(--label-2); }
.thread-note { text-align: center; margin-bottom: var(--s6); }
.turn--past .turn-text { color: var(--label-2); }
.turn-ai-wait { display: block; margin-top: var(--s2); }
.turn-again { margin: calc(-1 * var(--s2)) calc(-1 * var(--s2)); font: var(--t-subhead); }
.turn-more { margin-left: calc(-1 * var(--s2)); }
.turn-seg { max-width: 15rem; }
.turn-btns { display: flex; flex-wrap: wrap; gap: var(--s2); }
.turn-btns > .btn { flex: 1 1 8rem; min-width: 0; font: var(--t-subhead); font-weight: 600; }
.turn-btns > .btn-primary { flex-basis: 100%; font: var(--t-headline); }

/* What was understood: filter chips under the latest answer; the whole chip takes the filter off. */
.turn-tokens { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tok { display: flex; }
.tok-chip { gap: var(--s2); padding-right: var(--s2); }
.tok-x { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; color: var(--label-2); font: var(--t-headline); line-height: 1; }
.tok-chip:active { background: var(--fill-press); }
.turn-compact > * + * { margin-top: var(--s3); }

/* Rows. Without a photograph the text takes the full width. */
.rc-list { border-top: var(--hairline) solid var(--separator); border-bottom: var(--hairline) solid var(--separator); }
.rc--text { grid-template-columns: minmax(0, 1fr); }
.rc-head { display: block; font: var(--t-headline); letter-spacing: var(--k-headline); }
.rc-n { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; margin-right: var(--s2); padding-inline: var(--s1); border-radius: var(--r-full); background: var(--label); color: var(--bg); font: var(--t-footnote); font-weight: 600; font-variant-numeric: tabular-nums; vertical-align: 2px; }
.rc.is-on { background: var(--bg-2); }
.rc-items { margin-top: var(--s1); }
.rc-items--solo { border-top: var(--hairline) solid var(--separator); border-bottom: var(--hairline) solid var(--separator); }
.rc-item { display: flex; align-items: center; gap: var(--s2); min-height: var(--target); }
.rc-item + .rc-item, .rc-items:not(.rc-items--solo) > .rc-item:first-child { border-top: var(--hairline) solid var(--separator); }
.rc-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; min-height: var(--target); padding-block: var(--s2); color: var(--label); }
.rc-item-main:hover { text-decoration: none; }
.rc-item-name { font: var(--t-subhead); font-weight: 600; }
.rc-item-meta { font: var(--t-footnote); color: var(--label-2); }
.rc-item-price { flex: none; font: var(--t-subhead); }
.rc-item.is-off .rc-item-name, .rc-item.is-off .rc-item-price { color: var(--label-3); font-weight: 400; }
.rc-add { flex: none; margin-right: calc(-1 * var(--s3)); }
.rc-act { flex: none; margin-right: calc(-1 * var(--s2)); font: var(--t-subhead); }
.rc-more, .rc-dir { font: var(--t-footnote); }
.rc-more a { display: inline-flex; align-items: center; min-height: var(--target); }
.rc-dir { display: flex; align-items: center; gap: var(--s3); margin-left: calc(-1 * var(--s2)); }
.rc-slot > .turn-btns { margin-top: var(--s2); }
.mark { padding: 0 var(--s1); border: var(--hairline) solid var(--outline); border-radius: var(--r-xs); font: var(--t-caption); letter-spacing: var(--k-caption); color: var(--label-2); text-decoration: none; }
.rc-thumbs { display: flex; gap: var(--s2); margin-top: var(--s2); }
.rc-thumbs li { flex: 0 1 4.5rem; min-width: 0; }
.rc-thumbs--wide li { flex-basis: 7rem; }
.rc-thumbs a { display: block; color: var(--label); }
.rc-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-s); }
.rc-thumbs--wide img { aspect-ratio: 16 / 10; }
.rc-thumb-name, .rc-thumb-price { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--t-footnote); }
.rc-thumb-name { margin-top: var(--s1); }
.rc-thumb-price { color: var(--label-2); }
.rc-quote { margin-top: var(--s2); padding-left: var(--s3); border-left: 2px solid var(--separator); }
.rc-quote p { font: var(--t-reading); letter-spacing: var(--k-reading); }
.rc-quote cite { display: block; font: var(--t-footnote); font-style: normal; }
.rc-quote cite a { display: inline-flex; align-items: center; min-height: var(--target); }

/* Home, before the first question: things to ask, what is open, what to browse. */
.home-extra > .chips { margin-bottom: var(--s2); }
.home-sec { margin-top: var(--section-gap); }
.home-sec > h2, .home-sec > .split { margin-bottom: var(--s3); }
.home-join { padding-top: var(--s6); border-top: var(--hairline) solid var(--separator); }
.home-resume { margin-top: var(--s4); border-block: var(--hairline) solid var(--separator); }
.where { position: relative; }
.where > summary { display: inline-flex; }
.where-list { display: flex; flex-wrap: wrap; gap: var(--s2); padding-block: var(--s3); }
.split > .where { text-align: right; }
.split > .where .where-list { justify-content: flex-end; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s3); }
.tile { display: block; color: var(--label); }
.tile:hover { text-decoration: none; }
.tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-m); }
.tile-name { display: block; min-height: var(--target); padding-top: var(--s2); font: var(--t-headline); letter-spacing: var(--k-headline); }  /* names start on one line across a row, whether they run to one line or two */
.tile:not(:has(img)) .tile-name { border-top: var(--hairline) solid var(--separator); }
.tiles-more { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
@media (min-width: 37.5rem) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Wide screens keep one column and one left edge: the question, the field, what is open and the tiles all start on it. */
@media (min-width: 64rem) {
  .home-q { margin-top: 18dvh; max-width: none; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Browse: a saved question laid out as shelves. */
.convo-page { padding-block: var(--s6) var(--s9); }
.convo-page > h1 { margin-bottom: var(--s3); }
.browse > .chips { margin-top: var(--s2); }
.browse-list { border-block: var(--hairline) solid var(--separator); }
.shelf { margin-top: var(--s7); }
.shelf > .split { margin-bottom: var(--s2); }
.shelf-row { display: flex; gap: var(--s3); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scroll-snap-type: x proximity; }
.shelf-row::-webkit-scrollbar { display: none; }
.shelf-card { flex: 0 0 8.75rem; min-width: 0; scroll-snap-align: start; }
.shelf-card a { display: block; color: var(--label); }
.shelf-card a:hover { text-decoration: none; }
.shelf-card img { width: 8.75rem; height: 8.75rem; object-fit: cover; border-radius: var(--r-m); }
.shelf-name { display: block; margin-top: var(--s2); font: var(--t-subhead); font-weight: 600; }
.shelf-card .status, .shelf-card > .dim { display: flex; font: var(--t-footnote); }
.shelf-card--text { padding-top: var(--s3); border-top: var(--hairline) solid var(--separator); }
.shelf-card--text .shelf-name { margin-top: 0; min-height: var(--target); }
.browse .ask-dock { margin-top: var(--s8); }
.browse > .home-sec:first-of-type { margin-top: var(--s5); }
/* A shelf on a wide screen is one row of five on the column's own edge — nothing scrolls sideways; "See all" has the rest. */
@media (min-width: 64rem) {
  .shelf-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s5) var(--s3); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .shelf-card { min-width: 0; }
  .shelf-card img { width: 100%; height: auto; aspect-ratio: 1; }
  .shelf--more .shelf-card:nth-child(n + 6) { display: none; }
}

/* An error page still answers: the same field, sent as a link (no session, no token needed). */
.err-lead { margin-top: var(--s6); font: var(--t-headline); letter-spacing: var(--k-headline); }
.err-ask { margin-top: var(--s3); }
.err-ask .ask { align-items: center; }
.err-ask input { flex: 1; min-width: 0; min-height: 3.25rem; padding: 0; border: 0; background: none; outline: 0; color: inherit; font: var(--t-body); }
.err-ask input::placeholder { color: var(--label-3); opacity: 1; }
.err-back { margin-top: var(--s4); margin-left: calc(-1 * var(--s2)); }