/* PIARit stylesheet.
 *
 * The variables below are the design tokens from design/handoff/07-design-tokens.md; the
 * component rules follow its "Components" recipes and 04-screens.md. One file, no build step
 * (ADR-0003). The content security policy forbids inline styles, so every look lives here.
 */

:root {
  /* Surfaces */
  --canvas: linear-gradient(135deg, #e9f4fa 0%, #f5f5f7 45%, #f7f2ea 100%);
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --surface-3: #fafafa;
  --nav-active: #f0f0f2;

  /* Borders */
  --border: #e5e5ea;
  --border-input: #d2d2d7;
  --border-divider: #f0f0f2;

  /* Ink */
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #aeaeb2;
  --switch-off: #8e8e93;

  /* Accents */
  --accent: #1583b8;
  --accent-tint: #eaf3fa;
  --attorney: #7c5cff;
  --attorney-tint: #f1edff;
  --done: #1a9e6a;
  --done-tint: #e6f6ee;
  --urgent: #d9760b;
  --danger: #d70015;
  --danger-tint: #fff1f0;
  --amber: #b8860b;
  --amber-tint: #fff8e6;
  --teal-deep: #0f5262;

  /* Type */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  --font-paper: Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Shape */
  --radius-card: 16px;
  --radius-card-sm: 14px;
  --radius-login: 22px;
  --radius-control: 10px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-login: 0 10px 50px rgba(15, 66, 82, 0.12);
}

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

/* Hidden means hidden, whatever a class says (R-093 code review): `.btn` sets `display`, which
   would otherwise show a "Copy" button that only PIARit's own script makes work. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100vh;
  background: var(--canvas);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

h1,
h2,
h3 {
  text-wrap: pretty;
}

/* --- Buttons ------------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 18px;
  border: 0;
  border-radius: var(--radius-control);
  font: 600 14px/1.2 var(--font-ui);
  cursor: pointer;
  transition: background-color 150ms ease;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: #137aad;
}

.btn-block {
  width: 100%;
}

.btn-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: 500 13.5px/1.4 var(--font-ui);
  cursor: pointer;
}

.btn-link:hover {
  text-decoration: underline;
}

/* --- Form fields --------------------------------------------------------------------------- */
.field {
  margin-bottom: 18px;
}

.field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
}

.field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: 15px/1.4 var(--font-ui);
}

.field input:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

.field-error {
  margin: -6px 0 16px;
  color: var(--danger);
  font-size: 13px;
  font-weight: 500;
}

/* --- L · Sign in --------------------------------------------------------------------------- */
.sign-in {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 16px;
}

.sign-in-card {
  width: 100%;
  max-width: 400px;
  padding: 36px 38px 30px;
  border-radius: var(--radius-login);
  background: var(--surface);
  box-shadow: var(--shadow-login);
}

.sign-in-lockup {
  display: block;
  width: 190px;
  height: auto;
  margin: 0 auto 14px;
}

.sign-in-tagline {
  margin: 0 0 26px;
  color: var(--ink-2);
  font-size: 13.5px;
  text-align: center;
}

/* The online demo's band and sign-in note (R-117, ADR-0059): shown only in demo mode. */
.demo-band {
  margin: 0;
  padding: 8px 16px;
  border-bottom: 1px solid var(--amber);
  background: var(--amber-tint);
  color: var(--ink);
  font-size: 13px;
  text-align: center;
}

.sign-in-demo {
  margin: 0 0 22px;
  padding: 12px 14px;
  border: 1px solid var(--amber);
  border-radius: 10px;
  background: var(--amber-tint);
  font-size: 13px;
}

.sign-in-demo p {
  margin: 0 0 6px;
}

.sign-in-demo ul {
  margin: 0;
  padding-left: 18px;
}

/* --- App frame ----------------------------------------------------------------------------- */
.shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex: none;
  flex-direction: column;
  width: 220px;
  height: 100vh;
  padding: 22px 14px;
  overflow: auto;
  border-right: 1px solid var(--border);
  background: var(--surface);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 22px;
}

.brand-mark {
  display: block;
  flex: none;
  width: 32px;
  height: auto;
}

.wordmark {
  color: var(--teal-deep);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}

.wordmark-it {
  color: var(--accent);
}

.brand-firm {
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.3;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

/* The number beside "Approve" (R-065): items waiting for an attorney's decision. Violet for the
   attorney, whose act it is; quiet grey beside the paralegal's "With the attorney". */
.nav-count {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.nav-count--attorney {
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--attorney);
  color: #fff;
}

.nav-count--quiet {
  color: var(--ink-2);
  font-weight: 500;
}

.nav-item:hover {
  background: var(--surface-3);
  text-decoration: none;
}

.nav-item.is-active {
  background: var(--nav-active);
}

.signed-in {
  margin-top: auto;
  padding: 14px 10px 0;
  border-top: 1px solid var(--border-divider);
}

.signed-in-name {
  font-size: 14px;
  font-weight: 600;
}

.signed-in-role {
  margin-bottom: 8px;
  color: var(--ink-2);
  font-size: 13px;
}

.content {
  flex: 1;
  min-width: 0;
  padding: 36px 40px;
}

/* --- Pages --------------------------------------------------------------------------------- */
.page {
  margin: 0 auto;
}

.page-requests {
  max-width: 1120px;
}

.page-header {
  margin-bottom: 26px;
}

.page-title {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.page-subtitle {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 15px;
}

.card {
  padding: 22px 24px;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.empty-state {
  text-align: center;
}

.empty-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.empty-sub {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 14px;
}

@media (max-width: 720px) {
  .shell {
    flex-direction: column;
  }

  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .content {
    padding: 24px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* --- Alerts (activity-log warning and reminder, ADR-0011) ---------------------------------- */
.alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 auto 20px;
  padding: 12px 16px;
  border-radius: var(--radius-card-sm);
  font-size: 14px;
}

.alert-danger {
  border: 1px solid #f5b5b0;
  background: var(--danger-tint);
  color: var(--ink);
}

.alert-danger a {
  color: var(--danger);
  font-weight: 600;
}

.alert-notice {
  border: 1px solid #f0d48a;
  background: var(--amber-tint);
  color: var(--ink);
}

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

/* --- Activity page ------------------------------------------------------------------------- */
.page-activity {
  max-width: 1120px;
}

.panel {
  margin-bottom: 16px;
}

.panel-danger {
  border: 1px solid #f5b5b0;
  background: var(--danger-tint);
}

.panel-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
}

.panel-text {
  margin: 0 0 6px;
  font-size: 15px;
}

.panel-sub {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 13.5px;
}

.panel-actions {
  margin: 14px 0 0;
}

.problem-list {
  margin: 6px 0 10px;
  padding-left: 20px;
  font-size: 14px;
}

.acknowledgement + .acknowledgement {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-divider);
}

.acknowledge-form {
  margin-top: 12px;
}

.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-input);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: 15px/1.5 var(--font-ui);
  resize: vertical;
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}

.btn-danger:hover {
  background: #bf0014;
}

.activity-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.activity-table th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
}

.activity-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border-divider);
  vertical-align: top;
}

.nowrap {
  white-space: nowrap;
}

.mono {
  font-family: var(--font-mono);
}

.pager {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 14px;
}

/* --- Clients (R-005, ADR-0012) ------------------------------------------------------------- */
.page-clients {
  max-width: 1040px;
}

/* --- Setup (R-032): a client's tabs, the client picker and the forms beside each setting ------ */
.page-setup {
  max-width: 960px;
}

.setup-picker {
  flex-wrap: wrap;
  margin-top: 14px;
}

.setup-picker a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.setup-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
}

.setup-tab {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

.setup-tab:hover {
  background: var(--nav-active);
}

.setup-tab.is-current {
  background: var(--accent);
  color: #fff;
}

.setup-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.setup-facts {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 8px 16px;
  margin: 0;
  font-size: 14.5px;
}

.setup-facts dt {
  color: var(--ink-2);
  font-weight: 600;
}

.setup-facts dd {
  margin: 0;
}

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

.setup-choice {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.setup-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.setup-item {
  padding: 12px 0;
  border-top: 1px solid var(--border-divider);
}

.setup-item:first-child {
  border-top: 0;
}

.setup-item--line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.setup-item-name {
  font-weight: 600;
}

.setup-row-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
}

.setup-row-form .field {
  flex: 1 1 180px;
  margin-bottom: 0;
}

.setup-row-form .setup-wide {
  flex: 2 1 280px;
}

.setup-row-form .setup-item-name {
  flex: 1 1 100%;
}

.setup-row-form select,
.setup-figure-form select {
  padding: 8px 10px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: 14px/1.4 var(--font-ui);
}

.setup-remove {
  margin: 8px 0 0;
}

.setup-item--line .setup-remove,
.setup-item--line .setup-row-form {
  margin: 0;
}

/* R-074: an AI service's key box -- a text box, so no browser offers to save the key, shown as
   dots. */
.secret-box {
  -webkit-text-security: disc;
}

/* R-074: on the AI service page, a service's labels and its "Set up" link end its row together. */
.ai-service-row-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.setup-add {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.setup-add-title,
.setup-group-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
}

.setup-group {
  margin-top: 16px;
}

.setup-warning {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--amber-tint);
  color: var(--ink);
  font-size: 13.5px;
}

.setup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.setup-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.setup-chip-remove {
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: 600 15px/1 var(--font-ui);
  cursor: pointer;
}

.setup-chip-remove:hover {
  color: var(--danger);
}

.setup-figures {
  margin: 0;
  padding: 0;
  list-style: none;
}

.setup-figure {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px 190px;
  gap: 8px 18px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid var(--border-divider);
}

.setup-figure:first-child {
  border-top: 0;
}

.setup-figure-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
}

.setup-figure-value input[type="text"] {
  width: 90px;
  padding: 7px 9px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: 14px/1.4 var(--font-mono);
}

.setup-figure-time input[type="text"] {
  width: 64px;
}

.setup-figure-value input[type="text"]:focus,
.setup-row-form select:focus,
.setup-figure-form select:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

.setup-figure-value .field-error {
  margin: 6px 0 0;
}

@media (max-width: 760px) {
  .setup-figure,
  .setup-grid,
  .setup-facts {
    grid-template-columns: 1fr;
  }
}

.table-scroll {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
}

.data-table td,
.data-table .row-heading {
  padding: 10px;
  border-bottom: 1px solid var(--border-divider);
  vertical-align: top;
}

.data-table .row-heading {
  width: 180px;
  color: var(--ink);
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
}

.data-table tbody tr:last-child td,
.data-table tbody tr:last-child .row-heading {
  border-bottom: 0;
}

.client-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 600;
}

/* The client's dot: a fixed palette (design 07), chosen per client. */
.client-dot {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-3);
}

.client-dot-large {
  width: 14px;
  height: 14px;
  margin-right: 12px;
  vertical-align: middle;
}

.client-dot--blue {
  background: #1583b8;
}

.client-dot--teal {
  background: #0f9ba8;
}

.client-dot--brown {
  background: #8a6d3b;
}

.client-dot--violet {
  background: #7c5cff;
}

.client-dot--green {
  background: #1a9e6a;
}

.client-dot--orange {
  background: #c2703d;
}

.client-dot--slate {
  background: #5f6b7a;
}

.client-dot--rose {
  background: #c23a6b;
}

.back-link {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 14px;
}

.page-eyebrow {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}

.section-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.section-links a {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
}

.section-links a:hover {
  background: var(--nav-active);
  text-decoration: none;
}

.read-only-note {
  margin: 0 0 16px;
  color: var(--ink-2);
  font-size: 13px;
}

.chip {
  display: inline-block;
  padding: 3px 10px;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
}

.chip-neutral {
  background: var(--surface-2);
  color: var(--ink-2);
}

.chip-confirmed {
  background: var(--done-tint);
  color: #11734c;
}

.chip-unconfirmed {
  background: var(--amber-tint);
  color: #7a5a00;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.figure-cite {
  min-width: 8em;
}

.figure-label {
  font-weight: 600;
}

.figure-note,
.figure-cite,
.routing-default,
.muted {
  color: var(--ink-2);
  font-size: 13px;
}

.routing-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.routing-lines li + li {
  margin-top: 6px;
}

.routing-office {
  font-weight: 600;
}

/* --- Staff, roles and passwords (R-006, ADR-0013) ------------------------------------------ */
.page-staff,
.page-staff-person,
.page-your-account {
  max-width: 900px;
}

.stack > * + * {
  margin-top: 14px;
}

.field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: 15px/1.4 var(--font-ui);
}

.field input[type="password"],
.field input[type="email"],
.field input[type="text"] {
  width: 100%;
}

