/* ================================================================
   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).
   ================================================================ */

/* --- 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;
}

/* --- 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;
  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: #f7f6f3;
  color: #37352f;
  opacity: 1;
}

.side-nav a.active {
  background: #f7f6f3;
  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;
}

.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"],
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: #f7f6f3;
  color: #9b9a97;
  cursor: not-allowed;
}

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;
}

.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 #ebebea;
  border-radius: 12px;
  background: #faf9f7;
  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;
}

/* --- Section anchor tabs --- */

.section-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f0efec;
}

.section-tabs a {
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #9b9a97;
}

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

/* --- 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;
}

/* --- Sortable table headers (firm lawyer list) --- */

.sort-link {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: #9b9a97;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sort-link:hover,
.sort-link.active {
  color: #37352f;
}

.sort-caret {
  font-size: 0.7rem;
}

/* --- 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 groups --- */

/* Per-channel referee rules under the Referees intro hint. */
.referee-rules {
  margin-bottom: 1.25rem;
  padding-left: 1.1rem;
}

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

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

.referee-group {
  margin-bottom: 1.25rem;
}

.referee-group-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

/* --- 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;
}

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

/* 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);
}

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

.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;
}

.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. */
.date-group:first-child .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;
}

/* --- 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;
  }

  .date-row-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .date-row-actions .date-firm-controls,
  .date-row-actions .date-firm-control {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .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)
     .btn-export-step  middle  — "start an export" (channel picker)
     .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;
}

/* 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);
}

/* Middle — "start an export" on the channel picker: flat ink and the
   glyph for scent, a gentle resting shadow that lifts on hover, but
   none of the hero's gradient, size or depth. A stepping stone. */
.btn-export-step {
  color: #ffffff;
  background: #37352f;
  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.06);
  transition: background 0.15s, box-shadow 0.15s,
    transform 0.15s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.btn-export-step:hover {
  color: #ffffff;
  background: #2f2e29;
  box-shadow: 0 4px 12px rgba(15, 15, 15, 0.1);
  transform: translateY(-1px);
}

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

/* Readiness page — the terminal action gets a stage: lifted clear of
   the deal table, the hero on its own line, and the "choose another
   channel" escape receding to a quiet link beneath it. */
.export-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

.export-actions .btn-ghost {
  padding: 0.25rem 0;
  font-size: 0.8rem;
  color: #9b9a97;
}

.export-actions .btn-ghost:hover {
  background: transparent;
  color: #55534e;
}

@media (max-width: 768px) {
  .export-actions {
    align-items: stretch;
  }
  .export-actions .btn-export {
    justify-content: center;
  }
  .export-actions .btn-ghost {
    align-self: flex-start;
  }
}

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

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

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

/* Trailing "Deals without a practice area" card sits after the export form —
   .card only carries margin-bottom, so detach it from the action-button row. */
.readiness-unassigned {
  margin-top: 2rem;
}

.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;
}

.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;
}

.matter-cap-hint {
  font-size: 13px;
  color: var(--text-secondary, #6b6b6b);
}

@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;
}

/* Export and "Save answers" share one line; the hero keeps its weight. */
.export-actions-main {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.export-actions-main .btn-secondary {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (max-width: 768px) {
  /* Clear the 52px fixed top bar when landing on #answers-card. */
  .answers-card {
    scroll-margin-top: calc(52px + 1rem);
  }
  .export-actions-main {
    flex-direction: column;
  }
  .export-actions-main .btn {
    justify-content: center;
  }
}

@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;
}

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

.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-table .people-type {
  white-space: nowrap;
}

.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;
  }

  .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;
}

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

.deals-status {
  white-space: nowrap;
}

/* Export readiness: instant deal filter (F13.1 pattern). display:none only —
   a hidden ticked checkbox keeps submitting with the export form. */
.export-deals-table tbody tr.hidden-by-search {
  display: none !important;
}

.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) {
  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;
}

/* 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;
  }

  /* Wrapped under the title: pull the ghost toggle's text onto the title edge. */
  .deals-list .page-header-row .row-actions {
    margin-left: -0.6rem;
  }

  .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;
  }

  /* Client is the card title: drop the label, read as one line. */
  .deals-table td.deals-client-cell {
    justify-content: flex-start;
    gap: 0;
    color: #37352f;
    font-size: 0.95rem;
    font-weight: 500;
  }

  .deals-table td.deals-client-cell::before {
    content: none;
  }

  /* 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;
  }
}

/* ================================================================
   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;
}

/* F18 D5 — per-firm "Mark submitted" controls on /dates rows. */
.date-firm-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}

.date-firm-control {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.date-firm-name {
  min-width: 0;
  font-size: 0.82rem;
  color: #55534e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Several firms: the controls drop under the date as one quiet line per firm. */
.date-row-multi {
  flex-wrap: wrap;
}

.date-row-multi .date-firm-controls {
  flex-basis: 100%;
  width: 100%;
  min-width: 0;
  align-items: stretch;
  gap: 0.15rem;
}

.date-row-multi .date-firm-control {
  flex-wrap: nowrap;
  min-height: 2rem;
}

.date-row-multi .date-firm-name {
  flex: 1;
}

/* 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;
}

.dept-table td:last-child {
  white-space: nowrap;
}

/* 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: #faf9f7;
  border: 1px solid #f0efec;
  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;
}

.ranking-add-foot {
  align-items: end;
}

.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;
  }

  .date-row-multi .date-firm-control {
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    padding: 0.25rem 0;
  }

  .date-row-multi .date-firm-name {
    flex-basis: 100%;
  }
}

/* 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;
  }
}

/* F18 — the linked department beside each ranking on the export practice step. */
.rpa-dept-note {
  font-size: 0.82rem;
}

/* 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);
}

.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;
  }
}

/* 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;
}