/* Real app additions (2026-10-05) on top of the prototype's design system (app.css):
   the shell, the PC layout (sidebar, wide grids, centred dialogs) and the new components. */

:root { --side-w: 256px; }

/* ---------- shell ---------- */

.loadbar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80; overflow: hidden; }
.loadbar::after { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: var(--accent); animation: sweep 1.1s ease-in-out infinite; }
@keyframes sweep { from { left: -40%; } to { left: 100%; } }

.frame { min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 4px; }
.lang-btn { min-width: 40px; height: 34px; padding: 0 10px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); font-weight: 600; font-size: 13px; letter-spacing: .04em; cursor: pointer; }
.bell, .tab, .side-link { position: relative; }
.nav-count { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; font-family: var(--font-body); }
.tab .nav-count { right: calc(50% - 24px); }
.side-link .nav-count { position: static; margin-left: auto; }
.is-offline .topbar { box-shadow: inset 0 -2px 0 var(--warn); }

.sidebar { display: none; }
.main { max-width: 600px; }

/* ---------- PC layout: sidebar instead of the tab bar ---------- */

@media (min-width: 1024px) {
  body.has-nav { padding-bottom: 0; }
  body.has-nav .tabbar { display: none !important; }
  body.has-nav .sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--side-w);
    padding: 18px 12px 14px;
    overflow-y: auto;
    background: var(--surface);
    border-right: 1px solid var(--line);
    z-index: 30;
  }
  body.has-nav .frame { margin-left: var(--side-w); }
  body.has-nav .topbar .brand { visibility: hidden; }
  body.has-nav .topbar .area-switch { display: none; }
  .main { max-width: 760px; padding: 12px 32px 48px; }
  .main.main-wide { max-width: 1180px; }
  .topbar { padding: 0 24px 0 32px; }
  body.has-nav .toast { left: calc(50% + var(--side-w) / 2); bottom: 24px; }
}

.side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 14px; text-decoration: none; }
.side-logo { width: 44px; color: var(--ink); }
.side-brand .brand-mark { font-size: 20px; }
.side-group { margin: 16px 10px 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.side-link { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-2); font-size: 14px; font-weight: 500; text-decoration: none; text-align: left; cursor: pointer; }
.side-link:hover { background: var(--surface-2); color: var(--ink); }
.side-link[aria-current="page"] { background: var(--accent-soft); color: var(--ink); }
.side-link[aria-current="page"] .icon { color: var(--accent); }
.side-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.side-user { display: flex; align-items: center; gap: 8px; padding: 4px 10px; font-size: 13px; color: var(--muted); }
.side-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- layout helpers ---------- */

.card-grid { display: grid; gap: 12px; margin-top: 12px; }
.card-grid > .card { margin-top: 0; }
.grid-2 { display: grid; gap: 12px; margin-top: 12px; }
.grid-2 > .card { margin-top: 0; }
.grid-2 > section > .section-title:first-child { margin-top: 4px; }
/* settings: cards of very different heights flow DOWN two columns instead of across rows - in rows every
   short card left a hole beside the tall one, and the last card stood alone (Ayden 2026-10-08) */
.settings-cols { columns: 2 380px; column-gap: 12px; margin-top: 12px; }
.settings-cols > .card { break-inside: avoid; margin: 0 0 12px; }
.settings-actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.settings-actions .btn { min-width: 200px; }
@media (max-width: 600px) { .settings-actions .btn { flex: 1; } }
.split-layout { display: grid; gap: 12px; margin-top: 12px; }
.split-layout > .card { margin-top: 0; }
.checkin-layout { display: grid; gap: 4px; }
/* phone: the training's notes come right under the counter and the search, above the tiles - below ALL tiles they
   were a long scroll away with 20 children (laptop note 2026-10-13). The two columns dissolve into one flow so
   `order` can move the notes; the PC keeps them in the side column (the grid below). */