.btn-secondary {
  border: 1px solid var(--border-input);
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
}

.btn-secondary:hover {
  background: var(--surface-3);
}

.chip-on {
  background: var(--done-tint);
  color: #11734c;
}

.chip-off {
  background: var(--surface-2);
  color: var(--ink-2);
}

.alert-done {
  border: 1px solid #a7dcc3;
  background: var(--done-tint);
  color: var(--ink);
}

.signed-in-link {
  display: block;
  margin: 6px 0 2px;
  font-size: 13px;
}

.sign-out-instead {
  margin-top: 16px;
  text-align: center;
}

/* Names and email addresses on the Staff list stay on one line; the table scrolls if it must. */
.page-staff .data-table td:first-child,
.page-staff .data-table td:nth-child(2) {
  white-space: nowrap;
}

/* --- The requests register (R-013) ---------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* R-083, the prototype's list: the title, and its one line beneath it. */
.register-header {
  display: block;
}

.segmented {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--radius-control);
  background: var(--nav-active);
}

.segmented a {
  padding: 7px 14px;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

.segmented a.is-current {
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--ink);
}

/* R-083, the prototype's toolbar: the view, the search and New request on one row. */
.register-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 4px 0 16px;
}

.register-search {
  display: flex;
  flex: 0 1 340px;
  align-items: center;
  gap: 8px;
}

.register-search-button {
  font-size: 13px;
}

.register-search input[type="search"] {
  flex: 1 1 240px;
  padding: 10px 14px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

.register-search input[type="search"]:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-tint);
}

.register-note {
  margin: 0 0 14px;
}

.filters {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.chip-legend {
  min-width: 56px;
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.filter-chip {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.filter-chip:hover {
  border-color: var(--accent);
}

.filter-chip.is-current {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.filter-chip:focus-visible,
.segmented a:focus-visible,
.register-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.register-list,
.requestor-cards,
.pair-list,
.detail-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* R-083, the prototype's filter panel: two columns of chips, the count and the order at its
   foot. */
.register-filters {
  margin-bottom: 12px;
  padding: 18px 20px;
}

.register-filter-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px 28px;
}

.register-filters .chip-group {
  margin-bottom: 12px;
}

.register-filters .chip-legend {
  flex-basis: 100%;
}

.register-filter-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border-divider);
}

.register-filter-foot p {
  margin: 0;
  font-size: 13px;
}

.segmented button {
  padding: 7px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.segmented button.is-current {
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--ink);
}

/* R-083, the prototype's rows: one table, each row one link. */
.register-table {
  padding: 0;
  overflow: hidden;
}

.register-head,
.register-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 180px 140px;
  gap: 16px;
  padding: 12px 18px;
}

.register-head {
  border-bottom: 1px solid var(--border-divider);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.register-head span:last-child {
  text-align: right;
}

.register-item {
  border-bottom: 1px solid var(--border-divider);
}

.register-item:last-child {
  border-bottom: 0;
}

.register-item.is-due {
  background: var(--danger-tint);
}

.row-clock {
  align-items: flex-end;
  text-align: right;
}

.row-owner {
  display: flex;
  align-items: center;
  gap: 6px;
}

.owner-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.row-owner--attorney .owner-dot {
  background: var(--attorney);
}

.row-owner--others .owner-dot {
  background: var(--done);
}

.register-item.is-quiet .row-title,
.register-item.is-quiet .mono {
  color: var(--ink-2);
}

.register-row {
  align-items: start;
  color: var(--ink);
  text-decoration: none;
}

.register-row:hover {
  background: var(--surface-3);
}

.register-row > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.row-title,
.row-step {
  font-size: 15px;
  font-weight: 600;
}

.row-step {
  font-size: 14px;
}

.row-sub {
  color: var(--ink-2);
  font-size: 13px;
}

.row-sub .client-dot {
  margin-right: 6px;
}

.row-state {
  align-self: flex-start;
  white-space: normal;
}

.clock {
  font-size: 15px;
  font-weight: 700;
}

.clock--ahead {
  color: var(--accent);
}

.clock--soon {
  color: var(--urgent);
}

.clock--expected {
  color: var(--done);
}

.clock--today,
.clock--overdue {
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--danger);
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.row-clock .chip {
  align-self: flex-start;
  white-space: normal;
}

.stands {
  background: var(--surface-2);
  color: var(--ink-2);
  white-space: normal;
}

.stands--met {
  background: var(--done-tint);
  color: #11734c;
}

.stands--met_late,
.stands--passed {
  background: var(--amber-tint);
  color: #7a5a00;
}

.stands--overdue,
.stands--today {
  background: var(--danger-tint);
  color: var(--danger);
}

.stands--soon {
  color: var(--urgent);
}

.detail-title {
  margin: 16px 0 8px;
  font-size: 13px;
  font-weight: 700;
}

.detail-title--quiet {
  color: var(--ink-2);
}

/* R-063: the small "Correct" link beside a part of a request's Details. */
.detail-correct {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 500;
}

.moved-list {
  margin: 6px 0 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.55;
}

.detail-list li {
  font-size: 14px;
  line-height: 1.55;
}

.step-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  color: var(--ink-3);
  font-size: 13.5px;
  font-weight: 600;
}

.step-line .is-done {
  color: var(--done);
}

.step-line .is-done::before {
  content: "✓ ";
}

.step-line .is-current {
  color: var(--accent);
}

.requestor-card {
  margin-bottom: 12px;
  padding: 20px 22px;
}

.requestor-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}

.requestor-name {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 600;
}

.as-given {
  font-size: 12.5px;
  font-weight: 500;
}

.requestor-labels {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
}

.requestor-notice {
  margin: 14px 0 0;
}

.pair-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 8px 0;
  border-top: 1px solid var(--border-divider);
}

.pair-list .panel-text {
  flex: 1 1 420px;
  margin: 0;
}

.pair-list--quiet .panel-text {
  color: var(--ink-2);
}

.btn-small {
  padding: 6px 12px;
  font-size: 13px;
}

.requestor-actions {
  margin: 16px 0 0;
}

@media (max-width: 900px) {
  .register-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .register-head {
    display: none;
  }

  .row-clock {
    align-items: flex-start;
    text-align: left;
  }
}

/* --- One request's own page (R-014) ---------------------------------------------------------- */

.page-matter {
  max-width: 1040px;
}

.matter-header {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 300px);
  gap: 20px;
  align-items: start;
}

.matter-card {
  padding: 16px 18px;
}

.matter-card p {
  margin: 0 0 6px;
}

.matter-card-words {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
}

.clock--quiet {
  color: var(--ink-2);
}

.matter-card-waiting {
  padding-top: 8px;
  border-top: 1px solid var(--border-divider);
}

.waiting-list {
  margin: 4px 0 0;
  padding: 0 0 0 16px;
  color: var(--ink-2);
  font-size: 13px;
}

.matter-banner {
  display: block;
}

.matter-banner--quiet,
.matter-banner--quietest {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink);
}

.matter-banner--quietest {
  background: transparent;
}

.banner-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
}

.banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.banner-note {
  margin: 8px 0 0;
  font-size: 13px;
}

.detail-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 28px;
}

.receipt-counts {
  font-size: 13px;
}

.fact-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0 0 12px;
  font-size: 14px;
}

.fact-list dt {
  color: var(--ink-2);
}

.fact-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.request-words {
  max-height: 30em;
  overflow-y: auto;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-3);
  font-size: 15px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.request-words p {
  margin: 0 0 10px;
}

.promptly {
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--accent-tint);
}

/* R-091 (ADR-0042 amended): the one thing to do now, in a box of its own above the steps. */
.next-box {
  margin-bottom: 16px;
  padding: 18px 20px;
  border: 1px solid #cfe3f0;
  background: var(--accent-tint);
}

.next-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.next-logged {
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #cfe3f0;
  color: var(--done);
  font-size: 15px;
  font-weight: 600;
}

/* "Where it stands": the six steps in one card, the current one tinted, none with a button. */
.matter-story {
  margin-bottom: 16px;
  padding: 18px 20px;
}

.story {
  display: grid;
  gap: 2px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.story-step {
  padding: 8px 12px;
  border-radius: var(--radius-control);
}

.story-step.is-current {
  background: var(--accent-tint);
}

.story-step.is-ahead {
  color: var(--ink-3);
}

/* The foot of the request's page: "Record something else" and the quiet link to the Details. */
.matter-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin: 0 0 24px;
}

.matter-foot-link {
  font-size: 14px;
}

/* The "Record something else" page: each act a link with its one plain line. */
.other-group {
  margin-bottom: 12px;
}

.other-list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.other-act {
  padding: 8px 0;
  border-top: 1px solid var(--border-divider);
}

.other-act:first-child {
  border-top: none;
}

.other-about {
  margin: 2px 0 0;
  color: var(--ink-2);
  font-size: 13.5px;
}

.other-tag {
  color: var(--ink-3);
  font-size: 13px;
}

.other-drop {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-divider);
}

.story-step-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
}

.story-step-number {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12px;
}

.story-step.is-done .story-step-number {
  background: var(--done);
  color: #fff;
}

.story-step.is-current .story-step-number {
  background: var(--accent);
  color: #fff;
}

.story-entries {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.story-entry {
  padding: 10px 0;
  border-top: 1px solid var(--border-divider);
  color: var(--ink);
}

.story-entry p {
  margin: 0 0 4px;
}

.story-entry.is-struck .fact-sentence {
  text-decoration: line-through;
  color: var(--ink-2);
}

.private-note {
  padding: 8px 12px;
  border-left: 3px solid var(--attorney);
  background: var(--attorney-tint);
  font-size: 14px;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.private-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}

.fold-title {
  display: inline;
}

.page-matter summary {
  cursor: pointer;
}

.page-matter summary .row-sub {
  display: block;
  margin: 4px 0 0 18px;
}

@media (max-width: 900px) {
  .matter-header,
  .detail-columns,
  .intake-columns {
    grid-template-columns: 1fr;
  }
}

/* --- Today (R-015) ------------------------------------------------------------------------ */

.page-today {
  max-width: 1040px;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}

.today-group,
.today-nothing {
  margin-bottom: 26px;
}

.today-heading {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
}

.today-list,
.today-tiles,
.count-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.today-item {
  margin-bottom: 8px;
}

.today-line {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 14px 18px;
  border-radius: var(--radius-card-sm);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  text-decoration: none;
}

.today-line:hover {
  background: var(--surface-3);
}

.today-clock,
.today-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.today-clock .chip,
.today-tags .chip {
  align-self: flex-start;
  white-space: normal;
}

.today-lead {
  font-size: 15px;
  font-weight: 600;
}

.today-urgent {
  color: var(--danger);
  font-weight: 600;
}

.today-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.today-open {
  align-self: center;
}

.today-more {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 14px;
}

.today-tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 26px;
}

.today-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 18px;
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  text-decoration: none;
}

.today-tile:hover {
  background: var(--surface-3);
}

.today-tile-count {
  color: var(--accent);
  font-size: 28px;
  font-weight: 700;
}

.today-tile-label {
  font-size: 13px;
  font-weight: 600;
}

/* The numbers come first on the page (R-076); the lists follow them, 34px below (the design's
   gap between its sections): this and each panel's own 16px, which a grid does not collapse. */
.today-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.count-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 32px;
  gap: 12px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
}

.count-row:hover {
  background: var(--surface-3);
}

.count-label .client-dot {
  margin-right: 6px;
}

.count-meter {
  width: 100%;
}

.count-number {
  font-weight: 600;
  text-align: right;
}

@media (max-width: 900px) {
  .today-line {
    grid-template-columns: 1fr;
  }

  .today-open {
    display: none;
  }

  .today-tiles,
  .today-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Approve (R-016, ADR-0023) --------------------------------------------------------------- */
.page-approve {
  max-width: 820px;
}

.approve-list,
.decided-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.approve-card {
  margin-bottom: 12px;
  padding: 20px 22px;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.approve-top {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  margin: 0;
  font-size: 13px;
}

/* R-080, the prototype's card: the words on the left, the violet button and Open on the right. */
.approve-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 20px;
  align-items: center;
}

.approve-chip {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.approve-cite {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--ink-2);
}

.approve-sub {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--ink-2);
}

.approve-card .must-see:empty {
  display: none;
}

.approve-read {
  margin-top: 12px;
}

.approve-clock {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: auto;
  text-align: right;
}

.chip-attorney {
  background: var(--attorney-tint);
  color: var(--attorney);
}

.approve-title {
  margin: 8px 0 0;
  font-size: 17px;
  font-weight: 600;
}

.approve-headline {
  margin: 6px 0 0;
  font-size: 22px;
  font-weight: 700;
}

