/* LEXA.ID responsive UI retrofit — additive layer loaded after style.css */
:root {
  --ui-navy: #18345f;
  --ui-navy-deep: #102542;
  --ui-gold: #c49a52;
  --ui-gold-strong: #a9782f;
  --ui-canvas: #f7f5f1;
  --ui-paper: #fff;
  --ui-border: #d9dfe8;
  --ui-text: #202634;
  --ui-muted: #596579;
  --ui-success: #16794b;
  --ui-danger: #b42318;
  --ui-container: 72rem;
  --ui-reading: 46rem;
  --ui-radius-sm: 0.5rem;
  --ui-radius: 0.875rem;
  --ui-radius-lg: 1.25rem;
  --ui-shadow: 0 0.75rem 2rem rgb(16 37 66 / 0.08);
  --ui-space-1: 0.375rem;
  --ui-space-2: 0.625rem;
  --ui-space-3: 1rem;
  --ui-space-4: 1.5rem;
  --ui-space-5: 2rem;
  --ui-space-6: 3rem;
}

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  min-width: 0;
  margin: 0;
  background: var(--ui-canvas);
  color: var(--ui-text);
  font-size: 1rem;
  line-height: 1.6;
}

*, *::before, *::after { box-sizing: border-box; }

img, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(main, section, article, aside, form, fieldset, .container, .grid) > * {
  min-width: 0;
}

:where(.container, .nav, .footer-grid, .footer-bottom) {
  width: min(100% - 2rem, var(--ui-container));
  margin-inline: auto;
}

h1, h2, h3, h4 {
  overflow-wrap: anywhere;
  text-wrap: balance;
}

p, li { text-wrap: pretty; }

a, button, input, select, textarea { font: inherit; }

button, [role="button"], .btn { min-height: 2.75rem; }

input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  max-width: 100%;
  min-height: 2.75rem;
}

:focus-visible {
  outline: 3px solid var(--ui-gold);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Shared shell */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--ui-border);
  background: rgb(255 255 255 / 0.96);
  backdrop-filter: blur(0.75rem);
}

.nav {
  position: relative;
  display: flex;
  min-height: 4rem;
  align-items: center;
  gap: var(--ui-space-2);
}

.brand {
  flex: 0 0 auto;
  color: var(--ui-navy-deep);
  font-weight: 800;
  text-decoration: none;
}

.brand-mark {
  background: var(--ui-navy);
  color: var(--ui-paper);
}

.dark-mode-toggle,
.nav-toggle {
  display: inline-grid;
  min-width: 2.75rem;
  min-height: 2.75rem;
  place-items: center;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-paper);
  color: var(--ui-navy-deep);
}

.dark-mode-toggle { margin-left: auto; }

.nav-links {
  position: absolute;
  inset: calc(100% + 1px) 0 auto;
  display: none;
  max-height: calc(100dvh - 5rem);
  margin: 0;
  padding: var(--ui-space-3);
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--ui-border);
  border-top: 0;
  border-radius: 0 0 var(--ui-radius) var(--ui-radius);
  background: var(--ui-paper);
  box-shadow: var(--ui-shadow);
}

.nav-links.open { display: grid; gap: 0.25rem; }

