/* ================================================================
   LexSub — Design System
   Clean, minimal, calm. Notion-inspired. Seeded from mp-api.
   Full page styles land with each feature; this is the shell +
   shared primitives (layout, side nav, buttons, auth/error cards).
   ================================================================ */

/* A grouped box (the picker's add panel, the dashboard's next step) is white
   and grouped by its hairline: a tint read as the side nav's #f9f8f7 slab and
   swallowed the #f7f6f3 secondary buttons and disabled fields inside it. */
:root {
  --surface-group: #ffffff;
  --border-group: #ebebea;
}

/* --- Reset & Base --- */

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

html {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: ui-sans-serif, -apple-system, system-ui, Inter, sans-serif;
  color: #37352f;
  background: #ffffff;
  line-height: 1.6;
  min-height: 100vh;
}

/* --- Typography --- */

h1, h2, h3, h4 {
  font-weight: 600;
  color: #37352f;
  letter-spacing: -0.01em;
}

h1 {
  font-size: 1.75rem;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

h2 {
  font-size: 1.15rem;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

p, li, td, th, dd, dt, label {
  color: #55534e;
}

a {
  color: #37352f;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

a:not([class]):hover {
  opacity: 0.7;
}

small, .text-secondary {
  font-size: 0.85rem;
  color: #9b9a97;
}

.text-muted {
  color: #b4b4b0;
}

strong {
  font-weight: 600;
  color: #37352f;
}

/* --- Layout Shell --- */

.layout {
  display: flex;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  min-width: 0;
  padding: 3rem 4rem 4rem 4rem;
}

.app-footer {
  margin-top: 4rem;
  max-width: 46em;
  font-size: 0.8rem;
  line-height: 1.6;
  color: #9b9a97;
}

/* Desktop: centre the page column right of the side nav, footer on its left edge.
   --col mirrors the .page / .page-narrow / 960px list max-widths. */
@media (min-width: 769px) {
  .main-content { --col: 720px; }
  .main-content:has(> .page-narrow) { --col: 480px; }
  .main-content:has(> .people-list, > .deals-list, > .sharing-page) { --col: 960px; }
  .main-content > .page { margin-inline: auto; }
  .app-footer { margin-left: max(0px, (100% - var(--col)) / 2); }
}

/* --- Left Side Nav (Desktop) --- */

.side-nav {
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0.75rem;
  background: #f9f8f7;
  border-right: 1px solid #f7f6f3;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.65rem 0.75rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #f7f6f3;
}

/* LEXSUB wordmark (brand spec): Archivo Medium 13px, 22% tracking, uppercase,
   brand ink #14233C. Falls back to the system stack until Archivo is vendored. */
.nav-logo-text,
.auth-brand-name,
.mobile-brand-name {
  font-family: "Archivo", ui-sans-serif, -apple-system, system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #14233c;
}

.side-nav a,
.side-nav button.nav-user-trigger {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.65rem;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #9b9a97;
  white-space: nowrap;
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.side-nav a:hover,
.side-nav button.nav-user-trigger:hover {
  background: #eeeceb;
  color: #37352f;
  opacity: 1;
}

.side-nav a.active {
  background: #eeeceb;  /* #f7f6f3 vanished on the #f9f8f7 nav */
  color: #37352f;
  font-weight: 500;
}

/* F18: the firm entry carries a user-supplied name — ellipsize, never wrap or widen. */
.nav-label {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-tab {
  min-width: 0;
}

.nav-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-spacer {
  flex: 1;
}

/* --- User menu & popover (bottom of side nav) --- */

.nav-user-menu {
  position: relative;
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid #f7f6f3;
}

.nav-user-trigger {
  overflow: hidden;
}

.nav-user-email {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: #e3e2e0;  /* stays visible on the #eeeceb hover */
  color: #37352f;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.user-popover {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #ebebea;
  border-radius: 12px;
  padding: 0.35rem;
  z-index: 300;
  box-shadow: 0 8px 24px rgba(15, 15, 15, 0.1);
  /* Animated open: visibility+opacity+transform instead of display:none, so
     the popover can ease in from the trigger (display swaps kill transitions). */
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  transform-origin: bottom left;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s,
    transform 0.15s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.user-popover.open {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.user-popover a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #55534e;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}

.user-popover a:hover {
  background: #f7f6f3;
  color: #37352f;
  opacity: 1;
}

.user-popover .nav-icon {
  color: #9b9a97;
}

.user-popover-label {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.user-popover-subtext {
  font-size: 0.7rem;
  color: #9b9a97;
  font-weight: 400;
}

.popover-divider {
  height: 1px;
  background: #f7f6f3;
  margin: 0.3rem 0;
}

/* --- Buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-family: inherit;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s,
    transform 0.12s cubic-bezier(0.2, 0.6, 0.2, 1);
  text-decoration: none;
  line-height: 1.4;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: #37352f;
  color: #ffffff;
}

.btn-primary:hover {
  background: #2f2e29;
  color: #ffffff;
}

.btn-secondary {
  background: #f7f6f3;
  color: #55534e;
}

.btn-secondary:hover {
  background: #ebebea;
}

.btn-ghost {
  background: transparent;
  color: #9b9a97;
  padding: 0.4rem 0.6rem;
}

.btn-ghost:hover {
  background: #f7f6f3;
  color: #55534e;
}

/* A pressed ghost toggle (e.g. Edit -> Done) reads as the active state. */
.btn-ghost[aria-pressed="true"] {
  color: #37352f;
  font-weight: 600;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Auth / Error Cards (used by login, error and 403/429 pages) --- */

.auth-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
}

.auth-card {
  width: 100%;
  max-width: 360px;
}

.auth-card h1 {
  font-size: 1.5rem;
  margin-bottom: 0.35rem;
}

/* --- Error pages (404 / 403 / 429 — shared shell) --- */

.error-card {
  text-align: center;
}

.error-code {
  font-size: 2.5rem;
  font-weight: 700;
  color: #e0dfdb;
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
  line-height: 1;
}

.error-card .btn {
  margin-top: 1.5rem;
}

.auth-card .auth-subtitle {
  color: #9b9a97;
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

/* --- Auth brand + card chrome --- */

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 2rem;
}

.auth-footer {
  margin-top: 1.75rem;
  font-size: 0.85rem;
  color: #9b9a97;
}

.auth-footer a,
.auth-link {
  color: #37352f;
  font-weight: 500;
}

.auth-footer a:hover,
.auth-link:hover {
  opacity: 0.7;
}

.auth-subactions {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
}

/* --- Forms --- */

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: #55534e;
  margin-bottom: 0.35rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
textarea,
select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  font-family: inherit;
  font-size: 0.9rem;
  color: #37352f;
  background: #ffffff;
  border: 1px solid #e0dfdb;
  border-radius: 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

textarea {
  resize: vertical;
  line-height: 1.5;
}

select:disabled {
  background-color: #f7f6f3;
  color: #9b9a97;
  cursor: not-allowed;
}

/* F40: a drawn chevron with trailing room, the same in every browser. */
select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%239b9a97' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 12px 12px;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #b4b4b0;
  box-shadow: 0 0 0 3px rgba(55, 53, 47, 0.06);
}

.form-hint {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: #9b9a97;
}

.auth-otp {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.4rem;
  letter-spacing: 0.4em;
  text-align: center;
}

/* --- Alerts / banners --- */

.auth-error,
.auth-success,
.form-alert {
  padding: 0.65rem 0.8rem;
  border-radius: 6px;
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
}

.auth-error,
.form-alert-error {
  background: #fdf0ef;
  color: #b91c1c;
  border: 1px solid #f5d5d2;
}

.auth-success {
  background: #eef6ef;
  color: #2f6f3e;
  border: 1px solid #cfe6d3;
}

.form-alert-warning {
  background: #fbf3e6;
  color: #9a6a1a;
  border: 1px solid #f0e0c0;
}

.reattach-list {
  margin: 0.5rem 0 0.25rem 1.1rem;
  padding: 0;
}

.reattach-list li {
  margin-bottom: 0.15rem;
}

/* --- Button variants --- */

.btn-block {
  width: 100%;
  justify-content: center;
}

.btn-lg {
  padding: 0.65rem 1.4rem;
  font-size: 0.9rem;
}

.btn-danger {
  background: #dc2626;
  color: #ffffff;
}

.btn-danger:hover {
  background: #b91c1c;
  color: #ffffff;
}

/* --- Page shell (authenticated pages) --- */

.page {
  max-width: 720px;
}

.page-narrow {
  max-width: 480px;
}

/* Wide desktop: forms and check pages get more room. */
@media (min-width: 1280px) {
  .page-narrow { max-width: 680px; }
  .main-content:has(> .page-narrow) { --col: 680px; }
}

.page-header {
  margin-bottom: 2rem;
}

.page-header h1 {
  margin-bottom: 0.35rem;
}

.card {
  padding: 1.5rem;
  border: 1px solid #ebebea;
  border-radius: 10px;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.04);
}

.card h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.05rem;
}

.card-danger {
  border-color: #f0d9d7;
}

.stack > * + * {
  margin-top: 0.25rem;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* --- 2FA setup --- */

.qr-block {
  display: flex;
  justify-content: center;
  padding: 1rem;
  background: #ffffff;
  border: 1px solid #ebebea;
  border-radius: 8px;
  margin-bottom: 1.25rem;
}

.qr-block svg {
  width: 180px;
  height: 180px;
}

.secret-key code {
  display: inline-block;
  padding: 0.4rem 0.6rem;
  background: #f7f6f3;
  border-radius: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: #37352f;
  word-break: break-all;
}

.recovery-codes {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.recovery-codes code {
  display: block;
  padding: 0.55rem;
  background: #f7f6f3;
  border-radius: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.95rem;
  text-align: center;
  letter-spacing: 0.1em;
  color: #37352f;
}

/* --- Dashboard current-state summary --- */

/* Frames the firm roster as the last ambient section, mirroring .ddl-row-wrap
   above it: the same quiet sentence-case heading and the same 1.5rem
   section-rhythm top gap (§F11) so the deadlines row and the firm list read as
   equal-weight siblings beneath the hero CTA, instead of colliding. */
.state-wrap {
  margin: 1.5rem 0 0;
}

.state-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.state-firm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.15rem;
  border: 1px solid #ebebea;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.04);
  transition: border-color 0.15s, background 0.15s,
    box-shadow 0.15s, transform 0.15s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.state-firm:hover {
  border-color: #d8d7d3;
  background: #faf9f7;
  opacity: 1;
  box-shadow: 0 4px 12px rgba(15, 15, 15, 0.06);
  transform: translateY(-1px);
}

.state-firm-name {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: #37352f;
  font-size: 0.95rem;
}

.state-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #eef6ef;
  color: #2f6f3e;
  font-size: 0.7rem;
  flex-shrink: 0;
}

.state-firm-meta {
  font-size: 0.82rem;
  white-space: nowrap;
}

/* --- Dashboard footer (F24): coverage + "request a directory" postscript.
   Muted .ddl-note weight, a text link only: the next-action stays the one CTA. */

.dash-foot {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #f0efec;
}

.dash-foot p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #9b9a97;
}

.dash-foot .dash-foot-cover {
  margin-bottom: 1rem;
}

.dash-foot-title {
  margin: 0 0 0.15rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: #37352f;
  letter-spacing: -0.01em;
  line-height: 1.5;
}

.dash-foot .dash-foot-action {
  margin-top: 0.6rem;
}

.dash-foot .link-sm {
  display: inline-block;
  margin-left: 0;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  border-radius: 4px;
}

.dash-foot-addr {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* --- Dashboard next-action --- */

.next-action {
  padding: 2rem;
  border: 1px solid var(--border-group);
  border-radius: 12px;
  background: var(--surface-group);
  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.04);
}

.next-action-step {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9b9a97;
  margin-bottom: 0.5rem;
}

.next-action-title {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.35rem;
}

.next-action .btn {
  margin-top: 1rem;
}

/* --- Dashboard submission-deadlines row (F11) ---
   An ambient calendar band beneath the hero CTA: four equal tiles, one per
   channel, showing the next directory deadline. Calm by default (muted grey);
   an amber pill surfaces only as a season nears. Light-theme, existing tokens
   only, no JS. */

.ddl-row-wrap {
  margin: 1.5rem 0 0;
}

.ddl-heading,
.state-heading {
  font-size: 0.85rem;
  font-weight: 600;
  color: #37352f;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
}

/* --- "Due soon" mention (F15) ---
   The lede of the deadlines section: one plain sentence per tracked
   (channel, area) pair inside three weeks. Prose register — no pill, no
   container, no glyph; the band system is carried by ink and weight
   instead. far (15-21d) gets NO colour and NO weight at all, so a
   20-days-out mention reads exactly as calm as body copy; near turns the
   time phrase amber; imminent adds weight. Never red (§F11 §4). */

.ddl-due {
  display: flex;
  flex-direction: column;
  margin: 0 0 1.25rem;
}

.ddl-due-row {
  margin: 0 -0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #55534e;
  transition: background 0.15s, color 0.15s;
}

.ddl-due-row:hover {
  background: #faf9f7;
  opacity: 1;
}

.ddl-due-row:focus-visible {
  outline: none;
  background: #f7f6f3;
  box-shadow: 0 0 0 3px rgba(55, 53, 47, 0.06);
}

/* The scan anchor: with three lines stacked, the eye finds the channel. */
.ddl-due-channel {
  font-weight: 500;
  color: #37352f;
}

/* Base = the "far" band: inherits body ink and weight, i.e. no emphasis.
   nowrap so "in 12 days" never breaks across two lines. */
.ddl-due-when {
  white-space: nowrap;
}

.ddl-due-when-near {
  font-weight: 500;
  color: #9a6a1a;
}

.ddl-due-when-imminent {
  font-weight: 600;
  color: #9a6a1a;
}

/* Overflow pointer — quiet, never a count that inflates urgency. */
.ddl-due-more {
  font-size: 0.85rem;
  color: #9b9a97;
}

.ddl-due-more:hover {
  color: #37352f;
}

.ddl-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.ddl-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 5.5rem;
  padding: 1.1rem 1.15rem;
  border: 1px solid #ebebea;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.04);
  transition: border-color 0.15s, background 0.15s,
    box-shadow 0.15s, transform 0.15s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.ddl-tile-link {
  transition: border-color 0.15s, background 0.15s;
}

.ddl-tile-link:hover {
  border-color: #d8d7d3;
  background: #faf9f7;
  opacity: 1;
  box-shadow: 0 4px 12px rgba(15, 15, 15, 0.06);
  transform: translateY(-1px);
}

.ddl-tile-link:focus-visible {
  outline: none;
  border-color: #b4b4b0;
  box-shadow: 0 0 0 3px rgba(55, 53, 47, 0.06);
}

.ddl-channel {
  font-size: 0.9rem;
  font-weight: 600;
  color: #37352f;
}

.ddl-area {
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: #55534e;
}

/* Tracks-nothing pointer (§F12 C2): replaces the tile grid, heading kept. */
.ddl-note {
  font-size: 0.85rem;
  color: #9b9a97;
}

.ddl-when {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ddl-date {
  font-size: 0.95rem;
  line-height: 1.35;
  color: #37352f;
}

.ddl-when .badge {
  margin-top: 0.35rem;
}

.ddl-days-imminent {
  font-weight: 600;
}

.ddl-days-far {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: #9b9a97;
}

.ddl-empty {
  margin-top: auto;
  font-size: 0.8rem;
  color: #b4b4b0;
}

/* ================================================================
   Firms (F2) — list, detail hub, chips, tables, referee bands
   ================================================================ */

.page-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

/* F15 item 3: on /people the header holds two entry buttons; let the group
   reflow below the title on narrow viewports (scoped to /people, so the
   one-button /deals header and every other .page-header-row are untouched). */
.people-list .page-header-row {
  flex-wrap: wrap;
}

.crumb {
  font-size: 0.8rem;
  margin-bottom: 0.35rem;
}

.crumb a {
  color: #9b9a97;
  font-weight: 500;
}

.crumb a:hover {
  color: #37352f;
}

/* --- Firm list --- */

.firm-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.firm-card {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem 1.15rem;
  border: 1px solid #ebebea;
  border-radius: 10px;
  transition: border-color 0.15s, background 0.15s;
}

.firm-card:hover {
  border-color: #d8d7d3;
  background: #faf9f7;
  opacity: 1;
}

.firm-card-name {
  font-weight: 600;
  color: #37352f;
  font-size: 0.95rem;
}

.firm-card-meta {
  font-size: 0.82rem;
}

/* --- Slim next-action banner (firm detail) --- */

.next-action-slim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.next-action-slim .next-action-title {
  font-size: 1.1rem;
}

.next-action-slim .btn {
  margin-top: 0;
  flex-shrink: 0;
}

/* --- Form layout grids --- */

.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: 0.75rem;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.form-section-title {
  margin-top: 1.5rem;
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9b9a97;
}

/* --- Chips (practice areas, departments) --- */

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.35rem 0.25rem 0.65rem;
  background: #f7f6f3;
  border-radius: 6px;
  font-size: 0.82rem;
  color: #37352f;
  transition: background 0.15s;
}

.chip-remove {
  display: inline-flex;
}

.chip-remove button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #9b9a97;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.chip-remove button:hover {
  background: #ebebea;
  color: #37352f;
}

.inline-add {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  max-width: 420px;
}

.inline-add input {
  flex: 1;
}

/* --- Add-row forms (contacts, moves) --- */

.add-row-form {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #f0efec;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-start;
}

.add-row-form .grid-3,
.add-row-form .grid-4 {
  width: 100%;
}

/* --- Tables --- */

.table-wrap {
  overflow-x: auto;
  margin-bottom: 0.5rem;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.table th {
  text-align: left;
  font-weight: 500;
  color: #9b9a97;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid #ebebea;
  white-space: nowrap;
}

.table td {
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid #f4f3f0;
  color: #37352f;
  vertical-align: middle;
}

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

.row-actions form {
  display: inline-flex;
}

.btn-sm {
  padding: 0.3rem 0.6rem;
  font-size: 0.78rem;
}

.btn-danger-ghost {
  color: #b91c1c;
}

.btn-danger-ghost:hover {
  background: #fdf0ef;
  color: #b91c1c;
}

/* --- Badges (referee bands, profile status) --- */

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-ready {
  background: #eef6ef;
  color: #2f6f3e;
}

.badge-below {
  background: #fbf3e6;
  color: #9a6a1a;
}

.badge-over {
  background: #fdf0ef;
  color: #b91c1c;
}

.badge-accent {
  background: #eef1f7;
  color: #3b4a6b;
}

.badge-neutral {
  background: #f7f6f3;
  color: #55534e;
}

.badge-nomination {
  background: #f3eef7;
  color: #6b3b8f;
}

/* --- Section header with an inline action --- */

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

.section-head > .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* A hint beside its actions: on a narrow row the actions wrap under the hint
   instead of squeezing it to one word per line. */
.section-head {
  flex-wrap: wrap;
}

.section-head > .form-hint {
  flex: 1 1 16rem;
  min-width: 0;
}

.section-head > .row-actions {
  flex-wrap: wrap;
}

/* F66: a section's add buttons sit at the bottom-left of its body. */
.section-add {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* --- Empty state (teaching, points forward) --- */

.empty-state {
  padding: 1.5rem 0 0.5rem;
}

.empty-state-title {
  font-weight: 500;
  color: #37352f;
  margin-bottom: 0.25rem;
}

.empty-state .btn {
  margin-top: 0.9rem;
}

.empty-state .inline-add {
  margin-top: 0.75rem;
}

.empty-state .inline-add .btn {
  margin-top: 0;
}

/* --- Inline checkbox row (lawyer form) --- */

.checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

/* --- Referee rules and counts (/referees) --- */

/* The /referees header's last row: rules, then the per-department counts. */
.referee-guide {
  flex-basis: 100%;
}

/* Per-channel referee rules under the Referees subtitle. */
.referee-rules {
  margin: 0;
  padding-left: 1.1rem;
}

/* The global li colour would make the hint list louder than the subtitle. */
.referee-rules li {
  color: inherit;
}

.referee-rules li + li {
  margin-top: 0.2rem;
}

.referee-rules li::marker {
  color: #b4b4b0;
}

/* Per-department referee counts under the rules on /referees (F68). */
.referee-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.85rem;
}

/* --- Checkboxes --- */

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: #37352f;
  font-weight: 400;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: auto;
}

/* Beat `.form-group label` when a checkbox sits in its own form group. */
.form-group .checkbox-label {
  display: flex;
  margin-bottom: 0;
  font-size: 0.88rem;
  font-weight: 400;
  color: #37352f;
}

/* --- On/Off switch: a real checkbox (role="switch"), state text via :checked --- */

.switch-label {
  cursor: pointer;
}

.switch-title {
  display: block;
  margin-bottom: 0.45rem;
}

.switch-control {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.switch-control input[role="switch"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 20px;
  margin: 0;
  border-radius: 999px;
  background: #e0dfdb;
  cursor: pointer;
  transition: background 0.15s;
}

.switch-control input[role="switch"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.2);
  transition: transform 0.15s;
}

.switch-control input[role="switch"]:checked {
  background: #37352f;
}

.switch-control input[role="switch"]:checked::before {
  transform: translateX(14px);
}

.switch-control input[role="switch"]:focus-visible {
  outline: 2px solid #37352f;
  outline-offset: 2px;
}

.switch-state {
  font-size: 0.88rem;
  color: #37352f;
}

.switch-control input:checked + .switch-state .switch-state-off,
.switch-control input:not(:checked) + .switch-state .switch-state-on {
  display: none;
}

select[aria-invalid="true"],
input[aria-invalid="true"] {
  border-color: #b91c1c;
}

.deal-form-firm {
  margin-bottom: 0.75rem;
}

/* The deal's Confidential switch: its group takes the badge tint of its state. */
.confidential-group {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: #eef6ef;
  transition: background 0.15s;
}

.confidential-group:has(input:checked) {
  background: #eef1f7;
}

.confidential-group .switch-state {
  color: #2f6f3e;
}

.confidential-group input:checked + .switch-state {
  color: #3b4a6b;
}

.switch-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
}

.switch-head .switch-title {
  margin-bottom: 0;
}

/* A small ⓘ that shows a note in a popover (native <details>). */
.info-tip {
  position: relative;
  display: inline-flex;
}

.info-tip > summary {
  display: inline-flex;
  padding: 2px;
  border-radius: 50%;
  color: #9b9a97;
  list-style: none;
  cursor: pointer;
}

.info-tip > summary::-webkit-details-marker {
  display: none;
}

.info-tip > summary:hover,
.info-tip[open] > summary {
  color: #37352f;
}

.info-tip > summary:focus-visible {
  outline: 2px solid #37352f;
  outline-offset: 1px;
}

.info-tip-pop {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: -0.5rem;
  width: min(280px, 70vw);
  margin: 0;
  padding: 0.65rem 0.75rem;
  background: #ffffff;
  border: 1px solid #ebebea;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 15, 15, 0.1);
  font-size: 0.8rem;
  line-height: 1.45;
  color: #55534e;
}

.form-field-error {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: #b91c1c;
}

/* F57: dial-code select + national number on one row. */
.phone-field {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 0.5rem;
}

input[readonly] {
  background: #f7f6f3;
  color: #55534e;
}

/* F57 sales-form honeypot: off-screen for people, still posted by bots. */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* F22 completion picker: month + year sit under the status select as one field. */
.completion-date-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
}

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

/* --- Collapsible firm-detail sections --- */

.section-card {
  border: 1px solid #ebebea;
  border-radius: 10px;
  margin-bottom: 0.85rem;
  padding: 0 1.5rem;
  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.04);
}

.section-card > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.section-card > summary::-webkit-details-marker {
  display: none;
}

.section-card > summary::after {
  content: '›';
  margin-left: auto;
  color: #b4b4b0;
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.2s cubic-bezier(0.2, 0.6, 0.2, 1), color 0.15s;
}

.section-card[open] > summary::after {
  transform: rotate(90deg);
}

/* Hover: the chevron darkens; a closed card's chevron leans toward opening. */
@media (hover: hover) {
  .section-card > summary:hover::after {
    color: #37352f;
  }

  .section-card:not([open]) > summary:hover::after {
    transform: translateX(2px);
  }

  .section-card-danger > summary:hover::after {
    color: #b91c1c;
  }
}

.section-card > summary:focus-visible::after {
  color: #37352f;
}

.section-card-danger > summary:focus-visible::after {
  color: #b91c1c;
}

.section-title {
  margin: 0;
  font-size: 1.05rem;
}

.section-count {
  font-size: 0.9rem;
  font-weight: 500;
  color: #9b9a97;
}

.section-card[open] > summary {
  border-bottom: 1px solid #f0efec;
}

.section-card-body {
  padding: 1.25rem 0 1.5rem;
}

.section-card-danger {
  margin-top: 2rem;
  border-color: #f0d9d7;
}

/* F86: the owner's Delete account card sits apart like the danger card. */
.section-card-apart {
  margin-top: 2rem;
}

.delete-facts {
  margin: 0.75rem 0 1.25rem 1.1rem;
  padding: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #55534e;
}

.delete-facts li + li {
  margin-top: 0.3rem;
}

.delete-facts li::marker {
  color: #b4b4b0;
}

.delete-lead {
  margin-bottom: 1rem;
}

.delete-link {
  margin: 0.75rem 0 0;
}

.delete-alt {
  margin-top: 1.25rem;
}

.request-sent {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  background: #f7f6f3;
}

.request-sent-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #37352f;
}

