/* The private table setup: two screens instead of one long form (Shaun, 2026-11-07: "lets explore making the private table
   creation a wizard"; "seems like a lot of steps"; "dropped house rules to a drop down, half width, then had the optional
   stuff next to it"; "Second page call Options"). index.php #friend-setup-modal, assets/friend-setup.js. Every rule starts at
   the dialog's id so it wins by specificity over the old lobby rules; the dialog carries none of the classes
   (.ps-dialog, .lv2-speed-btn) that the old rules force. Tokens only. */
#friend-setup-modal-dialog{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--muck-space-6);align-items:start;width:100%;max-width:1100px;box-sizing:border-box;margin:0 auto;padding:var(--muck-space-6) 26px var(--muck-space-7);scroll-margin-top:120px;color:var(--muck-text);font-family:var(--muck-font)}
#friend-setup-modal-dialog .ptw-main{min-width:0}

/* On a page instead of in the window (includes/private-table-form.php): the page already has its gutters */
#friend-setup-modal-dialog.ptw-inline{max-width:none;padding:0;scroll-margin-top:var(--muck-space-5)}
#friend-setup-modal-dialog.ptw-inline [data-for] .ptw-h{margin-top:0}
#friend-setup-modal-dialog .ptw-group--who{margin-bottom:var(--muck-space-5)}
#friend-setup-modal-dialog.ptw-inline .ptw-fields{grid-template-columns:repeat(3,minmax(0,1fr))}
#friend-setup-modal-dialog.ptw-inline .ptw-fields .mk-input{width:100%}
#friend-setup-modal-dialog.ptw-inline .mp-error{margin:var(--muck-space-4) 0 0}

