/* Authenticated application shell */
.app-shell {
  display: grid;
  min-height: 100dvh;
  grid-template-columns: var(--pp-sidebar) minmax(0, 1fr);
}

[dir="rtl"] .app-shell {
  direction: ltr;
  grid-template-columns: minmax(0, 1fr) var(--pp-sidebar);
}

[dir="rtl"] .app-shell > * {
  direction: rtl;
}

.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 90;
  display: flex;
  width: var(--pp-sidebar);
  flex-direction: column;
  padding: 24px 17px;
  border-inline-end: 1px solid var(--pp-border);
  background: var(--pp-paper);
}

[dir="rtl"] .app-sidebar {
  inset: 0 0 0 auto;
}

.app-brand {
  margin: 0 8px 34px;
}

.app-nav {
  display: grid;
  gap: 9px;
}

.app-nav a {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 13px;
  padding: 10px 13px;
  border-radius: var(--pp-radius-control);
  color: var(--pp-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  overflow-wrap: anywhere;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}

.app-nav a[aria-current="page"] {
  color: var(--pp-green-deep);
  background: var(--pp-mint-soft);
  box-shadow: inset 0 0 0 2px var(--pp-success-border), 0 3px 0 var(--pp-success-border);
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
  .app-nav a:not([aria-current="page"]):hover {
    color: var(--pp-green-deep);
    background: var(--pp-mint-soft);
    transform: translateX(2px);
  }

  [dir="rtl"] .app-nav a:not([aria-current="page"]):hover {
    transform: translateX(-2px);
  }
}

.app-nav svg,
.app-bottom-nav svg {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.app-nav-secondary {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--pp-border);
}

.app-workspace {
  min-width: 0;
  grid-column: 2;
}

[dir="rtl"] .app-workspace {
  grid-column: 1;
}

.app-topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 80;
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px clamp(24px, 4vw, 54px);
  border-bottom: 1px solid var(--pp-border);
  background: rgba(246, 247, 245, 0.88);
  backdrop-filter: blur(20px);
}

.app-topbar > div:first-child {
  display: grid;
  min-width: 0;
}

.app-topbar > div:first-child strong {
  font-size: 1.1rem;
  line-height: 1.2;
}

.topbar-kicker {
  color: var(--pp-muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.topbar-actions {
  gap: 11px;
}

.player-avatar {
  position: relative;
  display: block;
  width: 45px;
  height: 45px;
  flex: 0 0 auto;
}

.player-avatar img {
  width: 100%;
  height: 100%;
  border: 2px solid var(--pp-paper);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--pp-success-border);
}

.player-avatar span {
  position: absolute;
  inset-inline-end: -6px;
  inset-block-end: -5px;
  display: grid;
  min-width: 21px;
  height: 21px;
  place-items: center;
  padding: 0 4px;
  border: 2px solid var(--pp-paper);
  border-radius: 8px;
  color: var(--pp-ink);
  background: var(--pp-yellow);
  font-size: 0.75rem;
  font-weight: 700;
}

.account-menu {
  position: relative;
  flex: 0 0 auto;
}

.account-menu > summary {
  display: grid;
  min-width: var(--pp-control-height-touch);
  min-height: var(--pp-control-height-touch);
  place-items: center;
  border-radius: 15px;
  cursor: pointer;
  list-style: none;
}

.account-menu > summary::-webkit-details-marker {
  display: none;
}

.account-menu > summary:focus-visible {
  outline: var(--pp-focus-width) solid var(--pp-focus-color);
  outline-offset: var(--pp-focus-offset);
}

.account-menu[open] > summary img {
  box-shadow: 0 0 0 3px var(--pp-green), var(--pp-shadow-sm);
}

.account-menu-panel {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 130;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(210px, calc(100vw - 24px));
  padding: 7px;
  border: 1px solid var(--pp-border);
  border-radius: 16px;
  background: var(--pp-paper);
  box-shadow: var(--pp-shadow);
}

.account-menu-panel nav {
  display: grid;
  gap: 2px;
}

.account-menu-panel form {
  margin: 4px 0 0;
  padding-block-start: 4px;
  border-block-start: 1px solid var(--pp-border);
}

.account-menu-panel a,
.account-menu-panel button {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border: 0;
  border-radius: 11px;
  color: var(--pp-ink);
  background: transparent;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: start;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.account-menu-panel a:hover,
.account-menu-panel a:focus-visible,
.account-menu-panel button:hover,
.account-menu-panel button:focus-visible {
  color: var(--pp-green-deep);
  background: var(--pp-mint-soft);
}

.account-menu-panel a:focus-visible,
.account-menu-panel button:focus-visible {
  outline: var(--pp-focus-width) solid var(--pp-focus-color);
  outline-offset: -3px;
}

.account-menu-panel svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.app-main {
  width: min(100%, calc(var(--pp-content) + 108px));
  min-height: calc(100dvh - 76px);
  margin: 0 auto;
  padding: 38px clamp(20px, 4vw, 54px) 70px;
}

/* Public product pages use the same readable content measure as the app.
   Marketing, account and legal pages keep their purpose-built layouts. */
.public-main > .section:not(.legal-page, .style-guide-page) {
  width: min(100%, calc(var(--pp-content) + 108px));
  margin-inline: auto;
  padding: clamp(22px, 3vw, 38px) clamp(16px, 4vw, 54px) clamp(42px, 5vw, 70px);
}

.public-main > .section:not(.legal-page, .style-guide-page) > .shell {
  margin-inline: auto;
}

.app-mobile-header,
.app-bottom-nav {
  display: none;
}

/* Today dashboard */
.dashboard-page {
  display: grid;
  gap: 18px;
}

.dashboard-notice {
  display: grid;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--pp-border);
  border-radius: 18px;
  background: var(--pp-paper);
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.dashboard-notice > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  color: var(--pp-ink);
  background: var(--pp-yellow);
  font-weight: 950;
}

.dashboard-notice.is-trial > span {
  background: var(--pp-mint);
}

.dashboard-notice strong,
.dashboard-notice p {
  margin: 0;
}

.dashboard-notice p {
  color: var(--pp-muted);
  font-size: 0.82rem;
}

.dashboard-notice > a {
  font-size: 0.82rem;
  font-weight: 900;
}

.app-inline-ad .ad-slot {
  margin-top: 0;
}

.plan-premium .app-inline-ad {
  display: none;
}

/* Focus shell for quiz and simulation */
.app-focus-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  min-height: 70px;
  border-bottom: 1px solid var(--pp-border);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(18px);
}

