/* RUSHD Design System — phase 1
   A restrained final layer for type, rhythm, controls and runtime states.
   Signature and visual pages retain their own art direction. */

:root{
  --rds-font:"Almarai",Tahoma,Arial,sans-serif;
  --rds-editorial-max:1280px;
  --rds-interactive-max:1360px;
  --rds-visual-max:1440px;
  --rds-gutter-double:48px;
  --rds-section-space:clamp(40px,5vw,72px);
  --rds-header-gap:clamp(24px,3.5vw,44px);
  --rds-card-gap:clamp(12px,1.7vw,22px);
  --rds-title:clamp(34px,3.25vw,44px);
  --rds-subtitle:clamp(24px,2.2vw,30px);
  --rds-card-title:clamp(18px,1.35vw,22px);
  --rds-body:16px;
  --rds-card-body:15px;
  --rds-leading:1.9;
  --rds-leading-compact:1.72;
  --rds-text:#fbfaf6;
  --rds-muted:#ddd7cc;
  --rds-soft:#bdb7ad;
  --rds-gold:#f0cf8d;
  --rds-surface:#15251a;
  --rds-surface-raised:#1a2c1f;
  --rds-line:rgba(255,255,255,.14);
  --rds-radius:18px;
  --rds-control-radius:12px;
  --rds-focus:#f0cf8d;
}

html,body,
main#mainContent :where(button,input,select,textarea){
  font-family:var(--rds-font)!important;
}

[hidden]{display:none!important}

/* Page families: shared proportions without flattening their identities. */
main#mainContent > :is(
  #ceoMessage,#judgeExperience,#issueFile,#digitalJourney,#beforeAfter,
  #nonFinancialWin,#businessLanguage,#governanceDecision,#boardMinute,
  #leadershipInterview,#insideLegalCircle,#regulatoryIntelligence,#casesHub,
  #platformExperience,#subsidiarySpotlight,#contractClinic,#articles,
  #governanceVision,#about,#storiesTold,#rushd360Labs,#aiUnderMicroscope,
  #qiwaIntelligence,#rushd2030
){
  width:min(calc(100% - var(--rds-gutter-double)),var(--rds-editorial-max))!important;
  min-height:auto!important;
  margin-inline:auto!important;
  padding-block:var(--rds-section-space)!important;
}

main#mainContent > :is(
  #employeeDecisionTest,#decisionRoom,#rushdFit,#legalLanguage,
  #courtIntelligence,#boardSimulation,#preSign60,#rushdIntelligenceTest,
  #rushdPlay,#rushdRewards
){
  width:min(calc(100% - var(--rds-gutter-double)),var(--rds-interactive-max))!important;
  margin-inline:auto!important;
  padding-block:var(--rds-section-space)!important;
}

main#mainContent > :is(
  #rushdImpact,#commonMyna,#rushdTv,#issueBreak,#rushdCartoon,
  #fictionalEmployeeOfTheMonth,#didYouKnow,#preventionDirham,#rushdCoin,
  #rushdAtlas,#sleepingClause,#decisionDebt,#absentSeat
){
  width:min(calc(100% - var(--rds-gutter-double)),var(--rds-visual-max))!important;
  margin-inline:auto!important;
}

/* Common editorial hierarchy. Hero/signature display type remains untouched. */
main#mainContent :where(
  .section-title,.editorial-hero h2,.r360-hero h2,.reg-intel-head h1,.reg-intel-head h2,
  .case-head h2,.clinic-head h2,.spotlight-title h2,.articles-header h2,
  .vision h2
){
  max-width:24ch;
  margin-block-start:0;
  font-size:var(--rds-title)!important;
  font-weight:800!important;
  line-height:1.28!important;
  letter-spacing:-.022em!important;
  text-wrap:balance;
}

main#mainContent :where(
  .editorial-hero,.r360-hero,.reg-intel-head,.case-head,.clinic-head,
  .spotlight-title,.articles-header
){
  min-height:0!important;
  margin-block-end:var(--rds-header-gap)!important;
}

main#mainContent :where(
  .section-subtitle,.section-description,.section-lead,.section-copy,
  .editorial-hero>p,.r360-hero>p,.reg-intel-head>p,.case-head>p,
  .clinic-head>p,.articles-header>p
){
  max-width:74ch!important;
  color:var(--rds-muted)!important;
  font-size:var(--rds-body)!important;
  line-height:var(--rds-leading)!important;
  opacity:1!important;
}

