* {
  box-sizing: border-box;
}

:root {
  --background: #f4f3ef;
  --surface: #ffffff;
  --surface-soft: #faf9f6;
  --text: #202020;
  --muted: #727272;
  --border: #e4e1da;
  --dark: #202020;
  --soft-dark: #353535;
  --success: #e8eee8;
  --accent-soft: #eceae4;
}


/* ---------------------------------------------------
   DOCUMENT
--------------------------------------------------- */

html,
body {
  margin: 0;
  padding: 0;

  width: 100%;
  max-width: 100%;
  min-height: 100%;

  overflow-x: hidden;
}

body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background: var(--background);
  color: var(--text);
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}


/* ---------------------------------------------------
   APP SHELL
--------------------------------------------------- */

.app-shell {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  min-height: 100vh;

  padding-bottom:
    calc(
      32px +
      env(safe-area-inset-bottom)
    );
}


/* ---------------------------------------------------
   TOP BAR
--------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  padding:
    calc(
      18px +
      env(safe-area-inset-top)
    )
    76px
    18px
    22px;

  background:
    rgba(
      244,
      243,
      239,
      0.94
    );

  border-bottom:
    1px solid
    rgba(
      0,
      0,
      0,
      0.05
    );

  position: sticky;

  top: 0;

  z-index: 20;

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);
}

.brand {
  font-size: 11px;

  letter-spacing: 2.4px;

  text-transform: uppercase;

  color: var(--muted);

  margin-bottom: 3px;
}

.topbar h1 {
  font-size: 24px;

  margin: 0;

  max-width: 100%;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* ---------------------------------------------------
   PAGE LAYOUT
--------------------------------------------------- */

main {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  padding: 22px;
}

.page {
  display: none;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.page.active {
  display: block;
}

.eyebrow {
  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 2px;

  color: var(--muted);
}

.section-heading {
  margin:
    30px 2px 14px;
}

.section-heading h2,
.section-heading h3 {
  margin:
    5px 0 0;
}


/* ---------------------------------------------------
   DASHBOARD
--------------------------------------------------- */

.welcome-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  background: var(--surface);

  padding: 26px;

  border-radius: 24px;

  box-shadow:
    0 8px 35px
    rgba(
      0,
      0,
      0,
      0.06
    );
}

.welcome-card h2 {
  margin:
    8px 0;

  font-size: 30px;
}

.welcome-card p {
  line-height: 1.55;

  color: var(--muted);

  margin-bottom: 22px;
}


/* ---------------------------------------------------
   BUTTONS
--------------------------------------------------- */

.primary-button,
.secondary-button {
  width: 100%;
  max-width: 100%;

  border: none;

  padding:
    16px 20px;

  border-radius: 14px;

  font-weight: 650;
  font-size: 16px;
}

.primary-button {
  background: var(--dark);

  color: white;
}

.primary-button:active {
  background: var(--soft-dark);
}

.secondary-button {
  background: #ebe9e3;

  color: var(--text);
}

.welcome-card
.secondary-button {
  margin-top: 10px;
}

.back-button {
  border: none;

  background: transparent;

  padding:
    4px 0 20px;

  color: var(--text);

  font-size: 15px;

  text-align: left;
}


/* ---------------------------------------------------
   DASHBOARD STATS
--------------------------------------------------- */

.stat-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 12px;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.stat-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  background: var(--surface);

  padding: 20px;

  border-radius: 18px;

  border:
    1px solid
    var(--border);
}

.stat-card-button {
  appearance: none;
  -webkit-appearance: none;

  color: var(--text);

  text-align: left;

  transition:
    transform .12s ease,
    background .12s ease,
    box-shadow .12s ease;
}

.stat-card-button:active {
  transform:
    scale(.98);

  background:
    var(--surface-soft);
}

.stat-number {
  font-size: 30px;

  font-weight: 700;
}

.stat-label {
  margin-top: 5px;

  color: var(--muted);

  font-size: 13px;
}


/* ---------------------------------------------------
   OPEN WORK
--------------------------------------------------- */