.focus-shell {
  display: grid;
  width: min(100% - 32px, 1160px);
  min-height: 70px;
  align-items: center;
  margin: 0 auto;
  grid-template-columns: 1fr auto 1fr;
}

.focus-back {
  display: inline-flex;
  width: fit-content;
  min-height: var(--pp-control-height-touch);
  align-items: center;
  gap: 6px;
  color: var(--pp-ink);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}

.focus-back svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

[dir="rtl"] .focus-back svg {
  transform: scaleX(-1);
}

.focus-title {
  display: grid;
  min-width: 0;
  text-align: center;
}

.focus-title strong {
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.focus-title small {
  color: var(--pp-muted);
  font-size: var(--pp-text-xs);
  font-weight: 600;
}

.focus-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 12px;
}

.focus-countdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--pp-text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.focus-countdown svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.focus-language-picker {
  justify-self: end;
}

.focus-main {
  min-height: calc(100dvh - 70px);
  padding: 26px 16px 58px;
  background: var(--pp-canvas);
}

.focus-main > .section {
  padding: 0;
}

.focus-main .shell {
  width: min(100%, 1080px);
}

/* Existing page primitives, rebuilt */
:where(.section) {
  padding: 0;
}

.app-main > .section + .section {
  margin-top: 32px;
}

:where(.shell) {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.stack {
  display: flex;
  flex-direction: column;
}

.gap-sm {
  gap: 10px;
}

.gap-md {
  gap: 22px;
}

.gap-lg {
  gap: 32px;
}

h1,
h2,
h3,
p {
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  color: var(--pp-ink);
  font-family: var(--pp-font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: var(--pp-heading-leading);
}

h1 {
  font-size: var(--pp-title-page);
}

h2 {
  font-size: var(--pp-title-section);
}

h3 {
  font-size: var(--pp-text-lg);
}

.app-main h1,
.app-main h2,
.app-main h3,
.focus-main h1,
.focus-main h2,
.focus-main h3 {
  margin-top: 0;
}

.eyebrow,
.tag,
.question-reference {
  color: var(--pp-green-deep);
  font-size: var(--pp-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[dir="rtl"] .eyebrow {
  letter-spacing: 0;
}

.lede {
  color: var(--pp-muted);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  line-height: 1.6;
}

.muted {
  color: var(--pp-muted);
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(18px, 4vw, 56px);
}

.section-heading > div {
  min-width: 0;
}

.section-heading .eyebrow,
.section-heading h1,
.section-heading h2,
.section-heading p {
  margin-block-end: 0;
}

.section-heading .lede {
  max-width: 560px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}

.data-card {
  position: relative;
  min-height: 166px;
  padding: 21px;
  overflow: hidden;
}

.data-card:nth-child(2) {
  background: var(--pp-mint-soft);
  border-color: var(--pp-success-border);
}

.data-card:nth-child(3) {
  background: var(--pp-yellow-soft);
  border-color: var(--pp-warning-border);
}

.data-card:nth-child(4) {
  background: var(--pp-coral-soft);
  border-color: var(--pp-danger-border);
}

.stat-figure {
  display: block;
  margin: 11px 0 6px;
  color: var(--pp-ink);
  font-size: clamp(1.75rem, 3vw, 2.65rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
}

.dual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.category-grid,
.learning-concept-grid,
.billing-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.billing-plan-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.progress-card {
  padding: 20px;
}

.hero-actions,
.section-actions,
.quiz-answer-row,
.cta-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.detail-list {
  display: grid;
  gap: 9px;
  padding: 0;
  list-style: none;
}

.detail-list li {
  padding-block: 8px;
  border-bottom: 1px solid var(--pp-border);
}