/* Reusable components. Colour variants are expressed through the .tone-* utility
   (tokens.css) so no component hard-codes a status or category colour. */

/* ---------- State layer (M3): hover / press overlay in the current text colour ---------- */

.btn, .chip, .card-main, .option, .picker-row, .lang-button, .tab-icon {
  position: relative;
  isolation: isolate;
}
.btn::before, .chip::before, .card-main::before, .option::before,
.picker-row::before, .lang-button::before, .tab-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-short) var(--ease-standard);
}
@media (hover: hover) {
  .btn:hover::before, .chip:hover::before, .card-main:hover::before, .option:hover::before,
  .picker-row:hover::before, .lang-button:hover::before, .tab:hover .tab-icon::before { opacity: 0.06; }
}
.btn:active::before, .chip:active::before, .card-main:active::before, .option:active::before,
.picker-row:active::before, .lang-button:active::before, .tab:active .tab-icon::before { opacity: 0.12; }

/* ---------- Typography helpers ---------- */

.section-label {
  margin: var(--space-6) 0 var(--space-2);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.section-label:first-child { margin-top: 0; }

.day-heading {
  margin: var(--space-5) 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-title-md);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.day-heading:first-child { margin-top: 0; }

.empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--ink-muted); }

/* ---------- Badge, pill, avatar ---------- */

.badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--shape-md);
  background: var(--tone-bg);
  color: var(--tone-fg);
}
.badge svg { width: 21px; height: 21px; }
.badge--lg { width: 52px; height: 52px; border-radius: var(--shape-lg); }

.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--shape-full);
  background: var(--tone-bg);
  color: var(--tone-fg);
  font-size: var(--fs-label);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pill-row { display: flex; flex-wrap: wrap; gap: 6px; }

.avatar {
  --avatar-size: 28px;
  --avatar-ring: var(--surface);
  flex: none;
  display: grid;
  place-items: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border: 2px solid var(--avatar-ring);
  border-radius: 50%;
  background: var(--avatar-bg);
  color: #fff;
  font-size: calc(var(--avatar-size) * 0.38);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.avatar--me { --avatar-bg: var(--primary); color: var(--on-primary); }
.avatar--more { --avatar-bg: var(--surface-high); color: var(--ink-muted); }
.sheet .avatar { --avatar-ring: var(--background); }

.avatar-stack { display: flex; align-items: center; }
.avatar-stack .avatar + .avatar { margin-left: -8px; }

/* ---------- Buttons & chips ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 var(--space-5);
  border: 1.5px solid transparent;
  border-radius: var(--shape-full);
  background: none;
  font-size: var(--fs-body-sm);
  font-weight: 700;
}
.btn svg { width: 16px; height: 16px; }
.btn--block { width: 100%; }
.btn--large { min-height: 52px; font-family: var(--font-display); font-size: var(--fs-body); font-weight: 800; }
.btn--filled { background: var(--primary); color: var(--on-primary); }
.btn--tonal { background: var(--primary-container); color: var(--on-primary-container); }
.btn--compact { min-height: 38px; padding: 0 var(--space-4); white-space: nowrap; }
.btn--text { padding: 0 var(--space-3); color: var(--ink-muted); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled::before { display: none; }
.btn--choice { border-color: var(--outline-strong); color: var(--ink-muted); }
.btn--choice[aria-pressed="true"] { border-color: transparent; background: var(--tone-bg); color: var(--tone-fg); }

.btn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

.chip-row { display: flex; gap: var(--space-2); }
.chip-row--wrap { flex-wrap: wrap; }
.chip-row--scroll { margin-inline: calc(var(--space-5) * -1); padding-inline: var(--space-5); overflow-x: auto; }

.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 var(--space-4);
  border: 1px solid var(--outline-strong);
  border-radius: var(--shape-full);
  background: none;
  color: var(--ink-muted);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  white-space: nowrap;
}
.chip svg { width: 17px; height: 17px; }
.chip--sm { min-height: 34px; padding: 0 var(--space-3); gap: 5px; }
.chip--sm svg { width: 15px; height: 15px; }
.chip[aria-pressed="true"] {
  border-color: transparent;
  background: var(--tone-bg, var(--ink));
  color: var(--tone-fg, var(--background));
}

/* ---------- Event card ---------- */

.card-list { display: grid; gap: var(--space-3); }

.card {
  border-radius: var(--shape-lg-inc);
  background: var(--surface);
  box-shadow: var(--elevation-1);
}

.card-main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-4) var(--space-3);
  border: 0;
  border-radius: var(--shape-lg-inc) var(--shape-lg-inc) 0 0;
  background: none;
  text-align: left;
}
.card-text { display: grid; gap: 3px; min-width: 0; }
.card-eyebrow {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--ink-muted);
}
.card-eyebrow--own { color: var(--on-primary-container); }
.card-title {
  font-family: var(--font-display);
  font-size: var(--fs-title-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.card-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-muted);
  font-size: var(--fs-body-sm);
}
.card-meta svg { flex: none; width: 14px; height: 14px; }
.card-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-time {
  font-family: var(--font-display);
  font-size: var(--fs-title-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.card-footer { display: grid; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); }
.attendance { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); font-size: var(--fs-body-sm); }

