/* Sempli unified typography — site-wide readability pass */
:root{
  --sempli-text-lg:15px;
  --sempli-text:14px;
  --sempli-text-sm:13px;
  --sempli-label:12px;
  --sempli-micro:11px;
}

body{font-size:var(--sempli-text-lg);}

/* Core readable UI */
.app-shell p,
.app-shell li,
.app-shell input,
.app-shell select,
.app-shell textarea,
.app-shell button,
.modal p,
.modal li,
.modal input,
.modal select,
.modal textarea,
.modal button{
  font-size:var(--sempli-text)!important;
}

/* Secondary/supporting copy */
.app-shell small,
.modal small,
.task-meta,
.task-class,
.class-card p,
.class-card-meta,
.course-mini p,
.message,
.copilot-message p,
.study-resource-head p,
.book-result-copy>p,
.book-description,
.research-authors,
.research-meta,
.study-research-credit,
.crossref-citation-row p,
.crossref-note p,
.crossref-update p,
.coursequest-intro p,
.coursequest-result p,
.coursequest-status,
.coursequest-credit,
.assignment-detail-description p,
.assignment-source-box p,
.assignment-why-box li,
#assignmentBreakdownList span,
.focus-why-list span,
.class-workspace-grid small{
  font-size:var(--sempli-text-sm)!important;
  line-height:1.5;
}

/* Labels, metadata, badges and pills */
.panel-kicker,
.hero-kicker,
.eyebrow,
.class-code,
.profile-text span,
.class-stat span,
.stat-card span,
.stat-card small,
.due-badge,
.source-pill,
.connected-pill,
.class-connected-badges span,
.nav-count,
.future-badge,
.google-status-badge,
.study-resource-source,
.research-oa,
.research-cites,
.book-result-badges span,
.book-result-meta span,
.crossref-meta b,
.crossref-citations-head small,
.coursequest-search-form label,
.coursequest-prefill-note span,
.assignment-detail-grid span,
.assignment-detail-code,
.flashcard-face-label,
.grades-classes-head p{
  font-size:var(--sempli-label)!important;
}

/* Tiny utility text should never become unreadably small */
.quick-action-head,
.quick-action-menu kbd,
.word-chip small,
.research-external-link small,
.google-calendar-details span,
.health-metrics span,
.workload-legend,
.semester-time-meta,
.career-nav-badge,
[class*="career-"][class*="badge"],
[class*="career-"][class*="meta"],
[class*="grade-"][class*="meta"],
[class*="grade-"][class*="badge"]{
  font-size:var(--sempli-micro)!important;
}

/* Card and section titles */
.panel h3,
.panel-head h3,
.class-card h3,
.study-resource-head h3,
.assignment-detail-modal h3,
.class-detail-section h4,
.book-result-copy h4,
.research-result-card h4{
  font-size:18px!important;
  line-height:1.35;
}

/* Buttons stay readable and consistent */
.primary-btn,
.dark-btn,
.outline-btn,
.text-btn,
.class-details-link,
.task-detail-btn,
.book-result-actions a,
.book-result-actions button,
.research-result-actions a,
.research-result-actions button,
.crossref-citation-row button{
  font-size:13px!important;
}

/* Navigation */
.nav-item{
  font-size:15px!important;
}
.sidebar .brand-copy strong{
  font-size:18px!important;
}
.sidebar .brand-copy span{
  font-size:13px!important;
}

/* Career: normalize the many older 9–11px declarations */
#view-career p,
#view-career button,
#view-career input,
#view-career select,
#view-career textarea{
  font-size:14px!important;
}
#view-career small,
#view-career [class*="meta"],
#view-career [class*="copy"] small{
  font-size:13px!important;
}
#view-career [class*="badge"],
#view-career [class*="kicker"],
#view-career [class*="label"]{
  font-size:11px!important;
}

/* Grades: same readable hierarchy as the rest of Sempli */
#view-grades p,
#view-grades button,
#view-grades input,
#view-grades select,
#view-grades textarea{
  font-size:14px!important;
}
#view-grades small,
#view-grades [class*="meta"],
#view-grades [class*="copy"]{
  font-size:13px!important;
}
#view-grades [class*="badge"],
#view-grades [class*="kicker"],
#view-grades [class*="label"]{
  font-size:11px!important;
}

/* Mobile keeps the same readable floor instead of shrinking text */
@media(max-width:700px){
  body{font-size:15px;}
  .app-shell p,
  .app-shell li,
  .app-shell input,
  .app-shell select,
  .app-shell textarea,
  .app-shell button,
  .modal p,
  .modal li{
    font-size:14px!important;
  }
  .panel h3,
  .panel-head h3,
  .class-card h3{
    font-size:17px!important;
  }
}

/* Ask Sempli interactive response actions */
.sempli-response-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.sempli-response-actions button{
  min-height:38px;
  border:1px solid #d0d5dd;
  background:#fff;
  color:#344054;
  border-radius:10px;
  padding:8px 11px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:13px!important;
  font-weight:800;
  cursor:pointer;
}
.sempli-response-actions button:first-child{
  background:#101828;
  color:#fff;
  border-color:#101828;
}
.sempli-response-actions button:hover{
  transform:translateY(-1px);
}
.sempli-response-actions button span{
  font-size:12px;
}

/* Ask Sempli math rendering */
.message.assistant .message-body,
.copilot-message p{
  color:#101828;
}

.sempli-math-inline{
  display:inline-block;
  max-width:100%;
  vertical-align:middle;
  margin:0 .08em;
  color:#344054;
}

.sempli-math-display{
  display:block;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  margin:14px 0;
  padding:16px 18px;
  border-radius:12px;
  background:#f8fafc;
  border:1px solid #d0d5dd;
  text-align:center;
  color:#344054;
}

.sempli-math-display .katex-display{
  margin:0;
  overflow-x:auto;
  overflow-y:hidden;
}

.sempli-math-display .katex{
  font-size:1.38em;
  color:#344054;
  font-weight:600;
}

.sempli-math-inline .katex{
  font-size:1.16em;
  color:#344054;
  font-weight:600;
}

/* Worked-math explanation hierarchy */
.message.assistant .message-body strong,
.copilot-message p strong{
  color:#101828;
  font-weight:800;
}

.message.assistant .message-body br + strong,
.copilot-message p br + strong{
  display:inline-block;
  margin-top:10px;
}

@media(max-width:700px){
  .sempli-math-display{
    padding:13px 12px;
  }
  .sempli-math-display .katex{
    font-size:1.24em;
  }
  .sempli-math-inline .katex{
    font-size:1.08em;
  }
}


/* Ask Sempli chat contrast */
.copilot-message.user,
.copilot-message.user p{
  color:#ffffff;
}
.copilot-message.user > span{
  color:#cbd5e1;
}
.copilot-message.assistant,
.copilot-message.assistant p{
  color:#101828;
}
.copilot-message.assistant > span{
  color:#98a2b3;
}
.message.user,
.message.user .message-label,
.message.user p{
  color:#ffffff;
}
.message.assistant,
.message.assistant .message-label,
.message.assistant p{
  color:#101828;
}
.copilot-composer textarea{
  color:#101828;
}
.copilot-composer textarea::placeholder{
  color:#667085;
  opacity:1;
}