/* ============================================================================
   GYMLEVERAGE — the design system.

   Every screen had already invented the same components: 33 defined .card, 27
   defined .btn, 46 defined .label. What differed was the numbers — seven font
   sizes between 10 and 14px, four border radii, no spacing rhythm. That is why
   the suite felt like thirty products instead of one.

   This file is the single set of numbers. Load it BEFORE a screen's own <style>
   so a screen can still override deliberately, and delete the screen's copies
   as they're migrated.

   Rules that hold everywhere:
     · Type moves in five steps, not seventeen.
     · Space is a multiple of 4. Nothing is 13px or 17px.
     · Three radii. Small for chips, medium for cards, full for pills.
     · Colour is named by ROLE, never by appearance — "danger", not "red" —
       so light and dark themes stay honest without renaming anything.
   ========================================================================= */

:root {
  /* ---- type: a 1.125 scale from a 14px base, rounded to whole pixels ------
     Anything smaller than 12px is for uppercase mono labels only; body text
     at 11px is how a product ends up unreadable to a 55-year-old gym owner. */
  --t-xs:   12px;   /* mono labels, meta, timestamps         */
  --t-sm:   13px;   /* secondary text, table cells           */
  --t-base: 15px;   /* body — was 13/13.5/14 depending on screen */
  --t-lg:   17px;   /* card titles                           */
  --t-xl:   22px;   /* section headings                      */
  --t-2xl:  30px;   /* page titles                           */
  --t-3xl:  40px;   /* the one number that matters on a screen */

  --lh-tight: 1.25;
  --lh-body:  1.6;   /* long text needs room; 1.4 reads cramped */

  --w-normal: 400;
  --w-medium: 600;
  --w-bold:   800;

  /* ---- space: 4px base. Six steps is enough for any layout ------------- */
  --s1:  4px;
  --s2:  8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* ---- shape ----------------------------------------------------------- */
  --r-sm:   8px;    /* chips, tags, inputs   */
  --r-md:  12px;    /* cards, buttons, sheets */
  --r-full: 999px;  /* pills, avatars         */

  --border: 1px solid var(--line,#262d30);

  /* ---- elevation: three levels. More than three and nothing feels raised. */
  --lift-1: 0 1px 2px rgba(0,0,0,.18);
  --lift-2: 0 4px 14px rgba(0,0,0,.22);
  --lift-3: 0 14px 40px rgba(0,0,0,.30);

  /* ---- motion ---------------------------------------------------------- */
  --ease: cubic-bezier(.2,.7,.3,1);
  --fast: .12s var(--ease);
  --med:  .22s var(--ease);

  /* ---- focus: visible, always. Removing outlines locks out keyboard users. */
  --focus: 0 0 0 3px rgba(144,225,29,.45);
}

/* Respect a person who has asked their machine to stop moving things. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- surfaces */
.gl .card,
.card {
  background: var(--panel,#14181A);
  border: var(--border);
  border-radius: var(--r-md);
  padding: var(--s4);
  box-shadow: var(--lift-1);
}

/* A card that is the answer to the screen's question, not just another box. */
.card.feature {
  border-color: var(--volt-dim,#6FA815);
  background:
    linear-gradient(180deg, rgba(144,225,29,.06), transparent 60%),
    var(--panel,#14181A);
  box-shadow: var(--lift-2);
}

/* --------------------------------------------------------------- typography */
.h1 { font-family: var(--display, inherit); font-weight: var(--w-bold);
      font-size: var(--t-2xl); line-height: var(--lh-tight); margin: 0 0 var(--s2); }
.h2 { font-family: var(--display, inherit); font-weight: var(--w-bold);
      font-size: var(--t-xl);  line-height: var(--lh-tight); margin: 0 0 var(--s2); }
.h3 { font-weight: var(--w-medium); font-size: var(--t-lg);
      line-height: var(--lh-tight); margin: 0 0 var(--s1); }

/* Body copy. The default was 13px on most screens; that is too small to read
   comfortably on a laptop at arm's length, which is where this gets used. */
.body { font-size: var(--t-base); line-height: var(--lh-body); }
.sub, .rd { color: var(--muted,#8a948f); font-size: var(--t-sm); line-height: var(--lh-body); }

/* The small uppercase mono label. Used 46 times across the suite. */
.label {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted,#8a948f);
  font-weight: var(--w-medium);
}

/* One big number. The whole point of a dashboard. */
.stat     { font-family: var(--display, inherit); font-weight: var(--w-bold);
            font-size: var(--t-3xl); line-height: 1; letter-spacing: -.02em; }
.stat-lbl { font-family: var(--mono, monospace); font-size: var(--t-xs);
            text-transform: uppercase; letter-spacing: .1em; color: var(--muted,#8a948f);
            margin-top: var(--s1); }

/* ----------------------------------------------------------------- controls */
.btn, .btn2 {
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  border-radius: var(--r-md);
  padding: var(--s3) var(--s4);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--fast), border-color var(--fast), transform var(--fast);
  min-height: 40px;          /* a real target, not a 28px sliver */
}
.btn  { background: var(--volt,#90E11D); color: #0B0D0C; border-color: var(--volt,#90E11D); }
.btn:hover  { background: #A6F02B; border-color: #A6F02B; }
.btn:active { transform: translateY(1px); }

/* Secondary: readable on its own, quieter than the primary. */
.btn.ghost, .btn2.quiet {
  background: transparent; color: var(--text,#EAF0EC); border-color: var(--line2,#333c40);
}
.btn.ghost:hover, .btn2.quiet:hover { border-color: var(--muted,#8a948f); }

.btn:disabled, .btn2:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Destructive actions never look like the thing you're meant to press. */
.btn.danger { background: transparent; color: var(--danger,#ff5757); border-color: var(--danger,#ff5757); }
.btn.danger:hover { background: var(--danger,#ff5757); color: #fff; }

:where(.btn, .btn2, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none; box-shadow: var(--focus);
}

/* ------------------------------------------------------------------- inputs */
.field, input.in, select.in, textarea.in {
  width: 100%;
  box-sizing: border-box;
  background: var(--panel2,#171c1e);
  border: 1px solid var(--line2,#333c40);
  border-radius: var(--r-sm);
  color: var(--text,#EAF0EC);
  font-family: inherit;
  font-size: var(--t-base);      /* 16px-ish stops iOS zooming on focus */
  padding: var(--s3);
  transition: border-color var(--fast);
}
.field:focus, input.in:focus, select.in:focus, textarea.in:focus {
  outline: none; border-color: var(--volt-dim,#6FA815); box-shadow: var(--focus);
}
.field::placeholder, .in::placeholder { color: var(--muted,#8a948f); opacity: .8; }

/* -------------------------------------------------------------- chips, tags */
.pill, .tag {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-size: var(--t-xs); font-weight: var(--w-medium);
  padding: var(--s1) var(--s2);
  border-radius: var(--r-full);
  background: var(--panel2,#171c1e); border: var(--border); color: var(--muted,#8a948f);
}
.pill.on, .tag.on { background: var(--volt,#90E11D); border-color: var(--volt,#90E11D); color: #0B0D0C; }

/* Status colours read by ROLE. A reader should know what it means, not just
   that it is orange. */
.pill.good { color: var(--good,#90E11D);   border-color: var(--good,#90E11D); }
.pill.warn { color: var(--warn,#ffb020);   border-color: var(--warn,#ffb020); }
.pill.bad  { color: var(--danger,#ff5757); border-color: var(--danger,#ff5757); }

/* ------------------------------------------------------------------ layout */
.row   { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--s3); }
.grid  { display: grid; gap: var(--s3); }
.grid.two   { grid-template-columns: repeat(2, 1fr); }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.auto  { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (max-width: 720px) {
  .grid.two, .grid.three { grid-template-columns: 1fr; }
}

.sec  { margin-bottom: var(--s6); }
.wrap { max-width: 1100px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s7); }

/* ------------------------------------------------------------------- states */
/* An empty screen should say what to do next, not just be blank. */
.empty {
  text-align: center; padding: var(--s6) var(--s4);
  color: var(--muted,#8a948f); font-size: var(--t-sm); line-height: var(--lh-body);
  border: 1px dashed var(--line2,#333c40); border-radius: var(--r-md);
}
.empty .h3 { color: var(--text,#EAF0EC); margin-bottom: var(--s2); }

/* Loading that doesn't lie about progress. */
.skeleton {
  background: linear-gradient(90deg, var(--panel2,#171c1e) 25%, var(--line,#262d30) 37%, var(--panel2,#171c1e) 63%);
  background-size: 400% 100%;
  animation: gl-shimmer 1.4s ease infinite;
  border-radius: var(--r-sm);
}
@keyframes gl-shimmer { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }

/* ------------------------------------------------------- touch + small screens */
@media (max-width: 640px) and (pointer: coarse) {
  .btn, .btn2 { min-height: 44px; }
  .wrap { padding: var(--s4) var(--s3) var(--s6); }
  .stat { font-size: var(--t-2xl); }
}