/* Rally shared components (UI phase 1).
   One definition per component, loaded after every other stylesheet. The older duplicate rules for
   these components were removed from style.css, theme.css and clubs.css (see tools/phase1-css.mjs).
   Colours come from the --r-* tokens at the top of style.css. Light mode only. */

/* ---------- Focus ----------
   Keyboard focus rings come from the global :focus-visible rules in style.css/theme.css (now blue). */
.sheethead h2[tabindex="-1"]:focus{outline:none} /* programmatic heading focus when a sheet opens */

/* ---------- Buttons ---------- */
.btn,.textbutton{min-height:44px;min-width:44px}
.iconbtn{display:inline-grid;place-items:center;flex-shrink:0;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:var(--r-bg);color:var(--r-ink-2);cursor:pointer}
.iconbtn:hover{background:#e8e8ed;color:var(--r-ink)}
.iconbtn svg{width:16px;height:16px}
.playertable .namelink,.leaderboard .namelink{min-height:44px}

/* ---------- Header and navigation ---------- */
.app-header .livebrand{display:inline-flex;align-items:center;min-height:44px}
.desktop-nav a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.app-account .btn{min-height:44px}
.notification-link,.account-chip{min-height:44px;min-width:44px}
.header-more{display:none;position:relative}
.app-header .header-more>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1px solid var(--r-line);border-radius:22px;background:var(--r-surface);color:var(--r-ink);font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap}
.header-more>summary::-webkit-details-marker{display:none}
.header-more>summary svg{width:12px;height:12px;transition:transform .15s}
.header-more[open]>summary{background:var(--r-bg)}
.header-more[open]>summary svg{transform:rotate(180deg)}
.header-more-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:40;display:flex;flex-direction:column;min-width:228px;padding:8px;background:var(--r-surface);border:1px solid var(--r-line);border-radius:16px;box-shadow:0 12px 32px #0000001f}
.header-more-menu a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;color:var(--r-ink);font-size:15px;text-decoration:none}
.header-more-menu a:hover{background:var(--r-bg)}
.header-more-menu a[aria-current=page]{background:var(--r-blue-tint);color:var(--r-link);font-weight:600}
.bottom-nav{display:none}
@media(max-width:700px){
 .app-header,#app>.app-header{flex-wrap:nowrap}
 .header-more{display:block}
 .app-account{margin-left:auto;min-width:0}
 body:has(.layout) .header-more{margin-left:auto}
 /* Phone header keeps sign-in, notifications and the account chip; venue/owner/admin links move to More. */
 .app-account>a.btn[href="?page=owner"],.app-account>a.btn[href="?page=admin"],.app-account>a.btn[href="?page=my"]{display:none}
 .account-chip>span:not(.avatar):not(.og-avatar){display:none}
 .bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:25;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:6px 4px max(6px,env(safe-area-inset-bottom));background:#fffffff2;border-top:1px solid var(--r-line);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
 .bottom-nav>a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:52px;padding:4px 0;border-radius:10px;color:var(--r-ink-2);font-size:12px;font-weight:500;line-height:1.2;letter-spacing:-.01em;text-decoration:none}
 .bottom-nav>a>span{max-width:100%;white-space:nowrap}
 .bottom-nav svg{width:22px;height:22px}
 .bottom-nav>a[aria-current=page]{color:var(--r-link);font-weight:600}
 .bottom-nav>a:focus-visible{outline-offset:-2px}
}

/* ---------- Tabs ----------
   Section tabs (.livetabs, .club-tabs, .add-player-tabs): pill buttons, selected = blue tint.
   Segmented control (.segmented): grey track with a white selected segment. */
