/* keep the matrix's sticky column inside the table's own stacking context */
.stays-scroll { isolation: isolate; }
/* 住宿区域 */
.stays-dates { gap: 8px 14px; flex-wrap: wrap; margin: 4px 0 8px; }
.stays-card { cursor: pointer; padding: 12px 14px; display: grid; gap: 8px; }
.stays-card:hover, .stays-card.is-hover { border-color: var(--transit); }
.stays-card.is-current { border-color: var(--ok); box-shadow: inset 3px 0 0 var(--ok); }
.stays-card.is-active { outline: 2px solid var(--transit); outline-offset: -2px; }
.stays-card__head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.stays-card__head h3 { margin: 0; font-size: 15px; }
.stays-card__summary { margin: 0; font-size: 13px; color: var(--ink-2); }
.stays-card__kv { grid-template-columns: 5.5em 1fr; }
.stays-list { margin: 0; padding-left: 1.1em; }
.stays-list--pro li::marker { color: var(--ok); }
.stays-list--con li::marker { color: var(--warn); }
.stays-fact { padding: 3px 0; border-top: 1px dashed var(--rule); font-size: 13px; }
.stays-fact__src summary { cursor: pointer; font-size: 12px; color: var(--ink-3); }
.stays-card__foot { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.stays-links { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.stays-card__note { margin: 0; }
.stays-reason { padding: 10px 14px; display: grid; gap: 4px; border-left: 3px solid var(--ok); }
.stays-reason p { margin: 0; }

.stays-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); -webkit-overflow-scrolling: touch; }
table.stays-matrix { border-collapse: collapse; font-size: 12.5px; min-width: 100%; width: max-content; }
.stays-matrix th, .stays-matrix td { padding: 7px 9px; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); vertical-align: top; text-align: left; min-width: 110px; }
.stays-matrix th:last-child, .stays-matrix td:last-child { border-right: 0; }
.stays-matrix thead th { background: var(--paper-2); font-weight: 600; font-size: 12px; position: sticky; top: 0; }
.stays-matrix tbody th[scope="row"] { font-weight: 600; background: var(--card); position: sticky; left: 0; min-width: 130px; z-index: 1; }
.stays-corner { position: sticky; left: 0; z-index: 2; }
.stays-colhead { cursor: pointer; }
.stays-colhead.is-current { background: var(--ok-soft); }
.stays-colhead.is-hover, .stays-row.is-hover th, .stays-row:hover th { background: var(--transit-soft); }
.stays-row { cursor: pointer; }
.stays-row:hover td { background: color-mix(in srgb, var(--transit-soft) 50%, var(--card)); }
.stays-cell.is-best, .stays-row:hover td.is-best { background: var(--ok-soft); }
.stays-cell__main { font-weight: 600; }
.stays-split th { background: var(--paper-2); font-size: 12px; color: var(--ink-3); position: static !important; }
.stays-pick { width: 100%; margin-top: 4px; font-size: 12px; }

@media (max-width: 599px), (max-width: 1024px) and (orientation: portrait) {
  .stays-card__kv { grid-template-columns: 1fr; }
  .stays-card__kv dd { margin-bottom: 4px; }
  .stays-matrix th, .stays-matrix td { min-width: 96px; padding: 6px 7px; }
  .stays-matrix tbody th[scope="row"] { min-width: 100px; max-width: 120px; }
}
.stays-reason { margin-bottom: 14px; }

@media (max-width: 599px), (max-width: 1024px) and (orientation: portrait), (pointer: coarse) {
  .stays-pick { min-height: 40px; }
  .stays-card__foot .btn { min-height: 40px; }
  .stays-links a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* ---- phones and tablets ---- */
@media (pointer: coarse) {
  .stays-card .sources a, .stays-fact__src summary { display: inline-flex; align-items: center; min-height: 36px; }
}
/* iPad portrait: two columns of area cards instead of one very wide column */
@media (min-width: 640px) and (max-width: 1024px) and (orientation: portrait) {
  .stays-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
  .stays-grid > .stays-card { margin: 0; }
}
.stays-swipehint { display: none; margin: 0 0 6px; }
@media (max-width: 599px), (max-width: 1024px) and (orientation: portrait) {
  .stays-swipehint { display: block; }
  .stays-matrix tbody th[scope="row"] { min-width: 96px; max-width: 108px; font-size: 12px; }
  .stays-matrix th, .stays-matrix td { min-width: 128px; }
  .stays-matrix .stays-pick { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
  .stays-scroll { max-width: 100%; overscroll-behavior-x: contain; }
}
@media (min-width: 640px) and (max-width: 1024px) and (orientation: portrait) {
  .stays-matrix th, .stays-matrix td { min-width: 110px; }
}