/* PR-UI01: shared visual foundation. Business-specific layers remain untouched. */
:root {
  --ui-canvas: #f6f8fa;
  --ui-surface: #ffffff;
  --ui-section: #eef5f3;
  --ui-brand: #063f3c;
  --ui-brand-strong: #052f2d;
  --ui-brand-soft: #e7f0f0;
  --ui-cta: #c95749;
  --ui-cta-strong: #a94237;
  --ui-ink: #233039;
  --ui-body: #34434a;
  --ui-muted: #62717b;
  --ui-disabled: #9aa7ad;
  --ui-line: #dce3e8;
  --ui-line-strong: #b9c7cd;
  --ui-focus: #246973;
  --ui-danger: #b73838;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-7: 32px;
  --ui-space-8: 40px;
  --ui-space-9: 48px;
  --ui-space-10: 64px;
  --ui-radius-control: 6px;
  --ui-radius-card: 8px;
  --ui-radius-modal: 8px;
  --ui-shadow-surface: 0 2px 12px rgb(15 43 40 / 6%);
  --ui-shadow-floating: 0 10px 28px rgb(15 43 40 / 16%);
  --ui-shadow-overlay: 0 16px 40px rgb(15 43 40 / 20%);
  --ui-content-width: 1280px;
  --ui-public-width: 1360px;
}

html {
  background: var(--ui-canvas);
  scroll-behavior: smooth;
}

body[data-role] {
  background: var(--ui-canvas);
  color: var(--ui-body);
  font-family: "Noto Sans TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

body[data-role] :is(h1, h2, h3, h4, p, a, button, input, select, textarea, label, span, strong, small) {
  letter-spacing: 0;
}

body[data-role] :is(h1, h2, h3, h4) {
  color: var(--ui-ink);
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

body[data-role] :is(p, li, dd) {
  max-inline-size: 72ch;
}

body[data-role]:not(.admin-module-active) p:not(.hint):not(.muted):not(.metadata):not(.eyebrow),
body[data-role]:not(.admin-module-active) label:not(.visually-hidden) {
  font-size: 15px;
}

body[data-role] :is(input, select, textarea) {
  max-inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 44px;
  padding: 10px 12px;
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
  color: var(--ui-ink);
  font: inherit;
  font-size: 16px;
}

body[data-role] textarea { min-block-size: 96px; }
body[data-role] :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { min-block-size: auto; }
body[data-role] ::placeholder { color: var(--ui-muted); opacity: .86; }
body[data-role] :is(input, select, textarea):disabled { color: var(--ui-disabled); background: #f1f4f5; cursor: not-allowed; }
body[data-role] :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--ui-danger); }

body[data-role] :is(.button, .text-button, .tab, button.button, a.button) {
  min-block-size: 44px;
  border-radius: var(--ui-radius-control);
  font-size: 15px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}

body[data-role] :is(.button, button.button, a.button):not(.ghost):not(.danger):not(.whatsapp) {
  border-color: var(--ui-brand-strong);
  background: var(--ui-brand);
  color: #fff;
  box-shadow: none;
}

body[data-role] :is(.button, button.button, a.button):not(.ghost):not(.danger):not(.whatsapp):is(:hover, :focus-visible):not(:disabled) {
  border-color: var(--ui-brand-strong);
  background: var(--ui-brand-strong);
}

body[data-role] :is(.button, button.button, a.button).whatsapp {
  border-color: #087344;
  background: #128c56;
  color: #fff;
}

body[data-role] :is(.button, button.button, a.button).danger { background: var(--ui-danger); border-color: var(--ui-danger); color: #fff; }
body[data-role] :is(.button, button.button, a.button).ghost { background: var(--ui-surface); color: var(--ui-brand); box-shadow: none; }
body[data-role] .text-button { color: var(--ui-brand); }

body[data-role] :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 3px;
}

body[data-role] :is(.site-header, .site-footer) {
  background: var(--ui-surface);
  color: var(--ui-body);
}

body[data-role] .site-header {
  border-block-end: 1px solid var(--ui-line);
  box-shadow: none;
  backdrop-filter: none;
}

body[data-role] .site-header-inner {
  inline-size: min(calc(100% - 48px), var(--ui-public-width));
  min-block-size: 72px;
  margin-inline: auto;
  padding: 12px 0;
}

body[data-role] .brand-logo {
  inline-size: 44px;
  block-size: 44px;
  flex-basis: 44px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-card);
  background: var(--ui-surface);
  box-shadow: none;
  object-fit: contain;
}

body[data-role] .brand strong { color: var(--ui-ink); font-size: 18px; }
body[data-role] .brand span { color: var(--ui-muted); font-size: 14px; }
body[data-role] :is(.nav, .account-nav) .tab { min-block-size: 44px; border-radius: var(--ui-radius-control); }

body[data-role="public"]:not([data-shell]) .site-header-inner,
body[data-shell="login"] .site-header-inner {
  inline-size: min(calc(100% - 48px), var(--ui-public-width));
}

body[data-shell="app"]:not(.admin-module-active) .site-header-inner {
  inline-size: min(calc(100% - 48px), var(--ui-content-width));
  min-block-size: 72px;
  padding-inline: 0;
}

body[data-shell="app"]:not(.admin-module-active) #app-view {
  inline-size: min(calc(100% - 48px), var(--ui-content-width));
  max-inline-size: var(--ui-content-width);
  margin-inline: auto;
  padding-inline: 0;
}

body[data-role] .site-footer {
  border-block-start: 1px solid var(--ui-line);
  box-shadow: none;
}