main#mainContent :where(
  .r360-card,.r360-tile,.content-intel-card,.language-card,.board-q,
  .decision-card,.employee-answer-option,.case-pillar,.clinic-card,
  .spotlight-panel,.article-card,.reg-item,.digital-cap,.issue-pillar,
  .shift-card,.feature-side
) :where(h3,h4){
  font-size:var(--rds-card-title)!important;
  line-height:1.55!important;
}

main#mainContent :where(
  .r360-card,.r360-tile,.content-intel-card,.language-card,.board-q,
  .decision-card,.employee-answer-option,.case-pillar,.clinic-card,
  .spotlight-panel,.article-card,.reg-item,.digital-cap,.issue-pillar,
  .shift-card,.feature-side
) :where(p,li,dd){
  color:var(--rds-muted)!important;
  font-size:var(--rds-card-body)!important;
  line-height:var(--rds-leading-compact)!important;
  opacity:1!important;
}

main#mainContent :where(
  .r360-three,.r360-two,.r360-future-grid,.articles-grid,.decision-grid,
  .digital-capabilities,.issue-shift-grid,.content-intel-grid
){gap:var(--rds-card-gap)!important}

main#mainContent :where(.article-body,.editorial-copy,.modal-content) > p{
  max-width:76ch;
  font-size:var(--rds-body)!important;
  line-height:2!important;
}

/* Controls: consistent feel, accessible targets and visible state changes. */
main#mainContent > section :where(button,a[role="button"],input,select,textarea){
  font-family:var(--rds-font)!important;
}

main#mainContent > section :where(button,a[role="button"]){
  min-height:44px!important;
  border-radius:var(--rds-control-radius);
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease,
    color .18s ease,box-shadow .18s ease!important;
}

main#mainContent > section :where(button,a[role="button"]):not(:disabled):hover{
  transform:translateY(-1px);
}

main#mainContent > section :where(button,a[role="button"]):active{
  transform:translateY(0) scale(.985);
}

main#mainContent > section :where(button,input,select,textarea,a[role="button"]):focus-visible{
  outline:3px solid color-mix(in srgb,var(--rds-focus) 88%,#fff 12%)!important;
  outline-offset:3px!important;
  box-shadow:0 0 0 5px rgba(240,207,141,.13)!important;
}

main#mainContent > section :where(button:disabled,[aria-disabled="true"]){
  cursor:not-allowed!important;
  opacity:.58!important;
  transform:none!important;
}

main#mainContent > section :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  min-height:44px!important;
  border-color:var(--rds-line)!important;
  color:var(--rds-text)!important;
}

/* Predictable, readable loading, empty and error feedback. */
main#mainContent :where(
  .ri-status,.cm-status,.rtv-status,.dyk-loading,.rg-loading,.rw-empty,
  .search-empty,#rushdIntelligenceTest>[role="status"]
){
  max-width:760px;
  min-height:72px;
  margin-inline:auto;
  padding:16px 18px;
  border:1px solid var(--rds-line);
  border-radius:var(--rds-radius);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  color:var(--rds-muted)!important;
  font-size:14px!important;
  line-height:1.75!important;
}

main#mainContent :where(.rf-error,.rks-error,[role="alert"]){
  padding:16px 18px;
  border:1px solid rgba(239,118,118,.42)!important;
  border-radius:var(--rds-radius);
  background:rgba(126,28,28,.16)!important;
  color:#ffe5e5!important;
  line-height:1.75!important;
}

main#mainContent :where(.ri-status,.cm-status,.rtv-status,.dyk-loading,.rg-loading)[aria-busy="true"]{
  box-shadow:inset 3px 0 0 var(--rds-gold);
}

@media(max-width:720px){
  :root{
    --rds-gutter-double:24px;
    --rds-section-space:32px;
    --rds-header-gap:24px;
    --rds-title:clamp(30px,9vw,34px);
    --rds-subtitle:24px;
    --rds-body:15px;
    --rds-card-body:14px;
  }

  main#mainContent :where(
    .section-title,.editorial-hero h2,.r360-hero h2,.reg-intel-head h1,.reg-intel-head h2,
    .case-head h2,.clinic-head h2,.spotlight-title h2,.articles-header h2,
    .vision h2
  ){max-width:100%;line-height:1.34!important}

  main#mainContent :where(
    .section-subtitle,.section-description,.section-lead,.section-copy,
    .editorial-hero>p,.r360-hero>p,.reg-intel-head>p,.case-head>p,
    .clinic-head>p,.articles-header>p
  ){line-height:1.85!important}
}

@media(prefers-reduced-motion:reduce){
  main#mainContent > section :where(button,a[role="button"]){transition:none!important}
}
