/* Component styles after the Sarai design (docs/design/state-standards-monitor-2026-09-23.html). */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sarai-color-surface);
  color: var(--sarai-color-text-primary);
  font-family: var(--sarai-font-body);
  font-size: var(--sarai-type-body-size);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--sarai-color-accent); text-underline-offset: 0.2em; }
a:hover { color: var(--sarai-color-accent-hover); }
input, select, textarea, button { font-family: var(--sarai-font-body); }
h1, h2, h3 { margin: 0; color: var(--sarai-color-text-primary); }
h1 { font-family: var(--sarai-font-display); font-size: var(--sarai-type-h1-size); font-weight: 400; line-height: 1.15; letter-spacing: 0.01em; }
h2 { font-family: var(--sarai-font-display); font-size: var(--sarai-type-h2-size); font-weight: 400; line-height: 1.2; letter-spacing: 0.01em; }
h3 { font-size: var(--sarai-type-h4-size); font-weight: 600; line-height: 1.4; }
:focus-visible { outline: 2px solid var(--sarai-color-accent); outline-offset: 2px; }
mark { background: var(--sarai-color-accent-subtle); color: inherit; }

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

/* A card's own h2 reads as the design's uppercase section label. */
.card > h2,
.page .notes > h2,
.detail-section h2,
.summary-post h2 {
  margin: 0 0 var(--sarai-space-12);
  color: var(--sarai-color-text-secondary);
  font-family: var(--sarai-font-body);
  font-size: var(--sarai-type-caption-size);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--sarai-type-eyebrow-letter-spacing);
  text-transform: uppercase;
}

/* Header: logo and the menu toggle on a sticky white bar, at every width. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--sarai-color-surface-elevated);
  border-bottom: 1px solid var(--sarai-color-border);
}
.site-header__inner { display: flex; align-items: center; gap: 20px; padding: 14px 24px; }
.site-brand { display: block; flex: none; line-height: 0; }
.site-brand img { display: block; width: auto; height: 34px; }

.menu { position: relative; }
.menu__toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 44px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--sarai-color-border-strong);
  border-radius: var(--sarai-radius-md);
  color: var(--sarai-color-text-primary);
  list-style: none;
  cursor: pointer;
}
.menu__toggle::-webkit-details-marker { display: none; }
.menu__toggle:hover, .menu[open] .menu__toggle { border-color: var(--sarai-color-accent); }
.menu__icon { display: block; width: 18px; height: 18px; }
.menu__badge,
.menu__count {
  display: inline-block;
  min-width: 1.5em;
  padding: 1px 6px;
  border-radius: var(--sarai-radius-sm);
  background: var(--sarai-color-error);
  color: var(--sarai-color-text-on-accent);
  font-family: var(--sarai-font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}
.menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: min(400px, calc(100vw - 32px));
  background: var(--sarai-color-surface-elevated);
  border: 1px solid var(--sarai-color-border-strong);
  border-radius: var(--sarai-radius-md);
}
.menu__title { padding: 20px 22px 18px; border-bottom: 1px solid var(--sarai-color-border); }
.menu__title strong { display: block; font-family: var(--sarai-font-display); font-size: 26px; font-weight: 400; line-height: 1.1; letter-spacing: 0.01em; }
.menu__title span { display: block; margin-top: 4px; color: var(--sarai-color-text-secondary); font-size: var(--sarai-type-caption-size); }
.menu__links { display: grid; padding: 12px 8px 0; }
.menu__links > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--sarai-radius-md);
  color: var(--sarai-color-text-secondary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.menu__links > a:hover { color: var(--sarai-color-accent); background: var(--sarai-color-surface); }
.menu__links > a[aria-current='page'] { color: var(--sarai-color-accent); background: var(--sarai-color-accent-subtle); }
.menu__divider { height: 1px; margin: 8px 6px; background: var(--sarai-color-border); }
.menu__identity {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px -8px 0;
  padding: 16px 22px;
  border-top: 1px solid var(--sarai-color-border);
  border-radius: 0 0 var(--sarai-radius-md) var(--sarai-radius-md);
  background: var(--sarai-color-surface);
}
.menu__identity-label { color: var(--sarai-color-text-secondary); font-size: var(--sarai-type-caption-size); }
.menu__identity a { color: var(--sarai-color-text-primary); font-size: var(--sarai-type-body-size); font-weight: 600; text-decoration: none; }
.menu__identity a:hover { color: var(--sarai-color-accent); text-decoration: underline; }
.menu__identity a[aria-current='page'] { text-decoration: underline; }
.menu__identity form { display: flex; justify-content: flex-end; margin: 0; }
.menu__version { color: var(--sarai-color-text-secondary); font-size: var(--sarai-type-caption-size); text-align: right; }

/* Page */
.page { width: 100%; max-width: var(--sarai-container-full); margin: 0 auto; padding: var(--sarai-grid-margin); }
.page h1 { margin-bottom: var(--sarai-space-24); }
.page > h1 + p { margin: -12px 0 var(--sarai-space-24); color: var(--sarai-color-text-secondary); font-size: var(--sarai-type-small-size); }
.page > h2, .page section > h2:not(.error-summary__title) { margin: var(--sarai-space-32) 0 var(--sarai-space-12); }
.page--auth { max-width: calc(460px + 2 * var(--sarai-grid-margin)); padding-top: 96px; }
.page--auth > h1 { margin-bottom: var(--sarai-space-16); }
.page--auth .card { margin-top: 0; }
.page--auth .button { width: 100%; }
.answer__help, .notice-group__hint, .note__locked, .tab-reasons { color: var(--sarai-color-text-secondary); font-size: var(--sarai-type-small-size); }

