/**
 * Ghada Ataa — My Account & Learning Dashboard. A quiet side rail of the 11 sections and one panel at a
 * time: ruled rows instead of card grids, 8px icon tiles, 16px controls, real progress bars only.
 */
.ga-ac .ga-container {
  padding-inline: min(var(--ga-page-margin), var(--ga-space-400));
  max-inline-size: calc(var(--ga-layout-max-width-wide) + 2 * var(--ga-space-400));
}
.ga-ac { padding-block: var(--ga-space-300) var(--ga-space-600); }
.ga-ac [hidden] { display: none !important; }

.ga-ac-crumbs { display: flex; flex-wrap: wrap; gap: var(--ga-space-100); margin: 0 0 var(--ga-space-200); padding: 0; list-style: none; font: var(--ga-type-body-small); color: var(--ga-text-muted); }
.ga-ac-crumbs li + li::before { content: "/"; margin-inline-end: var(--ga-space-100); opacity: .5; }
.ga-ac-crumbs a { color: inherit; border-radius: 4px; }
.ga-ac-h1 { margin: 0 0 var(--ga-space-300); font: var(--ga-type-heading-h2); }

/* ═════════ Layout: rail + panel ═════════ */
.ga-ac-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--ga-space-400); align-items: start; }
.ga-ac-nav { position: sticky; inset-block-start: var(--ga-space-300); }
.ga-ac-nav ul { display: grid; gap: 2px; margin: 0; padding: var(--ga-space-100); list-style: none; border-radius: 16px; background: var(--ga-color-surface-warm-paper); }
.ga-ac-nav a {
  display: flex; align-items: center; gap: var(--ga-space-150, 12px);
  min-block-size: 40px; padding: 4px var(--ga-space-150, 12px) 4px 4px; border-radius: 12px;
  color: var(--ga-text-primary); font: var(--ga-type-body-small); font-weight: 600; text-decoration: none;
  transition: background-color .18s ease;
}
.ga-ac-nav a:hover { background: color-mix(in srgb, var(--ga-color-brand-vivid-purple) 8%, transparent); }
.ga-ac-nav a[aria-current="page"] { background: var(--ga-color-text-deep-ink); color: var(--ga-color-functional-white); }
.ga-ac-nav a[aria-current="page"] .ga-ac-tile { background: var(--ga-color-accent-fresh-lime); color: var(--ga-color-text-deep-ink); }
.ga-ac-nav a:focus-visible { outline: var(--ga-focus-ring-width) solid var(--ga-border-focus); outline-offset: 2px; }

.ga-ac-tile {
  display: inline-grid; place-items: center; flex: none;
  inline-size: 32px; block-size: 32px; border-radius: 8px;
  background: color-mix(in srgb, var(--ga-color-brand-vivid-purple) 10%, var(--ga-color-functional-white)); color: var(--ga-color-brand-vivid-purple);
}
.ga-ac-tile svg { inline-size: 18px; block-size: 18px; }
.ga-ac-tile--lg { inline-size: 44px; block-size: 44px; }
.ga-ac-tile--lg svg { inline-size: 22px; block-size: 22px; }

.ga-ac-panel { min-inline-size: 0; }
.ga-ac-section { display: grid; gap: var(--ga-space-300); }
.ga-ac-section > section { display: grid; gap: var(--ga-space-200); }

/* ═════════ Type ═════════ */
.ga-ac-head, .ga-ac-hello { display: grid; gap: var(--ga-space-100); }
.ga-ac-kicker { margin: 0; font: var(--ga-type-label-default); font-weight: 700; color: var(--ga-color-brand-vivid-purple); }
.ga-ac-h2 { margin: 0; font: var(--ga-type-heading-h3); }
.ga-ac-h3 { margin: 0; font: var(--ga-type-heading-h4); }
.ga-ac-h2:focus, .ga-ac-hello__title:focus { outline: none; }
.ga-ac-lead { margin: 0; max-inline-size: 64ch; font: var(--ga-type-body-default); color: var(--ga-text-muted); }
.ga-ac-muted { margin: 0; font: var(--ga-type-body-small); color: var(--ga-text-muted); }
.ga-ac-muted a, .ga-ac-lead a { color: var(--ga-color-brand-vivid-purple); }
.ga-ac-hello__title { margin: 0; font: var(--ga-type-heading-h2); }
.ga-ac-hello__title span { color: var(--ga-color-brand-electric-orange); }
.ga-ac-actions { display: flex; flex-wrap: wrap; gap: var(--ga-space-200); margin-block-start: var(--ga-space-200); }
.ga-ac-ext { inline-size: 16px; block-size: 16px; flex: none; }
.ga-ac-warn { margin: 0; padding: var(--ga-space-200) var(--ga-space-300); border-radius: 16px; background: var(--ga-color-functional-danger-10); color: var(--ga-text-danger); font: var(--ga-type-body-small); font-weight: 600; }