.request-sent-text {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #55534e;
}

.wipe-again {
  margin-top: 0.75rem;
}

.wipe-again > summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: #55534e;
}

.wipe-again > form {
  margin-top: 0.75rem;
}

.wipe-firms {
  border: 0;
  margin: 0;
  padding: 0;
}

.wipe-firms legend {
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: #37352f;
}

.wipe-firms .choice-row {
  margin: 0;
  font-weight: 400;
}

.section-card-danger > summary .section-title {
  color: #b91c1c;
}

/* --- Settings: firms section --- */

.settings-firm-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.settings-firm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid #f0efec;
}

.settings-firm-row:first-child {
  border-top: none;
}

.settings-firm-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.settings-firm-name {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}

.settings-firm-meta {
  font-size: 0.85rem;
}

/* --- /dates agenda rows (F12) ---
   The removed firm-page ".deadline-*" block, renamed to ".date-*" and reused
   (bob-designer v28 §D/§A2). One row = one (channel, practice-area) upcoming
   date; channels group under ".subhead" headers. Anchor (practice area) → fact
   (date) → the single F11 urgency accent. Light-theme, existing tokens only. */
/* Each directory is a bordered card, like .section-card. */
.date-group {
  border: 1px solid #ebebea;
  border-radius: 10px;
  margin-bottom: 0.85rem;
  padding: 1rem 1.25rem 0.5rem;
  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.04);
}

.date-group .subhead {
  margin-top: 0;
}

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

.date-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid #f0efec;
}

.date-row:first-child {
  border-top: none;
}

.date-body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.date-area {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: #37352f;
}

.date-when {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.date-figure {
  font-size: 0.9rem;
  color: #55534e;
}

/* Month-granular rows carry no day-count pill, so the urgency accent attaches
   to the "by end of {month}" figure itself (amber near, amber+bold imminent). */
.date-figure-near {
  color: #9a6a1a;
}

.date-figure-imminent {
  color: #9a6a1a;
  font-weight: 600;
}

.date-days-far,
.date-marked {
  font-size: 0.8rem;
  color: #9b9a97;
}

.date-days-imminent {
  font-weight: 600;
}

/* The per-firm mark/undo column on /dates rows (F16, moved by F18 D5). */
.date-action {
  flex-shrink: 0;
}

.date-empty {
  padding: 0.75rem 0;
  font-size: 0.9rem;
  color: #b4b4b0;
}

/* --- Delete-firm challenge --- */

.delete-summary-lead {
  margin: 0 0 0.75rem;
}

.delete-summary-list {
  margin: 0 0 0.75rem;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.resend-form {
  margin-top: 0.75rem;
}

/* --- Firm chooser (add-a-deal with no firm hint) --- */

.firm-choose-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

/* --- Mobile navigation (top bar + bottom tabs + more sheet) --- */
/* All hidden by default; revealed under 768px in the responsive block below. */

.mobile-top-bar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  z-index: 90;
  padding: 0 1.25rem;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.mobile-top-bar.is-scrolled {
  border-bottom-color: #f0efec;
}

.mobile-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #37352f;
}

.mobile-tab-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid #f0efec;
}

.mobile-tab-bar-inner {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  max-width: 480px;
  margin: 0 auto;
}

.mobile-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.4rem 0.35rem 0.3rem;
  min-height: 52px;
  border: 0;
  background: transparent;
  color: #9b9a97;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease;
}

.mobile-tab:hover {
  color: #55534e;
  opacity: 1;
}

.mobile-tab-icon {
  display: inline-flex;
}

.mobile-tab[aria-current="page"],
.mobile-tab.is-active {
  color: #37352f;
}

.mobile-tab-label {
  line-height: 1;
}

