/* Sprint 6: the listing card and its detail panel (_row.html, _detail.html). Loaded after style.css.
   Sizes come from the Sprint 6 tokens (style.css) with their fallbacks; colours only through the existing tokens, so
   the light theme carries over: amber text is --differ (as on style.css's "Prices differ" chips), violet is
   --violet-text (as on its Auction chips), so the light theme needs readable values for those two. */

/* ------------------------------------------------------------------ the card (article.row.cd) */

.row.cd {
  display: block; padding: 0; gap: 0;
  container: card / inline-size;
  background: var(--surface); border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius, 16px);
  color: var(--text); font-size: var(--fs-body, 17px); line-height: 1.4;
}
.row.cd.new, .row.cd.alert, .row.cd.stable { background: var(--surface); border-color: var(--line-strong, var(--line)); }
.row.cd:hover { border-color: var(--muted); }
.row.cd.is-open { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.row.cd.dismissed { border-style: dashed; background: transparent; }
.row.cd.dismissed .cd-photo { opacity: .55; }

/* the stretched link: a tap anywhere on the card that is not a link or button opens the detail panel */
.cd-hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; -webkit-tap-highlight-color: transparent; }
.cd-hit:focus { outline: none; }
.cd-in a, .cd-in button, .cd-actions { position: relative; z-index: 2; }

.cd-in {
  display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 16px 20px; align-items: start; padding: 16px;
}
.cd-photo {
  width: 160px; height: 120px; border-radius: 10px; overflow: hidden; background: var(--surface-2);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.cd-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 12px; min-width: 0; }