.nav-links a {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: var(--ui-radius-sm);
  color: var(--ui-navy-deep);
  text-decoration: none;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.active {
  background: rgb(196 154 82 / 0.12);
  color: var(--ui-navy);
}

/* Type, sections, and surfaces */
section { padding-block: clamp(2.75rem, 8vw, 5.5rem); }

.hero,
.consultation-hero,
.auth-hero,
[data-page="feedback"] > .hero,
[data-page="lawyer"] > .hero {
  overflow: clip;
  background: var(--ui-navy);
  color: var(--ui-paper);
}

:where(.hero, .consultation-hero, .auth-hero, [data-page="feedback"] > .hero, [data-page="lawyer"] > .hero) :where(h1, h2, p, li) {
  color: inherit;
}

.hero h1,
.page-hero h1,
.consultation-hero h1,
.auth-hero h1 {
  max-width: 22ch;
  margin-block: 0.75rem 1rem;
  font-size: clamp(2rem, 9vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.lead,
.hero-subtitle,
.page-hero p,
.consultation-hero p {
  max-width: 42rem;
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.65;
}

.eyebrow {
  color: var(--ui-gold-strong);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

:where(.hero, .consultation-hero, .auth-hero) .eyebrow { color: #e8c984; }

[hidden] {
  display: none !important;
}

body[data-page="admin"] .admin-shell {
  width: min(100% - 2rem, 86rem);
  margin-inline: auto;
  padding-block: clamp(1.5rem, 4vw, 3rem);
}

body[data-page="admin"] .admin-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-space-3);
  margin-bottom: var(--ui-space-4);
}

body[data-page="admin"] .admin-title h1 {
  margin: 0.25rem 0 0.35rem;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.05;
}

body[data-page="admin"] .admin-title p {
  max-width: 48rem;
  margin: 0;
  color: var(--ui-muted);
}

body[data-page="admin"] .admin-login {
  max-width: 42rem;
}

body[data-page="admin"] .admin-login-row,
body[data-page="admin"] .reviewer-create-row,
body[data-page="admin"] .admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

body[data-page="admin"] .admin-login-row input,
body[data-page="admin"] .reviewer-create-row input {
  flex: 1 1 14rem;
  min-width: 0;
}

body[data-page="admin"] .btn-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding-inline: 0.9rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.625rem;
  background: var(--ui-paper);
  color: var(--ui-navy-deep);
  font-weight: 800;
  cursor: pointer;
}

body[data-page="admin"] .admin-console {
  display: grid;
  grid-template-columns: minmax(13rem, 0.22fr) minmax(0, 1fr);
  gap: var(--ui-space-4);
  align-items: start;
}

body[data-page="admin"] .admin-sidebar {
  position: sticky;
  top: var(--ui-space-3);
}

body[data-page="admin"] .admin-console-nav {
  display: grid;
  gap: 0.35rem;
  padding: 0.5rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: #fdfdfb;
  box-shadow: var(--ui-shadow);
}

body[data-page="admin"] .admin-console-nav button {
  justify-content: flex-start;
  min-height: 2.5rem;
  border: 0;
  border-radius: 0.625rem;
  background: transparent;
  color: var(--ui-muted);
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

body[data-page="admin"] .admin-console-nav button:hover,
body[data-page="admin"] .admin-console-nav button:focus-visible,
body[data-page="admin"] .admin-console-nav button.active {
  background: var(--ui-navy);
  color: var(--ui-paper);
}

body[data-page="admin"] .admin-workspace {
  min-width: 0;
}

body[data-page="admin"] .admin-workspace section {
  padding-block: 0;
}

body[data-page="admin"] .admin-panel {
  display: none;
  padding: 0;
}

body[data-page="admin"] .admin-panel.active {
  display: grid;
  gap: var(--ui-space-4);
}

body[data-page="admin"] .admin-panel-head,
body[data-page="admin"] .panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-space-3);
  flex-wrap: wrap;
}

body[data-page="admin"] .admin-panel-head h2,
body[data-page="admin"] .panel-head h3 {
  margin: 0;
}

body[data-page="admin"] .admin-kpi-grid,
body[data-page="admin"] .admin-module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-3);
}

body[data-page="admin"] .metric-card,
body[data-page="admin"] .admin-placeholder,
body[data-page="admin"] .admin-record-row,
body[data-page="admin"] .admin-status-strip p {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-paper);
}

body[data-page="admin"] .metric-card {
  display: grid;
  gap: 0.2rem;
  padding: 1rem;
}

body[data-page="admin"] .metric-card span,
body[data-page="admin"] .admin-status-strip span,
body[data-page="admin"] small {
  color: var(--ui-muted);
}

body[data-page="admin"] .metric-card strong {
  color: var(--ui-navy-deep);
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.15;
}

body[data-page="admin"] .admin-placeholder {
  padding: 1rem;
  border-style: dashed;
  background: #fbfaf6;
}

body[data-page="admin"] .admin-placeholder p {
  margin: 0.35rem 0 0;
  color: var(--ui-muted);
}

body[data-page="admin"] .admin-count-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

body[data-page="admin"] .admin-count-row strong {
  color: var(--ui-success);
  font-size: 2rem;
  line-height: 1;
}

body[data-page="admin"] .admin-status-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: var(--ui-space-3);
}

body[data-page="admin"] .admin-status-strip p {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding: 1rem;
}

body[data-page="admin"] .admin-status-strip strong {
  font-size: 1.6rem;
  color: var(--ui-navy-deep);
}

body[data-page="admin"] .admin-record-list {
  display: grid;
  gap: 0.75rem;
}

body[data-page="admin"] .admin-record-row,
body[data-page="admin"] .source-row,
body[data-page="admin"] .review-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-space-3);
  padding: 1rem;
}

body[data-page="admin"] .admin-record-row h3 {
  margin: 0 0 0.2rem;
  font-size: 1rem;
}