.back-link {
  display: inline-block;
  margin-bottom: var(--sarai-space-16);
  color: var(--sarai-color-accent);
  font-size: var(--sarai-type-small-size);
  font-weight: 600;
  text-decoration: none;
}
.back-link:hover { text-decoration: underline; }

/* Stat tiles: a mono number over a short sentence. */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sarai-space-16); margin-bottom: var(--sarai-space-24); }
.stat {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
}
.stat__label { margin-top: 6px; color: var(--sarai-color-text-secondary); font-size: var(--sarai-type-small-size); }
.stat__value { font-family: var(--sarai-font-mono); font-size: 30px; font-weight: 400; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* Filters */
.filters { display: flex; flex-wrap: wrap; gap: var(--sarai-space-12); align-items: flex-end; margin-bottom: var(--sarai-space-16); }
.filters__field--grow { flex: 0 1 320px; }
.filters label { display: block; margin-bottom: var(--sarai-space-4); color: var(--sarai-color-text-secondary); font-size: var(--sarai-type-caption-size); font-weight: 600; }
.filters select { font-weight: 600; }
.filters input { min-width: 280px; }

/* Form fields */
label { font-size: var(--sarai-type-small-size); font-weight: 600; }
input[type='text'], input[type='search'], input[type='email'], input[type='password'], input[type='url'],
input[type='number'], input[type='date'], input[type='month'], input[type='time'], input:not([type]), select, textarea {
  width: 100%;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--sarai-color-border-strong);
  border-radius: var(--sarai-radius-md);
  background: var(--sarai-color-surface-elevated);
  color: var(--sarai-color-text-primary);
  font-size: 14px;
  line-height: 1.5;
}
input:hover, select:hover, textarea:hover { border-color: var(--sarai-color-text-secondary); }
input[aria-invalid='true'], select[aria-invalid='true'], textarea[aria-invalid='true'] { border-color: var(--sarai-color-error); }
input:disabled, select:disabled, textarea:disabled { background: var(--sarai-color-surface); color: var(--sarai-color-text-secondary); cursor: not-allowed; }
textarea { line-height: 1.6; resize: vertical; }
input[type='checkbox'], input[type='radio'] { width: auto; accent-color: var(--sarai-color-accent); }
fieldset { margin: 0; padding: 0; border: 0; }
label > input:not([type='checkbox'], [type='radio']), label > select, label > textarea { display: block; margin-top: 6px; }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
legend { margin-bottom: var(--sarai-space-8); padding: 0; font-size: var(--sarai-type-small-size); font-weight: 600; }
.errorlist { margin: 0; padding: 0; list-style: none; color: var(--sarai-color-error); font-size: var(--sarai-type-small-size); font-weight: 600; }

