/* ============================================================
   Emperial Fitness platform, design system
   ============================================================
   Rebuilt from component-reference.html and the brand tokens.
   Every class used by the reference page is defined here.

   Urgency is carried by size, weight, position and motion.
   There is no red, amber or green anywhere. The single
   exception is #ff9a9a on inline form errors, which already
   exists in the live consultation form.
   ============================================================ */

:root {
  /* surfaces */
  --obsidian:   #0a0a0b;
  --panel:      #111015;
  --plum:       #2a0a2c;
  --field:      #15131a;
  --glass:      rgba(255, 255, 255, .03);

  /* brand */
  --royal:      #8b2d8f;
  --violet:     #c04fc4;
  --violet-glow:#e070e4;

  /* text */
  --pearl:      #f8f6f4;
  --body:       #cfc9d4;
  --muted:      #a09aa8;
  --faint:      #6b6675;

  /* lines */
  --line:       rgba(248, 246, 244, .12);
  --line-soft:  rgba(248, 246, 244, .07);

  /* form errors only. Nothing else is allowed to be red. */
  --error:      #ff9a9a;

  /* shape */
  --radius:     16px;
  --radius-sm:  11px;
  --radius-pill:100px;

  /* layout */
  --gutter:     22px;
  --w-read:     820px;
  --w-wide:     1240px;

  --ease:       cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--obsidian);
  color: var(--pearl);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* ambient glows, same as the marketing site */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(700px 560px at 10% -6%,  rgba(139, 45, 143, .18), transparent 60%),
    radial-gradient(700px 600px at 100% 102%, rgba(192, 79, 196, .12), transparent 55%);
}

.wrap {
  position: relative; z-index: 1;
  max-width: var(--w-wide); margin: 0 auto;
  padding: 0 var(--gutter) 90px;
}
.wrap-read { max-width: var(--w-read); }

/* ---------------- typography ---------------- */

h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.14;
  color: var(--pearl);
}
h1 { font-size: clamp(30px, 6vw, 44px); margin-bottom: 16px; }
h2 { font-size: clamp(24px, 5vw, 32px); margin-bottom: 12px; }
h3 { font-size: 21px; margin-bottom: 8px; }
h4 { font-size: 17px; margin-bottom: 6px; }

h1 em, h2 em, h3 em {
  font-style: italic; font-weight: 500;
  background: linear-gradient(100deg, var(--violet), var(--pearl));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h4 em { font-style: italic; font-weight: 500; color: var(--violet); }

p { color: var(--body); margin-bottom: 14px; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

strong, b { color: var(--pearl); font-weight: 600; }

.eyebrow, .mono {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--violet); margin-bottom: 12px;
}

.section-note { color: var(--muted); font-size: 14.5px; line-height: 1.6; }

.link {
  color: var(--violet); cursor: pointer;
  border-bottom: 1px solid rgba(192, 79, 196, .4);
}
.link:hover { color: var(--pearl); }

a { color: var(--violet); text-decoration: none; }

.spacer { flex: 1; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------- app header ---------------- */

.app-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(10, 10, 11, .86);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border-bottom: 1px solid var(--line);
}
.app-header-inner {
  max-width: var(--w-wide); margin: 0 auto;
  padding: 11px var(--gutter);
  display: flex; align-items: center; gap: 12px;
}
.mark {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--glass);
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 600;
  color: var(--violet); font-size: 18px;
}
.brandname {
  font-family: 'JetBrains Mono', monospace; font-weight: 600;
  text-transform: uppercase; letter-spacing: .28em;
  font-size: 11px; color: var(--muted);
}

/* ---------------- buttons ---------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 15px; font-weight: 600;
  padding: 13px 26px; min-height: 46px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s var(--ease), filter .2s ease, border-color .2s ease, color .2s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(192, 79, 196, .4); }

.btn-primary {
  color: #fff; border: none;
  background: linear-gradient(120deg, var(--royal), var(--violet));
  box-shadow: 0 8px 30px -10px rgba(192, 79, 196, .6);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }

.btn-ghost { background: transparent; border-color: var(--line); color: var(--muted); }
.btn-ghost:hover:not(:disabled) { border-color: var(--violet); color: var(--pearl); }

.btn-light { background: var(--pearl); color: var(--obsidian); border: none; }
.btn-light:hover:not(:disabled) { filter: brightness(.94); }

/* Cancelling and deleting get the quietest treatment on the screen.
   You should have to mean it. */
