/* Shared member-surface roles. Load after each member application's own CSS. */
:is(.hazine-shell, .hz-dialog, .hz-popover, .hb, .horology) {
  --member-bg: var(--c-ink-900);
  --member-panel: var(--c-ink-800);
  --member-raised: var(--c-ink-700);
  --member-line: var(--c-line-dark);
  --member-control-line: color-mix(in srgb, var(--c-text-inv-3) 70%, var(--c-ink-900));
  --member-text: var(--c-text-inv);
  --member-copy: var(--c-text-inv-2);
  --member-muted: var(--c-text-inv-3);
  --member-accent: var(--c-copper);
  --member-fill: var(--c-copper-fill);
  --member-on-fill: var(--c-ink-900);
  --tx: var(--c-text-inv);
  --tx-2: var(--c-text-inv-2);
  --tx-3: var(--c-text-inv-3);
  --accent-tx: var(--c-copper);
  --accent-display: var(--c-copper);
  font-family: var(--font-sans);
  color: var(--member-text);
}

/* Hazine keeps its independent application reset and portal components. */
:is(.hazine-shell, .hz-dialog, .hz-popover) {
  --background: var(--member-bg);
  --foreground: var(--member-text);
  --card: var(--member-panel);
  --card-foreground: var(--member-text);
  --primary: var(--member-fill);
  --primary-foreground: var(--member-on-fill);
  --secondary: var(--member-raised);
  --secondary-foreground: var(--member-text);
  --muted: var(--member-raised);
  --muted-foreground: var(--member-muted);
  --border: var(--member-line);
  --input: var(--member-control-line);
  --ring: var(--c-copper-hi);
  --accent: var(--member-raised);
  --accent-foreground: var(--member-text);
  --popover: var(--member-panel);
  --popover-foreground: var(--member-text);
  --font-cormorant: var(--font-serif);
  background: var(--member-bg);
  font-size: var(--fs-body);
}
.hazine-shell :is(h1, h2, h3),
.hz-dialog h2,
.hz-sidebar-heading,
.hz-edition strong,
.hz-stat-row strong {
  font-family: var(--font-serif);
}
.hazine-shell :is(.hazine-title p:last-child, .hz-overview-title p:last-child,
  .hz-module-heading > p:last-child, .hazine-card > p, .hz-record > p,
  .hw-intro, .hw-compare article > p, .hw-shell details > p) {
  color: var(--member-copy);
  font-size: var(--fs-copy);
}
.hazine-shell :is(.hazine-header > span, .hazine-header > a:last-child,
  .hz-sidebar nav button, .hz-edition, .hz-feature p, .hz-info,
  .hz-record-meta, .hz-parts p, .hz-table td, .hz-ebced > div > p,
  .hz-atlas-heading > p:last-child, .hz-worked-example > p:not(.hz-atlas-note),
  .hz-current-step > p, .hw-fields label, .hw-top button, .hw-back) {
  color: var(--member-copy);
}
.hazine-shell :is(.hz-sidebar-book p, .hz-member, .hz-section-line > span,
  .hz-origin-note, .hz-page-caption, .hz-reader-bottom > span,
  .hz-stat-row span, .hz-letter-board span, .hz-ebced-result span,
  .hz-ebced-result small, .hz-draft-note, .hz-footer,
  .hz-planet-strip small, .hz-planet-picker small, .hz-atlas-selection p,
  .hz-atlas-note, .hz-current-step > span, .hw-result-heading span,
  .hw-result small, .hw-detail > small, .hw-source-note),
.hz-dialog label span,
.hz-dialog > small,
.hz-dialog .hz-draft-note {
  color: var(--member-muted);
}
.hazine-shell :is(.hazine-kicker, .hazine-title em, .hazine-card > span,
  .hazine-card > div, .hz-sidebar-heading, .hz-sidebar-book button,
  .hz-overview-title h1 em, .hz-edition strong, .hz-planet-strip button > span,
  .hz-planet-picker button > span, .hz-back, .hz-record-meta > span:first-child,
  .hz-record-actions button, .hz-parts strong, .hz-empty > svg, .hz-empty a,
  .hz-reader-toolbar button, .hz-reader-bottom, .hz-stat-row strong,
  .hz-table caption, .hz-table th, .hz-ebced-result output,
  .hz-source-detail strong, .hz-atlas-selection > div > span,
  .hz-atlas-selection h3, .hz-atlas-actions button, .hz-example-source,
  .hz-step-buttons button, .hw-return, .hw-intents button > span,
  .hw-source-note button, .hw-steps output, .hw-calculation output,
  .hw-calc-result, .hw-shell summary),
