/* Vela Performance — coach panel (Operate mode: dense, calm, light) */
body { background: var(--paper); font-size: 15px; }

/* login */
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background:
  radial-gradient(90% 70% at 80% 0%, #0f2c5c 0%, rgba(15, 44, 92, 0) 60%), var(--navy-950); }
.login-card { width: min(400px, 100%); background: var(--white); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: 18px; }
.login-badge { align-self: flex-start; padding: 14px 22px; background: var(--navy-900); border-radius: 999px; }
.login-logo { width: 140px; aspect-ratio: 1125 / 470; overflow: visible; }
.login-card h1 { margin: 6px 0 0; font-family: var(--f-display); font-style: italic; font-weight: 800; font-stretch: 125%; text-transform: uppercase; font-size: 1.6rem; color: var(--navy-900); }
.login-card > p { margin: -8px 0 0; color: var(--ink-2); font-size: .92rem; }
.login-card .btn { width: 100%; }
.login-back { text-align: center; font-size: .85rem; color: var(--ink-3); }

/* bar */
.bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 24px; height: 60px; padding: 0 20px; background: var(--navy-900); color: var(--white); }
.bar-logo { width: 96px; aspect-ratio: 1125 / 470; }
.bar-tabs { display: flex; gap: 2px; height: 100%; }
.bar-tabs button { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 14px; border: 0; background: transparent; color: var(--ice-300); font-weight: 600; font-size: .9rem; cursor: pointer; }
.bar-tabs button:hover { color: var(--white); }
.bar-tabs button[aria-selected="true"] { color: var(--white); }
.bar-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--orange); }
.badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--orange); color: var(--navy-950); font-size: .72rem; font-weight: 800; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.bar-user { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--ice-300); white-space: nowrap; }
.icon-btn { width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--ice); display: grid; place-items: center; cursor: pointer; }
.icon-btn:hover { background: rgba(172, 215, 248, .12); color: var(--white); }
.icon-btn svg { width: 20px; height: 20px; }

/* views */
.view { padding: 20px 20px 48px; max-width: 1400px; margin: 0 auto; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 16px; }
.view-title { margin: 0; font-size: 1.25rem; }
.view-note { margin: 0 auto 0 0; color: var(--ink-3); font-size: .88rem; max-width: 60ch; }
.seg { display: flex; gap: 2px; padding: 3px; background: var(--white); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); overflow-x: auto; scrollbar-width: none; }
.seg button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; font-weight: 600; font-size: .85rem; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.seg button span { color: var(--ink-3); font-weight: 500; margin-left: 2px; font-variant-numeric: tabular-nums; }
.seg button:hover { background: var(--ice-50); }
.seg button[aria-checked="true"] { background: var(--navy-900); color: var(--white); }
.seg button[aria-checked="true"] span { color: var(--ice-300); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; align-items: center; }
.filters .input, .filters .select { min-height: 38px; padding-top: 7px; padding-bottom: 7px; font-size: .88rem; border-radius: 8px; width: auto; }
.filters .select { max-width: 260px; }
.search { position: relative; }
.search svg { position: absolute; left: 11px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.search .input { padding-left: 34px; width: 240px; }

.summary { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 14px 16px; margin-bottom: 12px; background: var(--white); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); font-size: .88rem; color: var(--ink-2); }
.summary b { color: var(--ink); font-variant-numeric: tabular-nums; }
.summary .over { color: var(--bad); }