.btn-danger {
  background: transparent; color: var(--muted);
  border: 1px dashed rgba(160, 154, 168, .45);
  font-weight: 500;
}
.btn-danger:hover:not(:disabled) { color: var(--pearl); border-color: var(--muted); }

.btn-sm { font-size: 13px; padding: 9px 17px; min-height: 38px; }
.btn-block { width: 100%; }

.actions { display: flex; gap: 12px; align-items: center; margin-top: 20px; }

/* ---------------- cards and rows ---------------- */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.card-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }

.rows { display: flex; flex-direction: column; gap: 9px; }

.row {
  display: flex; align-items: center; gap: 14px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 15px 17px;
  text-decoration: none; color: inherit;
  transition: border-color .2s ease, transform .2s var(--ease);
}
.row:hover { border-color: rgba(192, 79, 196, .45); transform: translateX(2px); }

.row-main  { flex: 1; min-width: 0; }
.row-title { font-size: 15.5px; font-weight: 500; color: var(--pearl); }
.row-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-top: 4px;
}
.row-aside { display: flex; align-items: center; gap: 10px; flex: none; }
.row-chev  { color: var(--faint); font-size: 20px; line-height: 1; }

.row.is-flagged { border-left: 2px solid var(--violet); }
.row.is-health  { border-color: rgba(192, 79, 196, .5); background: linear-gradient(120deg, rgba(139, 45, 143, .16), var(--panel)); }

/* ---------------- alerts ----------------
   Three levels. Urgent is bigger, breaks the page edge, carries a
   spine and a live dot, and has no dismiss control in the markup. */

.alert {
  display: flex; gap: 14px; align-items: flex-start;
  border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.alert .ico  { flex: none; color: var(--violet); font-size: 17px; line-height: 1.4; }
.alert-body  { flex: 1; min-width: 0; }
.alert-body h4 { color: var(--pearl); margin-bottom: 6px; }
.alert-body p  { color: var(--body); font-size: 14.5px; margin: 0; }

.alert-info { background: var(--glass); }

.alert-attention {
  border-color: rgba(192, 79, 196, .3);
  background: linear-gradient(120deg, rgba(139, 45, 143, .12), transparent 70%);
}

.alert-urgent {
  border-color: rgba(192, 79, 196, .55);
  border-left: 4px solid var(--violet);
  background: linear-gradient(120deg, var(--plum), rgba(192, 79, 196, .05));
  padding: 24px 26px;
  box-shadow: 0 18px 50px -26px rgba(192, 79, 196, .7);
}
.alert-urgent .alert-body h4 { font-size: 19px; }
.alert-urgent .alert-body p  { font-size: 15px; }

/* breaks the page edge so it cannot read as just another card */
.alert-pinned {
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
  border-radius: 0;
  border-left-width: 4px; border-right: none;
}

.live {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--violet-glow); margin-top: 7px;
  box-shadow: 0 0 0 0 rgba(224, 112, 228, .7);
}
.pulse-urgent .live { animation: livepulse 2s infinite; }

@keyframes livepulse {
  0%   { box-shadow: 0 0 0 0   rgba(224, 112, 228, .7); }
  70%  { box-shadow: 0 0 0 12px rgba(224, 112, 228, 0); }
  100% { box-shadow: 0 0 0 0   rgba(224, 112, 228, 0); }
}

/* ---------------- chips ----------------
   Reads solid, then outlined, then ghost. Urgency survives a phone
   in bright sunlight and does not depend on telling colours apart. */