/* ═════════ Continue where you left off ═════════ */
.ga-ac-continue__card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--ga-space-300); align-items: center;
  padding: var(--ga-space-300); border-radius: 16px; background: var(--ga-color-text-deep-ink); color: var(--ga-color-functional-white);
}
.ga-ac-continue__card .ga-ac-tile { background: var(--ga-color-accent-fresh-lime); color: var(--ga-color-text-deep-ink); }
.ga-ac-continue__text { display: grid; gap: 6px; min-inline-size: 0; }
.ga-ac-continue__text small { font: var(--ga-type-body-small); opacity: .75; }
.ga-ac-continue__text p { margin: 0; font: var(--ga-type-body-default); opacity: .85; }
.ga-ac-continue__card .ga-ac-bar { background: rgb(255 255 255 / .18); }
.ga-ac-continue__card .ga-ac-bar i { background: var(--ga-color-accent-fresh-lime); }

/* ═════════ Progress bar (real, measured values only) ═════════ */
.ga-ac-bar { display: block; inline-size: 100%; max-inline-size: 360px; block-size: 6px; margin-block-start: 4px; border-radius: 3px; background: var(--ga-color-text-deep-ink-06); overflow: hidden; }
.ga-ac-bar i { display: block; block-size: 100%; background: var(--ga-color-brand-vivid-purple); transform-origin: right center; }

/* ═════════ Ruled rows ═════════ */
.ga-ac-rows, .ga-ac-eps { margin: 0; padding: 0; list-style: none; border-block-start: 2px solid var(--ga-color-text-deep-ink); }
.ga-ac-row, .ga-ac-ep { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--ga-space-100) var(--ga-space-200); align-items: center; padding-block: var(--ga-space-150, 12px); border-block-end: 1px solid var(--ga-border-default); }
.ga-ac-row:not(:has(> .ga-ac-tile)) { grid-template-columns: minmax(0, 1fr) auto; }
.ga-ac-row__text { display: grid; gap: 2px; min-inline-size: 0; }
.ga-ac-row__text small { font-size: 12px; font-weight: 700; color: var(--ga-text-muted); }
.ga-ac-row__text b { font: var(--ga-type-body-default); font-weight: 700; }
.ga-ac-row__text b a { color: inherit; text-decoration: none; border-radius: 4px; }
.ga-ac-row__text b a:hover { text-decoration: underline 2px var(--ga-color-accent-fresh-lime); text-underline-offset: 6px; }
.ga-ac-row__meta { font: var(--ga-type-body-small); color: var(--ga-text-muted); }
.ga-ac-ep__n { display: inline-grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 8px; background: var(--ga-color-surface-warm-paper); font-weight: 700; }
.ga-ac-ep.is-done .ga-ac-ep__n { background: var(--ga-color-accent-fresh-lime); }
.ga-ac-status { font-weight: 700; }
.ga-ac-status--active { color: var(--ga-color-brand-vivid-purple); }
.ga-ac-status--completed { color: var(--ga-color-functional-success, #1f7a4a); }

/* ═════════ Overview pieces ═════════ */
.ga-ac-stats { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; border-block: 1px solid var(--ga-border-default); }
.ga-ac-stats li { flex: 1 1 140px; }
.ga-ac-stats li + li { border-inline-start: 1px solid var(--ga-border-default); }
.ga-ac-stats a { display: grid; gap: 2px; padding: var(--ga-space-200) var(--ga-space-300); color: inherit; text-decoration: none; border-radius: 8px; }
.ga-ac-stats a:hover b { color: var(--ga-color-brand-vivid-purple); }
.ga-ac-stats b { font: var(--ga-type-heading-h3); }
.ga-ac-stats span { font: var(--ga-type-body-small); color: var(--ga-text-muted); }
.ga-ac-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--ga-space-300); margin: 0; padding: 0; list-style: none; }
.ga-ac-links a { display: flex; align-items: center; gap: var(--ga-space-200); min-block-size: 48px; border-block-end: 1px solid var(--ga-border-default); color: var(--ga-text-primary); font: var(--ga-type-label-default); font-weight: 600; text-decoration: none; }
.ga-ac-links a > span:nth-child(2) { flex: 1; }
.ga-ac-links a:hover { color: var(--ga-color-brand-vivid-purple); }

/* ═════════ "This lives on ghadaata.com" note ═════════ */
.ga-ac-live { display: grid; gap: var(--ga-space-200); padding: var(--ga-space-300); border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--ga-color-brand-vivid-purple) 45%, transparent); background: color-mix(in srgb, var(--ga-color-brand-vivid-purple) 4%, var(--ga-color-functional-white)); }
.ga-ac-live p { margin: 0; font: var(--ga-type-body-small); }
.ga-ac-live__links { display: flex; flex-wrap: wrap; gap: var(--ga-space-100) var(--ga-space-300); margin: 0; padding: 0; list-style: none; }
.ga-ac-live__links a { display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; color: var(--ga-color-brand-vivid-purple); font: var(--ga-type-label-default); font-weight: 700; text-underline-offset: 6px; border-radius: 4px; }

