:root {
  --home-focus: var(--theory);
  --home-focus-soft: var(--theory-soft);
  --home-deep: #123f48;
  --home-gold: #f1c95b;
  --home-shadow: 0 14px 38px rgba(23, 50, 58, .09);
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: linear-gradient(180deg, #dfecef 0, #f8fafa 34%, #edf3f3 100%);
  /* iOS paints the overscroll / bottom safe-area band with the solid
     background-color, never the gradient image — without this the dark
     theme-color used to bleed through as a blue strip under the bottom nav. */
  background-color: #edf3f3;
  color: var(--ink);
}

body {
  padding: max(12px, env(safe-area-inset-top)) 12px calc(94px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  overflow-x: hidden;
  /* Fill the whole viewport with the body gradient. min-height:100% above
     doesn't propagate (html has no fixed height), so the area under the
     content showed the html background — which comfort's Night Shift paints
     dark, producing a dark band under the bottom nav. */
  min-height: 100dvh;
}

body[data-subject="safety"] {
  --home-focus: var(--safety);
  --home-focus-soft: var(--safety-soft);
}

body.home-sheet-open {
  overflow: hidden;
}

button,
a,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--home-focus) 55%, white);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.app {
  position: relative;
  width: min(720px, 100%);
}

.header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 3px 2px 12px;
}

.logo {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(23, 50, 58, .16);
}

.brand {
  min-width: 0;
  flex: 1;
}

.brand h1 {
  margin: 0;
  font-size: 1.24rem;
  line-height: 1.1;
}

.brand p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .7rem;
}

.header-action {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .76);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-weight: 950;
  letter-spacing: 2px;
}

.focus-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-bottom: 10px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 6px 20px rgba(23, 50, 58, .05);
}

.focus-switch button {
  min-height: 43px;
  padding: 0 8px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 900;
}

.focus-switch button.active {
  background: #fff;
  color: var(--home-focus);
  box-shadow: 0 4px 13px rgba(23, 50, 58, .1);
}

.resume-card {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 61px;
  margin-bottom: 10px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--home-focus) 16%, var(--line));
  border-radius: 18px;
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.resume-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 13px;
  background: var(--home-focus-soft);
  font-size: 1.1rem;
}

.resume-copy {
  min-width: 0;
  flex: 1;
}

.resume-copy b,
.resume-copy small {
  display: block;
}

.resume-copy b {
  font-size: .8rem;
}

.resume-copy small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: .64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resume-go {
  color: var(--home-focus);
  font-size: .68rem;
  font-weight: 950;
  white-space: nowrap;
}

.hero {
  --focus: var(--home-focus);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 320px;
  margin-bottom: 10px;
  padding: 19px;
  border-radius: 29px;
  background: linear-gradient(145deg, #123f48, color-mix(in srgb, var(--focus) 78%, #123f48));
  color: #fff;
  box-shadow: 0 20px 48px color-mix(in srgb, var(--focus) 22%, transparent);
}

.hero.safety {
  --focus: var(--safety);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(10, 41, 48, .9) 0%, rgba(10, 41, 48, .66) 55%, rgba(10, 41, 48, .25) 100%);
  pointer-events: none;
}

.hero .home-construction-scene {
  z-index: 1;
  opacity: .55;
  transform: scale(1.03);
}

.hero .home-hero-aurora {
  z-index: 2;
}

.hero-top,
.hero-chips,
.daily-progress,
.hero-actions {
  position: relative;
  z-index: 4;
}

.hero-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 13px;
  align-items: center;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, .7);
  font-size: .67rem;
  font-weight: 950;
  letter-spacing: .04em;
}

.hero h2 {
  margin: 6px 0 6px;
  font-size: clamp(1.28rem, 5vw, 1.62rem);
  line-height: 1.25;
}

.hero-copy p {
  max-width: 39ch;
  margin: 0;
  color: rgba(255, 255, 255, .79);
  font-size: .75rem;
  line-height: 1.55;
}