.open-work-list {
  display: flex;

  flex-direction: column;

  gap: 12px;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.open-work-empty {
  width: 100%;

  text-align: center;

  padding:
    30px 20px;

  color: var(--muted);

  border:
    1px dashed
    #d5d1c8;

  border-radius: 18px;

  background:
    rgba(
      255,
      255,
      255,
      .45
    );

  line-height: 1.5;
}

.open-work-client-group {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin-bottom: 8px;
}

.open-work-client-heading {
  display: flex;

  align-items: center;

  gap: 10px;

  margin:
    8px 2px 10px;
}

.open-work-client-avatar {
  width: 34px;
  height: 34px;

  min-width: 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background:
    var(--accent-soft);

  font-size: 12px;

  font-weight: 700;
}

.open-work-client-name {
  font-size: 15px;

  font-weight: 700;

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.open-work-card {
  display: flex;

  align-items: center;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  gap: 14px;

  padding: 16px;

  margin-bottom: 9px;

  background:
    var(--surface);

  color:
    var(--text);

  border:
    1px solid
    var(--border);

  border-radius: 16px;

  text-align: left;

  appearance: none;
  -webkit-appearance: none;
}

.open-work-card:active {
  background:
    var(--surface-soft);
}

.open-work-card-content {
  flex: 1;

  min-width: 0;
}

.open-work-tool {
  font-size: 14px;

  font-weight: 700;

  margin-bottom: 4px;
}

.open-work-meta {
  font-size: 12px;

  color: var(--muted);

  line-height: 1.4;
}


/* ---------------------------------------------------
   EMPTY STATE
--------------------------------------------------- */

.empty-state {
  text-align: center;

  background:
    rgba(
      255,
      255,
      255,
      0.55
    );

  border:
    1px dashed
    #d3d0c8;

  padding:
    30px 22px;

  border-radius: 20px;
}

.empty-state.spaced {
  margin-top: 18px;
}

.empty-icon {
  font-size: 30px;

  margin-bottom: 8px;
}

.empty-state h4 {
  margin:
    6px 0;
}

.empty-state p {
  color: var(--muted);

  line-height: 1.5;

  margin:
    6px auto 0;

  max-width: 300px;
}


/* ---------------------------------------------------
   CLIENT LIST
--------------------------------------------------- */

.client-list {
  display: flex;

  flex-direction: column;

  gap: 10px;
}

.client-list.spaced {
  margin-top: 18px;
}

.client-card {
  display: flex;

  align-items: center;

  gap: 14px;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  background: var(--surface);

  padding: 16px;

  border-radius: 16px;

  border:
    1px solid
    var(--border);
}

.client-card-button {
  width: 100%;

  text-align: left;

  color: inherit;

  appearance: none;
  -webkit-appearance: none;
}

.client-card-button:active {
  background:
    var(--surface-soft);
}

.client-avatar {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 44px;
  height: 44px;

  min-width: 44px;

  border-radius: 50%;

  background:
    var(--accent-soft);

  font-weight: 700;
}

.client-card-content {
  flex: 1;

  min-width: 0;
}

.client-card-content strong {
  display: block;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.client-status {
  font-size: 12px;

  color: var(--muted);

  margin-top: 3px;
}

.client-arrow {
  font-size: 20px;

  color: #aaa;

  flex:
    0 0 auto;
}


/* ---------------------------------------------------
   TOOLS
--------------------------------------------------- */

.phase-card {
  display: flex;

  gap: 18px;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  background: var(--surface);

  padding: 22px;

  margin-bottom: 14px;

  border-radius: 20px;

  border:
    1px solid
    var(--border);
}

.phase-number {
  font-size: 14px;

  color: #999;

  font-weight: 600;
}

.phase-card h3 {
  margin:
    5px 0 8px;
}

.phase-card p {
  margin: 0;

  color: var(--muted);

  line-height: 1.5;
}


/* ---------------------------------------------------
   APPLICATION HEADER
--------------------------------------------------- */

.application-header {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin-bottom: 20px;
}

.application-header h2 {
  font-size: 30px;

  margin:
    7px 0;
}

.application-header p {
  color: var(--muted);

  line-height: 1.55;
}


/* ---------------------------------------------------
   PROGRESS
--------------------------------------------------- */

.progress-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin-bottom: 22px;
}

.progress-info {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  width: 100%;

  margin-bottom: 8px;

  font-size: 12px;

  color: var(--muted);
}

.progress-track {
  height: 7px;

  width: 100%;

  background: #dedbd3;

  border-radius: 999px;

  overflow: hidden;
}

.progress-bar {
  height: 100%;

  width: 20%;

  background:
    var(--dark);

  border-radius: 999px;

  transition:
    width .25s ease;
}


/* ---------------------------------------------------
   APPLICATION STEPS
--------------------------------------------------- */

.application-step {
  display: none;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.application-step.active {
  display: block;
}


/* ---------------------------------------------------
   FRAMEWORK BANNERS
--------------------------------------------------- */

.framework-banner {
  display: flex;

  gap: 18px;

  align-items: flex-start;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  background:
    var(--dark);

  color:
    white;

  padding: 22px;

  border-radius: 20px;

  margin-bottom: 16px;
}

.framework-number {
  font-size: 15px;

  font-weight: 700;

  opacity: .7;

  flex:
    0 0 auto;
}

.framework-banner .eyebrow {
  color:
    rgba(
      255,
      255,
      255,
      .6
    );
}

.framework-banner h3 {
  margin:
    5px 0;

  font-size: 22px;
}

.framework-banner p {
  margin: 0;

  opacity: .75;

  line-height: 1.5;
}


/* ---------------------------------------------------
   FORMS
--------------------------------------------------- */

form {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.form-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  background:
    var(--surface);

  padding: 22px;

  border-radius: 20px;

  margin-bottom: 16px;

  border:
    1px solid
    var(--border);
}

.form-card h3 {
  margin:
    0 0 20px;

  font-size: 20px;
}

label {
  display: block;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  font-weight: 600;

  font-size: 14px;

  margin-bottom: 20px;

  line-height: 1.45;
}

input,
textarea,
select {
  display: block;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin-top: 8px;

  border:
    1px solid
    #d9d6cf;

  border-radius: 12px;

  padding: 14px;

  background:
    var(--surface-soft);

  color:
    var(--text);

  outline: none;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #888;

  background:
    white;
}

textarea {
  resize: vertical;

  min-height: 120px;
}

select {
  appearance: none;
  -webkit-appearance: none;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      #777 50%
    ),
    linear-gradient(
      135deg,
      #777 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;

  background-size:
    5px 5px,
    5px 5px;

  background-repeat:
    no-repeat;
}

.field-description {
  font-size: 14px;

  color:
    var(--muted);

  line-height: 1.5;

  margin:
    -5px 0 16px;
}

.subheading {
  margin:
    26px 0 12px;

  font-size: 13px;

  font-weight: 700;

  text-transform:
    uppercase;

  letter-spacing:
    1.2px;

  color:
    var(--muted);
}


/* ---------------------------------------------------
   IOS DATE INPUT FIX
--------------------------------------------------- */

input[type="date"] {
  display: block;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  box-sizing:
    border-box;

  padding: 14px;

  border:
    1px solid
    #d9d6cf;

  border-radius: 12px;

  background:
    var(--surface-soft);

  color:
    var(--text);

  font: inherit;

  -webkit-appearance: none;
  appearance: none;
}

input[type="date"]
::-webkit-date-and-time-value {
  text-align: left;

  min-width: 0;
}

input[type="date"]
::-webkit-calendar-picker-indicator {
  margin: 0;
}


/* ---------------------------------------------------
   CHOICE CARDS
--------------------------------------------------- */

.choice-grid {
  display: grid;

  grid-template-columns:
    1fr;

  gap: 10px;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin-bottom: 22px;
}

.choice-card {
  display: flex;

  align-items: center;

  gap: 12px;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin: 0;

  padding:
    14px 15px;

  background:
    var(--surface-soft);

  border:
    1px solid
    var(--border);

  border-radius: 14px;

  font-weight: 550;
}

.choice-card input {
  width: 20px;
  height: 20px;

  min-width: 20px;

  margin: 0;

  flex:
    0 0 auto;

  accent-color:
    var(--dark);
}

.choice-card span {
  flex: 1;

  min-width: 0;
}


/* ---------------------------------------------------
   RATING SCALES
--------------------------------------------------- */

.scale-question {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin-bottom: 30px;

  overflow: hidden;
}

.scale-question > label {
  margin-bottom: 12px;
}

.rating-scale {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );

  width: 100%;
  max-width: 100%;
  min-width: 0;

  gap: 8px;

  overflow: hidden;
}

.rating-scale label {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;
}

.rating-scale input {
  position: absolute;

  width: 1px;
  height: 1px;

  margin: 0;
  padding: 0;

  border: 0;

  opacity: 0;

  overflow: hidden;
}

.rating-scale span {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  height: 58px;

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid
    #d8d5ce;

  border-radius: 12px;

  background:
    var(--surface-soft);

  font-weight: 650;
}

.rating-scale
input:checked + span {
  background:
    var(--dark);

  color: white;

  border-color:
    var(--dark);
}

.scale-labels {
  display: flex;

  justify-content:
    space-between;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin-top: 7px;

  font-size: 11px;

  color:
    var(--muted);
}


/* ---------------------------------------------------
   NOTICE
--------------------------------------------------- */

.notice-card {
  width: 100%;
  max-width: 100%;

  background:
    #ebeae6;

  color:
    #666;

  padding: 18px;

  border-radius: 16px;

  line-height: 1.5;

  font-size: 12px;

  margin-bottom: 20px;
}


/* ---------------------------------------------------
   FORM NAVIGATION
--------------------------------------------------- */

.form-navigation {
  display: flex;

  flex-direction: column;

  gap: 10px;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin-top: 20px;
}


/* ---------------------------------------------------
   CLIENT HUB
--------------------------------------------------- */

.client-hub-header {
  display: flex;

  align-items: center;

  gap: 16px;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin-bottom: 20px;
}

.client-hub-header-text {
  min-width: 0;
}

.client-hub-header h2 {
  margin:
    4px 0 3px;

  font-size: 28px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.client-hub-status {
  font-size: 12px;

  color:
    var(--muted);
}

.client-hub-summary {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 12px;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.client-date {
  margin-top: 10px;

  font-size: 16px;

  font-weight: 650;

  line-height: 1.3;
}

.client-hub-tools {
  display: flex;

  flex-direction: column;

  gap: 10px;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.hub-tool-card {
  display: flex;

  align-items: center;

  gap: 14px;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  padding: 16px;

  border:
    1px solid
    var(--border);

  border-radius: 18px;

  background:
    var(--surface);

  color:
    var(--text);

  text-align: left;

  appearance: none;
  -webkit-appearance: none;
}

.hub-tool-card:active {
  background:
    var(--surface-soft);
}

.hub-tool-icon {
  width: 44px;
  height: 44px;

  min-width: 44px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 14px;

  background:
    var(--accent-soft);

  font-size: 20px;
}

.hub-tool-content {
  flex: 1;

  min-width: 0;
}

.hub-tool-title {
  font-size: 16px;

  font-weight: 700;

  margin-bottom: 4px;
}

.hub-tool-description {
  font-size: 12px;

  color:
    var(--muted);

  line-height: 1.45;
}

.future-tool-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 10px;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.future-tool-card {
  display: flex;

  align-items: center;

  min-height: 82px;

  min-width: 0;

  padding: 15px;

  background:
    rgba(
      255,
      255,
      255,
      .6
    );

  border:
    1px dashed
    #d5d1c8;

  border-radius: 16px;

  color:
    #777;

  font-size: 13px;

  font-weight: 600;
}

.active-tool-card {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 12px;

  text-align: left;

  color:
    var(--text);

  background:
    var(--surface);

  border:
    1px solid
    var(--border);

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
}

.active-tool-card:active {
  background:
    var(--surface-soft);
}

.active-tool-card strong {
  display: block;

  font-size: 13px;

  margin-bottom: 5px;
}

.active-tool-card span {
  display: block;

  font-size: 11px;

  color:
    var(--muted);

  font-weight: 400;
}


/* ---------------------------------------------------
   DANGER BUTTON
--------------------------------------------------- */

.danger-button {
  width: 100%;
  max-width: 100%;

  margin-top: 10px;

  border:
    1px solid
    #d8b9b9;

  background:
    #fff7f7;

  color:
    #8f2f2f;

  padding:
    16px 20px;

  border-radius: 14px;

  font-weight: 650;

  font-size: 16px;
}


/* ---------------------------------------------------
   LIFE STEWARDSHIP PLAN
--------------------------------------------------- */

.stewardship-step {
  display: none;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.stewardship-step.active {
  display: block;
}

#lifeStewardshipForm,
#lifeStewardshipPage {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}


/* ---------------------------------------------------
   WALK MAP
--------------------------------------------------- */

.walk-map-intro {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  background:
    var(--surface);

  border:
    1px solid
    var(--border);

  border-radius: 18px;

  padding: 18px;

  margin-bottom: 14px;
}

.walk-map-intro p {
  margin:
    8px 0 0;

  color:
    var(--muted);

  line-height: 1.5;
}

.walk-map-history {
  display: flex;

  flex-direction: column;

  gap: 10px;
}

.walk-map-empty {
  text-align: center;

  padding:
    28px 20px;

  color:
    var(--muted);

  border:
    1px dashed
    #d5d1c8;

  border-radius: 16px;
}

.walk-map-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 16px;

  background:
    var(--surface);

  border:
    1px solid
    var(--border);

  border-radius: 16px;

  text-align: left;

  color:
    var(--text);

  appearance: none;
  -webkit-appearance: none;
}

.walk-map-card:active {
  background:
    var(--surface-soft);
}

.walk-map-card-content {
  flex: 1;

  min-width: 0;
}

.walk-map-card-date {
  margin-bottom: 4px;

  font-size: 10px;

  color:
    var(--muted);

  text-transform:
    uppercase;

  letter-spacing:
    1.1px;
}

.walk-map-card-title {
  font-weight: 700;

  margin-bottom: 4px;
}

.walk-map-card-summary {
  font-size: 12px;

  color:
    var(--muted);

  line-height: 1.4;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.walk-step {
  display: none;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.walk-step.active {
  display: block;
}

#walkMapForm,
#walkMapPage,
#walkMapMomentPage {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}


/* ---------------------------------------------------
   SPIRITUAL FRUIT INDEX
--------------------------------------------------- */

.fruit-current-summary {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.fruit-summary-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 12px;

  margin-bottom: 12px;
}

.fruit-assessment-history {
  display: flex;

  flex-direction: column;

  gap: 10px;
}

.fruit-assessment-empty {
  text-align: center;

  padding:
    28px 20px;

  color:
    var(--muted);

  border:
    1px dashed
    #d5d1c8;

  border-radius: 16px;
}

.fruit-assessment-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 16px;

  background:
    var(--surface);

  border:
    1px solid
    var(--border);

  border-radius: 16px;

  text-align: left;

  color:
    var(--text);

  appearance: none;
  -webkit-appearance: none;
}

.fruit-assessment-card:active {
  background:
    var(--surface-soft);
}

.fruit-assessment-card-content {
  flex: 1;

  min-width: 0;
}

.fruit-assessment-date {
  margin-bottom: 4px;

  font-size: 10px;

  color:
    var(--muted);

  text-transform:
    uppercase;

  letter-spacing:
    1.1px;
}

.fruit-assessment-title {
  font-weight: 700;

  margin-bottom: 4px;
}

.fruit-assessment-summary {
  font-size: 12px;

  color:
    var(--muted);

  line-height: 1.4;
}

.fruit-step {
  display: none;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.fruit-step.active {
  display: block;
}

#fruitAssessmentForm,
#spiritualFruitPage,
#fruitAssessmentPage {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.fruit-scale-help {
  margin:
    0 0 20px;

  color:
    var(--muted);

  font-size: 12px;

  line-height: 1.5;
}

.fruit-rating-list {
  display: flex;

  flex-direction: column;

  gap: 22px;
}

.fruit-rating-item {
  width: 100%;
  min-width: 0;
}

.fruit-rating-heading {
  margin-bottom: 10px;
}

.fruit-rating-heading strong {
  display: block;

  margin-bottom: 3px;

  font-size: 15px;
}

.fruit-rating-heading span {
  display: block;

  color:
    var(--muted);

  font-size: 12px;

  line-height: 1.4;
}

.fruit-rating-scale {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );

  gap: 7px;

  width: 100%;
  min-width: 0;
}

.fruit-rating-button {
  min-width: 0;

  height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid
    #d8d5ce;

  border-radius: 11px;

  background:
    var(--surface-soft);

  color:
    var(--text);

  font-size: 13px;

  font-weight: 650;
}

.fruit-rating-button.selected {
  background:
    var(--dark);

  color:
    white;

  border-color:
    var(--dark);
}


/* ---------------------------------------------------
   ROOT MAPS
--------------------------------------------------- */

.root-map-history {
  display: flex;

  flex-direction: column;

  gap: 10px;
}

.root-map-empty {
  text-align: center;

  padding:
    28px 20px;

  color:
    var(--muted);

  border:
    1px dashed
    #d5d1c8;

  border-radius: 16px;
}

.root-map-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 16px;

  background:
    var(--surface);

  border:
    1px solid
    var(--border);

  border-radius: 16px;

  text-align: left;

  color:
    var(--text);

  appearance: none;
  -webkit-appearance: none;
}

.root-map-card:active {
  background:
    var(--surface-soft);
}

.root-map-card-content {
  flex: 1;

  min-width: 0;
}

.root-map-card-date {
  margin-bottom: 4px;

  font-size: 10px;

  color:
    var(--muted);

  text-transform:
    uppercase;

  letter-spacing:
    1.1px;
}

.root-map-card-title {
  font-weight: 700;

  margin-bottom: 4px;
}

.root-map-card-summary {
  font-size: 12px;

  color:
    var(--muted);

  line-height: 1.4;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.root-step {
  display: none;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.root-step.active {
  display: block;
}

#rootMapForm,
#rootMapsPage,
#rootMapDetailPage {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}


/* ---------------------------------------------------
   SESSION NOTES
--------------------------------------------------- */

.session-history {
  display: flex;

  flex-direction: column;

  gap: 10px;
}

.session-card {
  width: 100%;

  background:
    var(--surface);

  border:
    1px solid
    var(--border);

  border-radius: 16px;

  padding: 16px;
}

.session-card-date {
  font-size: 11px;

  color:
    var(--muted);

  text-transform:
    uppercase;

  letter-spacing:
    1px;

  margin-bottom: 8px;
}

.session-card-title {
  font-weight: 700;

  margin-bottom: 6px;
}

.session-card-text {
  font-size: 14px;

  line-height: 1.5;

  white-space:
    pre-wrap;
}

.session-empty {
  text-align: center;

  padding: 24px;

  color:
    var(--muted);

  font-size: 13px;

  border:
    1px dashed
    #d5d1c8;

  border-radius: 16px;
}


/* ---------------------------------------------------
   COACH REPORT
--------------------------------------------------- */

.client-report-header {
  display: flex;

  align-items: center;

  gap: 16px;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin-bottom: 20px;
}

.client-report-avatar {
  width: 62px;
  height: 62px;

  min-width: 62px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background:
    var(--dark);

  color:
    white;

  font-size: 22px;

  font-weight: 700;
}

.client-report-header-text {
  min-width: 0;
}

.client-report-header h2 {
  margin:
    4px 0 3px;

  font-size: 28px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.report-status {
  font-size: 12px;

  color:
    var(--muted);
}


/* REPORT SUMMARY */

.report-summary-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 12px;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin-bottom: 12px;
}

.report-summary-card {
  min-width: 0;

  background:
    var(--surface);

  border:
    1px solid
    var(--border);

  border-radius: 18px;

  padding: 18px;
}

.summary-label {
  font-size: 11px;

  text-transform:
    uppercase;

  letter-spacing:
    1.4px;

  color:
    var(--muted);
}

.readiness-number {
  margin-top: 8px;

  font-size: 30px;

  font-weight: 700;
}

.summary-small {
  margin-top: 2px;

  font-size: 11px;

  color:
    var(--muted);
}


/* REPORT THEMES */

.report-theme-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  background:
    var(--surface);

  border:
    1px solid
    var(--border);

  border-radius: 18px;

  padding: 18px;

  margin-bottom: 18px;
}

.theme-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 12px;
}

.theme-tag {
  background:
    var(--accent-soft);

  border-radius: 999px;

  padding:
    8px 11px;

  font-size: 12px;

  font-weight: 600;
}


/* REPORT SECTIONS */

.report-sections {
  display: flex;

  flex-direction: column;

  gap: 10px;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.report-section {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  background:
    var(--surface);

  border:
    1px solid
    var(--border);

  border-radius: 18px;

  overflow: hidden;
}

.featured-report-section {
  border-color:
    #cbc7bd;
}

.report-section-toggle {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 15px;

  border: none;

  background:
    transparent;

  color:
    var(--text);

  text-align: left;

  padding: 18px;
}

.report-section-kicker {
  font-size: 10px;

  text-transform:
    uppercase;

  letter-spacing:
    1.5px;

  color:
    var(--muted);

  margin-bottom: 4px;
}

.report-section-title {
  font-size: 17px;

  font-weight: 700;
}

.report-chevron {
  color:
    #999;

  font-size: 26px;

  transform:
    rotate(0deg);

  transition:
    transform .2s ease;
}

.report-section.open
.report-chevron {
  transform:
    rotate(90deg);
}

.report-section-content {
  display: none;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  padding:
    0 18px 20px;
}

.report-section.open
.report-section-content {
  display: block;
}


/* REPORT CONTENT */

.report-subheading {
  margin:
    14px 0 16px;

  font-size: 11px;

  text-transform:
    uppercase;

  letter-spacing:
    1.6px;

  color:
    var(--muted);

  font-weight: 700;
}

.report-answer-group {
  margin-bottom: 20px;
}

.report-question {
  margin-bottom: 6px;

  font-size: 12px;

  font-weight: 700;

  color:
    #565656;
}

.report-answer {
  line-height: 1.55;

  font-size: 15px;

  white-space:
    pre-wrap;
}

.report-answer.empty-answer {
  color:
    #999;

  font-style:
    italic;
}


/* COACH INSIGHT */

.coach-insight {
  background:
    #f0efea;

  border-radius: 14px;

  padding: 16px;

  line-height: 1.55;

  font-size: 14px;

  margin-top: 20px;
}

.coach-insight-label {
  margin-bottom: 8px;

  font-size: 10px;

  text-transform:
    uppercase;

  letter-spacing:
    1.5px;

  color:
    var(--muted);

  font-weight: 700;
}


/* READINESS */

.readiness-breakdown {
  display: flex;

  flex-direction: column;

  gap: 12px;

  margin-bottom: 24px;
}

.readiness-row {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 12px;

  align-items: center;
}

.readiness-row-label {
  font-size: 13px;
}

.readiness-score {
  min-width: 54px;

  text-align: center;

  background:
    var(--accent-soft);

  border-radius: 10px;

  padding:
    7px 9px;

  font-size: 12px;

  font-weight: 700;
}


/* REPORT PRIORITIES */

.priority-list,
.question-list {
  display: flex;

  flex-direction: column;

  gap: 10px;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.priority-item,
.first-question-item {
  display: flex;

  gap: 12px;

  background:
    var(--surface-soft);

  border:
    1px solid
    var(--border);

  border-radius: 14px;

  padding: 14px;
}

.priority-number,
.question-number {
  width: 26px;
  height: 26px;

  min-width: 26px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background:
    var(--dark);

  color:
    white;

  font-size: 11px;

  font-weight: 700;
}

.priority-text,
.question-text {
  min-width: 0;

  line-height: 1.5;

  font-size: 14px;
}


/* FORMAL REPORT */

.formal-report-actions {
  margin-top: 30px;
}

.formal-report-actions
.section-heading {
  margin-top: 0;
}

.report-actions {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 10px;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin-bottom: 16px;
}

.coach-report {
  background:
    var(--surface);

  border:
    1px solid
    var(--border);

  border-radius: 20px;

  padding: 22px;

  line-height: 1.65;

  white-space:
    pre-wrap;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 15px;

  box-shadow:
    0 7px 25px
    rgba(
      0,
      0,
      0,
      .04
    );
}


/* ---------------------------------------------------
   MOBILE MENU
--------------------------------------------------- */

.bottom-nav,
nav.bottom-nav {
  display:
    none !important;
}

.menu-button {
  position: fixed;

  top:
    calc(
      env(safe-area-inset-top) +
      12px
    );

  right: 14px;

  left: auto;

  z-index: 1000;

  width: 44px;
  height: 44px;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid
    var(--border);

  border-radius: 13px;

  background:
    rgba(
      255,
      255,
      255,
      .94
    );

  color:
    var(--text);

  font-size: 22px;

  box-shadow:
    0 4px 18px
    rgba(
      0,
      0,
      0,
      .08
    );

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);
}

.menu-button:active {
  transform:
    scale(.96);
}

.menu-overlay {
  position: fixed;

  inset: 0;

  z-index: 1090;

  background:
    rgba(
      0,
      0,
      0,
      .28
    );

  opacity: 0;

  pointer-events: none;

  transition:
    opacity .2s ease;
}

.menu-overlay.open {
  opacity: 1;

  pointer-events: auto;
}

.mobile-menu {
  position: fixed;

  top: 0;
  left: 0;
  bottom: 0;

  z-index: 1100;

  width:
    min(
      82vw,
      320px
    );

  max-width: 100%;

  padding:
    calc(
      env(safe-area-inset-top) +
      20px
    )
    18px
    calc(
      24px +
      env(safe-area-inset-bottom)
    );

  background:
    var(--surface);

  box-shadow:
    12px 0 35px
    rgba(
      0,
      0,
      0,
      .15
    );

  transform:
    translateX(-105%);

  transition:
    transform .22s ease;

  overflow-y: auto;

  -webkit-overflow-scrolling:
    touch;
}

.mobile-menu.open {
  transform:
    translateX(0);
}

.mobile-menu-header {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 12px;

  padding-bottom: 18px;

  margin-bottom: 12px;

  border-bottom:
    1px solid
    var(--border);
}

.menu-close-button {
  width: 40px;
  height: 40px;

  border: 0;

  background:
    transparent;

  color:
    var(--text);

  font-size: 30px;
}

.mobile-menu-item {
  display: block;

  width: 100%;

  padding:
    15px 12px;

  border: 0;

  border-radius: 12px;

  background:
    transparent;

  color:
    var(--text);

  text-align: left;

  font: inherit;

  font-weight: 650;
}

.mobile-menu-item:active {
  background:
    var(--surface-soft);
}


/* ---------------------------------------------------
   GLOBAL IOS WIDTH SAFETY
--------------------------------------------------- */

.app-shell,
main,
.page,
form,
.application-step,
.stewardship-step,
.walk-step,
.fruit-step,
.root-step,
.form-card,
.framework-banner,
.progress-wrap,
.application-header,
.client-hub-header,
.client-hub-summary,
.client-hub-tools,
.future-tool-grid,
.client-report-header,
.report-summary-grid,
.report-theme-card,
.report-section,
.report-section-toggle,
.report-section-content,
.priority-list,
.question-list,
.walk-map-intro,
.walk-map-history,
.fruit-assessment-history,
.root-map-history,
.open-work-list {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

input,
textarea,
select,
button {
  max-width: 100%;
}


/* ---------------------------------------------------
   SMALLER PHONES
--------------------------------------------------- */

@media
(max-width: 370px) {

  main {
    padding: 18px;
  }

  .topbar {
    padding-left: 18px;

    padding-right: 72px;
  }

  .welcome-card,
  .form-card {
    padding: 20px;
  }

  .application-header h2 {
    font-size: 27px;
  }

  .future-tool-grid {
    grid-template-columns:
      1fr;
  }

}


/* ---------------------------------------------------
   LARGER PHONES / TABLETS
--------------------------------------------------- */

@media
(min-width: 700px) {

  main {
    width: 100%;

    max-width: 760px;

    margin-left: auto;

    margin-right: auto;
  }

  .choice-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


/* =========================================================
   ALIGNMENT MAP
 ========================================================= */

.alignment-step {
  display: none;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.alignment-step.active {
  display: block;
}


/* Alignment Map page safety */

#alignmentMapPage,
#alignmentMapDetailPage,
#alignmentMapForm {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}


/* Intro card matches Walk Map */

#alignmentMapPage .tool-introduction {
  background: var(--surface);

  border:
    1px solid var(--border);

  border-radius: 18px;

  padding: 18px;

  margin-bottom: 14px;
}

#alignmentMapPage .tool-introduction h3 {
  margin:
    0 0 8px;

  font-size: 18px;
}

#alignmentMapPage .tool-introduction p {
  margin:
    8px 0 0;

  color: var(--muted);

  line-height: 1.5;
}


/* History */

#alignmentMapHistory {
  display: flex;

  flex-direction: column;

  gap: 10px;
}

.alignment-map-empty {
  text-align: center;

  padding: 28px 20px;

  color: var(--muted);

  border:
    1px dashed #d5d1c8;

  border-radius: 16px;
}


/* Saved map cards match Walk Map cards */

.alignment-history-card {
  width: 100%;

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 16px;

  background: var(--surface);

  border:
    1px solid var(--border);

  border-radius: 16px;

  text-align: left;

  color: var(--text);
}

.alignment-history-card-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  width: 100%;
}

.alignment-history-card-header > div:first-child {
  flex: 1;

  min-width: 0;
}

.alignment-history-card h4 {
  margin:
    0 0 4px;

  font-size: 14px;

  font-weight: 700;
}

.alignment-history-card p {
  margin: 0;

  color: var(--muted);

  font-size: 12px;

  line-height: 1.4;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.alignment-history-date {
  font-size: 10px;

  color: var(--muted);

  text-transform: uppercase;

  letter-spacing: 1.1px;

  flex-shrink: 0;
}


/* Use existing app progress design */

#alignmentMapDetailPage .form-progress {
  margin-bottom: 22px;
}

#alignmentMapDetailPage .progress-track {
  height: 7px;

  width: 100%;

  background: #dedbd3;

  border-radius: 999px;

  overflow: hidden;
}

#alignmentMapDetailPage .progress-fill {
  height: 100%;

  width: 20%;

  background: var(--dark);

  border-radius: 999px;

  transition:
    width 0.25s ease;
}

#alignmentMapDetailPage .progress-meta {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  margin-top: 8px;

  font-size: 12px;

  color: var(--muted);
}