body[data-page="admin"] .admin-record-row p {
  margin: 0 0 0.15rem;
}

body[data-page="admin"] .quality-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

body[data-page="admin"] .quality-grid p {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
}

body[data-page="admin"] .quality-grid strong {
  color: var(--ui-navy-deep);
}

body[data-page="admin"] .status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.8rem;
  padding-inline: 0.65rem;
  border-radius: 999px;
  background: #e8eef7;
  color: var(--ui-navy-deep);
  font-size: 0.82rem;
  font-weight: 800;
}

body[data-page="admin"] .status-active,
body[data-page="admin"] .status-aktif,
body[data-page="admin"] .status-approved {
  background: #dcfce7;
  color: #166534;
}

body[data-page="admin"] .status-pending {
  background: #fff3d6;
  color: #7a5415;
}

body[data-page="admin"] .status-rejected,
body[data-page="admin"] .status-nonaktif {
  background: #fee2e2;
  color: #991b1b;
}

body[data-page="admin"] .admin-link-list {
  display: grid;
  gap: 0.5rem;
}

body[data-page="admin"] .admin-link-list a {
  min-height: 2.5rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-navy-deep);
  text-decoration: none;
}

body[data-page="admin"] .admin-link-list a:hover,
body[data-page="admin"] .admin-link-list a:focus-visible {
  border-color: var(--ui-gold);
  background: rgb(196 154 82 / 0.1);
}

body[data-page="admin"] .admin-error {
  color: var(--ui-danger);
  font-weight: 800;
}

.card,
.dashboard-card,
.auth-card,
.auth-panel {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-paper);
  box-shadow: var(--ui-shadow);
}

.card,
.dashboard-card { padding: clamp(1.25rem, 4vw, 2rem); }

.muted { color: var(--ui-muted); }

.section-alt { background: rgb(24 52 95 / 0.035); }

.section-head {
  max-width: var(--ui-reading);
  margin-bottom: var(--ui-space-5);
}

.grid-2,
.grid-3,
.two-col,
.hero-grid,
.footer-grid,
.consultation-layout,
.evidence-layout,
.dashboard-grid,
.dashboard-columns,
.dashboard-subgrid,
.package-grid,
.pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ui-space-3);
}

.grid-2 > *,
.grid-3 > *,
.hero-trust > *,
.lawyer-grid > * {
  min-width: 0;
}

.lawyer-avatar {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: var(--ui-navy);
  color: var(--ui-paper);
  font-weight: 700;
  margin-bottom: 0.9rem;
}

.hero-actions,
.button-row,
.evidence-actions,
.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-actions > *,
.button-row > * { max-width: 100%; }

.btn,
.auth-submit,
.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  padding-inline: 1rem;
  text-align: center;
  white-space: normal;
}

.btn-navy,
.auth-submit {
  border-color: var(--ui-navy);
  background: var(--ui-navy);
  color: var(--ui-paper);
}

.btn-gold {
  border-color: var(--ui-gold);
  background: var(--ui-gold);
  color: var(--ui-navy-deep);
}

.btn-outline {
  border-color: var(--ui-border);
  background: var(--ui-paper);
  color: var(--ui-navy-deep);
}

.chat-preview,
.modal,
.chat-view,
.lawyer-card,
.package-option {
  max-width: 100%;
  min-width: 0;
}