/* Buttons, after the design's Button component: primary and secondary. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sarai-space-8);
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid var(--sarai-color-accent);
  border-radius: var(--sarai-radius-md);
  background: var(--sarai-color-accent);
  color: var(--sarai-color-text-on-accent);
  font-family: var(--sarai-font-body);
  font-size: var(--sarai-type-small-size);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms linear, border-color 120ms linear;
}
.button:hover { background: var(--sarai-color-accent-hover); border-color: var(--sarai-color-accent-hover); color: var(--sarai-color-text-on-accent); }
.button--secondary, .button--quiet { background: var(--sarai-color-surface-elevated); border-color: var(--sarai-color-border-strong); color: var(--sarai-color-accent); }
.button--secondary:hover, .button--quiet:hover { background: var(--sarai-color-surface); border-color: var(--sarai-color-accent); color: var(--sarai-color-accent); }
.button:disabled, .button:disabled:hover { background: var(--sarai-color-border); border-color: var(--sarai-color-border); color: var(--sarai-color-text-secondary); cursor: not-allowed; }

/* Disclosures styled as quiet accent toggles */
details > summary { cursor: pointer; }
.status-controls > summary, .note__edit > summary, .notice-group > summary, details.card > summary {
  color: var(--sarai-color-accent);
  font-size: var(--sarai-type-small-size);
  font-weight: 600;
}

/* Cards: the elevated white surface every boxed component shares. */
.card, .stat, .state-header, .notes, .evidence__text, .finding__details {
  background: var(--sarai-color-surface-elevated);
  border: 1px solid var(--sarai-color-border);
  border-radius: var(--sarai-radius-md);
}
.card { padding: 22px 24px; }
.card + .card, section + .card, .card + section { margin-top: var(--sarai-space-16); }
.notices > .card, .notes__list > .card, .misses > .card, .suggestions > .card { margin-top: 0; }
.page .card > h2:first-child { margin-top: 0; }
.details { display: grid; grid-template-columns: max-content 1fr; gap: var(--sarai-space-8) var(--sarai-space-24); margin: 0 0 var(--sarai-space-24); }
.details dt { font-size: var(--sarai-type-small-size); font-weight: 600; }
.details dd { margin: 0; }
.invitations h2 { margin: var(--sarai-space-24) 0 var(--sarai-space-12); }
.invitations form { margin: 0; }
.form-error {
  max-width: 460px;
  padding: 14px 18px;
  border: 1px solid var(--sarai-color-error);
  border-radius: var(--sarai-radius-md);
  background: var(--sarai-color-surface-elevated);
  color: var(--sarai-color-error);
  font-size: 14px;
}
.inline-form { display: flex; gap: var(--sarai-space-8); align-items: center; }
.inline-form select { width: auto; padding: 6px 10px; }

/* Tables */
.table-wrap {
  overflow-x: auto;
  background: var(--sarai-color-surface-elevated);
  border: 1px solid var(--sarai-color-border);
  border-radius: var(--sarai-radius-md);
}
.card .table-wrap, .table-wrap .table-wrap { border: 0; border-radius: 0; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table caption:not(.visually-hidden) { padding: 14px 20px 0; color: var(--sarai-color-text-secondary); font-size: var(--sarai-type-caption-size); font-weight: 600; text-align: left; }
.table th, .table td { padding: 12px 20px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--sarai-color-border); white-space: nowrap; }
.table thead th { border-bottom-color: var(--sarai-color-border-strong); color: var(--sarai-color-text-secondary); font-size: var(--sarai-type-caption-size); font-weight: 600; }
.table tbody th { font-weight: 600; }
.table tbody tr:hover { background: var(--sarai-color-surface); }
.table tbody tr:last-child > * { border-bottom: 0; }
.table__num { text-align: right !important; }
td.table__num { font-family: var(--sarai-font-mono); font-size: var(--sarai-type-small-size); }
.table__date { color: var(--sarai-color-text-secondary); font-family: var(--sarai-font-mono); font-size: var(--sarai-type-caption-size); }
.table__title { font-weight: 600; }
.table__title a { text-decoration: none; }
.table__title a:hover { text-decoration: underline; }
.table__code { color: var(--sarai-color-text-secondary); font-family: var(--sarai-font-mono); font-size: var(--sarai-type-caption-size); font-weight: 400; }
.table__muted { color: var(--sarai-color-text-secondary); font-size: var(--sarai-type-caption-size); }
.table-wrap + .table__muted { margin-top: var(--sarai-space-12); }
.table td { font-variant-numeric: tabular-nums; }

/* Status chips: the label carries the meaning; tone only reinforces it. */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--sarai-color-border-strong);
  border-radius: var(--sarai-radius-sm);
  background: var(--sarai-color-surface);
  color: var(--sarai-color-text-secondary);
  font-family: var(--sarai-font-body);
  font-size: var(--sarai-type-caption-size);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.badge--ok { background: var(--sarai-color-surface-elevated); border-color: var(--sarai-color-success); color: var(--sarai-color-success); }