@media (max-width: 1023px) {
  .checkin-layout { display: flex; flex-direction: column; gap: 0; }
  .checkin-main, .checkin-side { display: contents; }
  .checkin-main > .counter, .checkin-main > .search, .checkin-main > .results { order: -2; }
  .checkin-side > .tnotes { order: -1; margin-top: 16px; }
}
.photo-layout { display: grid; gap: 12px; }
.photo-layout > .card { margin-top: 0; }
.narrow { max-width: 560px; }
/* a wrapper that only exists for showing/hiding: its child stays a direct grid item */
.contents { display: contents; }
/* the seven weekdays always on one line (Sunday wrapped alone at 390 px) */
.chips:has(> [data-chip="weekday"]) { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.chips > [data-chip="weekday"] { justify-content: center; min-width: 0; padding: 0; }
/* Grid items default to min-width:auto and grow with long content (a long picker text widened the phone page). */
.card-grid > *, .grid-2 > *, .split-layout > *, .checkin-layout > *, .photo-layout > *, .landing > *, .kpis > * { min-width: 0; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

@media (min-width: 760px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (min-width: 1280px) {
  .main-wide .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .main-wide .card-grid.card-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ans { white-space: nowrap; gap: 6px; padding: 0 8px; }
@media (min-width: 1024px) {
  .grid-2-wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .split-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
  .checkin-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
  .checkin-side { position: sticky; top: 72px; }
  .photo-layout { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }

  /* start page as a split screen: the brand panel stays put, the actions are centred beside it */
  .landing { display: grid; grid-template-columns: minmax(400px, 5fr) 7fr; }
  .landing-brand {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    height: 100vh;
    height: 100dvh;
    padding: 56px 64px;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
  .landing-brand-inner { max-width: 440px; margin: 0; }
  .landing-logo { width: 200px; margin-bottom: 22px; }
  .landing-mark { font-size: 84px; }
  .landing-sub { margin-top: 12px; font-size: 14px; }
  .landing-panel { display: flex; align-items: center; justify-content: center; padding: 80px 48px 48px; }
  .landing-inner { width: 100%; max-width: 440px; margin: 0; }
  .landing-welcome { display: block; margin-bottom: 24px; }
  .landing-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
  .landing-welcome .muted { margin: 8px 0 0; }
  /* on the light right half the language switch is an ordinary button again */
  body.is-landing .lang-btn { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
}
@media (max-width: 759px) { .hide-sm { display: none; } }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 4px; }
.toolbar .link-quiet { display: inline-flex; align-items: center; gap: 6px; margin: 0; text-decoration: none; }
.day-title { margin: 22px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.title-sm { font-size: 28px; }
.label-section { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.card-title-gap { margin-top: 22px; }
.btn-lg { min-height: 52px; font-size: 16px; }
.btn-col-inline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.btn.is-busy { position: relative; color: transparent !important; }
.btn.is-busy .icon { visibility: hidden; }
.btn.is-busy::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--muted); border-right-color: transparent; animation: spin .8s linear infinite; }
.btn-primary.is-busy::after, .btn-danger.is-busy::after { border-color: var(--accent-ink); border-right-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.link-plain { text-decoration: none; }
.link-plain:hover { text-decoration: underline; }
.file-btn { position: relative; overflow: hidden; }
.chip-count { margin-left: 4px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip-count { color: inherit; opacity: .75; }
.badge-accent { background: var(--accent-soft); color: var(--accent); }
.empty-state { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 18px 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); }
.empty-state p { margin: 0; }
.form-error { margin: 10px 0 0; color: var(--danger); font-size: 14px; }
.form-error:empty { display: none; }
.field-hint { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
/* the password rule, ticked off while typing */
.pw-rules { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -4px 0 12px; padding: 0; list-style: none; font-size: 12px; color: var(--muted); }
.pw-rules li { display: inline-flex; align-items: center; gap: 4px; }
.pw-rules .icon { opacity: .3; }
.pw-rules li.is-ok { color: var(--ok); }
.pw-rules li.is-ok .icon { opacity: 1; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14px; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); overflow-wrap: anywhere; }
.codes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.secret { margin: 12px 0; }
.qr { display: inline-block; padding: 8px; margin: 8px 0; background: #fff; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.qr svg { display: block; width: 200px; height: 200px; }
.note-warn { background: var(--warn-soft); border-color: transparent; }
.note-warn .icon { color: var(--warn); }
.note-info { background: var(--info-soft); border-color: transparent; }
.note-info .icon { color: var(--info); }
.note-neutral { background: var(--surface-2); }
.note .btn { flex: none; }
.note > span { flex: 1; }
.note .icon-btn { width: 32px; height: 32px; margin: -6px -8px -6px 0; }
.sheet-text { color: var(--ink-2); }
.done-icon-muted { background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.toast-error { background: var(--danger); color: #fff; }

/* ---------- auth + start ---------- */

.auth { display: grid; gap: 16px; max-width: 440px; margin: 20px auto 0; }
.auth-card { margin-top: 0; padding: 24px 20px; }
.auth-logo { width: 96px; margin-bottom: 10px; color: var(--ink); }
.auth-card .title { font-size: 32px; }
.auth-card .link-quiet { display: inline-block; margin-top: 14px; }
.auth-links { display: grid; gap: 8px; text-align: center; }

/* ---------- session cards ---------- */

.session-tags { display: flex; align-items: center; gap: 6px; }
.session-tags .icon-btn { margin: -8px -10px -8px 0; }
.person-switch { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.person-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px 4px 4px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-weight: 500; cursor: pointer; }
.person-chip[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.person-chip .avatar { font-size: 11px; }
.claims { display: grid; gap: 10px; margin-top: 12px; }
.claim-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 0; border-color: var(--accent); background: var(--accent-soft); }
.claim-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.claim-icon { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 10px; background: var(--surface); color: var(--accent); flex: none; }
.claim-title { margin: 0; font-weight: 600; }
.claim-main .muted { margin: 2px 0 0; }
@media (max-width: 519px) {
  .claim-card { flex-direction: column; align-items: stretch; }
}

/* ---------- avatars + check-in ---------- */

.avatar-photo { object-fit: cover; padding: 0; background: var(--surface-2); }
.avatar-lg { font-size: 20px; }
.avatar-xl { font-size: 28px; }
.avatar-zoom { flex: none; display: inline-flex; padding: 0; border: 0; border-radius: 50%; background: none; cursor: zoom-in; }

/* Check-in photo tiles (Ayden 2026-10-11): the face is what the trainer ticks by, the name is small.
   Two columns on every phone (even 320 px), as many as fit on the PC. */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
@media (max-width: 519px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.tile-cell { position: relative; min-width: 0; }
.tile {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.tile:disabled { cursor: default; }
.tile:active:not(:disabled) { transform: scale(.98); }
.tile[aria-pressed="true"] { border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok); } /* a solid 3 px frame, no blur */
.tile-photo { position: relative; display: block; aspect-ratio: 1; background: var(--surface-2); }
.tile-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile-initials { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: var(--font-display); font-weight: 800; font-size: 48px; color: var(--muted); }
.tile-check {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(10, 9, 8, .3);
  color: transparent;
  transition: background-color .15s ease;
}
.tile[aria-pressed="true"] .tile-check { background: var(--ok); color: #fff; }
.tile-text { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 8px 10px 10px; }
.tile[aria-pressed="true"] .tile-text { background: var(--ok-soft); }
.tile-name { font-size: 14px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile[aria-pressed="false"] .tile-name { color: var(--ink-2); }
.tile-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.tile-badges:empty { display: none; }
.tile-badges .badge { height: auto; min-height: 20px; padding: 2px 6px; font-size: 11px; line-height: 1.2; white-space: normal; }
/* the magnifier: a sibling of the tile, not inside it (a button in a button is invalid) */
.tile-zoom {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 9, 8, .5);
  color: #fff;
  cursor: zoom-in;
}
.tile-zoom::before { content: ""; position: absolute; inset: -6px; } /* a 48 px target for a thumb */

/* Photo viewer: full-screen on black, like a messenger (ui.js openPhotoViewer) */
.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 70; /* above sheets (50) and the toast (60) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000; /* opaque: at 94 % the list behind it still read through (seen in the A54 screenshot) */
  cursor: zoom-out;
  animation: fade .15s ease;
}
.photo-viewer-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(8px + env(safe-area-inset-top)) 8px 8px 16px;
  color: #fff;
}
.photo-viewer-name { min-width: 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-viewer-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; }
.photo-viewer-img { display: block; width: min(100vw, 640px); max-height: calc(100% - 128px); object-fit: contain; animation: zoom-in .18s ease; }
@media (min-width: 680px) { .photo-viewer-img { border-radius: var(--radius); } }
@keyframes zoom-in { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.activate-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.person-head { display: flex; align-items: center; gap: 14px; }
.person-main { min-width: 0; }
.person-card .btn-row .btn { flex: 1 1 auto; }
.member-head { display: flex; align-items: center; gap: 18px; }
.member-head .plain-badges { margin-top: 8px; }
.member-cell { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }

/* ---------- tables ---------- */

.table-card { padding: 4px 16px; overflow-x: auto; }
.table-rows tbody tr:hover { background: var(--surface-2); }
.table-rows tbody tr[data-href] { cursor: pointer; } /* the whole row opens it (ui.js) */
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.is-cancelled-row td { color: var(--muted); }
.actions-cell { text-align: right; white-space: nowrap; }
.kv dd .link { font-size: 13px; margin-left: 6px; }

/* ---------- KPI links ---------- */

.kpis-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 4px; }
@media (min-width: 760px) { .kpis-wide { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
a.kpi { text-decoration: none; transition: border-color .15s ease; }
a.kpi:hover { border-color: var(--line-strong); }
.kpi-accent { border-color: var(--accent); }
.kpi-accent .kpi-value { color: var(--accent); }
.kpi-warn .kpi-value { color: var(--warn); }
.kpi-value-sm { font-size: 20px; }
/* visits (round 5 phase B): three counts in one row even on a 360 phone - the labels wrap, the numbers are short;
   the last visit's date is a line of its own (as a fourth box it did not fit half a phone, 2026-10-14) */
.visit-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.visit-kpis .kpi { padding: 10px 12px; }
.visit-last { margin: 10px 0 14px; color: var(--muted); }
.visit-last strong { color: var(--ink); font-weight: 600; }
/* round 5 phase C/D: the cancel sheet's end date, the one-time gender question, a group message's reach and tag */
.kind-hint { margin: 10px 0 14px; font-weight: 500; }
.gender-row + .gender-row { margin-top: 12px; }
.gender-row .label { margin-bottom: 6px; }
.reach-count { margin: 4px 0 8px; font-size: 20px; font-weight: 600; }
.reach-names-head { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.reach-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0;
  background: none; color: var(--muted); font-size: 14px; cursor: pointer; white-space: nowrap; }
.reach-toggle:hover { color: var(--ink); }
.reach-toggle .icon { transition: transform .15s ease; }
.reach-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.reach-names-head .search { flex: 1 1 150px; margin-top: 0; }
.reach-names-head .search input { height: 40px; padding-left: 36px; }
.reach-names-head .search .icon { left: 12px; }
.reach-names .plain-list { margin-top: 4px; max-height: 260px; overflow: auto; }
.msg-photo { position: relative; display: inline-block; margin-top: 12px; }
.msg-photo img { display: block; max-width: 100%; max-height: 180px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface-2); }
.msg-photo-x { position: absolute; top: 6px; right: 6px; background: var(--surface); border-radius: 999px;
  box-shadow: 0 0 0 1px var(--line); }
.msg-photo-add { margin-top: 12px; gap: 8px; }
.msg-group { margin: 0 0 4px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; }

/* ---------- feed + inbox ---------- */

.feed, .inbox-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.feed-item, .inbox-list li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.feed-item.is-unread { border-color: var(--accent); }
.feed-link, .inbox-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; text-decoration: none; color: inherit; }
.inbox-row { align-items: center; }
.feed-icon, .inbox-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); }
.feed-icon-accent, .inbox-icon.is-action { background: var(--accent-soft); color: var(--accent); }
.feed-main, .inbox-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.feed-title, .inbox-kind { font-weight: 600; }
.feed-body { color: var(--ink-2); font-size: 14px; overflow-wrap: anywhere; }
.feed-meta { color: var(--muted); font-size: 12px; }
.inbox-name { font-size: 14px; color: var(--ink-2); }
.inbox-row > .icon:last-child { color: var(--muted); }
.announcement-body p { margin: 0 0 10px; }
.actions-card .btn-row .btn { flex: 0 1 auto; }

/* ---------- plain links in lists ---------- */

.plain-link { text-decoration: none; color: inherit; }
.plain-link > .icon:last-child { margin-left: auto; color: var(--muted); }
button.list-link { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; font-weight: 500; }
/* a row that opens a sheet is a <button>, not a link: the same look, none of the browser's button styling */
button.plain-row { width: 100%; margin: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.plain-list li + li button.plain-row { border-top: 1px solid var(--line); }

/* ---------- weekly schedule ---------- */

.week { display: grid; gap: 10px; margin-top: 12px; }
@media (min-width: 760px) { .week { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.week-day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.week-title { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.week-item { display: flex; gap: 10px; width: 100%; padding: 8px; margin-top: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); text-align: left; cursor: pointer; }
.week-item:hover { border-color: var(--line-strong); }
.week-time { font-weight: 600; font-variant-numeric: tabular-nums; }
.week-main { display: flex; flex-direction: column; min-width: 0; }
.week-class { font-weight: 500; overflow-wrap: anywhere; }
.week-empty { margin: 4px 0; }

/* ---------- classes + staff ---------- */

a.class-card { display: block; text-decoration: none; color: inherit; }
a.class-card:hover { border-color: var(--line-strong); }
.class-card.is-inactive { opacity: .65; }
.class-card .small { margin: 8px 0 0; }
.staff-card form { margin-top: 8px; }

/* ---------- charts ---------- */

.chart-wrap { overflow-x: auto; margin-top: 8px; }
.chart { display: block; max-width: 100%; height: auto; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-axis { fill: var(--muted); font-size: 11px; font-family: var(--font-body); }
.chart-value { fill: var(--ink-2); font-size: 10px; font-family: var(--font-body); }
.bar-a { fill: var(--accent); }
.bar-b { fill: var(--ink-2); opacity: .55; }
.legend { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--muted); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 8px; }
.dot:first-child { margin-left: 0; }
.dot-a { background: var(--accent); }
.dot-b { background: var(--ink-2); opacity: .55; }

/* ---------- camera ---------- */

.camera { padding: 12px; }
/* always exactly 3:4 (face.js FRAME_ASPECT): the check and the saved photo use this frame. A max-height
   alone bent the ratio on wide screens, and what the stage showed was no longer what was checked. */
.camera-stage { position: relative; width: min(100%, calc(70vh * 3 / 4)); aspect-ratio: 3 / 4; margin: 0 auto; border-radius: var(--radius-sm); overflow: hidden; background: #0d0c0b; }
.camera-video, .camera-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camera-preview.is-whole { object-fit: contain; }
.camera.is-result .camera-oval { display: none; }
.camera-video { transform: scaleX(-1); }
.camera-oval { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.camera-shade { fill: rgba(10, 9, 8, .45); }
.camera-ring { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 2; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.camera-ring.is-ok { stroke: #5cc28f; stroke-dasharray: none; stroke-width: 3; }
.camera-msg { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; color: #eee; font-size: 14px; }
.camera-hint { min-height: 22px; margin: 12px 0 0; text-align: center; font-weight: 600; }
.checks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.checks li { display: flex; align-items: center; gap: 8px; }
.checks .ok { color: var(--ok); }
.checks .bad { color: var(--danger); }

/* ---------- misc ---------- */

.legal p { margin: 0 0 12px; color: var(--ink-2); }
.legal .card-title { margin-top: 16px; }
/* the dev mail viewer (2026-10-15, owner_mails.js): a day heading, one card of rows per day, a batch opens its
   recipients in place, a mail opens in a sheet */
.mail-day { margin: 22px 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.mail-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.mail-list > li + li { border-top: 1px solid var(--line); }
.mail-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer; list-style: none; }
.mail-row::-webkit-details-marker { display: none; }
.mail-row:hover, .mail-recipient:hover { background: var(--surface-2); }
.mail-main { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.mail-to { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* two lines, not an ellipsis: the end of a subject is often the point ("... am 10.03.2027") */
.mail-subject { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-weight: 600; }
.mail-side { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 4px; }
.mail-batch[open] > .mail-row { border-bottom: 1px solid var(--line); }
.mail-recipients { list-style: none; margin: 0; padding: 4px 0; }
.mail-recipient { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 6px 14px 6px 28px; border: 0;
  background: none; color: var(--ink-2); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.mail-recipient > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-text { margin: 14px 0 0; padding: 12px 14px; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-body);
  font-size: 14px; line-height: 1.5; color: var(--ink-2); background: var(--surface-2); border-radius: var(--radius-sm); }
.mail-more { margin-top: 16px; }
.toggle-row-card { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.contract-card .btn-col { margin-top: 16px; }
.preview { margin-top: 0; }
.photo-tips .howto { margin-top: 0; }

/* ---------- sheets become centred dialogs on the PC ---------- */

@media (min-width: 1024px) {
  .sheet-backdrop { align-items: center; padding: 24px; }
  .sheet { max-width: 520px; border-radius: 16px; max-height: min(86vh, calc(var(--vv-h, 100vh) - 48px)); padding-bottom: 20px; }
  .sheet-wide { max-width: 760px; }
}

/* ---------- chat (2026-10-07): list + conversation; phone one at a time, PC side by side ---------- */

.chat-side-head { margin-bottom: 12px; }
/* the studio's side: groups | members (2026-10-15), and the members' search + "unread" switch */
/* the same switch on the events page: list | add (2026-10-15) */
.chat-tabs, .view-tabs { display: flex; gap: 4px; margin-top: 12px; padding: 4px; border-radius: 12px;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.chat-tab, .view-tab { display: flex; flex: 1; align-items: center; justify-content: center; gap: 8px; min-height: 40px;
  padding: 0 10px; border-radius: 9px; color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none;
  text-align: center; }
.chat-tab[aria-current="page"], .view-tab[aria-current="page"] { background: var(--surface); color: var(--ink);
  box-shadow: 0 0 0 1px var(--line); }
.chat-tab .nav-count { position: static; }
.chat-tools { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.chat-tools .search { flex: 1; margin-top: 0; }
.chat-tools .search input { height: 40px; padding-left: 36px; }
.chat-tools .search .icon { left: 12px; }
.chat-tools .chip { flex: none; }
.chat-side-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chat-new { flex: none; gap: 6px; }
/* two classes: `.chat-list` further down sets `overflow: hidden` with the weight of one class and won - the list was
   cut at 55 % and could not be scrolled (Ayden on the A54, 2026-10-15) */
.chat-list.chat-pick-list { margin-top: 12px; max-height: 55vh; overflow-y: auto; overscroll-behavior: contain; }
/* events nearby (2026-10-15) - the fight-poster look (Ayden, after three calmer variants: "Fight-Poster, UFC-Stil"):
   dark cards like a fight-night poster in either theme, the name huge and slanted, the picture's colour
   (--event-color; poster red without one) on the date block, the bar, the button and a running hazard band. The cards
   slam in, the picture is pushed in slowly. "Reduce motion" stops every animation (app.css). */
.event-month { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; font-family: var(--font-display);
  font-weight: 800; font-size: 18px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.event-month::after { content: ""; flex: 1; height: 2px; background: currentColor; opacity: .3; }
.event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.fight { --event-color: #c8102e; position: relative; isolation: isolate; overflow: hidden; border-radius: 6px;
  background: #0c0b0a; color: #fff; cursor: pointer; box-shadow: 0 18px 40px -22px #000;
  animation: fight-in .5s cubic-bezier(.2, 1.4, .3, 1) backwards; }
.event-list .fight:nth-child(2) { animation-delay: .09s; }
.event-list .fight:nth-child(3) { animation-delay: .18s; }
.event-list .fight:nth-child(n + 4) { animation-delay: .27s; }
@keyframes fight-in { from { opacity: 0; transform: scale(1.06) translateY(18px); filter: blur(5px); } }
.fight.is-off { filter: grayscale(1); opacity: .6; }
@media (hover: hover) {
  .fight { transition: transform .2s ease, box-shadow .2s ease; }
  .fight:hover { transform: translateY(-3px); box-shadow: 0 24px 46px -22px #000; }
}
/* the picture: big, pushed in slowly, cut on a slant; no picture: stripes of the colour, marching */
.fight-shot { position: relative; height: 270px; overflow: hidden; background: #0c0b0a;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%); }
.fight-shot .event-img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 60% 40%;
  filter: contrast(1.12) saturate(1.15); animation: fight-push 16s ease-in-out infinite alternate; }
.fight-shot::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .55) 75%, #000),
    linear-gradient(90deg, color-mix(in srgb, var(--event-color) 45%, transparent), transparent 55%); }
@keyframes fight-push { from { transform: scale(1.02); } to { transform: scale(1.18) translate(-2%, 2%); } }
.fight-shot.is-plain, .fight-hero.is-plain {
  background: repeating-linear-gradient(-55deg, var(--event-color) 0 26px, #0c0b0a 26px 52px);
  background-size: 200% 200%; animation: fight-march 1.6s linear infinite; }
.fight-shot.is-plain { height: 210px; }
.fight-shot.is-plain::after { background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .75)); }
@keyframes fight-march { to { background-position: 62px 0; } }
/* the date: a slanted block in the colour */
.fight-date { position: absolute; top: 14px; left: -6px; z-index: 2; padding: 6px 18px 6px 22px; color: #fff;
  background: var(--event-color); transform: skewX(-14deg); box-shadow: 4px 4px 0 #000; pointer-events: none; }
.fight-date > span { display: block; transform: skewX(14deg); font-family: var(--font-display); font-weight: 800;
  font-size: 22px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.fight-date small { margin-left: 5px; font-size: 14px; opacity: .85; }
/* the name: huge and slanted, over the bottom of the picture */
.fight-body { position: relative; z-index: 2; margin-top: -86px; padding: 0 18px 18px; }
.fight-name { margin: 0; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 46px;
  line-height: .9; letter-spacing: .005em; text-transform: uppercase; transform: skewX(-6deg); transform-origin: left;
  text-shadow: 0 3px 0 #000; hyphens: auto; overflow-wrap: break-word;
  animation: fight-slide .55s cubic-bezier(.2, 1.2, .3, 1) .12s backwards; }
.fight-name.is-long { font-size: 34px; } /* a word of 12+ letters broke in the middle at 46 px */
@keyframes fight-slide { from { opacity: 0; transform: skewX(-6deg) translateX(-40px); } }
.event-link { color: inherit; text-decoration: none; }
.fight-bar { height: 6px; width: 92px; margin: 10px 0 12px; background: var(--event-color); transform: skewX(-30deg); }
.fight-facts { margin: 0; color: #d8d2c8; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  overflow-wrap: anywhere; }
.fight-facts b { color: #fff; }
.fight-source { margin: 4px 0 0; color: #8f877b; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.event-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 14px; }
.fight-go { display: inline-flex; padding: 11px 20px; border: 0; color: #fff; background: var(--event-color); cursor: pointer;
  transform: skewX(-12deg); box-shadow: 3px 3px 0 #000; }
.fight-go > span { display: inline-flex; align-items: center; gap: 6px; transform: skewX(12deg); font-family: var(--font-display);
  font-weight: 800; font-size: 18px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.fight-go[aria-pressed="false"] .icon { display: none; }
.fight-go[aria-pressed="true"] { color: #0c0b0a; background: #fff; }
.fight-link { display: inline-flex; padding: 7px 14px; border: 2px solid rgba(255, 255, 255, .25); color: #fff;
  background: transparent; text-decoration: none; cursor: pointer; transform: skewX(-12deg); }
.fight-link > span { display: inline-flex; align-items: center; gap: 6px; transform: skewX(12deg); font-weight: 700;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.event-count { color: #bdb6ab; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.event-names { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0; color: #bdb6ab; font-size: 13px; }
.event-names .icon { flex: none; margin-top: 2px; }
/* a hazard band runs along the bottom edge */
.fight-band { height: 8px; background: repeating-linear-gradient(-45deg, var(--event-color) 0 10px, #000 10px 20px);
  background-size: 28px 28px; animation: fight-run 1.2s linear infinite; }
@keyframes fight-run { to { background-position: 28px 0; } }
/* the event's own page: the whole picture on black (a tap = full screen), the name under it, the "tale of the tape" */
.fight-page { --event-color: #c8102e; position: relative; overflow: hidden; margin-top: 8px; padding-bottom: 22px;
  border-radius: 6px; color: #fff; background: #0c0b0a; }
.fight-page.is-off { filter: grayscale(1); }
.fight-hero { display: flex; justify-content: center; width: 100%; margin: 0; padding: 0 0 34px; border: 0; background: #000;
  cursor: zoom-in; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), 0 100%); }
.fight-hero.is-plain { height: 170px; padding: 0; cursor: default; }
.fight-hero .event-detail-img { display: block; width: auto; max-width: 100%; height: auto; max-height: 60vh;
  view-transition-name: event-hero; filter: contrast(1.08) saturate(1.1); }
.fight-head { position: relative; margin-top: -22px; padding: 0 20px; }
.fight-head .fight-date { position: relative; top: 0; left: 0; display: inline-block; margin-bottom: 12px; }
.fight-page .fight-name { font-size: 56px; }
.fight-page .fight-name.is-long { font-size: 38px; }
.fight-tape { margin: 16px 20px 0; border-top: 3px solid var(--event-color); }
.fight-tape div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #2b2824; }
.fight-tape dt { color: #9b9387; font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: .14em;
  text-transform: uppercase; }
.fight-tape dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.event-detail-desc { margin: 18px 20px 0; color: #d8d2c8; white-space: pre-line; overflow-wrap: anywhere; }
.event-detail-desc a { color: #fff; }
.fight-page-actions { padding: 0 20px; }
.fight-page .event-actions { margin-top: 20px; }
::view-transition-group(event-hero) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .9, .2, 1); }
.event-own .btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; }
.event-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.event-head .btn { gap: 8px; }
.event-head .btn, .event-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.event-clear-at { margin-top: 6px; }
.event-notify-hint { display: flex; align-items: flex-start; gap: 6px; margin-top: 14px; }
.event-notify-hint .icon { flex: none; margin-top: 2px; }
.event-form [data-save] { margin-top: 16px; }
.event-delete { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; }
.event-sources { margin-top: 24px; }
.event-radius { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.event-radius .field { flex: 1 1 200px; }
.event-src-list { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; }
.event-src { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.event-src + .event-src { border-top: 1px solid var(--line); }
.event-src-text { flex: 1; min-width: 0; }
.event-src-name { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.event-src-text p { margin: 0; }
.event-src-error { color: var(--danger); }
.event-src-actions { display: flex; flex: none; gap: 4px; }
.event-add-title { margin: 18px 0 0; }
.event-sources [data-add] { margin-top: 14px; }
.chat-side-head .title { margin: 0; }
.chat-list { display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.chat-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--ink); text-decoration: none; }
.chat-row + .chat-row { border-top: 1px solid var(--line); }
.chat-row[aria-current="page"] { background: var(--accent-soft); }
@media (hover: hover) {
  .chat-row:not([aria-current="page"]):hover { background: var(--surface-2); }
}
.chat-avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.chat-avatar-studio { background: var(--brand-bg); color: var(--brand-ink); box-shadow: none; }
.chat-row-main { display: grid; flex: 1; gap: 2px; min-width: 0; }
.chat-row-top, .chat-row-bottom { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chat-row-name { flex: 1; min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.chat-row-time { flex: none; font-size: 12px; color: var(--muted); }
.chat-row.is-unread .chat-row-time { color: var(--ink); font-weight: 600; }
.chat-row-last { flex: 1; min-width: 0; overflow: hidden; font-size: 14px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.chat-row .nav-count { position: static; flex: none; }

.chat-room { display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.chat-room-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.chat-room-title { min-width: 0; }
.chat-room-title .muted { margin: 0; }
.chat-title { margin: 0; overflow: hidden; font-size: 16px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.chat-title:focus { outline: none; }
.chat-log { display: flex; flex: 1; flex-direction: column; gap: 4px; min-height: 0; padding: 12px 14px 16px; overflow-y: auto; overscroll-behavior: contain; }
.chat-empty { margin: auto; }
.chat-more { align-self: center; }
.chat-day { align-self: center; margin: 12px 0 6px; padding: 3px 10px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
.msg { display: flex; flex-direction: column; align-items: flex-start; max-width: min(82%, 560px); }
.msg.is-mine { align-self: flex-end; align-items: flex-end; }
.msg.new-author { margin-top: 6px; }
.msg-author { margin: 0 0 2px 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.msg-role { margin-left: 6px; font-weight: 500; color: var(--muted); }
.msg-bubble { padding: 8px 12px 6px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.msg.is-mine .msg-bubble { background: var(--accent-soft); box-shadow: none; }
.msg-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-meta { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 2px; font-size: 11px; color: var(--muted); }
.msg-del { display: inline-flex; padding: 2px; border: 0; background: none; color: var(--muted); cursor: pointer; }
/* pictures (2026-10-07): the width/height attributes keep the proportions while loading */
.msg-bubble.has-image { padding: 4px 4px 6px; }
.msg-bubble.has-image .msg-text, .msg-bubble.has-image .msg-meta { padding: 0 8px; }
.msg-image { display: block; padding: 0; margin: 0 0 4px; border: 0; background: none; cursor: zoom-in; }
/* no % in the cap: while a shrink-to-fit bubble is sized a % counts as nothing, the 1600 px picture
   widened the bubble to its own max-width and left an empty band beside the picture */
.msg-image img { display: block; width: auto; max-width: min(320px, 68vw); height: auto; max-height: 360px; border-radius: 10px; background: var(--surface-2); }
.chat-row-last .icon { display: inline-block; vertical-align: -2px; margin-right: 2px; }
.chat-photo-full { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; border-radius: var(--radius-sm); }

.composer { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
.composer-attached { display: flex; flex-basis: 100%; align-items: center; gap: 10px; }
.composer-attached img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--surface-2); }
.composer-attached span { flex: 1; }
.composer-attach { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: var(--ink-2); cursor: pointer; }
.composer-attach:hover { background: var(--surface-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.composer textarea { flex: 1; min-height: 42px; max-height: 140px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 21px; background: var(--bg); color: var(--ink); font: inherit; line-height: 1.35; resize: none; }
.composer textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.composer-send { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-ink); cursor: pointer; }
.composer-send:disabled { opacity: .35; cursor: default; }
.chat-readonly { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.chat-pick { align-items: center; justify-content: center; }

/* phone: one thing at a time; the conversation fills the VISIBLE screen under the top bar, so the
   composer stays above the keyboard (the same visual-viewport sizing as the sheets) */
body.in-room .tabbar { display: none !important; }
body.in-room.has-tabs { padding-bottom: 0; }
@media (max-width: 1023px) {
  .chat-layout.is-list .chat-room, .chat-layout.is-room .chat-side { display: none; }
  .chat-layout.is-room .chat-room {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--vv-top, 0px) + 52px);
    height: calc(var(--vv-h, 100vh) - 52px);
    z-index: 10;
  }
}
@media (min-width: 1024px) {
  .chat-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; height: calc(100vh - 52px - 60px); }
  .chat-side { min-height: 0; overflow-y: auto; }
  .chat-room { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); }
  .chat-room-head .chat-title { font-size: 17px; }
  body.in-room .topbar .back { visibility: hidden; } /* the list is right there on the PC */
}

/* bank connection (direct debit B/C): status card, statement rows, the TAN sheet */
.card-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.card-head-row .card-title { margin: 0; }
.plain-amount { flex: none; font-variant-numeric: tabular-nums; font-weight: 500; }
.plain-amount.is-negative { color: var(--danger); }
.tan-challenge { margin: 8px 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); white-space: pre-wrap; overflow-wrap: anywhere; }

/* while a sheet is open the toast moves to the top: at the bottom it covered the sheet's field and button
   (seen 2026-10-08: "Gespeichert" lying over the PIN field of the next sheet). Last in the cascade on purpose:
   it must beat both bottom positions above (phone tab bar, PC sidebar). */
body.sheet-open .toast { top: calc(64px + env(safe-area-inset-top)); bottom: auto; }

/* the sessions the signed-in person leads - trainers and the Grizzly-Chef (2026-10-10): a firmer edge, a faint
   tint and "Du leitest" in the meta line. No glow, no colour of its own. */
.session.is-mine { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); } /* a solid bar, not a glow */

/* Sammel-Bestätigung (2026-10-10): a long list like the paper folder, a tick and a tariff per row, and the
   confirm button in a bar that stays above the tab bar while scrolling */
.bulk-entry { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none; color: var(--ink);
  font-weight: 600; }
.bulk-entry span { flex: 1; }
.bulk-tools { flex-wrap: wrap; gap: 10px; }
.bulk-tools .search { flex: 1 1 220px; }
.bulk-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); overflow: hidden; }
.bulk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center;
  padding: 10px 14px; border-top: 1px solid var(--line); }
.bulk-row:first-child { border-top: 0; }
.bulk-row.is-picked { background: var(--surface-2); }
.bulk-check { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; min-width: 0; }
.bulk-check input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); }
.bulk-main { display: grid; min-width: 0; }
.bulk-name { overflow-wrap: anywhere; }
.bulk-side { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bulk-open { flex: none; color: var(--muted); }
.bulk-tariff { font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); max-width: 100%; min-width: 0; flex: 1 1 auto; }
.bulk-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px; padding: 10px 12px 10px 16px; border: 1px solid var(--line-strong); border-radius: 14px;
  background: var(--surface); font-weight: 600; }
body.has-tabs .bulk-bar { bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom)); }
@media (max-width: 560px) {
  .bulk-row { grid-template-columns: 1fr; }
  .bulk-side { padding-left: 34px; }
}
/* in the Postfach itself since 2026-10-10: the hint in "Alle" is a button that switches to "App-Zugang" */
button.bulk-entry { width: 100%; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.bulk-lead { margin: 14px 0 4px; }

/* bank page (2026-10-10): what the account may do, and the diagnose text */
.cap { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.cap-yes { color: var(--ok); }
.cap-no { color: var(--danger); }
.cap-unknown { color: var(--muted); font-weight: 400; }
.bank-details { margin-top: 14px; }
.bank-details summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.bank-diag { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; font-size: 12.5px; }

/* the gym's existing direct-debit list (2026-10-11): import page, inbox suggestions */
.page-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.head-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* a paper contract typed in at the counter (2026-10-15) */
.paper-subtitle { margin-top: 20px; }
.paper-ref { font: 600 20px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .04em; margin: 4px 0 12px;
  padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
  overflow-wrap: anywhere; }
.import-pick input[type=file] { width: 100%; font: inherit; }
.import-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 8px; }
.import-mapping { margin: 12px 0; }
.import-mapping summary { cursor: pointer; font-weight: 600; }
.import-mapping-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 12px; margin: 12px 0; }
.import-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.import-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--surface);
  border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); }
.import-row[data-status=error] { box-shadow: inset 3px 0 0 var(--danger), inset 0 0 0 1px var(--line); }
.import-main { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.import-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.import-problems { color: var(--danger); }
.import-row[data-status=warn] .import-problems { color: var(--warn); }
.import-fee { font-variant-numeric: tabular-nums; white-space: nowrap; }
.import-bar { margin-top: 12px; }
.import-matches { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; min-width: 0; }
.radio-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.radio-row > span { display: grid; gap: 2px; min-width: 0; }
.radio-row input { margin-top: 3px; accent-color: var(--accent); }
.import-hit { color: var(--ok); }

/* the IBAN recovery key (data protection plan E, 2026-10-11): readable, selectable, and printed on its own */
.recovery-key { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 16px; letter-spacing: .04em; line-height: 1.6;
  margin: 12px 0; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
  overflow-wrap: anywhere; user-select: all; }
/* the printed recovery key page (vault.js printRecovery): only it on paper, black on white, A4 */
.print-sheet { display: none; }
@media print {
  @page { size: A4; margin: 18mm 18mm 20mm; }
  body.print-recovery { background: #fff !important; }
  body.print-recovery > *:not(.print-sheet) { display: none !important; }
  body.print-recovery .print-sheet { display: block; color: #171512; font: 11pt/1.5 "IBM Plex Sans", system-ui, sans-serif; }
  .print-head { display: flex; align-items: center; gap: 14px; padding-bottom: 10px; border-bottom: 1.5pt solid #171512; }
  .print-logo { width: 40mm; height: auto; }
  .print-brand { margin: 0; font: 700 20pt/1 "Big Shoulders Display", system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
  .print-gym { margin: 2px 0 0; font-size: 10pt; color: #47423a; }
  .print-title { margin: 14mm 0 2mm; font: 700 24pt/1.1 "Big Shoulders Display", system-ui, sans-serif; letter-spacing: .02em; text-transform: uppercase; }
  .print-for { margin: 0 0 8mm; color: #47423a; }
  .print-key { margin: 0 0 9mm; padding: 6mm 5mm; border: 1.5pt solid #171512; border-radius: 3mm; text-align: center;
    font: 600 17pt/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; overflow-wrap: anywhere; }
  .print-key-hint { margin: -6mm 0 8mm; text-align: center; font-size: 9pt; color: #47423a; }
  .print-sheet h2 { margin: 6mm 0 1.5mm; font-size: 12pt; }
  .print-sheet p, .print-sheet li { margin: 0 0 1.5mm; }
  .print-sheet ol, .print-sheet ul { margin: 0; padding-left: 6mm; }
  .print-foot { margin-top: 12mm; padding-top: 3mm; border-top: .75pt solid #cbc4b7; font-size: 9pt; color: #47423a; }
}