:root {
  --mobile-font-body: 15px;
  --mobile-font-secondary: 14px;
  --mobile-font-caption: 13px;
  --mobile-font-body-large: 18px;
  --mobile-font-secondary-large: 16px;
  --mobile-font-caption-large: 14px;
  --mobile-muted: #675f55;
  --mobile-touch-target: 44px;
}

body {
  font-size: var(--mobile-font-body);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
  min-height: var(--mobile-touch-target);
}

.app-brand-meta,
.header .greeting,
.topbar .date,
.topbar .user,
.user,
.date-note,
.filter-hint,
.record-date-panel,
.record-hint,
.agent-week-label small,
.calendar-sub,
.calendar-week-sub,
.detail-title p,
.section-title span {
  color: var(--mobile-muted);
  font-size: var(--mobile-font-caption);
  line-height: 1.5;
}

.key-record-hint,
.guide-item .dim {
  color: var(--mobile-muted);
  font-size: var(--mobile-font-caption);
  line-height: 1.55;
}

.key-record-list li,
.key-record-list li span,
.guide-more > summary,
.guide-item,
.guide-item .hl,
.hwp-guidance-question,
.hwp-guidance-title,
.records-section h3,
.history-section h3 {
  font-size: var(--mobile-font-secondary);
}

.header-actions button,
.topbar-actions button,
.top-actions button,
.large-text-toggle,
.identity-switch-btn,
.logout,
.tab-btn,
.view-tab,
.agent-nav-btn,
.day-filter-btn,
.week-nav,
.today-btn {
  font-size: var(--mobile-font-caption) !important;
  min-height: var(--mobile-touch-target);
}

.large-text-toggle.active {
  background: #eef5e8;
  border-color: #b9d2aa;
  color: #3f6331;
}

.stat-lbl,
.day-filter-btn span,
.week-summary-card span,
.day-score span,
.week-score span,
.metric span,
.quality-cell span,
.agent-detail-cell span,
.card-tag,
.priority-badge,
.special-tag,
.manager-request-tag,
.visit-assistant-tag,
.day-tag,
.badge,
.risk,
.flag,
.agent-code,
.comm-type,
.comm-meta span,
.training-meta {
  color: var(--mobile-muted);
  font-size: var(--mobile-font-caption);
  line-height: 1.4;
}

.card-stats,
.card-gap,
.card-risk,
.weekly-card .wc-progress,
.weekly-card .wc-gap,
.weekly-card .wc-days,
.day-agent-meta,
.day-agent-summary,
.day-agent-request,
.week-agent-meta,
.week-agent-summary,
.week-review-head,
.week-review-text,
.sample-head,
.sample-text,
.action-state,
.action-item,
.reason,
.meta,
.suggestion,
.agent-reason,
.detail-text,
.note-body,
.diagnosis-sub,
.comm-line,
.comm-block .comm-block-text,
.comm-overview-text,
.comm-teaser-text,
.comm-unclear-hint,
.insight-sub,
.insight-item,
.coaching-plain-text,
.coaching-guidance-text,
.coaching-step,
.coaching-secondary,
.my-cc-message,
.my-cc-section-body,
.capability-summary,
.capability-next,
.capability-growth-sub,
.meeting-daily-hint,
.conversion-rates,
.agent-conversion-rate,
.agent-week-gap {
  font-size: var(--mobile-font-secondary);
  line-height: 1.6;
}

.heatmap-table,
.agent-week-table,
.meeting-daily-table {
  font-size: var(--mobile-font-caption);
}

body.large-text-mode {
  font-size: var(--mobile-font-body-large);
}

.large-text-mode .app-brand-name,
.large-text-mode .title,
.large-text-mode .card-name,
.large-text-mode .day-agent-name,
.large-text-mode .week-agent-name,
.large-text-mode .name,
.large-text-mode .agent-name,
.large-text-mode .detail-title h2,
.large-text-mode .section-title h3 {
  font-size: 19px;
  line-height: 1.4;
}