.badge--warn { background: var(--sarai-color-surface-elevated); border-color: var(--sarai-color-warning); color: var(--sarai-color-warning); }
.badge--danger { background: var(--sarai-color-surface-elevated); border-color: var(--sarai-color-error); color: var(--sarai-color-error); }
.badge--info { background: var(--sarai-color-accent-subtle); border-color: transparent; color: var(--sarai-color-accent); }

/* Pagination */
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sarai-space-12);
  margin-top: var(--sarai-space-16);
  color: var(--sarai-color-text-secondary);
  font-size: var(--sarai-type-caption-size);
}
.table-wrap .pagination, .card .pagination { margin: 0; padding: 14px 20px; border-top: 1px solid var(--sarai-color-border); }
.pagination__links { display: flex; flex-wrap: wrap; gap: var(--sarai-space-4); }
.pagination__links a {
  min-width: 2rem;
  padding: 4px 8px;
  border: 1px solid var(--sarai-color-border-strong);
  border-radius: var(--sarai-radius-md);
  background: var(--sarai-color-surface-elevated);
  font-family: var(--sarai-font-mono);
  text-align: center;
  text-decoration: none;
}
.pagination__links a[aria-current='page'] { background: var(--sarai-color-accent); border-color: var(--sarai-color-accent); color: var(--sarai-color-text-on-accent); }

/* Detail views */
.detail-section { padding: 22px 24px; border-bottom: 1px solid var(--sarai-color-border); }
.detail-section:last-child { border-bottom: 0; }
.detail-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sarai-space-16) var(--sarai-space-24); }
.detail-list dt { margin-bottom: 6px; font-size: var(--sarai-type-small-size); font-weight: 600; }
.detail-list dd { margin: 0; }
.detail-items, .detail-sublist { list-style: none; margin: 0; padding: 0; }
.detail-item { padding: var(--sarai-space-12) 0; border-bottom: 1px solid var(--sarai-color-border); }
.detail-item:last-child { border-bottom: 0; }
.detail-item__head { display: flex; flex-wrap: wrap; gap: var(--sarai-space-8) var(--sarai-space-12); align-items: baseline; justify-content: space-between; }
.detail-sublist { margin-top: var(--sarai-space-8); font-size: var(--sarai-type-small-size); }
.detail-quote, .finding__quote { padding: 12px 16px; border-left: 4px solid var(--sarai-color-accent); background: var(--sarai-color-surface); font-size: 14px; line-height: 1.6; }
.detail-quote { margin: var(--sarai-space-8) 0 0; }