.mobile-sheet-backdrop {
  /* visibility (not display) so the fade actually runs — a display:none →
     block swap lands in the same frame as the opacity change and kills it. */
  visibility: hidden;
  position: fixed;
  inset: 0;
  z-index: 180;
  background: rgba(31, 30, 28, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s;
}

.mobile-sheet {
  visibility: hidden;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 190;
  background: #ffffff;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  padding: 0.5rem 0.75rem calc(1rem + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 32px rgba(31, 30, 28, 0.12);
  transform: translateY(100%);
  pointer-events: none;
  transition: transform 0.22s cubic-bezier(0.2, 0.6, 0.2, 1), visibility 0.22s;
}

body.sheet-open .mobile-sheet-backdrop {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

body.sheet-open .mobile-sheet {
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.mobile-sheet-handle {
  display: block;
  width: 40px;
  height: 4px;
  margin: 0.5rem auto 0.75rem;
  background: #e3e2de;
  border-radius: 999px;
}

.mobile-sheet-email {
  padding: 0.3rem 0.75rem 0.75rem;
  font-size: 0.8rem;
  color: #9b9a97;
}

.mobile-sheet-divider {
  height: 1px;
  background: #f0efec;
  margin: 0.25rem 0;
  border: 0;
}

.mobile-sheet a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.75rem;
  font-size: 0.95rem;
  color: #37352f;
  border-radius: 10px;
  transition: background 0.15s ease;
}

.mobile-sheet a:hover {
  background: #f7f6f3;
  opacity: 1;
}

.mobile-sheet-icon {
  display: inline-flex;
  color: #55534e;
  flex-shrink: 0;
}

/* The sheet entry for the current page, as the side nav marks it. */
.mobile-sheet a[aria-current="page"] {
  background: #f7f6f3;
  font-weight: 500;
}

.mobile-sheet a[aria-current="page"] .mobile-sheet-icon {
  color: #37352f;
}

/* --- Responsive --- */

@media (max-width: 768px) {
  .main-content {
    padding: 2rem 1.5rem 3rem;
  }

  /* Only pages that render the mobile bars reserve room for them —
     auth / error pages (no nav) keep their centred layout. */
  .layout:has(.mobile-tab-bar) .main-content {
    padding: calc(52px + 1.25rem) 1.5rem calc(72px + env(safe-area-inset-bottom));
  }

  .side-nav {
    display: none;
  }

  .mobile-top-bar {
    display: flex;
  }

  .mobile-tab-bar {
    display: block;
  }

  h1 {
    font-size: 1.5rem;
  }

  .auth-wrapper {
    padding: 1.5rem;
  }

  .recovery-codes {
    grid-template-columns: 1fr;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .next-action-slim {
    flex-direction: column;
    align-items: flex-start;
  }

  .ddl-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }

  /* Comfortable tap target for the "due soon" prose rows (F15). */
  .ddl-due-row {
    padding: 0.55rem 0.5rem;
  }

  /* /dates agenda: the practice area stacks over the date (§F12 A7). */
  .date-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .inline-add {
    max-width: none;
  }
}

/* ---------------------------------------------------------------------------
   Export flow (F5) — channel picker, readiness checklist
   --------------------------------------------------------------------------- */

.plain-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

/* ================================================================
   Export action — the payoff button
   The whole app stages toward one moment: a correctly-formatted
   submission file falling out of the user's own data. That terminal
   download earns the app's single hero treatment — the darkest ink
   ground with a whisper of vertical gradient, an inner top highlight,
   a size step up, the download glyph, and the only button that RESTS
   with elevation and then lifts on hover. Weights descend from there:
     .btn-export       hero    — the actual download POST (readiness)
     .ex-ico on primary        — scent on entry CTAs toward /export
   Ink and gradient only — no accent colour, no glow, no motion loop.
   ================================================================ */

.ex-ico {
  flex-shrink: 0;
}

/* The shared plus.circle glyph on "Add…" buttons (_icons.icon_plus_circle),
   sized to the label so btn-sm scales with it. */
.add-ico,
.btn-ico {
  flex-shrink: 0;
  width: 1.15em;
  height: 1.15em;
}

/* A 22×16 glyph keeps the 1.15em height. */
.btn-ico-wide {
  width: calc(1.15em * 22 / 16);
}

/* Edit ↔ Done: the icon follows aria-pressed (the script only swaps the label). */
.deals-edit-toggle .btn-ico:nth-of-type(2),
.deals-edit-toggle[aria-pressed="true"] .btn-ico:first-of-type {
  display: none;
}
.deals-edit-toggle[aria-pressed="true"] .btn-ico:nth-of-type(2) {
  display: inline;
}

/* Hero — the terminal download trigger. */
.btn-export {
  gap: 0.5rem;
  padding: 0.8rem 1.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(180deg, #3a3833 0%, #2c2b26 100%);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(15, 15, 15, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: background 0.15s, box-shadow 0.15s,
    transform 0.15s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.btn-export:hover {
  color: #ffffff;
  background: linear-gradient(180deg, #34322d 0%, #232219 100%);
  box-shadow: 0 10px 26px rgba(15, 15, 15, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.btn-export:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(15, 15, 15, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.btn-export:focus-visible {
  outline: none;
  box-shadow: 0 4px 12px rgba(15, 15, 15, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 3px rgba(55, 53, 47, 0.28);
}

/* F45 — the one-line summaries picker: name + Remove, then the field. */
.summary-picker .picker-row {
  flex-wrap: wrap;
  row-gap: 0.4rem;
}

.summary-picker .summary-field {
  flex: 1 1 100%;
  padding-right: 0.45rem;
}

.summary-field textarea {
  font-size: 0.85rem;
  /* A long prefill shows whole (up to ~10 lines), so it can be cut down. */
  field-sizing: content;
  min-height: 4.5rem;
  max-height: 15rem;
}

.summary-picker .picker-list .summary-field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.summary-field-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #9b9a97;
}

.summary-field-note {
  margin-right: auto;
}

/* The counter never breaks ("335 /" then "300") beside a wrapping note. */
.summary-counter {
  flex: none;
  white-space: nowrap;
}

/* The cap hint sits under "Add summary", not a form-group gap below it. */
.summary-card .summary-picker {
  margin-bottom: 0;
}

.summary-counter.is-over,
.summary-field-over {
  color: #9a6a1a;
  font-weight: 500;
}

.picker-fields .summary-field + .summary-field {
  margin-top: 0.75rem;
}

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

.channel-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* The card's button hugs its label, like every other secondary button. */
.channel-card > .btn {
  align-self: flex-start;
  margin-top: 0.25rem;
}

.export-read-only {
  margin: 0 0 0.75rem;
}

.readiness-warnings .warning-list {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--text-secondary, #6b6b6b);
  font-size: 13px;
}

.link-sm {
  font-size: 12px;
  margin-left: 6px;
  white-space: nowrap;
}

.form-alert-success {
  background: #eef6ef;
  color: #2f6f3e;
  border: 1px solid #cfe6d3;
}

.download-filename {
  display: block;
  margin-top: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85rem;
  font-weight: 600;
  color: #2f6f3e;
}

.sample-card {
  margin-top: 16px;
}

.sample-list {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 13px;
}

.sample-list li {
  margin-bottom: 4px;
}

.sample-link {
  margin-left: 0;
  align-self: flex-start;
}

/* F23 "then submit" step: a quiet footer below the export CTA, never a second button. */
.submit-step {
  padding-top: 14px;
  border-top: 1px solid #f0efec;
}

/* In the header the step continues the subtitle: no card-footer hairline. */
.page-header .submit-step {
  margin-top: 0.75rem;
  padding-top: 0;
  border-top: 0;
}

.submit-step .form-hint {
  margin: 0 0 6px;
  line-height: 1.45;
}

.submit-step .link-sm {
  display: inline-block;
  margin-left: 0;
  line-height: 1.5;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: normal;
  overflow-wrap: break-word;
  border-radius: 4px;
}

.submit-step .link-sm:hover,
.dash-foot .link-sm:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #b4b4b0;
}

.submit-step .link-sm:focus-visible,
.dash-foot .link-sm:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(55, 53, 47, 0.12);
}

.submit-ico {
  margin-left: 5px;
  vertical-align: -1px;
  color: #9b9a97;
}

.submit-ico-lead {
  margin: 0 6px 0 0;
}

.submit-step .link-sm:hover .submit-ico,
.dash-foot .link-sm:hover .submit-ico {
  color: #37352f;
}

/* Inside the success alert the step inherits the alert's green voice. */
.form-alert-success .submit-step {
  margin-top: 10px;
  padding-top: 10px;
  border-top-color: #cfe6d3;
}

.form-alert-success .submit-step .form-hint,
.form-alert-success .submit-step .link-sm,
.form-alert-success .submit-ico {
  color: #2f6f3e;
}

.form-alert-success .submit-step .link-sm {
  font-weight: 600;
}

.form-alert-success .submit-step .link-sm:hover {
  text-decoration-color: #2f6f3e;
}

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

/* --- Shared access (F8) --- */

.subhead {
  font-size: 0.9rem;
  font-weight: 600;
  color: #37352f;
  margin: 1.5rem 0 0.5rem;
}

.member-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
}

.member-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f0efed;
}

.member-row:last-child {
  border-bottom: none;
}

.member-name {
  font-size: 0.9rem;
  color: #37352f;
}

.member-action {
  margin-left: auto;
}

/* ================================================================
   Smart importer from a previous submission (F9)
   ================================================================ */

/* Firm-page secondary card — calm, never competes with the next-action CTA. */
.from-submission-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid #ebebea;
  border-radius: 12px;
  background: #ffffff;
}

.from-submission-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9b9a97;
  margin-bottom: 0.35rem;
}

.from-submission-title {
  font-size: 1rem;
  font-weight: 600;
  color: #37352f;
  margin-bottom: 0.35rem;
}

.from-submission-cta .btn {
  flex-shrink: 0;
}

/* Reconcile page — per-entity checkable rows. */
.reconcile-form .card {
  margin-bottom: 1.25rem;
}

.reconcile-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.reconcile-section-head .section-title {
  margin: 0;
}

.reconcile-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid #f0efed;
  cursor: pointer;
}

.reconcile-row:last-child {
  border-bottom: none;
}

.reconcile-row input[type="checkbox"] {
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.reconcile-check-spacer {
  display: inline-block;
  width: 13px;
  flex-shrink: 0;
}

.reconcile-row-exists {
  opacity: 0.7;
}

.reconcile-row-main {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}

.reconcile-row-name {
  font-size: 0.92rem;
  font-weight: 500;
  color: #37352f;
}

.reconcile-row-sub,
.reconcile-row-meta {
  font-size: 0.8rem;
  color: #77756f;
  overflow-wrap: anywhere;
}

.reconcile-row-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.1rem;
}

.reconcile-row .badge {
  flex-shrink: 0;
  align-self: center;
}

/* F33 new people: the tick column is a full-height hit area; an unticked row recedes. */
.new-people-list {
  margin-top: 0.75rem;
  border-top: 1px solid #f0efec;
}

.new-person-row {
  cursor: default;
  padding: 0.75rem 0;
}

.new-person-tick {
  display: flex;
  align-self: stretch;
  align-items: flex-start;
  padding: 0 0.4rem;
  margin: 0 -0.4rem;
  cursor: pointer;
}

.new-person-row .new-person-tick input[type="checkbox"] {
  margin-top: 0.7rem;
  cursor: pointer;
}

.new-person-row .reconcile-row-main {
  transition: opacity 0.2s ease;
}

.new-person-row:has(.new-person-tick input:not(:checked)) .reconcile-row-main {
  opacity: 0.45;
}

.new-person-name {
  max-width: 22rem;
}

/* F35: new people under a file's own lawyer list, in the same card. */
.new-people-title {
  margin: 1.5rem 0 0.25rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: #55534e;
}

.new-person-row .reconcile-row-meta {
  font-size: 0.85rem;
  margin-top: 0.3rem;
}

.import-lead {
  white-space: nowrap;
}

.reconcile-note-list {
  margin: 0.5rem 0 0 1.1rem;
  padding: 0;
  font-size: 0.88rem;
  color: #55534e;
}

.reconcile-actions {
  position: sticky;
  bottom: 0;
  padding: 1rem 0;
  background: linear-gradient(to top, #ffffff 70%, rgba(255, 255, 255, 0));
}

/* F26 one-line summaries: the summary is the payload, so it reads as body
   text (it wraps up to 300 characters); the controls sit on the text column. */
.summary-text {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #55534e;
  overflow-wrap: break-word;
}

.summary-row {
  cursor: default;
  padding: 0.9rem 0;
}

.summary-row .summary-text {
  color: #37352f;
}

.summary-target {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.summary-target label {
  font-size: 0.8rem;
  color: #77756f;
  white-space: nowrap;
}

.summary-target select {
  width: auto;
  min-width: 14rem;
  max-width: 100%;
}

.summary-too-long,
.summary-over {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: #9a6a1a;
}

.summary-card [hidden] {
  display: none;
}

.summary-card .reconcile-section-head {
  margin-bottom: 0.25rem;
}

.summary-card .form-hint {
  margin: 0 0 0.25rem;
}

.summary-list {
  margin-top: 0.75rem;
  border-top: 1px solid #f0efec;
}

.summary-card .reconcile-row {
  padding: 0.8rem 0;
}

.summary-card .reconcile-row-main {
  gap: 0.2rem;
}

.summary-card .reconcile-row:has(input:disabled) {
  cursor: not-allowed;
}

.summary-card .reconcile-row:has(input[type="checkbox"]:disabled) .reconcile-row-main {
  opacity: 0.45;
}

.summary-new {
  cursor: default;
}

.summary-new input[type="text"] {
  margin-top: 0.3rem;
}

.summary-new input[type="text"]::placeholder {
  color: #b4b4b0;
}

.summary-new input[type="text"]:disabled {
  background: #f7f6f3;
  cursor: not-allowed;
}

.summary-notes {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f0efec;
  gap: 0.35rem;
}

.summary-notes li {
  font-size: 0.8rem;
  color: #9b9a97;
}

#summary-have {
  white-space: nowrap;
}

#one-line-summaries .form-hint {
  margin-bottom: 0.5rem;
}

/* F29 channel answers card: head and hints sit tight like the summaries
   card; the fields start under the same hairline. */
.answers-card {
  scroll-margin-top: 1.5rem;
}

.answers-card .section-title {
  margin-bottom: 0.25rem;
}

.answers-card .form-hint {
  margin: 0 0 0.25rem;
}

.answers-card .form-hint a {
  color: #37352f;
  font-weight: 500;
}

.answers-card .form-hint a:hover {
  opacity: 0.7;
}

.answers-saved {
  margin: 0.5rem 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #2f6f3e;
}

.answers-card .answers-empty {
  margin-top: 0.5rem;
}

.answers-fields {
  margin-top: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid #f0efec;
}

/* No visible summary row: drop the list's hairline so the notes' one stands alone. */
.summary-list:not(:has(> :not([hidden]))) {
  margin-top: 0;
  border-top: 0;
}

/* The deals line sits apart from the delete button. */
#delete-department form {
  margin-top: 1.25rem;
}

.answers-fields > .form-group:last-child,
.answers-fields > .grid-2:last-child .form-group {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  /* Clear the 52px fixed top bar when landing on #answers-card. */
  .answers-card {
    scroll-margin-top: calc(52px + 1rem);
  }
}

@media (max-width: 768px) {
  .summary-target {
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
  }
  .summary-target select {
    width: 100%;
    min-width: 0;
  }
}

/* ================================================================
   People directory (F13) — the list + the "people book" detail.
   All rules are .people-* / .pb-* scoped so the firm-page tables are
   untouched; the read-only firm field (.form-static) is shared by the
   lawyer edit form when it is reached from a people book.
   ================================================================ */

/* Read-only field on a form (the pinned Firm on a people-book lawyer edit). */
.form-static {
  padding: 0.55rem 0.7rem;
  font-size: 0.9rem;
  color: #55534e;
  background: #faf9f7;
  border: 1px solid #ebebea;
  border-radius: 6px;
}

/* --- A. The People list --- */

.people-list {
  max-width: 960px;
}

.people-search {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1rem;
  max-width: 480px;
}

.people-search-field {
  position: relative;
  flex: 1;
}

.people-search-icon {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  pointer-events: none;
}

.people-search-field input {
  padding-left: 2rem;
}

/* F71: the /deals, /lawyers, /referees bar spans the list column, taller. */
.people-search-wide {
  max-width: none;
}

.people-search-wide .people-search-icon {
  left: 0.85rem;
}

.people-search-wide .people-search-field input {
  min-height: 44px;
  padding: 0.7rem 1rem 0.7rem 2.6rem;
  /* px, not rem: the root is 14px and iOS zooms into anything under 16px. */
  font-size: 16px;
  background: #ffffff;
  border: 1px solid #d9d8d4;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.04);
}

/* Restated: the rule above outranks the global input:focus. */
.people-search-wide .people-search-field input:focus {
  border-color: #b4b4b0;
  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.04), 0 0 0 3px rgba(55, 53, 47, 0.06);
}

/* F72: the search (and the bulk row) stick to the top and compact once stuck.
   The in-flow height is the same in both states, so the list never moves. */
html:has(.list-bar) {
  --list-bar-top: 0px;
  --list-bar-h: 56px;
  scroll-padding-top: calc(var(--list-bar-top) + var(--list-bar-h) + 0.75rem);
}

html:has(.list-bar .deals-bulk-bar:not([hidden])) {
  --list-bar-h: 90px;
}

.list-bar {
  position: sticky;
  top: var(--list-bar-top);
  z-index: 10;
  background: #ffffff;
  padding: 0;
  margin-bottom: 1.5rem;
}

.list-bar-row {
  display: flex;
  align-items: center;
}

.list-bar .people-search-wide {
  margin: 0;
  flex: 1;
  min-width: 0;
}

.list-bar-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #37352f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
  opacity: 0;
  margin-right: 0;
  transform: translateY(3px);
}

.list-bar .deals-bulk-bar {
  margin: 10px 0 0;
  min-height: 24px;
}

.list-bar.is-stuck {
  padding: 10px 0;
  margin-bottom: 9px;
  box-shadow: 0 1px 0 #f0efec;
}