/* Step heading becomes dark framework banner */

#alignmentMapDetailPage .form-section-heading {
  background: var(--dark);

  color: white;

  padding: 22px;

  border-radius: 20px;

  margin-bottom: 16px;
}

#alignmentMapDetailPage
.form-section-heading
.eyebrow {
  color:
    rgba(255,255,255,.6);
}

#alignmentMapDetailPage
.form-section-heading
h3 {
  margin:
    5px 0 5px;

  font-size: 22px;
}

#alignmentMapDetailPage
.form-section-heading
p {
  margin: 0;

  color: white;

  opacity: .75;

  line-height: 1.5;
}


/* Each step gets the same white form card feel */

#alignmentMapDetailPage
.alignment-step {
  background: var(--surface);

  padding: 22px;

  border-radius: 20px;

  margin-bottom: 16px;

  border:
    1px solid var(--border);
}


/* But banner should visually sit outside white card */

#alignmentMapDetailPage
.alignment-step
.form-section-heading {
  margin:
    -22px
    -22px
    22px;
}


/* Form controls match rest of app */

#alignmentMapForm label {
  display: block;

  font-weight: 600;

  font-size: 14px;

  margin-bottom: 20px;

  line-height: 1.45;
}

#alignmentMapForm textarea,
#alignmentMapForm input {
  display: block;

  width: 100%;

  max-width: 100%;

  min-width: 0;

  margin-top: 8px;

  border:
    1px solid #d9d6cf;

  border-radius: 12px;

  padding: 14px;

  background: var(--surface-soft);

  color: var(--text);

  outline: none;
}