.approve-note {
  margin: 8px 0 0;
  font-size: 14px;
}

.approve-unconfirmed {
  margin: 12px 0 0;
}

/* An item approving would refuse as it stands (R-065): red, because it will not go through. */
.approve-refused {
  display: block;
  margin: 12px 0 0;
}

.approve-refused-text {
  margin: 0;
}

.approve-refused-text + .approve-refused-text {
  margin-top: 4px;
}

.approve-facts,
.approve-send-back {
  margin-top: 12px;
}

.page-approve summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.approve-facts-title {
  margin: 12px 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

.approve-detail {
  display: block;
  font-weight: 400;
}

.approve-value {
  text-align: right;
  white-space: nowrap;
}

.approve-letter {
  margin: 12px 0 0;
}

.approve-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  min-width: 160px;
}

.approve-actions .btn {
  text-align: center;
}

@media (max-width: 640px) {
  .approve-card-grid {
    grid-template-columns: 1fr;
  }
}

.approve-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.approve-form input[type="password"] {
  padding: 9px 12px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-control);
  font: inherit;
}

.btn-attorney {
  background: var(--attorney);
  color: #fff;
}

.btn-attorney:hover {
  background: #6a4be6;
}

.approve-decided {
  margin-top: 24px;
  color: var(--ink-2);
}

.decided-list li {
  padding: 6px 0;
  font-size: 14px;
}

/* --- New request (R-017): three pages, 700px, centred ------------------------------------- */

.page-intake {
  max-width: 700px;
}

/* R-071 (ADR-0031): with the request's own file held, the form keeps its width and the file
   stands beside it; on a narrow screen the file comes after the form. */
.page-intake--held {
  max-width: 1280px;
}

.page-intake--held .intake-layout {
  display: grid;
  grid-template-columns: minmax(0, 700px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.held-panel {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow: auto;
}

/* R-092: the request as it arrived, folded until wanted. */
.held-summary {
  cursor: pointer;
}

.held-summary .panel-title {
  display: inline;
}

.held-fold[open] > .held-summary {
  margin-bottom: 10px;
}

/* R-092: a box page one still needs once a dropped file filled in what it could. */
.page-intake .field.is-missing input,
.page-intake .field.is-missing textarea,
.page-intake .field.is-missing select {
  border-color: var(--amber);
  background: var(--amber-tint);
}

.page-intake fieldset.field.is-missing .chip-choices {
  padding: 6px;
  border-radius: var(--radius-control);
  background: var(--amber-tint);
}

.field-needed {
  color: var(--amber);
  font-weight: 600;
}

.held-frame {
  display: block;
  width: 100%;
  height: 70vh;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.held-picture {
  display: block;
  max-width: 100%;
  border-radius: 8px;
}

.intake-original {
  margin-bottom: 18px;
}

.intake-original-actions {
  margin: 10px 0 0;
}

.held-line {
  margin: 0 0 8px;
  font-size: 14px;
}

.held-name {
  font-weight: 600;
}

.from-email {
  margin: 4px 0 0;
  color: var(--amber);
  font-size: 12.5px;
}

@media (max-width: 1100px) {
  .page-intake--held .intake-layout {
    grid-template-columns: 1fr;
  }

  .held-panel {
    position: static;
    max-height: none;
  }
}

.intake-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}

.intake-steps .is-current {
  color: var(--accent);
}

.field-hint {
  margin: -2px 0 6px;
  color: var(--ink-2);
  font-size: 12.5px;
}

.page-intake .field-error {
  margin: 6px 0 12px;
}

.intake-group {
  margin: 0 0 18px;
  padding: 14px 16px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
}

.intake-group legend {
  padding: 0 6px;
}

.check-row,
.intake-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 15px;
}

.check-row input,
.intake-choice input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.intake-choice {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface-3);
}

.intake-choice-title {
  display: block;
  font-weight: 600;
}

.intake-choice-line {
  display: block;
  margin-top: 3px;
  color: var(--ink-2);
  font-size: 13px;
}

.intake-fold {
  margin: 0 0 14px;
}

.intake-fold summary {
  margin-bottom: 10px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.intake-summary {
  margin: 0;
}

.intake-summary div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-divider);
  font-size: 14px;
}

.intake-summary dt {
  color: var(--ink-2);
}

.intake-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* --- Acting on a request from its own page (R-018) ------------------------------------------- */

.page-act {
  max-width: 760px;
}

.page-act .field-error {
  margin: 6px 0 12px;
}

.act-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
}

.act-label {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}

.act-not-yet {
  margin: 10px 0 0;
  font-size: 13px;
}

.act-offices {
  margin: 12px 0 0;
}

.act-office-list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.act-office-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--border-divider);
  font-size: 14px;
}

/* Where each office stands (R-022): its latest answer, beside its name. */
.act-office-name {
  font-weight: 500;
}

.act-office-words {
  flex: 1 1 auto;
  color: var(--ink-2);
  font-size: 13px;
}

.act-choices {
  margin: 0 0 18px;
  padding: 14px 16px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
}

.act-approve {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.act-approve input[type="password"] {
  padding: 6px 10px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-control);
  font: inherit;
}

.field input[type="date"],
.field input[type="time"] {
  width: auto;
}

/* The entry a button just made or changed: the page lands on it (#item-n, #entry-n). */
.story-entry:target {
  margin: 0 -10px;
  padding: 10px;
  border-radius: var(--radius-control);
  background: var(--accent-tint);
}

/* --- Back to the design (R-068) ----------------------------------------------------------- */

/* A page heading with its one button on the right. */
.page-header--with-action {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.page-action {
  margin: 0;
}

/* A tag that only points: never a colour that says "urgent". */
.chip-quiet {
  background: var(--surface-2);
  color: var(--ink-3);
  font-weight: 500;
}

/* The story: a finished step folds to its line, the open step is open, the rest is one line. */
.story-fold > summary {
  cursor: pointer;
}

.story-fold > summary::marker {
  color: var(--ink-3);
}

.story-count {
  font-size: 13px;
  font-weight: 400;
}

.story-step-title--quiet {
  margin: 0;
  color: var(--ink-3);
}

.story-next {
  margin: 4px 0 0;
}

.story-next strong {
  font-size: 15px;
}

/* The "Next" box in the prototype's grammar (ADR-0042): one sentence, one grey line of citations,
   "Why?", and at most one primary button, one secondary and one text link. */
.step-sentence {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
}

.cite-line {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 12.5px;
}

.why {
  margin: 6px 0 0;
}

.why > summary {
  display: inline;
  cursor: pointer;
  color: var(--accent);
  font-size: 13px;
}

.why > p {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 14px;
}

.step-presses {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 14px 0 0;
}

.step-presses .inline-form {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.chip-status {
  background: var(--surface);
  color: var(--ink-2);
  font-weight: 500;
}

/* The prototype's By hand / System switch, right of the open step's name (R-031, ADR-0047): the
   word in force is dark and bold; the track is grey with the knob left for By hand, blue with it
   right for System. */
.step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
}

.step-head .story-step-title {
  margin-bottom: 0;
}

.step-switch-form {
  margin: 0;
}

.step-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.step-switch-track {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
  border-radius: 10px;
  background: var(--accent);
}

.step-switch-knob {
  position: absolute;
  top: 2px;
  left: 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.step-switch-system,
.step-switch.is-by-hand .step-switch-hand {
  color: var(--ink);
  font-weight: 600;
}

.step-switch.is-by-hand .step-switch-system {
  color: var(--ink-2);
  font-weight: 400;
}

.step-switch.is-by-hand .step-switch-track {
  background: var(--switch-off);
}

.step-switch.is-by-hand .step-switch-knob {
  left: 2px;
}

.step-switch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.step-switch-words {
  margin: 0;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
}

.row-handling {
  align-self: flex-start;
  margin-top: 2px;
}

/* New request, page two (R-031): the prototype's white note where the client's triggers match. */
.intake-sensitive {
  margin: 4px 0 0;
  padding: 14px 18px;
  border-radius: var(--radius-card);
  background: var(--surface-2);
  font-size: 13.5px;
  line-height: 1.5;
}

/* A story line's details and its own buttons, one click away (ADR-0042). */
.entry-more > summary,
.offices-change > summary {
  cursor: pointer;
  color: var(--ink-2);
  font-size: 13px;
}

.entry-more[open] > summary,
.offices-change[open] > summary {
  margin-bottom: 6px;
}

.offices-change {
  margin: 8px 0 0;
}

/* A finished step (R-078): one ✓ line saying what happened, its date beside it, its lines beneath. */
.story-done {
  margin: 0;
}

.story-date {
  margin-left: auto;
  font-size: 13px;
  font-weight: 400;
}

/* The records under their step, and the drop box opened in place (R-078). */
.records-list,
.records-copies-part {
  margin: 10px 0 0;
}

.records-summary {
  margin: 0 0 6px;
  font-size: 13px;
}

.records-drop > summary {
  display: inline-flex;
  list-style: none;
  cursor: pointer;
}

.records-drop > summary::-webkit-details-marker {
  display: none;
}

.records-drop[open] > summary {
  margin-bottom: 10px;
}

.step-presses .records-drop-part:has(> .records-drop[open]) {
  flex: 1 0 100%;
  order: 9;
}

/* One act's short page: one sentence, the rest behind a fold. */
.act-sentence {
  font-size: 15px;
}

.act-why > summary {
  cursor: pointer;
  color: var(--ink-2);
  font-size: 13px;
}

.act-why > p {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 14px;
}

/* Chips to tap instead of a drop-down list. */
.chip-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 0;
}

/* `.field .chip-radio` too: `.field input` (full width) must not undo the hiding, or the hidden
   buttons stretch the page sideways. */
.chip-radio,
.field .chip-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.chip-choice {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-pill);
  background: var(--surface);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.chip-radio:checked + .chip-choice {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.chip-radio:focus-visible + .chip-choice {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* New request, page one: one card in two columns. */
.intake-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 28px;
  margin-top: 8px;
}

.intake-column {
  min-width: 0;
}

/* The postmark questions belong to United States mail alone: one rule, no script. The block
   shows itself whenever it holds an answer or a refusal (`is-shown`), so nothing is ever refused
   out of sight -- and so the § 552.301(a-1) path is still reachable where `:has()` is not. */
.intake-mail-only {
  display: none;
}

.intake-receipt:has(#nr-delivery-us_mail:checked) .intake-mail-only,
.intake-mail-only.is-shown {
  display: block;
}

/* Page two: the date the Act sets, as soon as a page with no script can show it. */
.intake-clock {
  margin-bottom: 16px;
  padding: 16px 20px;
  border-top: 3px solid var(--accent);
}

.intake-clock-words {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

/* --- The letters (R-019, ADR-0027): a letter on paper, as 04-screens.md draws the letter sheet. */
.letter-paper {
  max-width: 720px;
  margin: 14px 0;
  padding: 28px 32px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  font-family: var(--font-paper);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}

.letter-paper p {
  margin: 0 0 12px;
}

.letter-firm {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-divider);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.letter-typed {
  padding: 6px 10px;
  border-left: 3px solid var(--accent);
  background: var(--accent-tint);
}

.letter-typed-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--ink-2);
}

/* R-030 (ADR-0046): a typed paragraph the AI drafted first -- amber, as every AI proposal is. */
.letter-typed--ai {
  border-left-color: var(--amber);
  background: var(--amber-tint);
}

.letter-typed--ai .letter-typed-label {
  color: var(--amber);
  font-weight: 600;
}

/* R-086 (ADR-0048): an exception's heading within the written comments. */
.letter-heading {
  margin-top: 18px;
  font-weight: 600;
}

.letter-sign {
  margin-top: 18px;
}

.letter-small {
  font-size: 13px;
  color: var(--ink-2);
}

/* R-073 (ADR-0039): an Attorney General form's "How to appeal" page follows the letter on the same
   paper, below a line that marks the next page. */
.letter-annex {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px dashed var(--border);
}

.letter-annex-title {
  margin-bottom: 16px;
}

.letter-sheet {
  position: relative;
}

.letter-band {
  display: inline-block;
  margin: 0;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--danger-tint);
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
}

.letter-sheet.is-not-approved .letter-paper {
  border-style: dashed;
}

.letter-reminders {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 14px;
}

.letter-copy {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 13px;
}

.act-letter-link {
  font-size: 13.5px;
}

/* R-021 (ADR-0032), from R-081 the prototype's sheet (ADR-0042 amended): the letter's paper on the
   review's grey desk, the text to copy beneath it, and the review's column on the right --
   "‹ Back to request", the request's card, where it stands, "Record that it went out". */
.letter-desk .letter-sheet {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.letter-desk .letter-paper {
  width: 100%;
  margin: 0 auto 16px;
}

.letter-desk .letter-band {
  align-self: flex-start;
  margin: 0 0 10px;
}

/* R-093: "Copy" under the paper -- one button for the message or the letter, a small one for the
   subject (and an email's addresses), a line saying it was copied; the boxes themselves folded
   under "Show the text to copy". */
.letter-copy-bar {
  max-width: 720px;
  margin: 0 auto;
}

.letter-copy-presses {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.letter-copy-said {
  font-size: 13px;
  color: var(--done);
}

.letter-copy-hint {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--ink-2);
}

.letter-copy-text {
  margin: 10px 0 0;
}

.letter-copy-text > summary {
  margin-bottom: 10px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* The box `copy.js` selects for a moment where the browser keeps its clipboard from the page. */
.copy-scratch {
  position: fixed;
  top: 0;
  left: -9999px;
  opacity: 0;
}

.attach-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

.attach-list li + li {
  margin-top: 6px;
}

.letter-copy-line {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 13px;
}

/* An email to the client's offices (R-081): To and Subject above the message, as the prototype's
   artifact sheet shows an email. */
.email-head {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-divider);
  font-family: var(--font-ui);
  font-size: 13.5px;
}

.email-head dt {
  color: var(--ink-2);
}

.email-head dd {
  margin: 0;
}

/* A sheet's title and its way back (the prototype: 20px / 600; 13.5px / 500). */
.sheet-title {
  font-size: 20px;
  letter-spacing: -0.01em;
}

.sheet-back {
  margin-bottom: 0;
  font-size: 13.5px;
  font-weight: 500;
}

/* Step 5's "Send letter + redactions to the attorney" (R-081): its button stands in the row with
   the step's others, and its choices under "More" take a line of their own beneath them. */
.step-presses .review-send {
  display: contents;
}

.step-presses .review-send > details {
  flex: 1 0 100%;
  order: 9;
}

.sent-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.sent-list li {
  margin: 0 0 6px;
}

.sent-mark {
  color: var(--done);
  font-weight: 700;
}

.sent-held {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface-3);
}

/* R-021: the letters still to send, as the foot of the same card, under the line's words. */
.today-item.has-send .today-line {
  border-radius: var(--radius-card-sm) var(--radius-card-sm) 0 0;
}

.today-send {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 8px 18px 12px 254px;
  border-top: 1px solid var(--border-divider);
  border-radius: 0 0 var(--radius-card-sm) var(--radius-card-sm);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  font-size: 13.5px;
  font-weight: 600;
}

@media (max-width: 900px) {
  .today-send {
    padding-left: 18px;
  }
}

/* The cost worksheet (R-020): the prototype's sheet. Only the chosen kind's boxes show -- one rule,
   no script -- and a kind chosen on the server (`is-shown`) shows where `:has()` is not supported,
   so nothing is ever refused out of sight. The two confirmations show for every kind but body-worn
   camera footage, which has no staff time. */
.ws-card {
  padding: 26px 28px;
}

.ws-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}

