/* "Finish your request" on the home page (includes/class-ts-site-resume.php, assets/js/ts-resume.js), in the design
   system's tokens from travelscowt-web.css. Picture Ian approved on 2026-10-08: prototypes/resume-card/ in the vault.
   On a laptop the card copies the search bar above it: 66 high, its round ends and its shadow, a round 48 photo and a
   round × each 9 in from the end, as the Search button sits in the bar, and the card centered on the bar (Ian's pick).
   On a phone it copies the search box: its width and its 16 corners, the resort name on up to two lines, the dates
   under it. No orange: Search stays the one action. Fold into travelscowt-web.css at the next design system pass.
   Design system check before 0.3.50 (the booking request page chat, 2026-10-08): the bar's own build, its 1px ink-200 border
   and 8 of padding, so the photo and the × still sit 9 from the outer edge with every value on the spacing scale (it was 9
   of padding and no border); the dates in ink-700 at 500, the lightest ink and weight a guest reads (was ink-600 at 400). */

html:not(#ts):not(#ts) .ts-resume { display: flex; align-items: center; width: fit-content; max-width: 100%; height: 66px; margin: var(--ts-space-4) auto 0; background: var(--ts-canvas-raised); border: 1px solid var(--ts-ink-200); border-radius: var(--ts-radius-pill); box-shadow: var(--ts-shadow-md); font-family: var(--ts-font-web); color: var(--ts-ink-900); text-align: left; box-sizing: border-box; }
html:not(#ts):not(#ts) .ts-resume[hidden] { display: none; } /* the card sets display, so [hidden] needs saying */
html:not(#ts):not(#ts) .ts-resume__link { display: flex; align-items: center; gap: var(--ts-space-3); min-width: 0; height: 100%; padding: var(--ts-space-2) var(--ts-space-1) var(--ts-space-2) var(--ts-space-2); color: inherit; text-decoration: none; border-radius: var(--ts-radius-pill) 0 0 var(--ts-radius-pill); box-sizing: border-box; }
html:not(#ts):not(#ts) .ts-resume__link:focus-visible, html:not(#ts):not(#ts) .ts-resume__x:focus-visible { outline: 2px solid var(--ts-brand-600); outline-offset: 2px; }
html:not(#ts):not(#ts) .ts-resume__photo { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; overflow: hidden; border-radius: 50%; background: var(--ts-ink-100); }
html:not(#ts):not(#ts) .ts-resume__photo.is-empty { background: var(--ts-brand-50); color: var(--ts-brand-600); }
html:not(#ts):not(#ts) .ts-resume__photo img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; border-radius: 0; }
html:not(#ts):not(#ts) .ts-resume__tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html:not(#ts):not(#ts) .ts-resume__tx b { font-size: var(--ts-text-body); font-weight: 600; line-height: 1.3; color: var(--ts-ink-900); }
html:not(#ts):not(#ts) .ts-resume__d { display: block; min-width: 0; font-size: var(--ts-text-body-sm); font-weight: 500; line-height: 1.4; color: var(--ts-ink-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:not(#ts):not(#ts) .ts-resume__go { flex: none; display: flex; margin-left: var(--ts-space-1); color: var(--ts-ink-900); }
html:not(#ts):not(#ts) .ts-resume__x { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 var(--ts-space-2) 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ts-ink-500); cursor: pointer; box-shadow: none; }
/* Hover as the search bar above it draws it, Airbnb's (2026-10-08): the link fills with a flat ink-100 pill the card's full
   inner height, 64, round at both ends, and the × fills ink-100. The title is no longer underlined. Only where a pointer
   hovers: a tap would leave it stuck. */
@media (hover: hover) and (min-width: 768px) {
  html:not(#ts):not(#ts) .ts-resume__link, html:not(#ts):not(#ts) .ts-resume__x { transition: background var(--ts-duration-fast) var(--ts-ease-standard), color var(--ts-duration-fast) var(--ts-ease-standard); }
  html:not(#ts):not(#ts) .ts-resume__link:hover { background: var(--ts-ink-100); border-radius: var(--ts-radius-pill); }
  html:not(#ts):not(#ts) .ts-resume__x:hover { background: var(--ts-ink-100); color: var(--ts-ink-900); }
}
@media (prefers-reduced-motion: no-preference) {
  html:not(#ts):not(#ts) .ts-resume { animation: ts-resume-in var(--ts-duration-normal) ease-out both; }
}
@keyframes ts-resume-in { from { opacity: 0; transform: translateY(4px); } }

/* Phone: the search box's width and corners, the name and the dates on their own lines */
@media (max-width: 767px) {
  html:not(#ts):not(#ts) .ts-resume { width: 100%; height: auto; align-items: flex-start; border-radius: var(--ts-radius-lg); }
  html:not(#ts):not(#ts) .ts-resume__link { flex: 1; height: auto; padding: var(--ts-space-3) 0 var(--ts-space-3) var(--ts-space-3); border-radius: var(--ts-radius-lg) 0 0 var(--ts-radius-lg); }
  html:not(#ts):not(#ts) .ts-resume__photo { width: 64px; height: 64px; border-radius: var(--ts-radius-md); }
  html:not(#ts):not(#ts) .ts-resume__d { white-space: normal; overflow: visible; }
  html:not(#ts):not(#ts) .ts-resume__n { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  html:not(#ts):not(#ts) .ts-resume__w { display: block; }
  html:not(#ts):not(#ts) .ts-resume__sep { display: none; }
  html:not(#ts):not(#ts) .ts-resume__go { display: none; }
  html:not(#ts):not(#ts) .ts-resume__x { width: 44px; height: 44px; margin: var(--ts-space-1) var(--ts-space-1) 0 0; }
}