/* Material surfaces for the customer environment and its sign-in pages. */
.customer-page,
.auth-page {
  --md-surface: #ffffff;
  --md-surface-low: #f1f5ec;
  --md-surface-high: #e6eedf;
  --md-primary-container: #dceacb;
  --md-on-container: #294c2c;
  --md-shadow: 0 2px 7px #233c2910, 0 8px 24px #233c2906;
  --md-shadow-raised: 0 5px 12px #233c2912, 0 16px 36px #233c2909;
  --muted: #5d6e60;
  background: #f2f5ef;
}

/* The drawer and app bar sit on their own surfaces, without page dividers. */
.customer-page .sidebar {
  inset: 20px auto 20px 20px;
  width: 264px;
  padding: 30px 20px 24px;
  border: 0;
  border-radius: 28px;
  box-shadow: var(--md-shadow);
  overflow-y: auto;
  background: var(--md-surface);
}
.customer-page .sidebar .brand {font-size: 23px; gap: 8px; padding-inline: 4px}
.customer-page .sidebar .brand svg {width: 25px}
.customer-page .workspace {margin: 36px 12px 18px; color: #63745f}
.customer-page .sidebar nav {gap: 8px}
.customer-page .sidebar nav > a {
  padding: 15px 17px;
  min-height: 54px;
  border-radius: 28px;
  gap: 14px;
  color: #526454;
  font-size: 14px;
  transition: background-color .18s, color .18s;
}
.customer-page .sidebar nav > a:hover {background: var(--md-surface-low)}
.customer-page .sidebar nav > a[aria-current=page] {
  background: var(--md-primary-container);
  color: var(--md-on-container);
  font-weight: 650;
}
.customer-page .sidebar-bottom {padding: 36px 12px 0; color: #62745f}
.customer-page .sidebar-bottom small {color: #687762}
.customer-page .app-shell {margin-left: 296px}
.customer-page .topbar {
  height: 72px;
  margin: 20px 32px 0 16px;
  padding: 0 24px;
  border: 0;
  border-radius: 24px;
  background: var(--md-surface);
  box-shadow: var(--md-shadow);
}
.customer-page .top-label {font-size: 10px; color: #60745e}
.customer-page .top-user {gap: 12px; font-size: 14px}
.customer-page .avatar {border: 0; background: var(--md-primary-container); color: #355c32; width: 42px; height: 42px}
.customer-page .topbar .text-button {
  border-radius: 24px;
  background: var(--md-surface-low);
  padding: 9px 16px;
  min-height: 40px;
  color: #42623d;
  font-size: 12px;
}
.customer-page .topbar .text-button:hover {background: var(--md-surface-high)}
.customer-page .main {padding: 36px 32px 46px 16px; min-height: calc(100vh - 194px)}
.customer-page .page-heading {margin: 0 4px 30px}
.customer-page .page-heading h1 {font-size: clamp(29px, 2.5vw, 39px); font-weight: 650}
.customer-page .eyebrow {color: #5c7654}
.customer-page .app-footer {border: 0; padding: 12px 36px 30px 20px; color: #60705b}
.customer-page .app-footer a {padding-block: 6px}

/* Tonal and elevated cards carry the hierarchy instead of hard outlines. */
.customer-page .panel,
.customer-page .empty,
.customer-page .learning-card,
.customer-page .reader {
  border: 0;
  border-radius: 28px;
  background: var(--md-surface);
  box-shadow: var(--md-shadow);
}
.customer-page .panel {padding: 30px}
.customer-page .panel.soft {background: var(--md-surface-high); box-shadow: none}
.customer-page .welcome-strip {
  border: 0;
  border-radius: 28px;
  background: #e1eccf;
  padding: 30px 34px;
  margin-bottom: 28px;
  gap: 28px;
}
.customer-page .welcome-strip h2 {font-size: 27px; letter-spacing: -.6px; color: #294b2e}
.customer-page .welcome-strip p {font-size: 14px; color: #53674c}
.customer-page .welcome-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 28px;
  background: #cedfba;
  flex: none;
}
.customer-page .welcome-mark svg {width: 38px; height: 38px; color: #527142; stroke-width: 1.6}
.customer-page .empty {padding: 46px 30px; margin-top: 24px}
.customer-page .empty-icon {width: 76px; height: 76px; border-radius: 50%; background: var(--md-surface-high); color: #587447}
.customer-page .empty p {max-width: 510px; font-size: 14px}
.customer-page .empty h2 {font-size: 25px}
.customer-page .learning-copy {padding: 28px}
.customer-page .learning-card {transition: box-shadow .2s}
.customer-page .learning-card:hover {box-shadow: var(--md-shadow-raised)}
.customer-page .learning-card > img {height: 212px}
.customer-page .learning-copy h2 {font-size: 25px}
.customer-page .learning-copy > p {font-size: 14px}
.customer-page .badge {padding: 6px 13px; font-size: 11px; background: var(--md-surface-high); color: #405f34}
.customer-page .badge.warn {background: #f6e8ce; color: #785018}
.customer-page .badge.quiet {background: #eff2eb; color: #5b6b55}
.customer-page progress {height: 10px; background: #e5eddd}
.customer-page progress::-webkit-progress-bar {background: #e5eddd}
.customer-page progress::-webkit-progress-value {background: #638b4b}
.customer-page progress::-moz-progress-bar {background: #638b4b}
.customer-page .progress-meta span,
.customer-page .time-label {color: #607255}
.customer-page .data-row {border: 0; background: var(--md-surface-low); border-radius: 16px; padding: 16px 18px; margin-top: 10px}
.customer-page .lesson-row {border: 0; border-radius: 20px; background: var(--md-surface-low); padding: 21px; margin-bottom: 12px}
.customer-page .reader-top {padding: 24px 30px; color: #5c6e52}
.customer-page .reader > progress {height: 6px}
.customer-page .coffee-practice {border: 0; border-radius: 24px; background: var(--md-surface-low)}
.customer-page .choices label {border: 0; background: var(--md-surface-low); border-radius: 18px; padding: 18px; min-height: 58px}
.customer-page .choices label:has(input:checked) {background: var(--md-primary-container); box-shadow: inset 0 0 0 2px #78955e}
.customer-page .award-icon {background: #f3ead1; color: #90792e}

/* Filled, tactile controls, with visible keyboard and touch states. */
:is(.customer-page, .auth-page) .button {
  min-height: 48px;
  padding: 12px 24px;
  border: 0;
  border-radius: 28px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 2px 5px #24482c14;
  transition: background-color .18s, box-shadow .18s;
}
:is(.customer-page, .auth-page) .button:hover {box-shadow: 0 4px 9px #24482c22}
:is(.customer-page, .auth-page) .button:active {box-shadow: none}
:is(.customer-page, .auth-page) .button.secondary {background: #e4edda; color: #355a30; box-shadow: none}
:is(.customer-page, .auth-page) .button.secondary:hover {background: #d7e5c7}
:is(.customer-page, .auth-page) .field {font-size: 13px; gap: 9px; margin-bottom: 20px}
:is(.customer-page, .auth-page) .field > span {color: #4b604a}
:is(.customer-page, .auth-page) .field :is(input, select, textarea) {
  background: #eff3e9;
  border: 0;
  border-radius: 16px;
  padding: 14px 16px;
  min-height: 52px;
  font-size: 15px;
  box-shadow: inset 0 0 0 1px #dfe6d7;
  transition: background-color .18s, box-shadow .18s;
}
:is(.customer-page, .auth-page) .field :is(input, select, textarea):hover {background: #eaf0e2}
:is(.customer-page, .auth-page) .field :is(input, select, textarea):focus-visible {
  outline: 2px solid #456f3f;
  outline-offset: 2px;
  background: #f7faf2;
}
:is(.customer-page, .auth-page) :is(a, button, input, select, textarea, summary):focus-visible {outline-color: #456f3f}
:is(.customer-page, .auth-page) .notice {border: 0; border-radius: 20px; padding: 18px 22px; background: #e0edd5; color: #3f5f34}
:is(.customer-page, .auth-page) .notice.error {background: #fbe8de; color: #85472e}
.customer-page .check {background: var(--md-surface-low); border-radius: 18px; padding: 18px; margin-block: 22px}
.customer-page .check input {margin-top: 3px; width: 21px; height: 21px}
.customer-page .practice-buttons button {min-height: 46px; border: 0; background: #dde8d0; padding: 11px 18px; font-size: 13px; color: #38582f}
.customer-page .practice-buttons button[aria-pressed=true] {background: var(--green); color: #fff}

.auth-page .auth-main {max-width: 548px; padding-top: 52px}
.auth-page .auth-card {border: 0; border-radius: 32px; padding: 40px; box-shadow: var(--md-shadow-raised)}
.auth-page .auth-intro h1 {font-size: 36px}
.auth-page .auth-intro p:not(.eyebrow) {font-size: 14px}
.auth-page .auth-note {border: 0; border-radius: 20px; background: var(--md-surface-low); padding: 20px; margin-top: 28px}
.auth-page .auth-note strong {font-size: 13px}
.auth-page .auth-footer {color: #607255}

@media (max-width: 1250px) and (min-width: 761px) {
  .customer-page .sidebar {inset: 16px auto 16px 16px; width: 232px; padding-inline: 16px}
  .customer-page .sidebar .brand {font-size: 20px; gap: 5px; padding: 0}
  .customer-page .sidebar .brand svg {width: 22px}
  .customer-page .sidebar nav > a {font-size: 13px; padding-inline: 14px; gap: 11px}
  .customer-page .workspace {font-size: 9px}
  .customer-page .app-shell {margin-left: 264px}
  .customer-page .topbar {margin: 16px 24px 0 0; padding-inline: 22px}
  .customer-page .main {padding: 32px 24px 40px 0}
  .customer-page .app-footer {padding-inline: 4px 24px}
  .customer-page .welcome-strip {padding: 26px}
  .customer-page .welcome-strip h2 {font-size: 24px}
  .customer-page .welcome-mark {width: 66px; height: 66px; border-radius: 22px}
}
@media (min-width: 761px) and (max-width: 1000px) {
  .customer-page .learning-card {display: block}
  .customer-page .learning-card > img {height: 200px; min-height: 0}
  .customer-page .welcome-mark {display: none}
  .customer-page .top-label {font-size: 9px}
  .customer-page .award-grid {grid-template-columns: 1fr}
}
@media (max-width: 760px) {
  .customer-page .sidebar {
    inset: 12px auto 12px 12px;
    width: min(312px, calc(100vw - 24px));
    padding: 28px 20px 24px;
    border-radius: 28px;
    transform: translateX(calc(-100% - 28px));
    box-shadow: 0 8px 40px #17392328;
  }
  .customer-page .sidebar.is-open {transform: translateX(0)}
  .customer-page .sidebar .brand {font-size: 23px}
  .customer-page .workspace {margin-top: 36px; margin-right: 50px}
  .customer-page .sidebar-close {top: 77px; right: 22px; min-height: 40px; border-radius: 20px; padding: 8px 12px; background: var(--md-surface-low)}
  .customer-page .app-shell {margin-left: 0}
  .customer-page .topbar {height: 66px; margin: 12px 12px 0; border-radius: 22px; padding: 0 12px; gap: 12px}
  .customer-page .menu {border-radius: 50%; background: var(--md-surface-low); width: 44px; height: 44px; padding: 11px; min-height: 44px}
  .customer-page .menu span {width: 22px; margin: 4px 0; height: 2px; border-radius: 2px}
  .customer-page .top-user {gap: 8px; font-size: 13px}
  .customer-page .top-user > span:not(.avatar) {max-width: 98px}
  .customer-page .topbar .avatar {width: 36px; height: 36px}
  .customer-page .topbar .text-button {padding-inline: 12px; font-size: 11px; min-height: 40px}
  .customer-page .topbar .logout {margin-left: 0}
  .customer-page .main {padding: 28px 16px 34px; min-height: calc(100vh - 200px)}
  .customer-page .page-heading {margin: 0 4px 26px}
  .customer-page .page-heading h1 {font-size: 30px}
  .customer-page .panel {padding: 25px; border-radius: 26px}
  .customer-page .welcome-strip {padding: 25px; border-radius: 26px; margin-bottom: 24px}
  .customer-page .welcome-strip h2 {font-size: 24px}
  .customer-page .welcome-strip p {font-size: 13px; line-height: 1.8}
  .customer-page .welcome-mark {display: none}
  .customer-page .empty {border-radius: 26px; padding: 35px 24px}
  .customer-page .empty h2 {font-size: 23px}
  .customer-page .empty p {font-size: 13px}
  .customer-page .empty-icon {width: 66px; height: 66px; margin-bottom: 22px}
  .customer-page .learning-card {display: block; border-radius: 26px}
  .customer-page .learning-card > img {height: 185px; min-height: 0}
  .customer-page .learning-copy {padding: 25px}
  .customer-page .learning-copy h2 {font-size: 24px}
  .customer-page .learning-copy > p {font-size: 13px}
  .customer-page .reader {border-radius: 26px}
  .customer-page .reader-body {padding: 30px 24px}
  .customer-page .reader-top {padding: 21px 24px; font-size: 10px}
  .customer-page .lesson-row {padding: 20px}
  .customer-page .app-footer {padding: 10px 22px 26px}
  :is(.customer-page, .auth-page) .field :is(input, select, textarea) {font-size: 16px}
  :is(.customer-page, .auth-page) .button {font-size: 13px; padding-inline: 21px}
  .customer-page .practice-buttons button {font-size: 11px; padding-inline: 13px}
  .auth-page .auth-main {padding: 32px 16px 24px}
  .auth-page .auth-card {padding: 30px 25px; border-radius: 28px}
  .auth-page .auth-intro h1 {font-size: 32px}
}
@media (max-width: 370px) {
  .customer-page .top-user > span:not(.avatar) {max-width: 68px}
  .customer-page .panel {padding: 22px}
  .customer-page .welcome-strip {padding: 24px}
  .customer-page .welcome-strip h2 {font-size: 22px}
  .customer-page .reader-body {padding-inline: 22px}
}