.hz-dialog h2 {
  color: var(--member-accent);
}
.hazine-shell .hz-ebced-result p {
  color: var(--member-accent) !important;
}
.hazine-shell :is(.hz-sidebar-book > span, .hazine-card > span,
  .hz-range-list > span, .hz-letter-board span, .hz-ebced-result span,
  .hz-footer, .hazine-kicker, .hz-planet-strip small, .hz-planet-picker small) {
  font-size: var(--fs-label);
}
.hazine-shell :is(.hz-sidebar nav button, .hz-record-actions button,
  .hz-reader-bottom, .hz-table, .hz-origin-note, .hw-result small,
  .hw-detail > small, .hw-source-note) {
  font-size: var(--fs-small);
}
.hazine-shell .hz-tabs-list button {
  color: var(--member-copy);
  font-size: var(--fs-small) !important;
}
.hazine-shell :is(.hz-feature, .hazine-card, .hz-record, .hz-info,
  .hz-ebced, .hz-atlas, .hw-intents button, .hw-result, .hw-detail,
  .hw-tool, .hw-work, .hw-compare, .hw-compare article,
  .hw-calculation, .hz-reader .hz-empty) {
  background: var(--member-panel);
  border-color: var(--member-line);
}
.hazine-shell :is(.hz-parts > div, .hz-record-context span,
  .hz-record > p.hz-source-detail, .hz-atlas-selection, .hz-current-step,
  .hw-parts > div, .hw-tags span, .hw-steps > div) {
  background: var(--member-raised);
  color: var(--member-copy);
  border-color: var(--member-line);
}
.hazine-shell :is(.hazine-header, .hz-sidebar, .hz-sidebar-book, .hz-count,
  .hz-planet-strip button, .hz-planet-picker button, .hz-empty,
  .hz-stat-row > div, .hz-reader-toolbar button, .hw-top, .hw-empty) {
  border-color: var(--member-line);
}
.hazine-shell :is(.hazine-search, .hz-page-nav form input, .hw-search,
  .hw-fields select, .hw-fields input, .hw-branch select, .hw-work textarea),
.hz-dialog textarea {
  background: var(--member-panel);
  color: var(--member-text);
  border-color: var(--member-control-line);
}
.hazine-shell :is(.hazine-search input, .hw-search input) {
  color: var(--member-text);
}
.hazine-shell .hz-select {
  background: var(--member-panel) !important;
  color: var(--member-text) !important;
  border-color: var(--member-control-line) !important;
}
:is(.hz-popover, .hz-dialog) {
  color: var(--member-text);
  background: var(--member-panel);
  border-color: var(--member-line);
}
.hz-popover [role="option"][data-highlighted],
.hazine-shell :is(.hz-sidebar nav button:hover, .hz-sidebar nav button.active,
  .hz-planet-strip button:hover, .hz-planet-picker button:hover,
  .hz-planet-picker button.active, .hazine-card:hover, .hw-intents button:hover,
  .hw-result:hover, .hz-letter-board button:hover) {
  background: var(--member-raised);
  color: var(--member-accent);
  border-color: var(--member-accent);
}
.hazine-shell :is(.hz-range-list button, .hz-inline-actions button,
  .hz-empty button, .hz-section-line > button, .hz-letter-board button,
  .hz-atlas-grid button, .hz-step-buttons button, .hw-actions button,
  .hw-plan button, .hw-tool > button, .hw-work > button, .hw-compare > button),
.hz-dialog-actions button {
  background: var(--member-raised);
  color: var(--member-text);
  border-color: var(--member-line);
}
.hazine-shell :is(.hz-tabs-list button[data-active],
  .hz-tabs-list button[data-state="active"]) {
  color: var(--member-accent);
}
.hazine-shell .hz-tabs-list button::after {
  background: var(--member-accent) !important;
}
.hazine-shell :is(.hz-atlas-grid button[aria-pressed="true"],
  .hz-step-buttons button[aria-pressed="true"], .hw-actions button.hw-primary),
.hz-dialog-actions .hz-primary,
.hazine-shell .hz-skip {
  background: var(--member-fill);
  color: var(--member-on-fill);
  border-color: var(--member-fill);
}
.hazine-shell .hz-atlas-grid button[aria-pressed="true"] > span {
  color: var(--member-on-fill);
}
.hazine-shell :is(.hz-atlas-grid button > span, .hz-letter-board strong) {
  color: var(--member-text);
}
.hazine-shell .hz-reader {
  background: var(--c-paper-200);
  border-color: var(--member-line);
}
.hazine-shell .hz-image-loading {
  color: var(--member-text);
  background: var(--member-panel);
}

