/* Authenticated presentation only. Reuse the public DueByLaw palette without
   importing public navigation or changing report documents and product flows. */
.duebylaw-app {
  --ink-soft: var(--brand-muted);
  --paper-deep: var(--brand-teal-soft);
  --green: var(--brand-teal-dark);
  --green-soft: var(--brand-teal-soft);
  --sans: var(--brand-font);
}

.duebylaw-app .topbar {
  min-height: 88px;
  height: auto;
  gap: 20px;
  padding: 16px 34px;
  border-color: var(--line);
  background: var(--white);
  backdrop-filter: none;
}
.duebylaw-app .brand { flex: 0 0 auto; max-width: 100%; min-height: 44px; }
/* Keep the approved icon and wordmark together, with room for existing actions
   at the narrowest supported viewport. The link retains its 44px target. */
.app-brand-art { display: block; width: clamp(120px, calc(100vw - 200px), 176px); max-width: 100%; }
.app-brand-art img { display: block; width: 100%; height: auto; }
.duebylaw-app .topbar-actions { min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.duebylaw-app .account-trigger:hover,
.duebylaw-app .account-trigger[aria-expanded="true"] { background: var(--paper-deep); }
.duebylaw-app .account-avatar { background: var(--brand-navy); color: var(--white); }
.duebylaw-app .eyebrow { color: var(--brand-teal-dark); }
.duebylaw-app :is(.sidebar, .account-sidebar) { background: var(--paper); }
@media (min-width: 761px) {
  .duebylaw-app :is(.sidebar, .account-sidebar) { top: 88px; min-height: calc(100vh - 88px); }
  .duebylaw-app .sidebar { height: calc(100vh - 88px); }
  .duebylaw-app .workspace { min-height: calc(100vh - 88px); }
}
.duebylaw-app :is(.sidebar-footer p, .mock-flow-header p) { color: var(--ink-soft); }
.duebylaw-app :is(.matter-item em, .summary-card:not(.primary) small, .panel-header p, .entry-main > span, .entry-amount > small, .entry-balance > small, .document-summary > div > span, .court-forms-heading > div > p, .legal-footer) { color: var(--ink-soft); }
.duebylaw-app .sidebar-footer a { color: var(--brand-teal-dark); }
.duebylaw-app .account-section { background: var(--white); box-shadow: var(--shadow); }
.duebylaw-app :is(.account-page-heading h1, .account-section h2) { color: var(--brand-navy); }
.duebylaw-app .btn { border-radius: 9px; white-space: normal; text-align: center; }
.duebylaw-app .btn-primary { background: var(--brand-navy); box-shadow: none; }
.duebylaw-app .btn-primary:hover { background: var(--brand-ink); }
.duebylaw-app .btn-brass { background: var(--brand-teal-dark); box-shadow: none; }
.duebylaw-app .btn-brass:hover { background: var(--brand-navy); }
.duebylaw-app .btn-quiet { color: var(--brand-navy); background: var(--brand-teal-soft); }
.duebylaw-app .report-toolbar .btn-quiet { color: var(--brand-navy); background: var(--brand-teal-soft); }
.duebylaw-app :is(input:not([type="radio"]):not([type="checkbox"]), textarea, select) { border-color: var(--brand-input-line); }
.duebylaw-app :is(input, textarea)::placeholder { color: var(--brand-muted); opacity: 1; }
.duebylaw-app :is(.date-view-toggle, .entry-type-button, .entry-submit-button):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.duebylaw-app .auth-gate { padding: 40px 20px; }
.duebylaw-app .auth-gate > .auth-flow-overlay { width: min(560px, 100%); min-width: 0; }
.duebylaw-app .auth-gate .auth-card {
  max-height: none;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.duebylaw-app .auth-card { overflow-wrap: anywhere; }
.duebylaw-app .auth-card .mock-flow-header { gap: 12px; }
.duebylaw-app .auth-card .mock-flow-header > div { min-width: 0; }
.duebylaw-app .auth-card .mock-flow-header :is(h1, h2) {
  margin: 8px 0 12px;
  color: var(--brand-navy);
  font-family: var(--brand-font);
  font-size: clamp(1.6rem, 4vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.025em;
}
.duebylaw-app .auth-card .mock-flow-header p { font-size: .875rem; line-height: 1.65; }
.duebylaw-app .auth-card .form-grid { grid-template-columns: minmax(0, 1fr); }
.duebylaw-app .auth-card .field { min-width: 0; }
.duebylaw-app .field input { height: auto; min-height: 44px; }
.duebylaw-app .field :is(input, select, textarea),
.duebylaw-app .as-of-control input { min-width: 0; max-width: 100%; }
.duebylaw-app .auth-card .mock-flow-actions { flex-wrap: wrap; align-items: center; }
.duebylaw-app .auth-card :is(.text-btn, .btn) { min-height: 44px; }
.duebylaw-app .auth-card [data-auth-submit] { width: 100%; }
.duebylaw-app .auth-card .mock-flow-error { margin-inline: 0; }
.duebylaw-app :is(.account-main, .main-content) { overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .duebylaw-app .topbar { position: relative; padding: 14px 16px; gap: 12px; flex-wrap: wrap; }
  .duebylaw-app .topbar-actions { margin-left: auto; gap: 8px; }
  .duebylaw-app .entry-menu { grid-column: 2 / -1; justify-self: end; }
  .duebylaw-app .auth-gate { padding: 24px 16px; }
  .duebylaw-app .auth-card :is(.mock-flow-header, .mock-flow-body) { padding: 24px; }
  .duebylaw-app .auth-card .auth-brand { padding: 28px 24px 0; }
}

@media (max-height: 500px) {
  .duebylaw-app .topbar { position: relative; }
}

/* Optional structured liability editor and EJ-130 reuse the existing shell. */
#liabilityEditor, #entryAllocations { min-width: 0; margin-block: 1rem; }
#liabilityEditor fieldset, #entryAllocations fieldset, .ej130-overlay fieldset {
  min-width: 0; border: 1px solid #b8afa0; border-radius: 8px; padding: 1rem; margin-block: 1rem;
}
#liabilityEditor label, #entryAllocations label, .ej130-overlay label {
  display: block; margin-block: .75rem; overflow-wrap: anywhere;
}
#liabilityEditor input:not([type="checkbox"]), #liabilityEditor textarea, #liabilityEditor select,
#entryAllocations input, .ej130-overlay input:not([type="checkbox"]), .ej130-overlay select {
  display: block; width: 100%; max-width: 100%; box-sizing: border-box; min-height: 44px; font: inherit;
  border: 1px solid #857b6e; border-radius: 5px; padding: .6rem; background: #fff; color: #202b30;
}
#liabilityEditor .check-row, .ej130-overlay .check-row { display:flex; align-items:flex-start; gap:.65rem; }
#liabilityEditor input[type="checkbox"], .ej130-overlay input[type="checkbox"] { flex:0 0 24px; width:24px; height:24px; margin:0; }
#liabilityEditor button, #entryAllocations button, .ej130-overlay button, .ej130-overlay summary { min-height:44px; }
.ej130-overlay summary { padding:.7rem 0; cursor:pointer; }
.ej130-overlay table { width:100%; border-collapse:collapse; margin-block:1.5rem; table-layout:fixed; }
.ej130-overlay caption { text-align:left; font-weight:700; margin-bottom:.5rem; }
.ej130-overlay th, .ej130-overlay td { text-align:left; padding:.5rem; border-bottom:1px solid #b8afa0; overflow-wrap:anywhere; }
.ej130-overlay th:first-child { width:12%; }
.ej130-overlay p, .ej130-overlay dd { overflow-wrap:anywhere; }
.ej130-overlay [data-errors] { padding:1rem; border:2px solid #8a352d; margin-bottom:1rem; }