/* guests — page-scoped styles. Owned by this page only.
   Shared primitives live in planner/planner.css and are READ-ONLY from here.
   Scope every rule under [data-view="guests"] so it cannot leak to another page.

   Four layouts, one markup:
     ≥1440     table fits; detail is Tags | Hotel+Rooms | What they told us
     ≥1024     table fits; detail is the editable column beside the read-only one
     640…1023  table scrolls sideways with the name column pinned; detail stacks
     <640      the table stops being a table and becomes one card per guest
   ─────────────────────────────────────────────────────────────────────── */

/* ── stat band ─────────────────────────────────────────────────────────── */
/* Eight tiles is too many to read. Four are the numbers you act on; the other
   four are context for them and, on a phone, become one running line. */
[data-view="guests"] .stats__more{display:contents}
@media (max-width:639px){
  [data-view="guests"] .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-view="guests"] .stats__more{display:flex;flex-wrap:wrap;gap:0 var(--s4);
    grid-column:1/-1;background:var(--surface);padding:var(--s2) var(--s4)}
  [data-view="guests"] .stats__more .stat{display:flex;flex-direction:row-reverse;
    align-items:baseline;gap:.3rem;padding:.1rem 0;background:none}
  [data-view="guests"] .stats__more .stat b{font-size:.9375rem;line-height:1.4}
  [data-view="guests"] .stats__more .stat span{margin:0}
}

/* ── panel head ────────────────────────────────────────────────────────── */
[data-view="guests"] .panel__head .hint{margin-top:.15rem}

/* Rules are a list, not a paragraph: two parallel statements about how seating
   reads this screen, sitting next to the controls they describe. */
[data-view="guests"] .rules{margin:var(--s3) 0 var(--s4);padding-left:1.05rem;
  color:var(--muted);font-size:var(--ft-meta);line-height:var(--lh-ui);max-width:var(--w-prose)}
[data-view="guests"] .rules li{margin-bottom:.15rem}

/* ── toolbar ───────────────────────────────────────────────────────────── */
/* One row where there is room for one; below that an explicit two-row grid,
   because flex-wrap put the count on a line of its own at half the widths. */
@media (max-width:1199px){
  [data-view="guests"] .toolbar{display:grid;gap:var(--s2) var(--s3);
    grid-template-columns:repeat(3,minmax(0,1fr)) auto}
  [data-view="guests"] .toolbar input[type=search]{grid-column:1/4;width:100%;flex:none}
  [data-view="guests"] .toolbar select{width:100%}
  [data-view="guests"] .toolbar .count{grid-column:4;grid-row:1;align-self:center;margin-left:0}
}
@media (max-width:639px){
  [data-view="guests"] .toolbar{grid-template-columns:repeat(3,minmax(0,1fr))}
  [data-view="guests"] .toolbar input[type=search]{grid-column:1/-1}
  [data-view="guests"] .toolbar .count{grid-column:1/-1;grid-row:auto}
}

/* ── table, all widths ─────────────────────────────────────────────────── */
[data-view="guests"] .dt--guests .who b{display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* Contact is a link but not a decorated one: a column of rust underlines would
   outrank the guest's name. */
[data-view="guests"] td[data-col=contact] a{color:inherit;text-decoration:none}
[data-view="guests"] td[data-col=contact] a:hover,
[data-view="guests"] td[data-col=contact] a:focus-visible{text-decoration:underline}
[data-view="guests"] .tablewrap:focus-visible{outline:2px solid var(--terracotta);
  outline-offset:-2px}

/* ── detail row ────────────────────────────────────────────────────────── */
/* What you decide and what you were told are the two halves of this panel, so
   the read-only section owns a full-height column of its own rather than being
   the fourth of four equal boxes. */
[data-view="guests"] .detail-grid{grid-template-columns:minmax(0,1fr)}
[data-view="guests"] .detail-sec--said .facts{gap:var(--s3) var(--s5)}

/* Two columns is a plain flow: pinning the read-only section to a column of its
   own only pays once there is a third column to pin it to — at 1280 it left
   650px of white beside a 190px box. */
@media (min-width:1024px){
  [data-view="guests"] .detail-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  [data-view="guests"] .detail-sec--said .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1440px){
  [data-view="guests"] .detail-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr)}
  [data-view="guests"] .detail-sec--tags{grid-column:1;grid-row:1/span 2}
  [data-view="guests"] .detail-sec--hotel,
  [data-view="guests"] .detail-sec--rooms{grid-column:2}
  [data-view="guests"] .detail-sec--said{grid-column:3;grid-row:1/span 2}
  [data-view="guests"] .detail-sec--said .facts{grid-template-columns:minmax(0,1fr)}
}