#alignmentMapForm textarea {
  resize: vertical;

  min-height: 120px;
}

#alignmentMapForm textarea:focus,
#alignmentMapForm input:focus {
  border-color: #888;

  background: white;
}


/* Navigation matches other tools */

#alignmentMapDetailPage
.form-navigation {
  display: flex;

  flex-direction: column;

  gap: 10px;

  margin-top: 20px;
}


/* ===================================================
   RULE OF ALIGNMENT
=================================================== */

.rule-step {
  display: none;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.rule-step.active {
  display: block;
}


/* Page width safety */

#ruleOfAlignmentPage,
#ruleOfAlignmentDetailPage,
#ruleOfAlignmentForm {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}


/* History */

#ruleOfAlignmentHistory {
  display: flex;
  flex-direction: column;

  gap: 10px;
}


/* Empty state */

.rule-alignment-empty {
  text-align: center;

  padding: 28px 20px;

  color: var(--muted);

  border:
    1px dashed #d5d1c8;

  border-radius: 16px;
}


/* Saved rule cards */

.rule-alignment-card {
  width: 100%;

  display: flex;
  align-items: center;

  gap: 14px;

  padding: 16px;

  background: var(--surface);

  border:
    1px solid var(--border);

  border-radius: 16px;

  text-align: left;

  color: var(--text);
}