.list-bar.is-stuck .people-search-wide .people-search-field input {
  min-height: 36px;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.list-bar.is-stuck .list-bar-title {
  max-width: 12rem;
  opacity: 1;
  margin-right: 1rem;
  transform: none;
}

/* Set by the script after the first paint, so a mid-list load docks without animating. */
.list-bar.is-ready {
  transition: padding 0.2s ease, margin 0.2s ease, box-shadow 0.2s ease;
}

.list-bar.is-ready .people-search-wide .people-search-field input {
  transition: min-height 0.2s ease, padding 0.2s ease, border-color 0.15s, box-shadow 0.15s;
}

.list-bar.is-ready .list-bar-title {
  transition: max-width 0.2s ease, opacity 0.2s ease, margin 0.2s ease, transform 0.2s ease;
}

/* The column labels dock under the bar; the wrapper's overflow trapped them. */
@media (min-width: 641px) {
  .people-list .table-wrap {
    overflow: visible;
  }

  /* The inset hairline travels with the docked cell; a collapsed border would not. */
  .people-list .people-table thead th {
    top: calc(var(--list-bar-top) + var(--list-bar-h));
    border-bottom: none;
    box-shadow: inset 0 -1px 0 #ebebea;
  }
}

/* Phones: the bar docks under the fixed top bar, full-bleed, no title, 44px field. */
@media (max-width: 768px) {
  html:has(.list-bar) {
    --list-bar-top: 52px;
  }

  .list-bar {
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
  }

  .list-bar-title {
    display: none;
  }

  .list-bar.is-stuck {
    padding: 6px 1.5rem;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
  }

  .list-bar.is-stuck .people-search-wide .people-search-field input {
    min-height: 44px;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }

  /* One hairline for the fused chrome: the bar's. */
  .layout:has(.list-bar.is-stuck) .mobile-top-bar {
    border-bottom-color: transparent;
  }
}

@media print {
  .list-bar {
    position: static;
    box-shadow: none;
  }
}

/* F74: a search typed in the stuck bar latches it; the list body then reserves
   a screen of height so a short result cannot unstick it. Released at the top. */
html:has(.list-bar) {
  --list-bar-flow: 65px;
}

html:has(.list-bar .deals-bulk-bar:not([hidden])) {
  --list-bar-flow: 99px;
}

.list-bar.is-latched ~ .list-body {
  min-height: calc(100vh - var(--list-bar-top) - var(--list-bar-flow));
  min-height: calc(100dvh - var(--list-bar-top) - var(--list-bar-flow));
}

/* Focus in the bar drops the F72 scroll padding: otherwise each keystroke's
   caret reveal scrolls the page up from under the stuck bar and unsticks it. */
html:has(.list-bar :focus) {
  scroll-padding-top: 0;
}

/* F74: the header actions behind a ⋯ after the field, in the compact bar only. */
.list-bar-more {
  flex: none;
  width: 36px;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  visibility: hidden;
}

.list-bar.is-stuck .list-bar-more {
  max-width: 36px;
  margin-left: 8px;
  opacity: 1;
  visibility: visible;
}

/* Follows the details' animated width; clipped so it never overflows at rest. */
.list-bar-more > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
}

.row-menu.list-bar-more > summary:hover {
  background: #f7f6f3;
  color: #55534e;
}

.row-menu.list-bar-more[open] > summary {
  background: #f7f6f3;
  color: #37352f;
}

.list-bar-more .row-menu-panel {
  top: calc(100% + 6px);
  width: max-content;
  min-width: 15.5rem;
}

.list-bar-more .row-menu-item {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Visibility flips after the fade out, so the ⋯ leaves the tab order last. */
.list-bar.is-ready .list-bar-more {
  transition: max-width 0.2s ease, margin 0.2s ease, opacity 0.2s ease, visibility 0s linear 0.2s;
}

.list-bar.is-ready.is-stuck .list-bar-more {
  transition: max-width 0.2s ease, margin 0.2s ease, opacity 0.2s ease, visibility 0s;
}

@media (max-width: 768px) {
  .list-bar-more {
    width: 44px;
  }

  .list-bar.is-stuck .list-bar-more {
    max-width: 44px;
  }

  .list-bar-more > summary {
    height: 44px;
  }
}

/* F79: an icon on every ⋯ item; the active sort order ends with a check. */
.list-bar-more .row-menu-item > svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: #55534e;
}

.list-bar-more .row-menu-item > span {
  flex: 1 1 auto;
}

.list-bar-more .row-menu-item:active {
  background: rgba(55, 53, 47, 0.08);
}

.list-bar-more .row-menu-item[aria-current="true"] {
  cursor: default;
}

.list-bar-more .row-menu-item[aria-current="true"] > .btn-ico:last-child {
  margin-left: 0.4rem;
  color: #37352f;
}

/* Edit ↔ Done: the icon follows the header toggle's aria-pressed. */
.list-bar-edit .btn-ico:nth-of-type(2),
.page:has(.deals-edit-toggle[aria-pressed="true"]) .list-bar-edit .btn-ico:first-of-type {
  display: none;
}
.page:has(.deals-edit-toggle[aria-pressed="true"]) .list-bar-edit .btn-ico:nth-of-type(2) {
  display: inline;
}

@media (max-width: 768px) {
  .list-bar-more .row-menu-item {
    min-height: 44px;
  }
}

.people-count {
  font-size: 0.82rem;
  color: #9b9a97;
  margin: 0 0 0.75rem;
}

/* F77: the count and the sort control share one line, as siblings. */
.people-count-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0 0 0.75rem;
}

/* Below ~330px the control takes its own line instead of squeezing the count. */
.people-count-row .people-count {
  flex: 1 1 8rem;
  min-width: 0;
  margin: 0;
}

/* F90: the firm's invitation domains under the Shared access count, read-only. */
.sharing-domains {
  margin: -0.4rem 0 0.9rem;
  font-size: 0.82rem;
  color: #9b9a97;
  overflow-wrap: anywhere;
}

.sharing-domains strong {
  font-weight: 500;
  color: #55534e;
}

/* F90: a person with access outside the firm's domains (kept, only marked). */
.sharing-outside {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: #9a6a1a;
}

.sort-seg {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.sort-seg-label {
  font-size: 0.82rem;
  color: #9b9a97;
}

.sort-seg-track {
  display: inline-flex;
  padding: 2px;
  background: #f7f6f3;
  border-radius: 8px;
}

.sort-seg-item {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 0.7rem;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
  color: #55534e;
  white-space: nowrap;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.sort-seg-item:hover {
  background: rgba(55, 53, 47, 0.06);
  color: #37352f;
}

.sort-seg-item:active {
  background: rgba(55, 53, 47, 0.1);
}

.sort-seg-item[aria-current="true"] {
  background: #ffffff;
  color: #37352f;
  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.08), 0 0 0 1px rgba(15, 15, 15, 0.04);
  cursor: default;
}

.sort-seg-item:focus-visible {
  outline: 2px solid #37352f;
  outline-offset: 0;
}

/* Nothing to sort once the instant search empties the list. */
.list-body:has(#people-js-empty:not([hidden])) .sort-seg,
.list-body:has(#deals-js-empty:not([hidden])) .sort-seg {
  visibility: hidden;
}

@media (max-width: 768px) {
  .sort-seg-item {
    min-height: 30px;
    padding: 0 0.8rem;
  }
}

/* F85 — the department strip between the count and Sort by: desktop only. */
.dept-strip {
  display: none;
}

@media (min-width: 769px) {
  .people-count-row:has(.dept-strip) {
    align-items: baseline;
  }

  .people-count-row:has(.dept-strip) .people-count {
    flex: none;
  }

  /* Without JS the strip fills the middle and wraps. */
  .dept-strip {
    flex: 1 1 12rem;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
  }

  .people-count-row.is-fitted .dept-strip {
    flex: none;
    flex-wrap: nowrap;
  }

  /* Fitted: chips keep their natural width, so the script measures them true. */
  .people-count-row.is-fitted .dept-chip,
  .people-count-row.is-fitted .dept-more {
    flex: none;
    max-width: none;
  }

  .people-count-row.is-stacked .sort-seg {
    flex-basis: 100%;
    justify-content: flex-end;
  }
}

.dept-chip,
.dept-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 24px;
  min-width: 0;
  max-width: 100%;
  padding: 0 0.55rem;
  border: 0;
  border-radius: 6px;
  background: #f7f6f3;
  font: inherit;
  font-size: 0.78rem;
  line-height: 1;
  color: #55534e;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.dept-chip[hidden],
.dept-more[hidden] {
  display: none;
}

.dept-chip:hover {
  background: #efeeea;
}

.dept-chip:active {
  background: #e9e8e4;
}

/* 1px offset: the ring stays clear of the next chip (0.3rem gap). */
.dept-chip:focus-visible,
.dept-more:focus-visible {
  outline: 2px solid #37352f;
  outline-offset: 1px;
}

.dept-chip-name {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.2em 0;
}

.dept-chip-none .dept-chip-name {
  color: #9b9a97;
}

.dept-chip-count {
  color: #9b9a97;
  font-variant-numeric: tabular-nums;
}

.dept-more {
  background: transparent;
  padding: 0 0.4rem;
}

.dept-more:hover {
  color: #37352f;
}

.dept-more.is-lone {
  background: #f7f6f3;
  padding: 0 0.55rem;
}

.dept-more.is-lone:hover {
  background: #efeeea;
}

/* The dialog: read-only, a header that stays, a body that scrolls. */
.modal-dialog.dept-dialog {
  width: min(28rem, calc(100vw - 2rem));
  max-height: min(36rem, calc(100dvh - 4rem));
  padding: 0;
  overflow: hidden;
}

.modal-dialog.dept-dialog[open] {
  display: flex;
  flex-direction: column;
}

.dept-dialog:focus {
  outline: none;
}

.dept-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1rem 0.9rem 1.5rem;
  border-bottom: 1px solid #f0efec;
}

.modal-dialog .dept-dialog-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}

.dept-dialog-caption {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: #9b9a97;
}

/* A long caption breaks at a " · ", never inside the order phrase. */
.dept-dialog-order {
  white-space: nowrap;
}

.dept-dialog-done:focus-visible {
  outline: 2px solid #37352f;
  outline-offset: 2px;
}

.dept-dialog-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.5rem 1.5rem 1.25rem;
}

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

.dept-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid #f0efec;
  font-size: 0.9rem;
}

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

.dept-row-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.dept-row-none .dept-row-name {
  color: #9b9a97;
}

.dept-row-count {
  flex: none;
  font-size: 0.82rem;
  color: #9b9a97;
  font-variant-numeric: tabular-nums;
}

.dept-dialog-sub {
  margin: 1rem 0 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: #9b9a97;
}

.dept-rows-zero .dept-row {
  padding: 0.45rem 0;
  border: 0;
  font-size: 0.85rem;
  color: #9b9a97;
}

.people-empty {
  color: #9b9a97;
  padding: 1.5rem 0;
}

.people-empty .btn {
  margin-left: 0.5rem;
}

/* Instant search: rows filtered out client-side. !important so the rule also
   wins over the <=640px card layout, where rows become display:block. */
.people-table tbody tr.hidden-by-search {
  display: none !important;
}

.people-table td {
  color: #37352f;
}

.people-table td.people-dim {
  color: #55534e;
}

.people-name-link {
  color: #37352f;
  text-decoration: none;
  font-weight: 500;
}

.people-name-link:hover {
  text-decoration: underline;
}

.people-name-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(55, 53, 47, 0.06);
  border-radius: 3px;
}

.people-table tbody tr {
  cursor: pointer;
  transition: background 0.15s;
}

.people-table tbody tr:hover {
  background: #faf9f7;
}

/* Firm-page click-to-edit rows (F15 items 6/7). Scoped twin of the .people-table
   row rule WITHOUT its sticky-header / hidden-by-search rules, so only the
   opted-in Deals + Lawyers tables get it and the sibling firm-page tables stay
   untouched. */
.rowlink-table tbody tr {
  cursor: pointer;
  transition: background 0.15s;
}

.rowlink-table tbody tr:hover {
  background: #faf9f7;
}

.people-table thead th {
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 1;
}

/* --- B. The people book --- */

.pb-header-row {
  margin-bottom: 0.5rem;
}

.pb-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pb-monogram {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #f1f0ed;
  color: #37352f;
  font-weight: 600;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pb-meta {
  color: #9b9a97;
  font-size: 0.9rem;
  margin-top: 0.15rem;
}

.pb-meta a {
  color: #9b9a97;
  font-weight: 500;
}

.pb-meta a:hover {
  color: #37352f;
}

.pb-badges {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.pb-field {
  display: flex;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f0efec;
}

.pb-field-label {
  flex: 0 0 150px;
  color: #9b9a97;
  font-size: 0.85rem;
}

.pb-field-value {
  flex: 1;
  min-width: 0;
  color: #37352f;
  font-size: 0.9rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

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

.pb-deal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid #f0efec;
  color: #37352f;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.15s;
}

.pb-deal-row:hover {
  background: #faf9f7;
}

.pb-deal-label {
  font-size: 0.9rem;
}

.pb-deal-chevron {
  color: #b4b4b0;
  flex-shrink: 0;
}

.pb-deals-empty {
  padding: 0.5rem 0;
}

/* --- D. Responsive: the 6-col list stacks to labelled cards ≤640px --- */

@media (max-width: 640px) {
  .people-table thead {
    display: none;
  }

  .people-table tbody tr {
    display: block;
    padding: 0.75rem 0.25rem;
    border-bottom: 1px solid #ebebea;
  }

  .people-table td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0;
    border: none;
  }

  .people-table td::before {
    content: attr(data-label);
    color: #9b9a97;
    font-size: 0.78rem;
  }

  /* Name is the card title: drop the label, read the two cells as one line. */
  .people-table td.people-name-cell {
    justify-content: flex-start;
    color: #37352f;
    font-size: 0.95rem;
    font-weight: 500;
  }

  .people-table td.people-name-cell::before {
    content: none;
  }

  /* Inline so first and last name share the title line. */
  .people-table td.people-name-cell {
    display: inline-flex;
  }

  .pb-header-row {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .pb-header {
    flex-wrap: wrap;
  }

  .pb-field {
    flex-direction: column;
    gap: 0.15rem;
  }

  .pb-field-label {
    flex-basis: auto;
  }
}

/* --- F14: The Deals directory (GET /deals) ---
   Twins the .people-table behaviour into a new .deals-* block, scoped so the
   People list AND the firm-page tables are provably untouched. Reuses the
   directory-generic widgets by class (.people-search/-field/-icon/-count/
   -empty/-name-link, .table/.table-wrap, .badge/.badge-accent, .text-muted). */

.deals-list {
  max-width: 960px;
}

/* Instant search: rows filtered out client-side. !important so the rule also
   wins over the <=640px card layout, where rows become display:block. */
.deals-table tbody tr.hidden-by-search {
  display: none !important;
}

.deals-table td {
  color: #37352f;
}

/* F37 sheets: the bulk choice is its own step under the card's intro. */
.sheet-bulk {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid #f0efec;
}

.sheet-bulk .form-hint {
  margin-top: 0.4rem;
}

.sheet-select {
  max-width: 24rem;
  font-size: 0.85rem;
  padding: 0.45rem 0.6rem;
}

/* F67 — the check page's Deals card: each picked deal is two lines (client
   and tag, then muted details and submission chips); the Add dialog's results
   reuse the same info block. Remove sits top right. */
.deal-card [hidden] {
  display: none !important;
}

.deal-picker {
  margin-top: 0.75rem;
}

.deal-picker .picker-row {
  align-items: flex-start;
  min-height: 3.5rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.deal-pick,
.picker-result .deal-info {
  flex: 1;
  min-width: 0;
}

.deal-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0;
  line-height: 1.4;
}

.deal-client {
  font-size: 0.9rem;
  font-weight: 600;
  color: #37352f;
  overflow-wrap: anywhere;
}

.deal-line .badge {
  padding: 0.05rem 0.45rem;
  font-size: 0.7rem;
}

.deal-meta {
  margin: 0.1rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #9b9a97;
  overflow-wrap: anywhere;
}

.deal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.35rem 0 0;
}

.deal-chip {
  padding: 0.05rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #f1f0ed;
  font-size: 0.72rem;
  line-height: 1.5;
  color: #55534e;
  white-space: nowrap;
}

/* Exported but never submitted: one fainter chip. */
.deal-chip-exported {
  border-color: #e3e2de;
  background: transparent;
  color: #9b9a97;
}

.deal-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
  margin: 0.4rem 0 0;
}

.deal-status .badge {
  white-space: nowrap;
}

.deal-pick .sheet-select {
  display: block;
  width: 100%;
  margin-top: 0.45rem;
}

.deal-picker .picker-actions {
  margin-top: -0.2rem;
}

.deals-table tbody tr {
  cursor: pointer;
  transition: background 0.15s;
}

.deals-table tbody tr:hover {
  background: #faf9f7;
}

.deals-table thead th {
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 1;
}

/* F19 edit mode: the checkbox column and action bar exist only while editing. */
.deals-table .deals-select-col {
  display: none;
  width: 2.25rem;
}

.deals-bulk-form.is-editing .deals-table .deals-select-col {
  display: table-cell;
}

.deals-table td.deals-select-col,
.deals-table th.deals-select-col {
  vertical-align: middle;
}

