/* Hinatoro v0.7.44-dev — Straight Fill/Pick Main/Mini parity and mobile UX.
   Styling only; all state, Supabase IDs, license checks and auth remain unchanged. */
/* Match the compact participant card hierarchy shared by Pick Main and Mini. */
#appShell #participants #people.sf-participants-grid {
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;min-width:0!important;align-items:stretch;
}
#appShell #participants .sf-participants-panel{min-width:0}
#appShell #participants .sf-participants-panel>.split-title{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
#appShell #participants .pick-live-label{font-size:10px;font-weight:800;letter-spacing:.4px;padding:5px 8px;border-radius:7px;background:#302848;color:#c6b2ff}
#appShell #participants .sf-participant-card{
  background:#111722!important;border:1px solid #303b50!important;
  border-radius:11px!important;margin:0!important;padding:13px!important;
  display:flex!important;flex-direction:column!important;gap:10px!important;
  min-width:0!important;min-height:0;overflow:visible;
}
#appShell #participants .sf-participant-card:has(.pick-payment-status.is-paid){border-color:#255441!important;background:#10201c!important}
#appShell #participants .sf-participant-card .pick-person-top{display:flex;align-items:flex-start;justify-content:space-between;gap:9px;min-width:0}
#appShell #participants .sf-participant-card .pick-person-identity{display:flex;flex:1;flex-wrap:wrap;align-items:center;gap:7px;min-width:0}
#appShell #participants .sf-participant-card .pick-person-identity strong{font-size:13px;line-height:1.3;overflow-wrap:anywhere;min-width:0;color:#f2f5ff}
#appShell #participants .sf-participant-card .pick-payment-status{font-size:10px;font-weight:750;padding:4px 7px;border-radius:6px;white-space:nowrap}
#appShell #participants .sf-participant-card .pick-payment-status.is-paid{color:#72e9b9;background:#173b30}
#appShell #participants .sf-participant-card .pick-payment-status.is-unpaid{color:#ffcc91;background:#433020}
#appShell #participants .sf-participant-card .pick-person-total{font-size:18px;font-weight:800;white-space:nowrap;text-align:right;line-height:1.3;color:#f2f5ff}
#appShell #participants .sf-participant-card .pick-person-total small{display:block;font-size:10px;font-weight:500;color:#b3bfd1;margin-top:2px}
#appShell #participants .sf-participant-card .pick-person-details{min-width:0;overflow-wrap:anywhere}
#appShell #participants .sf-participant-card .pick-person-details summary{font-size:11px;color:#c5afff;cursor:pointer;width:fit-content;max-width:100%;padding:2px 0}
#appShell #participants .sf-participant-card .pick-person-spots{padding-top:8px;display:flex;flex-wrap:wrap;gap:5px;max-height:180px;overflow:auto}
#appShell #participants .sf-participant-card .pick-spot-pill{font-size:11px;font-weight:650;border-radius:5px;padding:4px 6px;color:#e5d8ff;background:#382b57}
#appShell #participants .sf-participant-card .pick-spot-pill.is-paid{color:#8df1c9;background:#1c493f}
#appShell #participants .sf-participant-card .pick-person-bottom{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding-top:10px;border-top:1px solid #313a4c;min-width:0}
#appShell #participants .sf-participant-card .pick-person-bottom>small{font-size:11px;color:#b4bfd0;overflow-wrap:anywhere}
#appShell #participants .sf-participant-card .pick-row-actions{display:flex;flex-wrap:wrap;gap:6px;min-width:0;width:100%}
#appShell #participants .sf-participant-card .pick-row-actions button{font-size:11px;font-weight:700;padding:8px 9px;border:1px solid #3c4860;color:#edf1fb;background:#172136;border-radius:7px;min-height:36px;white-space:normal;line-height:1.2}
#appShell #participants .sf-participant-card .pick-row-actions button:disabled{opacity:.38;cursor:default}
#appShell #participants .sf-participant-card .pick-facebook-details{min-width:0}
#appShell #participants .sf-participant-card .pick-facebook-details:not([open])> :not(summary){display:none!important}
#appShell #participants .sf-participant-card .pick-facebook-details summary{font-size:11px;font-weight:650;color:#c5afff;cursor:pointer;padding:4px 0}
#appShell #participants .sf-participant-card .pick-facebook-details label{display:block;color:#b6c5d9;font-size:11px;margin-top:6px}
#appShell #participants .sf-participant-card .pick-facebook-details input{width:100%;min-width:0;max-width:100%;min-height:39px;box-sizing:border-box;margin-top:6px;font-size:14px;background:#0c1421;color:#eef2ff;border:1px solid #3a4860;border-radius:8px;padding:9px}
#appShell #participants .sf-participant-card :is(button,summary,input):focus-visible{outline:2px solid #c3a5ff;outline-offset:2px}
/* Match the Pick/Main deduplicated-tag action style and present readable output. */
#appShell #participants .sf-copy-actions button{font-size:12px;font-weight:700;min-height:36px;padding:8px 12px;border-radius:8px}
#appShell #participants #tags{min-height:44px;padding:13px 15px;overflow-wrap:anywhere;line-height:1.65}
/* The whole Spot List is always present; its own scroll region handles large draws. */
#appShell #spots .sf-spot-list-visible{display:block!important;max-height:min(58dvh,660px)!important;height:auto!important;min-height:150px!important;overflow-y:auto!important;overscroll-behavior:contain;padding:8px!important;margin-top:13px!important;scrollbar-gutter:stable}
#appShell #spots .sf-spot-list-visible:focus-visible{outline:2px solid #b397ff;outline-offset:2px}
/* Improve legibility across the entire site in light theme. */
body.light #appShell #participants .sf-participant-card,
body.light #appShell #participants .sf-participant-card:has(.pick-payment-status.is-paid){background:#fff!important;border:1px solid #d2dbe8!important}
body.light #appShell #participants .sf-participant-card:has(.pick-payment-status.is-paid){background:#effaf3!important;border-color:#abdac3!important}
body.light #appShell #participants .sf-participant-card .pick-person-identity strong,
body.light #appShell #participants .sf-participant-card .pick-person-total{color:#15233b!important}
body.light #appShell #participants .sf-participant-card .pick-person-total small,
body.light #appShell #participants .sf-participant-card .pick-person-bottom>small{color:#465875!important}
body.light #appShell #participants .sf-participant-card .pick-person-bottom{border-color:#d9e1ed!important}
body.light #appShell #participants .sf-participant-card .pick-person-details summary,
body.light #appShell #participants .sf-participant-card .pick-facebook-details summary{color:#5c3ba8!important}
body.light #appShell #participants .sf-participant-card .pick-facebook-details label{color:#33445c!important}
body.light #appShell #participants .sf-participant-card .pick-facebook-details input{background:#fff!important;color:#15233b!important;border-color:#aebcd0!important}
body.light #appShell #participants .sf-participant-card .pick-row-actions button{background:#f2f5fa!important;color:#263951!important;border-color:#b7c5d9!important}
body.light #appShell #participants .sf-participant-card .pick-payment-status.is-paid{background:#d8f5e7!important;color:#08734e!important}
body.light #appShell #participants .sf-participant-card .pick-payment-status.is-unpaid{background:#fff0dd!important;color:#884817!important}
body.light #appShell #participants .sf-participant-card .pick-spot-pill{background:#ede5fa!important;color:#563a99!important}
body.light #appShell #participants .sf-participant-card .pick-spot-pill.is-paid{background:#d7f4e7!important;color:#126b4b!important}
/* This footer replaces the earlier hidden one-line horizontally scrolling legal
   strip at phone and tablet widths. All SIX legal links must stay visible. */