.rule-alignment-card-content {
  flex: 1;
  min-width: 0;
}

.rule-alignment-card-date {
  margin-bottom: 4px;

  font-size: 10px;

  color: var(--muted);

  text-transform: uppercase;

  letter-spacing: 1.1px;
}

.rule-alignment-card-title {
  margin-bottom: 4px;

  font-weight: 700;
}

.rule-alignment-card-summary {
  font-size: 12px;

  color: var(--muted);

  line-height: 1.4;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}


/* ===================================================
   SESSION NOTES — SEARCHABLE HISTORY
=================================================== */

#sessionNotesPage,
#sessionNoteDetailPage,
#sessionNoteForm {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}


/* ---------------------------------------------------
   SEARCH
--------------------------------------------------- */

.session-search-card {
  width: 100%;

  margin-top: 16px;

  padding: 16px;

  background: var(--surface);

  border:
    1px solid var(--border);

  border-radius: 18px;
}

.session-search-label {
  margin-bottom: 8px;

  font-size: 12px;
  font-weight: 700;

  color: var(--muted);

  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.session-search-row {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr) auto;

  gap: 8px;

  align-items: center;
}

.session-search-row input {
  margin-top: 0;
}

.session-search-clear {
  min-height: 48px;

  padding:
    0 14px;

  border:
    1px solid var(--border);

  border-radius: 12px;

  background:
    var(--surface-soft);

  color:
    var(--text);

  font-size: 13px;
  font-weight: 650;
}

.session-search-status {
  min-height: 18px;

  margin-top: 8px;

  color:
    var(--muted);

  font-size: 11px;

  line-height: 1.4;
}


/* ---------------------------------------------------
   SESSION HISTORY
--------------------------------------------------- */

.session-history {
  display: flex;

  flex-direction: column;

  gap: 10px;
}


/* Empty state */

.session-empty {
  text-align: center;

  padding:
    28px 20px;

  color:
    var(--muted);

  border:
    1px dashed #d5d1c8;

  border-radius:
    16px;
}


/* Clickable session card */

.session-card {
  width: 100%;

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 16px;

  background:
    var(--surface);

  border:
    1px solid var(--border);

  border-radius:
    16px;

  color:
    var(--text);

  text-align: left;
}

button.session-card {
  appearance: none;
  -webkit-appearance: none;
}

.session-card-content {
  flex: 1;

  min-width: 0;
}

.session-card-date {
  margin-bottom: 4px;

  font-size: 10px;

  color:
    var(--muted);

  text-transform:
    uppercase;

  letter-spacing:
    1.1px;
}

