/* The coach page designed as the F45 consumer app (owner, 2026-10-10: "design just as f45 consumer mode"), with real
   tabs at the bottom -- Tasks · Members · Missed · Commission (coach-app.js). The app's page: a pale tinted
   background, the coach's initial and studio on top, the open tab's name large in condensed capitals, white blocks
   with capital headings on a hairline, round photos, navy chevrons, pill buttons, a bar of icons at the bottom.
   Kept from the staff look: sentence case inside rows and the status colours (green / amber / red).
   Loaded after ui-look.css; one link + one script in trial-coach.html, so taking both out puts the page back. */
@font-face { font-family: 'F45 Member Cond'; src: url('/fonts/GothamCond-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
html.coach-app {
  --ca-bg: #F3F4F9; --ca-ann: #E4E7F3; --ca-line: #D9DAE6; --ca-slate: #5F6392; --ca-navy: #211551; --ca-red: #D6001C;
  --ca-trial: #D6001C; --ca-checkin: #0B5ED7; --ca-milestone: #211551; --ca-birthday: #5F6392;
}
html.coach-app, html.coach-app body { background: var(--ca-bg) !important; }

/* head */
html.coach-app header { position: static !important; background: none !important; border-bottom: 0 !important; padding-bottom: 0; }
html.coach-app header .wrap { align-items: flex-start; }
html.coach-app header .wrap > div { flex: 1; min-width: 0; }
html.coach-app .ca-who { display: flex; align-items: center; gap: 12px; min-height: 44px; }
html.coach-app .ca-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #6B7099; color: #fff; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
html.coach-app .ca-name { font-size: 15px; font-weight: 700; color: var(--ca-navy); }
html.coach-app .ca-studio { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ca-navy); white-space: nowrap; }
html.coach-app .ca-studio svg { width: 20px; height: 20px; }
html.coach-app header h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.coach-app .ca-title { font-family: 'F45 Member Cond', 'Coach Gotham', 'Arial Narrow', sans-serif; font-size: 52px; font-weight: 700; line-height: .95; text-transform: uppercase; color: var(--ca-navy); margin-top: 14px; }
html.coach-app header .sub { color: var(--ca-slate); margin-top: 6px; }
html.coach-app header button { border-radius: 999px !important; padding: 8px 16px !important; margin-top: 4px; }
html.coach-app main.wrap { padding-bottom: 0; }
html.coach-app .ca-extra { padding-bottom: 48px; }
html.coach-app.ca-has-bar .ca-extra { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
html.coach-app .pv-bar { background: #fff; border-radius: 0 6px 6px 0; }

/* a white block, its title in capitals on a hairline */
html.coach-app .jobs { background: #fff; border-radius: 6px; padding: 4px 16px 10px; margin: 16px 0; }
html.coach-app .jobs-h, html.coach-app .jobs-fold > summary { font-size: 15px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ca-navy); border-bottom: 1px solid var(--ca-line) !important; padding: 14px 0 !important; min-height: 0; align-items: center; }
html.coach-app .jobs-fold:not([open]) > summary { border-bottom: 0 !important; }
html.coach-app .jobs-h .n, html.coach-app .jobs-fold > summary .n { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ca-slate); }
html.coach-app .jobs-fold > summary::after, html.coach-app .job > summary::after { content: ''; width: 9px; height: 9px; border-right: 2.5px solid var(--ca-navy); border-bottom: 2.5px solid var(--ca-navy); transform: rotate(45deg); margin: -4px 4px 0 auto; flex: none; }
html.coach-app .job > summary::after { margin-left: 4px; transform: rotate(-45deg); margin-top: 0; }
html.coach-app .jobs-fold[open] > summary::after { transform: rotate(-135deg); margin-top: 6px; }
html.coach-app .job[open] > summary::after { transform: rotate(45deg); margin-top: -4px; }
html.coach-app .job { background: none !important; border-bottom: 1px solid var(--ca-line); }
html.coach-app .job:last-child { border-bottom: 0; }
html.coach-app .job > summary { padding: 16px 0; }
html.coach-app .job-b { padding: 0 0 6px; }
html.coach-app .shifts { border-bottom: 0; padding: 10px 0 0; color: var(--ca-slate); }
/* the member list is a block per class, so its own section has no block around it */
html.coach-app main > section.jobs:has(.wl) { background: none; padding: 0; }
html.coach-app main > section.jobs:has(.wl) > .jobs-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 !important; padding: 0 !important; }   /* the large title already says Tasks and the line under it counts them */
html.coach-app main > section.jobs:has(.wl) { margin-top: 8px; }
html.coach-app main > section.jobs:has(.wl) > .shifts { padding-top: 0; }

/* one white block per class: "SUN 08:00  QUARTERBACKS" on a hairline, the count at the right */
html.coach-app .ca-cls { background: #fff; border-radius: 6px; margin-top: 14px; padding: 0 16px; overflow: hidden; }
html.coach-app .ca-band { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 14px; border-bottom: 1px solid var(--ca-line); }
html.coach-app .ca-band-t { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 21px; line-height: 1.2; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ca-navy); font-variant-numeric: tabular-nums; }
/* the current class (on now, else the next to start): its band filled navy, white type, and it says which */
html.coach-app .ca-cls.cur .ca-band { background: var(--ca-navy); margin: 0 -16px; padding-left: 16px; padding-right: 16px; border-bottom-color: var(--ca-navy); }
html.coach-app .ca-cls.cur .ca-band-t, html.coach-app .ca-cls.cur .ca-band-n, html.coach-app .ca-cls.cur .ca-band-n b { color: #fff; }
html.coach-app .ca-band-n { font-size: 13px; color: var(--ca-slate); text-align: right; white-space: nowrap; }
html.coach-app .ca-band-n b { color: var(--ca-navy); }
html.coach-app .ca-cls .wl-row { border-bottom: 0 !important; border-top: 1px solid var(--ca-line); background: none !important; }
html.coach-app .ca-jobs > .wl-row:first-child { border-top: 0; }
html.coach-app .ca-cls .wl-row .wl-line { padding-left: 0; padding-right: 0; }
html.coach-app .ca-cls .wl-line .wl-class { display: none; }
html.coach-app .ca-cls .wl-line { min-height: 124px; padding-top: 14px; padding-bottom: 14px; grid-template-columns: 96px minmax(0, 1fr) 18px; grid-template-areas: "pic name chev" "pic type chev"; column-gap: 14px; }
html.coach-app .ca-cls .wl-row.open .wl-line { min-height: 0; grid-template-columns: minmax(0, 1fr) 18px; grid-template-areas: "name chev" "type chev"; }
html.coach-app .ca-cls .wl-name { white-space: normal; font-size: 17px; color: #000; }
/* photos are squares with the blocks' soft corner (owner, 2026-10-10: "images not round") */
html.coach-app .wl-pic { width: 96px; height: 96px; border-radius: 6px; overflow: hidden; font-size: 22px; }
html.coach-app .wl-pic img { border-radius: 0; }
html.coach-app .wl-chev { font-size: 0; }
html.coach-app .wl-chev::before { content: ''; display: inline-block; width: 9px; height: 9px; border-right: 2.5px solid var(--ca-navy); border-bottom: 2.5px solid var(--ca-navy); transform: rotate(-45deg); }
html.coach-app .wl-row.open .wl-chev::before { transform: rotate(45deg); }
html.coach-app .wl-detail { padding-left: 0; padding-right: 0; }

/* the job: a small filled tag, as the app's class tag */
html.coach-app .ca-cls .wl-type { border-left: 0; padding-left: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--ink); }
html.coach-app .ca-cls .wl-why1 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; flex-basis: 100%; }
html.coach-app .ca-cls .wl-type b, html.coach-app .ca-kb { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 13px; font-weight: 700; line-height: 1.5; color: #fff; background: var(--ca-slate); white-space: nowrap; }   /* sentence case, as the iPad's job boxes ("sentence case inside rows") */
html.coach-app .ca-cls .wl-type.trial b, html.coach-app .ca-kb.trial { background: var(--ca-trial); }
html.coach-app .ca-cls .wl-type.checkin b, html.coach-app .ca-kb.checkin { background: var(--ca-checkin); }
/* a scan reminder (a listed member with no scan booked, owner 2026-10-11) is the same "for you to do" blue */
html.coach-app .ca-cls .wl-type.scanremind b, html.coach-app .ca-cls .wl-type b.k-scanremind, html.coach-app .ca-kb.scanremind { background: var(--ca-checkin); }
html.coach-app .ca-cls .wl-row:has(.wl-type.scanremind) { border-left-color: var(--ca-checkin); }
html.coach-app .ca-tab .s.scanremind { color: var(--ca-checkin); }
html.coach-app .ca-cls .wl-type.milestone b, html.coach-app .ca-kb.milestone { background: var(--ca-milestone); }
html.coach-app .ca-cls .wl-type.birthday b, html.coach-app .ca-kb.birthday { background: var(--ca-birthday); }
html.coach-app .ca-cls .wl-type small { display: inline; color: var(--ca-slate); }
/* what Missed knows, on the row itself: a job of a class that is over and still owed, or done */
html.coach-app .ca-st-w { flex-basis: 100%; } html.coach-app .ca-st-w:empty { display: none; }
html.coach-app .ca-st { font-style: normal; font-size: 13px; font-weight: 700; }
html.coach-app .ca-st.tone-bad { color: var(--tone-bad, #98211F); } html.coach-app .ca-st.tone-ok { color: var(--tone-ok, #1C6B33); }

/* buttons are pills; the main action red */
html.coach-app .btn, html.coach-app .btn.ghost { border-radius: 999px !important; padding-left: 20px; padding-right: 20px; }
html.coach-app .cm-top { background: #fff; border-radius: 6px; padding: 16px; }
html.coach-app .cm-top > .btn:first-child, html.coach-app .cm-top > button.btn { border: 0 !important; display: flex; width: 100%; min-height: 54px; background: var(--ca-red) !important; color: #fff !important; font-size: 16px; font-weight: 700; }

/* Members: everyone booked, one line each */
html.coach-app .ca-members, html.coach-app .ca-missed { display: none; }
html.coach-app .ca-members { background: none; padding: 0; margin: 16px 0; }
html.coach-app .ca-members > .jobs-h { border-bottom: 0 !important; padding: 0 !important; }
html.coach-app .ca-p { width: 100%; border: 0 !important; border-radius: 0 !important; background: none !important; height: auto !important; text-align: left; color: inherit !important; font: inherit !important; display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0 !important; min-height: 104px; }
html.coach-app .ca-pw { border-top: 1px solid var(--ca-line); }
html.coach-app .ca-band + .ca-pw { border-top: 0; }
html.coach-app .ca-p-pic { width: 80px; height: 80px; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--ca-bg); color: var(--ca-slate); font-size: 20px; font-weight: 700; }
html.coach-app .ca-p-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
html.coach-app .ca-p-t strong { display: block; font-size: 16px; font-weight: 700; color: #000; }
html.coach-app .ca-p-t small { display: block; font-size: 13px !important; color: var(--ca-slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.coach-app .ca-p-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
html.coach-app .ca-p-r em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--tone-ok, #1C6B33); white-space: nowrap; }
html.coach-app .ca-none { padding: 14px 0 8px; color: var(--ca-slate); font-size: 14px; }

/* Missed: one line per job, not done in red, done late in amber */
html.coach-app .ca-miss { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 12px 10px; border-bottom: 1px solid var(--ca-line); border-left: 3px solid transparent; }
html.coach-app .ca-miss:last-child { border-bottom: 0; }
html.coach-app .ca-miss.is-open { border-left-color: var(--tone-bad, #98211F); }
html.coach-app .ca-miss strong { display: block; font-size: 15px; font-weight: 700; color: #000; }
html.coach-app .ca-miss span { display: block; font-size: 13px; color: var(--ca-slate); margin-top: 2px; }
html.coach-app .ca-miss em { flex: none; font-style: normal; font-size: 13px; font-weight: 700; white-space: nowrap; }
html.coach-app .ca-miss em.tone-bad { color: var(--tone-bad, #98211F); }
html.coach-app .ca-miss em.tone-warn { color: var(--ca-slate); }
/* a job still to do whose person is on Tasks: the line is a button that takes the coach there */
html.coach-app button.ca-miss { width: 100%; height: auto !important; min-height: 60px; border: 0 !important; border-left: 3px solid var(--tone-bad, #98211F) !important; border-bottom: 1px solid var(--ca-line) !important; border-radius: 0 !important; background: none !important; color: inherit !important; font: inherit !important; text-align: left; cursor: pointer; }
html.coach-app button.ca-miss:last-child { border-bottom: 0 !important; }
html.coach-app button.ca-miss > div { flex: 1; min-width: 0; }
html.coach-app .ca-miss .wl-chev { flex: none; display: block; font-size: 0; margin: 0 2px 0 0; line-height: 0; }
html.coach-app button.ca-miss:active { background: var(--ca-ann) !important; }
html.coach-app button.ca-miss:focus-visible { outline: 2px solid var(--ca-navy); outline-offset: -2px; }

/* REAL TABS: one view at a time (data-ca-tab on <html>, set by coach-app.js once the page has its list) */
/* the coach's sales belong to the Commission tab, not above the classes (they sat on Tasks, and Commission showed only the button) */
html.coach-app.ca-has-bar[data-ca-tab="tasks"] main > .cm-top, html.coach-app.ca-has-bar[data-ca-tab="tasks"] main > .cm-list { display: none; }
html.coach-app.ca-has-bar[data-ca-tab="members"] main > :not(.pv-bar),
html.coach-app.ca-has-bar[data-ca-tab="missed"] main > :not(.pv-bar) { display: none; }
html.coach-app.ca-has-bar[data-ca-tab="money"] main > :not(.pv-bar):not(.cm-top):not(.cm-list) { display: none; }
html.coach-app.ca-has-bar[data-ca-tab="members"] .ca-members,
html.coach-app.ca-has-bar[data-ca-tab="missed"] .ca-missed { display: block; }

/* the bar: icons in slate, the open tab in navy, labels in small capitals */
html.coach-app .ca-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: space-around; background: var(--ca-bg); border-top: 1px solid var(--ca-line); padding: 10px 8px calc(10px + env(safe-area-inset-bottom)); }
html.coach-app .ca-bar button { position: relative; border: 0 !important; background: none !important; border-radius: 0 !important; height: auto !important; padding: 0 !important; flex: 1; max-width: 130px; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--ca-slate) !important; font: 700 12px/1 'Coach Gotham', 'Helvetica Neue', Arial, sans-serif !important; text-transform: uppercase !important; letter-spacing: .05em; }
html.coach-app .ca-bar button.is-on { color: var(--ca-navy) !important; }
html.coach-app .ca-bar svg { width: 28px; height: 28px; }
html.coach-app .ca-bar button:focus-visible { outline: 2px solid var(--ca-navy); outline-offset: 2px; }
html.coach-app .ca-bar .ca-n { position: absolute; top: 0; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ca-red); color: #fff; font: 700 12px/18px 'Coach Gotham', Arial, sans-serif; font-style: normal; text-align: center; letter-spacing: 0; }
@media print { html.coach-app .ca-bar { display: none; } }
html.coach-app.ca-has-bar:not([data-ca-tab="tasks"]) header .sub { display: none; }

/* a person opened in Members: their notes and the box to write one */
html.coach-app .ca-notes { padding: 2px 0 16px; }
html.coach-app .ca-notes h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ca-navy); margin: 0 0 10px; padding: 0; border: 0; }
html.coach-app .ca-notes textarea { width: 100%; min-height: 84px; font-size: 16px; padding: 12px; border: 1px solid var(--ca-line); border-radius: 8px; background: #fff; }
html.coach-app .ca-notes .btn { margin: 10px 0 14px; min-height: 44px; }
html.coach-app .ca-note { font-size: 14px; line-height: 1.45; padding: 10px 0; border-top: 1px solid var(--ca-line); white-space: pre-wrap; overflow-wrap: anywhere; }
html.coach-app .ca-note small { display: block; font-size: 13px !important; font-weight: 700; color: var(--ca-slate); margin-bottom: 2px; }
html.coach-app .ca-band-n i { display: block; font-style: normal; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }

/* Announcements: a row of its own in every class, as tall as a member row; it opens on a tap */
html.coach-app .ca-gone { display: none !important; }
html.coach-app .ca-annw { border-top: 1px solid var(--ca-line); margin: 0 -16px; padding: 0 16px; background-color: var(--ca-ann); }
html.coach-app .ca-jobs:empty + .ca-annhost .ca-annw { border-top: 0; }
/* intro announcements: the first row of a class, under its head (owner, 2026-10-11) */
html.coach-app .ca-introhost .ca-annw { border-top: 0; border-bottom: 1px solid var(--ca-line); }
html.coach-app .ca-ann { width: 100%; display: grid !important; grid-template-columns: 96px minmax(0, 1fr) 18px; column-gap: 14px; align-items: center; min-height: 124px; height: auto !important; padding: 14px 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; text-align: left; color: inherit !important; font: inherit !important; }
html.coach-app .ca-ann-pic { width: 96px; height: 96px; border-radius: 6px; background: #fff; color: var(--ca-navy); display: flex; align-items: center; justify-content: center; }
html.coach-app .ca-ann-pic svg { width: 44px; height: 44px; }
html.coach-app .ca-ann-t strong { display: block; font-size: 17px; font-weight: 700; color: #000; }
html.coach-app .ca-ann-t em { display: block; font-style: normal; font-size: 13px; color: var(--ca-slate); margin-top: 4px; }
html.coach-app .ca-ann-t em.tone-ok { color: var(--tone-ok, #1C6B33); font-weight: 700; }
html.coach-app .ca-ann-t em.tone-bad { color: var(--tone-bad, #98211F); font-weight: 700; }
html.coach-app .ca-annw.open .wl-chev::before { transform: rotate(45deg); }
html.coach-app .ca-ann-b { padding: 0 0 16px; }
html.coach-app .ca-ann-j { padding: 12px 0; border-top: 1px solid var(--ca-line); }
html.coach-app .ca-ann-j strong { display: block; font-size: 15px; font-weight: 700; margin-bottom: 4px; }
html.coach-app .ca-ann-ok { width: 100%; min-height: 52px; margin-top: 8px; border: 0 !important; background: var(--ca-red) !important; color: #fff !important; font-size: 16px; font-weight: 700; }
html.coach-app .ca-ann-ok:disabled { background: var(--ca-ann) !important; color: var(--ca-slate) !important; opacity: 1; }   /* was white on #C9CBDB, 1.6:1 */
html.coach-app .ca-ann-hint { font-size: 13px; color: var(--ca-slate); margin-top: 8px; }
/* due and not confirmed: the row flashes a strong red behind a NAVY icon box (owner, 2026-10-10: the icon "no more red. make this blue", then "significantly darker red flashing"; a steady red for anyone who asked for less motion) */
@keyframes ca-flash { 0%, 100% { background-color: #E4E7F3; } 50% { background-color: #E23A50; } }
html.coach-app .ca-annw.is-due { animation: ca-flash 1.2s ease-in-out infinite; box-shadow: inset 4px 0 0 #A00015; }
html.coach-app .ca-annw.is-due .ca-ann-pic { background: var(--ca-navy); color: #fff; }
html.coach-app .ca-annw.is-due .ca-ann-t em { color: #000; font-weight: 700; }
/* ... and so does the class's header, filled like the current class's (owner: "announcement and header flash") */
@keyframes ca-flash-h { 0%, 100% { background-color: var(--ca-navy); } 50% { background-color: #C8102E; } }
html.coach-app .ca-cls.ann-due .ca-band { margin: 0 -16px; padding-left: 16px; padding-right: 16px; border-bottom-color: transparent; background-color: var(--ca-navy); animation: ca-flash-h 1.2s ease-in-out infinite; }
html.coach-app .ca-cls.ann-due .ca-band-t, html.coach-app .ca-cls.ann-due .ca-band-n, html.coach-app .ca-cls.ann-due .ca-band-n b { color: #fff; }
@media (prefers-reduced-motion: reduce) { html.coach-app .ca-annw.is-due { animation: none; background-color: #E23A50; } html.coach-app .ca-cls.ann-due .ca-band { animation: none; background-color: #C8102E; } }

/* a job's file, shown over the page with a Close button (owner, 2026-10-10) */
html.coach-app.ca-viewing, html.coach-app.ca-viewing body { overflow: hidden; }
html.coach-app .ca-view { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: rgba(15, 10, 40, .92); padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0); }
html.coach-app .ca-view-h { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: #fff; }
html.coach-app .ca-view-h strong { font-size: 15px; font-weight: 700; color: var(--ca-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.coach-app .ca-view-x { flex: none; min-height: 48px; padding: 0 24px !important; border: 0 !important; border-radius: 999px !important; background: var(--ca-navy) !important; color: #fff !important; font-size: 16px; font-weight: 700; }
html.coach-app .ca-view-b { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; }
html.coach-app .ca-view-b img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; }
html.coach-app .ca-view-b iframe { width: 100%; height: 100%; border: 0; background: #fff; }

/* the studio page's structure in every class (owner, 2026-10-10): Jobs | All bookings under the head, the open one
   on a light shade with a navy line; then its list; the announcements last */
html.coach-app .ca-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 0 -16px; border-bottom: 1px solid var(--ca-line); }
html.coach-app .ca-tab { display: flex !important; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 60px; height: auto !important; padding: 10px 16px !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; color: var(--ca-navy) !important; font: inherit !important; text-align: left; }
html.coach-app .ca-tab + .ca-tab { border-left: 1px solid var(--ca-line) !important; }
html.coach-app .ca-tab .tl { font-size: 16px; font-weight: 700; }
html.coach-app .ca-tab .ts { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 13px; }
html.coach-app .ca-tab .s { font-weight: 700; color: var(--ca-slate); }
html.coach-app .ca-tab .s.none { font-weight: 400; }
html.coach-app .ca-tab .s.trial { color: #C4001A; }   /* F45 red a step darker: 4.4:1 on the open tab's tint at 13px */ html.coach-app .ca-tab .s.checkin { color: var(--ca-checkin); }
html.coach-app .ca-tab .s.milestone { color: var(--ca-milestone); } html.coach-app .ca-tab .s.birthday { color: var(--ca-birthday); }
html.coach-app .ca-tab[aria-pressed="true"] { background: var(--ca-ann) !important; box-shadow: inset 0 -4px 0 var(--ca-navy) !important; }
html.coach-app .ca-tab:disabled { opacity: .5; }
html.coach-app .ca-cls .ca-band { border-bottom: 0; }
html.coach-app .ca-cls:not(.m-jobs) > .ca-jobs { display: none; }
html.coach-app .ca-cls:not(.m-jobs):not(.m-all) > .ca-tabs { border-bottom: 0; }
html.coach-app .ca-all > .ca-pw:first-child { border-top: 0; }
html.coach-app .ca-cls:not(.m-jobs):not(.m-all) .ca-annw { border-top: 1px solid var(--ca-line); }
html.coach-app #main .ca-cls > .ca-band { cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.coach-app #main .ca-cls > .ca-band::after { content: ''; flex: none; width: 9px; height: 9px; margin: -4px 2px 0 0; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; color: var(--ca-navy); transform: rotate(45deg); }
html.coach-app #main .ca-cls.folded > .ca-band::after { transform: rotate(-45deg); margin-top: 0; }
html.coach-app #main .ca-cls.cur > .ca-band::after, html.coach-app #main .ca-cls.ann-due > .ca-band::after { color: #fff; }
html.coach-app #main .ca-cls.fin:not(.cur):not(.ann-due) > .ca-band::after { color: var(--ca-slate); }
html.coach-app .ca-band-t { flex: 1; min-width: 0; }
html.coach-app .ca-cls.folded > :not(.ca-band) { display: none !important; }
/* a class that is over folds to its head by itself, in grey, so the class on now (or next) leads the page; a tap opens it */
html.coach-app .ca-cls.fin:not(.cur):not(.ann-due) .ca-band-t, html.coach-app .ca-cls.fin:not(.cur):not(.ann-due) .ca-band-n b { color: var(--ca-slate); }
html.coach-app .ca-cls.fin.folded:not(.cur):not(.ann-due) .ca-band { padding-top: 12px; padding-bottom: 10px; }
html.coach-app .ca-cls.fin.folded:not(.cur):not(.ann-due) .ca-band-t { font-size: 17px; }
html.coach-app .ca-cls.fin.folded { margin-top: 8px; }
/* a tag per reason, each in its own job's colour; a person's row in their other classes */
html.coach-app .ca-cls .wl-type b.k-trial { background: var(--ca-trial); } html.coach-app .ca-cls .wl-type b.k-checkin { background: var(--ca-checkin); }
html.coach-app .ca-cls .wl-type b.k-milestone { background: var(--ca-milestone); } html.coach-app .ca-cls .wl-type b.k-birthday { background: var(--ca-birthday); }
html.coach-app .ca-jobs > .ca-copies:first-child > .wl-row:first-child { border-top: 0; }
html.coach-app .ca-copies:empty { display: none; }
/* one order for a class's own rows and the rows of people listed from another class: trial, check-in, birthday, milestone */
html.coach-app .ca-jobs { display: flex; flex-direction: column; }
html.coach-app .ca-copies { display: contents; }
html.coach-app .ca-cls .ca-jobs .wl-row { border-top: 1px solid var(--ca-line) !important; }
html.coach-app .ca-cls.m-jobs > .ca-tabs { border-bottom: 0; }
html.coach-app .ca-jobs .ca-none { order: 99; border-top: 1px solid var(--ca-line); margin: 0; }
html.coach-app .ca-cls .wl-quick { padding: 0 0 14px 110px; }
html.coach-app .ca-cls .wl-quick .btn { min-height: 44px; border: 1.5px solid var(--ca-navy) !important; background: #fff !important; color: var(--ca-navy) !important; font-weight: 700; }   /* outlined: a class with six milestones was a column of filled navy louder than its trialer */
html.coach-app .ca-cls .wl-quick .btn:active { background: var(--ca-ann) !important; }

/* information, not a job (owner, 2026-10-10): an upcoming milestone is an outlined slate box, never filled */
html.coach-app .ca-cls .wl-type b.k-info, html.coach-app .wl-type b.k-info { background: #fff !important; color: var(--ca-slate) !important; box-shadow: inset 0 0 0 1px var(--ca-slate); }

/* Missed: the coach's reason under each missed job (owner, 2026-10-10); with a reason the miss is filed */
html.coach-app .ca-why-h { font-size: 13px; color: var(--ca-slate); margin: 0 0 6px; }
/* the Missed tab's opening words (owner, 2026-10-11: "more prominent"): body size, ink, on a navy rule */
html.coach-app .ca-why-lead { margin: 4px 0 14px; padding: 2px 0 2px 12px; border-left: 4px solid var(--ca-navy); }
html.coach-app .ca-why-lead p { margin: 0 0 8px; font-size: 16px; line-height: 1.45; color: var(--ca-ink); }
html.coach-app .ca-why-lead p:last-child { margin-bottom: 0; }
html.coach-app .ca-why-lead b { font-weight: 700; }
html.coach-app .ca-missw { border-bottom: 1px solid var(--ca-line); }
html.coach-app .ca-missw:last-child { border-bottom: 0; }
html.coach-app .ca-missw > .ca-miss, html.coach-app .ca-missw > button.ca-miss { border-bottom: 0 !important; padding-bottom: 6px; }
/* each missed task with its reason box is one outlined block (owner, 2026-10-11) */
html.coach-app .ca-missw { border: 1px solid var(--ca-navy); margin: 0 0 12px; padding: 0 12px 0 0; background: #fff; }
html.coach-app .ca-missw:last-child { margin-bottom: 0; border-bottom: 1px solid var(--ca-navy); }
html.coach-app .ca-missw .ca-why:last-child { padding-bottom: 12px; }
/* Submit is the page's "for you to do" blue, filled (owner, 2026-10-11) */
html.coach-app .ca-why button[type="submit"] { background: var(--ca-checkin, #0B5ED7) !important; border-color: var(--ca-checkin, #0B5ED7) !important; color: #fff !important; font-size: 15px; }
html.coach-app .ca-why { margin: 0; padding: 0 0 12px 13px; font-size: 13px; color: var(--ca-slate); }
html.coach-app .ca-why.is-filed b { color: #000; margin-right: 6px; }
html.coach-app .ca-why label { display: block; font-size: 13px; font-weight: 700; color: #000; margin-bottom: 4px; }
html.coach-app .ca-why > div { display: flex; gap: 8px; }
html.coach-app .ca-why input { flex: 1; min-width: 0; height: 44px; padding: 0 10px; border: 1px solid var(--ca-slate); border-radius: 0; background: #fff; color: #000; font: inherit; font-size: 16px; }
html.coach-app .ca-why button { flex: none; height: 44px; padding: 0 16px; border: 1px solid var(--ca-navy); border-radius: 0; background: var(--ca-navy); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
html.coach-app .ca-why button:disabled, html.coach-app .ca-why input:disabled { opacity: .55; }
html.coach-app .ca-why em { display: block; margin-top: 4px; font-style: normal; font-weight: 700; color: var(--tone-bad, #98211F); }

/* one announcement from the next (owner, 2026-10-10): a numbered label over each, a heavy rule between them */
html.coach-app .ca-ann-j + .ca-ann-j { border-top: 2px solid var(--ca-navy); margin-top: 6px; }
html.coach-app .ca-ann-no { display: block; font-size: 13px; font-weight: 700; color: var(--ca-slate); margin-bottom: 2px; }

/* ==== ALIGNED WITH THE STUDIO iPAD PAGE (owner, 2026-10-10: "align formatting fully with studio page") ====
   Replaces the consumer-app look above wherever the two differed: a white page, square everything, the studio page's
   navy / slate / hairline values, grey class heads (navy for the current one), banded rows with a 4px bar in the job's
   colour, square filled job boxes at 15px, sentence case. The tabs at the bottom stay: they are this page's own. */
html.coach-app {
  --ca-bg: #fff; --ca-ann: #E4E7F3; --ca-line: #DADDE3; --ca-slate: #5B6270; --ca-navy: #1A1F4E; --ca-ink: #1B2140;
  --ca-milestone: #1A1F4E; --ca-birthday: #5B6270; --ca-band: #ECEEF2; --ca-stripe: #F5F6F8; --ca-pic: 84px;
}
@media (min-width: 761px) { html.coach-app { --ca-pic: 112px; } }
html.coach-app *, html.coach-app *::before, html.coach-app *::after { border-radius: 0 !important; }
html.coach-app body { color: var(--ca-ink); }
/* head: the studio page's -- bold navy title on an ink rule, no condensed capitals */
html.coach-app header { border-bottom: 2px solid var(--ca-ink) !important; padding-bottom: 14px; }
html.coach-app .ca-avatar { background: var(--ca-navy); }
html.coach-app .ca-studio { text-transform: none; letter-spacing: 0; font-size: 15px; }
html.coach-app .ca-title { font-family: inherit; font-size: 28px; line-height: 1.2; text-transform: none; margin-top: 10px; }
html.coach-app .pv-bar { border: 1px solid var(--ca-line); border-left: 4px solid var(--ca-checkin); }
/* blocks: a thin grey frame; titles bold navy in sentence case on an ink rule */
html.coach-app .jobs, html.coach-app .cm-top { border: 1px solid var(--ca-line); }
html.coach-app main > section.jobs:has(.wl) { border: 0; }
html.coach-app .jobs-h, html.coach-app .jobs-fold > summary { font-size: 18px !important; text-transform: none; letter-spacing: 0; border-bottom-color: var(--ca-ink) !important; }
html.coach-app .jobs-fold:not([open]) > summary { border-bottom: 0 !important; }
html.coach-app .jobs-h .n, html.coach-app .jobs-fold > summary .n { font-size: 15px; }
html.coach-app .ca-notes h3 { text-transform: none; letter-spacing: 0; font-size: 15px; }
/* each class its own box: grey head, time and name bold navy; the current class navy with white type */
html.coach-app .ca-cls { border: 1px solid var(--ca-line); margin-top: 22px; }
html.coach-app .ca-cls.cur { border-color: var(--ca-navy); }
html.coach-app .ca-cls .ca-band { margin: 0 -16px; padding: 12px 16px; min-height: 56px; background: var(--ca-band); }
html.coach-app .ca-cls.cur .ca-band { background: var(--ca-navy); }
html.coach-app .ca-band-t { font-size: 20px; text-transform: none; letter-spacing: 0; gap: 2px 14px; }
@media (min-width: 761px) { html.coach-app .ca-band-t { font-size: 24px; } }
html.coach-app .ca-band-n { font-size: 15px; line-height: 1.35; }
html.coach-app .ca-band-n i { font-size: 15px; text-transform: none; letter-spacing: 0; }
html.coach-app .ca-cls.fin.folded:not(.cur):not(.ann-due) .ca-band-t { font-size: 20px; }
html.coach-app .ca-cls.fin.folded { margin-top: 22px; }
html.coach-app .ca-tab .ts { font-size: 15px; }
/* rows: full width, banded, a 4px bar in the colour of the (first) job */
html.coach-app .ca-cls .wl-row { margin: 0 -16px; padding: 0 16px 0 12px; border-left: 4px solid transparent; }
html.coach-app .ca-jobs > .wl-row:nth-child(even), html.coach-app .ca-all > .ca-pw:nth-child(even) { background: var(--ca-stripe) !important; }
html.coach-app .ca-cls .wl-row:has(.wl-type.trial) { border-left-color: var(--ca-trial); }
html.coach-app .ca-cls .wl-row:has(.wl-type.checkin) { border-left-color: var(--ca-checkin); }
html.coach-app .ca-cls .wl-row:has(.wl-type.milestone) { border-left-color: var(--ca-milestone); }
html.coach-app .ca-cls .wl-row:has(.wl-type.birthday) { border-left-color: var(--ca-birthday); }
html.coach-app .ca-cls .wl-row:has(.wl-why1:first-child b.k-info) { border-left-color: var(--ca-line); }
html.coach-app .ca-pw { margin: 0 -16px; padding: 0 16px; }
html.coach-app .ca-cls .wl-line { grid-template-columns: var(--ca-pic) minmax(0, 1fr) 18px; min-height: calc(var(--ca-pic) + 28px); column-gap: 12px; }
html.coach-app .wl-pic, html.coach-app .ca-ann-pic { width: var(--ca-pic); height: var(--ca-pic); }
html.coach-app .wl-pic, html.coach-app .ca-p-pic { background: #F7F8FA; border: 1px solid #D9DCE3; color: var(--ca-slate); font-size: 15px; }
html.coach-app .ca-p { grid-template-columns: 84px minmax(0, 1fr) auto; gap: 12px; }
html.coach-app .ca-p-pic { width: 84px; height: 84px; }
html.coach-app .ca-cls .wl-name, html.coach-app .ca-ann-t strong { font-size: 18px; color: var(--ca-ink); }
html.coach-app .ca-p-t strong, html.coach-app .ca-miss strong { color: var(--ca-ink); }
html.coach-app .ca-cls .wl-type small, html.coach-app .ca-ann-t em, html.coach-app .ca-p-t small { font-size: 15px !important; }
/* the job: a square filled box, as on the studio page; information is outlined */
html.coach-app .ca-cls .wl-type b, html.coach-app .ca-kb { padding: 3px 9px; font-size: 15px; line-height: 1.35; border: 1px solid transparent; }
html.coach-app .ca-cls .wl-type b.k-info, html.coach-app .wl-type b.k-info { box-shadow: none; border-color: var(--ca-slate); }
/* announcements: the studio page's row -- a navy tile with a white icon, the size and place of the photos */
html.coach-app .ca-ann { grid-template-columns: var(--ca-pic) minmax(0, 1fr) 18px; column-gap: 12px; min-height: calc(var(--ca-pic) + 28px); padding-left: 0 !important; }
html.coach-app .ca-annw { padding-left: 16px; }
html.coach-app .ca-ann-pic { background: var(--ca-navy); color: #fff; }
html.coach-app .ca-ann-j strong { font-size: 16px; }
/* buttons: square; the bar at the bottom white on a hairline */
html.coach-app .btn, html.coach-app .btn.ghost { padding-left: 16px; padding-right: 16px; }
html.coach-app .ca-bar { background: #fff; border-top: 1px solid var(--ca-ink); }
html.coach-app .ca-bar .ca-n { border-radius: 0 !important; }
html.coach-app .btn, html.coach-app .btn.ghost, html.coach-app header button, html.coach-app .ca-view-x, html.coach-app .ca-notes textarea { border-radius: 0 !important; }

/* ---- measured against the studio page at the same width (owner: "exactly the same") ---- */
html.coach-app header { padding-top: calc(20px + env(safe-area-inset-top)); }
html.coach-app .ca-title { font-size: 22px; line-height: 1.4; }
@media (min-width: 761px) { html.coach-app .ca-title { font-size: 28px; } }
/* the class head: time and name, the counts on the line beneath, the chevron at the right */
html.coach-app .ca-cls { margin-top: 22px; }
html.coach-app #main .ca-cls > .ca-band { display: grid; grid-template-columns: minmax(0, 1fr) 12px; gap: 4px 16px; align-items: center; }
html.coach-app .ca-band-t { grid-column: 1; grid-row: 1; line-height: 1.4; }
html.coach-app .ca-cls.fin:not(.cur):not(.ann-due) .ca-band-t { color: var(--ca-navy); }
html.coach-app .ca-cls.fin.folded:not(.cur):not(.ann-due) .ca-band { padding-top: 12px; padding-bottom: 12px; }
html.coach-app .ca-band-n { grid-column: 1; grid-row: 2; text-align: left; white-space: normal; }
html.coach-app .ca-band-n br { display: none; }
html.coach-app .ca-band-n i { display: inline; font-weight: 700; margin-right: 10px; }
html.coach-app .ca-band-n b { margin-left: 10px; } html.coach-app .ca-band-n b:first-child { margin-left: 0; }
html.coach-app #main .ca-cls > .ca-band::after { grid-column: 2; grid-row: 1 / span 2; justify-self: center; width: 10px; height: 10px; margin: -5px 0 0; }
html.coach-app #main .ca-cls.folded > .ca-band::after { margin-top: 0; }
@media (min-width: 761px) {
  html.coach-app #main .ca-cls > .ca-band { grid-template-columns: minmax(0, 1fr) auto 12px; }
  html.coach-app .ca-band-n { grid-column: 2; grid-row: 1; text-align: right; }
  html.coach-app #main .ca-cls > .ca-band::after { grid-column: 3; grid-row: 1; }
}
/* Jobs | All bookings */
html.coach-app .ca-tabs { border-top: 1px solid var(--ca-line); }
html.coach-app .ca-tab { min-height: 52px; padding: 8px 16px !important; }
html.coach-app .ca-tab .ts { gap: 2px 12px; color: var(--ca-slate); line-height: 1.4; }
html.coach-app .ca-tab .tl { line-height: 1.4; }
html.coach-app .ca-tab[aria-pressed="true"] { background: #E4E8F2 !important; }
/* a person: photo | name, the job box under it, the detail under that | chevron */
html.coach-app .ca-cls .wl-row { padding: 0 16px 0 13px; }
html.coach-app .ca-cls .wl-line { padding-top: 14px; padding-bottom: 14px; min-height: 0; row-gap: 4px; align-items: center; }
html.coach-app .ca-cls .wl-name { line-height: 1.4; align-self: end; }
html.coach-app .ca-cls .wl-type { gap: 4px; align-self: start; }
html.coach-app .ca-cls .wl-why1 { flex-direction: column; align-items: flex-start; gap: 4px; }
html.coach-app .ca-cls .wl-type small { color: #374151; line-height: 1.4; }
html.coach-app .ca-cls .wl-chev::before, html.coach-app .ca-ann .wl-chev::before { content: '\203A'; width: auto; height: auto; border: 0; transform: none; font-size: 18px; line-height: 1.4; color: var(--ca-slate); }
html.coach-app .ca-cls .wl-row.open .wl-chev::before, html.coach-app .ca-annw.open .wl-chev::before { transform: rotate(90deg); }
html.coach-app .ca-cls .wl-chev { font-size: 18px; }
/* All bookings rows */
html.coach-app .ca-pw { padding: 0 16px 0 17px; }
html.coach-app .ca-p { padding: 14px 0 !important; min-height: 0; }
html.coach-app .ca-p-t strong { font-size: 18px; line-height: 1.4; }
html.coach-app .ca-p-r em { font-size: 15px; }
/* announcements row */
html.coach-app .ca-annw { padding: 0 16px 0 17px; }
html.coach-app .ca-ann { min-height: 0; padding: 14px 0 !important; row-gap: 4px; }
html.coach-app .ca-ann-t strong { color: var(--ca-navy); line-height: 1.4; }
html.coach-app .ca-ann-t em { font-weight: 700; margin-top: 4px; line-height: 1.4; }
html.coach-app .ca-cls .wl-name { font-weight: 700; }
html.coach-app .ca-cls .wl-type small { font-weight: 400; }
html.coach-app .ca-cls .wl-chev { font-size: 0; }   /* its own "+" / "−" stays hidden: the chevron is the ::before */
/* "Milestone completed" on the row: under the job box and its detail, on the same left edge as the name */
html.coach-app .ca-cls .wl-quick { padding: 0 0 14px calc(var(--ca-pic) + 12px); margin-top: -4px; }
html.coach-app .ca-cls .wl-quick .btn { font-size: 15px; }

/* Check-in scan (owner, 2026-10-10): the Mariahilf coach's job row in the class the scan follows */
html.coach-app .ca-scanjob { display: flex; align-items: center; gap: 12px; justify-content: space-between; border-top: 1px solid var(--ca-line); border-left: 4px solid var(--ca-checkin); margin: 0 -16px; padding: 12px 16px 12px 12px; }
html.coach-app .ca-scan-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.coach-app .ca-scan-t strong { font-size: 15px; color: var(--ca-navy); }
html.coach-app .ca-scan-t em { font-style: normal; font-size: 13px; color: var(--ca-slate, #5B6270); }
html.coach-app .ca-scanjob.is-done { border-left-color: var(--ca-line); }
html.coach-app .ca-scan-t em.tone-ok { color: var(--tone-ok); font-weight: 700; } html.coach-app .ca-scan-t em.tone-bad { color: var(--tone-bad); font-weight: 700; }
html.coach-app .ca-scan-b { display: flex; gap: 8px; flex: 0 0 auto; }
html.coach-app .ca-scan-b .btn { min-height: 44px; }
html.coach-app .ca-scan-b .btn[aria-pressed="true"] { background: var(--ca-navy); color: #fff; border-color: var(--ca-navy); }

/* checked in or not, at the right of a Jobs row (the studio page's .p-in) */
html.coach-app .ca-cls .wl-line { grid-template-columns: var(--ca-pic) minmax(0, 1fr) auto 18px; grid-template-areas: "pic name in chev" "pic type in chev"; }
html.coach-app .ca-cls .wl-row.open .wl-line { grid-template-columns: minmax(0, 1fr) auto 18px; grid-template-areas: "name in chev" "type in chev"; }
html.coach-app .ca-in { grid-area: in; align-self: center; font-size: 15px; font-weight: 700; white-space: nowrap; color: var(--ca-slate); }
html.coach-app .ca-in.yes { color: var(--tone-ok, #1C6B33); }
html.coach-app .ca-in:empty { display: none; }
/* finished classes: one line under the others, a tap shows them beneath it (the studio page's .done-fold) */
html.coach-app .ca-wl { display: flex; flex-direction: column; }
html.coach-app .ca-wl > .ca-donefold { order: 1; }
html.coach-app .ca-wl > .ca-cls.ca-fin-low { order: 2; }
html.coach-app .ca-wl:not(.ca-show-done) > .ca-cls.ca-fin-low { display: none; }
html.coach-app .ca-donefold { width: 100%; display: flex !important; justify-content: space-between; align-items: center; margin-top: 22px; min-height: 48px; height: auto !important; padding: 10px 16px !important;
  border: 1px solid var(--ca-line) !important; background: #fff !important; color: var(--ca-slate) !important; font: inherit !important; font-size: 15px !important; font-weight: 700 !important; text-align: left; cursor: pointer; }
html.coach-app .ca-donefold[hidden] { display: none !important; }
html.coach-app .ca-donechev { font-size: 22px; font-weight: 700; line-height: 1; transition: transform .15s ease; }
html.coach-app .ca-donefold[aria-expanded="true"] .ca-donechev { transform: rotate(90deg); }

/* a Lift Club class: three tabs, and the list of everyone with their last log (person-sections.js liftList) */
html.coach-app .ca-tabs.three { grid-template-columns: 1fr 1fr 1fr; }
html.coach-app .ca-lift { margin: 0 -16px; }

/* Check-in tab (owner, 2026-10-10): the list of all open check-ins, and a member's profile as its own page */
html.coach-app .ca-checkins { display: none; }
html.coach-app.ca-has-bar[data-ca-tab="checkin"] main > :not(.pv-bar):not(.ca-profhost) { display: none; }
html.coach-app.ca-has-bar[data-ca-tab="checkin"] .ca-checkins { display: block; }
html.coach-app.ca-has-bar.ca-prof[data-ca-tab="checkin"] .ca-checkins { display: none; }
html.coach-app .ca-profhost { display: none; }
html.coach-app.ca-has-bar.ca-prof[data-ca-tab="checkin"] .ca-profhost { display: block; }
html.coach-app .ca-ci-head, html.coach-app .ca-ci { display: grid; grid-template-columns: minmax(0, 1.4fr) 124px minmax(0, 1.2fr) minmax(0, .8fr); gap: 4px 12px; align-items: center; text-align: left; }
html.coach-app .ca-ci-head { padding: 10px 12px 8px; font-size: 13px; font-weight: 700; color: var(--ca-slate); border-bottom: 1px solid var(--ca-ink, #1A1F4E); }
html.coach-app .ca-ci { width: 100%; min-height: 56px; height: auto !important; padding: 10px 12px !important; border: 0 !important; border-bottom: 1px solid var(--ca-line) !important; border-left: 4px solid var(--ca-checkin) !important; border-radius: 0 !important; background: #fff !important; color: var(--ca-navy) !important; font-size: 15px; font-weight: 400; }
html.coach-app .ca-ci:nth-of-type(even) { background: #F6F7FA !important; }
html.coach-app .ca-ci strong { font-size: 15px; overflow-wrap: anywhere; }
html.coach-app .ca-ci-step { font-weight: 700; color: var(--ca-checkin); }
html.coach-app .ca-ci em { font-style: normal; color: var(--ca-slate); }
html.coach-app .ca-bar .ca-n-ci { background: var(--ca-checkin); }
html.coach-app .ca-prof-h { padding: 4px 0 12px; }
html.coach-app .ca-prof-back { margin: 0 0 12px; }
html.coach-app .ca-prof-n { font-size: 22px; font-weight: 700; color: var(--ca-navy); margin: 0 0 10px; }
@media (max-width: 520px) {
  html.coach-app .ca-ci-head { display: none; }
  html.coach-app .ca-ci { grid-template-columns: minmax(0, 1fr) auto; }
  html.coach-app .ca-ci > span:nth-child(3) { grid-column: 1; } html.coach-app .ca-ci > span:nth-child(4) { grid-column: 2; text-align: right; }
}
/* the profile shows the row's opened part only: its closed line (name, class, job) is the profile's own head */
html.coach-app .ca-profhost > .wl-row { border: 0 !important; margin: 0; padding: 0; background: none !important; box-shadow: none !important; }
html.coach-app .ca-profhost > .wl-row > .wl-line { display: none !important; }
html.coach-app .ca-profhost > .wl-row > .wl-detail { padding: 0 !important; border-top: 1px solid var(--ca-line); padding-top: 14px !important; }
html.coach-app .ca-prof-n small { display: block; font-size: 15px; font-weight: 700; color: var(--ca-checkin); margin-top: 2px; }
html.coach-app .ca-prof-f { border-top: 1px solid var(--ca-line); margin-top: 16px; padding-top: 12px; }
/* the member's scan results under a check-in (the member InBody page, embedded) */
html.coach-app .ca-scanframe { display: none; }
html.coach-app.ca-has-bar.ca-prof[data-ca-tab="checkin"] .ca-scanframe:not([hidden]) { display: block; }
html.coach-app .ca-scanframe iframe { display: block; width: 100%; height: 420px; border: 0; background: #fff; }
/* "Your job": what the coach does at this check-in, at the top of its page */
html.coach-app .ca-job { border-left: 4px solid var(--ca-checkin); background: #F6F7FA; padding: 12px 14px; margin: 4px 0 14px; }
html.coach-app .ca-job strong { display: block; font-size: 15px; color: var(--ca-navy); margin-bottom: 6px; }
html.coach-app .ca-job ol { margin: 0; padding-left: 20px; } html.coach-app .ca-job li { font-size: 15px; line-height: 1.4; margin: 3px 0; color: var(--ca-navy); }
html.coach-app .ca-job-g { margin: 8px 0 0; font-size: 15px; font-weight: 700; color: var(--ca-navy); }
/* the member's onboarding goal and challenge goal, at the top of a check-in (only when there is one) */
html.coach-app .ca-topgoals { margin: 4px 0 12px; }
html.coach-app .ca-topgoals p { margin: 0 0 8px; font-size: 15px; line-height: 1.4; color: var(--ca-navy); overflow-wrap: anywhere; }
html.coach-app .ca-topgoals b { display: block; font-size: 13px; color: var(--ca-slate); }
/* Challenge tab: the Check-in tab's list and page, for the challenge check-ins */
html.coach-app.ca-has-bar[data-ca-tab="challenge"] main > :not(.pv-bar):not(.ca-profhost) { display: none; }
html.coach-app.ca-has-bar[data-ca-tab="challenge"] .ca-checkins { display: block; }
html.coach-app.ca-has-bar.ca-prof[data-ca-tab="challenge"] .ca-checkins { display: none; }
html.coach-app.ca-has-bar.ca-prof[data-ca-tab="challenge"] .ca-profhost { display: block; }
html.coach-app.ca-has-bar.ca-prof[data-ca-tab="challenge"] .ca-scanframe:not([hidden]) { display: block; }
html.coach-app .ca-bar button { font-size: 11px !important; letter-spacing: .03em; }
/* Challenge tab: a participant's status and the scan booking on their page */
html.coach-app .ca-ci-step.tone-bad { color: var(--bad, #B3261E); } html.coach-app .ca-ci-step.tone-warn { color: #8A5A00; }
html.coach-app .ca-ci-step.tone-ok { color: #1C6B33; } html.coach-app .ca-ci-step.tone-blue { color: var(--ca-checkin); }
html.coach-app .ca-ch-st { margin: 0 0 12px; font-size: 15px; color: var(--ca-navy); } html.coach-app .ca-ch-st b { font-weight: 700; }
html.coach-app .ca-ch-st b.tone-bad { color: var(--bad, #B3261E); } html.coach-app .ca-ch-st b.tone-warn { color: #8A5A00; } html.coach-app .ca-ch-st b.tone-ok { color: #1C6B33; } html.coach-app .ca-ch-st b.tone-blue { color: var(--ca-checkin); }
html.coach-app .ca-ch-scan { border-top: 1px solid var(--ca-line); padding-top: 14px; margin-top: 4px; } html.coach-app .ca-ch-scan strong { display: block; margin-bottom: 8px; color: var(--ca-navy); }
html.coach-app .ca-ch-scan .btn { margin-top: 8px; width: 100%; } html.coach-app .ca-ch-scan p { margin: 8px 0; font-size: 15px; }

html.coach-app .ca-lift-open { padding: 0 16px 14px 17px; }

/* Processes tab (owner, 2026-10-11): one row per process; a row opens its flashcards (/coach-process.js) --
   one column of the coach guide a card, a swipe goes on. Square, hairlines, the page's own navy and slate. */
html.coach-app .ca-process { display: none; }
html.coach-app.ca-has-bar[data-ca-tab="process"] main > :not(.pv-bar) { display: none; }
html.coach-app.ca-has-bar[data-ca-tab="process"] .ca-process { display: block; }
html.coach-app .cp-row { width: 100%; min-height: 64px; height: auto !important; display: flex !important; align-items: center; gap: 12px; padding: 12px !important; border: 0 !important; border-bottom: 1px solid var(--ca-line) !important; background: #fff !important; color: var(--ca-ink) !important; font: inherit !important; text-align: left; cursor: pointer; }
html.coach-app .cp-row:nth-of-type(even) { background: var(--ca-stripe) !important; }
html.coach-app .cp-row:last-child { border-bottom: 0 !important; }
html.coach-app .cp-row:active { background: var(--ca-ann) !important; }
html.coach-app .cp-row > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.coach-app .cp-row strong { font-size: 17px; font-weight: 700; color: var(--ca-navy); }
html.coach-app .cp-row small { font-size: 14px !important; color: var(--ca-slate); }
html.coach-app .cp-row em { flex: none; font-style: normal; font-size: 14px; color: var(--ca-slate); white-space: nowrap; }
html.coach-app .cp-chev { flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 2.5px solid var(--ca-navy); border-bottom: 2.5px solid var(--ca-navy); transform: rotate(-45deg); }
html.coach-app .cp-row:focus-visible, html.coach-app .cp-stage:focus-visible, html.coach-app .cp-nav button:focus-visible, html.coach-app .cp-back:focus-visible, html.coach-app .cp-shot:focus-visible { outline: 2px solid var(--ca-navy); outline-offset: -2px; }
html.coach-app .cp-row small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.coach-app .ca-process:not(:has(.cp-stage)) { padding-top: 0; padding-bottom: 0; }
/* inside a deck the page's large head is gone: the card has the screen (design critique, 2026-10-12) */
html.coach-app.cp-deck[data-ca-tab="process"] header { display: none !important; }
html.coach-app.cp-deck[data-ca-tab="process"] .ca-extra { padding-top: 6px; padding-bottom: 0; }
html.coach-app .cp-back { min-height: 44px; height: auto !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--ca-navy) !important; font: inherit !important; font-size: 15px !important; font-weight: 700 !important; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* the flashcards: one column of the printed coach guide per card, all cards one size; a column that does not fit
   the phone is dealt onto two cards by coach-process.js, so no card scrolls */
html.coach-app .ca-process:has(.cp-stage) { border: 0; padding: 0; }
html.coach-app .cp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 2px solid var(--ca-ink); padding-bottom: 6px; }
html.coach-app .cp-nav { display: flex; align-items: center; gap: 10px; }
html.coach-app .cp-nav button { flex: none; width: 44px; height: 44px !important; padding: 0 !important; border: 1px solid var(--ca-ink) !important; background: #fff !important; cursor: pointer; display: flex !important; align-items: center; justify-content: center; }
html.coach-app .cp-nav button i { width: 9px; height: 9px; border-right: 2.5px solid var(--ca-navy); border-bottom: 2.5px solid var(--ca-navy); transform: rotate(-45deg); margin-left: -4px; }   /* the page's own chevron */
html.coach-app .cp-nav .cp-prev i { transform: rotate(135deg); margin-left: 4px; }
html.coach-app .cp-nav button:disabled { opacity: .3; cursor: default; }
html.coach-app .cp-count { min-width: 62px; font-size: 15px; font-weight: 700; color: var(--ca-navy); text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the stack: every card lies on the same spot; coach-process.js sets each one's shift, size and order, and the
   stage's height (down to the tab bar). The stage keeps a little room at the right for the two backs behind. */
html.coach-app .cp-stage { position: relative; height: 420px; margin: 8px 0 0; touch-action: pan-y; cursor: grab; outline-offset: 2px; }
html.coach-app .cp-stage.is-drag { cursor: grabbing; user-select: none; -webkit-user-select: none; }
html.coach-app .cp-card { box-sizing: border-box; position: absolute; top: 0; left: 0; width: calc(100% - 26px); height: 100%; overflow: hidden; padding: 14px 16px 16px; border: 1px solid var(--ca-slate); background: var(--ca-stripe); transform-origin: right center; will-change: transform; -webkit-tap-highlight-color: transparent; }
html.coach-app .cp-card > * { opacity: 0; transition: opacity .18s; }   /* a card behind is a blank back */
html.coach-app .cp-card.is-cur, html.coach-app .cp-card.is-near { background: #fff; border-color: var(--ca-navy); }
html.coach-app .cp-card.is-cur > *, html.coach-app .cp-card.is-near > * { opacity: 1; }
/* the cards are ROUNDED (owner, 2026-10-12: "rounded cards") -- the one exception to this page's square rule: a
   flashcard is an object you hold. One even outline instead of the heavy top rule, which bends badly round a corner. */
html.coach-app .cp-stage .cp-card { border-radius: 16px !important; border-width: 1.5px; border-top-width: 1.5px; padding-top: 16px; }
html.coach-app .cp-stage .cp-card .cp-say { border-radius: 0 8px 8px 0 !important; }
html.coach-app .cp-card.cp-probe { height: auto; visibility: hidden; pointer-events: none; }
html.coach-app .cp-sec { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--ca-red, #D6001C); }
html.coach-app .cp-card h3 { margin: 0 0 2px; padding: 0; border: 0; font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--ca-navy); text-transform: none; letter-spacing: 0; }
html.coach-app .cp-a { font-size: 16px; line-height: 1.4; color: var(--ca-ink); }
html.coach-app .cp-k { margin: 14px 0 5px !important; font-size: 13px; font-weight: 700; color: var(--ca-slate); }
html.coach-app .cp-a p { margin: 0 0 8px; }
html.coach-app .cp-a ul, html.coach-app .cp-a ol { margin: 0 0 8px; padding-left: 20px; }
html.coach-app .cp-a li { margin: 4px 0; }
html.coach-app .cp-a > :first-child { margin-top: 10px !important; }
html.coach-app .cp-a > :last-child { margin-bottom: 0; }
html.coach-app .cp-a strong { font-weight: 700; color: var(--ca-navy); }
/* what the coach SAYS is what has to be learnt: the heaviest thing on the card after its title */
html.coach-app .cp-say { padding: 10px 12px; border-left: 4px solid var(--ca-red, #D6001C); background: var(--ca-stripe); color: var(--ca-navy); font-size: 17px; font-weight: 700; line-height: 1.35; }
html.coach-app .cp-note { font-size: 14px; color: var(--ca-slate); }
html.coach-app .cp-x { list-style: none; padding-left: 0 !important; }
html.coach-app .cp-x li { position: relative; padding-left: 20px; }
html.coach-app .cp-x li::before { content: '×'; position: absolute; left: 1px; top: -1px; font-weight: 700; color: var(--ca-red, #D6001C); }
/* a page preview: fitted into the card (top of the page first), full size on a tap */
html.coach-app .cp-card.is-shot { display: flex; flex-direction: column; }
html.coach-app .cp-card.is-shot .cp-a { flex: 1; min-height: 0; display: flex; }
html.coach-app .cp-shot { position: relative; flex: 1; min-height: 0; width: calc(100% + 32px); margin: 0 -16px -16px; padding: 0 !important; border: 0 !important; border-top: 1px solid var(--ca-line) !important; background: #fff !important; height: auto !important; overflow: hidden; cursor: zoom-in; display: block !important; }
html.coach-app .cp-shot img { display: block; width: 100%; height: auto; pointer-events: none; }
html.coach-app .cp-shot span { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 12px; background: linear-gradient(rgba(255,255,255,0), #fff 55%); color: var(--ca-navy); font: 700 15px/1.2 inherit; text-align: center; text-decoration: underline; text-underline-offset: 3px; }
html.coach-app .cp-zoom { position: fixed; inset: 0; z-index: 2000; overflow: auto; -webkit-overflow-scrolling: touch; background: #fff; cursor: zoom-out; }
html.coach-app .cp-zoom img { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
html.coach-app .cp-zoom-x { position: sticky; top: 8px; float: right; margin: 8px 8px 0 0; z-index: 1; min-height: 44px; padding: 0 16px !important; border: 1px solid var(--ca-ink) !important; background: var(--ca-navy) !important; color: #fff !important; font: 700 15px/1 inherit !important; }
/* How to (owner, 2026-10-13): folders on the list; a card uploaded as an image fills its card, with its preview screenshot as a strip under it */
html.coach-app .cp-cat { margin: 0; padding: 18px 12px 6px; border: 0; border-bottom: 2px solid var(--ca-ink); font-size: 14px; font-weight: 700; color: var(--ca-navy); text-transform: none; letter-spacing: 0; }
html.coach-app .cp-cat:first-child { padding-top: 10px; }
html.coach-app .cp-stage .cp-card.is-pic { padding: 0; display: flex; flex-direction: column; }
html.coach-app .cp-pic { flex: 1; min-height: 0; width: 100%; height: auto !important; padding: 0 !important; border: 0 !important; background: #fff !important; display: block !important; cursor: zoom-in; }
html.coach-app .cp-pic img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
html.coach-app .cp-pv { flex: none; width: 100%; height: 76px !important; display: flex !important; align-items: center; gap: 12px; padding: 8px 14px !important; border: 0 !important; border-top: 1px solid var(--ca-line) !important; background: var(--ca-stripe) !important; color: var(--ca-navy) !important; font: inherit !important; text-align: left; cursor: zoom-in; }
html.coach-app .cp-pv img { flex: none; width: 60px; height: 60px; object-fit: cover; object-position: top; border: 1px solid var(--ca-line); background: #fff; pointer-events: none; }
html.coach-app .cp-pv span { display: flex; flex-direction: column; gap: 2px; }
html.coach-app .cp-pv b { font-size: 16px; font-weight: 700; }
html.coach-app .cp-pv small { font-size: 14px !important; color: var(--ca-slate); }
html.coach-app .cp-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--ca-navy); background: var(--ca-navy); color: #fff !important; font-size: 16px; font-weight: 700; text-decoration: none; }
html.coach-app .cp-link::after { content: '↗'; margin-left: 8px; }
html.coach-app .cp-linkbar { flex: none; justify-content: center; min-height: 52px; border: 0; }
html.coach-app .cp-link:focus-visible { outline: 2px solid var(--ca-red, #D6001C); outline-offset: 2px; }
html.coach-app .cp-pic:focus-visible, html.coach-app .cp-pv:focus-visible { outline: 2px solid var(--ca-navy); outline-offset: -2px; }
html.coach-app .cp-hint { margin: 8px 0 0; height: 20px; font-size: 14px; color: var(--ca-slate); text-align: center; }
@media (min-width: 761px) { html.coach-app .cp-stage, html.coach-app .cp-top, html.coach-app .cp-hint { max-width: 520px; margin-left: auto; margin-right: auto; } }
@media (prefers-reduced-motion: reduce) { html.coach-app .cp-card, html.coach-app .cp-card > * { transition: none !important; } }
/* six tabs (the head coach's page, which also has Check-in): each tab takes the room its word needs, so "Commission" and "Processes" do not touch on a phone */
html.coach-app .ca-bar:has(button:nth-child(6)) { padding-left: 2px; padding-right: 2px; }
html.coach-app .ca-bar:has(button:nth-child(6)) button { flex: 1 1 auto; }   /* room by the length of the word, not six equal slots */

/* the bar's icons (owner, 2026-10-13: "icons slightly larger. more fading for non selected"): 32px, and a tab that is
   not open has its icon in a light slate -- a graphic, the word under it keeps the readable slate; the open tab is navy */
html.coach-app .ca-bar svg { width: 32px; height: 32px; }
html.coach-app .ca-bar button:not(.is-on) svg { color: #B4B7CF; }
html.coach-app .ca-bar .ca-n { left: calc(50% + 10px); }