.ring {
  position: relative;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#fff var(--pct, 0%), rgba(255, 255, 255, .16) 0);
  color: #fff;
  text-decoration: none;
}

.ring::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--focus) 72%, #123f48);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.ring strong,
.ring span {
  position: relative;
  z-index: 1;
}

.ring strong {
  margin-top: -8px;
  font-size: 1.45rem;
}

.ring span {
  position: absolute;
  bottom: 23px;
  font-size: .5rem;
  opacity: .72;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .86);
  font-size: .59rem;
  font-weight: 850;
  text-decoration: none;
  backdrop-filter: blur(8px);
}

.hero-chip.at-risk {
  border-color: rgba(255, 211, 99, .34);
  background: rgba(255, 198, 55, .15);
  color: #ffe7a4;
}

.daily-progress {
  margin-top: 14px;
  padding: 10px 11px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(4, 31, 37, .22);
  backdrop-filter: blur(8px);
}

.daily-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  color: rgba(255, 255, 255, .72);
  font-size: .61rem;
}

.daily-progress-head b {
  color: #fff;
  font-size: .66rem;
}

.daily-progress-track {
  width: 100%;
  height: 7px;
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: var(--home-gold);
  appearance: none;
  -webkit-appearance: none;
}

.daily-progress-track::-webkit-progress-bar {
  border-radius: inherit;
  background: rgba(255, 255, 255, .14);
}

.daily-progress-track::-webkit-progress-value {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--home-gold), #fff2b2);
  box-shadow: 0 0 13px rgba(241, 201, 91, .35);
  transition: width .55s var(--ease);
}

.daily-progress-track::-moz-progress-bar {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--home-gold), #fff2b2);
  box-shadow: 0 0 13px rgba(241, 201, 91, .35);
  transition: width .55s var(--ease);
}

.hero-actions {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 8px;
  margin-top: 11px;
}

.hero-actions a,
.hero-actions button {
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: 14px;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 950;
  text-align: center;
  text-decoration: none;
}

.hero-primary {
  border: 0;
  background: #fff;
  color: #123f48;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .1);
}

.hero-secondary {
  /* Was translucent white over the hero (washed out, hard on the eyes —
     owner complaint). Warm gold matching the hero progress bar reads clearly
     against the teal without competing with the white primary button. */
  border: 0;
  background: linear-gradient(160deg, #f7d98b, #edbd4e);
  color: #4a3507;
  font-size: .82rem;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.hero-secondary:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .14);
}

.skeleton {
  animation: homeSkeleton 1.15s ease-in-out infinite alternate;
}

@keyframes homeSkeleton {
  from { opacity: .62; }
  to { opacity: .88; }
}

.training-launcher {
  width: 100%;
  min-height: 73px;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 9px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--home-focus) 15%, var(--line));
  border-radius: 20px;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  box-shadow: var(--home-shadow);
  cursor: pointer;
  text-align: start;
}

.training-launcher-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 15px;
  background: linear-gradient(145deg, var(--home-deep), color-mix(in srgb, var(--home-focus) 64%, var(--home-deep)));
  color: #fff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--home-focus) 21%, transparent);
  font-size: 1.25rem;
}

.training-launcher-copy {
  min-width: 0;
  flex: 1;
}

.training-launcher-copy b,
.training-launcher-copy small {
  display: block;
}

.training-launcher-copy b {
  font-size: .85rem;
}

