/* StudyBuddies 2.10.2 — Global Design System & Typography Lock
   Canonical production design layer. Loaded last on every public/admin surface. */

:root{
  --sb-font:"Nunito",ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* Brand + semantic roles */
  --sb-brand:#4f7cff;
  --sb-brand-strong:#2f5ed7;
  --sb-brand-ink:#15213b;
  --sb-accent:#22a89a;
  --sb-success:#168a68;
  --sb-warning:#b86a16;
  --sb-error:#c74646;

  /* Neutral surfaces */
  --sb-page:#f6f8fb;
  --sb-surface:#ffffff;
  --sb-surface-subtle:#f2f5f9;
  --sb-text:#1e293b;
  --sb-text-soft:#526079;
  --sb-muted:#6f7b8f;
  --sb-border:#e2e7ef;
  --sb-border-strong:#d4dbe6;

  /* Geometry */
  --sb-radius-xs:8px;
  --sb-radius-sm:10px;
  --sb-radius-md:14px;
  --sb-radius-lg:18px;
  --sb-radius-xl:22px;
  --sb-control-h:44px;
  --sb-control-h-compact:38px;

  /* Spacing */
  --sb-space-1:4px;
  --sb-space-2:8px;
  --sb-space-3:12px;
  --sb-space-4:16px;
  --sb-space-5:20px;
  --sb-space-6:24px;
  --sb-space-7:32px;

  /* Elevation */
  --sb-shadow-1:0 2px 8px rgba(21,33,59,.04);
  --sb-shadow-2:0 8px 24px rgba(21,33,59,.065);
  --sb-shadow-3:0 14px 34px rgba(21,33,59,.085);

  /* Type scale */
  --sb-type-xs:12px;
  --sb-type-sm:13px;
  --sb-type-body:15px;
  --sb-type-body-mobile:16px;
  --sb-type-control:14px;
  --sb-type-h4:16px;
  --sb-type-h3:18px;
  --sb-type-h2:24px;
  --sb-type-h1:32px;
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  font-family:var(--sb-font);
  background:var(--sb-page);
}

body,button,input,select,textarea{
  font-family:var(--sb-font)!important;
}

body{
  color:var(--sb-text);
  font-size:var(--sb-type-body)!important;
  line-height:1.5!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  color:var(--sb-text);
  font-weight:850;
  text-wrap:balance;
}
h1{font-size:clamp(28px,2.6vw,var(--sb-type-h1))!important;line-height:1.12!important;letter-spacing:-.025em!important}
h2{font-size:clamp(21px,2vw,var(--sb-type-h2))!important;line-height:1.18!important;letter-spacing:-.018em!important}
h3{font-size:var(--sb-type-h3)!important;line-height:1.25!important;letter-spacing:-.008em!important}
h4{font-size:var(--sb-type-h4)!important;line-height:1.3!important}

p,li{line-height:1.55}
small,.muted,.meta,.subtitle,.caption,.helperText{color:var(--sb-muted)}

label,.field label,.formLabel{
  color:var(--sb-text-soft);
  font-size:var(--sb-type-sm)!important;
  line-height:1.3!important;
  font-weight:800;
}

/* Form geometry */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea{
  color:var(--sb-text)!important;
  background:var(--sb-surface);
  border-color:var(--sb-border-strong);
  border-radius:var(--sb-radius-sm);
  font-size:var(--sb-type-body)!important;
  line-height:1.35!important;
}
input:not([type="checkbox"]):not([type="radio"]),
select{min-height:var(--sb-control-h)}
textarea{min-height:96px}

/* Canonical compact controls: single-line by design. */
:where(
  .btn,.button,.navBtn,.tab,.tabs button,[role="tab"],
  .filterTabs button,.qualificationSwitch button,.revisionViewSwitch button,
  .communityFeedTabs button,.feedFilters button,.sbWallTabs button,
  .sbWallPostTypes button,.sbWallActions button,.slhPostActions button,
  .sbBuddyHubShortcuts button,.sbNetTabs button,.sbNetSafetyActions button,
  .notificationTabs button,.notificationToolbar button,.plannerTabs button,
  .topicNavStrip button,.tpTabs button,.studySetTabs button,.safeNetTabs button,
  .tableActions button,.actionRail button
){
  min-height:var(--sb-control-h-compact);
  font-size:var(--sb-type-control)!important;
  line-height:1.15!important;
  font-weight:800;
  white-space:nowrap!important;
  text-overflow:ellipsis;
  overflow:hidden;
}

