/* Site-wide visual refinements. Keep behavior and page data in their existing modules. */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid #e0bd70;
  outline-offset: 2px;
}

@media (max-width: 760px) {
  /* Keep the signed-in header on one readable row on phones and narrow tablets. */
  body.home-active .topbar {
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 10px !important;
    overflow: hidden !important;
  }

  body.home-active .topbar .brand {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  body.home-active .topbar .brand-copy small {
    display: none !important;
  }

  body.home-active .topbar .brand-copy strong {
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  body.home-active .top-actions {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    min-width: 0 !important;
    height: 100% !important;
    margin-left: auto !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  body.home-active .top-actions > .legacy-header-nav,
  body.home-active .top-actions > .power-topbar,
  body.home-active .top-actions > .ai-quota-brief,
  body.home-active .top-actions .top-user b {
    display: none !important;
  }

  body.home-active .top-actions .top-user {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  body.home-active .top-actions .top-action,
  body.home-active .top-actions .teacher-home-return {
    flex: 0 0 auto !important;
    min-height: 28px !important;
    padding: 5px 6px !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  /* Leave a scrollable tail below the fixed phone navigation. */
  body.home-active:not(.detail-view-active) .workspace.home-mode {
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  body.detail-view-active.detail-teacher-active #teacher-view .teacher-workspace.teacher-home {
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }

  /* The pseudo title duplicated the real heading and consumed most of the first screen. */
  #spelling-view .spelling-intro::before {
    display: none !important;
    content: none !important;
  }

  #spelling-view .spelling-intro .spelling-title-word {
    margin: 0 0 8px !important;
    font-size: clamp(32px, 8vw, 42px) !important;
    line-height: 1.12 !important;
    transform: none !important;
  }
}

@media (max-width: 560px) {
  /* Compact the login introduction so the form begins higher on small screens. */
  .page-shell:has(#auth-intro:not([hidden])) {
    --auth-gutter: 14px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .page-shell:has(#auth-intro:not([hidden])) > .topbar {
    min-height: 56px;
    height: 56px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .page-shell:has(#auth-intro:not([hidden])) main {
    row-gap: 12px;
    padding-top: 16px;
    padding-bottom: 20px;
  }

  .page-shell:has(#auth-intro:not([hidden])) #auth-intro h1.auth-motivation {
    margin: 0 0 6px;
    padding-left: 12px;
    font-size: clamp(16px, 4.5vw, 20px);
    letter-spacing: .025em;
    line-height: 1.42;
  }

  .page-shell:has(#auth-intro:not([hidden])) #auth-intro h1.auth-motivation > .auth-motivation-question {
    margin-top: 6px;
    font-size: .9em;
    line-height: 1.45;
  }

  .page-shell:has(#auth-intro:not([hidden])) .workspace {
    width: 100%;
    max-width: none;
  }

  .page-shell:has(#auth-intro:not([hidden])) #auth-card {
    padding: 17px 16px 14px;
  }
}

/* Tablet workbench: keep the side navigation wide enough to show its labels. */
@media (min-width: 761px) and (max-width: 1200px) {
  html[data-home-theme="3d"] #homeLibraryShell.workbench-shell {
    grid-template-columns: minmax(154px, 18vw) minmax(0, 1fr) minmax(190px, 22vw) !important;
  }

  html[data-home-theme="3d"] #homeLibraryShell > .workbench-nav button {
    justify-content: flex-start !important;
    min-height: 44px !important;
    padding: 4px 8px !important;
    gap: 8px !important;
    text-align: left !important;
  }

  html[data-home-theme="3d"] #homeLibraryShell > .workbench-nav button span {
    display: block !important;
    width: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    text-align: left !important;
    white-space: normal !important;
  }
}

@media (min-width: 761px) and (max-width: 960px) {
  html[data-home-theme="3d"] #homeLibraryShell.workbench-shell {
    grid-template-columns: minmax(154px, 21vw) minmax(0, 1fr) !important;
  }

  html[data-home-theme="3d"] #homeLibraryShell > .workbench-rail {
    grid-column: 1 / -1 !important;
  }
}