/* ── 640…1023: the table scrolls, the name does not ────────────────────── */
@media (max-width:1023px){
  /* the headcount is already spelled out in the meta line under the name */
  [data-view="guests"] [data-col=party]{display:none}
}
@media (min-width:640px) and (max-width:1023px){
  /* eight tiles, four across: two full rows instead of six plus a stub */
  [data-view="guests"] .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* buy the width back from the gutters before taking it from a name */
  [data-view="guests"] .dt--guests th,
  [data-view="guests"] .dt--guests td{padding-inline:var(--s2)}
  [data-view="guests"] .dt--guests th[data-col=guest],
  [data-view="guests"] .dt--guests td[data-col=guest]{position:sticky;left:0;z-index:1;
    min-width:11rem;background:var(--surface);box-shadow:1px 0 0 var(--line)}
  [data-view="guests"] .dt--guests th[data-col=guest]{z-index:3;background:var(--sand)}
  [data-view="guests"] .dt--guests tbody tr:hover td[data-col=guest]{background:var(--row-hover)}
  [data-view="guests"] .dt--guests tbody tr[aria-selected=true] td[data-col=guest]{
    background:var(--row-active)}
  /* the detail cell is as wide as the whole scrolling table; pin its contents
     to the visible edge so an open row never has to be scrolled to be read */
  [data-view="guests"] .dt--guests tr.detail > td > .detail-grid{position:sticky;left:0;
    width:calc(100vw - 2*var(--gutter) - 2*var(--s5) - 2px)}
}

/* ── <640: one card per guest ──────────────────────────────────────────── */
/* An eight-column table on a 390px screen is 851px of sideways scrolling. The
   same markup, laid out as cards, is 390px wide and keeps every control and
   every delegated listener exactly where it was. */
@media (max-width:639px){
  [data-view="guests"] .tablewrap{overflow-x:visible;padding:var(--s3)}
  [data-view="guests"] .dt--guests,
  [data-view="guests"] .dt--guests tbody,
  [data-view="guests"] .dt--guests tr,
  [data-view="guests"] .dt--guests td{display:block}
  [data-view="guests"] .dt--guests thead{display:none}
  [data-view="guests"] .dt--guests td[data-col]{width:auto;height:auto;padding:0;border:0;
    white-space:normal}
  [data-view="guests"] .dt--guests td[data-col=party]{display:none}

  [data-view="guests"] .dt--guests tbody tr[data-id]{display:flex;flex-wrap:wrap;
    align-items:center;gap:var(--s2) var(--s3);padding:var(--s3);margin-bottom:var(--s2);
    background:var(--surface);border:1px solid var(--line);border-radius:3px}
  [data-view="guests"] .dt--guests tbody tr[data-id][aria-selected=true]{
    border-color:var(--terracotta);margin-bottom:0;border-radius:3px 3px 0 0}

  [data-view="guests"] td[data-col=guest]{flex:1 1 60%;min-width:0;order:1}
  [data-view="guests"] td[data-col=expand]{order:2;margin-left:auto}
  [data-view="guests"] td[data-col=contact]{order:3;flex:1 1 100%;display:flex;
    align-items:stretch;gap:var(--s4);min-width:0;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  [data-view="guests"] td[data-col=contact] > div{flex:1 1 auto;min-width:0}
  [data-view="guests"] td[data-col=contact] > small{flex:0 0 auto}
  /* both halves of the row are 44px tall, so both are a real tap target */
  [data-view="guests"] td[data-col=contact] a,
  [data-view="guests"] td[data-col=contact] .dash{display:flex;align-items:center;
    min-height:var(--h-ctl-lg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  [data-view="guests"] td[data-col=contact] a{text-decoration:underline;
    text-decoration-color:var(--taupe);text-underline-offset:3px}
  [data-view="guests"] td[data-col=tags]{order:4;flex:1 1 100%}
  /* the last four cells pair off two to a line, so the card ends on a grid
     rather than on whatever the wrap happened to do */
  [data-view="guests"] td[data-col=status]{order:5}
  [data-view="guests"] td[data-col=rooms]{order:6;text-align:right}
  [data-view="guests"] td[data-col=hotel]{order:7}
  [data-view="guests"] td[data-col=table]{order:8}
  [data-view="guests"] td[data-col=status],
  [data-view="guests"] td[data-col=rooms],
  [data-view="guests"] td[data-col=hotel],
  [data-view="guests"] td[data-col=table]{flex:1 1 calc(50% - var(--s3)/2);min-width:0}
  /* a borderless select reads as static text, and a phone has no hover to
     discover it with — on a card the editable fields say so */
  [data-view="guests"] .dt--guests tbody tr:not(.detail) td select{width:100%;
    border-color:var(--line-strong);background:#fff}
  [data-view="guests"] .dt--guests .expander{border-color:var(--line-strong);color:var(--ink)}

  /* the open detail is the bottom half of the same card */
  [data-view="guests"] .dt--guests tr.detail{display:block;margin-bottom:var(--s2)}
  [data-view="guests"] .dt--guests tr.detail > td{display:block;padding:var(--s4) var(--s3);
    border:1px solid var(--terracotta);border-top:0;border-radius:0 0 3px 3px}

  /* link buttons inside the detail are actions, so they need a real target */
  [data-view="guests"] .link-btn{display:inline-flex;align-items:center;
    min-height:var(--h-ctl-lg)}
}