.training-launcher-copy small {
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: .61rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-launcher-go {
  color: var(--home-focus);
  font-size: .62rem;
  font-weight: 950;
  white-space: nowrap;
}

.training-launcher-go i {
  display: inline-block;
  margin-inline-start: 3px;
  font-style: normal;
}

.footer {
  padding: 7px 4px;
  color: var(--muted);
  font-size: .6rem;
  text-align: center;
}

.sheet-backdrop {
  position: fixed;
  inset: 0;
  /* Above the bottom nav (z-index 9000) so an open sheet fully covers it and
     the backdrop dims/blocks the nav instead of the nav drawing over the sheet. */
  z-index: 9400;
  background: rgba(7, 28, 33, .46);
  opacity: 0;
  backdrop-filter: blur(3px);
  transition: opacity .25s ease;
}

.sheet-backdrop.is-open {
  opacity: 1;
}

.home-sheet {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  /* Sit above the bottom nav (z-index 9000) so the full sheet is visible and no
     row is hidden behind the nav bar. */
  z-index: 9500;
  max-height: min(82vh, 720px);
  overflow-y: auto;
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
  border-radius: 27px 27px 0 0;
  background: #f8fbfb;
  box-shadow: 0 -20px 70px rgba(7, 28, 33, .24);
  transform: translateY(105%);
  transition: transform .34s var(--ease);
  overscroll-behavior: contain;
}

.home-sheet.is-open {
  transform: translateY(0);
}

.sheet-handle {
  width: 42px;
  height: 5px;
  margin: 2px auto 12px;
  border-radius: 999px;
  background: #c8d3d5;
}

.sheet-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.sheet-header span {
  color: var(--home-focus);
  font-size: .57rem;
  font-weight: 950;
  letter-spacing: .08em;
}

.sheet-header h2 {
  margin: 3px 0 0;
  font-size: 1.08rem;
}

.sheet-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .65rem;
  line-height: 1.45;
}

.sheet-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
}

.challenge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-bottom: 10px;
}

.challenge-card {
  --challenge: var(--home-focus);
  position: relative;
  min-height: 142px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--challenge) 18%, var(--line));
  border-radius: 18px;
  background: linear-gradient(155deg, #fff 0%, color-mix(in srgb, var(--challenge) 7%, #fff) 100%);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.challenge-card::after {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  left: -31px;
  bottom: -35px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--challenge) 9%, transparent);
}

.challenge-boss { --challenge: #8a5e24; }
.challenge-site { --challenge: var(--theory); }
.challenge-mock { --challenge: #526e97; }
.challenge-medals { --challenge: #8a5b9d; }

.challenge-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  margin-bottom: 9px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--challenge) 12%, #fff);
  font-size: 1.08rem;
}

.challenge-card b,
.challenge-card small,
.challenge-card em {
  position: relative;
  z-index: 1;
  display: block;
}

.challenge-card b {
  font-size: .76rem;
}

.challenge-card small {
  margin-top: 4px;
  color: var(--muted);
  font-size: .56rem;
  line-height: 1.4;
}

.challenge-card em {
  margin-top: auto;
  padding-top: 9px;
  color: var(--challenge);
  font-size: .59rem;
  font-style: normal;
  font-weight: 950;
}

.sheet-row {
  min-height: 57px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin-top: 7px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
}

.sheet-row > span:first-child {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--home-focus-soft);
}

.sheet-row b,
.sheet-row small {
  display: block;
}

.sheet-row b {
  font-size: .72rem;
}

.sheet-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: .56rem;
}

.sheet-row i {
  color: var(--home-focus);
  font-style: normal;
  font-weight: 950;
}

/* The comfort center opens from a sheet row here instead of the floating
   eye button, which crowded the subject switcher on the redesigned home. */