/* the two steps, flat like tabs */
#friend-setup-modal-dialog .ptw-rail{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--muck-space-2);margin:0 0 var(--muck-space-5);padding:0;list-style:none}
#friend-setup-modal-dialog .ptw-rail button{display:block;width:100%;min-height:44px;padding:var(--muck-space-2) 0 0;border:0;border-top:3px solid var(--muck-line-strong);border-radius:0;background:none;color:var(--muck-text-3);font:600 13px var(--muck-font);text-align:left;cursor:pointer}
#friend-setup-modal-dialog .ptw-rail .is-done button{border-top-color:var(--muck-gold-muted);color:var(--muck-text-2)}
#friend-setup-modal-dialog .ptw-rail .is-now button{border-top-color:var(--muck-gold);color:var(--muck-text);font-weight:800}
#friend-setup-modal-dialog .ptw-rail button:focus-visible{outline:2px solid var(--muck-gold);outline-offset:2px}
@media (hover:hover){#friend-setup-modal-dialog .ptw-rail button:hover{color:var(--muck-text)}}

#friend-setup-modal-dialog .ptw-screen[hidden]{display:none}
#friend-setup-modal-dialog .ptw-screen--in{animation:ptw-in var(--muck-dur-slow) var(--muck-ease)}
@keyframes ptw-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#friend-setup-modal-dialog .ptw-q{margin:0 0 var(--muck-space-2);color:var(--muck-text);font-size:clamp(28px,2.8vw,40px);font-weight:800;line-height:1.05;letter-spacing:-.03em;outline:0}
#friend-setup-modal-dialog .ptw-sub{margin:0 0 var(--muck-space-5);color:var(--muck-text-2);font-size:15px;line-height:1.6}
#friend-setup-modal-dialog .ptw-h{margin:var(--muck-space-5) 0 var(--muck-space-2);color:var(--muck-text);font-size:14px;font-weight:800;line-height:1.3;letter-spacing:-.01em}
#friend-setup-modal-dialog .ptw-group:first-of-type .ptw-h{margin-top:0}
#friend-setup-modal-dialog .ptw-h small{margin-left:var(--muck-space-1);color:var(--muck-text-3);font-size:12px;font-weight:500;letter-spacing:0}

/* an answer */
#friend-setup-modal-dialog .ptw-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--muck-space-2)}
#friend-setup-modal-dialog .ptw-tiles--2{grid-template-columns:repeat(2,minmax(0,1fr))}
#friend-setup-modal-dialog .ptw-tiles.hidden,#friend-setup-modal-dialog .ptw-tiles.is-forced{display:none}
#friend-setup-modal-dialog .ptw-tile{position:relative;display:flex;flex-direction:column;justify-content:center;gap:var(--muck-space-1);width:100%;min-width:0;min-height:72px;box-sizing:border-box;margin:0;padding:var(--muck-space-3);border:1px solid var(--muck-warm-line-2);border-radius:var(--muck-radius-card);background:var(--muck-warm-tile);box-shadow:none;color:var(--muck-text);font-family:var(--muck-font);text-align:left;cursor:pointer;transform:none;transition:border-color var(--muck-dur-fast),background var(--muck-dur-fast)}
#friend-setup-modal-dialog .ptw-tile:focus-visible,#friend-setup-modal-dialog .ptw-tile:has(input:focus-visible){outline:2px solid var(--muck-gold);outline-offset:2px}
#friend-setup-modal-dialog .ptw-tile-name{display:block;padding-right:var(--muck-space-5);color:var(--muck-text);font-size:15px;font-weight:800;line-height:1.2;letter-spacing:-.01em}
#friend-setup-modal-dialog .ptw-tile-sub{display:block;color:var(--muck-text-2);font-size:12px;font-weight:400;line-height:1.35;text-transform:none}
#friend-setup-modal-dialog .ptw-tile input{position:absolute;width:1px;height:1px;margin:0;opacity:0}
#friend-setup-modal-dialog .ptw-tile.active{border-color:var(--muck-gold-muted);background:color-mix(in srgb,var(--muck-gold) 12%,var(--muck-warm-tile))}
#friend-setup-modal-dialog .ptw-tile.is-off{opacity:.45;cursor:not-allowed}
@media (hover:hover){
  #friend-setup-modal-dialog .ptw-tile:hover{border-color:var(--muck-gold-muted)}
  #friend-setup-modal-dialog .ptw-tile.is-off:hover{border-color:var(--muck-warm-line-2)}
}
#friend-setup-modal-dialog .ptw-mark{position:absolute;top:var(--muck-space-2);right:var(--muck-space-2);display:grid;place-items:center;width:18px;height:18px;box-sizing:border-box;border:1px solid var(--muck-line-strong);border-radius:50%;color:transparent}
#friend-setup-modal-dialog .ptw-mark--box{border-radius:5px}
#friend-setup-modal-dialog .ptw-mark svg{display:block;width:12px;height:12px}
#friend-setup-modal-dialog .ptw-tile.active .ptw-mark{border-color:var(--muck-gold-muted);background:var(--muck-gold-muted);color:var(--muck-gold-ink)}
#friend-setup-modal-dialog .ptw-fixed{margin:0;padding:var(--muck-space-3) var(--muck-space-4);border:1px solid var(--muck-warm-line);border-radius:var(--muck-radius-card);color:var(--muck-text-2);font-size:14px;line-height:1.5}
#friend-setup-modal-dialog .ptw-fixed[hidden]{display:none}
#friend-setup-modal-dialog .ptw-fixed b{color:var(--muck-text)}

/* two half-width drop-downs; what's in one opens across the whole row */
#friend-setup-modal-dialog .ptw-drops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--muck-space-2);margin-top:var(--muck-space-4)}
#friend-setup-modal-dialog .ptw-drops--one{grid-template-columns:minmax(0,1fr)}
#friend-setup-modal-dialog .ptw-drop{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--muck-space-2);width:100%;min-height:60px;box-sizing:border-box;margin:0;padding:var(--muck-space-2) var(--muck-space-3);border:1px solid var(--muck-warm-line-2);border-radius:var(--muck-radius-field);background:var(--muck-warm-2);color:var(--muck-text);font-family:var(--muck-font);text-align:left;cursor:pointer;transition:border-color var(--muck-dur-fast)}
#friend-setup-modal-dialog .ptw-drop:focus-visible{outline:2px solid var(--muck-gold);outline-offset:2px}
#friend-setup-modal-dialog .ptw-drop[aria-expanded="true"]{border-color:var(--muck-gold-muted)}
@media (hover:hover){#friend-setup-modal-dialog .ptw-drop:hover{border-color:var(--muck-gold-muted)}}
#friend-setup-modal-dialog .ptw-drop-text{min-width:0}
#friend-setup-modal-dialog .ptw-drop-name{display:block;font-size:14px;font-weight:800}
#friend-setup-modal-dialog .ptw-drop-value{display:block;margin-top:2px;overflow:hidden;color:var(--muck-text-2);font-size:12px;line-height:1.35;white-space:nowrap;text-overflow:ellipsis}
#friend-setup-modal-dialog .ptw-drop-arrow{width:12px;height:12px;color:var(--muck-text-2);transition:transform var(--muck-dur-fast)}
#friend-setup-modal-dialog .ptw-drop[aria-expanded="true"] .ptw-drop-arrow{transform:rotate(180deg)}
#friend-setup-modal-dialog .ptw-panel{scroll-margin-bottom:96px;margin-top:var(--muck-space-2);padding:var(--muck-space-4);border:1px solid var(--muck-warm-line);border-radius:var(--muck-radius-card);background:var(--muck-warm-2)}
#friend-setup-modal-dialog .ptw-panel[hidden]{display:none}
#friend-setup-modal-dialog .ptw-fields{display:grid;gap:var(--muck-space-4)}

/* the date button: the same field as the two above it, with the device's date window under it */
#friend-setup-modal-dialog .ps-when{position:relative;grid-column:auto;display:flex;align-items:center;width:100%;max-width:none;margin:0}
#friend-setup-modal-dialog .ps-when-btn{display:flex;align-items:center;gap:var(--muck-space-2);width:100%;min-height:44px;box-sizing:border-box;padding:0 44px 0 var(--muck-space-4);border:1px solid var(--muck-line-strong);border-radius:var(--muck-radius-field);background:var(--muck-surface-3);box-shadow:none;color:var(--muck-text-3);font:500 14px var(--muck-font)}
#friend-setup-modal-dialog .ps-when-btn .material-symbols-rounded{font-size:20px;color:var(--muck-text-2)}
#friend-setup-modal-dialog .ps-when.has-value .ps-when-btn{border-color:var(--muck-line-strong);background:var(--muck-surface-3);color:var(--muck-text)}
#friend-setup-modal-dialog .ps-when:hover .ps-when-btn{border-color:var(--muck-text-3)}
#friend-setup-modal-dialog .ps-when:focus-within .ps-when-btn{border-color:var(--muck-gold);box-shadow:none}
#friend-setup-modal-dialog .ps-when-clear{right:0;width:44px;height:44px;color:var(--muck-text-2)}
#friend-setup-modal-dialog .ps-when-clear.hidden{display:none}

/* moving on */
#friend-setup-modal-dialog .ptw-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--muck-space-3);margin-top:var(--muck-space-5);padding-top:var(--muck-space-4);border-top:1px solid var(--muck-line)}
#friend-setup-modal-dialog .ptw-foot-back{justify-self:start}
#friend-setup-modal-dialog .ptw-foot-count{color:var(--muck-text-3);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
#friend-setup-modal-dialog .ptw-foot-next{justify-self:end}
#friend-setup-modal-dialog .ptw-foot .mk-btn{white-space:nowrap}
#friend-setup-modal-dialog .ptw-foot-next .mk-btn[hidden]{display:none}
#friend-setup-modal-dialog .ptw-foot-back .mk-btn[hidden]{display:inline-flex;visibility:hidden}   /* holds the row's spacing on the first screen */

/* the ticket: the table and pills change as you pick */
#friend-setup-modal-dialog .ptw-ticket{position:sticky;top:var(--muck-space-5);box-sizing:border-box;padding:0 var(--muck-space-5) var(--muck-space-5);border:1px solid var(--muck-warm-line);border-radius:var(--muck-radius-card);background:linear-gradient(145deg,var(--muck-warm-1),var(--muck-warm-2));overflow:hidden}
#friend-setup-modal-dialog .ptw-pills{display:flex;flex-wrap:wrap;gap:var(--muck-space-2);min-height:30px}
#friend-setup-modal-dialog .ptw-pill{display:inline-flex;align-items:center;min-height:30px;box-sizing:border-box;padding:0 var(--muck-space-3);border:1px solid var(--muck-warm-line-2);border-radius:var(--muck-radius-pill);color:var(--muck-text);font-size:12px;font-weight:600}
#friend-setup-modal-dialog .ptw-pill--rule{border-color:var(--muck-gold-muted);color:var(--muck-gold-muted)}
#friend-setup-modal-dialog .ptw-ticket-note{margin:var(--muck-space-4) 0 0;color:var(--muck-text-3);font-size:12px;text-align:center}

@media (max-width:1099px){
  #friend-setup-modal-dialog{grid-template-columns:minmax(0,1fr) 285px;gap:var(--muck-space-5)}
  #friend-setup-modal-dialog .ptw-drop-value{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}   /* half a narrow row: two lines, never "Name, passwor..." */
}
@media (max-width:719px){
  #friend-setup-modal-dialog{grid-template-columns:minmax(0,1fr);gap:var(--muck-space-5);padding:var(--muck-space-4) 0 var(--muck-space-5)}   /* the panel already has its gutter */
  #friend-setup-modal-dialog .ptw-rail{margin-bottom:var(--muck-space-3);gap:var(--muck-space-1)}
  #friend-setup-modal-dialog .ptw-rail button{min-height:24px;padding:0;font-size:0}
  #friend-setup-modal-dialog.ptw-inline .ptw-fields{grid-template-columns:minmax(0,1fr)}
  #friend-setup-modal-dialog .ptw-ticket{display:none}   /* no room: the second screen's first line says what the first picked */
  #friend-setup-modal-dialog .ptw-sub{margin-bottom:var(--muck-space-4)}
  #friend-setup-modal-dialog .ptw-tile{min-height:64px;padding:var(--muck-space-2) var(--muck-space-3)}
  #friend-setup-modal-dialog .ptw-tile-name{font-size:14px}
  #friend-setup-modal-dialog .ptw-foot{grid-template-columns:auto 1fr auto;position:sticky;bottom:0;z-index:1;margin:var(--muck-space-4) 0 0;padding:var(--muck-space-3) 0;background:var(--muck-bg)}
  #friend-setup-modal-dialog .ptw-foot-count{text-align:center}
  #friend-setup-modal-dialog .ptw-panel{padding:var(--muck-space-2)}
  #friend-setup-modal-dialog .ptw-panel .mk-field{padding:var(--muck-space-1)}
  /* House rules on a phone: one row each, the box level with the words, so "All-in or Fold" never runs into it */
  #friend-setup-modal-dialog .ptw-tiles--rules{grid-template-columns:minmax(0,1fr)}
  #friend-setup-modal-dialog .ptw-tiles--rules .ptw-tile{min-height:52px;padding-right:calc(var(--muck-space-3) + 18px + var(--muck-space-2))}
  #friend-setup-modal-dialog .ptw-tiles--rules .ptw-tile-name{padding-right:0}
  #friend-setup-modal-dialog .ptw-tiles--rules .ptw-mark{top:50%;right:var(--muck-space-3);margin-top:-9px}
}
@media (prefers-reduced-motion:reduce){
  #friend-setup-modal-dialog .ptw-screen--in{animation:none}
  #friend-setup-modal-dialog .ptw-tile,#friend-setup-modal-dialog .ptw-drop,#friend-setup-modal-dialog .ptw-drop-arrow{transition:none}
}