/* Hanken Grotesk — self-hosted (latin subset), no third-party font requests. */
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/hanken-grotesk/hanken-grotesk-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/hanken-grotesk/hanken-grotesk-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/hanken-grotesk/hanken-grotesk-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/hanken-grotesk/hanken-grotesk-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/hanken-grotesk/hanken-grotesk-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: italic; font-weight: 500; font-display: swap; src: url('/fonts/hanken-grotesk/hanken-grotesk-500-italic.woff2') format('woff2'); }

:root {
  --myside-navy: #12343b;
  --myside-deep: #071d26;
  --myside-teal: #16a6a0;
  --myside-teal-dark: #0e7c78;
  --myside-mint: #eaf8f6;
  --myside-slate: #53636b;
  --myside-sand: #f1bd58;
  --lf-primary: var(--myside-teal);
  --lf-primary-dark: var(--myside-teal-dark);
  --lf-primary-bright: #22bdb7;
  --lf-navy: var(--myside-navy);
  --lf-deep: var(--myside-deep);
  --lf-ink: var(--lf-navy);
  --lf-muted: var(--myside-slate);
  --lf-border: #cfe2e2;
  --lf-border-soft: #dceceb;
  --lf-surface: #ffffff;
  --lf-surface-soft: #f7fbfa;
  --lf-page: #f5f9f8;
  --lf-teal-soft: var(--myside-mint);
  --lf-blue-soft: #eaf3ff;
  --lf-cream: #fbf7ef;
  --lf-sand: var(--myside-sand);
  --lf-warning: #fff7df;
  --lf-warning-border: #f1bd58;
  --lf-danger: #b42318;
  --lf-shadow: 0 8px 24px rgba(18, 52, 59, 0.08);
  --lf-radius: 8px;
  --lf-font: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Redesign semantic colours (from the approved Claude Design tokens). */
  --lf-brick: #b4453a;
  --lf-neutral-bg: #f1f4f4;
  --lf-neutral-border: #e1e8e8;
  --lf-neutral-ink: #53636b;
  --lf-check-bg: #fdf3da;
  --lf-check-border: #eccf86;
  --lf-check-mark: #c2932e;
  --lf-check-ink: #8a6516;
  --lf-strong-bg: #ecf6f4;
  --lf-strong-border: #bde2dd;
  --lf-miss-bg: #fbedeb;
  --lf-miss-border: #ebc3bd;
  --lf-miss-ink: #9a3a30;
  --lf-inferred-edge: #b9a06a;
  --lf-inferred-ink: #9a7b33;
  --lf-stated-edge: var(--lf-primary-dark);
  --lf-limit-bg: #eaf8f6;
  --lf-limit-border: #c9e7e3;
  --lf-system-bg: #fbedeb;
  --lf-system-border: #e6bdb6;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
}

body {
  margin: 0;
  background:
    linear-gradient(180deg, rgba(221, 247, 242, 0.42), rgba(246, 248, 251, 0) 280px),
    var(--lf-page);
  color: var(--lf-ink);
  font-family: var(--lf-font);
  font-size: 16px;
  line-height: 1.5;
}

a {
  color: var(--lf-primary-dark);
  font-weight: 700;
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--lf-deep);
  text-decoration: underline;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  font-size: clamp(1.7rem, 2vw, 2.2rem);
  line-height: 1.12;
  margin-bottom: 0.5rem;
  overflow-wrap: anywhere;
}