/* The Theory of Horology reader retains its dedicated columns and tools. */
.hb {
  --ink: var(--member-text);
  --muted: var(--member-muted);
  --gold: var(--member-accent);
  --line: var(--member-line);
  --surface: var(--member-raised);
  background: var(--member-bg);
  font-size: var(--fs-body);
}
.hb :is(h1, h2, h3) {
  font-family: var(--font-serif);
}
.hb :is(.hb-top > div > p, .hb-prose p, .hb-scene-result p,
  .hb-question legend, #hb-nav a, .hb-terms dd) {
  color: var(--member-copy);
}
.hb .hb-prose p {
  font-family: var(--font-reading);
  font-size: var(--fs-body);
}
.hb :is(#hb-nav a > span, .hb-reader-foot) {
  color: var(--member-muted);
}
.hb :is(.hb-sidebar, .hb-lesson, .hb-tabs, .hb-reader) {
  background: var(--member-panel);
}
.hb :is(.hb-calc, .hb-scene-result) {
  background: var(--member-raised);
}
.hb :is(.hb-calc output, .hb-scene-result strong,
  .hb-quiz-result:not(:empty), #hb-note-status) {
  color: var(--member-accent);
}
.hb :is(input:not([type="radio"]), select, textarea) {
  background: var(--member-bg);
  color: var(--member-text);
  border-color: var(--member-control-line);
}
.hb :is(.hb-tabs button, .hb-steps button),
.hb .hb-lesson-footer button:not(#hb-done) {
  background: transparent;
  color: var(--member-copy);
  border-color: var(--member-line);
}
.hb .hb-source-button {
  color: var(--member-accent);
  border-color: var(--member-line);
}
.hb button {
  background: var(--member-fill);
  color: var(--member-on-fill);
  border-color: var(--member-fill);
}
.hb :is(.hb-progress button, .hb-source-button) {
  background: transparent;
  color: var(--member-accent);
  border-color: var(--member-line);
}
.hb #hb-nav a[aria-current] {
  color: var(--member-text);
  background: var(--member-raised);
  border-color: var(--member-accent);
}
.hb :is(.hb-tabs button[aria-pressed="true"], .hb-steps button[aria-pressed="true"]) {
  color: var(--member-on-fill);
  background: var(--member-fill);
  border-color: var(--member-fill);
}
.hb :is(#hb-search-count, #hb-nav summary > small,
  .hb-reference .hb-source-button, .hb-top .hb-kicker) {
  font-size: var(--fs-label);
}
.hb :is(label, .hb-reference, .hb-reader-options, .hb-terms dt, #hb-nav summary,
  #hb-nav a, .hb-source-pages, .hb-reader-top > p, .hb-reader-foot) {
  font-size: var(--fs-small);
}
.hb .hb-page-viewport {
  background: var(--c-paper-200);
}

/* The four-wheel workshop uses the same roles without changing its diagram. */
.horology {
  background: var(--member-bg);
  font-size: var(--fs-body);
}
.horology :is(h1, h2) {
  font-family: var(--font-serif);
}
.horology :is(p, .ho-legend span) {
  color: var(--member-copy);
}
.horology :is(.ho-inputs small, .ho-diagram-top > span,
  .ho-caption, .ho-results span) {
  color: var(--member-muted);
  font-size: var(--fs-small);
}
.horology :is(.ho-heading > a, .ho-heading > span, .ho-kicker,
  .ho-results strong, .ho-formula strong, .ho-source summary,
  .ho-source details a, .ho-legend strong) {
  color: var(--member-accent);
}
.horology :is(.ho-controls, .ho-diagram, .ho-formula) {
  background: var(--member-panel);
}
.horology :is(.ho-workbench, .ho-controls, .ho-results, .ho-exercise,
  .ho-source, .ho-source details) {
  border-color: var(--member-line);
}
.horology :is(input:not([type="range"]), select) {
  background: var(--member-bg);
  color: var(--member-text);
  border-color: var(--member-control-line);
}
.horology input[type="range"] {
  accent-color: var(--member-accent);
}
.horology button {
  font-family: var(--font-sans);
  background: var(--member-fill);
  color: var(--member-on-fill);
  border-color: var(--member-fill);
}
.horology .ho-secondary {
  background: transparent;
  color: var(--member-accent);
  border-color: var(--member-line);
}
.horology .ho-formula {
  border-left-color: var(--member-accent);
}