.large-text-mode .app-brand-meta,
.large-text-mode .header .greeting,
.large-text-mode .topbar .date,
.large-text-mode .topbar .user,
.large-text-mode .user,
.large-text-mode .date-note,
.large-text-mode .filter-hint,
.large-text-mode .record-date-panel,
.large-text-mode .record-hint,
.large-text-mode .agent-week-label small,
.large-text-mode .calendar-sub,
.large-text-mode .calendar-week-sub,
.large-text-mode .detail-title p,
.large-text-mode .section-title span,
.large-text-mode .stat-lbl,
.large-text-mode .day-filter-btn span,
.large-text-mode .week-summary-card span,
.large-text-mode .day-score span,
.large-text-mode .week-score span,
.large-text-mode .metric span,
.large-text-mode .quality-cell span,
.large-text-mode .agent-detail-cell span,
.large-text-mode .card-tag,
.large-text-mode .priority-badge,
.large-text-mode .special-tag,
.large-text-mode .manager-request-tag,
.large-text-mode .visit-assistant-tag,
.large-text-mode .day-tag,
.large-text-mode .badge,
.large-text-mode .risk,
.large-text-mode .flag,
.large-text-mode .agent-code,
.large-text-mode .comm-type,
.large-text-mode .comm-meta span,
.large-text-mode .training-meta {
  font-size: var(--mobile-font-caption-large);
  line-height: 1.55;
}

.large-text-mode .key-record-hint,
.large-text-mode .guide-item .dim {
  font-size: 15px;
}

.large-text-mode .key-record-list li,
.large-text-mode .key-record-list li span,
.large-text-mode .guide-more > summary,
.large-text-mode .guide-item,
.large-text-mode .guide-item .hl,
.large-text-mode .hwp-guidance-question,
.large-text-mode .hwp-guidance-title,
.large-text-mode .records-section h3,
.large-text-mode .history-section h3 {
  font-size: 17px;
}

.large-text-mode .header-actions button,
.large-text-mode .topbar-actions button,
.large-text-mode .top-actions button,
.large-text-mode .large-text-toggle,
.large-text-mode .identity-switch-btn,
.large-text-mode .logout,
.large-text-mode .tab-btn,
.large-text-mode .view-tab,
.large-text-mode .agent-nav-btn,
.large-text-mode .day-filter-btn,
.large-text-mode .week-nav,
.large-text-mode .today-btn {
  font-size: 15px !important;
}

.large-text-mode .card-stats,
.large-text-mode .card-gap,
.large-text-mode .card-risk,
.large-text-mode .weekly-card .wc-progress,
.large-text-mode .weekly-card .wc-gap,
.large-text-mode .weekly-card .wc-days,
.large-text-mode .day-agent-meta,
.large-text-mode .day-agent-summary,
.large-text-mode .day-agent-request,
.large-text-mode .week-agent-meta,
.large-text-mode .week-agent-summary,
.large-text-mode .week-review-head,
.large-text-mode .week-review-text,
.large-text-mode .sample-head,
.large-text-mode .sample-text,
.large-text-mode .action-state,
.large-text-mode .action-item,
.large-text-mode .reason,
.large-text-mode .meta,
.large-text-mode .suggestion,
.large-text-mode .agent-reason,
.large-text-mode .detail-text,
.large-text-mode .note-body,
.large-text-mode .diagnosis-sub,
.large-text-mode .comm-line,
.large-text-mode .comm-block .comm-block-text,
.large-text-mode .comm-overview-text,
.large-text-mode .comm-teaser-text,
.large-text-mode .comm-unclear-hint,
.large-text-mode .insight-sub,
.large-text-mode .insight-item,
.large-text-mode .coaching-plain-text,
.large-text-mode .coaching-guidance-text,
.large-text-mode .coaching-step,
.large-text-mode .coaching-secondary,
.large-text-mode .my-cc-message,
.large-text-mode .my-cc-section-body,
.large-text-mode .capability-summary,
.large-text-mode .capability-next,
.large-text-mode .capability-growth-sub,
.large-text-mode .meeting-daily-hint,
.large-text-mode .conversion-rates,
.large-text-mode .agent-conversion-rate,
.large-text-mode .agent-week-gap {
  font-size: var(--mobile-font-secondary-large);
  line-height: 1.7;
}

.large-text-mode .heatmap-table,
.large-text-mode .agent-week-table,
.large-text-mode .meeting-daily-table {
  font-size: 15px;
}

.large-text-mode .topline,
.large-text-mode .header,
.large-text-mode .topbar {
  row-gap: 10px;
}

@media (max-width: 374px) {
  .app-brand--compact .app-brand-name { display: block; }
  .app-brand--compact .app-brand-meta,
  .app-brand--compact .user { display: none; }

  .header,
  .topline {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .header-actions,
  .top-actions {
    width: 100%;
    justify-content: flex-end;
    gap: 5px;
  }

  .topbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .topbar > div:last-child {
    width: 100%;
    text-align: left !important;
  }

  .topbar-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 5px;
    margin-top: 8px;
  }

  .topbar-actions button {
    white-space: nowrap;
  }
}