.deals-select-col input[type="checkbox"],
.deals-bulk-all input[type="checkbox"] {
  width: auto;
  margin: 0;
  cursor: pointer;
  accent-color: #37352f;
}

.deals-bulk-form.is-editing .deals-table tbody tr:has(input[name="deal_ids"]:checked),
.deals-bulk-form.is-editing .deals-table tbody tr:has(input[name="person_ids"]:checked) {
  background: #faf9f7;
}

.deals-bulk-bar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.deals-bulk-bar[hidden],
.deals-bulk-all {
  display: none;
}

.deals-bulk-all {
  align-items: center;
  gap: 0.5rem;
  margin-right: auto;
  font-size: 0.85rem;
  color: #55534e;
  cursor: pointer;
}

.deals-bulk-form.is-editing .deals-table tbody tr {
  cursor: default;
}

/* F80: Delete/Duplicate scroll sideways in their own strip, so the bar never
   grows past 24px; Done stays pinned at the right edge. The 3px pad keeps focus rings. */
.deals-bulk-actions {
  display: flex;
  gap: 0.5rem;
  min-width: 0;
  margin: -3px -3px -3px auto;
  padding: 3px;
  overflow-x: auto;
  scrollbar-width: none;
}

.deals-bulk-actions::-webkit-scrollbar {
  display: none;
}

.deals-bulk-all,
.deals-bulk-actions > .btn,
.deals-bulk-done {
  flex: none;
  white-space: nowrap;
}

.deals-bulk-done,
.deals-bulk-done:hover {
  color: #37352f;
}

.deals-bulk-done {
  font-weight: 600;
}

/* Narrow phones: Select all becomes checkbox-only, above the row checkboxes. */
@media (max-width: 374px) {
  .deals-bulk-bar,
  .deals-bulk-actions {
    gap: 0.4rem;
  }

  .deals-bulk-bar .btn-sm {
    padding-inline: 0.5rem;
  }

  .deals-bulk-all-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .deals-bulk-all:not([hidden]) {
    min-width: 24px;
    min-height: 24px;
  }
}

/* F81: Add to department… joins the strip; its panel hangs from the bar,
   which the strip's overflow does not clip. */
.deals-bulk-bar:has(.bulk-move) {
  position: relative;
}

.bulk-move {
  flex: none;
}

.bulk-move > summary {
  list-style: none;
  white-space: nowrap;
}

.bulk-move > summary::-webkit-details-marker {
  display: none;
}

.bulk-move[open] > summary {
  background: #ebebea;
  color: #37352f;
}

.bulk-move.is-empty > summary {
  opacity: 0.4;
  cursor: not-allowed;
}

.bulk-move-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  width: max-content;
  min-width: 16rem;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.75rem;
  background: #ffffff;
  border: 1px solid #ebebea;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 15, 15, 0.1);
}

.bulk-move-panel label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: #55534e;
}

.bulk-move-panel select {
  width: 100%;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  font-size: 0.88rem;
}

.bulk-move-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

@media (max-width: 899px) {
  .bulk-move-long {
    display: none;
  }
}

/* Phones: a full-width panel, 16px select (no iOS zoom), and edge fades where the strip scrolls. */
@media (max-width: 640px) {
  .bulk-move-panel {
    left: 0;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .bulk-move-panel select {
    font-size: 16px;
  }

  /* Sticky overlays, not a mask: a mask would also clip the open panel. */
  .deals-bulk-actions:has(.bulk-move) {
    scroll-timeline: --bulk-strip inline;
  }

  .deals-bulk-actions:has(.bulk-move)::before,
  .deals-bulk-actions:has(.bulk-move)::after {
    content: "";
    position: sticky;
    z-index: 1;
    flex: none;
    width: 1.5rem;
    margin-block: -3px;
    opacity: 0;
    pointer-events: none;
  }

  /* -3px reaches past the strip's focus-ring padding; the margin also cancels the gap. */
  .deals-bulk-actions:has(.bulk-move)::before {
    left: -3px;
    margin-right: -2rem;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
  }

  .deals-bulk-actions:has(.bulk-move)::after {
    right: -3px;
    margin-left: -2rem;
    background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
  }
}

@media (max-width: 374px) {
  .deals-bulk-actions:has(.bulk-move)::before {
    margin-right: -1.9rem;
  }

  .deals-bulk-actions:has(.bulk-move)::after {
    margin-left: -1.9rem;
  }
}

/* Each fade shows only while there is more to scroll that way (no fade without overflow). */
@supports (animation-timeline: scroll()) {
  @media (max-width: 640px) {
    .deals-bulk-actions:has(.bulk-move)::before {
      animation: bulk-strip-start linear both;
      animation-timeline: --bulk-strip;
    }

    .deals-bulk-actions:has(.bulk-move)::after {
      animation: bulk-strip-end linear both;
      animation-timeline: --bulk-strip;
    }
  }
}

@keyframes bulk-strip-start {
  from { opacity: 0; }
  20%, to { opacity: 1; }
}

@keyframes bulk-strip-end {
  from { opacity: 1; }
  80%, to { opacity: 0; }
}

/* Responsive: the 6-col list stacks to labelled cards <=640px — no horizontal
   scroll, no dropped data (twin of the People card transform, scoped
   .deals-table so the firm-page tables are untouched). */
@media (max-width: 640px) {
  .deals-table thead {
    display: none;
  }

  .deals-list .page-header-row {
    flex-wrap: wrap;
  }

  .deals-table tbody tr {
    display: block;
    padding: 0.75rem 0.25rem;
    border-bottom: 1px solid #ebebea;
  }

  .deals-table td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0;
    border: none;
  }

  .deals-table td::before {
    content: attr(data-label);
    color: #9b9a97;
    font-size: 0.78rem;
  }

  /* Edit mode: the checkbox sits beside the card title, Mail-style indent. */
  .deals-bulk-form.is-editing .deals-table tbody tr {
    position: relative;
    padding-left: 2rem;
  }

  .deals-bulk-form.is-editing .deals-table td.deals-select-col {
    display: flex;
    align-items: center;
    position: absolute;
    left: 0.25rem;
    top: 0.75rem;
    height: 1.9rem;
    padding: 0;
  }

  .deals-bulk-all:not([hidden]) {
    display: inline-flex;
  }

  .deals-table td.deals-select-col::before {
    content: none;
  }
}

/* F70 — /deals is a stack of deal cards in the F67 Deals-card shell: client
   and tag, muted details (dates right), the summary, then chips. */
.deals-stack {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #ebebea;
  border-radius: 6px;
  overflow: hidden;
}

.deals-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background 0.15s;
}

/* A divider above every card that has a visible card before it. */
.deals-row:not(.hidden-by-search) ~ .deals-row {
  border-top: 1px solid #f0efec;
}

.deals-row:hover {
  background: #faf9f7;
}

.deals-row.hidden-by-search {
  display: none !important;
}

.deals-row .deal-info {
  flex: 1;
  min-width: 0;
}

.deals-dates {
  margin: 0.1rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #9b9a97;
  font-variant-numeric: tabular-nums;
}

/* Wider than a phone: the dates take a right column beside the first two
   lines, so a long client or status wraps in place instead of orphaning. */
@media (min-width: 641px) {
  .deals-row .deal-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1.5rem;
  }

  .deals-row .deal-info > * {
    grid-column: 1 / -1;
  }

  .deals-row .deal-line,
  .deals-row .deal-meta {
    grid-column: 1;
  }

  .deals-row .deals-dates {
    grid-column: 2;
    grid-row: 1 / span 2;
    max-width: 18rem;
    margin: 0;
    padding-top: 0.1rem;
    text-align: right;
  }
}

.deals-summary {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.45;
  color: #55534e;
  overflow-wrap: anywhere;
}

/* In a draft now: an accent outline, ahead of the history chips. */
.deal-chip-draft {
  border-color: #c9d2e3;
  background: transparent;
  color: #3b4a6b;
}

/* Edit mode: the checkbox sits at the card's left edge at every width. */
.deals-row-select {
  display: none;
  align-items: center;
  height: 1.3rem;
}

.deals-bulk-form.is-editing .deals-row-select {
  display: flex;
}

.deals-row-select input[type="checkbox"] {
  width: auto;
  margin: 0;
  cursor: pointer;
  accent-color: #37352f;
}

.deals-bulk-form.is-editing .deals-row {
  cursor: default;
}

.deals-bulk-form.is-editing .deals-row:has(input[name="deal_ids"]:checked) {
  background: #faf9f7;
}

.deals-list .deals-bulk-all:not([hidden]) {
  display: inline-flex;
}

/* Select all lines up with the row checkboxes, its label with the clients. */
.deals-list .deals-bulk-bar {
  padding-left: calc(1rem + 1px);
}

.deals-list .deals-bulk-all {
  gap: 0.75rem;
}

@media (max-width: 640px) {
  .deals-row {
    gap: 0.6rem;
    padding: 0.7rem 0.75rem;
  }

  .deals-list .deals-bulk-bar {
    padding-left: calc(0.75rem + 1px);
  }

  .deals-list .deals-bulk-all {
    gap: 0.6rem;
  }
}

/* F73 — /lawyers is a stack of lawyer cards in the /deals card shell: name and
   title, departments, the latest clients, and the total in the right column. */
.lawyer-title {
  font-size: 0.8rem;
  color: #9b9a97;
}

.lawyer-clients {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #55534e;
  overflow-wrap: anywhere;
}

.lawyer-clients-more {
  color: #9b9a97;
  white-space: nowrap;
}

.lawyer-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5rem;
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #9b9a97;
  font-variant-numeric: tabular-nums;
}

.lawyer-total-amount {
  font-size: 0.85rem;
  font-weight: 500;
  color: #37352f;
}

/* Wider than a phone: the total stacks in the right column, like the deal dates. */
@media (min-width: 641px) {
  .deals-row .lawyer-total {
    grid-column: 2;
    grid-row: 1 / span 2;
    flex-direction: column;
    align-items: flex-end;
    margin: 0;
    padding-top: 0.1rem;
    text-align: right;
  }
}

.deals-bulk-form.is-editing .deals-row:has(input[name="person_ids"]:checked) {
  background: #faf9f7;
}

.lawyer-list .deals-bulk-all:not([hidden]) {
  display: inline-flex;
}

/* Select all lines up with the card checkboxes, as on /deals. */
.lawyer-list .deals-bulk-bar {
  padding-left: calc(1rem + 1px);
}

.lawyer-list .deals-bulk-all {
  gap: 0.75rem;
}

@media (max-width: 640px) {
  .lawyer-list .deals-bulk-bar {
    padding-left: calc(0.75rem + 1px);
  }

  .lawyer-list .deals-bulk-all {
    gap: 0.6rem;
  }
}

/* ================================================================
   Motion & elevation system (global polish pass)
   Tokens (literal values, matching the app's existing 0.15s rhythm):
     fast   0.12s  — press feedback
     base   0.15s  — hovers, color/bg, small transforms
     panel  0.20–0.22s — popover, sheet, backdrop
     ease-out: cubic-bezier(0.2, 0.6, 0.2, 1)  (calm, no bounce)
   Shadow ramp (soft, for a white bg):
     resting  0 1px 2px  rgba(15,15,15,.04)
     raised   0 4px 12px rgba(15,15,15,.06)   (hover lift)
     floating 0 8px 24px rgba(15,15,15,.10)   (popover; sheet keeps its own)
   ================================================================ */

/* Row hovers — one timing everywhere. */
.people-table tbody tr,
.deals-table tbody tr {
  transition: background 0.15s;
}

.date-row,
.deadline-row {
  transition: background 0.15s;
}

/* Section-card summary hover eases in, matching the row rhythm. */
.section-card > summary {
  transition: background 0.15s;
}

/* Gentle entrance for flash banners / alerts — acknowledged, not jarring. */
@keyframes lexsub-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.auth-success,
.auth-error,
.form-alert {
  animation: lexsub-enter 0.18s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}

/* Accessibility: strip non-essential motion for users who ask for it.
   States still apply — instantly. Shadows are unaffected. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* F18 /sharing — one block per accessible firm. */
.sharing-block + .sharing-block {
  margin-top: 1rem;
}

.sharing-block h2 {
  margin-bottom: 0.5rem;
}

/* F60 — one row per ranking PA: label + department | next date | Follow, then status. */
.date-firm-controls {
  flex: 0 0 16rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem 0.5rem;
}

.date-dept {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: #9b9a97;
}

.date-next {
  flex: 0 0 12.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  font-size: 0.9rem;
}

.date-firm-switch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Phone: the row stacks — label, then date, then a wrapping actions line. */
@media (max-width: 768px) {
  .date-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .date-next,
  .date-firm-controls {
    flex-basis: auto;
  }

  .date-firm-controls {
    justify-content: flex-start;
  }
}

/* F56 — "Add an edition": the picker's two steps, then the edition's fields. */
.dates-admin-add > .form-group:not(.rpa-step),
.dates-admin-add > .dates-admin-all,
.dates-admin-add > .form-hint,
.dates-admin-add > .btn {
  margin-top: 1rem;
}

.dates-admin-add > .form-group {
  max-width: 30rem;
}

/* F18 — the Departments "Create" popup (native <dialog>). */
.modal-dialog {
  width: min(26rem, calc(100vw - 2rem));
  margin: auto;
  padding: 1.75rem;
  border: 1px solid #ebebea;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(31, 30, 28, 0.16);
  color: #37352f;
}

.modal-dialog::backdrop {
  background: rgba(31, 30, 28, 0.32);
}

.modal-dialog h2 {
  margin: 0 0 1.25rem;
}

.modal-dialog .form-actions {
  margin-top: 1.5rem;
}

/* F18 — Departments table: one ranking label per line. */
.dept-ranking {
  display: block;
}

.dept-ranking + .dept-ranking {
  margin-top: 0.15rem;
}

/* F18 — Ranking practice areas: rows. Save stays hidden until the select changes. */
.ranking-table td.row-actions {
  display: table-cell;
  text-align: right;
  width: 1%;
}

.ranking-dept-form {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.ranking-dept-form select {
  width: 12rem;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  font-size: 0.85rem;
}

.ranking-dept-form.is-pristine button {
  visibility: hidden;
}

/* F18 — the add bar (directory → search → department), a quiet tinted panel. */
.ranking-add {
  margin-top: 1.25rem;
  padding: 1.25rem;
  background: var(--surface-group);
  border: 1px solid var(--border-group);
  border-radius: 10px;
}

.ranking-add-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: #37352f;
  margin-bottom: 1rem;
}

.ranking-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 0 1rem;
  align-items: start;
}

/* The picker's <script> sits between the rows, so the + rule can't space this one. */
.ranking-add-foot {
  align-items: end;
  margin-top: 1.25rem;
}

/* F43 — the add panel reads as numbered steps: directory, practice area,
   then (firm page) department. */
.rpa-step {
  max-width: 30rem;
}

/* ~ not +: the picker's <script> can sit between step 2 and step 3. */
.rpa-step ~ .rpa-step {
  margin-top: 1.25rem;
}

.ranking-add .rpa-step-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rpa-step-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid #d8d7d3;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #55534e;
}

.ranking-add .form-group {
  margin-bottom: 0;
}

.ranking-add-row + .ranking-add-row {
  margin-top: 1rem;
}

.ranking-add input:disabled {
  background: #f7f6f3;
  color: #9b9a97;
  cursor: not-allowed;
}

.ranking-add select[size] {
  margin-top: 0.5rem;
  padding: 0.35rem;
  font-size: 0.85rem;
}

.ranking-add select[size] option {
  padding: 0.3rem 0.45rem;
  border-radius: 4px;
}

.ranking-add select[size] option:checked {
  background: #ebebea linear-gradient(#ebebea, #ebebea);
  color: #37352f;
}

/* With JS, the listbox waits for a directory; without JS it lists every channel. */
.ranking-add.is-live:not(.has-directory) select[size] {
  display: none;
}

.ranking-empty-hint a {
  color: #37352f;
  font-weight: 500;
}