.livetabs,.club-tabs,.add-player-tabs{display:flex;gap:8px;min-width:0}
.livetabs button,.club-tabs button,.add-player-tabs button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 16px;border:0;border-radius:10px;background:transparent;color:var(--r-ink-2);font:600 15px/1.25 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-align:center;white-space:nowrap;cursor:pointer}
.livetabs button:hover,.club-tabs button:hover,.add-player-tabs button:hover{background:var(--r-bg);color:var(--r-ink)}
.livetabs button.selected,.club-tabs button.selected,.add-player-tabs button.selected{background:var(--r-blue-tint);color:var(--r-link)}
.add-player-tabs button:disabled{opacity:.45;cursor:default}
.livetabs{flex-wrap:wrap}
.club-tabs{overflow-x:auto;scrollbar-width:none;margin:32px 0 24px;padding-bottom:8px;border-bottom:1px solid var(--r-line)}
.club-tabs::-webkit-scrollbar{display:none}
.club-tabs button{flex:none;font-size:17px;padding:8px 20px}
.add-player-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:4px;margin:16px 0 24px;background:var(--r-bg);border-radius:14px}
.add-player-tabs button{white-space:normal}
.add-player-tabs button.selected{background:var(--r-surface);color:var(--r-link);box-shadow:0 1px 3px #00000014}
.segmented{display:flex;gap:2px;padding:2px;background:#e8e8ed;border-radius:12px}
.segmented button{flex:1;min-height:44px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:var(--r-ink-2);font-size:14px;font-weight:600;cursor:pointer}
.segmented button.selected{background:var(--r-surface);color:var(--r-ink);box-shadow:0 1px 3px #0000001f}
@media(max-width:700px){
 .livetabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:100%}
 .livetabs button{padding:8px 4px;font-size:14px;white-space:normal}
 .club-tabs{margin:24px 0 16px}
 .club-tabs button{font-size:15px;padding:8px 16px}
 .add-player-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
 .add-player-tabs button{font-size:14px}
 .segmented{width:100%}
 .segmented button{font-size:15px}
}

/* ---------- Badges ---------- */
.badge,.pill,.status,.event-status,.rolebadge,.attendance-status,.sessionmeta>span{padding:4px 10px;border:0;border-radius:999px;background:var(--r-bg);color:var(--r-ink-2);font-size:12px;font-weight:600;line-height:16px}
.badge,.pill,.status{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.event-status{min-height:24px}
.sessionmeta>span{display:inline-flex;align-items:center;min-height:24px}
.event-status.is-live,.status.playing,.attendance-status.checked{background:var(--r-blue-tint);color:var(--r-link)}
.event-status.cancelled{background:#fdecea;color:var(--r-danger)}

/* ---------- Inputs ---------- */
.field input,.field select,.field textarea,.chatcompose textarea,.planfield input,.planfield select,.settingrow select,.playerselector select{min-height:48px;border:1px solid var(--r-line-strong);border-radius:12px;background:var(--r-surface);color:var(--r-ink)}
.field textarea,.chatcompose textarea{min-height:110px}
.field input[type=checkbox],.field input[type=radio]{min-height:0;border:0;background:none}
.field input[type=file]{min-height:0}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,.chatcompose textarea:focus-visible,.planfield input:focus-visible,.planfield select:focus-visible,.settingrow select:focus-visible,.playerselector select:focus-visible{outline:2px solid var(--r-blue);outline-offset:1px;border-color:var(--r-blue)}
.field input::placeholder,.field textarea::placeholder{color:var(--r-ink-3)}

/* Native WebKit menus ignore min-height while using their platform appearance.
   Keep the native picker and keyboard behavior, with a consistent closed control. */
select:not([multiple]):not([size]){appearance:none;-webkit-appearance:none;box-sizing:border-box;height:48px;min-height:48px;min-width:0;max-width:100%;padding:10px 36px 10px 12px;border:1px solid var(--r-line-strong);border-radius:12px;background-color:var(--r-surface);color:var(--r-ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23515158' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
@media(max-width:700px){
 .field,.planfield{min-width:0}
 .field input:not([type=checkbox]):not([type=radio]),.field textarea,.field select{box-sizing:border-box;min-width:0;max-width:100%;font-size:16px}
 dialog .field:has(input[type=date]),dialog .field:has(input[type=datetime-local]){grid-column:1/-1}
 input[type=date],input[type=datetime-local]{min-inline-size:0}
 input::-webkit-date-and-time-value{text-align:left;min-height:1.5em}
 /* Reclaim space while typing; the field and submit button stay in normal flow. */
 body:has(textarea:focus,input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):focus) .bottom-nav{display:none}
 .field input,.field textarea,.field select{scroll-margin-block:88px}
 .participant-skill .skill-edit{min-height:44px;min-width:44px;font-size:14px}
}

/* Short, optional explanations share the host form's native disclosure pattern. */
.rally-info{margin:8px 0;color:var(--r-ink-2);font-size:14px;line-height:1.6}
.rally-info>summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-weight:550;list-style:none;border-radius:8px}
.rally-info>summary::-webkit-details-marker{display:none}
.rally-info>summary:after{content:'+';margin-left:auto;font-size:20px;font-weight:400}
.rally-info[open]>summary:after{content:'−'}
.rally-info>summary:focus-visible{outline:2px solid var(--r-blue);outline-offset:2px}
.rally-info .create-info-icon{display:inline-grid;place-items:center;width:20px;height:20px;flex:0 0 20px;border:1.5px solid currentColor;border-radius:50%;font-style:normal;font-size:13px;font-weight:650;line-height:1}
.rally-info .create-info-body{padding:0 0 8px 28px;overflow-wrap:anywhere}
.rally-info .create-info-body p{margin:8px 0}
.rally-info ul{margin:8px 0;padding-left:18px}
.rally-info li{margin-bottom:8px}

/* ---------- Sheets ---------- */
dialog{width:min(520px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 40px);padding:24px;border:1px solid var(--r-line);border-radius:20px;background:var(--r-surface);color:var(--r-ink);box-shadow:0 24px 64px #0000002e;overflow-y:auto;overscroll-behavior:contain}
dialog::backdrop{background:#1d1d1f59;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
/* The head sticks flush to the top of the sheet while its body scrolls. */
.sheethead{position:sticky;top:-24px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:-24px 0 8px;padding:20px 0 12px;background:var(--r-surface)}
.sheethead h2{margin:0;color:var(--r-ink);font-size:22px;font-weight:650;line-height:1.25;letter-spacing:-.02em}
.sheethead .iconbtn{margin-right:-6px}
.booking-review .sheethead{margin-top:0}
@media(max-width:660px){
 .booking-review .sheethead{padding-top:24px}
 /* Phones: bottom sheet with a grabber. */
 dialog,dialog:has(#create-event),dialog:has(#bulk-text){width:100%;max-width:100%;max-height:calc(100dvh - 16px);margin:auto 0 0;padding:0 16px max(24px,env(safe-area-inset-bottom));border-width:1px 0 0;border-radius:20px 20px 0 0}
 .sheethead{top:0;margin-top:0;padding-top:24px}
 .sheethead::before{content:"";position:absolute;top:8px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--r-line-strong)}
 .sheethead h2{font-size:20px}
}

/* ---------- Empty states ---------- */
.emptycard{grid-column:1/-1;padding:32px 24px;border:1px solid var(--r-line);border-radius:16px;background:var(--r-surface);color:var(--r-ink-2);font-size:15px;line-height:1.5;text-align:center}
.emptycard h2,.emptycard h3{margin:0 0 6px;color:var(--r-ink);font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.emptycard p{max-width:46ch;margin:0 auto}
.emptycard .btn{margin-top:16px}

/* ---------- Play Outlook ---------- */
.capacitystrip{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:16px;padding:20px 24px;border:1px solid var(--r-line);border-radius:16px;background:var(--r-surface);color:var(--r-ink-2)}
.capacitystrip>div:first-child{flex:1;min-width:0}
.capacitystrip .smallcaps{display:block;margin-bottom:12px;color:var(--r-ink-2);font-size:12px;font-weight:600;letter-spacing:.06em}
.capacitystrip>div>b{display:block;margin:0 0 4px;color:var(--r-ink);font-size:17px;font-weight:600}
.capacitystrip p{margin:4px 0 0;font-size:15px;line-height:1.5}
.capacitystrip strong{color:var(--r-ink);font-weight:600}
.capacitystrip small{display:block;margin-top:8px;font-size:13px;line-height:1.5;color:var(--r-ink-2)}
.outlook-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.outlook-facts>div{min-width:0;padding:14px 16px;border-radius:12px;background:var(--r-bg)}
.outlook-facts dt{margin:0 0 4px;color:var(--r-ink-2);font-size:13px;font-weight:600}
.outlook-facts dd{margin:0}
.outlook-facts dd b{display:block;color:var(--r-ink);font-size:20px;font-weight:650;line-height:1.2;letter-spacing:-.01em}
.outlook-facts dd span{display:block;margin-top:4px;color:var(--r-ink-2);font-size:13px;line-height:1.45}
@media(max-width:700px){
 .capacitystrip{flex-direction:column;align-items:stretch;gap:16px;padding:16px}
 .outlook-facts{grid-template-columns:1fr;gap:8px}
 .outlook-facts>div{padding:12px 14px}
 .outlook-facts dd b{font-size:17px}
}

/* ---------- Standings ----------
   Narrow tables (phones, or the simulator beside its sidebar) keep Rank, Player, W–L, Win % and
   points together without sideways scrolling. Columns marked .standings-secondary (games played,
   point diff) show once the table itself is wider than 540px. */
.standings-name{display:block;overflow-wrap:break-word}
.standings-handle{display:block;color:var(--r-ink-2);font-size:13px;line-height:1.35}
/* In standings, long names wrap and long handles shorten with an ellipsis instead of widening the table. */
table.standings .standings-name{white-space:normal}
table.standings .standings-handle{width:0;min-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.label-short{display:none}
.tablewrap:has(>table.standings){container-type:inline-size}
@media(max-width:560px){.tablewrap:has(>table.standings){padding:0}}
@container (max-width:540px){
 .tablewrap table.standings{width:100%;min-width:0;table-layout:auto;white-space:normal}
 .tablewrap table.standings .standings-secondary{display:none}
 /* Short column labels: "Pts" on screen, "Points" still read by screen readers. */
 .tablewrap table.standings .label-short{display:inline}
 .tablewrap table.standings .label-long{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .tablewrap table.standings th,.tablewrap table.standings td{padding-left:4px;padding-right:4px;white-space:nowrap}
 .tablewrap table.standings td:not(:nth-child(2)){font-size:13px;font-variant-numeric:tabular-nums}
 .tablewrap table.standings td:nth-child(2){width:100%;min-width:0;white-space:normal}
 .tablewrap table.standings th:first-child,.tablewrap table.standings td:first-child{width:24px;padding-left:6px;text-align:center}
 .tablewrap table.standings th:last-child,.tablewrap table.standings td:last-child{padding-right:8px}
 /* OG badge drops under the name when the row is narrow; artwork unchanged. */
 .tablewrap table.standings .og-name-badge{margin:4px 0 0}
}
#sheet .placement-review{width:100%;min-width:0;table-layout:fixed}
#sheet .placement-review th,#sheet .placement-review td{white-space:normal;overflow-wrap:anywhere;padding:12px 8px}
#sheet .placement-review th:first-child,#sheet .placement-review td:first-child{width:18%}

/* Session relationships stay separate from interclub ratings and member totals. */
.session-records .my-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.session-records .my-event-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;background:transparent;border:0;border-bottom:1px solid var(--line,#e4e7e8);border-radius:0;padding:16px 0}
.session-records .my-event-row>div{min-width:0}
.session-records .my-event-row b{font-size:16px;overflow-wrap:anywhere}
.session-records .my-event-row p{font-size:14px;line-height:1.5;margin:4px 0}
.session-records .my-event-row small{font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.session-records details{margin:12px 0}

/* Keep save results beside the action and phone toasts clear of the tab bar. */
.profile-editor .profile-feedback{margin:12px 0 0;font-size:14px;line-height:1.5;scroll-margin-bottom:24px}
.profile-editor .profile-feedback:empty{margin:0}
@media(max-width:700px){body:has(.bottom-nav) #toast{bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:40}body:has(.bottom-nav) .profile-editor .profile-feedback{scroll-margin-bottom:calc(96px + env(safe-area-inset-bottom,0px))}}