.chip {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: var(--radius-pill);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  white-space: nowrap;
}
.chip-health {
  background: linear-gradient(120deg, var(--royal), var(--violet));
  color: #fff; box-shadow: 0 0 0 1px rgba(224, 112, 228, .5);
}
.chip-overdue { background: rgba(192, 79, 196, .2); color: var(--violet-glow); box-shadow: 0 0 0 1px rgba(192, 79, 196, .55) inset; }
.chip-review  { background: transparent; color: var(--violet); box-shadow: 0 0 0 1px rgba(192, 79, 196, .45) inset; }
.chip-active  { background: transparent; color: var(--muted); box-shadow: 0 0 0 1px var(--line) inset; }
.chip-paused  { background: transparent; color: var(--faint); box-shadow: 0 0 0 1px rgba(107, 102, 117, .5) inset; }
.chip-neutral { background: var(--glass); color: var(--muted); }
.chip-brand   { background: linear-gradient(120deg, var(--royal), var(--violet)); color: #fff; }

/* ---------------- forms ---------------- */

.field { margin-bottom: 26px; }

.q-label {
  display: block; font-size: 16px; font-weight: 500;
  color: var(--pearl); margin-bottom: 10px; line-height: 1.4;
}
.req  { color: var(--violet); margin-left: 3px; }
.hint { display: block; color: var(--muted); font-size: 13.5px; margin-top: 8px; line-height: 1.5; }

input[type=text], input[type=email], input[type=date], textarea, select {
  width: 100%;
  background: var(--field); border: 1px solid var(--line);
  border-radius: 12px; color: var(--pearl);
  font-family: inherit; font-size: 15.5px; padding: 14px 15px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input::placeholder, textarea::placeholder { color: #5c5766; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(192, 79, 196, .18);
  background: #18161f;
}

/* pill selectors, carried over from the consultation form */
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pills.stack { flex-direction: column; align-items: stretch; }
.pills.stack .pill span { border-radius: 12px; }

.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill span {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px; min-height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--field);
  font-size: 14.5px; color: var(--muted);
  transition: all .18s ease; user-select: none;
}
.pill:hover span { border-color: rgba(192, 79, 196, .5); color: var(--pearl); }
.pill input:checked + span {
  border-color: var(--violet); color: var(--pearl);
  background: linear-gradient(120deg, rgba(139, 45, 143, .35), rgba(192, 79, 196, .22));
  box-shadow: 0 0 0 1px var(--violet) inset;
}
.pill input:focus-visible + span { box-shadow: 0 0 0 3px rgba(192, 79, 196, .35); }

/* A PAR-Q Yes carries weight through a heavier ring, a glow and a live
   dot, rather than by turning a warning colour. */
.pill input:checked + span.parq-yes {
  box-shadow: 0 0 0 2px var(--violet) inset, 0 0 26px -6px rgba(224, 112, 228, .8);
}
.pill input:checked + span.parq-yes::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--violet-glow); animation: livepulse 2s infinite;
}

.rec-badge {
  margin-left: 8px; padding: 3px 9px; border-radius: var(--radius-pill);
  background: rgba(192, 79, 196, .25);
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; color: var(--violet-glow);
}

/* six-digit sign-in code */
.code-entry { display: flex; gap: 9px; }
.code-entry input {
  width: 100%; max-width: 56px; aspect-ratio: 1 / 1;
  text-align: center; padding: 0;
  font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 600;
  color: var(--pearl); background: var(--field);
  border: 1px solid var(--line); border-radius: 12px;
}
.code-entry input[data-filled] {
  border-color: var(--violet);
  background: linear-gradient(140deg, rgba(139, 45, 143, .3), var(--field));
}

.filters { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; }
.filters input { flex: 1; }

/* their account number, not a password */
.reference {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 19px; font-weight: 600; letter-spacing: .12em;
  color: var(--violet);
  background: var(--glass); border: 1px solid rgba(192, 79, 196, .3);
  border-radius: 12px; padding: 15px 18px;
}

/* ---------------- countdown ---------------- */