@media (max-width: 640px) {
  .ranking-add-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Phone: rows stack (label, then department + remove) instead of scrolling sideways. */
  .dept-table thead,
  .ranking-table thead {
    display: none;
  }

  .dept-table tr,
  .ranking-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.4rem 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f4f3f0;
  }

  .dept-table td,
  .ranking-table td {
    padding: 0;
    border-bottom: none;
  }

  .dept-table td:nth-child(2) {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .ranking-table td:first-child {
    grid-column: 1 / -1;
  }

  .ranking-table td.row-actions {
    width: auto;
  }

  .ranking-dept-form {
    min-width: 0;
  }

  .ranking-dept-form select {
    flex: 1;
    width: auto;
    min-width: 0;
  }
}

/* F18 — a Department profile opens straight on its first section title. */
.stack > input[type="hidden"] + .form-section-title {
  margin-top: 0;
}

/* Phone: the last-year import card stacks like the next-action card above it. */
@media (max-width: 768px) {
  .from-submission-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* F45 — the channel page's Drafts and chooser rows (one family of rows). */
.rpa-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  border: 1px solid #ebebea;
  border-radius: 6px;
}

.rpa-list > li + li {
  border-top: 1px solid #f0efec;
}

.rpa-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
}

.rpa-row-link {
  color: inherit;
}

.rpa-row-link:hover {
  background: #faf9f7;
}

.rpa-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.rpa-row-label {
  font-size: 0.92rem;
  font-weight: 500;
  color: #37352f;
}

/* A count ("1 summary") never splits across lines in a draft's meta. */
.rpa-row-part {
  white-space: nowrap;
}

.rpa-row-detail {
  font-size: 0.82rem;
  color: #9b9a97;
}

.rpa-row-chevron {
  color: #b4b4b0;
}

@media (max-width: 640px) {
  li.rpa-row {
    flex-wrap: wrap;
  }
}

/* F27 — Lead / team lawyer picker (deal form). */
.lawyer-picker [hidden],
.picker-dialog [hidden] {
  display: none !important;
}

.picker-list {
  list-style: none;
  margin: 0 0 0.5rem;
  border: 1px solid #ebebea;
  border-radius: 6px;
}

.picker-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.6rem;
  padding: 0.3rem 0.3rem 0.3rem 0.75rem;
}

.picker-row + .picker-row {
  border-top: 1px solid #f0efec;
}

/* Name then job title; the title wraps as a unit under a long name. */
.picker-person {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5rem;
  line-height: 1.4;
}

.picker-name {
  font-size: 0.9rem;
  color: #37352f;
  overflow-wrap: break-word;
  min-width: 0;
}

.picker-job {
  font-size: 0.82rem;
  color: #9b9a97;
  white-space: nowrap;
}

.picker-trash {
  flex: none;
  padding: 0.35rem;
}

.picker-trash:hover {
  color: #37352f;
}

/* Spotlight-like: one wide search panel near the top third (the global reset
   strips the UA dialog centring, as for the F18 department dialog). */
.picker-dialog {
  width: min(36rem, calc(100vw - 2rem));
  max-width: none;
  margin: 14vh auto auto;
  padding: 0;
  overflow: hidden;
}

.picker-caption {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 1.25rem 0;
}

.picker-dialog .picker-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: #9b9a97;
}

.picker-status {
  margin: 0 0 0 auto;
  font-size: 0.78rem;
  color: #9b9a97;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.picker-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.75rem 0 1.25rem;
  border-bottom: 1px solid #f0efec;
}

.picker-search-ico {
  flex: none;
  width: 20px;
  height: 20px;
  color: #9b9a97;
}

.picker-search {
  flex: 1;
  min-width: 0;
  height: 3.4rem;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 1.3rem;
  color: #37352f;
  -webkit-appearance: none;
  appearance: none;
}

.picker-search:focus {
  outline: none;
  box-shadow: none;
}

.picker-search::placeholder {
  color: #b4b4b0;
}

.picker-search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.picker-done-form {
  flex: none;
}

.picker-results {
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  max-height: min(22rem, 50vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.picker-results:empty {
  display: none;
}

.picker-result {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.45rem 0.85rem;
  border-radius: 6px;
  cursor: pointer;
}

.picker-result[aria-selected="true"] {
  background: rgba(55, 53, 47, 0.08);
}

/* A grey chip vanishes on the grey highlight, so it turns white there. */
.picker-result[aria-selected="true"] .deal-chip {
  background: #ffffff;
}

.picker-empty {
  margin: 0;
  padding: 1.1rem 1.25rem 1.25rem;
  font-size: 0.85rem;
  color: #9b9a97;
}

@media (max-width: 640px) {
  .picker-dialog {
    width: calc(100vw - 1rem);
    margin-top: 0.5rem;
  }

  .picker-caption {
    padding: 0.8rem 1rem 0;
  }

  .picker-head {
    padding: 0 0.5rem 0 1rem;
  }

  .picker-results {
    max-height: 45vh;
  }

  .picker-result,
  .picker-row {
    min-height: 44px;
  }

  .picker-add,
  .picker-done,
  .picker-trash {
    min-height: 44px;
  }

  .picker-trash {
    min-width: 44px;
    justify-content: center;
  }
}

/* F41 — the Referees card on the Chambers / Legal 500 check page: rows carry
   the F67 deal card (F69) with text actions; the dialog's results reuse it. */
.referee-card [hidden] {
  display: none !important;
}

.picker-dialog[data-count-noun] .picker-person {
  flex-direction: column;
  align-items: flex-start;
}

.picker-dialog[data-count-noun] .picker-job {
  white-space: normal;
}

.picker-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.picker-trash.picker-remove {
  padding: 0.35rem 0.6rem;
}

/* The dialog's "Create a new referee" is a submit that reads as a link. */
.picker-add-submit {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 500;
  color: #37352f;
  cursor: pointer;
}

/* Clear of the hints above; the card rows get the deal rows' air. */
.referee-picker {
  margin-top: 0.75rem;
}

.referee-picker .picker-row {
  align-items: flex-start;
  min-height: 3.5rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.referee-pick {
  flex: 1;
  min-width: 0;
}

.referee-picker .picker-actions {
  margin-top: -0.2rem;
}

.referee-unsaved {
  font-size: 0.8rem;
  font-weight: 500;
  color: #55534e;
}

/* Phones: deal and referee cards take the full width; the actions go below. */
@media (max-width: 640px) {
  .deal-picker .picker-row,
  .referee-picker .picker-row {
    flex-wrap: wrap;
    row-gap: 0.1rem;
  }

  .deal-pick,
  .referee-pick {
    flex: 1 1 100%;
  }

  /* The 44px targets overlap the gap above, so the actions sit close to their text. */
  .deal-picker .picker-actions,
  .referee-picker .picker-actions {
    margin-left: -0.5rem;
    margin-top: -0.35rem;
  }

  .picker-trash.picker-remove {
    min-width: 0;
  }
}

/* F31 — referee "Referring lawyers": no-partner state and unlinked legacy text. */
.referring-title {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: #55534e;
}

.referring-none .form-hint {
  margin-top: 0;
}

.referring-none .form-hint a {
  color: #37352f;
  font-weight: 500;
}

.referring-none .form-hint a:hover {
  opacity: 0.7;
}

.referring-legacy .form-hint {
  margin: 0 0 0.5rem;
  overflow-wrap: break-word;
}

/* F47 — /sharing: the access table, its ⋯ menus and the Add / Edit form. */
.sharing-page {
  max-width: 960px;
}

.sharing-block + .sharing-block {
  margin-top: 2.5rem;
}

.sharing-firm-head h2 {
  margin: 0;
}

.sharing-table tbody tr {
  cursor: default;
}

.sharing-table tbody tr:hover {
  background: transparent;
}

.sharing-actions-col,
.sharing-actions {
  width: 2.5rem;
  text-align: right;
}

.sharing-role-name {
  display: block;
}

.sharing-scope {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.8rem;
  color: #9b9a97;
}

.rpa-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex: none;
}

/* The ⋯ panel hangs below the row; a scrolling wrapper would clip it. */
.sharing-wrap {
  overflow: visible;
}

.sharing-table td {
  overflow-wrap: anywhere;
}

.row-menu {
  position: relative;
  display: inline-block;
}

.row-menu > summary {
  list-style: none;
  color: #9b9a97;
}

.row-menu > summary::-webkit-details-marker {
  display: none;
}

.row-menu > summary:hover,
.row-menu[open] > summary {
  color: #37352f;
}

.row-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 50;
  min-width: 13rem;
  padding: 0.35rem;
  background: #ffffff;
  border: 1px solid #ebebea;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 15, 15, 0.1);
  text-align: left;
}

.row-menu-panel form {
  margin: 0;
}

.row-menu-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 0.88rem;
  color: #37352f;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.row-menu-item:hover,
.row-menu-item:focus-visible {
  background: #f7f6f3;
  outline: none;
}

.row-menu-muted {
  color: #55534e;
}

.row-menu-danger {
  color: #b91c1c;
}

.sharing-recent {
  margin-top: 2rem;
}

.sharing-recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  color: #55534e;
}

.sharing-recent-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid #f0efec;
}

.sharing-recent-at {
  white-space: nowrap;
}

.access-dialog {
  width: min(32rem, calc(100vw - 2rem));
}

.access-form fieldset {
  border: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.access-form legend {
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: #37352f;
}

.choice-list {
  border: 1px solid var(--border-group);
  border-radius: 10px;
  overflow: hidden;
}

/* Beats `.form-group label { display: block }`: the radio sits beside its title. */
.access-form .choice-row,
.access-form .choice-inline {
  margin: 0;
  font-weight: 400;
}

.access-form .choice-row,
.choice-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid transparent;
  cursor: pointer;
}

.choice-row + .choice-row {
  border-top-color: #f0efec;
}

.choice-row:has(:checked) {
  border-color: #b4b4b0;
  background: #faf9f7;
}

.choice-row input {
  margin-top: 0.2rem;
}

.choice-text {
  display: flex;
  flex-direction: column;
}

.choice-title {
  font-size: 0.9rem;
  font-weight: 500;
}

.choice-desc {
  font-size: 0.8rem;
  color: #9b9a97;
}

.access-form .choice-inline,
.choice-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.choice-inline-hint {
  margin: 0.1rem 0 0.6rem 1.6rem;
}

.access-department-picker {
  margin: 0.6rem 0 0 1.6rem;
}

/* F83: the sales form's optional directory questions. */
.sales-directories {
  margin-top: 2rem;
}

.sales-directories .form-section-title {
  margin: 0 0 0.2rem;
}

.sales-directories-intro {
  margin: 0 0 1rem;
}

.sales-already {
  border: 0;
  padding: 0;
  min-width: 0;
}

.sales-already legend {
  padding: 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: #55534e;
  margin-bottom: 0.35rem;
}

/* Beats `.form-group label { display: block }`. */
.sales-already .choice-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 400;
  color: #37352f;
  cursor: pointer;
}

.sales-already input[type="radio"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex: none;
  accent-color: #37352f;
}

/* The global input:focus shadow is near invisible on a radio. */
.sales-already input[type="radio"]:focus {
  box-shadow: none;
}

.sales-already input[type="radio"]:focus-visible {
  outline: 2px solid #37352f;
  outline-offset: 2px;
}

@media (pointer: coarse) {
  .sales-already .choice-inline {
    min-height: 44px;
    padding: 0;
  }
}

/* Lines up with the option text: 1rem radio + 0.5rem gap. */
.sales-before {
  margin: 0.6rem 0 0 1.5rem;
}

/* Without :has() the follow-up simply stays visible. */
@supports selector(:has(*)) {
  .sales-before {
    display: none;
  }

  .sales-already:has(#sales-already-no:checked) .sales-before {
    display: block;
    animation: lexsub-enter 0.18s cubic-bezier(0.2, 0.6, 0.2, 1) both;
  }
}

@media (max-width: 640px) {
  .sharing-table tbody tr {
    position: relative;
    padding-right: 2.75rem;
  }

  .sharing-table td.sharing-actions {
    position: absolute;
    top: 0.5rem;
    right: 0;
    width: auto;
    padding: 0;
  }

  .sharing-table td.sharing-actions::before {
    content: none;
  }

  /* F90: the email and its "Outside" note stay one value, right-aligned. */
  .sharing-email-wrap {
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .row-menu-trigger {
    min-width: 44px;
    min-height: 44px;
  }

  .access-form .form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* The card's Role line: role, then its departments, both right-aligned. */
  .sharing-role-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }

  .sharing-page .page-header-row > .btn {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .deals-list .page-header-row .row-actions {
    flex-wrap: wrap;
  }
}

/* F47 — read-only views: a disabled form reads as text, not as greyed fields. */
.form-fieldset {
  display: contents;
}

/* F52 picker: a plain group titled like the other field labels. */
.also-referee {
  border: 0;
  margin: 0 0 1rem;
  padding: 0;
  min-width: 0;
}

.also-referee legend {
  padding: 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: #55534e;
  margin-bottom: 0.2rem;
}

.also-referee .also-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 0.5rem 0 0.75rem;
}

.also-referee .also-options .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-weight: 400;
  color: #37352f;
}

.also-referee .also-other-label {
  margin-top: 0.25rem;
}

.view-only input,
.view-only select,
.view-only textarea {
  border-color: transparent;
  background: transparent;
  padding-left: 0;
  color: #37352f;
  -webkit-text-fill-color: #37352f;
  opacity: 1;
  resize: none;
  cursor: default;
  box-shadow: none;
  appearance: none;
  background-image: none;
}

.view-only input[type="checkbox"],
.view-only input[type="radio"] {
  appearance: auto;
}

/* Beats the global drawn chevron; placeholders would read as data. */
.view-only select:not([multiple]):not([size]) {
  background-image: none;
  padding-right: 0;
}

.view-only ::placeholder {
  color: transparent;
}

.view-only textarea {
  field-sizing: content;
  min-height: 0;
}

/* A view shows what is there: empty fields, write hints and picker buttons go. */
.view-only .form-group:has(> input:is([type="text"], [type="email"], [type="url"], [type="tel"], [type="number"], :not([type]))[value=""]),
.view-only .form-group:has(> input:placeholder-shown),
.view-only .form-group:has(> textarea:placeholder-shown),
.view-only .form-group:has(> textarea:empty),
.view-only .lawyer-picker:not(:has(option[selected])),
.view-only .form-hint,
.view-only .picker-add,
.view-only .picker-trash,
.view-only .picker-remove,
.view-only .picker-native-hint {
  display: none;
}

/* The "Read only" marker beside the wordmark, and the department scope hint. */
.nav-readonly {
  margin-left: 0.5rem;
  vertical-align: middle;
}

.scope-hint {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
}

/* F58: the Department title and its quiet inline Rename form. */
.dept-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin-bottom: 0.35rem;
}

.dept-title h1 {
  margin-bottom: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.dept-rename > summary {
  list-style: none;
}

.dept-rename > summary::-webkit-details-marker {
  display: none;
}

.dept-rename[open] {
  flex-basis: 100%;
}

.dept-rename[open] > summary {
  display: none;
}

.dept-rename-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  max-width: 36rem;
}

.dept-rename-form input[type="text"] {
  flex: 1 1 16rem;
  width: auto;
  min-width: 0;
}

.dept-rename-actions {
  display: flex;
  gap: 0.5rem;
}

/* The error sits under the input: below the row, or right under it on a phone. */
.dept-rename-form .form-field-error {
  order: 1;
  flex-basis: 100%;
  margin-top: 0;
}

@media (max-width: 640px) {
  .dept-rename-form input[type="text"] {
    flex-basis: 100%;
  }

  .dept-rename-form .form-field-error {
    order: 0;
  }
}

/* F62: the deal / referee "Submitted" matrix and recent export lines. */
.activity-card {
  padding: 1rem 1.25rem;
}

.activity-matrix {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.activity-label {
  font-size: 0.82rem;
  color: #9b9a97;
  line-height: 20px;
  white-space: nowrap;
}

.activity-grid {
  display: grid;
  grid-template-columns: repeat(4, 4.75rem);
  row-gap: 0.4rem;
}

.activity-grid-2 {
  grid-template-columns: repeat(2, 4.75rem);
}

.activity-cell {
  display: flex;
  justify-content: center;
  min-height: 20px;
}

.activity-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid #9b9a97;
  border-radius: 50%;
}

