:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-sm: clamp(0.8rem, 0.75rem + 0.3vw, 0.9rem);
  --fs-base: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
  --fs-lg: clamp(1.15rem, 1rem + 0.6vw, 1.35rem);
  --fs-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);

  --space-1: 0.35rem;
  --space-2: 0.6rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --radius: 0.6rem;
  --border: 1px;

  --bg: #ffffff;
  --surface: #f5f5f7;
  --surface-2: #ececef;
  --ink: #1b1b1f;
  --ink-muted: #5f5f6a;
  --line: #d8d8de;
  --accent: #2f6f4f;
  --accent-ink: #ffffff;
  --danger-surface: #fbe9e9;
  --danger-ink: #8a1f1f;
  --menu-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.15);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15151a;
    --surface: #1e1e25;
    --surface-2: #26262f;
    --ink: #ececf1;
    --ink-muted: #a2a2b0;
    --line: #34343f;
    --accent: #5bbd8a;
    --accent-ink: #10231a;
    --danger-surface: #3a1f1f;
    --danger-ink: #f1b4b4;
    --menu-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.5);
  }
}

* { box-sizing: border-box; }

/* The native hidden attribute must win over component display rules (e.g. a flex
   nav), so toggling [hidden] in JS reliably shows and hides. !important is
   deliberate here — it restores the attribute's intended behavior. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
}

.wrap {
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--space-3) var(--space-3) var(--space-4);
}

.center { text-align: center; color: var(--ink-muted); }
.muted { color: var(--ink-muted); }
.section-label {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin: var(--space-3) 0 var(--space-1);
}

h1 { font-size: var(--fs-lg); margin: 0; }
h2 { font-size: var(--fs-xl); margin: var(--space-1) 0; letter-spacing: -0.02em; }
h3 { font-size: var(--fs-lg); margin: var(--space-4) 0 var(--space-2); }
h4 { font-size: var(--fs-base); margin: var(--space-3) 0 var(--space-1); }

#topbar { border-bottom: var(--border) solid var(--line); background: var(--surface); }
#topbar .bar {
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
#topbar h1 { margin-right: auto; }

.chips { display: flex; gap: var(--space-1); }
.chip {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--fs-sm);
  text-decoration: none;
  cursor: pointer;
}

.card {
  display: block;
  padding: var(--space-3);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.card-list { display: grid; gap: var(--space-2); }

.client-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}
.client-card .avatar {
  grid-row: 1 / 3;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.client-card .client-name { font-weight: 600; }
.client-card .client-sub { font-size: var(--fs-sm); color: var(--ink-muted); }

.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.fact .k { font-size: var(--fs-sm); color: var(--ink-muted); }
.fact .v { font-weight: 600; }

.day { margin-top: var(--space-3); }
.exercise {
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  margin-bottom: var(--space-1);
  background: var(--surface);
}
.exercise > summary {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  list-style: none;
}
.exercise > summary::-webkit-details-marker { display: none; }
.exercise-body { padding: 0 var(--space-3) var(--space-2); }
.exercise-body .row { margin: var(--space-1) 0; }
.exercise-body .row .k {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  margin-right: var(--space-1);
}
.cue {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: var(--space-2);
  margin: var(--space-1) 0;
}

dl.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); margin: 0; }
dl.kv dt { color: var(--ink-muted); font-size: var(--fs-sm); }
dl.kv dd { margin: 0; }

.field-label { font-size: var(--fs-sm); color: var(--ink-muted); }

.sec-head { display: flex; align-items: baseline; gap: var(--space-2); }
.sec-head h3 { flex: 1; }

.inline-field { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-1) 0; }
.inline-field .field-label { flex: none; width: 6.5rem; }
.inline-value { flex: 1; min-width: 0; }
.inline-value.pre { white-space: pre-wrap; }
.inline-field.editing .inp { flex: 1 1 10rem; margin-bottom: 0; }

.save-bar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.inline-field .save-bar { width: 100%; padding-left: calc(6.5rem + var(--space-2)); }
.dirty-dot { color: var(--accent); font-size: var(--fs-sm); margin-right: auto; }

.identity { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.identity-text { flex: 1; min-width: 0; }
.avatar-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-1); flex: none; }
.avatar-lg {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
}
.avatar-lg.initials { display: grid; place-items: center; font-weight: 600; }

.editlink {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.editlink-icon { align-self: center; padding: var(--space-1); }
.editlink .icon { display: block; }

.photo-editor { position: relative; display: inline-flex; }
.photo-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  margin-top: var(--space-1);
  display: grid;
  gap: var(--space-1);
  min-width: 11rem;
  padding: var(--space-2);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--menu-shadow);
}
.menu-item { text-align: left; }
.photo-row { display: flex; gap: var(--space-2); }
.photo-row .inp { margin-bottom: 0; }
.photo-error { color: var(--danger-ink); margin: 0; }

.string-list { display: grid; gap: var(--space-2); }
.string-row { display: flex; gap: var(--space-2); }
.string-row .inp { margin-bottom: 0; }
.remove-row { flex: none; }
.add-row { justify-self: start; }
.save-error-text { color: var(--danger-ink); margin: var(--space-1) 0 0; }

.auth { min-height: 70vh; display: grid; place-items: center; }
.auth-card { width: 100%; max-width: 22rem; }
.inp {
  width: 100%;
  padding: var(--space-2);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  margin-bottom: var(--space-2);
}
.btn {
  padding: var(--space-2) var(--space-3);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); width: 100%; }

.errbox {
  background: var(--danger-surface);
  color: var(--danger-ink);
  border-radius: var(--radius);
  padding: var(--space-3);
}

@media (min-width: 32rem) {
  .facts { grid-template-columns: repeat(4, 1fr); }
}