/* GymRev Coaching identity · source: Brand Guidelines v1.0, 21 September 2026.
   Edit palette, type, spacing and radii here; styles.css owns screen layouts.
   PDF colour values win over older website near-black values. See BRAND.md. */
@font-face {
  font-family: Inter;
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
}
:root {
  --brand-black: #000000;
  --brand-white: #FFFFFF;
  --brand-graphite: #3A3A3A;
  --brand-strong-grey: #2A2A2A;
  --brand-silver: #EAE6E1;
  --brand-line: #D3D3D3;
  --brand-paper: #F5F5F5;
  --ink: var(--brand-black);
  --white: var(--brand-white);
  --muted: var(--brand-graphite);
  --soft: var(--brand-silver);
  --line: var(--brand-line);
  --paper: var(--brand-paper);
  --scrim: rgb(0 0 0 / 55%);
  --font-family: Inter, Arial, sans-serif;
  --weight-body: 400;
  --weight-subheading: 500;
  --weight-action: 600;
  --weight-heading: 700;
  --leading-heading: .9;
  --leading-subheading: 1;
  --leading-body: 1.3;
  --leading-reading: 1.5;
  --tracking-heading: -.03em;
  --tracking-subheading: -.02em;
  --tracking-body: -.01em;
  --text-micro: 11px;
  --text-caption: 12px;
  --text-small: 13px;
  --text-body: 14px;
  --text-subheading: 16px;
  --text-section: 18px;
  --text-large: 20px;
  --text-metric-small: 24px;
  --text-title-mobile: 30px;
  --text-metric: 36px;
  --text-title: 40px;
  --space-unit: 4px;
  --space-2: calc(var(--space-unit) * 2);
  --space-3: calc(var(--space-unit) * 3);
  --space-4: calc(var(--space-unit) * 4);
  --space-5: calc(var(--space-unit) * 5);
  --space-6: calc(var(--space-unit) * 6);
  --space-8: calc(var(--space-unit) * 8);
  --space-10: calc(var(--space-unit) * 10);
  --radius-chip: 8px;
  --radius-tile: 12px;
  --radius-card: 20px;
  --radius-panel: 24px;
  --radius: var(--radius-card);
  --shadow: none;
  --sidebar-width: 244px;
}
body { font-weight:var(--weight-body); }
h1,.client-main h1 {
  font-size:var(--text-title); font-weight:var(--weight-heading);
  line-height:var(--leading-heading); letter-spacing:var(--tracking-heading);
}
h2 { font-weight:var(--weight-heading); line-height:1.1; letter-spacing:var(--tracking-heading); }
h3 { font-weight:var(--weight-subheading); line-height:1.2; letter-spacing:var(--tracking-subheading); }
button,a,input,select,textarea { letter-spacing:var(--tracking-body); }
button { text-align:left; }
.eyebrow,.nav-label,th {
  text-transform:none; letter-spacing:var(--tracking-body);
  font-weight:var(--weight-subheading); line-height:var(--leading-body);
}
.eyebrow { display:flex; align-items:center; gap:var(--space-2); }
.eyebrow::before { content:''; width:5px; height:5px; background:currentColor; transform:rotate(45deg); flex:none; }
.brand { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-5); padding:var(--space-4) var(--space-4) var(--space-10); }
.brand-logo { display:block; width:148px; height:auto; min-height:20px; }
.brand-sub { font-size:var(--text-micro); font-weight:var(--weight-body); color:var(--muted); letter-spacing:var(--tracking-body); }
.boot { text-align:left; }
.boot-logo { display:block; height:auto; margin-bottom:var(--space-4); }
.mobile-brand { display:none; }
.on-dark {
  --ink: var(--brand-white);
  --white: var(--brand-strong-grey);
  --muted: var(--brand-line);
  --paper: var(--brand-strong-grey);
  --soft: var(--brand-graphite);
  --line: var(--brand-graphite);
  color:var(--brand-white);
}
.shell { grid-template-columns:var(--sidebar-width) minmax(0,1fr); }
.sidebar { width:var(--sidebar-width); padding:var(--space-5); background:var(--brand-black); border-color:var(--brand-black); }
.sidebar .workspace-tag { padding:var(--space-3); margin-bottom:var(--space-8); border-color:var(--brand-graphite); }
.sidebar .nav-label { color:var(--brand-line); padding-left:var(--space-3); margin-bottom:var(--space-3); }
.sidebar .nav-link { color:var(--brand-line); min-height:44px; padding:var(--space-3); }
.sidebar .nav-link:hover { background:var(--brand-strong-grey); color:var(--brand-white); }
.sidebar .nav-link.active { background:var(--brand-white); color:var(--brand-black); }
.sidebar .nav-link .count { background:var(--brand-silver); color:var(--brand-black); }
.sidebar .avatar { background:var(--brand-strong-grey); border-color:var(--brand-graphite); color:var(--brand-white); }
.sidebar .avatar.dark { background:var(--brand-white); border-color:var(--brand-white); color:var(--brand-black); }
.sidebar .pilot-note { background:var(--brand-strong-grey); border-color:var(--brand-graphite); }
.sidebar .account { padding:var(--space-4) var(--space-2) 0; }
.topbar { background:var(--white); }
.main { padding-top:var(--space-10); }
.page-heading { align-items:center; margin-bottom:var(--space-8); }
.page-heading p { margin-top:var(--space-4); font-size:var(--text-small); max-width:64ch; line-height:var(--leading-body); }
.heading-copy .eyebrow { margin-bottom:var(--space-4); }
.stat,.card,.person-card { border-radius:var(--radius-card); box-shadow:none; }
.stat { padding:var(--space-5); }
.stat-top { gap:var(--space-2); align-items:flex-start; }
.stat-value { font-size:var(--text-metric); font-weight:var(--weight-heading); letter-spacing:var(--tracking-heading); }
.stat-foot { line-height:var(--leading-body); }
.card-head,.card-body { padding:var(--space-6); }
.card-head h2 { font-size:var(--text-section); }
.card-head p { line-height:var(--leading-body); margin-top:var(--space-2); }
.task-row { padding:var(--space-5) var(--space-6); }
.task-row p,.activity-row p { line-height:var(--leading-body); }
.person-card { text-align:left; }
.pill { border-radius:var(--radius-chip); }
.btn { min-height:42px; border-radius:var(--radius-chip); padding:10px 16px; }
.btn.primary { background:var(--ink); color:var(--white); }
.btn.primary:hover { background:var(--brand-strong-grey); color:var(--brand-white); }
.on-dark .btn { background:var(--brand-white); border-color:var(--brand-white); color:var(--brand-black); }
.on-dark .btn:hover { background:var(--brand-silver); border-color:var(--brand-silver); }
.btn.sm { min-height:36px; }
.btn.icon { min-width:38px; min-height:38px; }
.field { border-color:var(--line); line-height:var(--leading-reading); }
.field::placeholder { color:var(--muted); opacity:1; }
textarea.field,.note-box,.message,.meal-details p,.help { line-height:var(--leading-reading); }
.empty,.photo-upload { text-align:left; }
.empty p { margin-left:0; margin-right:0; }
.brand-surface { position:relative; isolation:isolate; overflow:hidden; }
.brand-surface::before { content:''; position:absolute; width:300px; height:218px; right:-45px; bottom:-65px; background:url('/brand/gymrev-symbol-white.svg') center/contain no-repeat; opacity:.045; pointer-events:none; z-index:-1; }
.insight { background:var(--brand-strong-grey); border-color:var(--brand-strong-grey); padding:var(--space-6); border-radius:var(--radius-card); }
.insight h3 { font-weight:var(--weight-heading); font-size:var(--text-section); line-height:1.1; letter-spacing:var(--tracking-heading); margin:var(--space-4) 0 var(--space-3); }
.insight p { color:var(--brand-white); font-size:var(--text-caption); line-height:var(--leading-reading); }
.client-header { padding-top:var(--space-8); padding-bottom:var(--space-8); }
.client-header .brand { padding:0; gap:var(--space-5); }
.client-header .brand-logo { width:148px; }
.client-header .brand-sub { font-size:var(--text-micro); }
.client-intro { margin-bottom:var(--space-8); }
.client-main h1 { max-width:680px; }
.client-intro p { font-size:var(--text-body); margin-top:var(--space-4); }
.client-hero { border-radius:var(--radius-card); background:var(--brand-black); border-color:var(--brand-black); padding:var(--space-6); }
.client-hero h2 { font-weight:var(--weight-heading); line-height:1.1; }
.client-hero p { color:var(--brand-white); }
.client-goal .goal-number { font-weight:var(--weight-heading); }
.day-btn { min-height:42px; }
.meal-art { background:var(--soft); color:var(--ink); border-color:var(--soft); }
.meal-title .eyebrow { letter-spacing:var(--tracking-body); }
.meal-title h3 { font-weight:var(--weight-action); line-height:1.3; }
.nutrition-summary { background:var(--paper); }
.client-nav,.mobile-nav { background:var(--brand-white); backdrop-filter:none; }
.client-nav a.active,.mobile-nav a.active { color:var(--brand-black); }
.client-nav a.active::after,.mobile-nav a.active::after { content:''; width:4px; height:4px; background:currentColor; transform:rotate(45deg); }
progress,progress::-webkit-progress-bar { background:var(--soft); }
progress::-webkit-progress-value { background:var(--ink); }
progress::-moz-progress-bar { background:var(--ink); }
.modal { border-radius:var(--radius-panel); box-shadow:none; }
.modal-backdrop { background:var(--scrim); backdrop-filter:none; }
.message.client { background:var(--brand-black); color:var(--brand-white); }
#toast { background:var(--brand-black); color:var(--brand-white); box-shadow:none; }
#toast.error { background:var(--brand-strong-grey); }
.demo-bar { background:var(--brand-silver); color:var(--brand-black); text-align:left; padding:var(--space-2) var(--space-10); font-size:var(--text-micro); letter-spacing:var(--tracking-body); }
@media (max-width:1150px) {
  :root { --sidebar-width:208px; }
  .sidebar { padding:var(--space-4); }
  .sidebar .brand { padding:var(--space-4) var(--space-2) var(--space-8); }
  .sidebar .brand-logo { width:128px; min-height:24px; }
  .sidebar .workspace-tag { padding:var(--space-2); }
  .sidebar .workspace-tag .avatar { width:30px; height:30px; }
}
@media (max-width:700px) {
  :root { --text-title:30px; --text-metric:32px; }
  .shell { display:block; }
  h1,.client-main h1 { font-size:var(--text-title); line-height:1; }
  .topbar { min-height:64px; height:auto; padding:var(--space-3) var(--space-5); }
  .breadcrumb { gap:var(--space-3); }
  .mobile-brand { display:block; width:29px; height:21px; margin-right:var(--space-2); }
  .breadcrumb>svg,.breadcrumb>span:not(:last-child) { display:none; }
  .top-actions .btn { min-height:36px; font-size:var(--text-micro); }
  .main { padding:var(--space-8) 18px 110px; }
  .page-heading { align-items:flex-start; margin-bottom:var(--space-6); }
  .page-heading p { font-size:var(--text-small); margin-top:var(--space-3); }
  .page-heading .actions .btn { min-height:38px; font-size:var(--text-micro); }
  .stat { padding:var(--space-4); }
  .stat-top { font-size:var(--text-micro); min-height:30px; }
  .stat-foot { font-size:var(--text-micro); }
  .stat-value { margin:var(--space-4) 0 var(--space-3); }
  .card-head,.card-body { padding:18px; }
  .card-head h2 { font-size:var(--text-subheading); }
  .task-row { padding:18px; align-items:flex-start; }
  .task-row .avatar { margin-top:2px; }
  .task-row .task-copy strong { font-size:var(--text-small); }
  .task-row .btn { min-height:40px; font-size:var(--text-micro); }
  .task-title .pill { font-size:var(--text-micro); }
  .client-header { padding:var(--space-6) var(--space-5); }
  .client-header .brand-logo { width:128px; min-height:24px; }
  .client-header .actions { gap:var(--space-2); }
  .client-header .avatar { width:30px; height:30px; }
  .client-header .pill { font-size:var(--text-micro); }
  .client-main { padding-top:var(--space-3); }
  .client-intro h1.section-gap { margin-top:var(--space-4); max-width:340px; }
  .client-hero { padding:var(--space-5); }
  .client-hero h2 { font-size:var(--text-subheading); }
  .client-hero .btn { min-height:42px; }
  .client-board .client-goal p { font-size:var(--text-micro); }
  .client-board .client-goal .goal-number { font-size:var(--text-large); }
  .client-shell .meal-actions .btn,.client-shell .meal-actions .btn.icon { min-height:44px; }
  .day-btn { min-height:44px; }
  .field,.search input { font-size:16px!important; }
  .demo-bar { padding:var(--space-2) var(--space-5); font-size:var(--text-micro); }
  .modal { border-radius:var(--radius-panel) var(--radius-panel) 0 0; }
}

@media (max-width:360px) {
  .client-board .client-goals { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); }
}