.session-card-title {
  margin-bottom: 4px;

  font-size: 15px;

  font-weight: 700;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.session-card-summary {
  color:
    var(--muted);

  font-size: 12px;

  line-height: 1.4;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.session-card-meta {
  margin-top: 6px;

  color:
    var(--muted);

  font-size: 10px;

  line-height: 1.4;
}


/* Draft distinction */

.session-card-draft {
  border-style: dashed;
}


/* ---------------------------------------------------
   SESSION DETAIL
--------------------------------------------------- */

#sessionNoteDetailPage
.framework-banner {
  width: 100%;

  max-width: 100%;

  min-width: 0;
}

#sessionNoteDetailPage
.form-card {
  width: 100%;

  max-width: 100%;

  min-width: 0;
}


/* Save status */

#sessionSaveStatus {
  margin-left: auto;
}


/* ---------------------------------------------------
   SMALL PHONE SAFETY
--------------------------------------------------- */

@media (max-width: 370px) {

  .session-search-row {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .session-search-clear {
    width: 100%;
  }

}

/* ---------------------------------------------------
   GROWTH CHART
--------------------------------------------------- */

#growthChartPage,
#growthAssessmentPage,
#growthAssessmentForm {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}


/* ---------------------------------------------------
   GROWTH SUMMARY
--------------------------------------------------- */

.growth-current-summary {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.growth-summary-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 12px;

  margin-bottom: 18px;
}

.growth-summary-grid
.report-summary-card {
  min-width: 0;
}

.growth-fruit-summary-card {
  grid-column:
    1 / -1;
}

.growth-summary-number {
  margin-top: 8px;

  font-size: 30px;
  font-weight: 700;

  line-height: 1;
}


/* ---------------------------------------------------
   GROWTH CHART CARD
--------------------------------------------------- */

.growth-chart-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  background:
    var(--surface);

  border:
    1px solid var(--border);

  border-radius: 20px;

  padding: 18px;

  margin-bottom: 20px;

  overflow: hidden;
}

.growth-chart-header {
  margin-bottom: 14px;
}

.growth-chart-header h3 {
  margin:
    5px 0 0;

  font-size: 20px;
}


/* ---------------------------------------------------
   GROWTH CHART TABS
--------------------------------------------------- */

.growth-chart-tabs {
  display: flex;

  gap: 8px;

  width: 100%;

  overflow-x: auto;

  padding-bottom: 4px;

  margin-bottom: 16px;

  -webkit-overflow-scrolling:
    touch;

  scrollbar-width: none;
}

.growth-chart-tabs::-webkit-scrollbar {
  display: none;
}

.growth-chart-tab {
  flex:
    0 0 auto;

  border:
    1px solid var(--border);

  border-radius: 999px;

  background:
    var(--surface-soft);

  color:
    var(--muted);

  padding:
    9px 13px;

  font-size: 12px;
  font-weight: 650;
}

.growth-chart-tab.active {
  background:
    var(--dark);

  border-color:
    var(--dark);

  color:
    white;
}


/* ---------------------------------------------------
   CHART AREA
--------------------------------------------------- */

.growth-chart-scroll {
  width: 100%;
  max-width: 100%;

  overflow-x: auto;

  -webkit-overflow-scrolling:
    touch;
}

.growth-chart {
  position: relative;

  width: 100%;
  min-width: 520px;

  min-height: 290px;

  border:
    1px solid var(--border);

  border-radius: 16px;

  background:
    var(--surface-soft);

  overflow: hidden;
}


/*
  These classes are ready for the JavaScript
  renderer that comes next.
*/

.growth-chart-grid-line {
  position: absolute;

  left: 0;
  right: 0;

  height: 1px;

  background:
    rgba(0,0,0,.07);
}

.growth-chart-zero-line {
  position: absolute;

  left: 0;
  right: 0;

  height: 1px;

  background:
    rgba(0,0,0,.22);
}

.growth-chart-axis-label {
  position: absolute;

  left: 8px;

  transform:
    translateY(-50%);

  color:
    var(--muted);

  font-size: 10px;
}

.growth-chart-date-label {
  position: absolute;

  bottom: 8px;

  transform:
    translateX(-50%);

  color:
    var(--muted);

  font-size: 10px;

  white-space: nowrap;
}

.growth-chart-point {
  position: absolute;

  width: 11px;
  height: 11px;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    var(--dark);

  border:
    2px solid white;

  box-shadow:
    0 1px 4px
    rgba(0,0,0,.18);
}

.growth-chart-line {
  position: absolute;

  height: 2px;

  transform-origin:
    left center;

  background:
    var(--dark);
}


/* ---------------------------------------------------
   CHART LEGEND
--------------------------------------------------- */

.growth-chart-legend {
  display: flex;
  flex-wrap: wrap;

  gap:
    8px 14px;

  margin-top: 14px;
}

.growth-legend-item {
  display: flex;
  align-items: center;

  gap: 7px;

  color:
    var(--muted);

  font-size: 11px;
}

.growth-legend-mark {
  width: 10px;
  height: 10px;

  border-radius: 50%;

  background:
    var(--dark);
}


/* ---------------------------------------------------
   FRUIT DETAIL
--------------------------------------------------- */

.growth-fruit-detail {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.growth-fruit-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;
}

.growth-fruit-card {
  min-width: 0;

  padding: 15px;

  background:
    var(--surface);

  border:
    1px solid var(--border);

  border-radius: 16px;
}

.growth-fruit-name {
  font-size: 12px;
  font-weight: 700;

  margin-bottom: 7px;
}

.growth-fruit-score {
  font-size: 24px;
  font-weight: 700;
}

.growth-fruit-small {
  margin-top: 2px;

  color:
    var(--muted);

  font-size: 10px;
}


/* ---------------------------------------------------
   GROWTH ASSESSMENT HISTORY
--------------------------------------------------- */

.growth-assessment-history {
  display: flex;
  flex-direction: column;

  gap: 10px;
}

.growth-assessment-empty {
  text-align: center;

  padding:
    28px 20px;

  color:
    var(--muted);

  border:
    1px dashed #d5d1c8;

  border-radius: 16px;
}

.growth-assessment-card {
  width: 100%;

  display: flex;
  align-items: center;

  gap: 14px;

  padding: 16px;

  background:
    var(--surface);

  border:
    1px solid var(--border);

  border-radius: 16px;

  text-align: left;

  color:
    var(--text);
}

.growth-assessment-card-content {
  flex: 1;

  min-width: 0;
}

.growth-assessment-date {
  margin-bottom: 4px;

  font-size: 10px;

  color:
    var(--muted);

  text-transform: uppercase;

  letter-spacing: 1.1px;
}

.growth-assessment-title {
  font-weight: 700;

  margin-bottom: 4px;
}

.growth-assessment-summary {
  color:
    var(--muted);

  font-size: 12px;

  line-height: 1.4;
}


/* ---------------------------------------------------
   GROWTH STEPS
--------------------------------------------------- */

.growth-step {
  display: none;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.growth-step.active {
  display: block;
}


/* ---------------------------------------------------
   SCALE EXPLANATION
--------------------------------------------------- */

.growth-scale-explanation {
  width: 100%;
  min-width: 0;

  margin-bottom: 22px;

  padding: 16px;

  border-radius: 16px;

  background:
    var(--accent-soft);
}

.growth-scale-explanation p {
  margin:
    8px 0 14px;

  color:
    var(--muted);

  font-size: 13px;

  line-height: 1.5;
}

.growth-scale-key,
.growth-fruit-scale-key {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 6px;

  width: 100%;
  min-width: 0;
}

.growth-scale-key span,
.growth-fruit-scale-key span {
  min-width: 0;

  padding:
    8px 4px;

  border-radius: 10px;

  background:
    rgba(255,255,255,.72);

  color:
    var(--muted);

  text-align: center;

  font-size: 9px;

  line-height: 1.3;
}


/* ---------------------------------------------------
   GROWTH QUESTION CARDS
--------------------------------------------------- */

.growth-question-card {
  position: relative;

  padding-top: 22px;
}

.growth-question-number {
  width: 28px;
  height: 28px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    var(--dark);

  color:
    white;

  font-size: 11px;
  font-weight: 700;

  margin-bottom: 12px;
}

.growth-question-label {
  margin-bottom: 7px;

  font-size: 16px;
  font-weight: 700;
}

.growth-question-text {
  margin-bottom: 18px;

  font-size: 15px;
  font-weight: 600;

  line-height: 1.55;
}


/* ---------------------------------------------------
   MOVEMENT RESPONSE SCALE
--------------------------------------------------- */

.growth-response-scale {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 7px;

  width: 100%;

  min-width: 0;
}

.growth-response-button {
  min-width: 0;

  min-height: 62px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 4px;

  border:
    1px solid #d8d5ce;

  border-radius: 11px;

  background:
    var(--surface-soft);

  color:
    var(--text);

  padding:
    7px 3px;

  text-align: center;
}

.growth-response-button-score {
  font-size: 14px;
  font-weight: 700;
}

.growth-response-button-label {
  font-size: 8px;

  line-height: 1.15;

  color:
    var(--muted);
}

.growth-response-button.selected {
  background:
    var(--dark);

  color:
    white;

  border-color:
    var(--dark);
}

.growth-response-button.selected
.growth-response-button-label {
  color:
    rgba(255,255,255,.72);
}


/* ---------------------------------------------------
   FRUIT RESPONSE SCALE
--------------------------------------------------- */

.growth-fruit-response-scale {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 7px;

  width: 100%;
  min-width: 0;
}

.growth-fruit-response-button {
  min-width: 0;

  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid #d8d5ce;

  border-radius: 11px;

  background:
    var(--surface-soft);

  color:
    var(--text);

  font-size: 13px;
  font-weight: 700;
}

.growth-fruit-response-button.selected {
  background:
    var(--dark);

  color:
    white;

  border-color:
    var(--dark);
}


/* ---------------------------------------------------
   GROWTH ASSESSMENT RESULT CARDS
--------------------------------------------------- */

.growth-assessment-score-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;

  margin-top: 12px;
}

.growth-assessment-score {
  padding: 10px;

  border-radius: 12px;

  background:
    var(--surface-soft);

  border:
    1px solid var(--border);
}

.growth-assessment-score-label {
  color:
    var(--muted);

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: .8px;
}

.growth-assessment-score-value {
  margin-top: 4px;

  font-size: 17px;
  font-weight: 700;
}


/* ---------------------------------------------------
   SMALL PHONE SAFETY
--------------------------------------------------- */

@media (max-width: 390px) {

  .growth-scale-key,
  .growth-fruit-scale-key {
    gap: 4px;
  }

  .growth-scale-key span,
  .growth-fruit-scale-key span {
    padding:
      7px 2px;

    font-size: 8px;
  }

  .growth-response-scale,
  .growth-fruit-response-scale {
    gap: 5px;
  }

  .growth-response-button {
    min-height: 58px;

    padding:
      6px 2px;
  }

  .growth-response-button-score {
    font-size: 13px;
  }

  .growth-response-button-label {
    font-size: 7px;
  }

}


/* ---------------------------------------------------
   TABLET / DESKTOP
--------------------------------------------------- */

@media (min-width: 700px) {

  .growth-summary-grid {
    grid-template-columns:
      repeat(5, minmax(0, 1fr));
  }

  .growth-fruit-summary-card {
    grid-column:
      auto;
  }

  .growth-fruit-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

}

/* =====================================================
   MERE WEB PLATFORM — BUILD 01 AUTHENTICATION
===================================================== */
.auth-shell,.client-app-shell{width:100%;min-height:100vh}.auth-shell{display:flex;align-items:center;justify-content:center;padding:calc(30px + env(safe-area-inset-top)) 22px calc(30px + env(safe-area-inset-bottom));background:radial-gradient(circle at top,#fff 0%,var(--background) 56%)}.auth-loading{text-align:center;max-width:360px}.auth-loading h1{margin:8px 0;font-size:34px}.auth-loading p{color:var(--muted);margin:0}.auth-card{width:100%;max-width:430px;padding:28px;background:var(--surface);border:1px solid var(--border);border-radius:24px;box-shadow:0 22px 70px rgba(0,0,0,.08)}.auth-brand{display:flex;align-items:center;gap:14px;margin-bottom:22px}.auth-brand h1{margin:3px 0 0;font-size:30px}.auth-mark{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:var(--dark);color:#fff;font-weight:800;font-size:20px}.auth-intro{color:var(--muted);line-height:1.55;margin:0 0 24px}.auth-card .field-label{display:block;margin:16px 0 8px;font-size:13px;font-weight:700}.auth-card input{width:100%;min-height:50px;padding:0 14px;border:1px solid var(--border);border-radius:13px;background:var(--surface-soft);color:var(--text);outline:none}.auth-card input:focus{border-color:var(--soft-dark);box-shadow:0 0 0 3px rgba(32,32,32,.07)}.auth-submit{width:100%;margin-top:22px}.auth-submit:disabled{opacity:.6;cursor:wait}.auth-error{margin-top:14px;padding:12px 14px;border-radius:12px;background:#f7e9e7;color:#7a2822;font-size:13px;line-height:1.45}.auth-build-note{margin-top:20px;text-align:center;color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.cloud-session-strip{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:calc(10px + env(safe-area-inset-top)) 76px 10px 22px;background:var(--dark);color:#fff}.cloud-session-identity{display:flex;align-items:center;gap:10px;min-width:0}.cloud-session-identity>div{display:flex;flex-direction:column;min-width:0}.cloud-session-identity strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.cloud-session-identity span:not(.cloud-session-dot){margin-top:1px;color:rgba(255,255,255,.65);font-size:11px}.cloud-session-dot{width:9px;height:9px;flex:0 0 auto;border-radius:50%;background:#9ed5a4;box-shadow:0 0 0 4px rgba(158,213,164,.15)}.cloud-session-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}.cloud-admin-badge{padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.cloud-signout-button{border:0;padding:6px 8px;background:transparent;color:rgba(255,255,255,.78);font-size:11px;font-weight:700}
.cloud-coach-foundation{margin:18px 22px 0;padding:16px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}.cloud-coach-foundation strong{display:block;margin-top:2px}.cloud-assigned-clients{max-width:420px;color:var(--muted);font-size:12px;line-height:1.45}.cloud-assigned-client{display:flex;flex-direction:column;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft)}.cloud-assigned-client+.cloud-assigned-client{margin-top:7px}.cloud-assigned-client strong{color:var(--text);font-size:12px}.cloud-assigned-client span{margin-top:2px}
.client-app-shell{background:var(--background)}.client-cloud-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(18px + env(safe-area-inset-top)) 22px 18px;border-bottom:1px solid rgba(0,0,0,.05);background:rgba(244,243,239,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);position:sticky;top:0;z-index:10}.client-cloud-topbar h1{margin:0;font-size:24px}.compact-button{min-height:auto!important;padding:9px 12px!important;font-size:12px!important}.client-cloud-main{max-width:760px;margin:0 auto;padding:28px 22px calc(40px + env(safe-area-inset-bottom))}.client-cloud-hero{padding:28px;border-radius:22px;background:var(--dark);color:#fff}.client-cloud-hero h2{margin:6px 0 10px;font-size:31px}.client-cloud-hero p{max-width:620px;margin:0;color:rgba(255,255,255,.74);line-height:1.6}.client-cloud-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}.client-cloud-card{padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--surface)}.client-cloud-card-label{margin-bottom:8px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.client-cloud-card h3{margin:0 0 8px;font-size:18px}.client-cloud-card>p{margin:0;color:var(--muted);line-height:1.5}.cloud-record-list{margin-top:14px}.cloud-record-item{padding:13px;border:1px solid var(--border);border-radius:13px;background:var(--surface-soft)}.cloud-record-item+.cloud-record-item{margin-top:9px}.cloud-record-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.cloud-record-heading strong{font-size:13px}.cloud-record-item p{margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.45}.cloud-visibility-badge{flex:0 0 auto;padding:4px 7px;border-radius:999px;background:var(--accent-soft);color:var(--soft-dark);font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}.cloud-empty{color:var(--muted);font-size:12px}
@media (max-width:699px){.cloud-session-strip{padding-right:22px}.cloud-coach-foundation{flex-direction:column}.cloud-assigned-clients{width:100%;max-width:none}.client-cloud-grid{grid-template-columns:1fr}.auth-card{padding:22px}}

/* =====================================================
   MERE WEB PLATFORM — BUILD 01.2
===================================================== */

.client-view {
  display: none;
}

.client-view.active {
  display: block;
}

.client-wide-card {
  margin-top: 18px;
}

.client-page-heading {
  margin-bottom: 20px;
}

.client-page-heading h2 {
  margin: 6px 0 8px;
  font-size: 30px;
}

.client-page-heading p {
  max-width: 640px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.client-placeholder-card {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}

.client-placeholder-card strong {
  display: block;
  margin-bottom: 7px;
  font-size: 16px;
}

.client-placeholder-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.client-tab-bar {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 30;

  width: min(720px, calc(100% - 24px));
  min-height: 64px;

  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;

  padding: 7px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.client-tab {
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  min-width: 0;
  padding: 7px 4px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.client-tab span {
  font-size: 17px;
  line-height: 1;
}

.client-tab strong {
  font-size: 9px;
  font-weight: 800;
}

.client-tab.active {
  background: var(--dark);
  color: #fff;
}

.client-tab-disabled {
  opacity: 0.35;
}

.client-cloud-main {
  padding-bottom: calc(115px + env(safe-area-inset-bottom));
}

.cloud-page-note {
  margin-bottom: 16px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.cloud-client-list {
  display: grid;
  gap: 10px;
}

.cloud-client-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
}

.cloud-client-card:hover {
  border-color: var(--soft-dark);
}

.cloud-client-avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--dark);
  color: white;
  font-size: 14px;
  font-weight: 800;
}

.cloud-client-card-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cloud-client-card-copy strong {
  font-size: 14px;
}

.cloud-client-card-copy span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.cloud-client-card-copy small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.cloud-empty-card {
  padding: 20px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
  color: var(--muted);
  line-height: 1.5;
}

.cloud-empty-card strong,
.cloud-empty-card span {
  display: block;
}

.cloud-empty-card strong {
  color: var(--text);
  margin-bottom: 5px;
}

.cloud-client-detail-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px 0;
  padding: 22px;
  border-radius: 20px;
  background: var(--dark);
  color: #fff;
}

.cloud-client-detail-hero h2 {
  margin: 5px 0 4px;
  font-size: 27px;
}

.cloud-client-detail-hero p {
  margin: 0;
  color: rgba(255,255,255,0.68);
}

.admin-security-note {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 16px;
  padding: 15px;
  border-radius: 14px;
  background: var(--dark);
  color: white;
}

.admin-security-note strong {
  font-size: 13px;
}

.admin-security-note span {
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  line-height: 1.5;
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.admin-stat-card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
}

.admin-stat-card span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.admin-stat-card strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
}

.admin-panel {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}

.admin-panel-heading h3 {
  margin: 4px 0 14px;
  font-size: 18px;
}

.admin-list {
  display: grid;
  gap: 8px;
}

.admin-list-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px;
  border-radius: 12px;
  background: var(--surface-soft);
}