/* ═════════ Empty states ═════════ */
.ga-ac-empty { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ga-space-200); align-items: start; padding: var(--ga-space-300); border-radius: 16px; background: var(--ga-color-surface-warm-paper); }
.ga-ac-empty p { margin: var(--ga-space-100) 0 0; max-inline-size: 56ch; color: var(--ga-text-muted); }
.ga-ac-empty .ga-ac-tile { background: var(--ga-color-functional-white); }

/* ═════════ Saved books / cart note / achievements ═════════ */
.ga-ac-books { display: flex; flex-wrap: wrap; gap: var(--ga-space-300); margin: 0; padding: 0; list-style: none; }
.ga-ac-books li { inline-size: 132px; }
.ga-ac-books a { display: grid; gap: var(--ga-space-100); color: inherit; text-decoration: none; font: var(--ga-type-body-small); font-weight: 700; border-radius: 8px; }
.ga-ac-cover { display: grid; place-items: center; block-size: 176px; padding: 10px; border-radius: 16px; background: color-mix(in srgb, var(--ga-color-surface-warm-paper) 40%, #EFE2CE); }
.ga-ac-cover img { max-inline-size: 100%; max-block-size: 100%; inline-size: auto; block-size: auto; border-radius: 3px; box-shadow: 0 6px 12px rgb(38 29 48 / .18); }
.ga-ac-cover.is-noimg img { display: none; }
.ga-ac-books a:hover b { text-decoration: underline 2px var(--ga-color-accent-fresh-lime); text-underline-offset: 6px; }
.ga-ac-cartnote { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ga-space-200) var(--ga-space-300); padding: var(--ga-space-300); border-radius: 16px; background: var(--ga-color-surface-warm-paper); }
.ga-ac-cartnote p { flex: 1; margin: 0; }
.ga-ac-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-inline-start: 2px solid var(--ga-color-accent-fresh-lime); }
.ga-ac-timeline li { display: flex; align-items: center; gap: var(--ga-space-200); padding: var(--ga-space-200) var(--ga-space-300) var(--ga-space-200) 0; margin-inline-start: -19px; }
.ga-ac-timeline li > span:last-child { display: grid; gap: 2px; }
.ga-ac-timeline small { font: var(--ga-type-body-small); color: var(--ga-text-muted); }
.ga-ac-timeline .ga-ac-tile { background: var(--ga-color-accent-fresh-lime); color: var(--ga-color-text-deep-ink); }

.ga-ac-data { display: grid; gap: var(--ga-space-200); }
.ga-btn.is-armed { --_bg: var(--ga-color-functional-danger-10); color: var(--ga-text-danger); }

.ga-ac a:focus-visible, .ga-ac button:focus-visible { outline: var(--ga-focus-ring-width) solid var(--ga-border-focus); outline-offset: 2px; }

/* ═════════ Tablet / mobile: the rail becomes a scrollable strip ═════════ */
@media (max-width: 1023px) {
  .ga-ac-layout { grid-template-columns: minmax(0, 1fr); gap: var(--ga-space-300); }
  .ga-ac-nav { position: static; margin-inline: calc(-1 * min(var(--ga-page-margin), var(--ga-space-400))); }
  .ga-ac-nav ul { display: flex; gap: var(--ga-space-100); padding: 0 min(var(--ga-page-margin), var(--ga-space-400)) var(--ga-space-100); background: none; border-radius: 0; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: var(--ga-space-400); }
  .ga-ac-nav ul::-webkit-scrollbar { display: none; }
  .ga-ac-nav li { flex: none; }
  .ga-ac-nav a { min-block-size: 44px; padding: 4px var(--ga-space-200) 4px 4px; border-radius: var(--ga-radius-button); background: var(--ga-color-surface-warm-paper); white-space: nowrap; }
  .ga-ac-nav .ga-ac-tile { inline-size: 32px; block-size: 32px; }
  .ga-ac-panel { scroll-margin-block-start: var(--ga-space-300); }
}
@media (max-width: 640px) {
  .ga-ac-continue__card { grid-template-columns: minmax(0, 1fr); padding: var(--ga-space-300); }
  .ga-ac-continue__card .ga-btn { justify-self: stretch; justify-content: center; }
  .ga-ac-row, .ga-ac-ep { grid-template-columns: auto minmax(0, 1fr); }
  .ga-ac-row > .ga-btn, .ga-ac-ep > .ga-btn { grid-column: 2; justify-self: start; }
  .ga-ac-row:not(:has(> .ga-ac-tile)) > .ga-btn { grid-column: auto; }
  .ga-ac-empty { grid-template-columns: minmax(0, 1fr); padding: var(--ga-space-300); }
  .ga-ac-links { grid-template-columns: minmax(0, 1fr); }
  .ga-ac-stats li { flex-basis: 50%; }
  .ga-ac-stats li:nth-child(3) { border-inline-start: 0; }
  .ga-ac-stats li:nth-child(n+3) { border-block-start: 1px solid var(--ga-border-default); }
}
@media (prefers-reduced-motion: reduce) { .ga-ac-nav a { transition: none; } }