.row.cd .title, .dp-title { font-size: var(--fs-title, 20px); font-weight: 600; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.row.cd .title a { display: inline-block; padding: 10px 0; margin: -10px 0; color: var(--text); }
.row.cd .title a:hover { color: var(--accent); }

/* chips on the card and in the panel: sentence case, 15 px, no tracking */
.chip.cd-st, .chip.cd-vd {
  height: auto; min-height: 30px; padding: 3px 12px; border-radius: var(--pill); flex: none;
  font-size: var(--fs-small, 15px); font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.3;
  white-space: nowrap;
}
.chip.cd-st.good, .chip.cd-vd.good { background: var(--tint-good); color: var(--good-text); }
.chip.cd-st.new { background: var(--tint-new); color: var(--new-text); }
.chip.cd-st.auction { background: var(--tint-violet); color: var(--violet-text, #C4B5FD); }
.chip.cd-st.red, .chip.cd-vd.high { background: var(--tint-red); color: var(--red-text); }
.chip.cd-st.amber { background: var(--tint-differ, rgba(242, 140, 40, .16)); color: var(--differ, #F5A55A); }
.chip.cd-st.muted, .chip.cd-vd.muted { background: var(--surface-2); color: var(--muted); }

/* the six facts: price block (price, verdict, auction figure) | hours, place, seller */
.cd-facts { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 6px 24px; align-items: start; }
.cd-money { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cd-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; line-height: 1.15; }
.cd-amt { font-size: var(--fs-price, 28px); font-weight: 500; color: var(--text); }
.cd-amt-text { font-size: var(--fs-body, 17px); font-weight: 500; color: var(--text); line-height: 1.35; }
.cd-was { font-size: var(--fs-small, 15px); color: var(--muted); }
.cd-verdict { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-sold { font-size: var(--fs-small, 15px); color: var(--muted); }
.cd-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; min-width: 0; font-size: var(--fs-body, 17px); }
.cd-list li { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-list abbr { text-decoration: none; }
.cd-sites { color: var(--muted); }
.cd-warn { color: var(--differ, #F5A55A); }

/* actions: View ad and the star on top, Details and Delete under them; 48 px, 16 px apart */
.cd-actions {
  display: grid; grid-template-columns: auto auto; grid-template-areas: "view star" "more del"; gap: 16px;
  align-items: center; justify-items: stretch;
}
.cd-actions .btn { height: var(--tap-lg, 48px); min-width: var(--tap-lg, 48px); padding: 0 18px; font-size: var(--fs-body, 17px); }
.cd-actions .btn.icon { width: var(--tap-lg, 48px); padding: 0; }
.cd-actions .btn.icon .ic { width: 22px; height: 22px; }
.cd-view { grid-area: view; }
.cd-actions .star-wrap { grid-area: star; justify-self: end; display: inline-flex; }
/* the star's own rules in style.css are inside the unclosed phone-only @media block (see the panel section) */
.cd-actions .btn.star { color: var(--muted); border-color: var(--line-strong, var(--line)); }
.cd-actions .btn.star:hover { color: var(--new-text); background: var(--tint-new); }
.cd-actions .btn.star.on { color: var(--new-text); border-color: var(--new-text); background: var(--tint-new); }
.cd-actions .star-wrap .sh-st { display: none; } /* the shortlist status is in the panel; the star shows it is on */
.cd-more { grid-area: more; }
.cd-more.htmx-request { opacity: .6; }
.cd-del { grid-area: del; justify-self: end; }
.cd-restore { gap: 8px; }

/* narrow card (the list beside the open panel, phones): photo | body, the actions in a row underneath */
@container card (max-width: 760px) {
  .cd-in { grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "photo body" "acts acts"; gap: 12px 16px; padding: 14px; }
  .cd-photo { grid-area: photo; width: 112px; height: 84px; }
  .cd-body { grid-area: body; gap: 8px; }
  .cd-head { flex-wrap: wrap; }
  .cd-facts { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cd-money { flex-flow: row wrap; align-items: center; gap: 6px 12px; }
  .cd-sold { flex-basis: 100%; }
  /* hours · place on one line when they fit; a dot that would start a line falls in the clipped margin */
  .cd-facts { overflow: hidden; }
  .cd-list { flex-flow: row wrap; gap: 2px 0; margin-left: -20px; }
  .cd-list li { position: relative; padding-left: 20px; }
  .cd-list li::before { content: "·"; position: absolute; left: 0; width: 20px; text-align: center; color: var(--muted); }
  .cd-list .cd-seller { flex-basis: 100%; }
  .cd-actions { grid-area: acts; display: flex; flex-wrap: wrap; gap: 16px; }
  .cd-view { order: 1; }
  .cd-more { order: 2; }
  .cd-actions .star-wrap { order: 3; margin-left: auto; }
  .cd-del { order: 4; }
}
@container card (max-width: 420px) {
  .cd-in { grid-template-columns: 88px minmax(0, 1fr); }
  .cd-photo { width: 88px; height: 66px; }
  .cd-actions { flex-wrap: nowrap; gap: 12px; }
  .cd-actions .cd-view, .cd-actions .cd-more { flex: 1 1 0; min-width: 0; padding: 0 10px; }
  .cd-actions .star-wrap { margin-left: 0; }
  .cd-view .ic { display: none; }
  .cd-list { flex-direction: column; margin-left: 0; }
  .cd-list li { padding-left: 0; white-space: normal; }
  .cd-list li::before { content: none; }
}

/* ------------------------------------------------------------------ the Undo row after Delete (_removed.html) */

.row.removed {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 5px 6px 5px 20px; overflow: hidden;
  border: 1px dashed var(--line-strong, var(--line)); background: var(--surface-2); color: var(--text);
  font-size: var(--fs-body, 17px);
  transition: height .3s ease, min-height .3s ease, opacity .3s ease, padding .3s ease, margin .3s ease, border-width .3s ease;
}
.rm-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-name { font-weight: 600; }
.rm-ads { color: var(--muted); }
.rm-undo { height: var(--tap, 44px); min-width: 88px; padding: 0 18px; font-size: var(--fs-body, 17px); }
.row.removed.rm-gone { height: 0 !important; min-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; opacity: 0; margin-top: -10px; }

/* ------------------------------------------------------------------ the list | detail split (_detail_host.html) */

.list-split { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 16px; row-gap: 0; align-items: start; }
.list-split > :not(.detail) { grid-column: 1; min-width: 0; }
.list-split > :not(.detail) + :not(.detail):not(script) { margin-top: 16px; }
.list-split:has(> .detail:not([hidden])) { grid-template-columns: minmax(0, 1fr) 640px; }
.list-split > .detail { grid-column: 2; grid-row: 1 / span 8; }

.detail {
  position: sticky; top: var(--topbar-h, 72px); width: 640px;
  max-height: calc(100vh - var(--topbar-h, 72px) - 16px);
  overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--surface); border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius, 16px);
  color: var(--text); font-size: var(--fs-body, 17px); line-height: 1.5;
}
@supports (height: 100dvh) {
  .detail { max-height: calc(100dvh - var(--topbar-h, 72px) - 16px); }
}
.detail[hidden] { display: none; }

@media (max-width: 1023px) {
  .list-split:has(> .detail:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .list-split > .detail { grid-column: auto; grid-row: auto; }
  .detail {
    position: fixed; top: var(--topbar-h, 72px); left: 0; right: 0; bottom: 0; z-index: 40; width: auto;
    max-height: none; border-radius: 0; border-width: 1px 0 0;
  }
  @supports (height: 100dvh) { .detail { max-height: none; } }
  html.detail-open, html.detail-open body { overflow: hidden; }
}

/* ------------------------------------------------------------------ the detail panel (_detail.html) */

.dp { display: flex; flex-direction: column; gap: 20px; padding: 0 24px 28px; min-width: 0; }
.dp-loading { padding: 24px; color: var(--muted); }
.dp-bar {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 -24px; padding: 10px 12px 10px 24px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.dp-title:focus { outline: none; }
.dp-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.icon.dp-close { flex: none; width: var(--tap-lg, 48px); height: var(--tap-lg, 48px); padding: 0; font-size: 26px; }
.dp-top { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
.dp-top.noimg { grid-template-columns: minmax(0, 1fr); }
.dp-photo {
  display: block; width: 240px; height: 180px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-2);
}
.dp-sum { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dp-status { display: flex; }
.dp .cd-facts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.dp .cd-list li { white-space: normal; overflow: visible; }
.dp-acts { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.dp-acts:empty { display: none; }
.dp-acts .btn, .dp-foot .btn { height: var(--tap-lg, 48px); padding: 0 20px; font-size: var(--fs-body, 17px); }
.dp-lead { font-size: var(--fs-body, 17px); color: var(--text); }
.dp-sec { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 20px; border-top: 1px solid var(--line); }
.dp-h { font-size: var(--fs-body, 17px); font-weight: 600; color: var(--text); }
.dp-note { font-size: var(--fs-small, 15px); color: var(--muted); }
.dp-note a { display: inline-flex; align-items: center; min-height: var(--tap, 44px); }
.dp-links { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.dp-links li + li { border-top: 1px solid var(--line); }
.dp-links a, .dp-nolink {
  display: block; min-height: var(--tap-lg, 48px); padding: 12px 0;
  font-size: var(--fs-small, 15px); line-height: 1.5; color: var(--text); overflow-wrap: anywhere;
}
.dp-site { margin-right: 6px; }
.dp-links a { color: var(--accent); }
.dp-links a:hover { color: var(--accent-hover); }
.dp-links .rg, .dp-site { font-weight: 600; }
.dp-links .hist { color: var(--muted); font-style: italic; }
.dp-alt { color: var(--text); }
.dp-differs { color: var(--differ, #F5A55A); }
.dp-more > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tap-lg, 48px);
  cursor: pointer; list-style: none;
}
.dp-more > summary::-webkit-details-marker { display: none; }
.dp-more > summary .ic { flex: none; color: var(--muted); transition: transform .15s; }
.dp-more[open] > summary .ic { transform: rotate(180deg); }
.dp-more > summary:hover .dp-h { color: var(--accent); }
.dp-sum-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dp-more > .dp-load { margin-top: 8px; }
.dp-sentences { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0 0 0 22px; }
.dp-fit { color: var(--text); }
.dp-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; margin: 0; }
.dp-dl > div { display: contents; }
.dp-dl dt { padding-top: 2px; font-size: var(--fs-label, 14px); color: var(--muted); }
.dp-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.dp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 20px; border-top: 1px solid var(--line); }
.dp-restore, .dp-delete { gap: 8px; }

/* the partials the panel loads (_comps.html, _details_body.html, _fuzzy.html) on the panel's scale */
.detail .comps-inner { gap: 10px; }
.detail .comps-summary { font-size: var(--fs-body, 17px); color: var(--text); }
.detail .comps-h { margin-top: 8px; font-size: var(--fs-body, 17px); font-weight: 600; }
.detail .comps-group { font-size: var(--fs-label, 14px); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
.detail .comp { gap: 6px; padding: 12px 0; }
.detail .comp-title { display: inline-block; padding: 10px 0; margin: -10px 0; font-size: var(--fs-body, 17px); color: var(--accent); }
.detail .comp-facts { gap: 4px 18px; font-size: var(--fs-small, 15px); }
.detail .comp-facts .k, .detail .comp-line .k { font-size: var(--fs-label, 14px); font-weight: 500; letter-spacing: 0; text-transform: none; }
.detail .comp-line { font-size: var(--fs-small, 15px); }
.detail .comps-foot { font-size: var(--fs-small, 15px); color: var(--muted); }
.detail .comps-foot a, .detail .excerpts > summary { display: inline-flex; align-items: center; min-height: var(--tap, 44px); }
.detail .excerpts { font-size: var(--fs-small, 15px); }
.detail .excerpts dt { font-size: var(--fs-label, 14px); letter-spacing: 0; text-transform: none; }
.detail .chip:not(.cd-st):not(.cd-vd) {
  height: auto; min-height: 26px; padding: 2px 10px; font-size: var(--fs-label, 14px); letter-spacing: 0; text-transform: none;
}
/* _details_body.html in full here: its style.css rules sit inside an unclosed phone-only @media block (style.css,
   after ".digest-frame { height: 420px; }"), so on the iPad they do not apply. */
.detail .dt-inner { display: flex; flex-direction: column; gap: 14px; }
.detail .dt-photos { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.detail .dt-photos a { display: flex; flex-direction: column; gap: 4px; width: 132px; font-size: var(--fs-label, 14px); color: var(--muted); }
.detail .dt-photos img {
  display: block; width: 132px; height: 99px; object-fit: cover; border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--line); background: var(--surface-2);
}
.detail .dt-photos a:hover img { border-color: var(--accent); }
.detail .dt-ad { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.detail .dt-ad-head { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-size: var(--fs-small, 15px); color: var(--muted); }
.detail .dt-tag { font-size: var(--fs-label, 14px); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--accent); }
.detail .dt-facts { color: var(--text); }
.detail .dt-open { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; min-height: var(--tap, 44px); font-size: var(--fs-small, 15px); }
.detail .dt-attrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px 16px; margin: 0; }
.detail .dt-attrs div { min-width: 0; }
.detail .dt-attrs dt { font-size: var(--fs-label, 14px); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.detail .dt-attrs dd { margin: 2px 0 0; font-size: var(--fs-small, 15px); color: var(--text); overflow-wrap: anywhere; }
.detail .dt-desc { font-size: var(--fs-body, 17px); line-height: 1.5; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.detail .dt-none, .detail .dt-inner > p { font-size: var(--fs-small, 15px); color: var(--muted); }
.detail .dt-none { font-style: italic; }
.detail details.comps { font-size: var(--fs-small, 15px); color: var(--muted); }
.detail details.comps > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: var(--tap-lg, 48px);
  font-size: var(--fs-body, 17px); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text);
}
.detail .comps-n { font-size: var(--fs-small, 15px); font-weight: 400; color: var(--muted); }
.detail .fz-range { font-size: var(--fs-body, 17px); }
.detail .fz-conf { min-height: 26px; }
.detail .comps-body { margin-top: 6px; padding: 14px 16px; }
.detail .fz-body p, .detail .fz-rules, .detail .fz-adj { font-size: var(--fs-small, 15px); }
.detail .fz-tag { width: 64px; font-size: var(--fs-label, 14px); letter-spacing: 0; text-transform: none; }
.detail .fz-table, .detail .fz-table th, .detail .fz-table td { font-size: var(--fs-small, 15px); }
.detail .fz-table thead th { font-size: var(--fs-label, 14px); letter-spacing: 0; text-transform: none; }
.detail .comp-list .comp-line a { display: inline-block; padding: 10px 0; margin: -10px 0; }

@media (max-width: 720px) {
  .dp { padding: 0 16px 24px; }
  .dp-bar { margin: 0 -16px; padding-left: 16px; }
  .dp-top { grid-template-columns: minmax(0, 1fr); }
  .dp-photo { width: 100%; height: auto; aspect-ratio: 4 / 3; }
}