@media(max-width:1050px){
 html body #appShell:not([hidden])>footer.compact-footer.hin-unified-footer{
   display:grid!important;grid-template-columns:minmax(0,1fr)!important;
   grid-auto-rows:auto!important;gap:8px!important;justify-content:stretch!important;
   align-items:start!important;flex-wrap:wrap!important;white-space:normal!important;
   width:100%!important;min-width:0!important;min-height:0!important;max-height:none!important;
   height:auto!important;overflow:visible!important;
   padding:13px max(14px,env(safe-area-inset-left)) calc(14px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-right))!important;
 }
 #appShell>footer.hin-unified-footer .hin-footer-operational{
   display:flex!important;flex-wrap:wrap!important;align-items:center!important;
   gap:8px 15px!important;min-width:0!important;width:100%!important;
   white-space:normal!important;
 }
 #appShell>footer.hin-unified-footer .footer-license,
 #appShell>footer.hin-unified-footer .footer-status,
 #appShell>footer.hin-unified-footer .footer-status #saved{white-space:normal!important;overflow:visible!important;min-width:0!important;overflow-wrap:anywhere!important}
 #appShell>footer.hin-unified-footer .hinatoro-legal-links{
   display:flex!important;flex-wrap:wrap!important;align-items:center!important;
   flex:1 1 auto!important;justify-content:flex-start!important;
   width:100%!important;min-width:0!important;max-width:100%!important;
   gap:8px 16px!important;overflow:visible!important;
   white-space:normal!important;padding:10px 0 0!important;
   margin:0!important;border-top:1px solid var(--border)!important;
   font-size:11px!important;line-height:1.6!important;
 }
 #appShell>footer.hin-unified-footer .hinatoro-legal-links a,
 #appShell>footer.hin-unified-footer .hinatoro-legal-links span{white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.4!important}
}
@media(min-width:651px) and (max-width:1100px){
 #appShell #participants #people.sf-participants-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:650px){
 #appShell #participants #people.sf-participants-grid{grid-template-columns:1fr!important;gap:9px!important}
 #appShell #participants .sf-participant-card{padding:12px!important}
 #appShell #participants .sf-participant-card .pick-person-identity{gap:5px!important}
 #appShell #participants .sf-participant-card .pick-row-actions button{flex:1 1 auto;min-width:95px;min-height:44px}
 #appShell #participants .sf-copy-actions{width:100%;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #appShell #participants .sf-copy-actions button{width:100%;min-height:44px}
 #appShell #spots .buttons{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
 #appShell #spots .buttons button{min-width:0!important;padding:10px 7px!important;min-height:44px;white-space:normal}
 #appShell #spots .sf-spot-list-visible{max-height:56dvh!important;min-height:200px!important}
 #appShell>footer.hin-unified-footer .hinatoro-legal-links{gap:9px 15px!important}
 #appShell #participants .sf-participants-panel>.split-title{align-items:flex-start}
 #appShell #participants .sf-participants-panel>.split-title h2{margin:0}
}
@media(max-width:360px){
 #appShell #participants .sf-participant-card .pick-person-top{gap:6px;flex-wrap:wrap}
 #appShell #participants .sf-participant-card .pick-person-total{text-align:left}
 #appShell #participants .sf-participant-card .pick-row-actions button{flex-basis:100%}
 #appShell #spots .buttons{grid-template-columns:1fr!important}
 #appShell>footer.hin-unified-footer .hin-footer-operational{gap:8px 11px!important}
}