/* Interface conventions shared by every page (core/templates/core/partials) */
.control-disabled { color: var(--sarai-color-text-secondary); font-weight: 600; }
.control-disabled__reason { display: block; color: var(--sarai-color-text-secondary); font-size: var(--sarai-type-caption-size); }
.tab {
  display: inline-block;
  margin-bottom: -1px;
  padding: 14px 22px;
  border-bottom: 2px solid transparent;
  color: var(--sarai-color-text-secondary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.tab:hover { color: var(--sarai-color-accent); }
.tab[aria-current='page'] { border-bottom-color: var(--sarai-color-accent); color: var(--sarai-color-accent); }
.tab[aria-disabled='true'] { color: var(--sarai-color-border-strong); cursor: not-allowed; }
.error-summary {
  margin-bottom: var(--sarai-space-16);
  padding: 16px 20px;
  border: 1px solid var(--sarai-color-error);
  border-radius: var(--sarai-radius-md);
  background: var(--sarai-color-surface-elevated);
}
.error-summary__title { margin: 0 0 var(--sarai-space-8); color: var(--sarai-color-error); font-family: var(--sarai-font-body); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.error-summary__list { margin: 0; padding-left: var(--sarai-space-24); font-size: 14px; }
.error-summary__list a { color: var(--sarai-color-error); }
.form-success {
  padding: 12px 16px;
  border-left: 4px solid var(--sarai-color-success);
  border-radius: 0 var(--sarai-radius-md) var(--sarai-radius-md) 0;
  background: var(--sarai-color-surface);
  color: var(--sarai-color-success);
  font-size: 14px;
  font-weight: 600;
}
.empty-state { padding: 32px 20px; color: var(--sarai-color-text-secondary); font-size: var(--sarai-type-small-size); text-align: center; }
.error-line { color: var(--sarai-color-error); font-weight: 600; }

/* Narrow screens: tables marked .table--stack become one stacked block per row, labelled by data-label. */
@media (max-width: 40rem) {
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--stack tr { display: block; border-bottom: 1px solid var(--sarai-color-border); }
  .table--stack td { display: flex; justify-content: space-between; gap: var(--sarai-space-12); border-bottom: 0; white-space: normal; text-align: right; }
  .table--stack td[data-label]::before { content: attr(data-label); color: var(--sarai-color-text-secondary); font-weight: 600; text-align: left; }
}

/* Suggestions page */
.suggestions { list-style: none; margin: 0 0 var(--sarai-space-24); padding: 0; display: grid; gap: var(--sarai-space-12); }
.suggestion__heading { display: flex; flex-wrap: wrap; gap: var(--sarai-space-8); align-items: center; margin: 0 0 var(--sarai-space-8); font-weight: 600; }
.suggestion__details { display: grid; grid-template-columns: max-content 1fr; gap: var(--sarai-space-4) var(--sarai-space-12); margin: 0 0 var(--sarai-space-12); font-size: 14px; }
.suggestion__details dt { font-weight: 600; }
.suggestion__details dd { margin: 0; overflow-wrap: anywhere; }
.suggestion__actions { display: flex; flex-wrap: wrap; gap: var(--sarai-space-12); align-items: flex-end; }
.suggestion__decline { display: grid; gap: var(--sarai-space-4); flex: 1 1 16rem; }
@media (max-width: 480px) { .suggestion__details { grid-template-columns: 1fr; } }

/* Notices and findings lists */
.tabs { display: flex; flex-wrap: wrap; margin: 0 0 var(--sarai-space-16); border-bottom: 1px solid var(--sarai-color-border); }
.notices { list-style: none; margin: 0 0 var(--sarai-space-24); padding: 0; display: grid; gap: var(--sarai-space-12); }
.notice { padding: 16px 20px; }
.notice__heading { display: flex; flex-wrap: wrap; gap: var(--sarai-space-8); align-items: center; margin: 0 0 var(--sarai-space-8); }
.notice__title { font-size: 14px; font-weight: 600; line-height: 1.45; text-decoration: none; overflow-wrap: anywhere; }
.notice__title:hover { text-decoration: underline; }
.notice__meta { margin: 0; color: var(--sarai-color-text-secondary); font-family: var(--sarai-font-mono); font-size: var(--sarai-type-caption-size); overflow-wrap: anywhere; }
.notice-group { margin: 0 0 var(--sarai-space-24); }
.notice-group__hint { margin: var(--sarai-space-8) 0; }

/* Finding page */
.finding { max-width: 900px; margin: 0 auto; }
.finding > h1 { max-width: 40ch; margin-bottom: var(--sarai-space-12); font-size: 38px; line-height: 1.2; }
.finding__meta { display: flex; flex-wrap: wrap; gap: var(--sarai-space-8); align-items: center; color: var(--sarai-color-text-secondary); font-family: var(--sarai-font-mono); font-size: var(--sarai-type-caption-size); }
.finding__quote { margin: var(--sarai-space-16) 0; background: var(--sarai-color-surface-elevated); overflow-wrap: anywhere; }
.finding__details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sarai-space-12) var(--sarai-space-24);
  margin: 0 0 var(--sarai-space-16);
  padding: 22px 24px;
  font-size: 14px;
}
.card .finding__details { padding: 0; border: 0; }
.finding__details dt { font-size: var(--sarai-type-small-size); font-weight: 600; }
.finding__details dd { margin: 0; overflow-wrap: anywhere; }
.finding__held { color: var(--sarai-color-text-secondary); font-size: var(--sarai-type-small-size); }
.answer { display: grid; gap: var(--sarai-space-16); margin-top: var(--sarai-space-16); }
.answer__form { display: grid; gap: var(--sarai-space-8); }
.answer__form fieldset { display: flex; flex-wrap: wrap; gap: var(--sarai-space-12); }
.answer__form fieldset legend { width: 100%; }
.answer__form fieldset label { display: inline-flex; gap: 6px; align-items: center; font-weight: 400; font-size: 14px; }
.answer__form .button { justify-self: start; }
.answer__form + .answer__form { margin-top: var(--sarai-space-16); padding-top: var(--sarai-space-16); border-top: 1px solid var(--sarai-color-border); }
.answer__help { margin: 0; }
@media (max-width: 480px) { .finding__details { grid-template-columns: 1fr; } }

/* Account page */
.checkbox-field { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--sarai-space-8); align-items: start; }
.checkbox-field input { margin-top: 0.25em; }
.checkbox-field .answer__help { grid-column: 2; margin: 0; }