.countdown { display: flex; align-items: baseline; gap: 12px; }
.countdown .n {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: clamp(46px, 14vw, 64px); line-height: 1;
  background: linear-gradient(100deg, var(--violet), var(--pearl));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.countdown .u { color: var(--muted); font-size: 14.5px; max-width: 14ch; line-height: 1.35; }

/* ---------------- week strip ---------------- */

.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.day {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 13px 8px; text-align: center;
}
.day.on {
  background: linear-gradient(150deg, rgba(139, 45, 143, .32), rgba(192, 79, 196, .1));
  border-color: rgba(192, 79, 196, .5);
}
.day .d {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.day.on .d { color: var(--violet); }
.day .w { font-size: 12.5px; color: var(--pearl); line-height: 1.35; font-weight: 500; }
.day.off .w { color: #5c5766; }

/* ---------------- plan reader ----------------
   Lifted from the workout template so the in-app view and the PDF
   stay one component rather than two that drift. */

.built { display: grid; gap: 12px; }
.built-row {
  background: var(--panel); border: 1px solid var(--line);
  border-left: 2px solid var(--violet);
  border-radius: 0 14px 14px 0; padding: 18px 20px;
}
.built-row .said {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 16.5px; color: var(--pearl); margin-bottom: 8px; line-height: 1.4;
}
.built-row .said::before { content: "\201C"; color: var(--violet); }
.built-row .said::after  { content: "\201D"; color: var(--violet); }
.built-row .so { font-size: 14.5px; color: var(--body); line-height: 1.6; }

.session {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 20px;
}
.session-head {
  padding: 20px 22px 18px; border-bottom: 1px solid var(--line);
  background: linear-gradient(140deg, rgba(139, 45, 143, .16), transparent 70%);
}
.session-head .when {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--violet); margin-bottom: 7px;
}
.session-head h3 { font-size: 23px; margin-bottom: 6px; }
.session-head .focus { font-size: 14px; color: var(--muted); line-height: 1.5; }

.session-note {
  padding: 16px 22px;
  background: rgba(139, 45, 143, .1);
  border-top: 1px solid rgba(192, 79, 196, .24);
  font-size: 14px; color: var(--body); line-height: 1.6;
}
.session-note b { color: var(--violet); font-weight: 600; }

table { width: 100%; border-collapse: collapse; }
thead th {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; color: var(--muted);
  text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line);
}
tbody td {
  padding: 14px; border-bottom: 1px solid var(--line-soft);
  vertical-align: top; font-size: 14.5px; color: var(--body);
}
tbody tr:last-child td { border-bottom: none; }

.ex      { color: var(--pearl); font-weight: 600; font-size: 15.5px; display: block; margin-bottom: 3px; }
.ex-note { font-size: 13px; color: var(--muted); line-height: 1.5; display: block; }
.num     { font-family: 'Fraunces', serif; font-size: 19px; color: var(--pearl); white-space: nowrap; }

th.n, td.n { width: 76px; text-align: center; }

/* ---------------- profile history ----------------
   Nothing is ever overwritten. */

.history { display: flex; flex-direction: column; gap: 10px; }
.history-item {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 15px 17px;
}
.history-when {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.history-val { font-size: 14.5px; color: var(--body); line-height: 1.6; }

.history-item.is-current    { border-left: 2px solid var(--violet); }
.history-item.is-current .history-when { color: var(--violet); }
.history-item.is-superseded { opacity: .62; }
.history-item.is-superseded .history-val { text-decoration: line-through; color: var(--faint); }

/* ---------------- data table ---------------- */

.table-scroll {
  overflow-x: auto; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel);
  -webkit-overflow-scrolling: touch;
}
.data-table { min-width: 660px; }
.data-table thead th { background: var(--glass); white-space: nowrap; }
.data-table td { white-space: nowrap; }
.data-table tbody tr { transition: background .18s ease; }
.data-table tbody tr:hover { background: var(--glass); }

.cell-name { color: var(--pearl); font-weight: 500; }
.cell-ref  {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: .08em; color: var(--muted);
}

/* ---------------- bottom tab bar ---------------- */

.tabbar {
  position: sticky; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(10, 10, 11, .92);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 11px 4px 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--faint); text-decoration: none;
  transition: color .18s ease;
}
.tabbar a .ico { font-size: 17px; line-height: 1; }
.tabbar a:hover { color: var(--muted); }
.tabbar a[aria-current="page"] { color: var(--violet); }

/* ---------------- responsive ---------------- */

@media (max-width: 640px) {
  :root { --gutter: 18px; }

  .alert-urgent { padding: 20px; }
  .countdown { flex-direction: column; align-items: flex-start; gap: 4px; }
  .countdown .u { max-width: none; }
  .actions { flex-wrap: wrap; }
  .actions .btn { flex: 1 1 auto; }

  /* exercise tables become cards, matching the plan template's own
     reflow, because these get read standing in a gym */
  .session thead { display: none; }
  .session tbody tr { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line-soft); }
  .session tbody td { display: inline-block; border: none; padding: 2px 14px 2px 0; }
  .session tbody td[data-k]::before {
    content: attr(data-k) " ";
    font-family: 'JetBrains Mono', monospace; font-size: 9px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); margin-right: 5px;
  }
  .session tbody td:first-child { display: block; padding-bottom: 8px; }
  .session th.n, .session td.n { width: auto; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}