/* Squares with Friends account and setup surfaces. */
.swf-host {
  --swf-bg:#fdfdfb; --swf-paper:#fefefd;
  --swf-ink:#292a26; --swf-muted:#65665e;
  --swf-green:#344c38; --swf-action:#292a26; --swf-on-action:#fdfdfb;
  --swf-soft:#dfe7d9; --swf-control:#f5f5f1; --swf-highlight:#d2decc;
  --swf-line:#d7d8cf; --swf-danger:#9b302d; --swf-shadow:#292a2618;
  background:var(--swf-bg); color:var(--swf-ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:14px; line-height:1.45;
  padding:0; width:100%; box-sizing:border-box; color-scheme:only light;
}
.swf-host * { box-sizing:border-box; }
.swf-host [hidden] { display:none !important; }
.swf-host h1,.swf-host h2,.swf-host h3,.swf-host p { margin:0; }
.swf-host button,.swf-host input,.swf-host textarea,.swf-host select { font:inherit; }
.swf-host button { color:inherit; }
.swf-host button svg { width:18px; height:18px; flex-shrink:0; }
.swf-host .swf-header { min-height:64px; padding:0 18px; display:flex; justify-content:space-between; gap:12px; align-items:center; border-bottom:2px solid var(--swf-ink); }
.swf-host .swf-brand { display:flex; align-items:center; gap:9px; color:var(--swf-ink); }
.swf-host .swf-avatar { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--swf-control); color:var(--swf-ink); font-size:12px; font-weight:600; }
.swf-host .swf-back { display:flex; align-items:center; gap:7px; min-height:44px; padding:0 5px 0 0; background:none; border:0; color:var(--swf-ink); font-size:13px; white-space:nowrap; }
.swf-host .swf-header-context { color:var(--swf-muted); font-size:11px; text-align:right; }
.swf-host .swf-main { max-width:540px; margin:auto; padding:22px 18px 24px; }
.swf-host .swf-eyebrow { color:var(--swf-muted); font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; }
.swf-host h1 { font:800 34px/1.12 "Roboto Condensed","Arial Narrow",sans-serif; letter-spacing:-.7px; color:var(--swf-ink); }
.swf-host .swf-tagline { color:var(--swf-muted); font-size:14px; margin:9px 0 18px; max-width:330px; }
.swf-host .swf-primary { display:flex; justify-content:center; align-items:center; gap:9px; min-height:48px; width:100%; border:0; border-radius:4px; background:var(--swf-action); color:var(--swf-on-action); font-size:14px; font-weight:600; padding:11px 14px; }
.swf-host .swf-primary:disabled { background:var(--swf-line); color:var(--swf-muted); cursor:not-allowed; }
.swf-host .swf-list-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:25px 0 11px; }
.swf-host .swf-list-heading h2 { font:800 24px/1.2 "Roboto Condensed","Arial Narrow",sans-serif; letter-spacing:-.35px; }
.swf-host .swf-list-heading span { font-size:12px; color:var(--swf-muted); }
.swf-host .swf-list { display:grid; gap:12px; }
.swf-host .swf-board { background:var(--swf-paper); border:1px solid var(--swf-line); border-radius:4px; padding:0 12px; }
.swf-host .swf-board-top { display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--swf-line); }
.swf-host .swf-open { flex:1; min-width:0; display:block; background:none; border:0; min-height:72px; padding:12px 0; text-align:left; }
.swf-host .swf-open h3 { font:800 22px/1.2 "Roboto Condensed","Arial Narrow",sans-serif; letter-spacing:-.3px; overflow-wrap:anywhere; }
.swf-host .swf-open p { font-size:12px; color:var(--swf-muted); margin-top:3px; }
.swf-host .swf-open-heading { display:flex; align-items:center; gap:5px; }
.swf-host .swf-open-heading svg { width:13px; height:13px; color:var(--swf-muted); }
.swf-host .swf-group-row { display:flex; align-items:center; gap:8px; }
.swf-host .swf-people { flex:1; min-width:0; background:none; border:0; min-height:58px; padding:9px 0; font-size:12px; color:var(--swf-muted); text-align:left; }
.swf-host .swf-people-heading { display:flex; align-items:center; gap:5px; }
.swf-host .swf-people strong { color:var(--swf-ink); font-weight:500; }
.swf-host .swf-people svg { width:15px; height:15px; color:var(--swf-muted); }
.swf-host .swf-copy { min-height:48px; width:58px; flex-shrink:0; padding:4px 0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; background:none; border:0; font-size:11px; color:var(--swf-ink); }
.swf-host .swf-copy svg { width:15px; height:15px; }
.swf-host .swf-winners { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; border-bottom:1px solid var(--swf-line); padding:5px 0; }
.swf-host .swf-winner { min-width:0; min-height:64px; padding:4px 1px; border:0; border-radius:3px; background:none; text-align:left; }
.swf-host .swf-winner[aria-expanded="true"] strong { background:var(--swf-highlight); color:var(--swf-green); border-radius:3px; box-shadow:0 0 0 3px var(--swf-highlight); }
.swf-host .swf-winner > span { display:block; color:var(--swf-muted); font-size:11px; }
.swf-host .swf-winner strong { display:block; width:fit-content; max-width:100%; min-height:2.5em; font-size:12px; font-weight:600; line-height:1.25; margin-top:3px; overflow-wrap:anywhere; }
.swf-host .swf-winner strong span { display:block; }
.swf-host .swf-winner-detail { padding:8px 0; color:var(--swf-ink); font-size:12px; border-bottom:1px solid var(--swf-line); overflow-wrap:anywhere; }
.swf-host .swf-name-preview { display:block; color:var(--swf-muted); font-size:12px; margin-top:2px; overflow-wrap:anywhere; }
.swf-host .swf-name-list { display:flex; flex-wrap:wrap; gap:5px; padding:0; list-style:none; margin:0 0 12px; }
.swf-host .swf-name-list li { padding:4px 8px; font-size:12px; background:var(--swf-soft); border-radius:3px; overflow-wrap:anywhere; }
.swf-host .swf-reuse { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:48px; width:58px; flex-shrink:0; background:none; color:var(--swf-ink); border:0; font-size:11px; padding:4px 0; }
.swf-host .swf-reuse svg { width:15px; height:15px; }
.swf-host .swf-empty { margin-top:25px; border-top:1px solid var(--swf-line); padding:22px 0 40px; }
.swf-host .swf-empty h2 { font:800 24px/1.2 "Roboto Condensed","Arial Narrow",sans-serif; }
.swf-host .swf-empty p { color:var(--swf-muted); font-size:14px; margin-top:7px; }
.swf-host .swf-footer { max-width:540px; margin:auto; padding:0 18px 19px; display:flex; justify-content:center; align-items:center; gap:5px; font-size:11px; color:var(--swf-muted); }
.swf-host .swf-setup-title { margin-bottom:22px; }
.swf-host .swf-setup-title p { font-size:14px; color:var(--swf-muted); margin-top:7px; }
.swf-host .swf-source { display:flex; align-items:flex-start; gap:9px; background:var(--swf-soft); border-radius:4px; padding:11px 12px; margin-bottom:22px; }
.swf-host .swf-source svg { width:17px; height:17px; flex-shrink:0; color:var(--swf-green); margin-top:2px; }
.swf-host .swf-source strong { font-size:13px; font-weight:600; }
.swf-host .swf-source p { margin-top:2px; font-size:12px; color:var(--swf-muted); }
.swf-host .swf-field { margin-bottom:23px; }
.swf-host .swf-label { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px; }
.swf-host .swf-label label { font-size:15px; font-weight:600; }
.swf-host .swf-label span { font-size:12px; color:var(--swf-muted); }
.swf-host textarea { display:block; width:100%; min-width:0; border:1px solid var(--swf-line); border-radius:4px; background:var(--swf-paper); color:var(--swf-ink); font-size:16px; padding:12px; }
.swf-host .swf-game-picker { position:relative; }
.swf-host .swf-game-trigger { width:100%; min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:9px; padding:10px 12px; text-align:left; border:1px solid var(--swf-line); border-radius:4px; background:var(--swf-paper); }
.swf-host .swf-game-trigger[aria-expanded="true"] { border-color:var(--swf-ink); }
.swf-host .swf-game-selected { display:flex; align-items:center; gap:10px; min-width:0; }
.swf-host .swf-game-selected > svg { color:var(--swf-muted); }
.swf-host .swf-game-selected strong { display:block; font-size:15px; font-weight:500; line-height:1.3; overflow-wrap:anywhere; }
.swf-host .swf-game-selected small { display:block; font-size:12px; color:var(--swf-muted); margin-top:3px; }
.swf-host .swf-team-pair { display:flex; gap:2px; flex-shrink:0; }
.swf-host .swf-team-pair img { display:block; width:24px; height:24px; object-fit:contain; }
.swf-host .swf-game-menu { position:absolute; z-index:5; width:100%; top:calc(100% + 5px); left:0; border:1px solid var(--swf-line); border-radius:4px; background:var(--swf-paper); box-shadow:0 5px 18px var(--swf-shadow); padding:4px; }
.swf-host .swf-game-day { padding:8px 8px 4px; font-size:11px; font-weight:500; color:var(--swf-muted); }
.swf-host .swf-game-option { width:100%; min-height:54px; border:0; border-radius:3px; display:flex; align-items:center; gap:8px; padding:7px 8px; background:var(--swf-paper); text-align:left; }
.swf-host .swf-game-option:hover,.swf-host .swf-game-option[aria-selected="true"] { background:var(--swf-soft); }
.swf-host .swf-game-option-text { flex:1; min-width:0; }
.swf-host .swf-game-option strong { display:block; font-size:13px; font-weight:500; }
.swf-host .swf-game-option small { color:var(--swf-muted); font-size:11px; }
.swf-host .swf-game-option > svg { width:15px; height:15px; color:var(--swf-green); }
.swf-host textarea { height:160px; min-height:160px; resize:vertical; line-height:1.65; }
.swf-host textarea::placeholder { color:var(--swf-muted); opacity:.8; }
.swf-host .swf-helper { color:var(--swf-muted); font-size:12px; margin-top:7px; }
.swf-host .swf-allocation { margin-top:12px; color:var(--swf-ink); font-size:13px; }
.swf-host .swf-allocation strong { font-weight:600; }
.swf-host .swf-allocation p { font-size:12px; color:var(--swf-muted); margin-top:2px; }
.swf-host .swf-error { font-size:13px; color:var(--swf-danger); margin-top:8px; }
.swf-host .swf-lock { color:var(--swf-muted); font-size:12px; margin-bottom:13px; }
.swf-host .swf-lock strong { color:var(--swf-ink); font-weight:500; }
.swf-host .swf-private { color:var(--swf-muted); font-size:12px; text-align:center; margin-top:12px; }
@media (min-width:600px) {
  .swf-host .swf-header { padding-inline:30px; }
  .swf-host .swf-main { padding-block:32px; }
  .swf-host .swf-tagline { max-width:none; }
}
@media (max-width:440px) {
  .swf-host { padding:0; }
}