/* All interactive states retain their meaning on the shared dark surfaces. */
:is(.hazine-shell, .hz-dialog, .hz-popover, .hb, .horology) :is(input, textarea)::placeholder {
  color: var(--member-muted);
  opacity: 1;
}
:is(.hazine-shell, .hz-dialog, .hz-popover, .hb, .horology) :focus-visible {
  outline: 2px solid var(--c-copper-hi);
  outline-offset: 3px;
}
.hazine-shell :is(.hazine-search, .hw-search):focus-within {
  outline: 2px solid var(--c-copper-hi);
  outline-offset: 3px;
}
.hz-dialog textarea:focus {
  outline: 2px solid var(--c-copper-hi);
}
.hazine-shell .hz-main:focus-visible {
  outline: 2px solid var(--c-copper-hi) !important;
  outline-offset: -3px;
}
:is(.hb, .horology) button:not(:disabled):hover,
.hb .hb-lesson-footer button:not(#hb-done):not(:disabled):hover {
  color: var(--member-text);
  background: var(--member-raised);
  border-color: var(--member-accent);
  filter: none;
}
.hazine-shell :is(.hz-range-list button, .hz-inline-actions button,
  .hz-empty button, .hz-section-line > button, .hz-atlas-grid button,
  .hz-step-buttons button, .hw-actions button, .hw-plan button,
  .hw-tool > button, .hw-work > button, .hw-compare > button):not(:disabled):hover,
.hz-dialog-actions button:not(:disabled):hover {
  border-color: var(--member-accent);
  color: var(--member-accent);
}
.hazine-shell :is(.hz-atlas-grid button[aria-pressed="true"],
  .hz-step-buttons button[aria-pressed="true"], .hw-actions button.hw-primary):not(:disabled):hover,
.hz-dialog-actions .hz-primary:not(:disabled):hover,
.hb :is(.hb-tabs button[aria-pressed="true"], .hb-steps button[aria-pressed="true"]):hover {
  background: var(--c-copper-hi);
  border-color: var(--c-copper-hi);
  color: var(--member-on-fill);
}
:is(.hazine-shell, .hz-dialog, .hb, .horology) button:disabled {
  opacity: 1 !important;
  background: var(--member-raised) !important;
  color: var(--member-muted) !important;
  border-color: var(--member-line) !important;
  cursor: not-allowed;
}
:is(.hazine-shell, .hz-dialog, .hb, .horology) button:disabled :is(span, strong, b, small) {
  color: inherit !important;
}
.hazine-shell :is(.hz-notice, .hw-notice),
.hz-dialog .hz-notice,
.hb .hb-status:not(:empty) {
  background: var(--c-ok-bg);
  color: var(--c-text-inv);
  border-color: var(--c-ok);
}
.hazine-shell :is(.hz-notice.error, .hw-notice[role="alert"]),
.hz-dialog .hz-notice.error {
  background: var(--c-err-bg);
  color: var(--c-text-inv);
  border-color: var(--c-err);
}
.horology :is(#ho-error, .ho-failure),
.hb .hb-error {
  color: var(--c-err) !important;
}
.hb .hb-status.hb-error {
  color: var(--c-text-inv) !important;
  background: var(--c-err-bg);
  border-color: var(--c-err);
}
.horology .ho-success,
.hazine-shell .hw-complete {
  color: var(--c-ok);
}

/* Profile and sign-in retain the shared site layout. */
.profile-page :is(.profile-grid p, .progress-block small, .study-list > div > p,
  .study-list a small, .badge-grid p) {
  color: var(--c-text-inv-3);
}
.profile-page .badge-grid .locked {
  opacity: 1;
}
.profile-page .badge-grid .locked :is(span, h2) {
  color: var(--c-text-inv-3);
}
.profile-page .study-list a:hover strong {
  color: var(--c-copper-hi);
}
.auth-page .auth-card input:focus-visible {
  outline: 2px solid var(--c-copper-hi);
  outline-offset: 3px;
}
.auth-page .auth-card input:not([type="checkbox"]) {
  border-color: color-mix(in srgb, var(--c-text-inv-3) 70%, var(--c-ink-900));
}
:is(.auth-page, .profile-page) .notice {
  font-size: var(--fs-small);
  color: var(--c-text-inv);
}
:is(.auth-page, .profile-page) .notice.success {
  background: var(--c-ok-bg);
  border-color: var(--c-ok);
}
:is(.auth-page, .profile-page) .notice.error {
  background: var(--c-err-bg);
  border-color: var(--c-err);
}

@media (prefers-reduced-motion: reduce) {
  :is(.hazine-shell, .hz-dialog, .hz-popover, .hb, .horology) :is(a, button) {
    transition: none;
  }
}