/* Mini App typography: one role map; workbench and Telegram preview keep their own UI. */
.phone {
  --type-ui: Inter, sans-serif;
  --type-display: Alegreya, sans-serif;
  --type-caption: 16px;
  --type-body: 18px;
  --type-support: var(--type-body);
  --type-support-leading: 1.5;
  --type-name: 20px;
  --type-action: 20px;
  --type-section: 24px;
  --type-title: 32px;
  --info-gap: 16px;
  --type-clock: 32px;
  --type-person-card: 26px;
  --type-person-profile: 34px;
  --flame: #ff8a24;
  --info-main-size: var(--type-body);
  --info-secondary-size: var(--type-caption);
  --info-main: var(--text-primary);
  --info-secondary: var(--text-secondary);
  font: 400 var(--type-body)/1.5 var(--type-ui);
  letter-spacing: 0;
}
/* Expressive type is reserved for screen titles, actions and time. */
.phone .mini-intro :is(h1,h2) {
  font: 800 var(--type-title)/1.05 var(--type-display);
  letter-spacing: 0;
  color: var(--coral);
}
.phone .mini-button,
.phone .mini-nav button,
.phone .mini-text-button,
.phone .lead-card-action {
  font: 700 var(--type-action)/1.2 var(--type-display);
  letter-spacing: 0;
}
.phone .mini-timer>strong,
.phone .offer-clock>strong,
.phone .mini-capacity>strong {
  font: 900 var(--type-clock)/1 var(--type-display);
  letter-spacing: 0;
  color: var(--info-main);
  font-variant-numeric: tabular-nums;
}
/* The same person uses the same face and weight in every context. */
.phone .card-identity>strong,
.phone .lead-identity h2,
.phone .teammate-name strong {
  font: 700 var(--type-person-card)/1.2 var(--type-display);
  letter-spacing: 0;
  color: var(--info-main);
}
.phone .profile-identity h1 {
  font: 700 var(--type-person-profile)/1.15 var(--type-display);
  letter-spacing: 0;
  color: var(--info-main);
}
.phone .profile-section-heading,
.phone .lead-profile-heading {
  font: 600 var(--type-section)/1.3 var(--type-ui);
  letter-spacing: 0;
  color: var(--coral);
}
.phone .team-members-heading,
.phone .mini-app-title {
  font: 600 var(--type-name)/1.3 var(--type-ui);
  letter-spacing: 0;
  color: var(--info-main);
}
.phone .handle,
.phone .profile-hero .profile-identity .handle,
.phone .teammate-handle,
.phone .lead-identity>div>p:has(.telegram-handle) {
  font: 600 var(--type-body)/1.4 var(--type-ui);
  letter-spacing: 0;
  color: var(--info-secondary);
}
.telegram-handle { color: inherit; }
/* Labels are semibold; reading text is regular. */
.phone .profile-field h3,
.phone .original-story h3,
.phone .filter>label,
.phone .filter summary,
.phone .filter-options .skill-option,
.phone .search input,
.phone .offer-clock>span {
  font: 600 var(--type-body)/1.4 var(--type-ui);
  letter-spacing: 0;
  color: var(--info-main);
}
.phone .profile-field p,
.phone .original-story .profile-prose,
.phone .card-identity .skills {
  font: 400 var(--type-body)/1.5 var(--type-ui);
  letter-spacing: 0;
  color: var(--info-secondary);
}
.phone .mini-timer>span,
.phone .lead-team-count,
.phone .lead-team-name,
.phone .result-count,
.phone .source-note,
.phone .team-readiness-note,
.phone .teammates-empty,
.phone .offer-meta,
.phone .mini-capacity,
.phone .mini-capacity>span {
  font: 400 var(--type-caption)/1.5 var(--type-ui);
  letter-spacing: 0;
  color: var(--info-secondary);
}
.phone .designer-choice-clock .offer-clock-info {
  color: var(--info-secondary);
}
.phone .mini-note.profile-other-offer-note {
  color: var(--info-secondary);
  text-align: center;
}
.phone .status-pill.cut {
  font: 700 var(--type-body)/1.15 var(--type-display);
  letter-spacing: 0;
  text-transform: lowercase;
}
.phone .status-count {
  font: 700 var(--type-caption)/1 var(--type-display);
  letter-spacing: 0;
}
.phone .team-readiness-label {
  font: 600 var(--type-caption)/1.5 var(--type-ui);
  letter-spacing: 0;
}

.phone .offer-status-label {
  font: 700 var(--type-body)/1.15 var(--type-display);
  letter-spacing: 0;
  text-transform: lowercase;
}

/* Result text keeps its semantic color; its size uses the shared support role. */
.phone .mini-message-screen>.mini-intro p {
  color: var(--info-secondary);
}

.phone .mini-button.locked:disabled{opacity:1;--surface-bg:var(--mahogany);--surface-border:var(--dusty);color:#B88E84;gap:8px;padding-inline:12px}
.phone .mini-button.locked>.mini-button-label{flex:0 1 auto}
.phone .mini-button.locked>.button-lock{width:18px;height:18px;flex:0 0 18px}
.phone .action-unavailable-note{margin:0;color:var(--info-secondary);text-align:center}
/* Availability replaces the generic invitation hint; one readable text size. */
.phone .mini-note.pool-availability{color:var(--info-secondary);text-align:center;margin:0 0 24px}

.phone .mini-timer>strong,.phone .offer-clock>strong{font-weight:700;font-kerning:none;letter-spacing:.5px;line-height:1.15}
/* Handles are identifiers, not actions: keep them quieter than names. */
.phone .designer-card .handle{color:var(--info-secondary)}

/* One support-text role on every Mini App screen: the pool screen is the reference.
   Cards, profile answers, counters and section labels retain their own roles. */
.phone :is(
  .mini-intro > p,
  .pool-panel > p,
  .mini-empty > p:not(.empty-title),
  .mini-note,
  .mini-message-screen > .mini-intro > p,
  .mini-message-screen > .mini-note,
  .designer-choice-clock > .offer-clock-info,
  .offer-clock-info,
  .offer-confirm-availability,
  .finalize-warning,
  .withdrawal-warning,
  .action-unavailable-note,
  .mini-footer > .team-minimum-note,
  .team-roster-empty > .teammates-empty
) {
  font: 400 var(--type-support)/var(--type-support-leading) var(--type-ui);
  letter-spacing: 0;
}
.phone :is(.mini-intro > p, .mini-empty > p:not(.empty-title), .mini-note) {
  color: var(--info-secondary);
}
.phone .mini-message-screen > .mini-intro > p { color: var(--info-secondary); }
.phone .mini-note:is(.pool-availability, .profile-other-offer-note) { color: var(--info-secondary); }

/* Screen titles use the real Extra Bold face; their supporting copy is white. */
.phone :is(h1,h2,h3){font-weight:800}
.phone :is(.mini-intro > p, .mini-empty > p:not(.empty-title), .offer-confirm-availability, .finalize-warning, .withdrawal-warning){color:#fff}
.phone .mini-message-screen > .mini-intro > p{color:#fff}