/* In a draft: the empty circle with a small inner dot. */
.activity-dot-draft {
  background: radial-gradient(circle, #9b9a97 0 2.5px, transparent 3px);
}

.activity-dot-submitted {
  background: #2f6f3e;
  border-color: #2f6f3e;
}

.activity-dot svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.activity-dir {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #9b9a97;
  text-align: center;
  white-space: nowrap;
}

.activity-recent {
  list-style: none;
  margin-top: 0.75rem;
}

.activity-matrix + .activity-recent {
  padding-top: 0.75rem;
  border-top: 1px solid #f0efec;
}

.activity-recent:first-child {
  margin-top: 0;
}

.activity-recent li {
  font-size: 0.82rem;
  color: #9b9a97;
}

.activity-recent .badge {
  padding: 0 0.4rem;
  font-size: 0.7rem;
}

/* F65: a dashed placeholder where the department has no ranking PA for a
   directory; a writer's opens a popover anchored under it. */
.activity-dot-empty {
  border: 1.5px dashed #b4b4b0;
}

.activity-link {
  position: relative;
}

.activity-link > summary {
  list-style: none;
  cursor: pointer;
  transition: border-color 0.15s;
}

.activity-link > summary::-webkit-details-marker {
  display: none;
}

.activity-link > summary:hover,
.activity-link[open] > summary {
  border-color: #55534e;
}

.activity-link > summary:focus-visible {
  outline: 2px solid #37352f;
  outline-offset: 2px;
}

/* Its left edge lines up with the cell's: half a 4.75rem column left of the circle's centre. */
.activity-pop {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.5rem);
  left: calc(10px - 2.375rem);
  width: 320px;
  padding: 1rem;
  background: #ffffff;
  border: 1px solid #ebebea;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 15, 15, 0.1);
  text-align: left;
}

.activity-pop-text {
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
  color: #37352f;
}

.activity-pop .rpa-step {
  max-width: none;
  margin-bottom: 0;
}

.activity-pop input:disabled {
  background: #f7f6f3;
  color: #9b9a97;
}

.activity-pop select[size] {
  margin-top: 0.5rem;
  padding: 0.35rem;
  font-size: 0.85rem;
}

.activity-pop select[size] option {
  padding: 0.3rem 0.45rem;
  border-radius: 4px;
}

.activity-pop select[size] option:disabled {
  color: #b4b4b0;
}

.activity-pop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.activity-link-error {
  margin-top: 0.5rem;
}

@media (max-width: 640px) {
  .activity-matrix {
    flex-direction: column;
    gap: 0.4rem;
  }

  .activity-grid {
    grid-template-columns: repeat(4, minmax(0, 4.75rem));
  }

  .activity-grid-2 {
    grid-template-columns: repeat(2, 4.75rem);
  }

  /* Phone: the popover spans the card under the grid. */
  .activity-matrix {
    position: relative;
  }

  .activity-link {
    position: static;
  }

  .activity-pop {
    left: 0;
    right: 0;
    width: auto;
  }
}

/* F63 — /export "Submissions activity logs": /dates groups under a section heading. */
.export-submissions {
  margin-top: 2.5rem;
}

.export-submissions > .form-hint {
  margin: 0.25rem 0 1rem;
}

.export-submissions .date-next,
.export-submissions .date-firm-controls {
  flex-basis: auto;
}

.export-submissions .sharing-recent-list li:last-child {
  border-bottom: none;
}

/* The 480px column: the label stacks over its date, actions stay right. */
@media (max-width: 1279px) {
  .export-submissions .date-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
}

/* F75 — /deals side peek: a deal's page in a frame, in a panel sliding in from
   the right. No backdrop: the list stays live beside it. */
.deal-peek {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  width: clamp(560px, 50vw, 760px);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-left: 1px solid #ebebea;
  box-shadow: -8px 0 32px rgba(31, 30, 28, 0.12);
  transform: translateX(calc(100% + 40px));
  visibility: hidden;
  transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1), visibility 0s linear 0.2s;
}

.deal-peek.is-open {
  transform: none;
  visibility: visible;
  transition: transform 0.28s cubic-bezier(0.2, 0.6, 0.2, 1), visibility 0s;
}

.deal-peek:focus {
  outline: none;
}

.deal-peek-bar {
  flex: none;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: 52px;
  padding: 0 0.5rem;
  box-shadow: 0 1px 0 #f0efec;
}

.deal-peek-bar-end {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
}

.peek-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
  border-radius: 8px;
  color: #9b9a97;
}

.peek-btn:hover {
  background: #f7f6f3;
  color: #37352f;
}

.peek-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(55, 53, 47, 0.12);
  color: #37352f;
}

@media (pointer: coarse) {
  .peek-btn {
    width: 44px;
    height: 44px;
  }
}

.deal-peek-body {
  flex: 1;
  min-height: 0;
  position: relative;
}

.deal-peek-body iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.deal-peek-body iframe.is-loaded {
  opacity: 1;
}

/* Switching deal: the outgoing one dims and takes no input until the next loads. */
.deal-peek.is-switching iframe {
  opacity: 0.55;
  pointer-events: none;
}

.deal-peek-loading {
  position: absolute;
  top: 2rem;
  left: 3rem;
  margin: 0;
  font-size: 0.85rem;
  color: #9b9a97;
  animation: deal-peek-wait 0.2s ease 0.4s both;
}

.deal-peek-body iframe.is-loaded ~ .deal-peek-loading {
  display: none;
}

@keyframes deal-peek-wait {
  from { opacity: 0; }
  to { opacity: 1; }
}

.deals-row.is-peeked,
.deals-row.is-peeked:hover {
  background: rgba(55, 53, 47, 0.08);
}

.deals-row.is-peeked .deal-chip:not(.deal-chip-draft):not(.deal-chip-exported) {
  background: #ffffff;
}

.deals-row.is-peeked.is-just-saved {
  background: rgba(55, 53, 47, 0.12);
}

/* Opens navigate at phone widths; a panel already open when the window
   shrinks fills it, over the phone bars. */
@media (max-width: 768px) {
  .deal-peek {
    left: 0;
    width: auto;
    z-index: 100;
    border: 0;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .deal-peek {
    transform: none;
  }

  .deals-row.is-peeked.is-just-saved {
    background: rgba(55, 53, 47, 0.08);
  }
}

@media print {
  .deal-peek {
    display: none;
  }
}

/* F75 — the deal page inside the panel (the frame sees its own width, so
   these hang off .peek-page, never off a viewport query). */
html:has(.peek-page) {
  overscroll-behavior: contain;
}

.peek-page {
  padding: 2rem 3rem 3rem;
}

.peek-page .page-narrow {
  max-width: none;
}

.peek-page .page-header {
  margin-bottom: 1.5rem;
}

/* The "Saved." banner takes focus to be announced; its green says enough. */
.peek-page #peek-saved:focus {
  outline: none;
}

.peek-page h1 {
  font-size: 1.5rem;
  overflow-wrap: break-word;
}

.peek-page .form-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 1rem -1.5rem -1.5rem;
  padding: 0.75rem 1.5rem;
  background: #ffffff;
  box-shadow: 0 -1px 0 #f0efec;
  border-radius: 0 0 9px 9px;
}

/* The deal form's ⋯ menu trails the Save row and opens upward (the row is a
   sticky footer in the side panel). */
.deal-more {
  margin-left: auto;
}

.deal-more .row-menu-panel {
  top: auto;
  bottom: calc(100% + 4px);
}

/* F76 — the side peek on a draft's check page: the open deal's row in the
   Deals picker. */
.deal-picker .picker-row,
.contact-picker .picker-row {
  transition: background 0.15s;
}

.deal-picker .picker-row.is-peeked,
.contact-picker .picker-row.is-peeked {
  background: rgba(55, 53, 47, 0.08);
}

.deal-picker .picker-row.is-peeked.is-just-saved,
.contact-picker .picker-row.is-peeked.is-just-saved {
  background: rgba(55, 53, 47, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .deal-picker .picker-row.is-peeked.is-just-saved,
  .contact-picker .picker-row.is-peeked.is-just-saved {
    background: rgba(55, 53, 47, 0.08);
  }
}

/* The centred check page slides left with the panel, so the open deal stays
   in view (/deals keeps its place: its list is wide enough). */
@media (min-width: 769px) {
  .main-content:has(> .deal-peek):not(:has(> .deals-list)) > :is(.page, .app-footer) {
    transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);
  }

  .main-content:has(> .deal-peek.is-open):not(:has(> .deals-list)) > :is(.page, .app-footer) {
    transform: translateX(min(0px, calc((var(--col) - 100vw + 200px + 8rem) / 2)));
    transition: transform 0.28s cubic-bezier(0.2, 0.6, 0.2, 1);
  }
}

/* F82: the check page's export bar. It sticks under the top, holds the page's
   only Save draft / Export / ⋯, and its status line follows the cards. */
html:has(.export-bar) {
  --list-bar-top: 0px;
  scroll-padding-top: calc(var(--list-bar-top) + 7.5rem);
}

.export-page .page-header {
  margin-bottom: 0.75rem;
}

.export-bar {
  position: sticky;
  top: var(--list-bar-top);
  z-index: 10;
  background: #ffffff;
  padding: 0.5rem 0 0.75rem;
  margin-bottom: 1.5rem;
}

.export-bar.is-stuck {
  box-shadow: 0 1px 0 #f0efec;
}

.export-bar-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 32px;
}

/* Two overlaid one-line layers: the department and draft line at rest, the title when stuck. */
.export-bar-lead {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 1.5rem;
}

.export-bar-meta,
.export-bar-title {
  position: absolute;
  inset: 0;
  margin: 0;
  white-space: nowrap;
}

.export-bar-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.85rem;
  line-height: 1.5rem;
  color: #9b9a97;
}

.export-bar-meta .draft-unsaved {
  font-weight: 500;
  color: #55534e;
}

#draft-unsaved:not([hidden]) ~ .draft-stamp {
  display: none;
}

.export-bar-title {
  display: flex;
  align-items: center;
  font-size: 1.05rem;
  font-weight: 600;
  color: #37352f;
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
}

.export-bar-title-text {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Outside the ellipsis, so a long label never swallows it. */
.export-bar-edited {
  flex: none;
  font-weight: 400;
  color: #9b9a97;
  white-space: pre;
}

.export-bar.is-stuck .export-bar-meta {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
}

.export-bar.is-stuck .export-bar-title {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.export-bar.is-ready .export-bar-meta,
.export-bar.is-ready .export-bar-title {
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.export-bar.is-ready:not(.is-stuck) .export-bar-meta,
.export-bar.is-ready.is-stuck .export-bar-title {
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

/* DOM order is Export, Save, ⋯ (Enter submits the first); it reads Save · Export · ⋯. */
.export-bar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}

.export-bar-save {
  order: 1;
  min-height: 32px;
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
}

.btn-export.export-bar-export {
  order: 2;
  min-height: 32px;
  padding: 0.35rem 0.95rem;
  font-size: 0.85rem;
  box-shadow: 0 2px 6px rgba(15, 15, 15, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.btn-export.export-bar-export:hover {
  box-shadow: 0 6px 16px rgba(15, 15, 15, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.export-more {
  order: 3;
}

.export-more > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border-radius: 8px;
}

.row-menu.export-more > summary:hover {
  background: #f7f6f3;
  color: #55534e;
}

.row-menu.export-more[open] > summary {
  background: #f7f6f3;
  color: #37352f;
}

.export-more .row-menu-panel {
  top: calc(100% + 6px);
  width: max-content;
  min-width: 15.5rem;
}

.export-more .row-menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
}

.export-more .row-menu-item > svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: #55534e;
}

.export-more .row-menu-item[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
  background: none;
}

/* The status line: a state glyph, the label and the count; each item links to its card. */
.export-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}

.export-status-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: -0.15rem -0.4rem;
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  font-size: 0.82rem;
  color: #55534e;
  text-decoration: none;
}

a.export-status-item:hover {
  background: #f7f6f3;
  color: #55534e;
}

a.export-status-item:focus-visible {
  outline: 2px solid #37352f;
  outline-offset: 0;
}

.export-status-count {
  font-weight: 600;
  color: #37352f;
  font-variant-numeric: tabular-nums;
}

/* "optional" is a note, not a figure: it must not read as a value. */
[data-status="neutral"] .export-status-count {
  font-weight: 400;
  color: #9b9a97;
}

.export-status-ico {
  flex: none;
}

.export-status-ico g {
  display: none;
}

[data-status="ok"] .st-ok,
[data-status="warn"] .st-warn,
[data-status="missing"] .st-missing,
[data-status="neutral"] .st-neutral {
  display: inline;
}

@media (max-width: 768px) {
  html:has(.export-bar) {
    --list-bar-top: 52px;
  }

  .export-bar {
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
  }

  .export-bar.is-stuck {
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
  }

  .export-bar-save,
  .btn-export.export-bar-export {
    min-height: 44px;
  }

  .export-more > summary {
    width: 44px;
    height: 44px;
  }
}

/* Phones: only the actions stick; the lead sits above them at rest and the status
   line stays in the flow. Stuck, the lead's room moves to the margin: nothing jumps. */
@media (max-width: 640px) {
  html:has(.export-bar) {
    scroll-padding-top: calc(var(--list-bar-top) + 5rem);
  }

  .export-bar {
    display: contents;
  }

  .export-bar-row {
    position: sticky;
    top: var(--list-bar-top);
    z-index: 10;
    flex-wrap: wrap;
    row-gap: 0.4rem;
    margin-inline: -1.5rem;
    padding: 0.5rem 1.5rem;
    background: #ffffff;
  }

  .export-bar.is-stuck .export-bar-row {
    margin-bottom: 1.9rem;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 1px 0 #f0efec;
  }

  .export-bar-lead {
    flex: 1 1 100%;
  }

  .export-bar.is-stuck .export-bar-lead,
  .export-bar-title {
    display: none;
  }

  .export-bar-actions {
    flex: 1 1 100%;
  }

  .btn-export.export-bar-export {
    flex: 1;
    justify-content: center;
  }

  .export-status {
    margin: 0.4rem 0 1.5rem;
  }
}

/* F87 — /settings "All firms" (super-admin) and the "Access paused" page. */
.admin-firm-search {
  margin: 1rem 0 0.25rem;
}

.admin-firm-search input {
  width: 100%;
}

.admin-firm-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.admin-firm-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
}

/* The rule sits between visible rows only, so a search never leaves one on top. */
.admin-firm-row:not(.hidden-by-search) ~ .admin-firm-row {
  border-top: 1px solid #f0efec;
}

.admin-firm-none {
  padding: 0.9rem 0;
  font-size: 0.85rem;
  color: #9b9a97;
}

.admin-firm-row.hidden-by-search {
  display: none;
}

.admin-firm-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.admin-firm-line {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
}

.admin-firm-name {
  font-weight: 500;
  color: #37352f;
  overflow-wrap: anywhere;
}

.admin-firm-meta {
  margin: 0;
  font-size: 0.82rem;
  color: #9b9a97;
  overflow-wrap: anywhere;
}

.admin-firm-outside {
  color: #9a6a1a;
}

/* F90: the neutral "When you save" notice on the Email domains page. */
.domains-effects {
  margin-top: 0.25rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  background: #f7f6f3;
}

.domains-effects-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: #37352f;
}

.domains-effects .delete-facts {
  margin: 0.4rem 0 0 1.1rem;
  font-size: 0.85rem;
}

.admin-firm-email,
.admin-firm-created {
  white-space: nowrap;
}

.admin-firm-side {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
}

.admin-firm-pay {
  position: relative;
}

.admin-firm-pay > summary {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  text-align: right;
}

.admin-firm-pay > summary::-webkit-details-marker {
  display: none;
}

.admin-firm-pay > summary:hover,
.admin-firm-pay[open] > summary {
  background: #f7f6f3;
}

.admin-firm-pay > summary:focus-visible {
  outline: 2px solid #37352f;
  outline-offset: 1px;
}

.admin-firm-pay-label {
  font-size: 0.72rem;
  color: #9b9a97;
}

.admin-firm-paid {
  font-size: 0.85rem;
  color: #37352f;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.admin-firm-paid.is-empty {
  color: #9b9a97;
}

.admin-firm-pay-form {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 40;
  display: flex;
  gap: 0.4rem;
  align-items: center;
  padding: 0.5rem;
  background: #ffffff;
  border: 1px solid #ebebea;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 15, 15, 0.1);
}