.admin-list-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--dark);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.admin-list-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.admin-list-copy strong {
  font-size: 12px;
}

.admin-list-copy span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  text-transform: capitalize;
}

.admin-status-pill {
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--soft-dark);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-assignment-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface-soft);
}

.admin-assignment-row > div:not(.admin-assignment-arrow) {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.admin-assignment-row strong {
  font-size: 12px;
}

.admin-assignment-row span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.admin-assignment-arrow {
  color: var(--muted);
  font-size: 18px;
}

@media (max-width: 699px) {
  .admin-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-tab strong {
    font-size: 8px;
  }

  .admin-assignment-row {
    grid-template-columns: 1fr;
  }

  .admin-assignment-arrow {
    transform: rotate(90deg);
    justify-self: start;
  }
}


/* =====================================================
   MERE WEB PLATFORM — BUILD 01.3 POLISH
===================================================== */

/* Coach cloud identity now lives inside the existing menu. */
.cloud-session-strip,
.cloud-coach-foundation {
  display: none !important;
}

.coach-menu-identity {
  display: flex;
  align-items: center;
  gap: 9px;

  margin-top: 12px;
  min-width: 0;
}

.coach-menu-status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;

  border-radius: 50%;
  background: #9ed5a4;

  box-shadow:
    0 0 0 4px
    rgba(158, 213, 164, 0.13);
}