/* Misses and recall */
.recall-report caption { text-align: left; font-weight: 600; margin-bottom: var(--sarai-space-8); }
.recall-report__beta { font-weight: 600; }
.misses { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sarai-space-12); }
.miss { padding: 16px 20px; }
.miss p { margin: var(--sarai-space-4) 0; overflow-wrap: anywhere; }

/* Daily summary post */
.summary-post { margin-bottom: var(--sarai-space-16); }
.summary-post__body { font-size: 14px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.summary-post__sent { margin-bottom: 0; color: var(--sarai-color-text-secondary); font-family: var(--sarai-font-mono); font-size: var(--sarai-type-caption-size); }

/* Log page */
.log__values pre { margin: var(--sarai-space-4) 0; font-family: var(--sarai-font-mono); font-size: var(--sarai-type-caption-size); white-space: pre-wrap; overflow-wrap: anywhere; }

/* State profile: the header section reads as the design's header card. */
.state-header { margin-bottom: var(--sarai-space-16); padding: 28px 32px; }
.state-header h1 { margin-bottom: var(--sarai-space-12); line-height: 1.1; }
.state-header h1 .table__code { font-size: 15px; vertical-align: middle; }
.state-header__status { display: flex; flex-wrap: wrap; gap: var(--sarai-space-8); align-items: center; margin: 0; }
.state-header__runs { margin: var(--sarai-space-12) 0 0; color: var(--sarai-color-text-secondary); font-family: var(--sarai-font-mono); font-size: var(--sarai-type-caption-size); }
.state-header__note { max-width: 75ch; margin: var(--sarai-space-16) 0 0; font-size: 14px; line-height: 1.6; }
.summary-line {
  margin: var(--sarai-space-16) 0 0;
  padding: 12px 16px;
  border-left: 4px solid var(--sarai-color-accent);
  border-radius: 0 var(--sarai-radius-md) var(--sarai-radius-md) 0;
  background: var(--sarai-color-accent-subtle);
  font-size: 14px;
}
.status-controls { margin: var(--sarai-space-16) 0 0; }
.status-controls form { margin-top: var(--sarai-space-12); max-width: 560px; }
.status-controls form + form { margin-top: var(--sarai-space-16); }
.tab-reasons { list-style: none; padding: 0; margin: 0 0 var(--sarai-space-16); }
.tab-panel { margin-top: var(--sarai-space-16); }

/* Runs */
.run__reason { margin-top: var(--sarai-space-4); font-size: var(--sarai-type-caption-size); overflow-wrap: anywhere; }

/* Saved evidence */
.evidence__text {
  padding: 22px 24px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.evidence__text mark { padding: 0 2px; }
.evidence__files { padding-left: var(--sarai-space-16); }

/* Notes: a card whose heading is a section label, as on the design's finding and state views. */
.notes { margin-top: var(--sarai-space-16); padding: 22px 24px; }
.notes__list { list-style: none; padding: 0; display: grid; gap: var(--sarai-space-12); margin-top: var(--sarai-space-16); }
.note { padding: 16px 18px; background: var(--sarai-color-surface); }
.note__meta { margin: 0 0 var(--sarai-space-8); color: var(--sarai-color-text-secondary); font-family: var(--sarai-font-mono); font-size: 11px; }
.note__body { margin: 0 0 var(--sarai-space-8); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.note__locked { margin: 0; }
.note form { margin-top: var(--sarai-space-8); }

/* Revision record */
.revision-record { margin: var(--sarai-space-16) 0; }
.material-row { display: grid; gap: var(--sarai-space-4); margin-bottom: var(--sarai-space-8); }

@media (max-width: 42rem) {
  .page { padding: var(--sarai-space-16); }
  .page--auth { padding-top: var(--sarai-space-48); }
  .site-header__inner { position: relative; padding: 10px 16px; }
  .menu { position: static; }
  .menu__panel { left: 16px; top: calc(100% + 4px); }
  h1 { font-size: 34px; }
  .state-header { padding: 20px; }
  .card, .finding__details, .evidence__text { padding: 18px 16px; }
  .filters > *, .filters__field--grow { flex: 1 1 100%; }
  .filters input { min-width: 0; }
  .filters .button { width: 100%; }
}