/* Primary call-to-action controls retain 44px touch geometry. */
:where(.btn.primary,.button.primary,.primaryAction,.primaryButton,.cta){
  min-height:var(--sb-control-h);
}

/* Navigation: one-line labels with deterministic containment. */
:where(.sideNav button,.adminNav button,.mobileNav button,.navItem,.navLink){
  white-space:nowrap!important;
}
:where(.sideNav button>span:not(.navChevron):not(.sbIconTile):not(.sbIcon),
       .adminNav button>span,.mobileNav button>span:not(.sbIcon)){
  min-width:0;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Cards/panels: consistent proportion without forcing fixed heights. */
:where(.panel,.card){
  height:auto;
  border-color:var(--sb-border);
  border-radius:var(--sb-radius-lg);
}
:where(.panel,.card):not([class*="hero"]):not([class*="Hero"]){
  box-shadow:var(--sb-shadow-1);
}

/* Tables: professional workspace defaults, module-specific widths may override. */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
th{
  color:var(--sb-text-soft);
  font-size:var(--sb-type-sm)!important;
  line-height:1.25!important;
  font-weight:850;
  text-align:left;
}
td{
  color:var(--sb-text);
  font-size:14px!important;
  line-height:1.4!important;
}
th,td{vertical-align:middle}

/* Compact semantic indicators. */
:where([class*="badge"],[class*="Badge"],[class*="status"],[class*="Status"],
       [class*="chip"],[class*="Chip"],[class*="tag"],[class*="Tag"]){
  font-size:var(--sb-type-xs)!important;
  line-height:1.2!important;
}

/* Accessibility */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid color-mix(in srgb,var(--sb-brand) 36%,transparent);
  outline-offset:2px;
}
button:disabled,.btn:disabled,.button:disabled{
  cursor:not-allowed;
}
img,svg,video,canvas{max-width:100%}

/* Learner surface */
body.learner-app{
  background:var(--sb-page);
}
body.learner-app .sideNav button{
  min-height:44px!important;
  font-size:14px!important;
  line-height:1.15!important;
  font-weight:800!important;
}
body.learner-app .navSectionTitle{
  font-size:11px!important;
  line-height:1.2!important;
  letter-spacing:.075em!important;
  color:var(--sb-muted)!important;
}
body.learner-app :where(.panel,.card)>:first-child{margin-top:0}
body.learner-app :where(.panel,.card)>:last-child{margin-bottom:0}

/* Admin / content production surfaces */
body.admin-app,body.content-studio{
  background:var(--sb-page);
  color:var(--sb-text)!important;
}
body.admin-app :where(.navBtn,.adminNav button,.sideNav button,.tab,.btn,.button),
body.content-studio :where(.navBtn,.tab,.btn,.button){
  font-size:var(--sb-type-control)!important;
  line-height:1.15!important;
}
body.admin-app :where(input,select),
body.content-studio :where(input,select){
  min-height:var(--sb-control-h);
}

/* Prevent compact controls from becoming two-line pills. */
:where(
  .navBtn,.tab,[role="tab"],.pill,.filterPill,.sortPill,.statusPill,
  .tableAction,.actionButton,.toolbar button
){
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Mobile is deliberately denser, not merely scaled desktop. */
@media(max-width:760px){
  body{
    font-size:var(--sb-type-body-mobile)!important;
  }
  h1{font-size:27px!important}
  h2{font-size:22px!important}
  h3{font-size:17px!important}
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{
    font-size:16px!important;
  }
  :where(.btn,.button,.navBtn,.tab,[role="tab"]){
    min-height:44px;
  }
  body.learner-app .mobileNav{
    min-height:68px;
  }
  body.learner-app .mobileNav button{
    min-height:56px!important;
    padding-inline:4px!important;
  }
  body.learner-app .mobileNav button span:not(.sbIcon){
    font-size:11.5px!important;
    line-height:1!important;
  }
  :where(.panel,.card){
    border-radius:var(--sb-radius-md);
  }
}

/* Respect users who reduce motion. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}