/* Shared workspace layout. Page-specific components retain their own semantics. */
body.yf-body { background:#f5f7f9; font-size:14px; }
.yf-navbar.navbar { box-shadow:none; border-bottom:1px solid #dfe6eb; }
.yf-navbar .nav-link { font-size:.86rem; }
.hub-brand-tag { font-size:.68rem; color:#42717e; border-left:1px solid #d8e1e6; margin-left:8px; padding-left:10px; letter-spacing:.08em; text-transform:uppercase; }
.hub-workspace { max-width:1320px; width:calc(100% - 64px); margin:0 auto; padding:32px 0 48px; }
.hub-page-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:26px; }
.hub-page-heading h1 { font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.25; font-weight:650; letter-spacing:-.035em; margin:0 0 8px; }
.hub-page-heading p { margin-bottom:0; }
.hub-eyebrow { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#427681; margin-bottom:9px!important; }
.hub-dashboard-grid { display:grid; grid-template-columns:minmax(0,1.9fr) minmax(260px,1fr); gap:22px; }
.hub-welcome-card { min-height:266px; border-radius:16px; padding:30px; color:white; background:linear-gradient(90deg,rgba(3,23,37,.65),rgba(3,23,37,.08)),url('../images/hub-sailing.webp') center / cover; }
.hub-welcome-card h2 { max-width:350px; font-size:1.85rem; line-height:1.2; font-weight:600; margin:16px 0 12px; letter-spacing:-.03em; }
.hub-welcome-card p { max-width:365px; color:#d2e2ea; font-size:.87rem; }
.hub-welcome-card .hub-eyebrow { color:#b2d8df; font-size:.65rem; }
.hub-welcome-card a { display:inline-block; margin-top:8px; font-weight:600; color:#fff; }
.hub-panel { min-width:0; background:white; border:1px solid #dfe6eb; border-radius:14px; overflow:hidden; }
.hub-panel h2 { font-size:1rem; font-weight:650; margin:0; }
.hub-quick-links { padding:22px 24px; }
.hub-quick-links h2 { margin-bottom:12px; }
.hub-quick-links a { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#17394c; padding:13px 0; border-bottom:1px solid #edf1f3; text-decoration:none; }
.hub-quick-links a:last-child { border:0; padding-bottom:0; }
.hub-quick-links a:hover strong { color:#138397; }
.hub-quick-links strong,.hub-result-name strong { display:block; font-size:.9rem; font-weight:600; }
.hub-quick-links small,.hub-result-name small { display:block; color:#697f8d; font-size:.78rem; margin-top:4px; }
.hub-stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin:22px 0; }
.hub-stat { padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hub-stat span { color:#637b89; font-size:.85rem; }
.hub-stat strong { font-size:1.8rem; font-weight:600; font-variant-numeric:tabular-nums; color:#183849; }
.hub-stat small { font-size:.75rem; font-weight:500; }
.hub-panel-heading { padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid #e8edf0; }
.hub-panel-heading a { font-size:.8rem; font-weight:600; }
.hub-result-row { display:flex; align-items:center; gap:16px; padding:16px 24px; border-bottom:1px solid #edf1f3; color:#193849; text-decoration:none; }
.hub-result-row:last-child { border-bottom:0; }
.hub-result-row:hover { background:#f3f9fa; text-decoration:none; }
.hub-result-icon { display:grid; place-items:center; width:38px; height:38px; flex-shrink:0; border:1px solid #dcebed; border-radius:10px; color:#23758a; background:#f2f8f8; }
.hub-result-name { flex:1; min-width:0; overflow-wrap:anywhere; }
.hub-result-duration { font-variant-numeric:tabular-nums; color:#68808d; font-size:.85rem; white-space:nowrap; }
.hub-empty { text-align:center; padding:42px 24px; color:#637b89; }
.hub-empty h3 { color:#193849; font-size:1.1rem; }
.hub-public-hero { min-height:510px; display:flex; align-items:center; padding:70px max(32px,calc((100vw - 1256px)/2)); color:white; background:linear-gradient(90deg,rgba(3,23,37,.65),transparent),url('../images/hub-sailing.webp') center / cover; }
.hub-public-hero>div { max-width:570px; }
.hub-public-hero .hub-eyebrow { color:#a5d8df; }
.hub-public-hero h1 { font-size:clamp(2rem,4vw,3.4rem); letter-spacing:-.04em; line-height:1.13; font-weight:600; margin:18px 0 22px; }
.hub-public-hero p:not(.hub-eyebrow) { max-width:460px; font-size:1.05rem; color:#dae8ee; }
.hub-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.hub-public-features { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; padding-top:36px; }
.hub-public-features h2 { font-size:1.15rem; font-weight:600; }
.hub-public-features p { color:#637b89; font-size:.9rem; }
.hub-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; border-bottom:1px solid #dfe6eb; padding:0 0 10px; }
.hub-tabs a,.hub-tabs button { color:#607785; background:transparent; border:0; padding:10px 16px; border-radius:8px; font-size:.88rem; cursor:pointer; text-decoration:none; font-weight:600; }
.hub-tabs [aria-selected=true],.hub-tabs .active { color:#125d6e; background:#e1f0f1; }
.hub-tabs a:hover,.hub-tabs button:hover { background:#eaf2f4; }
[hidden] { display:none!important; }
.school-page>.container { max-width:1320px; padding-top:30px!important; }
.school-hero { background:transparent; color:#17394c; padding:0 0 20px; border:0; border-radius:0; box-shadow:none; gap:24px; }
.school-hero::after { display:none; }
.school-hero-title { color:#17394c; font-size:1.85rem; font-weight:650; }
.school-hero-label { color:#507b86; }
.school-hero-stat { border-color:#dfe6eb; background:white; min-width:110px; padding:10px 18px; }
.school-hero-stat strong { color:#17394c; font-size:1.4rem; }
.school-hero-stat span { color:#637b89; }
.sc-card { box-shadow:none; border-color:#dfe6eb; border-radius:14px; }
.sc-card-header { padding:18px 22px; }
.sc-card-body { padding:22px; }
.hub-add-participant { margin-bottom:22px; }
.hub-add-participant>summary { cursor:pointer; list-style:none; padding:16px 22px; font-weight:600; color:#19576b; background:#f0f7f8; }
.hub-add-participant>summary::after { content:'⌄'; float:right; }
.hub-add-participant .sc-card { border:0; border-top:1px solid #dfe6eb; border-radius:0; }
.hub-add-participant .add-card-header { display:none; }
.hub-roster-toolbar { display:flex; align-items:center; gap:16px; margin-left:auto; }
.hub-roster-toolbar input { max-width:240px; min-height:36px; font-size:.85rem; }
.sc-table tbody td { padding:16px 22px!important; }
.sc-table .p-name a { color:#17394c; }
.sc-table .p-name a:hover { color:#137c8e; }
.sc-table .p-email { overflow-wrap:anywhere; }
.sc-table form { margin:0; }
.role-pill { font-size:.75rem; font-weight:600; }
.sc-table .p-avatar { width:40px; height:40px; }
.app-main>.ts-page { max-width:1400px; padding-top:30px; gap:18px; }
.ts-hero { background:transparent; color:#17394c; box-shadow:none; padding:0 0 6px; border-radius:0; align-items:center; }
.ts-title { color:#17394c; text-shadow:none; font-size:1.85rem; font-weight:650; }
.ts-kicker { color:#507b86; font-size:.7rem; }
.ts-subtitle { color:#637b89; max-width:650px; font-size:.9rem; }
.ts-stat { background:white; border:1px solid #dfe6eb; border-radius:12px; min-width:100px; }
.ts-stat-value { color:#17394c; font-size:1.4rem; }
.ts-stat-label { color:#637b89; }
.ts-toolbar,.ts-owner-tools,.ts-table-card { box-shadow:none; border-radius:14px; border-color:#dfe6eb; }
.ts-table { font-size:.86rem; }
.ts-table td { padding:13px 14px; }
.ts-pass { color:#234654; background:#edf4f5; font-size:.8rem; min-width:76px; padding:8px; }
.ts-pill { padding:5px 7px; font-size:.72rem; }
.ts-analytics .ts-card { box-shadow:none; }
.hub-account-nav { max-width:760px; margin:26px auto 0; padding:0 16px; }
.hub-account-nav+.container { padding-top:14px!important; }
@media(max-width:767px) {
 .hub-workspace { width:calc(100% - 32px); padding:22px 0 32px; }
 .hub-page-heading { align-items:flex-start; flex-direction:column; gap:14px; margin-bottom:20px; }
 .hub-dashboard-grid { grid-template-columns:1fr; gap:16px; }
 .hub-welcome-card { min-height:245px; padding:24px; background-position:58% center; }
 .hub-welcome-card h2 { max-width:260px; font-size:1.65rem; }
 .hub-welcome-card p { max-width:255px; }
 .hub-stat-grid { gap:10px; margin:16px 0; }
 .hub-stat { padding:14px 10px; display:block; }
 .hub-stat strong { display:block; margin-top:6px; font-size:1.5rem; }
 .hub-stat span { font-size:.72rem; }
 .hub-panel-heading,.hub-result-row { padding:16px; gap:10px; }
 .hub-public-hero { padding:48px 24px; min-height:490px; background-position:60% center; }
 .hub-public-features { grid-template-columns:1fr; gap:20px; }
 .hub-tabs { flex-wrap:nowrap; overflow-x:auto; }
 .hub-tabs a,.hub-tabs button { padding:9px 12px; white-space:nowrap; }
 .school-hero { padding:0 0 12px; }
 .school-hero-title { font-size:1.5rem; }
 .school-hero-stat { display:none; }
 .hub-roster-toolbar { width:100%; margin:4px 0 0; }
 .hub-roster-toolbar input { max-width:none; width:100%; }
 .sc-table { min-width:0; }
 .sc-table thead { display:none; }
 .sc-table tbody tr { display:flex; flex-wrap:wrap; align-items:center; padding:12px 16px; gap:10px; }
 .sc-table tbody td { padding:0!important; border:0; }
 .sc-table tbody td:first-child { flex-basis:100%; }
 .sc-table tbody td:last-child { margin-left:auto; }
 .sc-table .p-email { max-width:260px; }
 .ts-hero { padding:0; gap:12px; }
 .ts-stats { display:none; }
 .ts-toolbar-grid { gap:12px; }
 .ts-search-actions { display:grid; grid-template-columns:1fr 1fr; }
 .ts-table { min-width:760px; }
 .hub-account-nav { margin-top:18px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

.hub-public-hero h1,.hub-welcome-card h2 { color:#fff; }

.ts-page > *,.ts-page [data-panel],.ts-analytics > * { min-width:0; }
.ts-page > [data-panel=results] { display:grid; gap:16px; }
.ts-page > [data-panel=results] > form { min-width:0; display:grid; gap:16px; }

/* Practice workspace: one overview, focused detail views. */
.ts-page > .hub-tabs { margin-bottom:0; padding-bottom:5px; }
.ts-pill-yacht { background:#eee7f8; color:#755393; }
.ts-hero>div:first-child { position:relative; padding-right:115px; }
.hub-own-practice { position:absolute; right:0; top:8px; font-size:.82rem; color:#16768a; padding:8px; background:#e5f1f3; border-radius:8px; }
.app-main>.ts-page { padding-top:22px; gap:12px; }
.ts-hero { gap:16px; }
.ts-hero .ts-kicker { display:none; }
.ts-title { font-size:1.65rem; margin-bottom:4px; }
.ts-subtitle { margin:0; }
.ts-stat { padding:10px 16px; }
.ts-toolbar { padding:10px 16px; gap:0; }
.ts-toolbar-grid { flex-wrap:nowrap; gap:14px; }
.ts-toolbar .ts-filter-search { flex:1; min-width:180px; }
.ts-toolbar .ts-filter { margin:0; }
.ts-toolbar input[name=day] { width:145px; }
.ts-filter-label { font-size:.66rem; }
.ts-toolbar .ts-input,.ts-toolbar .ts-btn { min-height:36px; height:36px; padding:6px 11px; border-radius:8px; font-size:.82rem; }
.ts-search-actions { flex-shrink:0; }
.hub-filter-options { margin-top:8px; color:#637b89; font-size:.78rem; }
.hub-filter-options summary { cursor:pointer; width:fit-content; }
.hub-filter-options .ts-fieldset { margin-top:10px; }
.hub-filter-options .ts-filter-label { display:none; }
.hub-filter-options .ts-toggle-group { flex-direction:row; flex-wrap:wrap; gap:12px; }
.hub-person-scopes { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.hub-person-scopes a { padding:7px 12px; border-radius:8px; color:#526c7a; font-size:.83rem; }
.hub-person-scopes a[aria-current=page] { background:#dceff0; color:#116372; font-weight:650; }
.hub-person-scopes .hub-person-clear { margin-left:auto; }
.hub-person-notice { padding:10px 14px; margin:0; border-left:3px solid #c49851; border-radius:6px; background:#fff8e9; color:#74552e; font-size:.83rem; }
.sc-table a.p-avatar { flex-shrink:0; text-decoration:none; }
.sc-table a.p-avatar:hover { box-shadow:0 0 0 3px #c3e5e8; }
.ts-analytics { padding:14px; border-radius:14px; gap:10px; box-shadow:none; background:#f5f8fa; }
.hub-analytics-nav { margin:0; padding:0; gap:4px; border:0; }
.hub-analytics-nav button { padding:6px 12px; font-size:.8rem; border-radius:8px; }
.ts-analytics-head { display:flex; align-items:baseline; gap:12px; }
.ts-analytics-title { font-size:.9rem; font-weight:650; }
.ts-analytics-subtitle { font-size:.75rem; }
.hub-overview { display:grid; gap:10px; }
.ts-card-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.ts-insight-card,.ts-analytics-panel { border-radius:10px; padding:12px; box-shadow:none; }
.ts-insight-label,.ts-panel-label { font-size:.64rem; letter-spacing:.04em; }
.ts-insight-value { font-size:1.4rem; margin-top:7px; font-weight:650; }
.ts-insight-hint { margin-top:5px; font-size:.7rem; line-height:1.35; }
.ts-analytics-grid { grid-template-columns:1fr 1.65fr; gap:10px; }
.hub-quality-list { display:grid; gap:10px; margin-top:10px; }
.hub-quality-item { display:grid; gap:6px; }
.hub-quality-item .ts-panel-row { font-size:.8rem; }
.hub-quality-item .ts-panel-meta { font-size:.72rem; }
.ts-progress { height:6px; background:#e5eef1; }
.ts-progress-fill { background:#23869a; }
.ts-bars { min-height:0; height:130px; gap:8px; padding-top:8px; }
.ts-bar-col { gap:4px; height:100%; grid-template-rows:16px 1fr 16px; }
.ts-bar-wrap { min-height:0; height:100%; padding:0 10px; }
.ts-bar-stack { min-height:4px; border-radius:5px 5px 0 0; }
.ts-bar-count,.ts-bar-label { font-size:.68rem; }
.ts-bar-independent,.ts-legend-dot-independent { background:#397cb1; }
.ts-bar-lesson,.ts-legend-dot-lesson { background:#258f83; }
.ts-bar-button:focus-visible { outline:2px solid #152f43; outline-offset:2px; }
.ts-bar-legend { margin-top:8px; gap:12px; }
.ts-legend-item { font-size:.7rem; gap:5px; }
.ts-daily-detail { margin:0 0 10px; padding:12px; border-radius:10px; background:#edf5f7; }
.ts-daily-detail-title { font-size:.75rem; letter-spacing:0; }
.ts-daily-detail-body { margin-top:4px; font-size:.82rem; }
.hub-people-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.ts-analytics .ts-panel-list { margin-top:10px; gap:14px; max-height:300px; overflow-y:auto; scrollbar-gutter:stable; padding-right:6px; }
.ts-panel-row { font-size:.85rem; }
.ts-panel-meta,.ts-panel-submeta { font-size:.76rem; }
.ts-analytics a { color:#176e81; }
.hub-activity-days { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.hub-activity-days button { border:1px solid #cbdde5; background:#fff; color:#225268; border-radius:7px; padding:6px 10px; font-size:.78rem; }
.hub-activity-days button:hover,.hub-activity-days button:focus-visible { background:#e2eff2; }
.hub-activity-days span { margin-left:6px; font-weight:700; }
@media(min-width:1100px) and (max-height:820px) {
 .app-main>.ts-page { padding-top:16px; padding-bottom:16px; gap:8px; }
 .ts-hero { padding-bottom:0; }
 .ts-hero .ts-stat { padding:6px 12px; }
 .ts-analytics { padding:10px; gap:8px; }
 .ts-insight-card { padding:8px; }
 .ts-analytics>[data-panel=activity] { max-height:280px; overflow:auto; }
 .ts-analytics>[data-panel=activity] .ts-panel-list { max-height:none; overflow:visible; }
 .ts-analytics-grid>.ts-analytics-panel { padding:10px; }
 .ts-insight-hint { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
 .ts-insight-hint { font-size:.66rem; }
 .ts-analytics .ts-panel-list { max-height:250px; }
}
@media(max-width:900px) {
 .ts-analytics-head { display:grid; gap:3px; }
 .ts-toolbar-grid { flex-wrap:wrap; }
 .ts-toolbar .ts-filter-search { min-width:200px; }
 .ts-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .ts-analytics-grid,.hub-people-grid { grid-template-columns:1fr; }
}
@media(max-width:600px) {
 .ts-hero>div:first-child { padding-right:0; }
 .hub-own-practice { position:static; display:inline-block; margin-top:8px; }
 .ts-toolbar input[name=day] { width:130px; }
 .ts-toolbar .ts-filter-search { flex-basis:100%; }
 .ts-toolbar .ts-search-actions { display:flex; flex-wrap:wrap; flex:1; }
 .ts-toolbar .ts-btn { width:auto; flex:1; }
 .ts-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .ts-card-grid .ts-insight-card:last-child { grid-column:1 / -1; }
 .ts-analytics { padding:10px; }
 .ts-analytics .ts-panel-list { max-height:none; }
 .ts-analytics-subtitle { line-height:1.4; }
 .ts-bar-wrap { padding:0 3px; }
 .hub-person-scopes .hub-person-clear { margin-left:0; }
 .hub-public-hero { background-image:linear-gradient(90deg,rgba(3,23,37,.84),rgba(3,23,37,.55)),url('../images/hub-sailing.webp'); }
 .hub-welcome-card { background-image:linear-gradient(90deg,rgba(3,23,37,.86),rgba(3,23,37,.55)),url('../images/hub-sailing.webp'); }
 .hub-public-hero h1,.hub-public-hero p,.hub-welcome-card h2,.hub-welcome-card p { text-shadow:0 1px 3px rgba(0,0,0,.25); }
}