.coach-menu-identity > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.coach-menu-identity > div > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 12px;
  font-weight: 750;
}

.coach-menu-identity small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 10px;
}

.coach-menu-admin {
  margin-left: auto;

  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;

  color: var(--muted);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.coach-menu-divider {
  height: 1px;
  margin: 10px 0;
  background: var(--border);
}

.coach-menu-signout {
  color: var(--muted) !important;
  font-weight: 650 !important;
}


/* Client top bar remains useful without making Sign Out the focal action. */
.client-cloud-topbar {
  padding-bottom: 15px;
}

.client-account-button {
  border: 0;
  background: transparent;

  padding: 8px 4px;

  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}


/* Give fixed client navigation a permanent content clearance. */
.client-cloud-main {
  padding-bottom:
    calc(
      122px +
      env(safe-area-inset-bottom)
    );
}

.client-tab-bar {
  bottom:
    max(
      10px,
      env(safe-area-inset-bottom)
    );
}


/* Slightly calmer client cards for the permanent product shell. */
.client-cloud-hero {
  box-shadow:
    0 16px 40px
    rgba(0, 0, 0, 0.08);
}

.client-placeholder-card {
  min-height: 120px;
}


/* The existing Coach dashboard should begin naturally beneath its own topbar. */
#coachShell #appContent {
  padding-top: 0;
}


/* Admin remains a workspace, not a banner above the Coach dashboard. */
#adminPage {
  padding-bottom: 32px;
}


@media (max-width: 699px) {

  .client-cloud-main {
    padding-bottom:
      calc(
        132px +
        env(safe-area-inset-bottom)
      );
  }

  .client-cloud-topbar {
    align-items: flex-end;
  }

  .client-account-button {
    padding-bottom: 5px;
  }

}


/* =====================================================
   MERE WEB PLATFORM — BUILD 01.4
   CLIENT HAMBURGER MENU
===================================================== */

.client-tab-bar {
  display: none !important;
}

.client-cloud-main {
  padding-bottom:
    calc(
      42px +
      env(safe-area-inset-bottom)
    ) !important;
}

.client-menu-button {
  width: 48px;
  height: 48px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 5px;

  border: 1px solid var(--border);
  border-radius: 15px;

  background: var(--surface);

  box-shadow:
    0 8px 24px
    rgba(0, 0, 0, 0.05);
}

.client-menu-button span {
  width: 19px;
  height: 2px;
  border-radius: 999px;
  background: var(--text);
}

.client-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;

  background:
    rgba(
      0,
      0,
      0,
      0.28
    );

  opacity: 0;
  pointer-events: none;

  transition:
    opacity 180ms ease;
}

.client-menu-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.client-menu {
  position: fixed;

  top: 0;
  right: 0;
  bottom: 0;

  z-index: 90;

  width:
    min(
      88vw,
      360px
    );

  display: flex;
  flex-direction: column;

  padding:
    calc(
      20px +
      env(safe-area-inset-top)
    )
    18px
    calc(
      20px +
      env(safe-area-inset-bottom)
    );

  background: var(--surface);

  border-left:
    1px solid
    var(--border);

  box-shadow:
    -22px 0 60px
    rgba(0, 0, 0, 0.12);

  transform:
    translateX(104%);

  transition:
    transform 200ms ease;
}

.client-menu.open {
  transform:
    translateX(0);
}

.client-menu-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;

  padding:
    4px 2px
    20px;

  border-bottom:
    1px solid
    var(--border);
}

.client-menu-header strong {
  display: block;

  margin-top: 5px;

  font-size: 18px;
}

.client-menu-header small {
  display: block;

  margin-top: 3px;

  color: var(--muted);

  font-size: 11px;
}

.client-menu-close {
  width: 38px;
  height: 38px;

  border: 1px solid var(--border);
  border-radius: 12px;

  background: var(--surface-soft);

  color: var(--text);

  font-size: 24px;
  line-height: 1;
}

.client-menu-items {
  flex: 1;

  overflow-y: auto;

  padding:
    16px 0;
}

.client-menu-item {
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  padding:
    13px 14px;

  border: 0;
  border-radius: 13px;

  background: transparent;

  color: var(--text);

  text-align: left;
}

.client-menu-item + .client-menu-item {
  margin-top: 4px;
}

.client-menu-item span {
  font-size: 14px;
  font-weight: 800;
}

.client-menu-item small {
  margin-top: 3px;

  color: var(--muted);

  font-size: 10px;
  line-height: 1.35;
}

.client-menu-item.active {
  background: var(--dark);
  color: #ffffff;
}

.client-menu-item.active small {
  color:
    rgba(
      255,
      255,
      255,
      0.66
    );
}

.client-menu-footer {
  padding-top: 14px;

  border-top:
    1px solid
    var(--border);
}

.client-menu-signout {
  width: 100%;

  padding:
    12px 14px;

  border: 0;
  border-radius: 12px;

  background: var(--surface-soft);

  color: var(--muted);

  text-align: left;

  font-size: 12px;
  font-weight: 750;
}

@media (min-width: 700px) {
  .client-menu {
    width: 380px;
  }
}


/* =====================================================
   MERE WEB PLATFORM — BUILD 01.5
   FINAL BUILD 01 CONSISTENCY PASS
===================================================== */

/* Coach and Client now share the same interaction rule:
   hamburger on the right -> drawer opens from the right. */

.mobile-menu {
  left: auto !important;
  right: 0 !important;

  border-left:
    1px solid
    var(--border);

  border-right:
    0;

  box-shadow:
    -22px 0 60px
    rgba(0, 0, 0, 0.12) !important;

  transform:
    translateX(105%) !important;
}

.mobile-menu.open {
  transform:
    translateX(0) !important;
}


/* Keep both hamburger controls visually related. */

.menu-button,
.client-menu-button {
  width: 46px;
  height: 46px;

  border-radius: 14px;
}


/* Coach menu identity spacing matches client menu rhythm. */

.mobile-menu-header {
  align-items: flex-start;
}

.coach-menu-identity {
  margin-top: 12px;
}


/* Cloud-client copy now reads as product UI, not implementation notes. */

.cloud-page-note {
  color: var(--muted);
  line-height: 1.5;
}


/* Build 01 completion polish */

#coachShell .topbar,
.client-cloud-topbar {
  min-height: 82px;
}



/* =====================================================
   BUILD 02.1 — CLOUD APPLICATION
===================================================== */

.client-application-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.client-app-shell.application-open .client-view {
  display: none !important;
}

#clientShell #applicationPage {
  margin: 0;
  padding: 0;
}

#clientShell #applicationPage.active {
  display: block;
}

.cloud-client-application-meta {
  margin: 8px 0 20px;
  color: var(--muted, #6f6b63);
  font-size: 0.92rem;
}

.cloud-application-responses {
  display: grid;
  gap: 14px;
}

.cloud-application-response {
  padding: 16px;
  border: 1px solid rgba(30, 28, 24, 0.10);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
}

.cloud-application-response strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.cloud-application-response p {
  margin: 0;
  white-space: pre-wrap;
}

.cloud-client-report {
  white-space: pre-wrap;
  line-height: 1.65;
}