.swf-host .swf-header { max-width:540px; margin-inline:auto; }
.swf-host a { text-decoration:none; }
.swf-host a.swf-primary { color:var(--swf-on-action); }
.swf-host .swf-header svg { flex-shrink:0; }
.swf-host .swf-brand .sq-wordmark { width:130px; height:22px; }
.swf-host .swf-back svg { width:18px; height:18px; }
.swf-host .swf-group-row { position:relative; display:block; }
.swf-host .swf-group { width:100%; }
.swf-host .swf-people { display:block; padding-right:68px; list-style:none; cursor:pointer; }
.swf-host .swf-people::-webkit-details-marker { display:none; }
.swf-host .swf-group[open] .swf-people-heading svg { transform:rotate(180deg); }
.swf-host .swf-reuse { position:absolute; right:0; top:5px; }
.swf-host .swf-copy-fallback { padding:8px 0 12px; font-size:12px; }
.swf-host .swf-copy-status { color:var(--swf-muted); font-size:12px; }
.swf-host .swf-copy-status:not(:empty) { padding-bottom:10px; }
.swf-host .swf-pagination { display:flex; justify-content:space-between; margin-top:15px; gap:15px; font-size:13px; }
.swf-host .swf-pagination a { display:flex; align-items:center; min-height:44px; }
.swf-host .swf-pagination svg { width:15px; height:15px; }
.swf-host .swf-game-menu { max-height:340px; overflow-y:auto; overscroll-behavior:contain; }
.swf-host .swf-game-trigger > svg { width:18px; height:18px; flex-shrink:0; }
.swf-host .swf-game-selected { flex:1; }
.swf-host .swf-game-selected > span:last-child { min-width:0; }
.swf-host .swf-main { min-height:65vh; }
.swf-host .swf-primary svg { width:18px; height:18px; }

.swf-host .swf-open { color:var(--swf-ink); }
.swf-host .swf-primary:not(:disabled):hover { background:#3c3e36; }
.swf-host textarea[aria-invalid="true"] { border-color:var(--swf-danger); }
@media (max-width:360px) {
  .swf-host .swf-header,.swf-host .swf-main { padding-inline:16px; }
  .swf-host .swf-header-context { max-width:90px; }
}
/* No-account (lite) hosts: Sign in link and the Save to my account callout. */
.swf-host .swf-signin { display:flex; align-items:center; min-height:44px; color:var(--swf-ink); font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.swf-host .swf-save { margin-top:16px; border:1px solid var(--swf-line); border-radius:4px; padding:12px 14px; display:flex; flex-direction:column; gap:10px; font-size:13px; }
.swf-host .swf-secondary { display:flex; justify-content:center; align-items:center; min-height:44px; border:1px solid var(--swf-ink); border-radius:4px; color:var(--swf-ink); font-size:14px; font-weight:600; padding:9px 14px; }
.swf-host .swf-empty a, .swf-host .sq-notice a, .swf-host .swf-private a { color:var(--swf-ink); text-decoration:underline; text-underline-offset:3px; }