/* ---------- Form fields ---------- */

.field { margin-bottom: var(--space-4); }
.field-label { display: block; margin-bottom: 7px; font-size: var(--fs-label); font-weight: 700; color: var(--ink-muted); }
.field-hint { margin-top: 6px; font-size: var(--fs-label); color: var(--on-declined-container); }

.field-float { position: relative; }

.input {
  width: 100%;
  min-height: 56px;
  padding: 23px 15px 8px;
  border: 1px solid var(--outline-strong);
  border-radius: var(--shape-md);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  resize: none;
}
.input::placeholder { color: transparent; }
textarea.input { min-height: 92px; line-height: 1.5; }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }

.float-label {
  position: absolute;
  top: 18px;
  left: 16px;
  color: var(--ink-muted);
  font-size: var(--fs-body);
  font-weight: 500;
  pointer-events: none;
  transition: top var(--duration-short) var(--ease-standard), font-size var(--duration-short) var(--ease-standard);
}
.input:focus ~ .float-label,
.input:not(:placeholder-shown) ~ .float-label,
.field--floated .float-label {
  top: 8px;
  font-size: var(--fs-label-sm);
  font-weight: 700;
}
.input:focus ~ .float-label { color: var(--on-primary-container); }

.field--error .input { border-color: var(--declined); box-shadow: 0 0 0 1px var(--declined); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* ---------- Option list (visibility) & summary ---------- */

.option-list { display: grid; gap: var(--space-2); }

.option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 52px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--outline-strong);
  border-radius: var(--shape-lg);
  background: none;
  text-align: left;
  font-weight: 600;
}
.option > svg { width: 19px; height: 19px; color: var(--ink-muted); }
.option[aria-pressed="true"] {
  border-color: transparent;
  background: var(--primary-container);
  color: var(--on-primary-container);
}
.option[aria-pressed="true"] > svg { color: inherit; }
.option-check svg { width: 17px; height: 17px; }
.option--summary { margin-top: var(--space-2); }

/* ---------- Contact picker ---------- */

.search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-3);
  padding: 0 var(--space-4);
  min-height: 48px;
  border-radius: var(--shape-full);
  background: var(--surface-high);
}
.search-field svg { flex: none; width: 17px; height: 17px; color: var(--ink-muted); }
.search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
}
.search-field input:focus { outline: none; }
.filter-group { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.filter-label { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.filter-group .search-field { margin-bottom: 0; }
.filter-row { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; gap: var(--space-2); }
.filter-row > * { min-width: 0; }
.search-field select { flex: 1; width: 100%; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.search-field select:focus { outline: none; }

.search-field:focus-within { box-shadow: 0 0 0 2px var(--primary); }
.search-field input::placeholder { color: var(--ink-muted); }

.picker-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-2);
  border: 0;
  border-radius: var(--shape-lg);
  background: none;
  text-align: left;
  font-weight: 600;
}
.picker-row[aria-pressed="true"] { background: var(--primary-container); color: var(--on-primary-container); }

.check-circle {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--outline-strong);
  border-radius: 50%;
  color: var(--on-primary);
}
.check-circle svg { width: 13px; height: 13px; }
[aria-pressed="true"] > .check-circle { border-color: var(--primary); background: var(--primary); }