/* table */
.table-wrap { background: var(--white); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th { position: sticky; top: 0; text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--white); white-space: nowrap; }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.table tbody tr { cursor: pointer; transition: background-color .12s; }
.table tbody tr:hover { background: var(--ice-50); }
.table tbody tr:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.table tbody tr.is-new td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
.table tbody tr.is-new .t-name { font-weight: 700; }
.table tr:last-child td { border-bottom: 0; }
.t-when { white-space: nowrap; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.t-name { color: var(--ink); font-weight: 600; }
.t-sub { display: block; color: var(--ink-3); font-size: .8rem; margin-top: 2px; }
.t-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.tag { display: inline-block; padding: 1px 7px; border-radius: 5px; font-size: .72rem; font-weight: 700; background: var(--ice-100); color: var(--navy-700); }
.tag-warn { background: var(--warn-100); color: var(--warn); }
.kind { font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.empty { padding: 48px 16px; text-align: center; color: var(--ink-3); }
.empty b { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 4px; }

.st { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-new { background: var(--orange-100); color: #9c4a05; }
.st-confirmed { background: var(--ice-100); color: var(--navy-700); }
.st-waitlist { background: var(--warn-100); color: var(--warn); }
.st-paid, .st-done { background: var(--ok-100); color: var(--ok); }
.st-declined { background: var(--line-2); color: var(--ink-3); }
.st-open { background: var(--orange-100); color: #9c4a05; }
.st-closed { background: var(--line-2); color: var(--ink-3); }
.st-draft { background: var(--line-2); color: var(--ink-2); }

/* drawer */
.scrim { position: fixed; inset: 0; background: rgba(2, 11, 31, .38); z-index: 40; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--white); z-index: 41; box-shadow: -20px 0 50px -20px rgba(6, 20, 46, .35); transform: translateX(105%); transition: transform .35s var(--ease-out); overflow-y: auto; outline: none; }
.drawer.open { transform: none; }
.drawer-inner { padding: 0 0 32px; }
.d-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px 16px; background: var(--white); border-bottom: 1px solid var(--line); }
.d-head h2 { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.d-head p { margin: 4px 0 0; color: var(--ink-3); font-size: .85rem; }
.d-head .icon-btn { margin-left: auto; color: var(--ink-2); flex: none; }
.d-head .icon-btn:hover { background: var(--line-2); color: var(--ink); }
.d-sec { padding: 20px 24px 4px; }
.d-sec h3 { margin: 0 0 12px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.d-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.d-actions .btn svg { width: 16px; height: 16px; }
.status-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.status-seg button { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white); font-size: .82rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.status-seg button:hover { border-color: #b9c7d8; }
.status-seg button[aria-pressed="true"] { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); }
.kv { margin: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0; font-size: .9rem; }
.kv dt, .kv dd { padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.kv dt { color: var(--ink-3); padding-right: 12px; }
.kv dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; }
.kv .no { color: var(--bad); font-weight: 600; }
.sailor-card + .sailor-card { margin-top: 18px; }
.sailor-card h4 { margin: 0 0 6px; font-size: .95rem; }
.d-notes .textarea { min-height: 90px; font-size: .92rem; }
.d-notes .row { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .input, .form-grid .select, .form-grid .textarea { min-height: 42px; padding-top: 9px; padding-bottom: 9px; font-size: .92rem; }
.d-foot { display: flex; justify-content: space-between; gap: 8px; padding: 20px 24px 0; margin-top: 12px; }

/* team */
.team { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.team-list { margin: 0; padding: 0; list-style: none; background: var(--white); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); }
.team-list li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.team-list li:last-child { border-bottom: 0; }
.team-list .who { font-weight: 600; }
.team-list .tm-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.team-list .tm-mail { color: var(--ink-3); font-size: .82rem; overflow-wrap: anywhere; }
.team-list .tm-mail b { color: var(--ink-2, var(--ink)); font-weight: 600; }
.link-btn { background: none; border: 0; padding: 0 2px; font: inherit; font-weight: 600; color: var(--navy-700, #0a2148); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.team-list .since { color: var(--ink-3); font-size: .82rem; margin-left: 6px; }
.team-list .you { color: var(--ok); font-size: .8rem; font-weight: 700; }
.team-list .btn { margin-left: auto; }
.team-add { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--white); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); }
.code-box { margin-top: 12px; padding: 14px; border-radius: var(--r); background: var(--ice-100); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.05rem; font-weight: 600; letter-spacing: .04em; text-align: center; color: var(--navy-900); user-select: all; }

@media (max-width: 860px) {
  .bar { gap: 8px; padding: 0 8px 0 14px; }
  .bar-logo { width: 72px; }
  .bar-user [data-me] { display: none; }
  .bar-tabs button { padding: 0 9px; font-size: .84rem; }
  .filters { margin-left: 0; width: 100%; }
  .search, .search .input { width: 100%; }
  .search { flex: 1 1 100%; }
  .filters .select { flex: 1 1 140px; max-width: none; }
  .team { grid-template-columns: 1fr; }
  .view { padding: 14px 12px 40px; }
  .kv { grid-template-columns: 120px minmax(0, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  /* table becomes a list on phones */
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; }
  .table tr { padding: 12px 14px; border-bottom: 1px solid var(--line-2); position: relative; }
  .table td { padding: 0; border: 0; }
  .table td.t-when { font-size: .78rem; color: var(--ink-3); }
  .table td.t-status { position: absolute; top: 12px; right: 14px; }
  .table td.t-contact, .table td.kind { display: none; }
  .table td.t-event { color: var(--ink-3); font-size: .82rem; margin-top: 2px; }
  .table tbody tr.is-new td:first-child { box-shadow: none; }
  .table tbody tr.is-new { box-shadow: inset 3px 0 0 var(--orange); }
}

.invite-link { font-size: .78rem; text-align: left; overflow-wrap: anywhere; user-select: all; margin: 4px 0 10px; }
.invite p { margin: 0 0 10px; font-size: .9rem; }
.banner { margin-bottom: 12px; padding: 12px 16px; border-radius: var(--r); background: var(--warn-100); color: var(--warn); font-size: .88rem; }
.banner b { color: #6e4100; }
.st-note { margin: 10px 0 0; }

/* ===================== Sezon takvimi ===================== */
.view-wide { max-width: 1600px; }
.icon-btn-ink { color: var(--ink-2); }
.icon-btn-ink:hover { background: var(--line-2); color: var(--ink); }
.cal-toolbar { align-items: center; }
.cal-season { display: flex; align-items: center; gap: 4px; margin-right: 8px; }
.cal-season .view-title { min-width: 9.5em; text-align: center; }
.cal-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white); font-size: .84rem; font-weight: 600; color: var(--ink-3); cursor: pointer; }
.chip .dot { width: 10px; height: 10px; border-radius: 3px; background: var(--line); }
.chip[aria-pressed="true"] { color: var(--ink); border-color: #b9c7d8; }
.chip-vela[aria-pressed="true"] .dot { background: #0a2148; }
.chip-yaris[aria-pressed="true"] .dot { background: #f07f1d; }
.chip-okul[aria-pressed="true"] .dot { background: #7cc58a; }
.chip-sinav[aria-pressed="true"] .dot { background: #f2b46b; }
.chip-resmi[aria-pressed="true"] .dot { background: #e98b8b; }
.chip[aria-pressed="false"] { text-decoration: line-through; text-decoration-color: rgba(91,106,130,.5); }
.cal-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px; font-size: .78rem; color: var(--ink-2); }
.lg { display: inline-flex; align-items: center; gap: 6px; }
.lg-sep { width: 1px; height: 14px; background: var(--line); }
.lg-iptal { text-decoration: line-through; }
.sw { display: inline-block; width: 22px; height: 12px; border-radius: 3px; flex: none; background: var(--c, var(--line)); border: 1.5px solid var(--c, var(--line)); }
.sw-we { background: #eef1f5; border-color: #dfe5ec; }
.sw-na { background: repeating-linear-gradient(135deg, #d5dce5 0 3px, #eef1f5 3px 6px); border-color: #d5dce5; }
.sw-today { width: 4px; background: var(--orange); border-color: var(--orange); }

/* type colours: fill (--c) and text (--t) */
.t-klinik { --c: #0a2148; --t: #ffffff; --tl: #0a2148; }
.t-yaris_uluslararasi { --c: #f07f1d; --t: #2a1300; --tl: #8a4100; }
.t-yaris_tyf { --c: #5aa6e6; --t: #04203d; --tl: #10466f; }
.t-okul_tatil { --c: #bfe6c6; --t: #1d5a2b; --tl: #1d5a2b; }
.t-sinav { --c: #fbd9b4; --t: #7d4206; --tl: #7d4206; }
.t-resmi_tatil { --c: #f6c9c9; --t: #8a1f1f; --tl: #8a1f1f; }

/* the grid */
.cal-wrap { --lane-top: 26px; --lane-low: 17px; --mcol: 118px; overflow-x: auto; background: var(--white); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); scrollbar-width: thin; }
.cal { min-width: calc(var(--mcol) + 31 * 31px); }
.cal-row { display: grid; grid-template-columns: var(--mcol) minmax(0, 1fr); border-bottom: 1px solid var(--line-2); }
.cal-row:last-child { border-bottom: 0; }
.cal-mcol { position: sticky; left: 0; z-index: 3; display: flex; align-items: center; padding: 6px 12px; background: var(--white); border-right: 1px solid var(--line); font-size: .84rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.cal-head { position: sticky; top: 0; z-index: 4; }
.cal-head .cal-mcol { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); z-index: 5; }
.cal-days { display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); background: var(--white); }
.cal-days span { padding: 7px 0; text-align: center; font-size: .72rem; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; border-left: 1px solid var(--line-2); }
.cal-month { position: relative; display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); padding: 4px 0; row-gap: 3px; min-height: 52px; }
.cal-day { grid-row: 1 / -1; margin: -4px 0; border-left: 1px solid var(--line-2); cursor: copy; position: relative; }
.cal-day:hover { background: var(--ice-50); }
.cal-day.is-we { background: #f1f4f8; }
.cal-day.is-we:hover { background: #e9eef5; }
.cal-day.is-na { background: repeating-linear-gradient(135deg, #e3e8ef 0 4px, #f3f5f8 4px 8px); cursor: default; pointer-events: none; }
.cal-day.is-today { background: rgba(240, 127, 29, .08); }
.cal-day.is-today::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--orange); z-index: 2; pointer-events: none; }

.cal-bar { position: relative; z-index: 1; display: flex; align-items: center; min-width: 0; margin: 0 1px; padding: 0 7px; border: 1.5px solid var(--c); border-radius: 6px; background: var(--c); color: var(--t); font: 600 .74rem/1 var(--f-body); text-align: left; cursor: pointer; overflow: hidden; transition: filter .15s, box-shadow .15s; }
.cal-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cal-bar:hover, .cal-bar:focus-visible { filter: brightness(1.06); box-shadow: 0 2px 8px rgba(6, 20, 46, .18); z-index: 4; }
.cal-bar.is-low { font-size: .66rem; font-weight: 600; border-radius: 4px; padding: 0 5px; opacity: .92; }
.cal-bar.cont-l { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.cal-bar.cont-r { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }

/* status looks (bars, swatches, list) */
.s-onerilen, .s-planlandi, .s-ongoruluyor { background: color-mix(in srgb, var(--c) 28%, white); border-style: dashed; color: var(--tl); }
.s-tamamlandi { opacity: .55; }
.cal-bar.s-tamamlandi.is-low { opacity: .5; }
.s-iptal { opacity: .45; background: color-mix(in srgb, var(--c) 30%, white); color: var(--tl); }
.cal-bar.s-iptal span, .cl-item.s-iptal b { text-decoration: line-through; }

/* hover / tap card */
.cal-pop { position: fixed; z-index: 60; width: min(320px, calc(100vw - 16px)); padding: 14px 16px 12px; background: var(--white); border-radius: var(--r); box-shadow: var(--shadow-2), 0 0 0 1px var(--line); font-size: .86rem; }
.cp-head { display: flex; gap: 10px; align-items: flex-start; }
.cp-head .sw { margin-top: 4px; }
.cp-head h4 { margin: 0; font-size: .98rem; line-height: 1.3; }
.cp-date { margin: 6px 0 8px; color: var(--ink-2); }
.cp-date span { color: var(--ink-3); }
.cal-pop dl { margin: 0; display: grid; gap: 4px; }
.cal-pop dl div { display: grid; grid-template-columns: 70px 1fr; gap: 8px; }
.cal-pop dt { color: var(--ink-3); }
.cal-pop dd { margin: 0; color: var(--ink); }
.cp-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-2); }

/* list view */
.cal-list { background: var(--white); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); padding: 4px 16px 12px; }
.cl-month h3 { margin: 18px 0 8px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cl-month ul { list-style: none; margin: 0; padding: 0; }
.cl-item { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--line-2); background: none; text-align: left; cursor: pointer; border-radius: 6px; font-size: .88rem; color: var(--ink); }
.cl-item:hover { background: var(--ice-50); }
.cl-item.s-onerilen, .cl-item.s-planlandi, .cl-item.s-ongoruluyor, .cl-item.s-tamamlandi, .cl-item.s-iptal { background: none; border-style: solid; color: var(--ink); opacity: 1; }
.cl-item.s-tamamlandi .cl-main, .cl-item.s-iptal .cl-main { opacity: .6; }
.cl-date { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cl-main b { display: block; font-weight: 600; }
.cl-main small { color: var(--ink-3); }
.cl-tags { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--ink-3); white-space: nowrap; }
.cl-empty { margin: 0 0 6px; font-size: .84rem; color: var(--ink-3); }
.cal-meta { margin: 10px 2px 0; font-size: .8rem; color: var(--ink-3); }

/* dialogs */
.cal-dlg { width: min(560px, calc(100vw - 24px)); }
.cal-json { width: min(980px, calc(100vw - 24px)); }
.cal-json p { font-size: .85rem; }
.cal-json code { font-size: .78rem; background: var(--ice-100); padding: 2px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.cal-json-text { margin-top: 12px; min-height: 52vh; font: .78rem/1.55 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre; overflow: auto; }

@media (max-width: 860px) {
  .cal-wrap { --mcol: 92px; }
  .cal-mcol { font-size: .76rem; padding: 6px 8px; }
  .cal-actions { margin-left: 0; width: 100%; }
  .cal-season { width: 100%; justify-content: space-between; margin: 0; }
  .cl-item { grid-template-columns: 1fr; gap: 4px; }
  .cl-tags { white-space: normal; }
}
.bar-tabs { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.bar-tabs::-webkit-scrollbar { display: none; }
.bar-brand, .bar-user { flex: none; }
@media (max-width: 860px) { .bar-logo { width: 60px; } .bar-tabs button { padding: 0 8px; } }
.team-side { display: grid; gap: 16px; }
.connect h3 { margin: 0; font-size: 1rem; }
.connect p { margin: 0; font-size: .86rem; color: var(--ink-2); }
.connect .code-box { margin: 0; }
.connect .btn { align-self: flex-start; }
.connect-steps { margin: 0; padding-left: 18px; font-size: .84rem; color: var(--ink-2); display: grid; gap: 4px; }
/* class switch + milli kamp */
.cal-titles { display: flex; flex-direction: column; align-items: center; min-width: 9.5em; }
.cal-titles .view-title { min-width: 0; }
.cal-sub { font-size: .76rem; font-weight: 700; color: var(--orange-600); letter-spacing: .04em; }
.cal-class button { display: inline-flex; align-items: center; gap: 6px; }
.cal-class button span { font-size: .72rem; }
.t-milli_kamp { --c: #2a8c86; --t: #ffffff; --tl: #145a56; }
.chip-kamp[aria-pressed="true"] .dot { background: #2a8c86; }
.cal-pop a { color: var(--navy-700); font-weight: 600; }