.app__layout { position: relative; }
/* A vertical account capsule at the top right. On compact screens it
   turns on its side in the top bar, leaving the reading area clear. */
.account-pill { position: fixed; top: max(20px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); z-index: 25; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 46px; padding: 3px; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-pill); }
.account-pill--row { position: relative; top: auto; right: auto; flex-direction: row; width: auto; padding: 2px 3px; }
@media (min-width: 1101px) {
  .app__main { padding-right: max(var(--main-pad-x), 88px); }
}
.pill-control { position: relative; display: grid; place-items: center; width: 38px; min-height: 38px; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink); cursor: default; transition: background-color var(--dur-press) var(--ease-out); }
button.pill-control { cursor: pointer; }
.pill-control:hover, .account-trigger[aria-expanded="true"] { background: var(--canvas-deep); }
.pill-divider { width: 18px; height: 1px; margin: 2px 0; background: var(--hairline); }
.account-pill--row .pill-divider { width: 1px; height: 18px; margin: 0 2px; }
.pill-soon svg { width: 18px; height: 18px; fill: none; stroke: var(--faint); stroke-width: 1.6; stroke-linecap: round; }
.pill-soon-ring { stroke-dasharray: 2.4 2.6; }
/* In the top bar the pill sits at the right edge, so its tooltips open below
   and to the left, never past the edge of the screen. */
