/* App-only layout on top of the design kit. Tokens only; mobile first. */

/* Text size: the app reads a little smaller than the marketing site; each person can pick Small / Medium / Large
   (avatar menu or My profile, saved per device as gm-font). */
:root { --gm-text-xs: 11.5px; --gm-text-sm: 12.5px; --gm-text-md: 13.5px; --gm-text-base: 14px; --gm-text-lg: 16px; --gm-text-xl: 19px; --gm-text-2xl: 22px; --gm-text-3xl: 27px; --gm-text-4xl: 34px; }
:root[data-font="small"] { --gm-text-xs: 11px; --gm-text-sm: 12px; --gm-text-md: 12.5px; --gm-text-base: 13px; --gm-text-lg: 15px; --gm-text-xl: 17px; --gm-text-2xl: 20px; --gm-text-3xl: 25px; --gm-text-4xl: 30px; }
:root[data-font="large"] { --gm-text-xs: 13px; --gm-text-sm: 14px; --gm-text-md: 15px; --gm-text-base: 16px; --gm-text-lg: 18px; --gm-text-xl: 21px; --gm-text-2xl: 26px; --gm-text-3xl: 32px; --gm-text-4xl: 40px; }
.app-auth { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: var(--gm-space-5); padding: var(--gm-space-6) var(--gm-gutter); }
.app-auth__logo img { height: 32px; width: auto; display: block; }
.app-auth__card { width: min(440px, calc(100vw - 32px)); padding: clamp(20px, 5vw, 32px); display: grid; gap: var(--gm-space-4); }
.app-auth__card h1 { margin: 0; font: 800 var(--gm-text-2xl)/1.15 var(--gm-font-display); letter-spacing: -0.02em; }
.app-auth__card p { margin: 0; }
.app-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--gm-space-3); color: var(--gm-muted); font-size: var(--gm-text-sm); }
.app-divider::before, .app-divider::after { content: ""; height: 1px; background: var(--gm-line); }
.app-code { font: 600 var(--gm-text-2xl) var(--gm-font-mono); letter-spacing: .3em; text-align: center; }

.app-gym { display: grid; gap: 2px; padding: 0 var(--gm-space-3); }
.app-gym b { font-size: var(--gm-text-md); }
.app-logout { justify-content: flex-start; gap: var(--gm-space-3); color: var(--gm-text-2); }
/* PRO badge next to the logo */
.app-plan-badge { margin-right: auto; padding: 3px 7px; border-radius: 6px; background: var(--gm-accent); color: #fff; font: 700 10px/1 var(--gm-font-mono); letter-spacing: .08em; text-decoration: none; }
.app-plan-badge:hover, .app-plan-badge:focus-visible { color: #fff; background: var(--gm-accent-hover, var(--gm-accent)); filter: brightness(1.08); }

/* Search everything (top bar) */
.app-find { position: relative; flex: 1; max-width: 520px; }
.app-find__form { position: relative; display: flex; align-items: center; }
.app-find__form > svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--gm-muted); pointer-events: none; }
.app-find__form .gm-input { height: 38px; padding-left: 36px; padding-right: 36px; }
.app-find__key { position: absolute; right: 10px; padding: 1px 6px; border: 1px solid var(--gm-line); border-radius: 5px; font: 500 11px/16px var(--gm-font-mono); color: var(--gm-muted); }
.app-find__panel { left: 0; right: 0; max-width: none; max-height: min(70vh, 520px); overflow-y: auto; }
.app-find__group + .app-find__group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--gm-line); }
.app-find__label { padding: 8px 10px 4px; font: 600 10.5px/1 var(--gm-font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--gm-muted); }
.app-find__hit { min-height: 44px; }
.app-find__hit.is-active { background: var(--gm-surface-3); color: var(--gm-text); }
.app-find__text { display: grid; gap: 1px; min-width: 0; }
.app-find__text b { color: var(--gm-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-find__text small { color: var(--gm-muted); font-size: var(--gm-text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-find__empty { margin: 0; padding: 14px 10px; color: var(--gm-muted); font-size: var(--gm-text-sm); }
.app-find__page-form .gm-input { height: 46px; font-size: var(--gm-text-base); }
.app-find__page { padding: 6px; }

/* Avatar menu */
.app-me > summary { overflow: hidden; }
.app-me > summary img { width: 100%; height: 100%; object-fit: cover; }
.app-me .gm-popover__panel { width: 280px; }
.app-me .gm-popover__head span { display: block; }
.app-me__row { display: grid; gap: 6px; padding: 8px 10px; }
.app-textsize { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.app-textsize .app-seg { border: 0; background: none; cursor: pointer; font-family: inherit; }
.app-textsize .app-seg.is-on, .app-textsize .app-seg[aria-pressed="true"] { background: var(--gm-surface); color: var(--gm-text); }
.app-textsize--2 { grid-template-columns: repeat(2, 1fr); }
.app-textsize--4 { grid-template-columns: repeat(4, 1fr); }
.app-textsize--4 .app-seg { padding-inline: 4px; font-size: var(--gm-text-xs); }

.app-form { display: grid; gap: var(--gm-space-5); max-width: 720px; }
.app-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--gm-space-4); }
.app-form legend { font: 700 var(--gm-text-lg) var(--gm-font-display); margin-bottom: var(--gm-space-2); }
.app-summary { display: grid; gap: var(--gm-space-2); padding: var(--gm-space-4); border-radius: var(--gm-radius-md); background: var(--gm-surface-2); border: 1px solid var(--gm-line); }
.app-summary div { display: flex; justify-content: space-between; gap: var(--gm-space-3); }
.app-summary .app-total { font-weight: 700; border-top: 1px solid var(--gm-line); padding-top: var(--gm-space-2); }

.app-member-head { display: flex; flex-wrap: wrap; gap: var(--gm-space-4); align-items: center; }
.app-member-head .gm-avatar { width: 56px; height: 56px; font-size: var(--gm-text-lg); }
.app-member-head h1 { margin: 0; font: 800 var(--gm-text-2xl)/1.15 var(--gm-font-display); }
.app-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--gm-space-3); margin: 0; }
.app-kv div { display: grid; gap: 2px; }
.app-kv dt { font-size: var(--gm-text-sm); color: var(--gm-muted); }
.app-kv dd { margin: 0; font-weight: 600; }

.app-row-link { color: inherit; text-decoration: none; }
.app-row-link:hover b { text-decoration: underline; }
.app-chips { display: flex; gap: var(--gm-space-2); overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; scrollbar-width: thin; }
.app-chips :is(a, button) { white-space: nowrap; text-decoration: none; }
.app-chips button { font: inherit; cursor: pointer; }
.app-chips :is(a, button)[aria-current="page"] { border-color: var(--gm-accent); color: var(--gm-accent-text); font-weight: 600; }

/* Invoice (printable) */
.app-invoice { max-width: 760px; margin: 0 auto; background: var(--gm-surface); padding: clamp(20px, 5vw, 40px); border: 1px solid var(--gm-line); border-radius: var(--gm-radius-lg); display: grid; gap: var(--gm-space-5); }
.app-invoice h1 { margin: 0; font: 800 var(--gm-text-xl) var(--gm-font-display); }
.app-invoice__parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--gm-space-4); align-items: start; }
.app-invoice__meta { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: var(--gm-text-sm); }
.app-invoice__meta dt { color: var(--gm-muted); }
.app-invoice__meta dd { margin: 0; text-align: right; font-weight: 600; white-space: nowrap; }
.app-invoice__logo--ours { height: 34px; width: auto; max-width: none; margin: 0; }
:root[data-theme="dark"] .app-invoice__logo--ours { content: url(/brand/logo-reverse.svg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .app-invoice__logo--ours { content: url(/brand/logo-reverse.svg); } }
@media print { .app-invoice__logo--ours { content: url(/brand/logo-color.svg) !important; } }
@media print {
  .gm-sidebar, .gm-main__bar, .gm-banner, .app-no-print { display: none !important; }
  .gm-app { display: block; }
  .app-invoice { border: 0; }
}

/* Phones: the top-bar search becomes an icon (the Members page has the full search); page actions share one row */
.app-search-icon { display: none; }
@media (max-width: 599px) {
  .app-find { display: none; }
  .app-search-icon { display: inline-flex; }
  .gm-page-head .gm-actions { width: 100%; flex-wrap: nowrap; }
  .gm-page-head .gm-actions > .gm-btn { flex: 1 1 0; }
}

/* Sidebar branch switch */
.app-branch-switch .gm-select { height: 34px; font-size: var(--gm-text-sm); margin-top: 4px; }

/* Front desk */
.app-desk-search { height: 52px; font-size: var(--gm-text-lg); }
.app-desk-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gm-space-3); padding: var(--gm-space-3) var(--gm-space-4); }
.app-desk-row > a { flex: 1 1 220px; min-width: 0; }
.app-desk-row__status { display: flex; flex-wrap: wrap; gap: var(--gm-space-2); align-items: center; }
.app-desk-row form { margin: 0; }
/* Renewals: the buttons sit in fixed columns, so Remind and Collect line up from row to row whatever the text beside them */
.app-renew-row .gm-actions { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: var(--gm-space-2); flex: 1 1 100%; }
.app-renew-row .gm-actions > .gm-btn { width: 100%; justify-content: center; white-space: nowrap; }
@media (min-width: 900px) {
  .app-renew-row { display: grid; grid-template-columns: minmax(0, 1fr) 330px 276px; }
  .app-renew-row .gm-actions { grid-template-columns: 116px 152px; }
}