.modal {
  width: min(calc(100% - 2rem), 32rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}

.chat-messages,
.table-wrap {
  max-width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
}

.chat-input-area,
.chat-footer,
.chat-input-row {
  display: flex;
  min-width: 0;
  gap: 0.5rem;
}

:where(.chat-input-area, .chat-footer, .chat-input-row) input {
  flex: 1 1 10rem;
  min-width: 0;
}

.site-footer {
  padding-block: var(--ui-space-5) var(--ui-space-3);
  background: var(--ui-navy-deep);
  color: #dce5f2;
}

.site-footer :where(a, p, li, h4) { color: inherit; }
.footer-bottom { margin-top: var(--ui-space-4); padding-top: var(--ui-space-3); }

/* Form safety */
.dashboard-form,
.auth-form,
.contact-form,
.evidence-auth,
.evidence-query {
  display: grid;
  gap: 0.875rem;
}

:where(.dashboard-form, .auth-form, .contact-form, .evidence-auth, .evidence-query) label {
  display: grid;
  gap: 0.375rem;
  color: var(--ui-navy-deep);
  font-weight: 700;
}

:where(.dashboard-form, .auth-form, .contact-form, .evidence-auth, .evidence-query) :where(input, select, textarea) {
  width: 100%;
  border: 1px solid #bfc9d8;
  border-radius: 0.625rem;
  background: var(--ui-paper);
}

[data-page="kontak"] .contact-form > *,
[data-page="riset"] .evidence-layout > * { min-width: 0; }

.disclaimer-note {
  border-color: #e7c979;
  background: #fff3d6;
  color: #684b16;
}

/* Content must remain visible even when intersection observers are delayed. */
.scroll-anim,
.scroll-anim.visible {
  opacity: 1;
  transform: none;
}

body[data-page="consultation"] .consultation-hero,
body[data-page="consultation"] .consultation-hero :where(h1, p),
body[data-page="login"] .auth-hero,
body[data-page="login"] .auth-hero :where(h1, p, li),
body[data-page="feedback"] .hero :where(h1, p),
body[data-page="lawyer"] .hero :where(h1, p) {
  color: var(--ui-paper);
}

body[data-page="consultation"] .consultation-hero h1,
body[data-page="login"] .auth-hero h1,
body[data-page="feedback"] .hero h1,
body[data-page="lawyer"] .hero h1 {
  font-size: clamp(2rem, 6vw, 3.75rem);
  line-height: 1.08;
}

/* Product-flow refinements: retain legacy hooks while removing nested-card noise. */
body[data-page="consultation"] #authPanel {
  max-width: 38rem;
  margin-inline: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="consultation"] #authPanel .dashboard-card { width: 100%; }

body[data-page="dashboard"] .dashboard-hero {
  background: linear-gradient(135deg, var(--ui-navy) 0%, var(--ui-navy-deep) 100%);
  border-bottom: 0;
}

body[data-page="dashboard"] .dashboard-hero :where(h1, p, .stat-value, .stat-label) {
  color: var(--ui-paper);
}

body[data-page="dashboard"] .dashboard-hero .hero-subtitle,
body[data-page="dashboard"] .dashboard-hero .stat-label { color: rgb(255 255 255 / 0.78); }

body[data-page="chatbot"] .chat-consent {
  display: grid;
  gap: 0.6rem;
}

body[data-page="chatbot"] .chat-consent :where(p, label) {
  margin: 0;
  line-height: 1.5;
}

body[data-page="chatbot"] .chat-input-area { align-items: end; }

body[data-page="feedback"] .fb-hero :where(h1, p),
body[data-page="lawyer"] .lawyer-hero :where(h1, p) {
  color: var(--ui-paper);
}

body:is([data-page="feedback"], [data-page="lawyer"]) #authPanel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body:is([data-page="feedback"], [data-page="lawyer"]) #authPanel .dashboard-card {
  width: 100%;
}

@media (max-width: 420px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .grid-3,
  .hero-trust,
  .container > [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-login-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  .admin-login-row :where(input, button) { width: 100%; }
}

@media (max-width: 860px) {
  body[data-page="admin"] .admin-title,
  body[data-page="admin"] .admin-panel-head,
  body[data-page="admin"] .admin-record-row,
  body[data-page="admin"] .source-row,
  body[data-page="admin"] .review-row {
    display: grid;
  }

  body[data-page="admin"] .admin-actions,
  body[data-page="admin"] .admin-panel-head > .btn,
  body[data-page="admin"] .admin-panel-head > .btn-small,
  body[data-page="admin"] .admin-panel-head > button {
    width: 100%;
  }

  body[data-page="admin"] .admin-console {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="admin"] .admin-sidebar {
    position: static;
  }

  body[data-page="admin"] .admin-console-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="admin"] .admin-kpi-grid,
  body[data-page="admin"] .admin-module-grid,
  body[data-page="admin"] .quality-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 768px) {
  :where(.container, .nav, .footer-grid, .footer-bottom) {
    width: min(100% - 3rem, var(--ui-container));
  }

  .grid-2,
  .two-col,
  .dashboard-grid,
  .evidence-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .grid-3,
  .package-grid,
  .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr); }

  .footer-grid { grid-template-columns: minmax(14rem, 2fr) repeat(3, minmax(7rem, 1fr)); }
}

@media (min-width: 1024px) {
  body { line-height: 1.65; }
}

@media (min-width: 1180px) {
  .nav-toggle { display: none; }
  .dark-mode-toggle { margin-left: 0; }
  .nav-links {
    position: static;
    display: flex;
    max-height: none;
    margin-left: auto;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .nav-links a { padding-inline: 0.6rem; font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }

  .scroll-anim {
    opacity: 1 !important;
    transform: none !important;
  }
}