.ws-source {
  margin: 0;
  color: var(--ink-2);
  font-size: 12.5px;
}

.ws-section {
  display: none;
  margin-top: 14px;
}

.ws-section.is-shown,
.worksheet:has(#ws-kind-copies:checked) .ws-section-copies,
.worksheet:has(#ws-kind-paper_inspection:checked) .ws-section-paper_inspection,
.worksheet:has(#ws-kind-electronic_inspection:checked) .ws-section-electronic_inspection,
.worksheet:has(#ws-kind-body_camera:checked) .ws-section-body_camera,
.ws-section-checks {
  display: block;
}

.worksheet:has(#ws-kind-body_camera:checked) .ws-section-checks {
  display: none;
}

/* Where `:has()` works, the chips alone decide: the server's `is-shown` is only the fallback, so
   tapping another kind never leaves the last one's boxes on screen (R-020 code review). */
@supports selector(:has(a)) {
  .ws-section.is-shown {
    display: none;
  }
}

.ws-group {
  margin: 18px 0 6px;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ws-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 14px;
}

.ws-wide {
  grid-column: 1 / -1;
}

.ws-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ws-number {
  width: 100%;
  max-width: 9em;
  padding: 11px 12px;
  border: 1px solid var(--border-input);
  border-radius: 10px;
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ws-unit {
  color: var(--ink-2);
  font-size: 14px;
}

.ws-recording {
  margin: 10px 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.ws-lines {
  margin-top: 22px;
}

.ws-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-divider);
  font-size: 14.5px;
}

.ws-line-label {
  font-weight: 600;
}

.ws-rule {
  display: block;
  color: var(--ink-2);
  font-size: 12.5px;
}

.ws-amount {
  flex: none;
  text-align: right;
}

.ws-total {
  border-bottom: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
}

.ws-note {
  margin: 14px 0 0;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 13.5px;
}

.ws-note p {
  margin: 0 0 6px;
}

.ws-note p:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .ws-card {
    padding: 18px 16px;
  }

  .ws-line {
    flex-direction: column;
    gap: 2px;
  }

  .ws-amount {
    text-align: left;
  }
}

/* R-070: a request's records -- the list of documents and the place to drop them in. The drop
 * zone is the design's (04-screens.md: "Drop the records here or choose files"); the list is its
 * file rows: the name on the left, the pages on the right. */
.records-summary {
  margin: 2px 0 0;
  color: var(--ink-2);
  font-size: 13.5px;
}

.doc-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.doc-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 13.5px;
}

.doc-row--inside {
  margin-left: 26px;
}

.doc-glyph {
  flex: none;
  width: 11px;
  height: 14px;
  margin-top: 3px;
  border-radius: 2px;
  background: var(--ink-3);
}

.doc-glyph--pdf {
  background: #d9262c;
}

.doc-glyph--email {
  width: 14px;
  height: 10px;
  margin-top: 5px;
  border-radius: 2px;
  background: var(--accent);
}

.doc-main {
  flex: 1;
  min-width: 0;
}

.doc-name {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.doc-name:hover {
  color: var(--accent);
}

.doc-meta {
  margin: 2px 0 0;
  color: var(--ink-2);
  font-size: 12.5px;
}

.doc-pages {
  flex: none;
  color: var(--ink-2);
  white-space: nowrap;
}

.doc-row--damaged {
  background: var(--danger-tint);
}

.doc-refused {
  margin: 4px 0 0;
  color: var(--danger);
  font-size: 12.5px;
}

/* R-024 (ADR-0033): where a document's words stand, and the page of the words read. */
.doc-words {
  margin: 3px 0 0;
  color: var(--ink-2);
  font-size: 12.5px;
}

.doc-words--read {
  color: var(--done);
}

.doc-words--partly {
  color: var(--amber);
}

.doc-words a {
  color: var(--accent);
  font-weight: 500;
}

.words-screens {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 14px;
  color: var(--ink-2);
  font-size: 13.5px;
}

.words-screens a {
  color: var(--accent);
}

.words-page {
  margin: 0 0 14px;
}

.words-page-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
}

.words-page-meta {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 400;
}

.words-page-meta--not-read {
  color: var(--amber);
}

.words-text {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.words-line {
  margin: 0;
}

.word-unsure {
  text-decoration: underline dotted var(--urgent);
  text-underline-offset: 3px;
}

/* The drop zone: the file box itself covers it, so dropping files onto it needs no script; the
 * small script only lists what was chosen and lights the zone while something is dragged over. */
.drop-form {
  margin: 16px 0 0;
}

.drop-zone {
  position: relative;
  padding: 22px 18px;
  border: 2px dashed var(--accent);
  border-radius: 12px;
  background: #f5fbfe;
  text-align: center;
}

.drop-zone.is-over,
.drop-zone:focus-within {
  background: var(--accent-tint);
}

.drop-zone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}

.drop-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.drop-title span {
  color: var(--accent);
}

.drop-note {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 12.5px;
}

.drop-chosen {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.drop-chosen li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--surface);
  font-size: 13.5px;
}

.drop-chosen li span:last-child {
  flex: none;
  color: var(--ink-2);
}

.drop-chosen:empty {
  display: none;
}

.drop-options {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 24px;
  margin: 14px 0 0;
}

.drop-options .field-label {
  margin: 0;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
}

/* R-095: "Is that everything from this office?" reads "for this request" once "Not one office"
   is chosen; the day they came in waits under "More". */
.drop-everything .everything-request,
.records-drop:has(#records-office-none:checked) .everything-office {
  display: none;
}

.records-drop:has(#records-office-none:checked) .everything-request {
  display: inline;
}

.drop-more {
  margin: 12px 0 0;
}

.drop-more > summary {
  margin-bottom: 10px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.drop-more .field {
  max-width: 220px;
}

.bare-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.records-said {
  margin: 12px 0 0;
}

/* An email's own page (R-070): its words as plain text, kept as they were written. */
.email-words {
  max-height: 40em;
  overflow-y: auto;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-3);
  font-size: 14.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.email-inside {
  margin: 18px 0 0 0;
  padding: 0 0 0 16px;
  border-left: 3px solid var(--border);
}

/* The Activity page's warning about documents PIARit will not use (R-070). */
.damaged-list {
  margin: 8px 0 0;
  padding-left: 20px;
}

/* The review screen (R-025, ADR-0034; design 04 "Review", 07 "Redaction segments", "Passage
 * card"): the record on the left on a grey desk, a sticky column of cards on the right. Nothing
 * here is ever a black bar: those exist only in the copies made after the attorney approves. */
.page-review {
  max-width: 1400px;
}

.review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: 18px;
  align-items: start;
}

@media (max-width: 1000px) {
  .review-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.review-paper {
  background: #c9c9ce;
  border-radius: var(--radius-card);
  padding: 12px 18px 20px;
  min-width: 0;
}

.review-viewer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: #3a3a3c;
  padding: 0 4px 10px;
}

.review-file {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-pager {
  white-space: nowrap;
}

.review-pager a {
  display: inline-block;
  padding: 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.review-page-note {
  margin: 0 4px 10px;
  font-size: 12.5px;
  color: #3a3a3c;
}

.review-sheet {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 14px 36px rgba(0, 0, 0, 0.2);
  line-height: 0;
}

.review-picture {
  display: block;
  width: 100%;
  height: auto;
  /* A photo is shown as it is stored, as the reader read it and a redacted copy will draw it:
     never turned by a tag inside it, or a box drawn on it would land elsewhere (R-025 review). */
  image-orientation: none;
  user-select: none;
  -webkit-user-drag: none;
}

.review-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

.review-word {
  fill: transparent;
  pointer-events: all;
  cursor: text;
}

.review-word.is-selected {
  fill: rgba(21, 131, 184, 0.28);
}

.review-mark {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.5px;
  stroke-dasharray: 5 3;
  cursor: pointer;
}

.review-mark--undecided {
  fill: rgba(21, 131, 184, 0.1);
  stroke: var(--accent);
}

/* R-029: the AI's proposal, still undecided -- the prototype's amber dashes. */
.review-mark--proposed {
  fill: rgba(217, 118, 11, 0.12);
  stroke: var(--urgent);
}

.review-mark--redact {
  fill: rgba(215, 0, 21, 0.1);
  stroke: var(--danger);
}

.review-mark--keep {
  fill: transparent;
  stroke: var(--ink-3);
  stroke-dasharray: none;
  stroke-width: 1px;
}

/* A mark's number beside its outline, as its card is numbered. The picture is stretched to the
   page's shape, so review.js widens the figures back to their own shape once the page is shown. */
.review-mark-number {
  font-family: var(--font-ui);
  font-size: 230px;
  font-weight: 700;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
}

.review-mark-number--undecided {
  fill: var(--accent);
}

.review-mark-number--proposed {
  fill: var(--urgent);
}

.review-mark-number--redact {
  fill: var(--danger);
}

.review-mark-number--keep {
  fill: var(--ink-3);
}

.review-drawing {
  display: none;
  /* A box already drawn never stands between the pointer and the words under it. */
  pointer-events: none;
  fill: rgba(21, 131, 184, 0.12);
  stroke: var(--accent);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

.review-drawing.is-drawing {
  display: inline;
}

/* An email, shown as text on the sheet (the design's paper: Georgia, generous leading). */
.review-sheet--text,
.review-sheet--none {
  line-height: 1.65;
  padding: 8% 9% 7%;
  min-height: 420px;
}

.review-email {
  font-family: var(--font-paper);
  font-size: 15px;
  color: #111;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.review-text-mark {
  color: inherit;
  border-radius: 3px;
  padding: 1px 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.review-text-mark--undecided {
  background: #f5fbfe;
  outline: 1.5px dashed var(--accent);
}

.review-text-mark--proposed {
  background: #fffbe8;
  outline: 1.5px dashed var(--urgent);
}

.review-text-mark--redact {
  background: #fff6f5;
  outline: 1.5px dashed var(--danger);
}

.review-text-mark--keep {
  box-shadow: inset 0 -2px 0 #c7c7cc;
}

/* The right-hand column. */
.review-rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 2px 2px 8px;
}

.review-card {
  border-radius: var(--radius-card-sm);
  padding: 14px 16px;
}

.review-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.review-number {
  font-size: 12px;
  color: var(--ink-2);
}

/* "Decide all 6 to continue": shown, but plainly not pressable (the design's .45). */
.review-rail .btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.review-title {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.review-heading {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.review-heading--small {
  margin-top: 14px;
  font-size: 13px;
}

.review-progress {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.review-sub,
.review-legend {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
}

.review-legend {
  margin-top: 10px;
  font-size: 11.5px;
}

.review-label {
  margin: 4px 4px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.review-docs {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.review-doc {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  border-radius: 11px;
  padding: 8px 10px 8px 8px;
  color: var(--ink);
  min-width: 0;
}

.review-doc.is-current {
  border-color: var(--accent);
  background: var(--accent-tint);
}

.review-doc.is-unused {
  opacity: 0.6;
}

.review-doc-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.review-doc-name {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-doc-state {
  font-size: 11.5px;
  color: var(--ink-2);
}

.review-doc-state.is-done {
  color: var(--done);
}

/* R-096: marking by hand in a bar just above the page being read (departure
   review-marking-beside-the-page): the three presses in one row, a line of help under them. */
.review-marking {
  max-width: 820px;
  margin: 0 auto 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card-sm);
  background: var(--surface);
}

.review-marking-presses {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.review-marking-presses form {
  margin: 0;
}

/* The words selected change on every move of a drag: they take a fixed share of the row and are
   cut short, so the bar never grows and the page under it never moves (R-096 code review). */
.review-mark-form {
  display: flex;
  flex: 1 1 14rem;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.review-selected {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.review-marking-hint {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
}

.review-redact-selection {
  border: 1px solid var(--accent);
  background: var(--accent-tint);
  color: var(--teal-deep);
  font-weight: 600;
}

.review-redact-selection:disabled {
  opacity: 0.5;
  cursor: default;
}

.review-mark-card {
  border-radius: var(--radius-card-sm);
  padding: 14px 16px;
}

.review-mark-card:target {
  box-shadow: 0 0 0 2px var(--accent);
}

.review-mark-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}

.review-mark-tag {
  font-size: 12px;
  color: var(--teal-deep);
  font-weight: 600;
}

/* R-029: a card the AI proposed -- its tag, a "Low confidence" chip, its exception's list tinted
   while undecided, its reason and "Changed from" in grey. */
.review-mark-card--proposed {
  background: #fffdf5;
}

.review-mark-tag--ai {
  color: var(--ink-2);
  font-weight: 400;
}

.chip--low {
  margin-left: 4px;
  padding: 1px 8px;
  background: var(--amber-tint);
  color: #7a5a00;
  font-size: 11.5px;
}

.review-cite--ai {
  background: #fffbe8;
}

.review-why,
.review-changed {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
}

.review-changed {
  color: var(--urgent);
  font-weight: 600;
}

.review-not-found {
  margin: 6px 0 10px;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.45;
}

.review-excerpt {
  margin: 6px 0 0;
  font-family: var(--font-paper);
  font-style: italic;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.review-excerpt--area {
  font-family: var(--font-ui);
  font-style: normal;
  color: var(--ink-2);
  font-size: 13px;
}

.review-decide {
  margin-top: 10px;
}

.review-cite-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.review-cite {
  width: 100%;
  margin-top: 6px;
  border: 1px solid var(--border-input);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  background: var(--surface);
  color: var(--ink);
}

.review-choices {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.review-choices .btn {
  flex: 1;
}

.review-redact {
  border: 1px solid var(--danger);
  background: var(--surface);
  color: var(--danger);
}

.review-redact.is-chosen {
  background: var(--danger);
  color: #fff;
}

.review-keep {
  border: 1px solid var(--done);
  background: var(--surface);
  color: var(--done);
}

.review-keep.is-chosen {
  background: var(--done);
  color: #fff;
}

.review-remove {
  display: block;
  margin: 6px auto 0;
  font-size: 12.5px;
  color: var(--ink-2);
  text-decoration: underline;
}

.review-decided {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--ink-2);
}

.review-decided--open {
  color: var(--urgent);
}

.review-rests {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
}

.review-item-state {
  margin: 10px 0;
  font-size: 12.5px;
  line-height: 1.45;
}

.review-left {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--ink-2);
}

.review-approve {
  margin-top: 12px;
}

.review-needs {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.45;
}

.review-needs li + li {
  margin-top: 4px;
}

.review-needs .is-warning {
  color: var(--danger);
}

/* The Production copy screen (R-026, ADR-0037): the review's frame, with the copies' own list. */
.copies-said {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
}

.copies-why {
  color: var(--danger);
  white-space: normal;
}

.copies-burned {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.copies-burned li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  line-height: 1.4;
}

.copies-burned-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.copies-burned-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.copies-burned-cites,
.copies-burned-count {
  font-size: 12px;
  color: var(--ink-2);
}

.copies-burned-count {
  flex: none;
  font-size: 12.5px;
}

.records-copies {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ink-2);
}

.records-copies.is-warning,
.letter-attach .is-warning {
  color: var(--danger);
}

/* R-080, Today as the prototype draws it: a panel's count on the right of its title, and the
   "With the attorney" and "Waiting on others" lists as two compact panels side by side. */
.panel-count {
  float: right;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-2);
}

.today-compact-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.today-compact-title {
  margin-bottom: 8px;
}

.today-group--attorney .today-compact-title {
  color: var(--attorney);
}

.today-compact-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.today-compact .today-compact-line {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--ink);
  font-size: 13.5px;
  text-decoration: none;
}

.today-compact .today-item {
  margin: 0;
}

.today-compact-lead .today-urgent,
.today-compact-lead .today-tags {
  display: block;
  margin-top: 2px;
}

.today-compact-line:hover .today-compact-lead {
  text-decoration: underline;
}

.today-open {
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* R-083, Today as the prototype draws it: five numbers, each with a grey line and its colour on
   top, and a third panel of all requests to date. */
.today-tile-sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
}

.today-tile--due {
  border-top-color: var(--danger);
}

.today-tile--due .today-tile-count {
  color: var(--danger);
}

.today-tile--none {
  border-top-color: var(--ink-3);
}

.today-tile--none .today-tile-count {
  color: var(--ink-3);
}

.today-tile--soon {
  border-top-color: var(--urgent);
}

.today-tile--soon .today-tile-count {
  color: var(--urgent);
}

.today-tile--attorney {
  border-top-color: var(--attorney);
}

.today-tile--attorney .today-tile-count {
  color: var(--attorney);
}

.today-tile--others {
  border-top-color: var(--done);
}

.today-tile--others .today-tile-count {
  color: var(--done);
}

.to-date {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 12px 0 0;
}

.to-date div {
  display: flex;
  flex-direction: column-reverse;
}

.to-date dt {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-2);
}

.to-date dd {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.to-date dd .row-sub {
  font-weight: 400;
}

/* R-109: closed requests that still owe money, under "All requests to date". */
.panel-subtitle {
  margin: 16px 0 6px;
  font-size: 13px;
  font-weight: 600;
}

.still-owed {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}

.still-owed li + li {
  margin-top: 4px;
}


/* R-083, New request as the prototype draws it: where you are of the three pages, boxes two by
   two, a "More" fold for the rarer ones, and Back or Cancel to the left of the one main button. */
.intake-header .intake-steps {
  margin: 0 0 8px;
}

.intake-steps li + li::before {
  content: "›";
  margin-right: 12px;
  color: var(--ink-3);
}

.intake-steps .is-done,
.intake-steps .is-current {
  color: var(--ink);
}

.intake-steps li:not(.is-done):not(.is-current) {
  color: var(--ink-3);
}

.intake-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
  /* R-092: the two boxes line up even where only one has a line of help above it. */
  align-items: end;
}

/* R-028: the prototype's "Suggested · edit if wrong" box round the description and the type. */
.suggested {
  margin: 4px 0 14px;
  padding: 16px 18px 4px;
  border-radius: 12px;
  background: var(--surface-2);
}

.suggested-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 10px;
}

.suggested-label {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.suggested-by,
.suggested-note {
  color: var(--ink-2);
  font-size: 12.5px;
}

.suggested-note {
  margin: 0 0 10px;
}

.page-intake .more {
  margin: 4px 0 12px;
}

.page-intake .more > summary {
  margin-bottom: 10px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.intake-unsure {
  padding-top: 14px;
  padding-bottom: 6px;
}

.intake-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: 4px;
}

/* R-088: page two's question, "Go ahead" beside "Go on without the AI". */
.intake-question-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 8px 0 0;
}

.intake-actions-note {
  flex: 1 1 200px;
  margin: 0;
  font-size: 13px;
  text-align: right;
}

.intake-original .drop-zone {
  padding: 14px 16px;
}

@media (max-width: 640px) {
  .intake-pair {
    grid-template-columns: 1fr;
  }
}

/* R-083: on the form, a row of choices is a label and its chips, with no box drawn round it. */
.page-intake fieldset.field {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

.page-intake fieldset.field > legend {
  margin-bottom: 6px;
  padding: 0;
}

/* --- Measuring the AI (R-089, ADR-0051) --------------------------------------------------------- */
.page-measuring .ask-first {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--amber-tint);
}

.page-measuring-run .inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.page-measuring-run .button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.measure-table td {
  min-width: 14em;
  vertical-align: top;
}

.measure-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.measure-line {
  margin: 0 0 6px;
  overflow-wrap: anywhere;
}

.measure-line--right .measure-mark {
  color: #11734c;
  font-weight: 700;
}

.measure-line--wrong {
  color: var(--danger);
}

.measure-line--wrong .measure-mark {
  font-weight: 700;
}

.measure-case .request-words {
  margin: 0 0 12px;
}

.measure-record {
  margin: 0 0 12px;
}

.measure-page {
  margin: 0 0 10px;
  padding-left: 2.2em;
  font-size: 13px;
}

/* R-097: before an approval, what the attorney must still open -- each an "Open" press -- and the
   Approve button greyed until everything is opened. */
.going-through {
  gap: 6px;
}

.going-through-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
}

.going-through-list li + li {
  margin-top: 2px;
}

.going-through .btn:disabled,
.approve-actions .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* R-099: the page changed since it was opened, and reloading would lose something typed. */
.live-changed {
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid #f0d48a;
  border-radius: 10px;
  background: var(--amber-tint);
  color: var(--ink);
  font-size: 14px;
}

/* R-098: the Attorney General's exemption, above a client's charges. */
.setup-exemption {
  margin-bottom: 16px;
}

.setup-exemption .check-row {
  flex: 1 1 100%;
  margin-bottom: 0;
}

/* R-084: "the client already sent us the responsive records" -- the place to drop them and the
   question show once the box is ticked, with no script. */
.records-sent-hint {
  margin: -6px 0 12px 28px;
}

.records-sent-more {
  display: none;
  margin: 0 0 12px 28px;
}

form:has(#nr-records-sent:checked) .records-sent-more {
  display: block;
}

.records-sent-more .bare-fieldset {
  margin-top: 12px;
}

/* R-085: documents taken out of the records, listed apart and struck through; the forms that take
   one out or put it back, folded on "Record something else"; Remove beside a file before it is
   saved. */
.records-aside {
  margin: 12px 0 0;
}

.records-aside .doc-name {
  text-decoration: line-through;
}

.aside-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0 0;
}

.aside-form select {
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
}

.drop-remove {
  margin-left: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}

/* R-085 code review: above the file box that covers the drop zone, so a click reaches Remove. */
.drop-remove {
  position: relative;
  z-index: 1;
}

/* R-052: handing one request's sealed history to an outsider. */
.hand-over {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 16px;
}

.sealed-entries {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sealed-entry {
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.sealed-text {
  margin: 4px 0 8px;
  padding: 8px 10px;
  border-radius: var(--radius-control);
  background: var(--surface-2);
  font-size: 12px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* R-075: AI costs -- the client and month side by side, figures lined up on the right. */
.ai-costs-choose {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  margin-bottom: 16px;
}

.ai-costs-choose .field {
  margin-bottom: 0;
  min-width: 220px;
}


.ai-costs-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ai-costs-table tfoot th,
.ai-costs-table tfoot td {
  font-weight: 600;
}

/* Printing the copy handed over, or a month's AI costs (R-075), leaves out the side menu and the
   choices and links: these pages only. */
@media print {
  .shell:has(.page-handed-over) .sidebar,
  .page-handed-over .back-link,
  .page-handed-over .no-print,
  .shell:has(.page-ai-costs) .sidebar,
  .shell:has(.page-ai-costs) .alert,
  .page-ai-costs .no-print,
  .page-ai-costs .cite-line {
    display: none;
  }

  .sealed-entry {
    break-inside: avoid;
  }
}

/* ============================================================================================== */
/* --- Draft v5 (R-113, ADR-0057): the shared vocabulary and the A·B·C workspace ---------------- */
/* The look of docs/design_handoff_piarit_v5/04-components-and-tokens.md, which wins over every   */
/* earlier rule above (Arnold, 3 November 2026). Names stay PIARit's own: v5's "ink-3" (#6e6e73) */
/* is `--ink-2` here and its "faint" (#aeaeb2) is `--ink-3`.                                      */
/* ============================================================================================== */

:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica,
    sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --ink-soft: #3a3a3c;
  --faint-2: #8e8e93;
  --line: #f0f0f2;
  --line-2: #e5e5ea;
  --ring: #d2d2d7;
  --track: #ececf0;
  --accent-tint-2: #eaf5fb;
  --accent-edge: #cfe6f2;
  --accent-row: #f4f9fc;
  --attorney-ink: #5b3fd6;
  --attorney-button: linear-gradient(180deg, #8a6dff, #6f4de6);
  --done-edge: #b9dcc9;
  --done-ink: #3b5f4f;
  --warn: #d9760b;
  --warn-tint: #fffaf0;
  --warn-tint-2: #fff8e6;
  --warn-edge: #f0e0b8;
  --warn-ink: #8a4b00;
  --warn-ink-2: #7a5600;
  --warn-foot: #fbf7ee;
  --urgent-edge: #f5c2bd;
  --urgent-ink: #b00012;
  --desk: #e8e8ed;

  /* File kinds (04 §1) and mark colours */
  --kind-mail: #1583b8;
  --kind-pdf: #d70015;
  --kind-doc: #2b5fb4;
  --kind-xls: #1a7f4b;
  --kind-img: #8a6d3b;
  --kind-ltr: #0f5262;
  --kind-req: #8e8e93;
  --mark-ai: #b8860b;
  --mark-ai-tint: #fff8e6;
  --mark-person: #1583b8;
  --mark-person-tint: #eaf3fa;
  --mark-redact: #d70015;
  --mark-redact-tint: #fff1f0;
  --mark-keep: #1a9e6a;
  --mark-keep-tint: #e6f6ee;

  --radius-card-a: 14px;
  --shadow-paper: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 22px rgba(0, 0, 0, 0.07);
}

/* --- 1 · File icon: a page with a folded corner and a coloured band ----------------------------- */
.ficon {
  flex: none;
  width: 22px;
  height: 26px;
  vertical-align: middle;
}

.ficon--sm {
  width: 18px;
  height: 21px;
}

.ficon--lg {
  width: 44px;
  height: 52px;
}

.ficon-page {
  fill: #fff;
  stroke: #c7c7cc;
}

.ficon-fold {
  fill: none;
  stroke: #c7c7cc;
}

.ficon-band {
  fill: var(--kind-req);
}

.ficon-label {
  fill: #fff;
  font: 700 5.4px var(--font-ui);
}

.ficon--mail .ficon-band {
  fill: var(--kind-mail);
}

.ficon--pdf .ficon-band {
  fill: var(--kind-pdf);
}

.ficon--doc .ficon-band {
  fill: var(--kind-doc);
}

.ficon--xls .ficon-band {
  fill: var(--kind-xls);
}

.ficon--img .ficon-band {
  fill: var(--kind-img);
}

.ficon--ltr .ficon-band {
  fill: var(--kind-ltr);
}

/* --- 2 · The six-step rail (Requests list, Approve cards) --------------------------------------- */
.rail {
  min-width: 0;
}

.rail-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rail-step {
  min-width: 0;
}

.rail-bar {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--track);
}

.rail-mark {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin-top: 6px;
}

.rail-dot {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--ring);
  border-radius: 7px;
  background: #fff;
  color: #fff;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;
}

.rail-name {
  overflow: hidden;
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rail-step.is-done .rail-bar,
.rail-step.is-done .rail-dot {
  border-color: var(--done);
  background: var(--done);
}

.rail-step.is-done .rail-name {
  color: var(--ink);
}

.rail-step.is-current .rail-bar,
.rail-step.is-current .rail-dot {
  border-color: var(--accent);
  background: var(--accent);
}

.rail-step.is-current .rail-name {
  color: var(--ink);
  font-weight: 700;
}

.rail--attorney .rail-step.is-current .rail-bar,
.rail--attorney .rail-step.is-current .rail-dot {
  border-color: var(--attorney);
  background: var(--attorney);
}

.rail-line {
  margin: 5px 0 0;
  color: var(--ink-2);
  font-size: 12.5px;
}

.rail-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
  margin: 22px 0 0;
  padding: 0;
  color: var(--ink-2);
  font-size: 12.5px;
  list-style: none;
}

.rail-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rail-legend .rail-dot {
  width: 14px;
  height: 14px;
}

.rail-legend .is-done .rail-dot {
  border-color: var(--done);
  background: var(--done);
}

.rail-legend .is-paralegal .rail-dot {
  border-color: var(--accent);
  background: var(--accent);
}

.rail-legend .is-attorney .rail-dot {
  border-color: var(--attorney);
  background: var(--attorney);
}

/* --- 3 · Tag pills ------------------------------------------------------------------------------ */
.tag {
  display: inline-block;
  flex: none;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--line);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}

.tag--ai,
.tag--answered {
  background: var(--accent-tint);
  color: var(--accent);
}

.tag--attorney {
  background: var(--attorney-tint);
  color: var(--attorney-ink);
}

.tag--done {
  background: var(--done-tint);
  color: var(--done);
}

.tag--warn {
  background: var(--warn-tint-2);
  color: var(--warn-ink);
}

/* --- 4 · The workspace: column A, B and C (02) ------------------------------------------------- */
.content:has(> .workspace) {
  padding: 32px 36px;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(340px, 1fr);
  gap: 16px;
  align-items: start;
  margin: -14px -18px -20px;
}

.workspace--with-c {
  grid-template-columns: minmax(260px, 300px) minmax(340px, 1fr) minmax(300px, 340px);
}

.workspace--full {
  grid-template-columns: minmax(340px, 1fr);
}

.workspace--full.workspace--with-c {
  grid-template-columns: minmax(340px, 1fr) minmax(300px, 340px);
}

.workspace--full > .ws-a,
.shell:has(.workspace--full) > .sidebar {
  display: none;
}

.ws-a,
.ws-c,
.ws-b--viewer {
  position: sticky;
  top: 18px;
  display: grid;
  grid-auto-rows: max-content;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 10px;
  min-width: 0;
  height: calc(100vh - 36px);
  padding-bottom: 16px;
  overflow: auto;
}

.ws-b {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding-bottom: 40px;
}

.ws-b--viewer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 0;
  overflow: visible;
}

.ws-b--viewer > .viewer {
  flex: 1;
  min-height: 0;
}

@media (max-width: 1319px) {
  .workspace {
    grid-template-columns: minmax(220px, 260px) minmax(340px, 1fr);
  }

  .workspace--with-c {
    grid-template-columns: minmax(220px, 260px) minmax(340px, 1fr) minmax(280px, 320px);
  }

  .shell:has(.workspace) > .sidebar {
    display: none;
  }
}

@media (max-width: 1039px) {
  .workspace--with-c {
    grid-template-columns: minmax(340px, 1fr) minmax(280px, 320px);
  }

  .workspace--with-c > .ws-a {
    display: none;
  }
}

@media (max-width: 760px) {
  .workspace,
  .workspace--with-c,
  .workspace--full {
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
  }

  .ws-a,
  .ws-c,
  .ws-b--viewer {
    position: static;
    height: auto;
  }
}

/* The tiny label at the top of each column: a black square letter and a caps label. */
.col-label {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.col-letter {
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--ink);
  color: #fff;
}

.col-label--attorney .col-letter {
  background: var(--attorney);
}

.col-label .col-back {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.ws-back {
  margin: 0;
  font-size: 13.5px;
}

/* Column A's request card (02, "Column A"). */
.req-card {
  padding: 14px 16px;
  border-radius: var(--radius-card-a);
  background: var(--surface);
}

.req-card-id {
  margin: 0;
  color: var(--ink-2);
  font-size: 12px;
}

.req-card-id strong {
  color: var(--ink);
  font-weight: 600;
}

.req-card-title {
  margin: 5px 0 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.req-card-sub {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 12.5px;
}

.req-card-date {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin: 11px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.req-card-big {
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
}

.req-card-label {
  font-size: 12.5px;
  font-weight: 600;
}

.req-card-what {
  margin: 2px 0 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.4;
}

/* The urgency colour of a date, wherever it is drawn big (04 §4.13), by the tones
   `matters.register.date_reading` gives: ahead, soon, today, overdue, expected, quiet. */
.tone-ahead {
  color: var(--accent);
}

.tone-soon {
  color: var(--warn);
}

.tone-today,
.tone-overdue {
  color: var(--danger);
}

.tone-expected {
  color: var(--done);
}

.tone-attorney {
  color: var(--attorney);
}

.tone-quiet,
.tone-closed {
  color: var(--ink-2);
}

/* A one-line banner in column A (B5). */
.ws-banner {
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  font-size: 12.5px;
  line-height: 1.4;
}

.ws-banner p {
  margin: 0;
}

.ws-banner--amber {
  border-color: var(--warn-edge);
  background: var(--warn-tint);
}

.ws-banner--red {
  border-color: var(--urgent-edge);
  background: var(--danger-tint);
}

.ws-banner--green {
  border-color: var(--done-edge);
  background: var(--done-tint);
}

.ws-banner .why summary {
  display: inline;
  font-size: 12.5px;
}

.ws-banner .why p {
  margin-top: 5px;
  color: var(--ink-2);
  font-size: 12px;
}

.ws-banner-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.btn-tiny {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 3px 9px;
  border: 1px solid var(--ring);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font: 400 12px/1.4 var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
}

.btn-tiny:hover {
  text-decoration: none;
  background: var(--surface-2);
}

/* The Next box in column A: the sentence and its grey line, no button (06 §1, rule 1). */
.next-mini {
  padding: 12px 14px;
  border: 1px solid var(--accent-edge);
  border-radius: var(--radius-card-a);
  background: linear-gradient(180deg, var(--accent-tint-2), #f3f9fd);
}

.next-mini-label,
.next-caps {
  margin: 0;
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.next-mini-sentence {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-wrap: pretty;
}

.next-mini-cites {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 11.5px;
  line-height: 1.4;
}

/* --- 5 · Request Status, with sub-steps (04 §4.3) ----------------------------------------------- */
.status-card {
  overflow: hidden;
  border-radius: var(--radius-card-a);
  background: var(--surface);
}

.status-title {
  margin: 0;
  padding: 10px 12px 6px;
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.status-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.status-step {
  border-top: 1px solid var(--line);
}

.status-step.is-current {
  background: var(--accent-row);
}

.status-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  color: inherit;
}

a.status-row:hover {
  text-decoration: none;
  background: rgba(21, 131, 184, 0.05);
}

.status-step > details > summary {
  list-style: none;
  cursor: pointer;
}

.status-step > details > summary::-webkit-details-marker {
  display: none;
}

.status-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--ring);
  border-radius: 8px;
  background: #fff;
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
}

.status-step.is-done .status-dot {
  border-color: var(--done);
  background: var(--done);
}

.status-step.is-current .status-dot {
  border-color: var(--accent);
  background: var(--accent);
}

.status-step.is-attorney .status-dot {
  border-color: var(--attorney);
  background: var(--attorney);
}

.status-main {
  min-width: 0;
}

.status-name {
  display: block;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
}

.status-step.is-ahead .status-name {
  color: var(--ink-3);
}

.status-line {
  display: block;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 11.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.status-date {
  color: var(--ink-2);
  font-size: 11.5px;
  white-space: nowrap;
}

.status-chev {
  margin-left: 3px;
  color: var(--ink-3);
}

details[open] > summary .status-chev {
  display: inline-block;
  transform: rotate(90deg);
}

.substeps,
.status-items {
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
}

.substep,
.status-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 3px 12px 4px 38px;
  font-size: 12.5px;
  line-height: 1.35;
}

.substep-dot,
.status-item-dot {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  margin-top: 2px;
  border: 1.5px solid var(--ring);
  border-radius: 6px;
  background: #fff;
  color: #fff;
  font-size: 7.5px;
  font-weight: 700;
  line-height: 1;
}

.substep {
  color: var(--ink-3);
  font-weight: 500;
}

.substep.is-done {
  color: var(--ink);
}

.substep.is-done .substep-dot,
.status-item.is-done .status-item-dot {
  border-color: var(--done);
  background: var(--done);
}

.substep.is-current {
  color: var(--ink);
  font-weight: 700;
}

.substep.is-current .substep-dot {
  border-color: var(--accent);
  background: var(--accent);
}

.substep.is-skipped {
  color: var(--ink-3);
  text-decoration: line-through;
}

.status-item {
  align-items: center;
}

.status-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.status-docs-head {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  padding: 4px 12px 6px 38px;
  font-size: 12.5px;
  font-weight: 600;
}

.status-doc {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 7px 12px 7px 38px;
  border-top: 1px solid var(--line);
  color: var(--ink);
}

.status-doc--inside {
  padding-left: 54px;
}

a.status-doc:hover {
  text-decoration: none;
  background: #f5f9fc;
}

.status-doc.is-open {
  background: var(--accent-tint);
}

.status-doc-name {
  display: block;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.status-doc-state {
  display: block;
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.status-doc-pages {
  color: var(--faint-2);
  font-weight: 400;
}

.status-doc-tick {
  color: var(--attorney);
}

.state--todo {
  color: var(--ink-2);
}

.state--partway,
.state--unread {
  color: var(--warn);
}

.state--done {
  color: var(--done);
}

.ws-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
  padding: 0 4px;
  font-size: 12.5px;
}

/* "Where this is headed" as a pill (in A and on the Approve card, 05 §5). */
.headed-pill {
  display: flex;
  gap: 7px;
  align-items: center;
  margin: 9px 0 0;
  padding: 6px 9px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}

.headed-pill::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: currentcolor;
}

.headed-pill--release {
  background: var(--done-tint);
  color: var(--done);
}

.headed-pill--ag {
  background: var(--warn-tint-2);
  color: var(--warn-ink);
}

.headed-pill--ag-urgent {
  background: var(--danger-tint);
  color: var(--urgent-ink);
}

.headed-pill--unknown {
  background: var(--line);
  color: var(--ink-2);
}

/* --- 6 · Column B's "This step" panel: the Next box and the stage blocks (04 §4.4–4.6) --------- */
.ws-b .next-box {
  padding: 20px 22px;
  border: 1px solid var(--accent-edge);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, var(--accent-tint-2), #f3f9fd);
  box-shadow: none;
}

.ws-b .next-title {
  margin: 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ws-b .step-sentence {
  margin: 6px 0 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  text-wrap: pretty;
}

.ws-b .cite-line {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 12.5px;
}

.ws-b .step-presses {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}

.btn-attorney {
  background: var(--attorney-button);
  color: #fff;
}

.block {
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--surface);
}

.block-head {
  padding: 14px 18px 10px;
}

.block-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.block-sub {
  margin: 2px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

.block-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.brow {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
}

a.brow:hover,
label.brow:hover {
  text-decoration: none;
  background: #f5f9fc;
}

.brow-mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--ring);
  border-radius: 9px;
  background: #fff;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.brow--done .brow-mark {
  border-color: var(--done);
  background: var(--done);
}

.brow--warn .brow-mark {
  border-color: var(--warn);
  background: var(--warn);
}

.brow--neutral .brow-mark {
  width: 9px;
  height: 9px;
  margin: 0 4.5px;
  border: 0;
  background: var(--ink-3);
}

.brow--wait .brow-mark {
  width: 9px;
  height: 9px;
  margin: 0 4.5px;
  border: 0;
  background: var(--ink-3);
}

.brow--in .brow-mark {
  width: 9px;
  height: 9px;
  margin: 0 4.5px;
  border: 0;
  background: var(--accent);
}

.brow-main {
  flex: 1;
  min-width: 0;
}

.brow-name {
  display: block;
  font-weight: 500;
  line-height: 1.35;
}

.brow-line {
  display: block;
  margin-top: 1px;
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.4;
}

.brow-right {
  flex: none;
  color: var(--accent);
  font-size: 13px;
  white-space: nowrap;
}

/* A square checkbox row (04 §4.6, `box1` / `box0`). */
.brow--box {
  cursor: pointer;
}

.box-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.box {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid #c7c7cc;
  border-radius: 5px;
  background: #fff;
  color: transparent;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.box-input:checked + .box {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.box-input:focus-visible + .box {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.brow--box:has(.box-input:checked) {
  background: var(--accent-tint);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* The money table (04 §4.5). */
.money {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 18px;
  margin: 0;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.money dt {
  color: var(--ink-2);
}

.money dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.money .money-total {
  color: var(--ink);
  font-weight: 700;
}

.block-foot {
  margin: 0;
  padding: 10px 18px 13px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

.block-foot--caution {
  background: var(--warn-tint);
}

.block-body {
  padding: 2px 18px 16px;
}

/* A letter on paper inside a block (04 §4.11). */
.block .letter-paper,
.block .email-paper {
  max-height: 420px;
  margin: 0;
  overflow: auto;
  padding: 24px 28px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  box-shadow: var(--shadow-paper);
  font-size: 13.5px;
  line-height: 1.55;
}

.paper-label {
  margin: 0 0 12px;
  color: var(--faint-2);
  font: 700 10px/1 var(--font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.paper-open {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
}

/* The drop zone (04 §4.12). */
.drop-zone {
  border: 1.5px dashed #b9d8e8;
  border-radius: 12px;
  background: var(--accent-row);
}

.drop-zone .drop-title {
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
}

.drop-zone .drop-note {
  color: var(--ink-2);
  font-size: 12.5px;
}

/* Documents as tiles in B (02, Column B). */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
}

a.tile:hover {
  border-color: var(--accent);
  text-decoration: none;
  background: #f5f9fc;
}

.tile--inside {
  border-style: dashed;
}

.tile-top {
  display: flex;
  gap: 9px;
  align-items: center;
  min-width: 0;
}

.tile-name {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tile-state {
  font-size: 12px;
  font-weight: 600;
}

.tile-warn {
  color: #9a6b00;
  font-size: 11.5px;
}

.docs-block {
  padding: 14px 18px 18px;
  border-radius: var(--radius-card);
  background: var(--surface);
}

.docs-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
}

.docs-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.docs-hint,
.docs-copies {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
}

.docs-copies {
  margin-top: 10px;
  font-size: 12.5px;
}

/* Time and money, closed by default (B6). */
.fold-card {
  border-radius: var(--radius-card);
  background: var(--surface);
}

.fold-card > summary {
  display: flex;
  justify-content: space-between;
  padding: 14px 18px;
  font-size: 14.5px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.fold-card > summary::-webkit-details-marker {
  display: none;
}

.fold-card-short {
  color: var(--ink-2);
  font-weight: 400;
}

.fold-card-body {
  padding: 0 18px 14px;
  font-size: 13.5px;
}

/* --- 7 · The closed card and the date card (04 §4.13–4.14) -------------------------------------- */
.closed-card {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding: 16px 20px;
  border-radius: var(--radius-card);
  background: var(--done-tint);
}

.closed-tick {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 13px;
  background: var(--done);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.closed-main {
  flex: 1 1 240px;
}

.closed-line {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.closed-sub {
  margin: 2px 0 0;
  color: var(--done-ink);
  font-size: 13.5px;
}

.closed-card .btn-secondary,
.closed-card .btn-attorney {
  min-height: 0;
  padding: 8px 14px;
  border: 1px solid var(--done-edge);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-weight: 400;
}

.date-card {
  padding: 14px 18px;
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.date-card--soon {
  border-top-color: var(--warn);
}

.date-card--today,
.date-card--overdue {
  border-top-color: var(--danger);
}

.date-card--expected {
  border-top-color: var(--done);
}

.date-card--attorney {
  border-top-color: var(--attorney);
}

.date-card--quiet,
.date-card--closed {
  border-top-color: var(--ink-3);
}

.date-card-big {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

.date-card-label {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 600;
}

.date-card-what {
  margin: 2px 0 0;
  color: var(--ink-2);
  font-size: 12.5px;
}

/* --- 8 · The viewer (04 §4.10) ------------------------------------------------------------------ */
.viewer {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-card);
  background: #fff;
}

.viewer-head {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-2);
  background: #fbfbfd;
}

.viewer-title {
  flex: 1 1 240px;
  min-width: 200px;
}

.viewer-name {
  display: block;
  overflow: hidden;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.viewer-sub {
  display: block;
  overflow: hidden;
  margin: 1px 0 0;
  color: var(--ink-2);
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.viewer-pager,
.viewer-zoom {
  display: flex;
  flex: none;
  gap: 2px;
  align-items: center;
}

.viewer-zoom {
  padding-left: 8px;
  border-left: 1px solid var(--line-2);
}

.viewer-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font-size: 17px;
  cursor: pointer;
}

a.viewer-step:hover,
button.viewer-step:hover {
  text-decoration: none;
  background: var(--track);
}

.viewer-step.is-off {
  opacity: 0.3;
  pointer-events: none;
}

.viewer-page-label,
.viewer-zoom-label {
  min-width: 74px;
  color: var(--ink-2);
  font-size: 12.5px;
  text-align: center;
  white-space: nowrap;
}

.viewer-zoom-label {
  min-width: 38px;
  font-size: 12px;
}

.viewer-full {
  flex: none;
  padding: 5px 10px;
  border: 1px solid var(--ring);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}

.viewer-full:hover {
  text-decoration: none;
  background: var(--surface-2);
}

.viewer-close {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 13px;
  background: var(--track);
  color: var(--ink-soft);
  font-size: 15px;
}

.viewer-close:hover {
  text-decoration: none;
  background: var(--line-2);
}

.viewer-markbar {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-2);
}

.viewer-warn {
  flex: none;
  margin: 0;
  padding: 8px 14px;
  border-bottom: 1px solid #f0e3c0;
  background: var(--warn-tint-2);
  color: var(--warn-ink-2);
  font-size: 13px;
}

.viewer-desk {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 24px;
  background: var(--desk);
}

.viewer-paper {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 14px 36px rgba(0, 0, 0, 0.18);
}

.viewer-paper img {
  display: block;
  width: 100%;
  height: auto;
}

.viewer-paper.zoom-75 {
  max-width: 510px;
}

.viewer-paper.zoom-125 {
  max-width: 850px;
}

.viewer-paper.zoom-150 {
  max-width: 1020px;
}

.viewer-paper.zoom-200 {
  max-width: 1360px;
}

.viewer-paper--text {
  padding: 40px 48px;
  font-family: var(--font-paper);
  font-size: 14px;
  line-height: 1.65;
}

.viewer-cant {
  max-width: 420px;
  margin: 60px auto;
  padding: 32px 28px;
  border-radius: var(--radius-card);
  background: #fff;
  text-align: center;
}

.viewer-cant-name {
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: 600;
}

.viewer-cant-line {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
}

.viewer-cant .btn {
  margin-top: 18px;
}

/* The colour key under a page (D4). */
.mark-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: center;
  max-width: 680px;
  margin: 14px auto 0;
  padding: 0;
  color: var(--ink-2);
  font-size: 12px;
  list-style: none;
}

.mark-key li {
  display: flex;
  gap: 6px;
  align-items: center;
}

.mark-swatch {
  width: 14px;
  height: 10px;
  border: 2px solid var(--mark-ai);
  border-radius: 2px;
  background: var(--mark-ai-tint);
}

.mark-swatch--person {
  border-color: var(--mark-person);
  background: var(--mark-person-tint);
}

.mark-swatch--redact {
  border-color: var(--mark-redact);
  background: var(--mark-redact-tint);
}

.mark-swatch--keep {
  border-color: var(--mark-keep);
  background: var(--mark-keep-tint);
}

/* --- 9 · Column C: the review panel and the approval panel (04 §4.8–4.9) ----------------------- */
.c-card {
  padding: 12px 16px;
  border-radius: var(--radius-card-a);
  background: var(--surface);
}

.c-progress-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  margin: 0;
  font-size: 13.5px;
}

.c-progress-top strong {
  font-weight: 600;
  white-space: nowrap;
}

.c-progress-top span {
  color: var(--ink-2);
  white-space: nowrap;
}

.meter {
  display: block;
  width: 100%;
  height: 6px;
  margin-top: 6px;
  overflow: hidden;
  border: 0;
  border-radius: 3px;
  background: var(--track);
  appearance: none;
}

.meter::-webkit-progress-bar {
  background: var(--track);
}

.meter::-webkit-progress-value {
  background: var(--accent);
}

.meter::-moz-progress-bar {
  background: var(--accent);
}

.meter--attorney::-webkit-progress-value {
  background: var(--attorney);
}

.meter--attorney::-moz-progress-bar {
  background: var(--attorney);
}

.meter--thin {
  height: 5px;
}

.headed {
  padding: 12px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-card-a);
  background: var(--surface);
}

.headed-label {
  margin: 0;
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.headed-main {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 6px;
}

.headed-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 9px;
  background: var(--ink-3);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.headed-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-wrap: pretty;
}

.headed-sub {
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.45;
}

.headed-groups {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 8px 0 0;
  padding: 0 0 0 27px;
  list-style: none;
  font-size: 12.5px;
  line-height: 1.4;
}

.headed-groups strong {
  font-weight: 600;
}

.headed-groups span {
  color: var(--ink-2);
}

.headed-or {
  margin: 10px 0 0 27px;
  padding-top: 9px;
  border-top: 1px solid var(--line-2);
  font-size: 12.5px;
  line-height: 1.45;
}

.headed .why {
  margin: 8px 0 0 27px;
}

.headed .why p {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}

.headed--release {
  border-color: var(--done-edge);
  background: var(--done-tint);
}

.headed--release .headed-icon {
  background: var(--done);
}

.headed--release .headed-title {
  color: var(--done);
}

.headed--ag {
  border-color: var(--warn-edge);
  background: var(--warn-tint);
}

.headed--ag .headed-icon {
  background: var(--warn);
}

.headed--ag .headed-title {
  color: var(--warn-ink);
}

.headed--ag-urgent {
  border-color: var(--urgent-edge);
  background: var(--danger-tint);
}

.headed--ag-urgent .headed-icon {
  background: var(--danger);
}

.headed--ag-urgent .headed-title {
  color: var(--urgent-ink);
}

.c-caps {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* A mark's card in C (D2). */
.ws-c .review-mark-card {
  padding: 13px 15px;
  border: 0;
  border-radius: var(--radius-card-a);
  background: var(--surface);
  box-shadow: none;
}

.ws-c .review-mark-card:target,
.ws-c .review-mark-card.is-lit {
  box-shadow: 0 0 0 2px var(--accent), 0 4px 14px rgba(21, 131, 184, 0.18);
}

.mark-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--mark-ai);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
}

.mark-dot--person {
  background: var(--mark-person);
}

.mark-dot--redact {
  background: var(--mark-redact);
}

.mark-dot--keep {
  background: var(--mark-keep);
}

.btn-redact,
.btn-keep {
  min-height: 0;
  padding: 6px 14px;
  border: 1.5px solid var(--mark-redact);
  border-radius: 8px;
  background: #fff;
  color: var(--mark-redact);
  font-size: 13px;
  font-weight: 600;
}

.btn-keep {
  border-color: var(--mark-keep);
  color: var(--mark-keep);
}

.btn-redact.is-chosen {
  background: var(--mark-redact);
  color: #fff;
}

.btn-keep.is-chosen {
  background: var(--mark-keep);
  color: #fff;
}

/* The approval panel (04 §4.9). */
.ap-card {
  padding: 14px 16px;
  border-radius: var(--radius-card-a);
  background: var(--surface);
}

.ap-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ap-chip {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--attorney-tint);
  color: var(--attorney-ink);
  font-size: 12px;
  font-weight: 600;
}

.ap-due {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.ap-fact {
  margin: 9px 0 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.ap-cites {
  margin: 3px 0 0;
  color: var(--ink-2);
  font-size: 12px;
}

.ap-prepared {
  margin: 9px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

.ap-refusal {
  padding: 11px 13px;
  border: 1px solid var(--urgent-edge);
  border-radius: 12px;
  background: var(--danger-tint);
}

.ap-refusal-title {
  margin: 0;
  color: var(--urgent-ink);
  font-size: 13.5px;
  font-weight: 600;
}

.ap-refusal p {
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.45;
}

.ap-look {
  margin: 0;
  padding: 9px 13px;
  border: 1px solid var(--warn-edge);
  border-radius: 12px;
  background: var(--warn-tint);
  list-style: none;
}

.ap-look li {
  padding: 2px 0 2px 14px;
  font-size: 12.5px;
  line-height: 1.45;
  text-indent: -14px;
}

.ap-look li::before {
  content: "●";
  display: inline-block;
  width: 14px;
  color: var(--warn);
  text-indent: 0;
}

.ap-line {
  margin: 0;
  padding: 0 4px;
  font-size: 13px;
  line-height: 1.45;
}

.ap-line strong {
  font-weight: 600;
}

.ap-steps {
  overflow: hidden;
  border-radius: var(--radius-card-a);
  background: var(--surface);
}

.ap-steps-head {
  padding: 11px 14px 8px;
}

.ap-steps-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
}

.ap-steps-count {
  color: var(--attorney);
  font-size: 12px;
  white-space: nowrap;
}

.ap-steps-count.is-all {
  color: var(--done);
}

.ap-steps ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ap-step {
  display: grid;
  grid-template-columns: 14px 18px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  color: var(--ink);
}

a.ap-step:hover {
  text-decoration: none;
  background: #f5f9fc;
}

.ap-step.is-showing {
  background: var(--attorney-tint);
}

.ap-step-tick {
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 700;
}

.ap-step.is-opened .ap-step-tick {
  color: var(--done);
}

.ap-step-name {
  display: block;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ap-step-sub {
  display: block;
  color: var(--ink-2);
  font-size: 11px;
}

.ap-steps-next {
  padding: 9px 14px;
  border-top: 1px solid var(--line);
}

.ap-steps-next .btn {
  width: 100%;
  min-height: 0;
  padding: 8px;
  font-size: 13px;
}

.ap-hint {
  margin: 0;
  color: var(--ink-2);
  font-size: 12.5px;
  text-align: center;
}

/* The Approve queue's compact card (E1). */
.queue {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.apcard {
  padding: 20px 22px;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.apcard-top {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: var(--ink-2);
  font-size: 13px;
}

.apcard-client {
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}

.apcard-due {
  margin-left: auto;
  font-weight: 700;
  white-space: nowrap;
}

.apcard-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  margin-top: 10px;
}

.apcard-title {
  flex: 1 1 300px;
  min-width: 0;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.apcard .rail {
  margin-top: 12px;
}

.apcard-fact {
  margin: 6px 0 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.apcard-cites {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 13px;
}

.apcard-refused {
  margin: 10px 0 0;
  color: var(--urgent-ink);
  font-size: 13.5px;
  font-weight: 600;
}

.apcard-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
}

.apcard-opened {
  color: var(--attorney);
  font-size: 13.5px;
  font-weight: 600;
}

.apcard-opened.is-all {
  color: var(--done);
}

.apcard-foot .meter {
  width: 120px;
  margin: 0;
}

.apcard-foot .btn {
  margin-left: auto;
}

/* --- 10 · New request in the same shell (A4) ---------------------------------------------------- */
.nr-area {
  min-width: 0;
}

.nr-title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.nr-sub {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 15px;
}

.nr-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  align-items: start;
  margin-top: 18px;
}

.nr-viewer {
  position: sticky;
  top: 18px;
  min-height: 420px;
}

.nr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  padding: 28px;
  border: 1.5px dashed var(--ring);
  border-radius: var(--radius-card);
  color: var(--ink-2);
  font-size: 14px;
  text-align: center;
}

.nr-note--amber {
  padding: 11px 14px;
  border: 1px solid var(--warn-edge);
  border-radius: 12px;
  background: var(--warn-tint);
  color: var(--warn-ink);
  font-size: 13.5px;
}

@media (max-width: 1299px) {
  .nr-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .nr-viewer {
    position: static;
  }
}

/* --- 11 · Column A's lines under a step, and column B's Next chip ------------------------------- */
.ws-a .status-items {
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
}

.status-entry {
  min-width: 0;
}

.status-entry .status-item {
  margin: 0;
}

.status-entry .status-item a {
  flex: none;
}

.status-entry.is-struck .status-item-name {
  text-decoration: line-through;
}

.status-entry-sub,
.status-note {
  margin: 0;
  padding: 0 12px 3px 58px;
  color: var(--ink-2);
  font-size: 11.5px;
  line-height: 1.4;
}

.status-note {
  padding-left: 38px;
}

.status-entry-fold {
  padding: 0 12px 2px 58px;
  font-size: 12px;
}

.status-entry-fold .entry-more > summary {
  font-size: 11.5px;
}

.status-entry-fold .entry-more[open] {
  padding-bottom: 6px;
}

.status-entry-fold .act-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ws-a .status-docs {
  margin: 0 0 6px;
}

.ws-a .act-offices {
  margin: 0 12px 8px 38px;
  border: 1px solid var(--line-2);
}

.ws-a .act-offices .block-head {
  padding: 8px 12px 4px;
}

.ws-a .act-offices .block-title {
  font-size: 12.5px;
}

.ws-a .act-offices .brow {
  padding: 6px 12px;
  font-size: 12.5px;
}

.ws-b .next-title .chip {
  letter-spacing: 0;
  text-transform: none;
}

.ws-b .act-offices {
  margin: 0;
}

.ws-b .act-offices .block-foot {
  padding: 10px 18px 12px;
}

.ws-blocks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ws-blocks:empty {
  display: none;
}

/* --- 12 · The list's rail, the review's marks and cards, the Approve queue ---------------------- */
.row-rail {
  grid-column: 2 / -1;
  margin-top: -2px;
}

.mark-dot--undecided {
  background: var(--mark-person);
}

.mark-dot--proposed {
  background: var(--mark-ai);
}

.review-mark--proposed {
  fill: rgba(184, 134, 11, 0.12);
  stroke: var(--mark-ai);
}

.review-mark-number--proposed {
  fill: var(--mark-ai);
}

.review-text-mark--proposed {
  background: var(--mark-ai-tint);
  outline-color: var(--mark-ai);
}

.review-mark--keep {
  fill: rgba(26, 158, 106, 0.08);
  stroke: var(--mark-keep);
  stroke-dasharray: 5 3;
  stroke-width: 1.5px;
}

.review-mark-number--keep {
  fill: var(--mark-keep);
}

.review-text-mark--keep {
  background: var(--mark-keep-tint);
  box-shadow: none;
  outline: 1.5px dashed var(--mark-keep);
}

.review-mark-link.is-lit .review-mark {
  stroke-width: 3px;
}

.review-text-mark.is-lit {
  box-shadow: 0 0 0 2px var(--accent);
}

.ws-c .review-mark-card {
  scroll-margin-top: 40px;
  cursor: pointer;
}

.review-mark-title {
  display: flex;
  gap: 8px;
  align-items: center;
}

.review-mark-where {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
}

.ws-c .review-rail,
.ws-c.review-rail {
  position: sticky;
  max-height: none;
}

.ws-c .review-card,
.ws-c .c-card {
  padding: 12px 16px;
  border: 0;
  border-radius: var(--radius-card-a);
  box-shadow: none;
}

.ws-c .review-heading {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
}

.review-ending {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review-not-found-fold > summary {
  color: var(--ink-2);
  font-size: 12.5px;
  cursor: pointer;
}

.viewer-markbar .review-marking-presses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.viewer-markbar .review-marking-how {
  flex-basis: 100%;
  margin: 0;
}

.viewer-markbar .review-marking-how > summary {
  display: inline;
  color: var(--accent);
  font-size: 13px;
}

.ws-b--viewer .review-sheet {
  position: relative;
  max-width: none;
  margin: 0;
  box-shadow: none;
}

.ap-step-form {
  margin: 0;
}

button.ap-step {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.ap-step:hover {
  background: #f5f9fc;
}

.apcard .rail-line {
  margin-top: 6px;
}

.apcard .headed-pill {
  display: inline-flex;
  margin-top: 10px;
}

.page-letter .letter-sheet {
  margin: 0;
}

.page-letter .block-body {
  padding-top: 0;
}

/* --- 13 · The marks listed beneath a document opened outside the review (R-111) ---------------- */
.viewer-marks {
  max-width: 680px;
  margin: 18px auto 0;
  padding: 12px 16px;
  border-radius: var(--radius-card-a);
  background: #fff;
}

.viewer-marks-title {
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 600;
}

.viewer-marks-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.viewer-mark {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
  scroll-margin-top: 40px;
}

.viewer-mark:target {
  background: var(--accent-tint);
}

.viewer-mark-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.viewer-mark-where {
  color: var(--ink-2);
  font-size: 12px;
}

.viewer-mark-decision {
  font-weight: 600;
}

.viewer-mark-page {
  flex: none;
  font-size: 12.5px;
}

.ap-read > summary {
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
}