body[data-role] :is(.site-footer-grid, .site-footer-bottom, #site-copyright-strip) {
  inline-size: min(calc(100% - 48px), var(--ui-public-width));
  margin-inline: auto;
}

body[data-role] .site-footer-grid { padding-block: var(--ui-space-9); }
body[data-role] .site-footer-bottom { min-block-size: 48px; padding-block: var(--ui-space-3); border-block-start: 1px solid var(--ui-line); font-size: 14px; }
body[data-role] #site-copyright-strip { color: var(--ui-muted); font-size: 14px; }

/* Keep shared surfaces restrained; feature pages may opt into their own treatment. */
body[data-role] :is(.panel, .card, .stat-card, .list-item, .role-metric, .auth-card) {
  border-radius: var(--ui-radius-card);
  box-shadow: var(--ui-shadow-surface);
}

body[data-role] :is(.panel, .card, .auth-card) { border-color: var(--ui-line); }
body[data-role] :is(.hint, .muted) { color: var(--ui-muted); font-size: 14px; line-height: 1.65; }
body[data-role] :is(.table-wrap, .table-scroll) { max-inline-size: 100%; overflow-x: auto; }

/* Legacy feature layers use em-scaled summary text. Keep shared context readable
   without changing the feature markup or its data contract. */
body[data-shell="app"] #member-line { font-size: 15px; }
body[data-shell="app"] #page-context-line { font-size: 15px; }
body[data-role] .table-scroll-hint { font-size: 15px; }
body[data-role] .copyright-disclaimer-version { font-size: 13px; }

/* Admin remains a dense tool, but shared metadata and controls keep the
   foundation minimums so the global refresh does not create tiny text. */
body[data-shell="app"].admin-module-active #workspace-eyebrow { font-size: 13px; }
body[data-shell="app"].admin-module-active .learning-stage-order-note { font-size: 14px; }
body[data-shell="app"].admin-module-active :is(table th, label) { font-size: 14px; }
body[data-shell="app"].admin-module-active .question-management-table th { font-size: 14px; }
body[data-shell="app"].admin-module-active button { font-size: 14px; }

/* The dock is a mobile control, never a tablet fallback. */
body[data-role] #bottom-nav { box-sizing: border-box; }

@media (min-width: 768px) and (max-width: 1023px) {
  body[data-role] .site-header-inner,
  body[data-shell="app"]:not(.admin-module-active) .site-header-inner {
    inline-size: min(calc(100% - 48px), var(--ui-content-width));
    min-block-size: 68px;
    padding-block: 10px;
  }

  body[data-shell="app"]:not(.admin-module-active) .nav {
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  body[data-shell="app"]:not(.admin-module-active) .nav .tab {
    min-block-size: 44px;
    padding-inline: 10px;
    font-size: 14px;
  }

  body[data-role] #bottom-nav { display: none !important; }
  body[data-role] main { padding-block-end: 32px !important; }
  body[data-shell="app"]:not(.admin-module-active) #app-view { padding-block-end: 32px; }
  body[data-role] .whatsapp-floating-contact {
    inset-block-end: 24px;
    transform: none;
  }
}

@media (max-width: 767px) {
  body[data-role] .site-header-inner,
  body[data-role="public"]:not([data-shell]) .site-header-inner,
  body[data-shell="login"] .site-header-inner,
  body[data-shell="app"]:not(.admin-module-active) .site-header-inner,
  body[data-role] :is(.site-footer-grid, .site-footer-bottom, #site-copyright-strip) {
    inline-size: calc(100% - 32px);
  }

  body[data-role] .site-header-inner { min-block-size: 64px; padding-block: 10px; }
  body[data-role] .brand-logo { inline-size: 40px; block-size: 40px; flex-basis: 40px; }
  body[data-role] .brand strong { font-size: 16px; }
  body[data-role] .brand span { font-size: 13px; }

  body[data-role] :is(.button, .text-button, .tab, button.button, a.button) { min-block-size: 44px; }
  body[data-role] main { padding-block-end: calc(96px + env(safe-area-inset-bottom, 0px)); }
  body[data-shell="login"] main { padding-block-end: 24px; }
  body[data-shell="app"]:not(.admin-module-active) #app-view { inline-size: calc(100% - 32px); padding-block-end: 24px; }

  body[data-role] .site-footer-grid { padding-block: 32px; }
  body[data-role] .site-footer-bottom { min-block-size: 56px; }

  body[data-role] .bottom-nav:not([hidden]) {
    min-block-size: calc(72px + env(safe-area-inset-bottom, 0px));
    padding-block: 8px env(safe-area-inset-bottom, 0px);
    border-block-start: 1px solid rgb(255 255 255 / 16%);
    box-shadow: 0 -8px 24px rgb(15 43 40 / 16%);
  }

  /* Keep the public home button branded without a third floating layer. */
  body[data-role] .bottom-nav .bottom-nav-home-disc {
    inline-size: 32px;
    block-size: 32px;
    margin: 0;
    padding: 2px;
    border: 1px solid rgb(255 255 255 / 70%);
    border-radius: 50%;
    transform: none;
    box-shadow: none;
  }

  body[data-role] .bottom-nav > :is(a, button) {
    grid-template-rows: 1.5rem 1.25rem;
    min-block-size: 56px;
    border-radius: var(--ui-radius-control);
  }

  body[data-role] .whatsapp-floating-contact {
    inset-inline-end: max(12px, env(safe-area-inset-right, 0px));
    inset-block-end: calc(88px + env(safe-area-inset-bottom, 0px));
    transform: none;
  }

  body[data-shell="login"] .whatsapp-floating-contact {
    inset-block-end: max(16px, env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body[data-role] * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}