.admin-firm-pay-form input[type="date"] {
  width: auto;
}

.paused {
  margin-top: 12vh;
}

.paused h1 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.paused .text-secondary + .text-secondary {
  margin-top: 0.5rem;
}

.paused .form-actions {
  margin-top: 1.5rem;
}

@media (max-width: 640px) {
  .admin-firm-row {
    flex-direction: column;
    gap: 0.5rem;
  }

  .admin-firm-side {
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }

  .admin-firm-pay > summary {
    flex-direction: row;
    align-items: baseline;
    gap: 0.4rem;
    min-height: 44px;
    padding-left: 0;
  }

  .admin-firm-pay-form {
    left: 0;
    right: auto;
  }
}

.wipe-owner {
  margin: 0 0 0.5rem;
}

.wipe-status {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: #37352f;
}

.wipe-progress-title {
  margin: 0 0 0.25rem;
  font-weight: 500;
  color: #37352f;
}

.wipe-also {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
}

.wipe-request {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  background: #eef1f7;
  color: #3b4a6b;
  font-size: 0.85rem;
}

.wipe-final {
  margin-top: 1.25rem;
}

/* F88 — /dates: one screenshot-able card (hero, then department × directory). */
.date-firm-switch {
  margin-bottom: 1rem;
}

.dates-page .form-alert-warning {
  margin-bottom: 1rem;
}

.dates-card {
  padding: 0;
  overflow: hidden;
}

.dates-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem 0;
}

.dates-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #37352f;
}

.dates-asof {
  margin: 0;
  font-size: 0.82rem;
  color: #9b9a97;
}

.dates-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 2rem;
  padding: 1.25rem 1.5rem 1.5rem;
  border-bottom: 1px solid #f0efec;
}

.dates-hero.is-single {
  grid-template-columns: 1fr;
}

.hero-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #9b9a97;
}

.hero-count {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.hero-n {
  font-size: 3.25rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #37352f;
  font-variant-numeric: tabular-nums;
}

.hero-unit {
  font-size: 1.05rem;
  color: #55534e;
}

.hero-what {
  margin: 0.6rem 0 0;
  font-size: 1rem;
  font-weight: 500;
  color: #37352f;
}

.hero-when {
  margin: 0.1rem 0 0;
  font-size: 0.88rem;
  color: #9b9a97;
}

.hero-then {
  padding-left: 2rem;
  border-left: 1px solid #f0efec;
}

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

.hero-next li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-top: 1px solid #f0efec;
  font-size: 0.88rem;
}

.hero-next li:first-child {
  border-top: 0;
  padding-top: 0.15rem;
}

.hero-next-date {
  color: #55534e;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hero-next-what {
  min-width: 0;
  color: #37352f;
  overflow-wrap: break-word;
}

/* Narrow desktops: "Then" sits under the big number instead of beside it. */
@media (min-width: 641px) and (max-width: 1000px) {
  .dates-hero {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .hero-then {
    padding: 1rem 0 0;
    border-left: 0;
    border-top: 1px solid #f0efec;
  }
}

.hero-next-left {
  color: #9b9a97;
  font-size: 0.8rem;
  white-space: nowrap;
}

.dates-grid-wrap {
  padding: 0.5rem 1.5rem 1.25rem;
}

.dates-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.dates-grid thead th {
  padding: 0.75rem 0.75rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: #9b9a97;
  text-align: left;
  border-bottom: 1px solid #ebebea;
}

.dates-grid .dg-corner {
  width: 24%;
}

.dates-grid tbody th {
  padding: 0.85rem 0.75rem 0.85rem 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: #37352f;
  text-align: left;
  vertical-align: top;
  /* A long department name hyphenates on a narrow desktop instead of splitting anywhere. */
  overflow-wrap: break-word;
  hyphens: auto;
}

.dates-grid tbody tr + tr > * {
  border-top: 1px solid #f0efec;
}

.dg-cell {
  padding: 0.85rem 0.75rem;
  vertical-align: top;
}

.dg-date {
  display: block;
  font-size: 0.9rem;
  color: #37352f;
  font-variant-numeric: tabular-nums;
}

/* Narrow desktops wrap after "by end of", never inside a date. */
.dg-nowrap {
  white-space: nowrap;
}

/* The narrowest desktops: a little more room per directory column. */
@media (max-width: 900px) {
  .dg-cell {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

.dg-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: #9b9a97;
}

.dg-muted {
  display: block;
  font-size: 0.85rem;
  color: #9b9a97;
}

.dg-none {
  color: #d3d1cb;
}

.dg-pill {
  display: inline-block;
  margin-top: 0.25rem;
  white-space: nowrap;
}

.dg-pill.is-imminent {
  font-weight: 600;
}

.dg-done {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: #2f6f3e;
}

.dg-cell.is-done .dg-date {
  color: #9b9a97;
}

.dates-empty,
.dates-footer {
  margin: 0;
  padding: 0 1.5rem 1.25rem;
  font-size: 0.85rem;
  color: #9b9a97;
}

.dates-empty {
  padding-top: 1.25rem;
}

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

.dates-rem-line {
  margin: 0;
  font-size: 0.85rem;
  color: #55534e;
}

.dates-rem-tools {
  flex: none;
}

.dates-page .date-also {
  margin-top: 2rem;
}

/* Phone: a list by month instead of the grid. */
.dates-timeline {
  display: none;
}

.tl-month {
  margin: 1.25rem 0 0.25rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: #9b9a97;
}

.tl-list,
.tl-undated-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tl-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.65rem 0;
  border-top: 1px solid #f0efec;
}

.tl-row:first-child {
  border-top: 0;
}

.tl-day {
  font-size: 1.15rem;
  font-weight: 600;
  color: #37352f;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.tl-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tl-what {
  font-size: 0.9rem;
  font-weight: 500;
  color: #37352f;
}

.tl-pa {
  font-size: 0.78rem;
  color: #9b9a97;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tl-row .dg-sub,
.tl-row .dg-pill,
.tl-row .dg-done {
  margin-top: 0;
  white-space: nowrap;
}

.tl-row.is-done .tl-day,
.tl-row.is-done .tl-what {
  color: #9b9a97;
}

.tl-undated {
  margin-top: 1.25rem;
  border-top: 1px solid #f0efec;
  padding-top: 0.75rem;
}

.tl-undated > summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: #55534e;
}

.tl-undated-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-top: 1px solid #f0efec;
}

@media (max-width: 640px) {
  .dates-card-head {
    padding: 1rem 1rem 0;
    flex-direction: column;
    gap: 0.1rem;
  }

  .dates-hero {
    grid-template-columns: 1fr;
    padding: 1rem;
    gap: 0;
  }

  .hero-then,
  .dates-grid-wrap {
    display: none;
  }

  .dates-timeline {
    display: block;
    padding: 0 1rem 1rem;
  }

  .dates-empty,
  .dates-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .dates-rem {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* F88 — Edit reminders: the same grid, a switch in each cell. */
.dates-edit-hint {
  margin: 0.75rem 1.5rem 0;
  font-size: 0.85rem;
  color: #55534e;
  max-width: 40rem;
}

.dates-grid.is-editing .dg-corner {
  width: 20%;
}

.dates-grid.is-editing .dg-all > * {
  background: #faf9f7;
}

.dates-grid.is-editing .dg-all th {
  padding-left: 0.75rem;
  font-size: 0.85rem;
  color: #55534e;
}

.dg-rowall-h,
.dg-rowall {
  background: #faf9f7;
}

.rem-form {
  margin: 0;
}

.rem-switch {
  scroll-margin-top: 35vh;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem;
  margin: -0.2rem;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  border-radius: 6px;
}

.rem-switch:focus-visible {
  outline: 2px solid #37352f;
  outline-offset: 2px;
}

.rem-track {
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: #e0dfdb;
  transition: background 0.15s;
}

.rem-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.2);
  transition: transform 0.15s;
}

.rem-switch[aria-pressed="true"] .rem-track {
  background: #37352f;
}

.rem-switch[aria-pressed="true"] .rem-knob {
  transform: translateX(14px);
}

.rem-switch[aria-pressed="mixed"] .rem-track {
  background: #9b9a97;
}

.rem-switch[aria-pressed="mixed"] .rem-knob {
  transform: translateX(7px);
}

.rem-text {
  min-width: 2.2rem;
  font-size: 0.82rem;
  color: #55534e;
  text-align: left;
}

.rem-phone {
  display: none;
}

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

.rem-dept {
  padding: 0.75rem 0;
  border-top: 1px solid #f0efec;
}

.rem-dept:first-child {
  border-top: 0;
}

.rem-dept-all {
  margin: 0 -1rem;
  padding: 0.75rem 1rem;
  background: #faf9f7;
}

.rem-dept-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.rem-dept-head h3 {
  margin: 0;
  font-size: 0.95rem;
}

.rem-dept-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0.55rem 0 0.55rem 0.75rem;
  font-size: 0.88rem;
  color: #55534e;
}

@media (max-width: 640px) {
  .dates-edit-hint {
    margin: 0.75rem 1rem 0;
  }

  .rem-phone {
    display: block;
    padding: 0.5rem 1rem 1rem;
  }

  .rem-switch {
    min-height: 44px;
  }
}

/* F92 preview: the file as a document, sections in the file's order. */
.preview-page .page-header .text-secondary { margin-top: 0.1rem; }

/* The envelope: what lands in Downloads. */
.preview-download {
  margin: 0 0 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid #ebebea;
  border-radius: 10px;
}
.preview-download-label {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  color: #9b9a97;
}
.preview-files { list-style: none; margin: 0; padding: 0; }
.preview-files li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.15rem 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #37352f;
  overflow-wrap: anywhere;
}
.preview-files li > svg { flex: none; margin-top: 0.15rem; color: #9b9a97; }
.preview-files > li.preview-files-members { display: block; padding: 0; }
.preview-files ul { list-style: none; margin: 0.1rem 0 0; padding: 0 0 0 1.5rem; }
.preview-files ul li { color: #55534e; }
.preview-download .form-hint { margin-top: 0.5rem; }

/* A file inside a multi-file download. */
.preview-group { margin-top: 2.75rem; }
.preview-group + .preview-group { margin-top: 4rem; }
.preview-group + .preview-group .preview-group-head {
  padding-top: 1.5rem;
  border-top: 1px solid #ebebea;
}
.preview-group-head h2 { margin: 0; font-size: 1.3rem; }
.preview-group-file {
  margin: 0.2rem 0 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.76rem;
  color: #9b9a97;
  overflow-wrap: anywhere;
}

/* One section of the file. */
.preview-section { margin-top: 2.5rem; }
.preview-group-head + .preview-section { margin-top: 1.75rem; }
.preview-section-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.preview-section-head h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.05rem;
}
.preview-code {
  margin-right: 0.45rem;
  font-weight: 500;
  color: #9b9a97;
  font-variant-numeric: tabular-nums;
}
.preview-count {
  margin-left: 0.35rem;
  font-weight: 500;
  color: #9b9a97;
}

/* Label / value pairs (Notion page properties). */
.preview-fields {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0.5rem 1.5rem;
  margin: 0;
}
.preview-fields dt {
  padding-top: 0.15rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #9b9a97;
}
.preview-fields dd {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #37352f;
  white-space: pre-line;
  overflow-wrap: break-word;
}
.preview-blank { color: #9b9a97; }

/* A long text section (best known for, narratives). */
.preview-text {
  max-width: 62ch;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #37352f;
  white-space: pre-line;
}

/* Records: matters, nominations (full fields) and rows: lawyers, referees (compact). */
.preview-sub {
  margin: 1.75rem 0 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0;
  color: #37352f;
}
.preview-sub.is-first { margin-top: 0; }
.preview-file-link { color: #37352f; font-family: ui-sans-serif, -apple-system, system-ui, Inter, sans-serif; font-size: 0.85rem; }
.preview-file-link:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #b4b4b0; }
.preview-ext { color: #9b9a97; font-size: 0.78rem; }
.preview-records, .preview-rows { list-style: none; margin: 0; padding: 0; }
.preview-record { padding: 1.1rem 0 1.25rem; border-top: 1px solid #f0efec; }
.preview-record:first-child { border-top: 0; padding-top: 0.25rem; }
.preview-record-title,
.preview-row-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.5rem;
  margin: 0 0 0.7rem;
}
.preview-num {
  flex: none;
  min-width: 1.25rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #9b9a97;
  font-variant-numeric: tabular-nums;
}
.preview-name { font-size: 0.98rem; font-weight: 600; color: #37352f; }
.preview-record-title .badge,
.preview-row-title .badge { align-self: center; }
.preview-record .preview-fields { padding-left: 1.75rem; }

.preview-row { padding: 0.7rem 0; border-top: 1px solid #f0efec; }
.preview-row:first-child { border-top: 0; padding-top: 0.15rem; }
.preview-row-title { margin: 0; }
.preview-row-title .preview-name { font-size: 0.92rem; font-weight: 500; }
.preview-meta {
  margin: 0.1rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #55534e;
  overflow-wrap: break-word;
}
.preview-row.is-numbered .preview-meta { margin-left: 1.75rem; }
.preview-meta.preview-blank-list { color: #9b9a97; }

/* Not in the file. Actionable = amber ink; scope-hidden = muted. */
.preview-left-out {
  margin: -0.25rem 0 1rem;
  font-size: 0.82rem;
  line-height: 1.5;
  font-weight: 500;
  color: #9a6a1a;
}
.preview-left-out.is-quiet { font-weight: 400; color: #9b9a97; }
.preview-empty { font-size: 0.85rem; color: #9b9a97; }
/* Sheet-less deals sit in no file: said once, under "Downloads as". */
.preview-left-out.preview-page-notice { margin: 0; }
/* A file's own header cells (B1/D1/F1) then its rows. */
.preview-fields + .preview-rows,
.preview-fields + .preview-records { margin-top: 1.25rem; }

.preview-outline { margin-top: 0.6rem; }

@media (max-width: 640px) {
  .preview-fields { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .preview-fields dt { margin-top: 0.7rem; line-height: 1.4; }
  .preview-fields dt:first-child { margin-top: 0; }
  .preview-fields dd { margin-top: 0.1rem; }
  .preview-record .preview-fields,
  .preview-meta { padding-left: 0; margin-left: 0; }
  .preview-group { margin-top: 3rem; }
  .preview-group-head h2 { font-size: 1.2rem; }
}

@media print {
  .side-nav, .mobile-top-bar, .mobile-tab-bar, .export-bar, .app-footer { display: none !important; }
  .main-content { padding: 0; }
  .preview-record, .preview-row { break-inside: avoid; }
  .preview-group + .preview-group { break-before: page; }
}

.preview-part { white-space: nowrap; }

/* F92 generating overlay: the stuck bar's material, one moving arc. */
.gen-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  animation: gen-in 0.2s ease both;
  outline: none;
}
.gen-overlay[hidden] { display: none; }
@keyframes gen-in { from { opacity: 0; } to { opacity: 1; } }

.gen-panel {
  width: min(24rem, 100%);
  text-align: center;
  margin-top: -6vh;
}
.gen-spinner { display: block; width: 40px; height: 40px; margin: 0 auto 1.25rem; }
.gen-track { fill: none; stroke: #ebebea; stroke-width: 2; }
.gen-arc {
  fill: none;
  stroke: #37352f;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 26.7 80.1;
  transform-origin: 20px 20px;
  animation: gen-spin 0.9s linear infinite;
}
@keyframes gen-spin { to { transform: rotate(360deg); } }
.gen-glyph { color: #37352f; }
.gen-done { display: none; }
.gen-overlay.is-done .gen-track,
.gen-overlay.is-done .gen-arc,
.gen-overlay.is-done .gen-glyph { display: none; }
.gen-overlay.is-done .gen-done { display: inline; animation: gen-pop 0.25s cubic-bezier(0.2, 0.6, 0.2, 1) both; transform-origin: 20px 20px; }
@keyframes gen-pop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }

.gen-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #37352f;
}
.gen-step {
  min-height: 2.9em;
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #9b9a97;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.gen-step.is-out { opacity: 0; transform: translateY(3px); transition-duration: 0.15s; }
.gen-overlay.is-done .gen-step {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  color: #55534e;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .gen-arc { display: none; }
}

@media print {
  .gen-overlay { display: none !important; }
}