button.sheet-row {
  width: 100%;
  text-align: right;
  cursor: pointer;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.tools-grid a {
  min-height: 91px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 5px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  font-size: .64rem;
  text-align: center;
  text-decoration: none;
}

.tools-grid a span {
  font-size: 1.24rem;
}

.tools-grid a b {
  font-size: .63rem;
}

.resume-card,
.training-launcher,
.challenge-card,
.sheet-row,
.tools-grid a,
.header-action {
  transition: transform .15s var(--ease), box-shadow .18s ease, border-color .18s ease;
}

.resume-card:active,
.training-launcher:active,
.challenge-card:active,
.sheet-row:active,
.tools-grid a:active,
.header-action:active {
  transform: scale(.975);
}

@media (min-width: 760px) {
  .home-sheet {
    right: 50%;
    left: auto;
    width: min(620px, calc(100vw - 28px));
    border-radius: 27px 27px 0 0;
    transform: translate(50%, 105%);
  }

  .home-sheet.is-open {
    transform: translate(50%, 0);
  }
}

@media (max-width: 520px) {
  .hero {
    min-height: 326px;
    padding: 17px;
  }

  .hero-top {
    grid-template-columns: minmax(0, 1fr) 82px;
  }

  .ring {
    width: 82px;
    height: 82px;
  }

  .ring span {
    bottom: 20px;
  }

  .hero-actions {
    grid-template-columns: 1fr;
  }

  .hero-actions a,
  .hero-actions button {
    min-height: 47px;
  }

  .training-launcher-go {
    font-size: .57rem;
  }
}

@media (max-width: 370px) {
  body {
    padding-inline: 9px;
  }

  .hero {
    padding-inline: 14px;
  }

  .hero-chips {
    gap: 4px;
  }

  .hero-chip {
    padding-inline: 6px;
    font-size: .54rem;
  }

  .challenge-grid {
    grid-template-columns: 1fr;
  }

  .challenge-card {
    min-height: 116px;
  }

  .tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Build 79 — the quick-tools sheet mixed unrelated items in one flat grid
   (owner). Small labels now split it into الدراسة / أدوات / البيانات. */
.tools-group-label {
  grid-column: 1 / -1;
  font-size: .68rem;
  font-weight: 900;
  color: #7b6a5c;
  margin: 4px 2px -2px;
  letter-spacing: .2px;
}

/* Build 80 — the training sheet scrolled internally (owner: one screen, no
   roll). Compact cards + rows so the whole sheet fits the viewport. */
.training-sheet .challenge-card { min-height: 108px; padding: 10px 11px; border-radius: 15px; }
.training-sheet .challenge-card b { font-size: .82rem; }
.training-sheet .challenge-card small { font-size: .6rem; }
.training-sheet .challenge-card em { font-size: .62rem; margin-top: 4px; }
.training-sheet .challenge-icon { width: 34px; height: 34px; font-size: 1rem; border-radius: 11px; margin-bottom: 5px; }
.training-sheet .sheet-row { min-height: 48px; margin-top: 6px; padding: 6px 10px; }
.training-sheet .sheet-row b { font-size: .76rem; }
.training-sheet .sheet-row small { font-size: .6rem; }
.training-sheet .sheet-header { margin-bottom: 6px; }
.training-sheet .sheet-header p { margin: 2px 0 0; font-size: .68rem; }

/* The update banner must not float over an open sheet like an error bar.
   The sheets live inside the page's stacking contexts, so hide the banner
   while any sheet is open and bring it back on close. */
body:has(.home-sheet:not([hidden])) .app-runtime-notice{visibility:hidden!important}

/* --- Coming-soon teaser (owner request 2026-08-13): same skeleton as the
   training launcher above it, so it reads as part of the app. --- */
.coming-soon-launcher{margin-top:2px}
.coming-soon-launcher .training-launcher-icon{
  background:linear-gradient(145deg,#b5622a,#d98324);
  box-shadow:0 8px 20px rgba(217,131,36,.22);
}
.cs-chip{
  background:linear-gradient(120deg,#fff3e2,#ffe9cd);
  color:#8b5d17;border:1px solid rgba(217,131,36,.35);
  border-radius:999px;padding:4px 10px;
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
}
.cs-chip i{font-style:normal;animation:csFlicker 1.6s ease-in-out infinite;display:inline-block}
@keyframes csFlicker{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@media(prefers-reduced-motion:reduce){.cs-chip i{animation:none}}
.cs-toast{
  position:fixed;z-index:9998;pointer-events:none;
  left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));
  bottom:calc(96px + env(safe-area-inset-bottom));
  margin:auto;max-width:480px;padding:11px 14px;border-radius:15px;
  background:#163b43;color:#fff;text-align:center;
  font:800 .72rem/1.5 inherit;box-shadow:0 14px 40px rgba(0,0,0,.24);
  opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;
}
.cs-toast.show{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.cs-toast{transition:none}}