.account-pill--row .tip { left: auto; right: 0; top: calc(100% + 8px); bottom: auto; transform: translateY(calc(var(--rise-sm) * -1)); }
.account-pill--row .has-tip:hover > .tip, .account-pill--row .has-tip:focus-visible > .tip { transform: translateY(0); }
.account-trigger { color: var(--ink); }
.account-trigger:disabled { opacity: .55; }
.account-user-icon { width: var(--icon-size); height: var(--icon-size); display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; color: var(--ink); background: var(--paper); }
.account-user-icon svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.account-streak { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 50px; padding: 4px 0; font-variant-numeric: tabular-nums; }
.account-pill--row .account-streak { grid-auto-flow: column; align-items: center; gap: 3px; width: auto; min-height: 38px; padding: 0 8px; }
.account-streak.is-pending strong { color: var(--muted); }
.account-streak.is-updated strong { animation: rh-pop var(--dur-control) var(--ease-out); }
.account-streak svg { width: 18px; height: 18px; fill: #ef6a2e; }
.account-streak strong { color: var(--ink); font-size: .8125rem; font-weight: 600; line-height: 1; }
.account-session-dot { position: absolute; right: 5px; bottom: 5px; width: 9px; height: 9px; border: 2px solid var(--paper); border-radius: 50%; background: var(--done); }
.account-dropdown { position: fixed; z-index: 80; width: min(280px, calc(100vw - 24px)); padding: 16px; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.account-dropdown:not([hidden]) { animation: rh-pop var(--dur-control) var(--ease-out); }
.account-dropdown > strong { display: block; font-size: .95rem; }
.account-email { display: block; color: var(--muted); font-size: .75rem; overflow-wrap: anywhere; margin-top: 5px; }
.account-dropdown button, .account-dropdown a { display: block; width: 100%; padding: 12px 8px; text-align: left; font-size: .82rem; background: none; border: 0; color: var(--navy-deep); border-radius: 8px; }
.account-dropdown button:hover, .account-dropdown a:hover { background: var(--surface); }
.account-sync { font-size: .75rem; color: var(--muted); line-height: 1.6; }
.account-dialog { border: 1px solid var(--hairline); border-radius: var(--radius-xl); padding: 0; width: min(540px, calc(100vw - 28px)); max-height: calc(100dvh - 32px); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-md); }
.account-dialog[open] { animation: rh-pop var(--dur-control) var(--ease-out); }
.account-dialog::backdrop { background: rgba(10, 34, 70, .35); animation: rh-fade var(--dur-control) var(--ease-out); }
.account-dialog-inner { padding: 32px; position: relative; }
.account-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; font-size: 1.5rem; line-height: 1; border-radius: 50%; border: 0; background: #f4f5fa; color: var(--muted); }
.account-dialog-art { display: flex; align-items: center; gap: 18px; padding: 12px 0 20px; }
.account-dialog-art > span { font-size: .62rem; letter-spacing: .12em; color: var(--muted); max-width: 120px; line-height: 1.8; }
.account-dialog h2 { font-size: 1.65rem; letter-spacing: -.045em; line-height: 1.25; margin: 0 0 12px; }
.account-dialog h3 { font-size: .92rem; }
.account-intro, .account-muted, .account-dialog p { font-size: .85rem; color: var(--muted); line-height: 1.75; }
.account-dialog form { display: grid; gap: 10px; margin-top: 22px; }
.account-dialog form > label { font-weight: 600; font-size: .8rem; margin-top: 5px; }
.account-dialog input:not([type=radio]) { background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; width: 100%; padding: 13px 15px; color: var(--navy-deep); font: inherit; font-size: .9rem; }
.account-dialog form > small { font-size: .73rem; color: var(--muted); }
.account-dialog .btn--primary { min-height: 46px; justify-content: center; margin-top: 10px; border-radius: 8px; }
.account-dialog :focus-visible, .account-dock :focus-visible, .account-settings :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.account-provider { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 12px; background: white; border: 1px solid var(--hairline); border-radius: 8px; margin-top: 10px; color: var(--navy-deep); }
.account-provider:first-of-type { margin-top: 22px; }
.google-mark { color: #3266cc; font-weight: 750; }
.apple-mark { color: #111827; width: 18px; height: 18px; display: inline-grid; place-items: center; }
.apple-mark svg { width: 18px; height: 18px; display: block; }
.account-apple { margin-top: 10px; }
.account-divider { display: flex; align-items: center; gap: 12px; font-size: .7rem; color: var(--muted); margin-top: 22px; }
.account-divider::before, .account-divider::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }
.account-links { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 15px; }
.account-links button, .account-switch button, .account-settings-actions button { background: none; padding: 8px 0; border: 0; color: var(--blue); font-size: .78rem; }
.account-switch { margin: 20px 0 0; padding-top: 12px; border-top: 1px solid var(--hairline); }
.account-notice, .account-import { padding: 18px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; margin-top: 20px; }
.account-notice p { margin: 8px 0 0; }
.account-message:not(:empty) { background: #edf8f3; color: var(--ink); border-radius: 8px; padding: 12px 15px; margin-bottom: 0; }
.account-message.is-error:not(:empty) { background: #fff0ed; color: var(--ink); }
.account-stats { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--hairline); background: white; border-radius: 8px; margin: 28px 0; }
.account-stats > div { display: grid; gap: 5px; padding: 22px; }
.account-stats > div + div { border-left: 1px solid var(--hairline); }
.account-stats strong { font-size: 1.8rem; }
.account-stats span { font-size: .8rem; color: var(--muted); }
.account-welcome { display: flex; align-items: center; gap: 26px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 8px; padding: 30px; }
.account-welcome h2 { font-size: 1.5rem; margin: 0 0 10px; }
.account-settings p { color: var(--muted); font-size: .86rem; line-height: 1.8; }
.account-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.account-settings-grid section { padding: 24px; border: 1px solid var(--hairline); border-radius: 8px; }
.account-settings h3 { font-size: 1rem; }
.account-settings-actions { display: flex; gap: 30px; border-top: 1px solid var(--hairline); margin-top: 30px; padding-top: 15px; }
.account-settings-actions .account-danger, .account-danger { color: var(--ink); }
.account-danger-button { background: #ac3745; color: white; margin-top: 12px; }
/* The bookmark: an icon button with a full 44px target, outlined until the
   topic is saved and filled in navy once it is. */
.bookmark { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 8px; margin-left: auto; }
.topic-bookmark { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-pill); background: transparent; color: var(--ink); transition: background-color var(--dur-press) var(--ease-out), border-color var(--dur-press) var(--ease-out); }
.topic-bookmark:hover, .topic-bookmark:focus-visible { background: var(--canvas-deep); border-color: var(--hairline); }
.bookmark-icon { width: 22px; height: 22px; fill: transparent; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; transition: fill var(--dur-control) var(--ease-out); }
.topic-bookmark.is-toggling .bookmark-icon { animation: rh-mark var(--dur-control) var(--ease-out); }
@keyframes rh-mark { 0% { transform: scale(1); } 45% { transform: scale(.82); } 100% { transform: scale(1); } }
.bookmark-status { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.bookmark-status:empty { display: none; }
.topic-bookmark[aria-pressed=true] .bookmark-icon { fill: var(--ink); }
.profile-page { display: grid; gap: 24px; }
.profile-identity { display: flex; align-items: center; gap: 20px; padding: 24px; border: 1px solid var(--hairline); border-radius: 8px; background: white; }
.profile-identity > div { flex: 1; min-width: 0; }
.profile-identity .eyebrow { margin-bottom: 4px; }
.profile-identity h2 { font-size: 1.45rem; }
.profile-identity p:last-child { color: var(--muted); font-size: .82rem; margin: 4px 0 0; overflow-wrap: anywhere; }
.profile-resume { display: grid; grid-template-columns: minmax(0,1fr) 170px; gap: 24px; padding: 30px; border-radius: 8px; background: var(--paper); border: 1px solid var(--hairline); }
.profile-resume h3 { font-size: 1.35rem; margin-bottom: 8px; }
.profile-resume p:not(.eyebrow) { color: var(--muted); max-width: 60ch; font-size: .86rem; }
.profile-resume aside { display: grid; place-items: center; align-content: center; padding: 20px; background: rgba(255,255,255,.75); border-radius: 8px; text-align: center; }
.profile-resume aside strong { font-family: var(--font-display); font-size: 2rem; color: var(--navy-deep); line-height: 1.1; }
.profile-resume aside span:not(.profile-flame) { color: var(--muted); font-size: .77rem; }
.profile-resume aside small { color: var(--ink); font-size: .68rem; margin-top: 6px; }
.profile-flame svg { width: 28px; height: 28px; fill: #ef6a2e; }
.profile-stats { display: grid; grid-template-columns: repeat(5,1fr); border: 1px solid var(--hairline); border-radius: 8px; overflow: hidden; }
.profile-stats > div { display: grid; gap: 3px; padding: 20px; background: white; }
.profile-stats > div + div { border-left: 1px solid var(--hairline); }
.profile-stats strong { font-family: var(--font-display); font-size: 1.45rem; color: var(--navy-deep); }
.profile-stats span { color: var(--muted); font-size: .72rem; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.profile-grid > section { min-width: 0; padding: 24px; border: 1px solid var(--hairline); border-radius: 8px; background: white; }
.profile-grid > section:first-child,.profile-grid > .profile-recent { grid-column: 1/-1; }
.profile-grid h2 { font-size: 1.08rem; margin-bottom: 17px; }
.profile-section-head { display: flex; justify-content: space-between; align-items: start; gap: 15px; }
.profile-section-head > span { color: var(--muted); font-size: .72rem; white-space: nowrap; }
.profile-course-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; max-height: 330px; overflow: auto; padding-right: 3px; }
.profile-course { display: flex; align-items: center; gap: 10px; justify-content: space-between; min-width: 0; padding: 14px; background: var(--surface); border-radius: 8px; }
.profile-course div { min-width: 0; }
.profile-course small,.profile-course p { color: var(--muted); font-size: .65rem; margin: 0; }
.profile-course h3 { font-size: .78rem; margin: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-course button { flex-shrink: 0; border: 1px solid var(--hairline); border-radius: 999px; background: white; color: var(--accent); padding: 6px 9px; font-size: .65rem; }
.profile-course button[aria-pressed=true] { color: white; background: var(--accent); border-color: var(--accent); }
.profile-topic-list { display: grid; }
.profile-topic-list a { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 4px; border-top: 1px solid var(--hairline); color: var(--navy-deep); }
.profile-topic-list a:hover { text-decoration: none; color: var(--accent); }
.profile-topic-list strong,.profile-topic-list small { display: block; }
.profile-topic-list strong { font-size: .78rem; }
.profile-topic-list small { color: var(--muted); font-size: .67rem; margin-top: 3px; }
.profile-empty { color: var(--muted); font-size: .8rem; line-height: 1.7; }
.study-calendar { display: grid; grid-template-columns: repeat(14,1fr); gap: 7px; margin-top: 20px; }
.study-day { aspect-ratio: 1; border-radius: 4px; background: #eceef4; }
.study-day.is-active { background: var(--done); }
.profile-signin { max-width: 560px; margin: 20px auto; padding: 48px; text-align: center; border: 1px solid var(--hairline); border-radius: 8px; }
.profile-signin .account-user-icon { margin: 0 auto 20px; }
.profile-signin p:not(.eyebrow) { color: var(--muted); }
.account-callback-mark { width: 68px; height: 68px; display: grid; place-items: center; margin: 0 auto 20px; border-radius: 50%; background: #fff0ed; color: #a23b43; font-family: var(--font-display); font-size: 1.7rem; }
.home-dashboard { display: grid; grid-template-columns: minmax(0,1fr) 130px 130px; gap: 18px; align-items: center; padding: 25px; margin-bottom: 28px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--paper); }
.home-dashboard p { color: var(--muted); font-size: .82rem; margin-bottom: 6px; }
.home-dashboard > div:not(:first-child) { display: grid; text-align: center; padding: 14px; border-left: 1px solid #ded8e9; }
.home-dashboard > div:not(:first-child) span { font-family: var(--font-display); font-size: 1.5rem; color: var(--navy-deep); }
.home-dashboard small { color: var(--muted); font-size: .68rem; }
.home-course-links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.home-course-links a { padding: 6px 9px; border: 1px solid var(--hairline); border-radius: 999px; background: rgba(255,255,255,.7); color: var(--accent); font-size: .68rem; font-weight: 650; }
.home-course-links a:hover { background: white; text-decoration: none; }
.profile-information,.account-preferences { padding: 26px; border: 1px solid var(--hairline); border-radius: 8px; background: white; }
.account-preferences { margin-top: 24px; }
.profile-information h2,.account-preferences h2 { font-size: 1.08rem; }
.profile-information .profile-section-head a { font-size: .75rem; }
.profile-details { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; margin: 24px 0 0; }
.profile-details dt { color: var(--muted); font-size: .72rem; margin-bottom: 4px; }
.profile-details dd { color: var(--navy-deep); font-size: .85rem; margin: 0; overflow-wrap: anywhere; }
.profile-form-fields { display: grid; gap: 18px; }
.profile-field { display: grid; gap: 7px; font-size: .8rem; font-weight: 600; }
.profile-field select { width: 100%; font-size: .8rem; font-weight: 400; border-color: var(--hairline); background: var(--surface); }
.profile-name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.profile-subject-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; border: 0; padding: 0; }
.profile-subject-options legend { font-size: .8rem; font-weight: 600; padding: 0 0 10px; }
.profile-subject-options label { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid var(--hairline); border-radius: 8px; cursor: pointer; font-size: .75rem; }
.profile-subject-options label:has(:checked) { border-color: var(--accent); background: var(--accent-soft); }
.profile-email-choice { display: flex; align-items: flex-start; gap: 10px; padding: 15px; background: var(--surface); border-radius: 8px; font-size: .8rem; font-weight: 400; cursor: pointer; }
.profile-email-choice small { display: block; color: var(--muted); font-size: .72rem; margin-top: 5px; }
.account-dialog input[type=checkbox] { width: 17px; height: 17px; flex-shrink: 0; padding: 0; margin: 3px 0 0; accent-color: var(--accent); }
@media (max-width: 1100px) {
}
@media (max-width: 600px) {
  .account-dialog-inner { padding: 24px 20px; }
  .account-dialog h2 { font-size: 1.4rem; }
  .account-welcome { flex-direction: column; align-items: flex-start; padding: 24px; }
  .account-settings-grid { grid-template-columns: 1fr; gap: 16px; }
  .profile-identity { align-items: flex-start; flex-wrap: wrap; }
  .profile-identity .btn { width: 100%; }
  .profile-resume { grid-template-columns: 1fr; padding: 22px; }
  .profile-stats { grid-template-columns: 1fr 1fr; }
  .profile-stats > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--hairline); }
  .profile-stats > div:nth-child(4) { border-top: 1px solid var(--hairline); }
  .profile-stats > div:nth-child(5) { border-left: 0; border-top: 1px solid var(--hairline); }
  .profile-grid { grid-template-columns: 1fr; }
  .profile-grid > section:first-child,.profile-grid > .profile-recent { grid-column: auto; }
  .profile-course-grid { grid-template-columns: 1fr; }
  .study-calendar { grid-template-columns: repeat(7,1fr); }
  .home-dashboard { grid-template-columns: 1fr 1fr; }
  .home-dashboard > div:first-child { grid-column: 1/-1; }
  .home-dashboard > div:not(:first-child) { border-left: 0; border-top: 1px solid #ded8e9; }
  .profile-details,.profile-name-grid { grid-template-columns: 1fr; }
  .profile-section-head { flex-wrap: wrap; }
}