h2 {
  font-size: 1.1rem;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

h3 {
  font-size: 1rem;
  line-height: 1.3;
  margin-bottom: 0.35rem;
}

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

.app-header {
  background: var(--lf-surface);
  border-bottom: 1px solid var(--lf-border-soft);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

.app-header__inner {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1280px;
  padding: 0.9rem 1.25rem;
}

.brand {
  align-items: center;
  color: var(--lf-ink);
  display: inline-flex;
  gap: 0.75rem;
  min-width: 0;
}

.brand:hover,
.brand:focus {
  color: var(--lf-ink);
  text-decoration: none;
}

.brand__logo {
  display: block;
  height: 42px;
  max-width: min(220px, 52vw);
  object-fit: contain;
  width: auto;
}

.brand__mark {
  align-items: center;
  background: var(--lf-primary);
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 900;
  height: 2.45rem;
  justify-content: center;
  letter-spacing: 0;
  width: 2.45rem;
}

.brand__text {
  display: grid;
  line-height: 1.1;
  min-width: 0;
}

.brand__name {
  font-size: 1rem;
  font-weight: 800;
}

.brand__strap {
  color: var(--lf-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.app-nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.nav-link {
  border-radius: 6px;
  color: var(--lf-primary-dark);
  display: inline-flex;
  font-size: 0.92rem;
  font-weight: 800;
  padding: 0.45rem 0.7rem;
}

.nav-link:hover,
.nav-link:focus {
  background: rgba(22, 166, 160, 0.1);
  text-decoration: none;
}

.page-content {
  margin: 1.5rem auto 3rem;
  max-width: 1280px;
  padding: 0 1.25rem;
  width: 100%;
}

.page-content--narrow {
  max-width: 980px;
}

.page-head {
  align-items: flex-start;
  background: var(--lf-surface);
  border: 1px solid var(--lf-border-soft);
  border-radius: var(--lf-radius);
  box-shadow: var(--lf-shadow);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.4rem;
}

.page-head__copy {
  min-width: 0;
}

.page-head__actions,
.button-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.logout-form {
  display: inline-flex;
  margin: 0;
}

.inline-form {
  display: inline-flex;
  margin: 0;
}

.inline-edit-form {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  min-width: 12rem;
}

.inline-edit-form input,
.inline-edit-form textarea {
  width: 100%;
}

.checkbox-line {
  align-items: center;
  color: var(--lf-muted);
  display: inline-flex;
  font-size: 0.86rem;
  font-weight: 700;
  gap: 0.4rem;
}

.checkbox-line input {
  width: auto;
}

.account-pill {
  color: var(--lf-muted);
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
}

.account-pill:hover,
.account-pill:focus {
  color: var(--lf-primary-dark);
}

.button-row--spaced,
.panel--spaced {
  margin-top: 1rem;
}

.eyebrow {
  color: var(--lf-primary-dark);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 0.45rem;
  text-transform: uppercase;
}

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

.small {
  font-size: 0.86rem;
}

.button,
button.button,
.button-like {
  align-items: center;
  background: linear-gradient(135deg, var(--lf-primary), var(--lf-primary-bright));
  border: 1px solid var(--lf-primary);
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-weight: 850;
  gap: 0.45rem;
  justify-content: center;
  line-height: 1.2;
  min-height: 2.35rem;
  padding: 0.62rem 0.9rem;
  text-decoration: none;
}

.button:hover,
.button:focus,
button.button:hover,
button.button:focus {
  background: linear-gradient(135deg, var(--lf-primary-dark), var(--lf-primary));
  border-color: var(--lf-primary-dark);
  color: #ffffff;
  text-decoration: none;
}

.button--secondary {
  background: var(--lf-surface);
  border-color: var(--lf-border);
  color: var(--lf-ink);
}

.button--secondary:hover,
.button--secondary:focus {
  background: var(--lf-surface-soft);
  border-color: var(--lf-primary);
  color: var(--lf-ink);
}

.button--danger {
  background: #ffffff;
  border-color: rgba(180, 35, 24, 0.45);
  color: var(--lf-danger);
}

.button--danger:hover,
.button--danger:focus {
  background: var(--lf-danger);
  border-color: var(--lf-danger);
  color: #ffffff;
}

.button--small {
  font-size: 0.86rem;
  min-height: 2rem;
  padding: 0.42rem 0.65rem;
}

.button__icon {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1rem;
  font-weight: 900;
  height: 1rem;
  justify-content: center;
  line-height: 1;
  width: 1rem;
}

.notice {
  background: #ecfdf9;
  border: 1px solid rgba(22, 166, 160, 0.28);
  border-radius: var(--lf-radius);
  color: #115e59;
  margin: 1rem 0;
  padding: 0.85rem 1rem;
}

.notice--warning {
  background: var(--lf-warning);
  border-color: var(--lf-warning-border);
  color: #6d4d00;
}

.notice--error {
  background: #fdecec;
  border-color: rgba(190, 18, 60, 0.35);
  color: #9f1239;
}

.intake-length-warning {
  margin: 0.65rem 0 0;
}

.stat-grid,
.case-grid,
.content-grid,
.meta-grid {
  display: grid;
  gap: 1rem;
}

.stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1rem;
}

.case-view-tabs {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.case-view-tabs__link {
  background: var(--lf-surface);
  border: 1px solid var(--lf-border-soft);
  border-radius: 999px;
  color: var(--lf-muted);
  display: inline-flex;
  font-size: 0.88rem;
  font-weight: 850;
  padding: 0.45rem 0.75rem;
}

.case-view-tabs__link:hover,
.case-view-tabs__link:focus,
.case-view-tabs__link--active {
  background: var(--lf-teal-soft);
  border-color: rgba(22, 166, 160, 0.35);
  color: var(--lf-primary-dark);
  text-decoration: none;
}

.stat-card,
.panel,
.case-card,
.form-panel,
.data-panel {
  background: var(--lf-surface);
  border: 1px solid var(--lf-border-soft);
  border-radius: var(--lf-radius);
  box-shadow: var(--lf-shadow);
  max-width: 100%;
  min-width: 0;
}

.stat-card {
  padding: 1rem;
}

.stat-card__label {
  color: var(--lf-muted);
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.stat-card__value {
  color: var(--lf-ink);
  font-size: 1.45rem;
  font-weight: 850;
  line-height: 1;
  overflow-wrap: anywhere;
}

.case-grid {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  margin-top: 1rem;
}

.case-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
  padding: 1rem;
}

.case-card__top {
  align-items: flex-start;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.case-card h2 {
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.badge {
  align-items: center;
  background: #eef3ff;
  border: 1px solid #dce6ff;
  border-radius: 999px;
  color: #294877;
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1;
  max-width: 100%;
  min-height: 1.55rem;
  overflow-wrap: anywhere;
  padding: 0.28rem 0.55rem;
  white-space: normal;
}

.badge--ok {
  background: #ecfdf3;
  border-color: #c6f1d6;
  color: #18613a;
}

.badge--warn {
  background: #fff8e6;
  border-color: #f3d184;
  color: #805700;
}

.badge--neutral {
  background: #f2f4f7;
  border-color: #e1e6ee;
  color: #475467;
}

.meta-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.meta-item {
  min-width: 0;
}

.meta-label {
  color: var(--lf-muted);
  display: block;
  font-size: 0.76rem;
  font-weight: 750;
  margin-bottom: 0.1rem;
}

.meta-value {
  color: var(--lf-ink);
  display: block;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.next-action {
  background: var(--lf-surface-soft);
  border: 1px solid var(--lf-border-soft);
  border-radius: 6px;
  color: #344054;
  font-size: 0.92rem;
  margin: 0;
  padding: 0.75rem;
}

.empty-state {
  align-items: center;
  background: var(--lf-surface);
  border: 1px dashed var(--lf-border);
  border-radius: var(--lf-radius);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 1rem;
  padding: 1rem;
}

.content-grid {
  align-items: start;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
  margin-top: 1rem;
  min-width: 0;
}

.content-grid.case-record-grid {
  grid-template-columns: minmax(0, 1fr);
}

.case-record-grid > .stack,
.case-record-grid > aside.stack {
  min-width: 0;
}

.stack {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.panel,
.form-panel {
  padding: 1rem;
}

.panel__header {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.panel__header h2 {
  margin-bottom: 0.15rem;
}

.task-list {
  border-top: 1px solid var(--lf-border-soft);
}

.task-row {
  align-items: center;
  border-bottom: 1px solid var(--lf-border-soft);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.85rem 0;
}

.task-row:last-child {
  border-bottom: 0;
}

.task-row form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-end;
}

.assistant-actions {
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  border-color: rgba(22, 166, 160, 0.24);
}

.assistant-action-list {
  display: grid;
  gap: 0.75rem;
}

.assistant-action {
  align-items: center;
  background: var(--lf-surface);
  border: 1px solid var(--lf-border-soft);
  border-radius: var(--lf-radius);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.85rem;
}

.assistant-action__main {
  min-width: 0;
}

.assistant-action__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.assistant-action h3 {
  margin-bottom: 0.2rem;
}

.checkbox-row {
  align-items: center;
  color: var(--lf-muted);
  display: inline-flex;
  font-size: 0.86rem;
  font-weight: 650;
  gap: 0.4rem;
  margin: 0;
}

.checkbox-row input {
  margin: 0;
  width: auto;
}

.draft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.draft-actions form {
  margin: 0;
}

.draft-option {
  background: var(--lf-surface-soft);
  border: 1px solid var(--lf-border-soft);
  border-radius: var(--lf-radius);
  display: grid;
  gap: 0.45rem;
  max-width: 19rem;
  padding: 0.7rem;
}

.draft-option .button {
  width: fit-content;
}

.draft-option p {
  margin: 0;
}

.route-guidance {
  margin-top: 1rem;
}

.route-guidance__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.prompt-list {
  display: grid;
  gap: 0.65rem;
}

.prompt-item {
  background: var(--lf-surface-soft);
  border: 1px solid var(--lf-border-soft);
  border-radius: var(--lf-radius);
  padding: 0.75rem;
}

.prompt-item h4 {
  color: var(--lf-ink);
  font-size: 0.92rem;
  margin: 0 0 0.25rem;
}

.prompt-item p {
  color: var(--lf-muted);
  font-size: 0.88rem;
  margin: 0;
}

.source-list {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
}

.source-list li {
  color: var(--lf-muted);
  font-size: 0.88rem;
  margin-bottom: 0.25rem;
  overflow-wrap: anywhere;
}

.draft-spotlight {
  background: linear-gradient(180deg, #ffffff, var(--lf-teal-soft));
  border-color: rgba(22, 166, 160, 0.28);
  margin-top: 1rem;
}

.draft-spotlight__list {
  display: grid;
  gap: 1rem;
}

.draft-card {
  border-top: 1px solid rgba(22, 166, 160, 0.26);
  display: grid;
  gap: 0.85rem;
  padding-top: 1rem;
}

.draft-card:first-child {
  border-top: 0;
  padding-top: 0;
}

.draft-card__header {
  align-items: flex-start;
  display: flex;
  gap: 0.8rem;
  justify-content: space-between;
}

.draft-edit-form {
  display: grid;
  gap: 0.75rem;
}

.draft-card__body {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  line-height: 1.5;
  min-height: 18rem;
  white-space: pre-wrap;
}

.draft-card__handoff {
  margin-bottom: 0;
}

.evidence-attention {
  background: linear-gradient(180deg, #ffffff, #fffdf7);
  border-color: rgba(241, 189, 88, 0.44);
  margin-top: 1rem;
}

.evidence-attention__grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.evidence-attention__group {
  background: var(--lf-surface);
  border: 1px solid var(--lf-border-soft);
  border-radius: var(--lf-radius);
  padding: 0.85rem;
}

.action-list {
  margin: 0;
  padding-left: 1.15rem;
}

.action-list li + li {
  margin-top: 0.65rem;
}

.action-list__title {
  color: var(--lf-ink);
  display: block;
  font-weight: 850;
}

label {
  color: #344054;
  display: block;
  font-size: 0.9rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
}

.form-stack {
  display: grid;
  gap: 0.85rem;
}

.auth-card {
  background: var(--lf-surface);
  border: 1px solid var(--lf-border-soft);
  border-radius: var(--lf-radius);
  box-shadow: var(--lf-shadow);
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
}

.auth-card h1 {
  margin-bottom: 0;
}

.auth-switch {
  color: var(--lf-muted);
  margin: 0;
}

.auth-switch a {
  color: var(--lf-primary-dark);
  font-weight: 900;
}

.hp-field {
  height: 1px;
  left: -10000px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

input,
select,
textarea {
  background: #ffffff;
  border: 1px solid var(--lf-border);
  border-radius: 6px;
  color: var(--lf-ink);
  display: block;
  min-height: 2.55rem;
  padding: 0.62rem 0.7rem;
  width: 100%;
}

textarea {
  min-height: 7rem;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--lf-primary);
  box-shadow: 0 0 0 3px rgba(22, 166, 160, 0.16);
  outline: none;
}

.form-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid--compact {
  gap: 0.75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.form-field--full {
  grid-column: 1 / -1;
}

.evidence-upload-form {
  background: var(--lf-surface-soft);
  border: 1px solid var(--lf-border-soft);
  border-radius: var(--lf-radius);
  display: grid;
  gap: 0.8rem;
  margin: 1rem 0;
  padding: 0.9rem;
}

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

.actions-cell {
  width: 1%;
}

.row-actions {
  align-items: center;
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
}

.row-action-form {
  display: none;
}

.icon-button {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--lf-border);
  border-radius: 6px;
  color: var(--lf-ink);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1rem;
  font-weight: 900;
  height: 2rem;
  justify-content: center;
  line-height: 1;
  min-height: 2rem;
  padding: 0;
  text-decoration: none;
  width: 2rem;
}

.icon-button:hover,
.icon-button:focus {
  background: var(--lf-surface-soft);
  border-color: var(--lf-primary);
  color: var(--lf-ink);
  text-decoration: none;
}

.icon-button--primary {
  background: var(--lf-teal-soft);
  border-color: rgba(22, 166, 160, 0.4);
  color: var(--lf-primary-dark);
}

.icon-button--complete {
  background: #ecfdf3;
  border-color: #abefc6;
  color: #067647;
}

.icon-button--complete:hover,
.icon-button--complete:focus {
  background: #dcfae6;
  border-color: #75e0a7;
  color: #05603a;
}

.icon-button--danger {
  border-color: rgba(180, 35, 24, 0.35);
  color: var(--lf-danger);
}

.icon-button--danger:hover,
.icon-button--danger:focus {
  background: var(--lf-danger);
  border-color: var(--lf-danger);
  color: #ffffff;
}

.row-editor-row > td {
  background: var(--lf-surface-soft);
  padding: 0;
}

.row-editor {
  border-top: 1px solid var(--lf-border-soft);
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
}

.row-editor__header {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.row-editor__header h3 {
  margin: 0;
}

.secondary-disclosure {
  margin-top: 1rem;
}

.secondary-disclosure > summary {
  list-style: none;
  width: fit-content;
}

.secondary-disclosure > summary::-webkit-details-marker {
  display: none;
}

.draft-sent-form {
  background: var(--lf-surface-soft);
  border: 1px solid var(--lf-border-soft);
  border-radius: var(--lf-radius);
  padding: 0.85rem;
}

.admin-user-detail {
  display: block;
}

.admin-user-form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  min-width: 18rem;
}

.admin-filter-form {
  align-items: end;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.admin-setting-form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
}

.admin-setting-form p {
  margin: 0;
}

.admin-detail-grid {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-stat-small {
  font-size: 1rem;
  line-height: 1.2;
}

.review-section {
  border-top: 1px solid var(--lf-border-soft);
  margin-top: 1.2rem;
  padding-top: 1.2rem;
}

.review-list,
.review-note-list {
  display: grid;
  gap: 0.85rem;
}

.review-note-list {
  margin: 0;
  padding-left: 1.2rem;
}

.review-row {
  background: var(--lf-surface-soft);
  border: 1px solid var(--lf-border-soft);
  border-radius: var(--lf-radius);
  display: grid;
  gap: 0.85rem;
  grid-template-columns: minmax(0, 1fr);
  padding: 0.9rem;
}

.review-row__include {
  align-self: start;
  margin-top: 0.25rem;
  width: fit-content;
}

.review-row__fields textarea {
  min-height: 5rem;
}

.timeline-date-fields {
  align-items: start;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: minmax(0, 1fr) 2.5rem;
}

.date-prompt-picker {
  color: transparent;
  cursor: pointer;
  min-width: 0;
  padding: 0;
  text-indent: -999px;
  width: 2.5rem;
}

.date-prompt-picker::-webkit-datetime-edit {
  display: none;
}

.date-prompt-picker::-webkit-calendar-picker-indicator {
  cursor: pointer;
  margin: auto;
  opacity: 1;
}

.error {
  color: var(--lf-danger);
  font-size: 0.86rem;
  font-weight: 700;
  margin: 0.35rem 0 0;
}

.table-wrap {
  overflow-x: auto;
  width: 100%;
}

table {
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 100%;
  width: 100%;
}

.record-table {
  table-layout: fixed;
}

.record-table--timeline,
.record-table--issues,
.record-table--disputes {
  min-width: 56rem;
}

.record-table--deadlines {
  min-width: 60rem;
}

.record-table--correspondence,
.record-table--evidence {
  min-width: 70rem;
}

.record-table--participants {
  min-width: 46rem;
}

.record-table--outcomes {
  min-width: 46rem;
}

.record-table .col-actions {
  width: 4.75rem;
}

.record-table .col-actions-wide {
  width: 9.5rem;
}

.record-table .col-amount {
  width: 7.25rem;
}

.record-table .col-date {
  width: 9.5rem;
}

.record-table .col-date-edit {
  width: 13.25rem;
}

.record-table .col-detail,
.record-table .col-main,
.record-table .col-notes {
  width: auto;
}

.record-table .col-email,
.record-table .col-file {
  width: 13rem;
}

.record-table .col-party,
.record-table .col-source,
.record-table .col-supports {
  width: 11rem;
}

.record-table .col-status,
.record-table .col-type {
  width: 8rem;
}

.record-table .col-role {
  width: 12rem;
}

.record-table .col-status-wide {
  width: 10.5rem;
}

th,
td {
  border-top: 1px solid var(--lf-border-soft);
  padding: 0.65rem;
  text-align: left;
  vertical-align: top;
}

th {
  color: #344054;
  font-size: 0.78rem;
  font-weight: 850;
}

td {
  color: #344054;
}

.record-table th,
.record-table td {
  overflow-wrap: anywhere;
}

.record-table .actions-cell {
  white-space: nowrap;
  width: auto;
}

.record-table .badge,
.record-table .cert-chip {
  max-width: 100%;
  white-space: normal;
}

.record-table .cert-chip {
  line-height: 1.2;
}

.data-panel {
  overflow: hidden;
}

.data-panel + .data-panel {
  margin-top: 1rem;
}

.data-panel summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  list-style: none;
  padding: 1rem;
}

.data-panel summary::-webkit-details-marker {
  display: none;
}

.data-panel__title {
  align-items: center;
  display: inline-flex;
  gap: 0.55rem;
  min-width: 0;
}

.data-panel__body {
  border-top: 1px solid var(--lf-border-soft);
  padding: 0 1rem 1rem;
}

.disclosure-icon {
  color: var(--lf-primary-dark);
  font-weight: 900;
}

.data-panel[open] .disclosure-icon {
  transform: rotate(90deg);
}

.data-panel,
tr[id],
.row-editor {
  scroll-margin-top: 1rem;
}

.data-panel.is-targeted,
.data-panel:target {
  border-color: var(--lf-check-border);
  box-shadow: 0 0 0 3px rgba(241, 189, 88, 0.28), var(--lf-shadow);
}

tr.is-targeted > td,
tr:target > td {
  background: #fff9e8;
  box-shadow: inset 4px 0 0 var(--lf-check-mark);
}

.row-editor.is-targeted {
  box-shadow: inset 4px 0 0 var(--lf-check-mark);
}

.evidence-manager__header {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin: 1rem 0 0.75rem;
}

.evidence-manager__header h3 {
  margin-bottom: 0.2rem;
}

.evidence-table-wrap {
  margin-top: 0.75rem;
}

.evidence-table td:first-child p {
  margin: 0.2rem 0 0;
}

.evidence-row--attention > td {
  background: #fffdf6;
}

.file-missing {
  color: var(--lf-check-ink);
  display: block;
  font-weight: 800;
}

pre {
  background: #0f172a;
  border-radius: 6px;
  color: #f8fafc;
  font-size: 0.86rem;
  line-height: 1.55;
  overflow-x: auto;
  padding: 0.9rem;
  white-space: pre-wrap;
}

.note-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.note-item {
  border-top: 1px solid var(--lf-border-soft);
  padding-top: 0.9rem;
}

.screen-only {
  display: initial;
}

.print-report {
  background: #ffffff;
}

.print-report .page-content {
  max-width: 980px;
}

.print-section {
  background: #ffffff;
  border-top: 1px solid var(--lf-border);
  margin-top: 1.4rem;
  padding-top: 1rem;
}

.marketing-hero {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(251, 247, 239, 0.95), rgba(234, 243, 255, 0.86) 48%, rgba(221, 247, 242, 0.9)),
    var(--lf-cream);
  color: var(--lf-ink);
  display: grid;
  gap: 3rem;
  /* Give the visual column a larger share so the hero image renders about 12-13% bigger on
     desktop. The <= 980px media query collapses this to a single column, so tablet and mobile
     layouts are unaffected. */
  grid-template-columns: minmax(0, 0.95fr) minmax(300px, 1.1fr);
  min-height: 580px;
  padding: 4rem max(1.25rem, calc((100vw - 1180px) / 2));
}

.marketing-hero h1 {
  font-size: clamp(2.1rem, 3.2vw, 3.6rem);
  letter-spacing: 0;
  line-height: 1.06;
  max-width: 850px;
}

.marketing-hero .eyebrow {
  color: var(--lf-primary-dark);
}

.marketing-hero .button--secondary {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(11, 122, 117, 0.28);
  color: var(--lf-ink);
}

.marketing-hero .button--secondary:hover,
.marketing-hero .button--secondary:focus {
  background: #ffffff;
  color: var(--lf-ink);
}

.marketing-hero__content {
  max-width: 760px;
  min-width: 0;
}

.lede {
  color: var(--lf-muted);
  font-size: 1.16rem;
  max-width: 700px;
}

.hero-support {
  color: var(--lf-muted);
  font-size: 1rem;
  max-width: 700px;
}

.trust-copy {
  color: var(--lf-muted);
  font-size: 0.92rem;
  margin-top: 1.2rem;
  max-width: 680px;
}

.hero-visual {
  min-width: 0;
}

.hero-visual::before {
  content: none;
}

.hero-visual img {
  display: block;
  filter: drop-shadow(0 28px 54px rgba(18, 52, 59, 0.16));
  height: auto;
  margin-left: auto;
  max-width: 820px;
  width: 100%;
}

.marketing-section,
.marketing-band {
  margin: 0 auto;
  max-width: 1180px;
  padding: 3.4rem 1.25rem;
}

.marketing-band {
  align-items: center;
  background: var(--lf-surface);
  border: 1px solid var(--lf-border-soft);
  border-radius: var(--lf-radius);
  box-shadow: var(--lf-shadow);
  display: grid;
  gap: 1.4rem;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  margin-top: 1rem;
  padding: 2rem;
}

.section-heading {
  max-width: 780px;
}

.section-actions {
  margin-top: 1.4rem;
}

.feature-grid,
.tier-grid,
.timeline-steps,
.comparison-grid,
.support-grid,
.help-topic-grid {
  display: grid;
  gap: 1rem;
}

.feature-grid {
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  margin-top: 1.5rem;
}

.feature-card,
.tier-card,
.timeline-steps article {
  background: var(--lf-surface);
  border: 1px solid var(--lf-border-soft);
  border-radius: var(--lf-radius);
  box-shadow: var(--lf-shadow);
  min-width: 0;
  padding: 1.25rem;
}

.feature-card__icon,
.tier-card__icon {
  display: block;
  height: 52px;
  margin-bottom: 1rem;
  width: 52px;
}

.feature-card p:last-child,
.tier-card p:last-child,
.timeline-steps p:last-child {
  margin-bottom: 0;
}

.route-list {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.route-list span {
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(11, 122, 117, 0.18);
  border-radius: var(--lf-radius);
  box-shadow: var(--lf-shadow);
  color: var(--lf-ink);
  display: flex;
  font-size: 0.9rem;
  font-weight: 800;
  gap: 0.65rem;
  padding: 0.7rem 0.8rem;
}

.route-card__icon {
  flex: 0 0 auto;
  height: 34px;
  width: 34px;
}

.tier-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.5rem;
}

.tier-grid--wide {
  margin-top: 1rem;
}

.tier-card {
  display: flex;
  flex-direction: column;
}

.tier-card--featured {
  border-color: rgba(22, 166, 160, 0.5);
  box-shadow: 0 12px 34px rgba(22, 166, 160, 0.14);
}

.tier-card__label {
  color: var(--lf-primary-dark);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tier-card__price {
  color: var(--lf-ink);
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1.1;
}

.timeline-steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1rem;
}

.step-number {
  align-items: center;
  background: var(--lf-primary);
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  font-weight: 900;
  height: 2rem;
  justify-content: center;
  margin-bottom: 0.8rem;
  width: 2rem;
}

.stat-card__icon,
.panel-title__icon,
.data-panel__icon {
  display: inline-block;
  flex: 0 0 auto;
}

.stat-card__icon {
  height: 30px;
  margin-bottom: 0.7rem;
  width: 30px;
}

.panel-title {
  align-items: center;
  display: inline-flex;
  gap: 0.55rem;
}

.panel-title__icon,
.data-panel__icon {
  height: 28px;
  width: 28px;
}

.comparison-grid,
.support-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.check-list,
.legal-copy ul,
.tier-card ul,
.feature-card ul {
  padding-left: 1.2rem;
}

.check-list li,
.tier-card li,
.feature-card li {
  margin-bottom: 0.45rem;
}

.check-list--muted {
  color: var(--lf-muted);
}

.faq-list,
.legal-copy {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.faq-list article,
.legal-copy {
  background: var(--lf-surface);
  border: 1px solid var(--lf-border-soft);
  border-radius: var(--lf-radius);
  box-shadow: var(--lf-shadow);
  padding: 1.25rem;
}

.trust-hero {
  align-items: stretch;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(234, 243, 255, 0.78) 54%, rgba(221, 247, 242, 0.82)),
    var(--lf-surface);
  border: 1px solid var(--lf-border-soft);
  border-radius: var(--lf-radius);
  box-shadow: var(--lf-shadow);
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.36fr);
  padding: 2rem;
}

.trust-hero h1 {
  max-width: 850px;
}

.support-contact-card,
.policy-toc,
.policy-section,
.trust-promise-grid article,
.trust-ledger,
.operator-band {
  background: var(--lf-surface);
  border: 1px solid var(--lf-border-soft);
  border-radius: var(--lf-radius);
  box-shadow: var(--lf-shadow);
}

.support-contact-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: center;
  padding: 1.25rem;
}

.support-contact-card h2,
.support-contact-card p {
  margin: 0;
}

.trust-nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1rem 0;
}

.trust-nav a {
  background: var(--lf-surface);
  border: 1px solid var(--lf-border-soft);
  border-radius: 999px;
  color: var(--lf-muted);
  font-size: 0.84rem;
  font-weight: 850;
  padding: 0.45rem 0.75rem;
}

.trust-nav a:hover,
.trust-nav a:focus {
  background: var(--lf-teal-soft);
  border-color: rgba(22, 166, 160, 0.35);
  color: var(--lf-primary-dark);
  text-decoration: none;
}

.trust-promise-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1rem;
}

.trust-promise-grid article {
  padding: 1.15rem;
}

.trust-promise-grid h2 {
  font-size: 1.05rem;
}

.trust-ledger {
  display: grid;
  margin-top: 1rem;
}

.trust-ledger__row {
  align-items: center;
  border-bottom: 1px solid var(--lf-border-soft);
  display: grid;
  gap: 1rem;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  padding: 1rem 1.25rem;
}

.trust-ledger__row:last-child {
  border-bottom: 0;
}

.trust-ledger__row span {
  color: var(--lf-primary-dark);
  font-weight: 900;
}

.trust-ledger__row p {
  margin: 0;
}

.policy-page .page-head {
  margin-bottom: 0;
}

.policy-layout {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
}

.policy-toc {
  padding: 1.1rem;
}

.policy-copy {
  display: grid;
  gap: 1rem;
}

.policy-section {
  padding: 1.25rem;
}

.policy-section ul {
  padding-left: 1.2rem;
}

.policy-section li {
  margin-bottom: 0.45rem;
}

.operator-band {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 1rem;
  padding: 1.25rem;
}

.operator-band h2,
.operator-band p {
  margin-bottom: 0.25rem;
}

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

.help-topic-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1rem;
}

.page-head--marketing {
  align-items: center;
}

@media (max-width: 980px) {
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-grid {
    grid-template-columns: 1fr;
  }

  .marketing-hero,
  .marketing-band,
  .trust-hero,
  .feature-grid,
  .tier-grid,
  .timeline-steps,
  .comparison-grid,
  .support-grid,
  .help-topic-grid,
  .trust-promise-grid,
  .security-grid,
  .policy-layout {
    grid-template-columns: 1fr;
  }

  .trust-ledger__row,
  .operator-band {
    align-items: flex-start;
    display: grid;
    grid-template-columns: 1fr;
  }

  .marketing-hero {
    min-height: 0;
    padding-top: 3rem;
  }

  .hero-visual {
    max-width: 680px;
  }
}

@media (max-width: 700px) {
  .app-header__inner,
  .page-head,
  .empty-state,
  .draft-card__header,
  .task-row {
    align-items: stretch;
    flex-direction: column;
  }

  .app-header__inner {
    display: grid;
  }

  .brand__logo {
    height: 34px;
  }

  .app-nav,
  .page-head__actions,
  .task-row form {
    justify-content: flex-start;
  }

  .page-content {
    margin-top: 1rem;
    padding: 0 0.75rem;
  }

  .page-head,
  .panel,
  .form-panel,
  .case-card,
  .stat-card {
    padding: 0.85rem;
  }

  .stat-grid,
  .form-grid,
  .route-guidance__grid,
  .admin-detail-grid,
  .admin-filter-form {
    grid-template-columns: 1fr;
  }

  .review-row {
    grid-template-columns: 1fr;
  }

  .timeline-date-fields {
    grid-template-columns: minmax(0, 1fr) 2.5rem;
  }

  .badge {
    border-radius: 6px;
  }

  .task-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .assistant-action {
    grid-template-columns: 1fr;
  }

  /* Momentum scrolling and denser cells so wide record tables stay usable on touch. */
  .table-wrap {
    -webkit-overflow-scrolling: touch;
  }

  .record-table th,
  .record-table td {
    padding: 0.5rem 0.6rem;
  }

  /* Keep the recoverable panel and inline provenance flags compact on small screens. */
  .recoverable {
    padding: 13px 14px;
    gap: 11px;
  }

  .prov-flag {
    margin-left: 5px;
  }
}

/* Very small screens: let primary card and form actions fill the width rather than crowd. */
@media (max-width: 480px) {
  .case-card .button-row .button,
  .case-card .button-row .inline-form,
  .case-card .button-row .inline-form .button {
    flex: 1 1 100%;
  }

  .page-head__actions .button {
    width: 100%;
    justify-content: center;
  }
}

@media print {
  body {
    background: #ffffff;
  }

  .app-header,
  .screen-only,
  .page-head__actions,
  .button,
  button {
    display: none !important;
  }

  .page-content {
    margin: 0;
    max-width: none;
    padding: 0;
  }

  .page-head,
  .panel,
  .case-card,
  .data-panel,
  .stat-card {
    border-radius: 0;
    box-shadow: none;
  }

  .print-section,
  .data-panel,
  .panel {
    break-inside: avoid;
  }
}

/* ============================================================
   Redesign component layer (Slice 0 foundation)
   Certainty chips · uncertainty markers · recoverable states · keyboard focus.
   Additive: existing pages are unaffected until they adopt these classes.
   ============================================================ */

/* Keyboard focus — visible 2px ring at >=3:1, not a soft glow. */
:focus-visible { outline: 2px solid var(--lf-primary-dark); outline-offset: 2px; border-radius: 2px; }
.button:focus-visible,
button.button:focus-visible,
.icon-button:focus-visible { outline: 2px solid var(--lf-primary-dark); outline-offset: 3px; }
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 2px solid var(--lf-primary-dark); outline-offset: 2px; }

/* Evidence & certainty status ladder — marker shape rises with strength; colour is never the only signal. */
.cert-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 999px; border: 1px solid transparent; font: 600 13px/1 var(--lf-font); white-space: nowrap; }
.cert-chip__marker { flex-shrink: 0; display: inline-block; }
.cert-chip--mentioned { background: var(--lf-neutral-bg); border-color: var(--lf-neutral-border); color: var(--lf-neutral-ink); }
.cert-chip--mentioned .cert-chip__marker { width: 12px; height: 12px; border-radius: 50%; border: 2px dashed #9aa7ab; }
.cert-chip--needs-upload { background: var(--lf-check-bg); border-color: var(--lf-check-border); color: var(--lf-check-ink); }
.cert-chip--needs-upload .cert-chip__marker { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid var(--lf-check-mark); }
.cert-chip--needs-review { background: var(--lf-check-bg); border-color: var(--lf-check-border); color: var(--lf-check-ink); }
.cert-chip--needs-review .cert-chip__marker { width: 9px; height: 9px; background: var(--lf-check-mark); transform: rotate(45deg); }
.cert-chip--uploaded { background: var(--lf-strong-bg); border-color: var(--lf-strong-border); color: var(--lf-navy); }
.cert-chip--uploaded .cert-chip__marker { width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--lf-primary-dark); }
.cert-chip--verified { background: var(--lf-primary-dark); border-color: var(--lf-primary-dark); color: #fff; font-weight: 700; }
.cert-chip--verified .cert-chip__marker { width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.cert-chip--missing { background: var(--lf-miss-bg); border-color: var(--lf-miss-border); color: var(--lf-miss-ink); }
.cert-chip--missing .cert-chip__marker { width: 9px; height: 9px; background: var(--lf-brick); transform: rotate(45deg); }
.cert-chip--na { background: var(--lf-neutral-bg); border-color: var(--lf-neutral-border); color: #7c8a8e; }
.cert-chip--na .cert-chip__marker { width: 12px; height: 2.5px; border-radius: 2px; background: #9aa7ab; }

/* Uncertainty markers — a quiet left edge separates what you said from what MySide deduced. */
.fact--stated { border-left: 3px solid var(--lf-stated-edge); padding: 6px 0 6px 13px; }
.fact--inferred { border-left: 3px dashed var(--lf-inferred-edge); padding: 6px 0 6px 13px; }
.fact__label { display: block; font: 600 11px/1.3 var(--lf-font); letter-spacing: .06em; text-transform: uppercase; color: var(--lf-primary-dark); margin: 0 0 3px; }
.fact--inferred .fact__label { font-weight: 500; font-style: italic; text-transform: none; letter-spacing: .04em; color: var(--lf-inferred-ink); }

/* Inline provenance markers on the saved case record — same vocabulary as the intake-review inferred edge. */
.prov-flag { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px; font: 500 10.5px/1.5 var(--lf-font); letter-spacing: .02em; white-space: nowrap; vertical-align: middle; cursor: help; }
.prov-flag--inferred { font-style: italic; color: var(--lf-inferred-ink); border: 1px dashed var(--lf-inferred-edge); background: #fbf7ee; }
.prov-flag--low { color: var(--lf-check-ink); border: 1px solid var(--lf-check-mark); background: #fdf8ec; }

/* Review page: inline "Include" toggle in the row Actions cell, and de-emphasis for excluded rows. */
.review-include { display: inline-flex; align-items: center; gap: 5px; margin: 0; font: 500 11px/1.3 var(--lf-font); color: var(--lf-muted); white-space: nowrap; cursor: pointer; }
.review-include input { margin: 0; }
.review-row--excluded > td:not(.actions-cell) { opacity: 0.45; }

/* Route source-governance block: official sources plus how fresh MySide's check is. */
.route-sources__status { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 6px 0 8px; }

/* Case updates (in-app notifications) and the cases-list unread badge. */
.case-card__flags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.badge--update { background: var(--lf-primary); color: #fff; border-color: var(--lf-primary); }
.case-updates__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.case-updates__item { border-left: 3px solid var(--lf-border-soft); padding: 7px 0 7px 12px; }
.case-updates__item.is-unread { border-left-color: var(--lf-primary); }
.case-updates__head { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; margin: 0 0 2px; }

.uncertainty-flag { border-left: 3px solid var(--lf-check-mark); background: #fdf8ec; border-radius: 0 8px 8px 0; padding: 11px 14px; }
.uncertainty-flag__head { display: flex; align-items: center; gap: 7px; font: 600 11px/1.3 var(--lf-font); letter-spacing: .05em; text-transform: uppercase; color: var(--lf-check-ink); margin: 0 0 4px; }
.uncertainty-flag__head::before { content: ""; flex-shrink: 0; width: 9px; height: 9px; background: var(--lf-check-mark); transform: rotate(45deg); }

.date-to-confirm { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 8px; background: #fff; border: 1.5px dashed #c3cfcd; font: 600 13px/1 var(--lf-font); color: #7c8a8e; }

/* Recoverable states — limit (mint), validation (sand), system (brick); they must read differently. */
.recoverable { display: flex; gap: 14px; border-radius: 12px; padding: 16px 18px; border: 1px solid transparent; }
.recoverable__icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1.5px solid transparent; display: flex; align-items: center; justify-content: center; }
.recoverable__title { font: 600 15px/1.3 var(--lf-font); margin: 0 0 4px; }
.recoverable__body { font: 400 14px/1.55 var(--lf-font); color: #3a4f56; margin: 0; }
.recoverable--limit { background: var(--lf-limit-bg); border-color: var(--lf-limit-border); }
.recoverable--limit .recoverable__icon { border-color: var(--lf-primary); }
.recoverable--limit .recoverable__title { color: var(--lf-primary-dark); }
.recoverable--validation { background: #fdf8ec; border-color: #e9c97a; }
.recoverable--validation .recoverable__icon { border-color: #e0b454; }
.recoverable--validation .recoverable__title { color: var(--lf-check-ink); }
.recoverable--system { background: var(--lf-system-bg); border-color: var(--lf-system-border); }
.recoverable--system .recoverable__icon { border-color: #d69a91; }
.recoverable--system .recoverable__title { color: var(--lf-miss-ink); }
.recoverable__dot { display: block; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid currentColor; }
.recoverable--limit .recoverable__dot { color: var(--lf-primary); }
.recoverable--validation .recoverable__dot { color: #e0b454; }
.recoverable--system .recoverable__dot { color: #d69a91; }

/* Skip-link — hidden until focused, then lands on the page's #main-content. */
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--lf-primary-dark); color: #fff; font: 700 14px/1 var(--lf-font); padding: 10px 14px; border-radius: 8px; transition: top .15s ease; }
.skip-link:focus { top: 12px; color: #fff; text-decoration: none; }

/* AI review — "what MySide understood" digest + checks. */
.understood__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; margin: 0 0 4px; }
.understood__grid .fact--stated,
.understood__grid .fact--inferred { margin: 0 0 12px; }
.understood__sep { border: 0; border-top: 1px solid var(--lf-border-soft); margin: 10px 0 14px; }
.fact-line { font: 400 14px/1.5 var(--lf-font); color: #243b42; margin: 0 0 2px; }
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--lf-border-soft); }
.check-list li:first-child { border-top: 0; }
.check-list__mark { flex-shrink: 0; width: 9px; height: 9px; background: var(--lf-check-mark); transform: rotate(45deg); margin-top: 6px; }
.check-list__content { display: grid; gap: 0.25rem; min-width: 0; }
.text-link { font-size: 0.86rem; font-weight: 850; width: fit-content; }
@media (max-width: 700px) { .understood__grid { grid-template-columns: 1fr; } }

/* Created-case calm top: named privacy promise + "where your case stands" figures. */
.promise { display: flex; gap: 11px; align-items: flex-start; background: var(--myside-mint); border: 1px solid var(--lf-strong-border); border-radius: 11px; padding: 14px 17px; margin: 1rem 0; }
.promise__dot { flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px; background: #fff; border: 1px solid var(--lf-strong-border); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.promise__dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--lf-primary-dark); }
.promise p { margin: 0; font: 400 13.5px/1.55 var(--lf-font); color: #243b42; }
.promise strong { color: var(--lf-primary-dark); font-weight: 600; }

.case-figures { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.case-figure { flex: 1; min-width: 150px; background: var(--lf-surface-soft); border: 1px solid var(--lf-border-soft); border-radius: 9px; padding: 11px 13px; }
.case-figure--warn { background: #fdf8ec; border-color: #e9c97a; }
.case-figure__label { font: 500 11px/1.3 var(--lf-font); color: var(--lf-muted); margin: 0 0 3px; }
.case-figure--warn .case-figure__label { color: var(--lf-check-ink); }
.case-figure__value { font: 700 15px/1.1 var(--lf-font); color: var(--lf-navy); margin: 0; }
.case-figure--warn .case-figure__value { color: var(--lf-check-ink); }
.case-figure__note { font: 400 11.5px/1.3 var(--lf-font); color: var(--lf-muted); margin: 3px 0 0; }

/* Divider introducing the collapsed detailed record on the case page. */
.record-divider { border-top: 1px solid var(--lf-border-soft); padding-top: 1rem; }
.record-divider .eyebrow { margin-bottom: 0.3rem; }