/* Light home theme: dark text on pale surfaces for dependable contrast. */
html[data-home-theme='classic'] #homeLibraryShell .library-kicker {color: #795a22 !important;}
html[data-home-theme='classic'] #homeLibraryShell .library-copy h2 {color: #203957 !important; text-shadow: none !important;}
html[data-home-theme='classic'] #homeLibraryShell .library-copy h2 em {color: #815f20 !important;}
html[data-home-theme='classic'] #homeLibraryShell .library-copy p {color: #405970 !important;}
html[data-home-theme='classic'] #homeLibraryShell .library-secondary {background: #fff !important; border-color: #9aafc1 !important; color: #263f58 !important;}
html[data-home-theme='classic'] #homeLibraryShell .library-secondary:hover,
html[data-home-theme='classic'] #homeLibraryShell .library-secondary:focus-visible {background: #eaf1f6 !important; border-color: #496b88 !important; color: #18344f !important;}
html[data-home-theme='classic'] #homeLibraryShell .library-journey {background: #e8eff4 !important; border-top-color: #c9d7e2 !important;}
html[data-home-theme='classic'] #homeLibraryShell .library-stat-symbol {color: #805f23 !important; text-shadow: none !important;}
html[data-home-theme='classic'] #homeLibraryShell .library-journey small {color: #405a72 !important;}
html[data-home-theme='classic'] #homeLibraryShell .library-journey strong {color: #203957 !important;}
html[data-home-theme='classic'] #homeLibraryShell .library-journey-note {color: #405a72 !important;}
html[data-home-theme='classic'] #homeLibraryShell > .workbench-nav .workbench-nav-title {color: #536a80 !important;}
html[data-home-theme='classic'] #homeLibraryShell > .workbench-nav .workbench-nav-footer {color: #526a80 !important;}
html[data-home-theme='classic'] #homeLibraryShell > .workbench-nav > button,
html[data-home-theme='classic'] #homeLibraryShell > .workbench-nav > a.hanyiying-nav-entry {color: #344f69 !important;}
html[data-home-theme='classic'] #homeLibraryShell > .workbench-nav > button:hover,
html[data-home-theme='classic'] #homeLibraryShell > .workbench-nav > button:focus-visible,
html[data-home-theme='classic'] #homeLibraryShell > .workbench-nav > a.hanyiying-nav-entry:hover,
html[data-home-theme='classic'] #homeLibraryShell > .workbench-nav > a.hanyiying-nav-entry:focus-visible {background: #e5edf3 !important; border-color: #c4d2de !important; color: #203957 !important; box-shadow: none !important;}
html[data-home-theme='classic'] #homeLibraryShell > .workbench-nav > button.active {color: #203957 !important;}
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .workbench-rail-title {color: #263f58 !important; border-bottom-color: #cbd8e2 !important;}
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .workbench-rail-title small,
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .rail-resume-kicker,
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .rail-resume-empty > span,
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .resume-label {color: #4d657c !important;}
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .resume-card,
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .today-card {background: #fff !important; border-color: #d3dee7 !important; box-shadow: 0 5px 14px #20395712 !important; color: #344f68 !important;}
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .rail-resume > b,
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .resume-title,
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .today-copy strong {color: #263f58 !important;}
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .rail-resume > small,
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .rail-resume-empty small,
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .today-copy > span {color: #4d657c !important;}
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .resume-btn {background: #e6c77d !important; color: #20344a !important; box-shadow: 0 2px 0 #9c7939 !important;}
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .resume-btn.secondary {background: #eaf1f6 !important; color: #263f58 !important; box-shadow: 0 2px 0 #c4d2de !important;}
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .today-ring {background: #f4f7f9 !important; border-color: #a98744 !important; color: #263f58 !important; box-shadow: none !important;}
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .daily-tasks .dt-title {color: #263f58 !important;}
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .daily-tasks .dt-summary {color: #4d657c !important;}
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .daily-tasks .dt-item {border-color: #d3dee7 !important; color: #344f68 !important;}
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .daily-tasks .dt-item-title {color: #263f58 !important;}
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .daily-tasks .dt-item-meta,
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .daily-tasks .dt-item-reason {color: #4d657c !important;}
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .daily-tasks .dt-item-status {border-color: #718399 !important; background: #fff !important; color: #263f58 !important;}
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .daily-tasks .dt-item.done .dt-item-status {border-color: #8a672a !important; background: #f0dfb8 !important; color: #20344a !important;}
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .rail-actions {border-color: #d3dee7 !important;}
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .rail-action,
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .rail-caption {color: #4d657c !important;}
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .rail-action:hover {color: #203957 !important;}
html[data-home-theme='classic'] #homeLibraryShell .home-theme-caption {color: #405970 !important;}
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .rail-tasks-heading {color: #263f58 !important;}
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .rail-tasks-heading .dt-summary {color: #4d657c !important;}
html[data-home-theme='classic'] #homeLibraryShell > .workbench-rail .rail-date {color: #526a80 !important;}
/* Light-theme sentence workspace follows the same readable ink palette. */
html[data-home-theme='classic'] #homeLibraryShell #sentence-view .sentence-input-card {background: #fff !important; border-color: #d3dee7 !important; color: #263f58 !important; box-shadow: 0 8px 24px #20395712 !important;}
html[data-home-theme='classic'] #homeLibraryShell #sentence-view #sentence-input {background: #fff !important; border-color: #b8c8d5 !important; color: #203957 !important; box-shadow: none !important;}
html[data-home-theme='classic'] #homeLibraryShell #sentence-view #sentence-input::placeholder {color: #526a80 !important; opacity: 1 !important;}
html[data-home-theme='classic'] #homeLibraryShell #sentence-view .sentence-input-meta,
html[data-home-theme='classic'] #homeLibraryShell #sentence-view .sentence-examples,
html[data-home-theme='classic'] #homeLibraryShell #sentence-view .sentence-shortcut,
html[data-home-theme='classic'] #homeLibraryShell #sentence-view .sentence-status {color: #4d657c !important;}
html[data-home-theme='classic'] #homeLibraryShell #sentence-view .sentence-examples button {background: #f0f4f7 !important; border-color: #cbd8e2 !important; color: #344f69 !important;}
html[data-home-theme='classic'] #homeLibraryShell #sentence-view .sentence-examples button:hover {background: #e3edf4 !important; border-color: #8ca5ba !important; color: #203957 !important;}
html[data-home-theme='classic'] #homeLibraryShell #sentence-view .sentence-consent {background: #f4f7f9 !important; border-color: #d3dee7 !important; color: #344f68 !important;}
html[data-home-theme='classic'] #homeLibraryShell #sentence-view .sentence-consent small {color: #4d657c !important;}
html[data-home-theme='classic'] #homeLibraryShell #sentence-view .result-card,
html[data-home-theme='classic'] #homeLibraryShell #sentence-view .sentence-result-card,
html[data-home-theme='classic'] #homeLibraryShell #sentence-view .sentence-history {background: #fff !important; border-color: #d3dee7 !important; color: #263f58 !important; box-shadow: 0 5px 16px #20395712 !important;}
html[data-home-theme='classic'] #homeLibraryShell #sentence-view .sentence-result-head h3,
html[data-home-theme='classic'] #homeLibraryShell #sentence-view .sentence-result-grid h4 {color: #263f58 !important;}
html[data-home-theme='classic'] #homeLibraryShell #sentence-view .sentence-token-strip,
html[data-home-theme='classic'] #homeLibraryShell #sentence-view .sentence-result-grid section {background: #f2f6f9 !important; border-color: #d3dee7 !important; color: #344f68 !important;}
html[data-home-theme='classic'] #homeLibraryShell #sentence-view .sentence-token,
html[data-home-theme='classic'] #homeLibraryShell #sentence-view .sentence-component-list span,
html[data-home-theme='classic'] #homeLibraryShell #sentence-view .sentence-phrase-list span {background: #eaf1f6 !important; border-color: #cbd8e2 !important; color: #263f58 !important;}
html[data-home-theme='classic'] #homeLibraryShell #sentence-view .sentence-token small {color: #4d657c !important;}
html[data-home-theme='classic'] #homeLibraryShell #sentence-view .sentence-translation {background: #f2f6f9 !important; border-color: #cbd8e2 !important;}
html[data-home-theme='classic'] #homeLibraryShell #sentence-view .sentence-translation p {color: #263f58 !important;}
/* The home translation modal uses the essay view only as a hidden host, not as an active detail module. */
body.hanyiying-home-layer-open #detail-page-header {display: none !important;}