/* ---------- Detail sheet ---------- */

.sheet-hero { display: flex; align-items: center; gap: var(--space-3); padding-right: 72px; }
.sheet-title { font-family: var(--font-display); font-size: var(--fs-title-lg); font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }

.info-list { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.info-row { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-body-sm); }
.info-row svg { flex: none; width: 18px; height: 18px; color: var(--ink-muted); }

.sheet-block { margin-top: var(--space-6); }
.sheet-note { line-height: 1.6; }

.participant-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) 0; }
.participant-row + .participant-row { border-top: 1px solid var(--outline); }
.participant-name { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; }

/* ---------- Profile ---------- */

.profile-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.profile-head .avatar { border: 0; }
.profile-name { font-family: var(--font-display); font-size: var(--fs-title-lg); font-weight: 800; }
.profile-handle { color: var(--ink-muted); font-size: var(--fs-body-sm); }

.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.segmented .chip { justify-content: center; }

.group-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-radius: var(--shape-lg);
  background: var(--surface);
  box-shadow: var(--elevation-1);
  font-weight: 700;
}

.contact-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; font-weight: 600; }
.contact-row + .contact-row { border-top: 1px solid var(--outline); }

.profile-replay { margin-top: var(--space-4); }

/* ---------- Onboarding ---------- */

.onboarding-hero {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin-bottom: var(--space-4);
  border-radius: var(--shape-xl);
  background: var(--tone-bg);
  color: var(--tone-fg);
  box-shadow: var(--elevation-2);
}
.onboarding-hero svg { width: 52px; height: 52px; }

.onboarding-eyebrow {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-primary-container);
}
.onboarding-title {
  font-family: var(--font-display);
  font-size: var(--fs-headline);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}
.onboarding-text { color: var(--ink-muted); line-height: 1.55; }

.onboarding-dots { display: flex; justify-content: center; gap: 6px; }
.onboarding-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--shape-full);
  background: var(--outline-strong);
  transition: width var(--duration-medium) var(--ease-emphasized),
              background-color var(--duration-medium) var(--ease-emphasized);
}
.onboarding-dot[aria-current="step"] { width: 24px; background: var(--primary); }

/* ---------- Permissions ---------- */

.permission-list { display: grid; gap: var(--space-3); margin-top: var(--space-2); }

.permission {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--shape-lg);
  background: var(--surface);
  box-shadow: var(--elevation-1);
}
.permission .badge { width: 40px; height: 40px; }
.permission .badge svg { width: 19px; height: 19px; }
.permission-text { display: grid; gap: var(--space-2); min-width: 0; }
.permission-text p { color: var(--ink-muted); font-size: var(--fs-body-sm); line-height: 1.45; }
.permission-text .btn { justify-self: start; }
.permission-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 24px;
  font-family: var(--font-display);
  font-weight: 700;
}

/* ---------- System dialog content ---------- */

.system-dialog-text { display: grid; gap: var(--space-2); padding: var(--space-5) var(--space-5) var(--space-4); text-align: center; }
.system-dialog-text h2 { font-size: var(--fs-title-md); font-weight: 700; line-height: 1.3; }
.system-dialog-text p { color: var(--ink-muted); font-size: var(--fs-body-sm); line-height: 1.4; }
.system-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--outline); }
.system-dialog-actions button {
  min-height: 46px;
  border: 0;
  background: none;
  color: var(--secondary);
  font-size: var(--fs-body);
}
.system-dialog-actions button + button { border-left: 1px solid var(--outline); font-weight: 700; }