/* Member profile */
.app-ms { display: grid; gap: var(--gm-space-2); padding-bottom: var(--gm-space-3); border-bottom: 1px solid var(--gm-line); }
.app-ms:last-child { border-bottom: 0; padding-bottom: 0; }
.app-cell-actions .gm-actions { flex-wrap: nowrap; justify-content: flex-end; }
.app-cell-actions form { margin: 0; }
.gm-actions form { margin: 0; display: inline; }

/* Tabs as links, filters */
.app-tabs { margin-bottom: var(--gm-space-2); }
.app-tabs .gm-tab { text-decoration: none; }
.app-filters { display: flex; flex-wrap: wrap; gap: var(--gm-space-3); align-items: flex-end; }
.app-filters .gm-field { margin: 0; }

/* Invites */
.app-invite { padding: var(--gm-space-3); border: 1px solid var(--gm-line); border-radius: var(--gm-radius-md); }
.app-invite--new { border-color: var(--gm-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gm-accent) 20%, transparent); }

/* QR codes and the entrance poster */
.app-qr { width: 200px; max-width: 100%; background: #fff; padding: 8px; border-radius: var(--gm-radius-md); }
.app-qr svg { display: block; width: 100%; height: auto; }
.app-qr--big { width: min(420px, 80vw); margin: 0 auto; }
.app-poster { max-width: 640px; margin: 0 auto; text-align: center; display: grid; gap: var(--gm-space-4); padding: var(--gm-space-6); background: #fff; color: #0f172a; border-radius: var(--gm-radius-lg); }
.app-poster h1 { margin: 0; font: 800 clamp(28px, 6vw, 44px)/1.1 var(--gm-font-display); }
.app-poster__lead { margin: 0; font-size: var(--gm-text-xl); font-weight: 600; }
.app-poster ol { text-align: left; margin: 0 auto; font-size: var(--gm-text-lg); }

/* Pages members open from a link */
.app-public { width: min(520px, 100%); margin: 0 auto; padding: var(--gm-space-5) var(--gm-gutter) var(--gm-space-8); display: grid; gap: var(--gm-space-4); }
.app-public--wide { width: min(820px, 100%); }
.app-public__head { font: 800 var(--gm-text-xl) var(--gm-font-display); text-align: center; }
.app-public__foot { text-align: center; }

/* Admin panel */
.app-admin { max-width: 1200px; margin: 0 auto; padding: var(--gm-space-4) var(--gm-gutter) var(--gm-space-8); display: grid; gap: var(--gm-space-4); }
.app-admin__nav { display: flex; flex-wrap: wrap; gap: var(--gm-space-4); align-items: center; padding-bottom: var(--gm-space-3); border-bottom: 1px solid var(--gm-line); }

@media print {
  .app-poster { box-shadow: none; padding: 0; }
  .app-public__foot, .app-public__head { display: none; }
}

/* Small action buttons stay inline on phones (the kit stretches big form buttons to full width) */
@media (max-width: 560px) {
  .gm-actions > .gm-btn--sm, .gm-actions > form > .gm-btn--sm { flex: 0 0 auto; }
  .app-member-head .gm-actions { width: 100%; }
}

/* Focused field: blue, so it can never be mistaken for an error (red). TODO move into the kit (docs/ui-backlog.md). */
.gm-input:focus, .gm-select:focus, .gm-textarea:focus { border-color: var(--gm-info-fill); box-shadow: 0 0 0 3px var(--gm-info-soft); }
.gm-input[aria-invalid="true"], .gm-select[aria-invalid="true"], .gm-textarea[aria-invalid="true"] { border-color: var(--gm-danger-fill); box-shadow: 0 0 0 3px var(--gm-danger-soft); }
.app-field-error { font-size: var(--gm-text-sm); color: var(--gm-danger); }

/* Sell form: live summary */
.app-sell-summary { max-width: 720px; }

/* Print: only the document, never app messages */
@media print {
  .gm-alert, .gm-banner, .app-no-print, .gm-toast { display: none !important; }
  @page { margin: 12mm; }
}

/* Get started checklist (dashboard) */
.app-start__bar { margin: 0 var(--gm-space-5); }
.app-steps { list-style: none; margin: 0; padding: var(--gm-space-3) var(--gm-space-5) var(--gm-space-5); display: grid; gap: var(--gm-space-3); }
.app-steps li { display: grid; grid-template-columns: 36px 1fr auto; gap: var(--gm-space-3); align-items: center; }
.app-steps li > div { display: grid; gap: 2px; }
/* each step has its own icon in a soft tile; done = the tile turns green with a check */
.app-steps__mark { width: 36px; height: 36px; padding: 0; border-radius: 10px; border: 1px solid var(--gm-line); background: var(--gm-surface-2); color: var(--gm-text-2); display: grid; place-items: center; }
button.app-steps__mark { cursor: pointer; transition: border-color var(--gm-fast, 120ms), background var(--gm-fast, 120ms); }
.app-steps li:not(.is-done) button.app-steps__mark:hover { border-color: var(--gm-success); color: var(--gm-success); background: var(--gm-success-soft); }
.app-steps li > form { display: contents; }
.app-steps li.is-done .app-steps__mark { background: var(--gm-success-soft); border-color: color-mix(in srgb, var(--gm-success) 35%, transparent); color: var(--gm-success); }
.app-steps li.is-done b { color: var(--gm-muted); font-weight: 500; }
.app-steps li.is-done .gm-small { opacity: .7; }

/* Member photos */
.app-avatar-img { object-fit: cover; padding: 0; }
.app-photo-preview { width: 200px; height: 200px; object-fit: cover; border-radius: 50%; border: 1px solid var(--gm-line); }
.app-photo-link { text-decoration: none; border-radius: 50%; }

/* Admin panel */
.app-admin-h { margin: var(--gm-space-3) 0 0; color: var(--gm-muted); }
.app-admin-gymhead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--gm-space-4); align-items: flex-end; }
.app-bars svg { width: 100%; display: block; }
.app-bars rect { fill: var(--gm-accent); opacity: .85; }
.app-bars rect:hover { opacity: 1; }
.app-bars__labels { display: flex; justify-content: space-between; font-size: var(--gm-text-sm); color: var(--gm-muted); margin-top: 6px; }
.app-pre { margin: 8px 0 0; padding: 10px; border-radius: var(--gm-radius-md); background: var(--gm-surface-2); font: 12px/1.5 var(--gm-font-mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto; }
.app-error { padding: var(--gm-space-3) var(--gm-space-4); }
.app-error summary { cursor: pointer; }
.app-note { padding: var(--gm-space-3); border-radius: var(--gm-radius-md); background: var(--gm-surface-2); }
.app-start__next { margin: var(--gm-space-3) var(--gm-space-5) var(--gm-space-4); }
.app-steps .gm-actions { flex-wrap: nowrap; }

/* Upgrade notes */
.app-upgrade { border-style: dashed; max-width: 720px; }

/* GymMunshi plan page */
.app-seg { padding: 7px 12px; border-radius: var(--gm-radius-md); text-decoration: none; color: var(--gm-text-2); font-weight: 600; font-size: var(--gm-text-sm); white-space: nowrap; }
@media (max-width: 640px) {
  .app-plans__head { flex-wrap: wrap; gap: 12px; }
  .app-periods { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .app-periods .app-seg { text-align: center; white-space: normal; }
}
.app-seg.is-on { background: var(--gm-surface); color: var(--gm-text); box-shadow: var(--gm-shadow-sm); }
.gm-card__header .gm-segmented { overflow-x: auto; overflow-y: hidden; max-width: 100%; }
/* Plan cards share row tracks (subgrid), so prices, lists and buttons line up across cards */
.app-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: var(--gm-space-4); row-gap: 0; }
.app-plan { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: var(--gm-space-3); margin-bottom: var(--gm-space-4); padding: var(--gm-space-5); border: 1px solid var(--gm-line); border-radius: var(--gm-radius-lg); background: var(--gm-surface); }
.app-plan__extra { align-self: end; }
.app-plan__extra .gm-input { max-width: 100px; }
.app-plan__hints { display: grid; gap: 6px; align-content: start; }
.app-plan__hints:empty { display: none; }
.app-plan--pro { border-color: var(--gm-accent); box-shadow: 0 0 0 3px var(--gm-accent-soft); }
.app-plan--current { background: color-mix(in srgb, var(--gm-success-fill, #059669) 5%, var(--gm-surface)); }
.app-plan__price { font: 800 var(--gm-text-2xl)/1.1 var(--gm-font-display); }
.app-plan__price small { font: 500 var(--gm-text-sm) var(--gm-font-body); color: var(--gm-muted); }
.app-plan__points { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; align-content: start; font-size: var(--gm-text-sm); color: var(--gm-text-2); }

/* Monitoring: problem page */
.app-steps-list { margin: 6px 0 0; padding-left: 1.2em; display: grid; gap: 6px; }
.app-kv dd { overflow-wrap: anywhere; }
.app-error > summary { cursor: pointer; }

/* Old vs new (admin log, activity log) */
.app-diff td { vertical-align: top; }
.app-diff--changed td, .app-diff--added td, .app-diff--removed td { background: color-mix(in srgb, var(--gm-warning, #f59e0b) 7%, transparent); }
.app-diff--changed .app-diff__old, .app-diff--removed .app-diff__old { color: var(--gm-danger-text, #f87171); text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); }
.app-diff--changed .app-diff__new, .app-diff--added .app-diff__new { color: var(--gm-success-text, #34d399); font-weight: 600; }
.app-diff--same td { color: var(--gm-muted); }
.app-diff__old, .app-diff__new { overflow-wrap: anywhere; max-width: 420px; }
.app-diff__tag { display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: 6px; font: 600 10px/1.5 var(--gm-font-mono); text-transform: uppercase; letter-spacing: .05em; }
.app-diff__tag--changed { background: color-mix(in srgb, #f59e0b 22%, transparent); color: #f59e0b; }
.app-diff__tag--added { background: color-mix(in srgb, #10b981 22%, transparent); color: #10b981; }
.app-diff__tag--removed { background: color-mix(in srgb, #ef4444 22%, transparent); color: #ef4444; }
.app-diff__json { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gm-space-4); }
.app-diff__json pre { max-height: 420px; overflow: auto; margin: 6px 0 0; }

/* Faint GymMunshi mark in the bottom-right corner, behind everything (fills empty space, never in the way) */
body::before { content: ""; position: fixed; right: -3vw; bottom: -4vh; z-index: -1; width: min(44vw, 560px); aspect-ratio: 387 / 209;
  background: url(/brand/mark.svg) no-repeat center / contain; opacity: .03; pointer-events: none; }
:root[data-theme="dark"] body::before { background-image: url(/brand/mark-reverse.svg); opacity: .028; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { background-image: url(/brand/mark-reverse.svg); opacity: .028; } }
@media (max-width: 599px) { body::before { width: 70vw; opacity: .022; } }
@media print { body::before { display: none; } }
/* Side panel (trial component; kit after approval): details slide in from the right */
.app-panel { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(620px, 100vw); height: 100dvh; max-width: 100vw; max-height: 100dvh; padding: 0; border: 0; border-left: 1px solid var(--gm-line);
  background: var(--gm-bg); color: var(--gm-text); box-shadow: var(--gm-shadow-lg); font-size: var(--gm-text-sm); }
.app-panel[open] { animation: app-panel-in 220ms var(--gm-ease, ease) both; }
.app-panel.is-closing { animation: app-panel-out 160ms ease-in both; }
.app-panel::backdrop { background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); }
.app-panel__inner { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.app-panel__head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--gm-line); background: var(--gm-surface); }
.app-panel__title { margin: 0; font: 800 var(--gm-text-lg)/1.2 var(--gm-font-display); overflow-wrap: anywhere; }
.app-panel__body { flex: 1; overflow: auto; padding: 16px 18px 28px; display: grid; gap: 14px; align-content: start; }
.app-panel__loading { margin: 24px 18px; color: var(--gm-muted); }
.app-panel .gm-card__header { padding: 12px 14px; }
.app-panel .gm-card__body { padding: 14px; }
.app-panel .gm-card__title { font-size: var(--gm-text-md); }
.app-panel .app-kv { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); font-size: var(--gm-text-sm); }
.app-panel .gm-table th, .app-panel .gm-table td { padding: 8px 10px; font-size: 12px; }
.app-panel .app-diff__old, .app-panel .app-diff__new { max-width: none; }
.app-panel .app-pre { font-size: 11px; }
.app-panel .app-diff__json { grid-template-columns: 1fr; }
@keyframes app-panel-in { from { transform: translateX(32px); opacity: 0; } }
@keyframes app-panel-out { to { transform: translateX(32px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .app-panel[open], .app-panel.is-closing { animation: none; } }

/* AMOLED is pure black: the faint mark needs a little more to show at all */
:root[data-theme="dark"][data-dark="amoled"] body::before { opacity: .06; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-dark="amoled"] body::before { opacity: .06; } }
/* Continue with Google: the G mark on a white disc */
.app-google { gap: 10px; }
.app-google__g { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; flex: none; }

/* A row of filters: one line on a computer, two per row on a phone */
.app-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto; gap: var(--gm-space-2); align-items: center; }
@media (max-width: 760px) { .app-filter-grid { grid-template-columns: 1fr 1fr; } .app-filter-grid .gm-btn { width: 100%; } }

/* ---------- Dashboard (plan 03) ---------- */
.app-dash-h { margin: 0; font: 700 var(--gm-text-lg)/1.2 var(--gm-font-display); }
.app-dash-tiles { display: grid; gap: var(--gm-space-3); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@media (max-width: 599px) { .app-dash-tiles { grid-template-columns: 1fr 1fr; gap: var(--gm-space-2); } .app-dash-tiles .gm-stat { padding: 14px; } }
.app-tile-link { text-decoration: none; color: inherit; transition: border-color var(--gm-fast, 120ms); }
.app-tile-link:hover { border-color: var(--gm-line-strong); }
.app-dash-branch { max-width: 240px; }
.app-dash-period { display: grid; gap: var(--gm-space-2); }
.app-delta { display: inline-flex; gap: 4px; align-items: center; color: var(--gm-muted); font-size: var(--gm-text-xs); }
.app-delta--up { color: var(--gm-success); }
.app-delta--down { color: var(--gm-danger); }
.app-delta-note { display: block; color: var(--gm-muted); font-size: var(--gm-text-xs); margin-top: 2px; }
.app-dash-lazy { min-height: 120px; display: grid; place-items: center; border: 1px dashed var(--gm-line); border-radius: var(--gm-radius-lg); }
.app-dash-lazy.app-dash-charts { min-height: 320px; }

/* To-do lists */
.app-todo-grid { display: grid; gap: var(--gm-space-3); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.app-todo .gm-card__header { padding: 12px 16px; }
.app-todo__list { list-style: none; margin: 0; padding: 4px 8px 8px; display: grid; grid-template-columns: minmax(0, 1fr); }
.app-todo__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border-radius: var(--gm-radius-md); }
.app-todo__row:hover { background: var(--gm-surface-2); }
/* the name gives way (…) so the buttons always stay inside the card */
.app-todo__row .gm-cell-person { min-width: 0; flex: 1 1 0; }
.app-todo__row .gm-cell-person > div { min-width: 0; }
.app-todo__row .gm-cell-person b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.app-todo__actions { display: flex; gap: 4px; flex: none; }
.app-todo { display: flex; flex-direction: column; }
.app-todo__empty { margin: 0; padding: 16px; color: var(--gm-muted); font-size: var(--gm-text-sm); flex: 1; display: grid; place-items: center; text-align: center; }

/* Chart grid: collections wide, the rest one column; one column on a phone */
.app-chart-grid { display: grid; gap: var(--gm-space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-chart--wide { grid-column: span 2; }
@media (max-width: 1100px) { .app-chart-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .app-chart-grid { grid-template-columns: 1fr; } .app-chart--wide { grid-column: auto; } }
.app-chart .gm-card__header { padding: 12px 16px; }
.app-chart .gm-card__body { padding: 16px; }

/* Chart colours: categorical slots in fixed order (validated light on #fff, dark on every dark style) */
:root { --viz-1: #2a78d6; --viz-2: #eb6834; --viz-3: #1baf7a; --viz-4: #eda100; --viz-track: #dbe7f8; }
:root[data-theme="dark"] { --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500; --viz-track: #1f3350; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500; --viz-track: #1f3350; } }

.app-viz { display: grid; gap: 8px; }
.app-viz__empty { margin: 0; padding: 32px 0; text-align: center; color: var(--gm-muted); font-size: var(--gm-text-sm); }
.app-viz__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--gm-text-xs); color: var(--gm-text-2); }
.app-viz__legend li { display: inline-flex; align-items: center; gap: 6px; }
.app-viz__key { width: 10px; height: 10px; border-radius: 3px; background: var(--k); }
.app-viz__plot { position: relative; height: 180px; margin-left: 44px; }
.app-viz__grid span { position: absolute; left: 0; right: 0; bottom: calc(var(--y) * 100%); border-top: 1px solid var(--gm-line); }
.app-viz__grid b { position: absolute; right: calc(100% + 6px); transform: translateY(-50%); font: 500 10.5px/1 var(--gm-font-mono); color: var(--gm-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.app-viz__cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: end; }
.app-viz__col { height: 100%; display: flex; align-items: flex-end; justify-content: center; outline: none; border-radius: 6px; }
.app-viz__col:hover, .app-viz__col:focus-visible { background: color-mix(in srgb, var(--gm-text) 5%, transparent); }
.app-viz__stack { width: min(70%, 24px); display: flex; flex-direction: column-reverse; gap: 2px; min-height: 2px; }
.app-viz__stack i { display: block; background: var(--k); min-height: 2px; }
.app-viz__stack i:last-child { border-radius: 4px 4px 0 0; }
.app-viz__x { margin-left: 44px; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); font: 500 10.5px/1.2 var(--gm-font-mono); color: var(--gm-muted); }
.app-viz__x span { white-space: nowrap; overflow: visible; }
.app-viz__table summary { cursor: pointer; font-size: var(--gm-text-xs); color: var(--gm-muted); width: max-content; }
.app-viz__table .gm-table-wrap { margin-top: 8px; max-height: 260px; overflow: auto; }
.app-viz__table .gm-table, .app-viz__table .gm-table td { color: var(--gm-text); }
.app-viz__table .gm-table th, .app-viz__table .gm-table td { padding: 8px 10px; font-size: 12px; }
.app-gauge[data-gm-tip] { cursor: help; border-radius: var(--gm-radius-md); }

/* Trend line */
.app-viz__plot--line { margin-right: 36px; }
.app-viz__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.app-viz__line { fill: none; stroke: var(--viz-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.app-viz__area { fill: var(--viz-1); opacity: .1; }
.app-viz__dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--viz-1); box-shadow: 0 0 0 2px var(--gm-surface); }
.app-viz__end { position: absolute; left: calc(100% + 8px); transform: translateY(-50%); font: 700 var(--gm-text-sm)/1 var(--gm-font-body); color: var(--gm-text); }
.app-viz__hits { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.app-viz__hit { position: relative; outline: none; }
.app-viz__hit:hover::after, .app-viz__hit:focus-visible::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid var(--gm-line-strong); }

/* Horizontal bars */
.app-viz__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.app-viz__bars li { display: grid; grid-template-columns: minmax(70px, 34%) 1fr auto; gap: 10px; align-items: center; outline: none; border-radius: 6px; }
.app-viz__bars li:focus-visible, .app-viz__bars li:hover { background: color-mix(in srgb, var(--gm-text) 5%, transparent); }
.app-viz__bar-label { font-size: var(--gm-text-sm); color: var(--gm-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-viz__bar-track { height: 14px; }
.app-viz__bar-track i { display: block; height: 100%; background: var(--viz-1); border-radius: 0 4px 4px 0; }
.app-viz__bar-value { font-size: var(--gm-text-sm); font-variant-numeric: tabular-nums; }

/* Gauges */
.app-gauges { display: grid; gap: 18px; }
.app-gauges--row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); align-items: start; }
.app-split { display: grid; gap: var(--gm-space-4); align-items: start; }
@media (min-width: 900px) { .app-split { grid-template-columns: minmax(0, 1fr) 240px; } .app-split .app-gauges--row { grid-template-columns: 1fr; gap: 14px; } .app-split .app-gauge svg { width: min(100%, 120px); } }
/* Profit (up) and loss (down) by month, around a zero line */
.app-pl { display: grid; gap: 4px; min-width: 0; }
.app-pl > *, .app-viz > * { min-width: 0; }
.gm-grid > .gm-card { min-width: 0; }
.app-pl__plot { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px; height: 150px; }
.app-pl__plot::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--gm-line); }
.app-pl__col { display: grid; grid-template-rows: 1fr 1fr; gap: 2px; min-width: 0; border-radius: 4px; }
.app-pl__col:hover, .app-pl__col:focus-visible { background: color-mix(in srgb, var(--gm-text) 6%, transparent); outline: none; }
.app-pl__col span { display: flex; min-height: 0; }
.app-pl__col span:first-child { align-items: flex-end; }
.app-pl__col i { display: block; width: 100%; border-radius: 3px; }
.app-pl__up { background: var(--viz-1); }
.app-pl__down { background: var(--gm-danger-fill, var(--gm-danger)); }
.app-gauge { margin: 0; display: grid; justify-items: center; text-align: center; gap: 2px; }
.app-gauge svg { width: min(100%, 200px); height: auto; overflow: visible; }
.app-gauge__track, .app-gauge__fill { fill: none; stroke-width: 9; stroke-linecap: round; }
.app-gauge__track { stroke: var(--viz-track); }
.app-gauge__fill { stroke: var(--viz-1); }
.app-gauge figcaption { display: grid; gap: 2px; margin-top: -14px; }
.app-gauge__value { font: 800 var(--gm-text-2xl)/1 var(--gm-font-display); }
.app-gauge__label { font-weight: 600; font-size: var(--gm-text-sm); }
.app-gauge__meta { font-size: var(--gm-text-xs); color: var(--gm-muted); }
.app-gauge--empty { justify-items: start; text-align: left; padding: 12px; border: 1px dashed var(--gm-line); border-radius: var(--gm-radius-md); gap: 6px; }
.app-target__row { display: flex; gap: 8px; width: 100%; }
.app-target__row .gm-input { height: 34px; }

/* Chart tooltip (public/app.js) */
.app-viz-tip { position: fixed; z-index: 60; pointer-events: none; min-width: 140px; max-width: 240px; padding: 8px 10px; border-radius: var(--gm-radius-md); background: var(--gm-elevated, #1c1917); color: #fff; box-shadow: var(--gm-shadow-lg); font-size: 12px; line-height: 1.35; }
.app-viz-tip[hidden] { display: none; }
.app-viz-tip__h { font-weight: 600; margin-bottom: 4px; opacity: .85; }
.app-viz-tip__r { display: flex; align-items: center; gap: 8px; }
.app-viz-tip__r i { width: 10px; height: 2px; border-radius: 1px; background: var(--k); flex: none; }
.app-viz-tip__r b { font-variant-numeric: tabular-nums; }
.app-viz-tip__r span { opacity: .75; }

/* Back button (top bar), period swap, filter note */
.app-backlink { justify-self: start; margin-bottom: calc(10px - var(--gm-space-6)); }
.app-backlink + .gm-page-head, .app-backlink + * { margin-top: 0; }
#dash-period { display: grid; gap: var(--gm-space-4); transition: opacity 120ms; }
#dash-period.htmx-request { opacity: .55; }
.app-filter-note { margin: 0; font-size: var(--gm-text-sm); color: var(--gm-text-2); }
/* Dashboard: staff collections and "worth a look" rows */
.app-todo__who { display: grid; gap: 2px; min-width: 0; text-decoration: none; color: inherit; }
.app-todo__who b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-todo__who small { color: var(--gm-muted); font-size: var(--gm-text-xs); }
.app-todo__amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Front desk: birthday card (only on days someone has a birthday) */
.app-bday { padding: 12px 16px; display: grid; gap: 8px; }
.app-bday__head { display: flex; gap: 8px; align-items: center; }
/* names side by side in as many columns as fit, so a few birthdays do not make a card as wide as the page look empty */
.app-bday__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px 16px; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.app-bday__list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 4px 4px 10px; border: 1px solid var(--gm-line); border-radius: var(--gm-radius-md); min-width: 0; }
.app-bday__list li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* on a phone the search box must stay near the top: many birthdays scroll inside the card */
@media (max-width: 599px) { .app-bday__list { max-height: 150px; overflow-y: auto; } }
/* the Front desk's number card whose list is showing now */
.app-tile-link.is-on { border-color: var(--gm-accent); box-shadow: 0 0 0 3px var(--gm-accent-soft); }
/* Staff → Roles: a list of roles, and each role's on/off switches */
.app-roles { display: grid; gap: 10px; max-width: 760px; }
.app-role { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none; color: inherit; }
.app-role > div { display: grid; gap: 3px; min-width: 0; }
.app-role > span { white-space: nowrap; }
a.app-role:hover { border-color: var(--gm-line-strong); }
.app-role-form { max-width: 760px; }
.app-perm-group { border: 1px solid var(--gm-line); border-radius: var(--gm-radius-lg); padding: 6px 16px 10px; margin: 0; display: grid; }
.app-perm-group legend { font-weight: 600; padding: 0 6px; margin-left: -6px; }
/* a tick box that sits in a form grid beside a text box: as tall as the box, so the two line up */
.app-check-row { min-height: var(--gm-control-h, 44px); align-items: center; }
/* Face check-in: the consent screen, and the code for a new camera */
.app-consent { margin: 0; padding-left: 20px; display: grid; gap: var(--gm-space-2); }
.app-face-enrol { display: grid; gap: var(--gm-space-3); padding: var(--gm-space-3); justify-items: start; border: 1px solid var(--gm-line); border-radius: var(--gm-radius-lg); background: var(--gm-surface-2); }
.app-face-enrol img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.app-code { font: 600 var(--gm-text-xl)/1 var(--gm-font-mono); letter-spacing: .12em; user-select: all; }
.app-code-copy { width: var(--gm-control-h-sm); margin-inline: 6px 2px; vertical-align: middle; }
/* The door page: the camera fills the screen; a band at the bottom says who it saw, in green, amber or red */
.door { margin: 0; background: #0a0a0a; color: #fff; min-height: 100dvh; }
.door__pair { max-width: 420px; margin: 0 auto; padding: 12vh 20px 40px; display: grid; gap: var(--gm-space-4); text-align: center; justify-items: center; }
.door__pair form { width: 100%; }
.door__code { text-align: center; font: 600 var(--gm-text-2xl)/1.2 var(--gm-font-mono); letter-spacing: .14em; text-transform: uppercase; height: 64px; }
.door__code::placeholder { text-transform: none; letter-spacing: .04em; font: 400 var(--gm-text-lg)/1.2 var(--gm-font-body); }
.door__stage { position: fixed; inset: 0; background: #000; overflow: hidden; font-family: var(--gm-font-body); }
.door__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* darker at the top and bottom so the words are readable over any background */
.door__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, .55), transparent 22%, transparent 55%, rgba(0, 0, 0, .78)); }
.door__top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: max(14px, env(safe-area-inset-top)) 16px 0; z-index: 1; }
.door__chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: #fff; background: rgba(18, 18, 20, .55); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
.door__chip { min-width: 0; white-space: nowrap; }
.door__chip > span { overflow: hidden; text-overflow: ellipsis; }
.door__chip--clock { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; }
.door__round { flex: none; }
.door__live { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .7); animation: door-live 2s infinite; }
.door__round { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; cursor: pointer; background: rgba(18, 18, 20, .55); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.door__round[hidden] { display: none; }
.door__round:hover { background: rgba(18, 18, 20, .8); }
/* where to stand: an oval in the middle. It turns green with a tick when the member is known, red when not */
.door__ring { position: absolute; left: 50%; top: 44%; height: min(56vh, 92vw); aspect-ratio: 3 / 4; transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid rgba(255, 255, 255, .5); pointer-events: none; display: grid; place-items: center; transition: border-color 180ms ease, box-shadow 180ms ease; }
.door__ring svg { width: 34%; height: auto; color: #fff; opacity: 0; transform: scale(.6); transition: opacity 160ms ease, transform 220ms cubic-bezier(.2, 1.4, .4, 1); filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .5)); }
.door__stage[data-colour=green] .door__ring { border-color: #34d399; box-shadow: 0 0 0 6px rgba(52, 211, 153, .25), 0 0 60px rgba(52, 211, 153, .45); }
.door__stage[data-colour=green] .door__ring svg { opacity: 1; transform: scale(1); }
.door__stage[data-colour=red] .door__ring { border-color: #f87171; box-shadow: 0 0 0 6px rgba(248, 113, 113, .22); }
.door__help { position: absolute; inset: 0 0 auto 0; margin: 10vh auto 0; width: min(560px, calc(100% - 32px)); padding: 24px; border-radius: 20px; background: rgba(24, 24, 27, .92); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); display: grid; gap: 14px; z-index: 2; }
.door__help[hidden] { display: none; }
.door__help h2 { margin: 0; font: 700 24px/1.2 var(--gm-font-display); }
.door__help ol { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: 17px; line-height: 1.45; }
.door__stage:has(.door__help:not([hidden])) .door__ring { display: none; }
/* who it saw: a glass card near the bottom */
.door__say { position: absolute; left: 50%; bottom: calc(52px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(680px, calc(100% - 32px)); display: grid; gap: 6px; padding: 22px 28px; text-align: center; border-radius: 28px; color: #fff;
  background: rgba(18, 18, 20, .6); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); transition: background-color 200ms ease, border-color 200ms ease; }
.door__say b { font: 700 clamp(28px, 5.4vw, 52px)/1.1 var(--gm-font-display); letter-spacing: -.01em; }
.door__say span { font-size: clamp(16px, 2.4vw, 22px); min-height: 1.3em; opacity: .92; }
.door__say span:empty { display: none; }
.door__say.is-new { animation: door-pop 320ms cubic-bezier(.2, 1.3, .4, 1); }
.door__stage[data-colour=green] .door__say { background: rgba(4, 120, 87, .88); border-color: rgba(110, 231, 183, .5); }
.door__stage[data-colour=amber] .door__say { background: rgba(180, 83, 9, .88); border-color: rgba(252, 211, 77, .45); }
.door__stage[data-colour=red] .door__say { background: rgba(185, 28, 28, .88); border-color: rgba(252, 165, 165, .45); }
.door__foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 14px calc(6px + env(safe-area-inset-bottom)); font-size: 12px; color: rgba(255, 255, 255, .6); }
.door__foot .gm-btn { color: rgba(255, 255, 255, .7); }
@keyframes door-pop { from { transform: translateX(-50%) scale(.94); } to { transform: translateX(-50%) scale(1); } }
@keyframes door-live { 70% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
@media (prefers-reduced-motion: reduce) { .door__say.is-new, .door__live { animation: none; } }
.door__foot form { margin: 0; }
/* Subscription: what a longer period saves, on its tab and on each plan */
.app-seg__off { margin-left: 6px; padding: 1px 7px; border-radius: var(--gm-radius-full); background: var(--gm-success-soft); color: var(--gm-success); font-size: var(--gm-text-xs); font-weight: 600; white-space: nowrap; }
.app-plan__save { margin-top: 4px; display: inline-block; padding: 2px 8px; border-radius: var(--gm-radius-full); background: var(--gm-success-soft); color: var(--gm-success); font: 600 var(--gm-text-xs)/1.5 var(--gm-font-body); letter-spacing: 0; }
/* Subscription: the plans side by side. The first column is the feature; the three plan columns are equal and centred. */
.app-compare { margin-top: var(--gm-space-4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gm-space-3); }
.app-compare > .gm-table-wrap { min-width: 0; max-width: 100%; }
@media (max-width: 599px) { .app-compare__table { table-layout: fixed; width: 100%; min-width: 0; } .app-compare__table th, .app-compare__table td { padding-inline: 8px; } .app-compare__table thead th:first-child { width: 34%; } }
.app-compare > summary { list-style: none; width: max-content; }
.app-compare > summary::-webkit-details-marker { display: none; }
.app-compare__table th[scope=row] { font: 400 var(--gm-text-md)/1.4 var(--gm-font-body); letter-spacing: 0; text-transform: none; color: var(--gm-text); background: none; white-space: normal; text-align: left; }
.app-compare__table td { white-space: normal; color: var(--gm-text); }
.app-compare__table td, .app-compare__table thead th:not(:first-child) { text-align: center; width: 20%; }
.app-compare__group th { text-align: left; font-family: var(--gm-font-display); font-weight: 600; background: var(--gm-surface-2); }
@media (max-width: 599px) { .app-compare__table td, .app-compare__table thead th:not(:first-child) { width: 22%; font-size: var(--gm-text-sm); } .app-compare__table th[scope=row] { font-size: var(--gm-text-sm); } }
/* a small card on an (i): opens on hover, on focus and on a tap (Message credits: which credits end when) */
.app-hovercard { position: relative; cursor: help; }
.app-hovercard__box { display: none; position: absolute; top: calc(100% + 8px); left: -12px; z-index: var(--gm-z-dropdown); width: max-content; max-width: min(320px, calc(100vw - 48px)); padding: var(--gm-space-3) var(--gm-space-4);
  border-radius: var(--gm-radius-lg); background: var(--gm-surface); border: 1px solid var(--gm-line); box-shadow: var(--gm-shadow-lg); color: var(--gm-text); font: 400 var(--gm-text-sm)/1.5 var(--gm-font-body); text-align: left; text-transform: none; letter-spacing: 0; cursor: default; }
.app-hovercard:hover > .app-hovercard__box, .app-hovercard:focus > .app-hovercard__box, .app-hovercard:focus-within > .app-hovercard__box { display: grid; gap: var(--gm-space-2); }
.app-hovercard__box b { font-weight: 600; }
.app-hovercard__row { display: flex; justify-content: space-between; gap: var(--gm-space-4); }
.app-hovercard__row span:last-child { color: var(--gm-text-3); white-space: nowrap; }
/* two lines on what a page is for, under its heading */
.app-about { margin: 0; max-width: 720px; }
.app-switches { display: grid; max-width: 640px; }
.app-perm-discount { padding: 10px 0 4px; border-top: 1px solid var(--gm-line); }
.app-perm-discount .gm-input-group { max-width: 160px; }
/* Settings home: categories, each with its settings one click away */
.app-set-find { max-width: 520px; }
.app-set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gm-space-4); }
.app-set-cat { padding: 16px; display: grid; gap: 10px; align-content: start; }
.app-set-cat[hidden], .app-set-cat li[hidden] { display: none; }
.app-set-cat__head { display: flex; gap: 12px; align-items: center; }
.app-set-cat__head h2 { font-size: var(--gm-text-md); margin: 0; }
.app-set-cat__head > div { display: grid; gap: 2px; }
.app-set-cat__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--gm-accent-soft, var(--gm-surface-2)); color: var(--gm-accent); flex: none; }
.app-set-cat ul { list-style: none; margin: 0; padding: 0; display: grid; }
.app-set-cat li a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--gm-line); color: var(--gm-text); text-decoration: none; font-size: var(--gm-text-sm); }
.app-set-cat li a:hover { color: var(--gm-accent); }
.app-set-cat li a span { color: var(--gm-muted); font-size: 18px; line-height: 1; }
.app-set-none { margin: 0; }
/* Invoices settings: logo preview, prefix rows */
.app-logo-preview { max-width: 200px; max-height: 90px; object-fit: contain; padding: 8px; border: 1px dashed var(--gm-line-strong); border-radius: var(--gm-radius-md); background: #fff; }
.app-prefix { margin-top: 10px; }
.app-invoice__logo { display: block; max-width: 160px; max-height: 56px; object-fit: contain; margin-bottom: 8px; }
.app-pay-logo { max-width: 140px; max-height: 52px; object-fit: contain; }
/* Any picture opens big on a click (app.js, data-zoom) */
[data-zoom] { cursor: zoom-in; }
.app-lightbox { padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 96dvh; overflow: visible; }
.app-lightbox::backdrop { background: rgba(0, 0, 0, .82); }
.app-lightbox img { display: block; max-width: min(96vw, 720px); max-height: 90dvh; border-radius: var(--gm-radius-lg); background: #fff; }
.app-lightbox__close { position: absolute; top: 8px; right: 8px; background: rgba(0, 0, 0, .6); color: #fff; border: 0; font-size: 22px; line-height: 1; }
/* Member photo: menu on the picture, crop box, photo field in the admission form */
.app-photo-menu > summary { border-radius: 50%; display: block; }
.app-photo-menu > summary:hover .gm-avatar, .app-photo-menu[open] > summary .gm-avatar { outline: 2px solid var(--gm-accent); outline-offset: 2px; }
.app-photo-menu .gm-popover__panel { min-width: 190px; }
.app-photo-menu form { margin: 0; }
.app-crop { width: min(340px, 96vw); }
.app-crop__stage { position: relative; width: 280px; height: 280px; margin: 0 auto; overflow: hidden; border-radius: var(--gm-radius-md); background: #000; touch-action: none; cursor: grab; user-select: none; }
.app-crop__stage:active { cursor: grabbing; }
.app-crop__stage img { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.app-crop__stage i { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 200px rgba(0, 0, 0, .55); outline: 2px solid rgba(255, 255, 255, .85); outline-offset: -2px; pointer-events: none; }
.app-crop__size { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: var(--gm-text-sm); color: var(--gm-text-2); }
.app-crop__size input { flex: 1; accent-color: var(--gm-accent); }
.app-photo-field__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.app-photo-field .gm-avatar { width: 56px; height: 56px; }
/* Member page: the status card (founder's design, 4 Oct 2026). The status colour leads: a ring showing how much of
   the plan is left, a soft wash of the colour from the left, a glowing dot. As wide as its content. */
.app-status { --_c: var(--gm-state-active); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; width: fit-content; max-width: 100%; padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--_c) 38%, var(--gm-line)); border-radius: var(--gm-radius-lg);
  background: linear-gradient(100deg, color-mix(in srgb, var(--_c) 20%, var(--gm-surface)) 0%, var(--gm-surface) 62%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--_c) 10%, transparent), 0 10px 28px -18px var(--_c); }
.app-status--amber { --_c: var(--gm-state-expiring); }
.app-status--red { --_c: var(--gm-state-expired); }
.app-status__ring { position: relative; display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 50%; }
.app-status__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.app-status__ring circle { fill: none; stroke-width: 4; stroke: color-mix(in srgb, var(--_c) 18%, var(--gm-surface-3)); }
.app-status__ring circle + circle { stroke: var(--_c); stroke-linecap: round; }
.app-status__ring b { position: relative; color: var(--_c); font: 800 var(--gm-text-sm)/1 var(--gm-font-display); letter-spacing: .02em; }
.app-status__what { display: grid; gap: 4px; min-width: 0; margin-right: 12px; }
.app-status__what > b { display: flex; align-items: center; gap: 10px; color: var(--gm-text); font: 800 var(--gm-text-lg)/1.15 var(--gm-font-display); letter-spacing: .02em; text-transform: uppercase; }
.app-status__what > b i { width: 9px; height: 9px; border-radius: 50%; background: var(--_c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--_c) 25%, transparent); flex: none; }
.app-status__what > span { display: flex; flex-wrap: wrap; gap: 2px 0; font-size: var(--gm-text-sm); color: var(--gm-text-2); }
.app-status__what > span > span + span::before { content: "•"; margin: 0 8px; color: var(--gm-muted); }
.app-status__what strong { color: var(--gm-text); font-weight: 700; }
.app-status__what em { color: var(--_c); font-style: normal; font-weight: 600; }
.app-status__do { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.app-status__do form { margin: 0; }
.app-status__do:empty { display: none; }
@media (max-width: 640px) { .app-status { width: 100%; } .app-status__what { flex: 1; margin-right: 0; } .app-status__do { width: 100%; } }
/* (The camera's look is in the kit now: gm-camera in gm-ui.css.) The door's full-screen picture uses the same mirror rule. */
.door__video.is-mirrored { transform: scaleX(-1); }
/* Import: match the columns. Two columns only, so the choice is always on screen, also on a phone */
.app-map { table-layout: fixed; width: 100%; min-width: 0; }
.app-map td:first-child { width: 55%; }
.app-map td:first-child small { display: block; white-space: normal; margin-top: 2px; font-size: var(--gm-text-xs); overflow-wrap: anywhere; }
.app-map .gm-select { width: 100%; min-width: 0; }
@media (max-width: 640px) { .app-map td, .app-map th { padding-inline: 10px; } .app-map td:first-child { width: 48%; } }
/* The island (founder, 4 Oct 2026): a small glass pill at the top centre for background work, its result, notices
   and the connection. Real glass, not a tinted box:
     - the fill is mostly see-through (a thin veil of the surface colour, lighter at the top like a sheen);
     - what is behind is blurred and its colours made richer (blur + saturate), so the page shows through softly;
     - a bright hairline along the top edge (rim light) and a faint dark one along the bottom give it thickness;
     - a soft shadow lifts it off the page.
   The veil and the rim come from the kit's tokens, so it is frosted white on the light theme and smoked on the dark
   one. A tone (success, warn, danger, info) only tints the icon chip and the left edge; the pill stays glass.
   #app-islands holds them (more than one can show: they stack). */
.app-islands { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 9000; display: grid; gap: 8px; justify-items: center; width: max-content; max-width: calc(100vw - 20px); pointer-events: none; }
.app-island { --_c: var(--gm-text-2); --_veil: var(--gm-surface); --_rim: rgba(255, 255, 255, .55);
  position: relative; pointer-events: auto; display: flex; align-items: center; gap: 6px; max-width: min(540px, calc(100vw - 20px)); padding: 6px 7px 6px 7px; border-radius: 999px;
  color: var(--gm-text); font-size: var(--gm-text-sm); line-height: 1.3;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--_c) 16%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--_veil) 46%, transparent), color-mix(in srgb, var(--_veil) 24%, transparent));
  -webkit-backdrop-filter: blur(20px) saturate(185%); backdrop-filter: blur(20px) saturate(185%);
  border: 1px solid color-mix(in srgb, var(--gm-text) 13%, transparent);
  box-shadow: inset 0 1px 0 var(--_rim), inset 0 -1px 0 rgba(0, 0, 0, .10), 0 1px 2px rgba(0, 0, 0, .10), 0 14px 34px -14px rgba(0, 0, 0, .45);
  animation: app-island-in 180ms ease-out both; }
:root[data-theme="dark"] .app-island { --_rim: rgba(255, 255, 255, .20); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .app-island { --_rim: rgba(255, 255, 255, .20); } }
/* browsers without blur: a nearly solid veil, so the text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .app-island { background: color-mix(in srgb, var(--_veil) 94%, transparent); } }
.app-island[hidden] { display: none; }
/* a running job redraws itself every 2 seconds: it must not slide in again each time */
.app-island--still { animation: none; }
.app-island__main { display: flex; align-items: center; gap: 9px; min-width: 0; color: inherit; text-decoration: none; padding-right: 8px; }
.app-island__main > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-island__main b { font-weight: 650; }
/* the icon chip: a soft tinted circle with the icon in the tone's colour (never a solid block of colour) */
.app-island__dot { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; color: var(--_c);
  background: color-mix(in srgb, var(--_c) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_c) 30%, transparent); }
.app-island__dot.is-turning svg { animation: app-island-turn 1.2s linear infinite; }
.app-island__spin { width: 20px; height: 20px; margin: 2px; flex: none; border-radius: 50%; background: conic-gradient(var(--gm-accent) calc(var(--p, 0) * 1%), color-mix(in srgb, var(--gm-text) 18%, transparent) 0); -webkit-mask: radial-gradient(circle, transparent 6px, #000 7px); mask: radial-gradient(circle, transparent 6px, #000 7px); animation: app-island-pulse 1.4s ease-in-out infinite; }
.app-island--busy { --_c: var(--gm-accent); padding-right: 12px; }
.app-island--info { --_c: var(--gm-info); }
.app-island--success { --_c: var(--gm-success); }
.app-island--warn { --_c: var(--gm-warning); }
.app-island--danger { --_c: var(--gm-danger); }
.app-island--success, .app-island--warn, .app-island--danger, .app-island--info { border-color: color-mix(in srgb, var(--_c) 34%, color-mix(in srgb, var(--gm-text) 13%, transparent)); }
.app-island__x { flex: none; width: 24px; height: 24px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--gm-text) 10%, transparent); color: var(--gm-text-2); font-size: 15px; line-height: 1; cursor: pointer; }
.app-island__x:hover { background: color-mix(in srgb, var(--gm-text) 20%, transparent); color: var(--gm-text); }
.app-island:not(:has(.app-island__x)) { padding-right: 14px; }
/* only a short slide: growing and fading a blurred glass shows it half-drawn for a moment */
@keyframes app-island-in { from { transform: translateY(-140%); } }
@keyframes app-island-pulse { 50% { opacity: .6; } }
@keyframes app-island-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .app-island, .app-island__spin, .app-island__dot.is-turning svg { animation: none; } }
/* The bell and its list */
.app-bell > summary { position: relative; list-style: none; }
.app-bell__count { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
.app-bell__panel { width: min(360px, calc(100vw - 24px)); max-height: min(70vh, 460px); overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.app-notices__head { position: sticky; top: -6px; z-index: 1; background: var(--gm-surface); }
.app-notices__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.app-notices__none { margin: 0; padding: 14px 10px; color: var(--gm-muted); font-size: var(--gm-text-sm); }
.app-notice { align-items: flex-start; min-height: 0; padding: 10px; }
/* unread: a red dot, bold title, "New"; read: an empty ring and quieter text */
.app-notice__dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; flex: none; border: 1.5px solid var(--gm-line-strong); }
.app-notice.is-new .app-notice__dot { border: 0; background: var(--gm-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gm-accent) 22%, transparent); }
.app-notice:not(.is-new) b { font-weight: 500; color: var(--gm-text-2); }
.app-notice.is-new b { color: var(--gm-text); }
.app-notice__new { color: var(--gm-accent-text); font-weight: 600; }
.app-notice__text { display: grid; gap: 2px; min-width: 0; }
.app-notice__text small { font-size: var(--gm-text-xs); color: var(--gm-text-2); white-space: normal; }
.app-notice__text small:not(.gm-muted) { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.app-notice.is-new { background: color-mix(in srgb, var(--gm-accent) 8%, transparent); }
.app-notice + .app-notice { margin-top: 2px; }
/* Preview page: the island's looks one under the other */
.app-island-demo { display: grid; gap: 12px; justify-items: start; padding: 22px; border-radius: var(--gm-radius-lg); border: 1px solid var(--gm-line);
  background: radial-gradient(120px 120px at 12% 30%, var(--gm-accent), transparent 70%), radial-gradient(160px 140px at 70% 20%, #3b82f6, transparent 70%), radial-gradient(180px 150px at 45% 85%, #10b981, transparent 70%), radial-gradient(140px 120px at 92% 75%, #f59e0b, transparent 70%), var(--gm-surface-2); }
.app-island-demo > .gm-small { padding: 2px 8px; border-radius: 6px; background: var(--gm-surface); }
.app-island--inline { max-width: 100%; animation: none; margin-bottom: 8px; }
/* The crown: this is in the app, but the gym's plan doesn't include it yet */
.app-crown { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; border-radius: 50%; color: #b45309; background: color-mix(in srgb, #f59e0b 22%, transparent); vertical-align: -3px; flex: none; }
:root[data-theme="dark"] .app-crown { color: #fbbf24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .app-crown { color: #fbbf24; } }
.app-crown svg { fill: currentColor; stroke-width: 1.5; }
/* A message from us, opened from its notice: a light sheet like the email, in both themes */
.app-news { background: #fff; color: #0f172a; border: 1px solid var(--gm-line); border-radius: var(--gm-radius-lg, 16px); padding: 24px; max-width: 640px; overflow-wrap: anywhere; }
.app-news__body { font-size: 15px; line-height: 1.6; overflow-x: auto; }
.app-news__body :is(p, ul, ol, blockquote, table) { margin: 0 0 14px; }
.app-news__body :is(h2, h3, h4) { margin: 18px 0 8px; color: #0f172a; line-height: 1.3; }
.app-news__body h2 { font-size: 18px; } .app-news__body h3 { font-size: 16px; } .app-news__body h4 { font-size: 15px; }
.app-news__body a { color: #be123c; }
.app-news__body img { max-width: 100%; height: auto; }
.app-news__body blockquote { padding-left: 12px; border-left: 3px solid #e2e8f0; color: #475569; }
.app-news__body hr { border: 0; border-top: 1px solid #e2e8f0; margin: 16px 0; }
@media (max-width: 480px) { .app-news { padding: 16px; } }
/* Admin → Messages: the "To" choices (what belongs to a choice shows only when it is picked), the gym tick list */
.app-to { display: grid; gap: 10px; }
.app-to__opt { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; }
.app-to__opt > input { margin: 0; }
.app-to__sub { grid-column: 2; }
.app-to__opt > input:not(:checked) ~ .app-to__sub { display: none; }
.app-pick { display: grid; gap: 2px; max-height: 240px; overflow-y: auto; border: 1px solid var(--gm-line); border-radius: var(--gm-radius-md, 10px); padding: 8px 10px; }
.app-pick .gm-check { padding: 4px 0; }
/* Import: the blank template to download, with what goes in each column */
.app-tpl { display: grid; gap: 8px; padding: 12px 14px; border: 1px dashed var(--gm-line-strong); border-radius: var(--gm-radius-md, 10px); }
.app-tpl__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.app-tpl summary { cursor: pointer; font-size: var(--gm-text-sm); color: var(--gm-text-2); }
.app-tpl__cols { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: var(--gm-text-sm); }
.app-tpl__cols li { display: grid; grid-template-columns: 120px 76px minmax(0, 1fr); gap: 8px; align-items: baseline; }
@media (max-width: 520px) { .app-tpl__cols li { grid-template-columns: 1fr auto; } .app-tpl__cols li .gm-muted { grid-column: 1 / -1; } }
.app-danger-text { color: var(--gm-danger); }
.app-ok-text { color: var(--gm-success-text, var(--gm-state-active)); }
/* Settings → Accounts: a card per connected service */
.app-acct .gm-card__title { display: flex; align-items: center; gap: 8px; }
.app-acct .gm-card__title svg { width: 18px; height: 18px; flex: none; color: var(--gm-text-2); }
/* an icon in front of a name, on one line */
.app-named { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.app-named svg { flex: none; }
/* Help (plan 08): the pages as written in the admin panel, in the theme's own colours */
.app-help { max-width: 760px; display: grid; gap: 16px; }
.app-help__body { font-size: var(--gm-text-md); line-height: 1.65; overflow-wrap: anywhere; }
.app-help__body > :first-child { margin-top: 0; }
.app-help__body :is(p, ul, ol, blockquote, pre, table) { margin: 0 0 14px; }
.app-help__body :is(h2, h3, h4) { margin: 22px 0 8px; line-height: 1.3; font-family: var(--gm-font-display); }
.app-help__body h2 { font-size: var(--gm-text-xl); } .app-help__body h3 { font-size: var(--gm-text-lg); } .app-help__body h4 { font-size: var(--gm-text-md); }
.app-help__body :is(ul, ol) { padding-left: 22px; }
.app-help__body li { margin: 4px 0; }
.app-help__body a { color: var(--gm-accent-text); }
.app-help__body img { display: block; max-width: 100%; height: auto; margin: 10px 0; border: 1px solid var(--gm-line); border-radius: var(--gm-radius-md); cursor: zoom-in; }
.app-help__body blockquote { padding: 10px 14px; border-left: 3px solid var(--gm-accent); background: var(--gm-surface-2); border-radius: 0 var(--gm-radius-md) var(--gm-radius-md) 0; color: var(--gm-text); }
.app-help__body code { padding: 1px 5px; border-radius: 5px; background: var(--gm-surface-2); font: var(--gm-text-sm) var(--gm-font-mono); }
.app-help__body pre { padding: 12px 14px; border-radius: var(--gm-radius-md); background: var(--gm-surface-2); border: 1px solid var(--gm-line); overflow-x: auto; }
.app-help__body pre code { padding: 0; background: none; }
.app-help__body hr { border: 0; border-top: 1px solid var(--gm-line); margin: 18px 0; }
.app-help__trail { font-size: var(--gm-text-sm); color: var(--gm-muted); }
.app-help__trail a { color: var(--gm-text-2); }
.app-help__found { display: grid; gap: 6px; max-width: 760px; }
.app-help__found:empty { display: none; }
.app-help__hit { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--gm-line); border-radius: var(--gm-radius-md); background: var(--gm-surface); color: inherit; text-decoration: none; }
.app-help__hit:hover { border-color: var(--gm-line-strong); background: var(--gm-surface-2); }
.app-help__hit small { color: var(--gm-muted); font-size: var(--gm-text-sm); }
.app-help__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.app-help__list a { color: var(--gm-text); text-decoration: none; }
.app-help__list a:hover { color: var(--gm-accent-text); text-decoration: underline; }
.app-help__list--cards { gap: 8px; }
.app-help__list--cards a { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--gm-line); border-radius: var(--gm-radius-md); background: var(--gm-surface); }
.app-help__list--cards a:hover { text-decoration: none; border-color: var(--gm-line-strong); background: var(--gm-surface-2); }
.app-help__list--cards small { color: var(--gm-muted); font-size: var(--gm-text-sm); }
.app-help__next { max-width: 760px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.app-help__next a { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--gm-line); border-radius: var(--gm-radius-md); color: var(--gm-text); text-decoration: none; min-width: 0; }
.app-help__next a:last-child { justify-content: flex-end; text-align: right; }
.app-help__next a:hover { border-color: var(--gm-line-strong); background: var(--gm-surface-2); }
.app-help__next small { display: block; color: var(--gm-muted); font-size: var(--gm-text-xs); }
/* the admin's editor shows the page as it will look, and its form uses the full width */
.gm-editor__preview .app-help__body { max-width: none; }
@media (min-width: 860px) { .app-help-form { grid-template-columns: repeat(4, minmax(0, 1fr)); } .app-help-form > .gm-span-2 { grid-column: span 2; } }

/* Front desk card (try-out, 13 Oct 2026: local only; moves into the kit once approved).
   One member on ONE line: photo, name, member number | what is wrong and the facts | actions | close (top right).
   On a phone it folds to three short lines. The look (founder's reference, 13 Oct 2026): a thin border in the state's
   colour, a soft tint that fades to the right, shadows on the INSIDE (a fine line down the left and a faint glow),
   tinted chips for the member number and the money, softly rounded buttons. */
.app-deskcards { display: grid; gap: 8px; }
.app-deskcards:empty { display: none; }
.app-deskcards__more { font-size: var(--gm-text-sm); padding: 2px 4px; }
.app-deskcard { --_c: var(--gm-state-active); position: relative; display: flex; align-items: center; gap: 6px 14px; min-height: 56px; padding: 8px 12px 8px 16px;
  border: 1px solid color-mix(in srgb, var(--_c) 42%, var(--gm-line)); border-radius: 18px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--_c) 8%, var(--gm-surface)), var(--gm-surface) 62%);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--_c) 85%, transparent), inset 0 0 18px color-mix(in srgb, var(--_c) 9%, transparent), inset 0 1px 0 color-mix(in srgb, var(--gm-surface) 70%, transparent); }
.app-deskcard--amber { --_c: var(--gm-state-expiring); }
.app-deskcard--red { --_c: var(--gm-state-expired); }
.app-deskcard__who { display: flex; align-items: center; gap: 10px; min-width: 0; flex: none; max-width: 46%; color: inherit; text-decoration: none; }
.app-deskcard__who b { font: 700 var(--gm-text-md)/1.2 var(--gm-font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-deskcard__who .gm-avatar { flex: none; width: 36px; height: 36px; margin-left: 2px; color: var(--_c); background: color-mix(in srgb, var(--_c) 10%, var(--gm-surface)); border: 1.5px solid color-mix(in srgb, var(--_c) 55%, transparent); box-shadow: none; }
.app-deskcard__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin-left: 2px; border-radius: 50%; color: var(--_c); background: color-mix(in srgb, var(--_c) 10%, var(--gm-surface)); border: 1.5px solid color-mix(in srgb, var(--_c) 55%, transparent); }
.app-deskcard__code { flex: none; padding: 2px 8px; border-radius: 8px; font: 600 11px/1.5 var(--gm-font-mono); letter-spacing: .02em; color: var(--_c); background: color-mix(in srgb, var(--_c) 9%, var(--gm-surface)); border: 1px solid color-mix(in srgb, var(--_c) 26%, transparent); white-space: nowrap; }
.app-deskcard__line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; flex: 1 1 0; min-width: 0; font-size: var(--gm-text-sm); color: var(--gm-text-2); }
.app-deskcard__line > * { white-space: nowrap; }
.app-deskcard__line > b { color: var(--_c); font-weight: 700; }
.app-deskcard__due { padding: 2px 9px; border-radius: 8px; font-weight: 700; color: var(--gm-text); background: color-mix(in srgb, var(--gm-surface) 82%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_c) 14%, var(--gm-line)); }
.app-deskcard__when { font-variant-numeric: tabular-nums; opacity: .7; }
.app-deskcard__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.app-deskcard__actions:empty { display: none; }
.app-deskcard__actions form { margin: 0; }
.app-deskcard__actions .gm-btn { border-radius: 11px; }
.app-deskcard__actions .gm-btn:not(.gm-btn--primary) { background: var(--gm-surface); border-color: color-mix(in srgb, var(--_c) 30%, var(--gm-line)); }
.app-deskcard__actions .gm-btn:not(.gm-btn--primary) svg { color: var(--_c); }
.app-deskcard__close { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-right: -2px; border-radius: 50%; font-size: 18px; line-height: 1; color: var(--gm-text-2); text-decoration: none; }
.app-deskcard__close:hover { background: color-mix(in srgb, var(--_c) 12%, transparent); color: var(--gm-text); }
@media (max-width: 899px) {
  .app-deskcard { flex-wrap: wrap; padding: 10px 12px 10px 16px; }
  .app-deskcard__who { max-width: none; flex: 1 1 0; }
  .app-deskcard__close { order: 1; margin: -4px -4px -4px 0; }        /* stays at the top right */
  .app-deskcard__line { order: 2; flex: 1 1 100%; }
  .app-deskcard__actions { order: 3; flex: 1 1 100%; flex-wrap: wrap; }
  .app-deskcard__actions .gm-btn { flex: 1 1 auto; }
}
/* today's visits: the state and "Allowed anyway" side by side, so every row is the same height */
.app-visit-state { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

/* TEMPORARY (services/server-watch.ts): one thin line on the admin Overview about the server we are waiting for */
.app-watchline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; padding: 6px 12px; font-size: var(--gm-text-sm); border: 1px solid var(--gm-line); border-radius: 10px; background: var(--gm-surface); }
.app-watchline__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gm-danger); }
.app-watchline.is-in { border-color: color-mix(in srgb, var(--gm-state-active) 50%, var(--gm-line)); background: color-mix(in srgb, var(--gm-state-active) 8%, var(--gm-surface)); }
.app-watchline.is-in .app-watchline__dot { background: var(--gm-state-active); }
.app-watchline > span:nth-child(2) { flex: 1 1 260px; min-width: 0; }
.app-watchline button { padding: 0; border: 0; background: none; color: var(--gm-text-2); font: inherit; text-decoration: underline; cursor: pointer; }
.app-watchline button:hover { color: var(--gm-text); }