/* ==========================================================================
   Firm record — nested subnav, page shell, widgets and Activity slide-out.
   UI scaffolding; all data is placeholder for now.
   ========================================================================== */

/* --- Shell layout -------------------------------------------------------- */
.firm-show {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.firm-show__main {
  min-width: 0;
}

.firm-show__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

/* The firm's logo beside its name, on every tab of the record. On the same dark
   plate the upload field previews it on, so a firm whose mark is white-on-
   transparent is readable here rather than invisible (see shared/_logo_field). */
.firm-show__logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: 34px;
  max-width: 140px;
  padding: 4px 8px;
  background: var(--color-secondary-dark);
  border-radius: var(--radius-md);
}

.firm-show__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.firm-show__heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.firm-show__title {
  margin: 0;
  font-size: var(--font-size-xxlarge);
  font-weight: 600;
  color: var(--color-primary-dark);
}

/* The bookmark star and the Activity button, on the end of the header row. */
.firm-show__header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.firm-show__activity-btn {
  flex-shrink: 0;
}

.firm-show__body {
  min-width: 0;
}

/* --- Subnav (distinct card panel with icons) ----------------------------- */
.firm-subnav {
  position: sticky;
  top: calc(var(--topbar-height) + var(--space-4));
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.firm-subnav__heading {
  margin: 0 0 var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-small);
  font-weight: 600;
  letter-spacing: var(--label-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.firm-subnav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.firm-subnav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-medium);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.firm-subnav__link:hover {
  background: var(--tint-navy-04);
  color: var(--color-primary-dark);
}

.firm-subnav__link:hover .firm-subnav__icon {
  color: var(--color-primary-dark);
}

.firm-subnav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--tint-navy-06);
  color: var(--color-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.firm-subnav__icon .minor-icon {
  width: 16px;
  height: 16px;
}

.firm-subnav__label {
  min-width: 0;
}

.firm-subnav__link--active {
  background: var(--tint-green-16);
  color: var(--color-primary-dark);
  font-weight: 600;
}

.firm-subnav__link--active .firm-subnav__icon {
  background: var(--color-primary-green);
  color: var(--color-white);
}

/* Sign out, for a firm-scoped user whose only nav this is. Set apart from the
   record's pages by a rule, since it leaves the application rather than moving
   around inside it. */
.firm-subnav__footer {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.firm-subnav__signout {
  width: 100%;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

/* --- Body layouts -------------------------------------------------------- */
.firm-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.firm-dashboard__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.firm-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.firm-stack--narrow {
  max-width: 560px;
}

.firm-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-5);
}

/* --- Card primitive ------------------------------------------------------ */
.firm-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.firm-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.firm-card__title {
  margin: 0;
  font-size: var(--font-size-large);
  font-weight: 600;
  color: var(--color-primary-dark);
}

.firm-card__blurb {
  margin: 0;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

/* A card whose title carries a line of explanation under it, rather than a
   control beside it. */
.firm-card__header--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.firm-card__edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast), transform var(--transition-fast);
}

.firm-card__edit:hover {
  background: var(--tint-navy-04);
  border-color: var(--color-border);
  color: var(--color-primary-dark);
}

/* The card it opens takes a round trip to arrive, so the button answers the
   click on its own first. */
.firm-card__edit:active {
  transform: scale(0.92);
}

/* --- Card swap (values ⇄ edit form) -------------------------------------- */
/* Each editable card is its own turbo frame, so switching to its form is a
   navigation, and the form is most of a card taller than the values it replaces.
   Two things used to make that ugly:

   The height was never animated, so the card doubled in size between one frame
   and the next while only its opacity was easing — the change everyone actually
   sees was the one thing that snapped. It is animated from JS now, because the
   height being left and the height being arrived at are only both known there
   (see section_swap_controller).

   And the opacity was ramped twice, in opposite directions: `busy` started
   fading the card out, the swap interrupted that a frame or two later, opacity
   sprang back towards 1, and then the entering animation slammed it to 0 and
   faded it up again. On a local request all of that happened inside ~200ms,
   which is what read as a flash. Now the dim is held back long enough that a
   quick swap never shows it at all, and the arriving half fades up from part
   way rather than from nothing. */
.firm-card-frame {
  display: block;
  transition: opacity var(--transition-fast), height var(--transition-slow);
}

/* Held back deliberately. The swap usually lands in a few tens of milliseconds,
   and a dim that comes and goes inside that is a flicker, not feedback — the
   button's own :active answers the click meanwhile. This is here for the request
   that is genuinely slow enough to be worth reporting. */
.firm-card-frame[busy] {
  opacity: 0.6;
  transition: opacity var(--transition-base) 0.25s;
  /* Nothing in a card that is on its way out is worth clicking. */
  pointer-events: none;
}

.firm-card-frame--entering {
  /* Its new contents are taller than the box they are growing into. */
  overflow: hidden;
  /* --transition-slow carries its own easing, so no timing function is added
     here — a second one makes the shorthand invalid and the whole declaration is
     dropped, which is what the swap spec's animation events really check. */
  animation: firm-card-swap var(--transition-slow);
}

@keyframes firm-card-swap {
  from {
    /* Not from zero. The outgoing half was on screen a frame ago, so starting
       from nothing reads as a blink; starting part way reads as a change. */
    opacity: 0.45;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .firm-card__edit,
  .firm-card-frame,
  .firm-card-frame--entering {
    transition: none;
    animation: none;
  }
}

.firm-card__edit--danger:hover {
  background: var(--tint-danger-10);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.firm-card__edit .minor-icon {
  width: 16px;
  height: 16px;
}

/* --- Contact list (address / phone / email / web) ------------------------ */
.firm-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.firm-contact__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-medium);
  color: var(--color-text);
  line-height: 1.5;
}

.firm-contact__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--color-primary-green);
}

.firm-contact__icon svg {
  width: 18px;
  height: 18px;
}

/* --- Field / value pairs ------------------------------------------------- */
.firm-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

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

.firm-field--inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.firm-field__label {
  margin: 0;
  font-size: var(--font-size-small);
  font-weight: 600;
  letter-spacing: var(--label-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.firm-field__value {
  margin: 0;
  font-size: var(--font-size-medium);
  color: var(--color-text);
}

.firm-field__value--empty {
  color: var(--color-text-faint);
}

.firm-field--inline .firm-field__label {
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--font-size-medium);
  font-weight: 500;
  color: var(--color-text-muted);
}

.firm-field__hint {
  display: block;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

/* Field pairs in one grid that flows row by row, so each field lands opposite
   its counterpart rather than under whatever the column happened to reach. */
.firm-field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5) var(--space-6);
  margin: 0;
}

/* --- Inline link value (e.g. "Full Service") ----------------------------- */
.firm-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-primary-green);
  font-weight: 600;
  text-decoration: none;
}

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

.firm-link__icon {
  width: 14px;
  height: 14px;
  color: var(--color-text-faint);
}

/* --- Service information -------------------------------------------------- */
.firm-service--expanded {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
}

.firm-fields--attributes {
  gap: var(--space-4);
}

.firm-coordination {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-medium);
  color: var(--color-text);
}

/* --- Yes / No toggle (static) -------------------------------------------- */
.firm-toggle {
  display: inline-flex;
  padding: 2px;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

.firm-toggle__option {
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--color-text-faint);
}

.firm-toggle__option.is-active.firm-toggle__option--yes {
  background: var(--color-primary-green);
  color: var(--color-white);
}

.firm-toggle__option.is-active.firm-toggle__option--no {
  background: var(--color-danger);
  color: var(--color-white);
}

/* --- Small tag pill (e.g. Delivery Model "UK") --------------------------- */
.firm-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-small);
  font-weight: 600;
}

.firm-tag--green {
  background: var(--tint-green-16);
  color: var(--color-success-dark);
}

/* --- Key contact cards --------------------------------------------------- */
.firm-contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.firm-contact-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.firm-contact-card__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 160px;
}

.firm-contact-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  flex: 1;
  min-width: 0;
}

.firm-contact-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-medium);
  color: var(--color-text);
}

.firm-contact-card__meta-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--color-text-faint);
}

.firm-contact-card__actions {
  display: flex;
  gap: var(--space-1);
  margin-left: auto;
}

/* --- Tasks table --------------------------------------------------------- */
.firm-tasks {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.firm-table-user {
  display: inline-flex;
  align-items: center;
}

.firm-table-updated {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.firm-table-updated__at {
  font-size: var(--font-size-small);
  color: var(--color-text-faint);
}

/* --- Feedback gauge ------------------------------------------------------ */
.firm-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

.firm-gauge__label {
  font-size: var(--font-size-small);
  font-weight: 600;
  letter-spacing: var(--label-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.firm-gauge__svg {
  width: 200px;
  max-width: 100%;
  height: auto;
}

.firm-gauge__track {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 14;
  stroke-linecap: round;
}

.firm-gauge__value {
  fill: none;
  stroke: var(--color-primary-green);
  stroke-width: 14;
  stroke-linecap: round;
}

.firm-gauge__needle {
  stroke: var(--color-primary-dark);
  stroke-width: 3;
  stroke-linecap: round;
}

.firm-gauge__hub {
  fill: var(--color-primary-dark);
}

/* No survey answered yet: the needle rests at the foot of the scale, greyed so
   it reads as "nothing to point at" rather than as a score of zero. */
.firm-gauge__needle--empty {
  stroke: var(--color-border-strong);
}

.firm-gauge__readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(var(--space-4) * -1);
}

.firm-gauge__score {
  font-size: var(--font-size-xxxlarge);
  font-weight: 600;
  color: var(--color-primary-dark);
  line-height: 1;
}

.firm-gauge__score--empty {
  color: var(--color-text-faint);
}

.firm-gauge__caption {
  font-size: var(--font-size-medium);
  color: var(--color-text-muted);
}

/* --- Service notes / checklist ------------------------------------------- */
.firm-note-text {
  margin: 0;
  font-size: var(--font-size-medium);
  line-height: 1.6;
  color: var(--color-text);
}

.firm-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.firm-checklist__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-medium);
  color: var(--color-text);
}

.firm-checklist__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: transparent;
}

.firm-checklist__item.is-checked .firm-checklist__box {
  background: var(--color-primary-green);
  border-color: var(--color-primary-green);
  color: var(--color-white);
}

.firm-checklist__box .minor-icon {
  width: 14px;
  height: 14px;
}

/* --- Record tables (cases / reviews / tasks / complaints) ----------------- */
.firm-records__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.firm-records__title {
  margin: 0;
  font-size: var(--font-size-large);
  font-weight: 600;
  color: var(--color-primary-dark);
}

.firm-records__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.firm-records .table-container {
  margin-bottom: 0;
}

/* Every page of a firm record fills the viewport rather than growing past it:
   the warning banner, breadcrumb, page header and subnav stay where they are and
   only the tab's own content scrolls — the same shell the index pages use (see
   .index-page in table.css).

   A record-table page goes one step further and hands that scroll to the table,
   so its search, filters and pagination stay put and only the rows move. That is
   what `fill` opts into (see firms/show/_shell).

   Wide screens only: below 1024px the shell stacks into a single column with the
   subnav as a row above the content (see the responsive block at the bottom of
   this file), which has no room to pin anything. There the page scrolls as it
   always did. */
@media (min-width: 1025px) {
  turbo-frame#main_content:has(> .firm-show) {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  .firm-show {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
    /* One row bounded by the shell rather than by its tallest child, so a subnav
       longer than the viewport scrolls itself instead of stretching the page. */
    grid-template-rows: minmax(0, 1fr);
  }

  .firm-show__nav {
    min-height: 0;
  }

  /* Sticky is pointless once the page itself no longer scrolls. The card takes
     its natural height, or the column's if that is shorter, and scrolls its own
     list — so on a short viewport the panel still ends in a border rather than
     running off the bottom of the screen. */
  .firm-subnav {
    position: static;
    display: flex;
    flex-direction: column;
    max-height: 100%;
  }

  .firm-subnav__list {
    min-height: 0;
    overflow-y: auto;
  }

  /* Whatever the list does, the way out stays on screen. */
  .firm-subnav__footer {
    flex: 0 0 auto;
  }

  .firm-show__main {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Neither the warnings nor the page header scroll: they are the fixed top of
     the column, and the tab's own content moves underneath them. */
  #firm_warning_banner,
  .firm-show__header {
    flex: 0 0 auto;
  }

  /* The one part of the page that moves. */
  .firm-show__body {
    flex: 1 1 auto;
    min-height: 0;
    /* Only ever vertically: a card's shadow must not put a scrollbar under it. */
    overflow: hidden auto;
  }

  /* Except on a record-table page, where the body passes its height down to the
     table and the rows scroll inside it instead. */
  .firm-show--fill .firm-show__body,
  .firm-show--fill .firm-records {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .firm-show--fill .firm-records > turbo-frame {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  .firm-show--fill .firm-records .table-container {
    flex: 1 1 auto;
    min-height: 180px;
  }

  .firm-show--fill .firm-records .table-pagination {
    flex: 0 0 auto;
  }
}

/* --- Placeholder pages (no design yet) ----------------------------------- */
.firm-placeholder {
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-6);
}

.firm-placeholder__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--tint-green-16);
  color: var(--color-primary-dark);
}

.firm-placeholder__icon svg {
  width: 26px;
  height: 26px;
}

.firm-placeholder__title {
  margin: 0;
  font-size: var(--font-size-large);
  font-weight: 600;
  color: var(--color-primary-dark);
}

.firm-placeholder__blurb {
  margin: 0;
  max-width: 420px;
  font-size: var(--font-size-medium);
  color: var(--color-text-muted);
}

.firm-placeholder__badge {
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--color-text-faint);
}

/* --- Activity slide-out (reuses .drawer + .audit-history design) ---------- */
/* Everything inside is fixed to the viewport, so the wrapper is a grouping for
   the controller and the `pointer-events` above — not a box. Without
   `display: contents` it is still a child of the .firm-show grid, and a grid
   child it must place somewhere: it would take a row of its own and push the
   nav and the page down by the grid's gap on every tab that has one. */
.firm-activity {
  display: contents;
  pointer-events: none;
}

.firm-show.is-activity-open .firm-activity {
  pointer-events: auto;
}

.firm-activity .drawer__overlay {
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.firm-show.is-activity-open .firm-activity .drawer__overlay {
  opacity: 1;
}

.firm-activity .drawer__content {
  transform: translateX(100%);
  transition: transform var(--transition-slow);
}

.firm-show.is-activity-open .firm-activity .drawer__content {
  transform: translateX(0);
}

.firm-activity .audit-history__action strong {
  color: var(--color-primary-dark);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .firm-show {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .firm-subnav {
    position: static;
  }

  .firm-subnav__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .firm-dashboard,
  .firm-service--expanded {
    grid-template-columns: 1fr;
  }
}

/* --- Service plan (Service Information tab) ------------------------------ */
/* Field pairs sit in one grid that flows row by row, so each field lands
   opposite its counterpart (status / manager, review / payment schedule). */
.firm-service-plan__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5) var(--space-6);
  margin: 0;
}

.firm-service-plan__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* A plan past its renewal kick-off date is flagged on the card itself, not just
   in its status pill — it is the one state that needs acting on. */
.firm-service-plan--renewal-due {
  border-color: var(--color-warning);
  box-shadow: var(--shadow-xs), 0 0 0 3px rgba(245, 158, 11, 0.12);
}

.firm-service-plan__flag {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-warning-dark);
  font-size: var(--font-size-medium);
  line-height: 1.5;
}

.firm-service-plan__flag-icon {
  flex-shrink: 0;
  /* Nudged onto the first line's baseline rather than its box top. */
  margin-top: 2px;
}

.firm-service-plan__notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.firm-note-text--boxed {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

/* --- Client numbers ------------------------------------------------------ */
.firm-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.firm-metric {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.firm-metric__value {
  margin: 0;
  font-size: var(--font-size-xxlarge);
  font-family: var(--font-family-bold);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-primary-dark);
}

.firm-metric__label {
  margin: 0;
  font-size: var(--font-size-small);
  letter-spacing: var(--label-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --- Service inclusions -------------------------------------------------- */
/* Columns rather than a grid: the list reads all the way down one side and then
   the other, as the design has it. */
.firm-inclusions {
  display: block;
  column-count: 2;
  column-gap: var(--space-6);
}

.firm-inclusions .firm-checklist__item {
  /* Column layout drops flex gaps, so each row carries its own spacing and is
     kept from breaking across the column boundary. */
  margin-bottom: var(--space-3);
  break-inside: avoid;
}

/* --- Firm preferences (cards, brand swatches, meeting-type choices) ------- */
/* The heading and its blurb stack together on the left, leaving the edit pencil
   on the header's right whether or not the card carries a blurb. */
.firm-card__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* The brand palette's pills are the shared .colour-swatch, so the card and the
   picker that fills it show a colour the same way (see colour_picker.css). */

/* Documents on file: the shared checklist row with its state pill pushed to the
   far edge, as the design has it. */
.firm-preferences__documents {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.firm-documents {
  gap: 0;
  margin-top: var(--space-2);
}

.firm-documents__item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.firm-documents__item:last-child {
  border-bottom: none;
}

.firm-documents__label {
  flex: 1;
  min-width: 0;
}

/* Fixed-list choices (preferred meeting types): every option is shown, so what
   the firm will not do is as plain as what they will. */
.firm-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.firm-choice {
  padding: 3px 12px;
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--color-text-faint);
}

.firm-choice.is-chosen {
  background: var(--tint-green-16);
  color: var(--color-success-dark);
}

/* --- Warning notes ------------------------------------------------------- */
.firm-warnings {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.firm-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  background: var(--tint-danger-10);
}

.firm-warning__body {
  flex: 1;
  min-width: 0;
}

.firm-warning__text {
  margin: 0;
  font-size: var(--font-size-medium);
  line-height: 1.5;
  color: var(--color-danger);
}

.firm-warning__meta {
  margin: 2px 0 0;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

/* button_to wraps the control in a form, so the button is unwrapped back to a
   bare icon rather than inheriting any block layout. */
.firm-warning__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-danger);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.firm-warning__dismiss:hover {
  background: var(--tint-danger-10);
}

/* --- Other notes (Firm Preferences) -------------------------------------- */
/* Same note, without the alarm: read as part of the preferences rather than as
   something to stop and deal with. */
.firm-notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.firm-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.firm-note__body {
  flex: 1;
  min-width: 0;
}

.firm-note__text {
  margin: 0;
  font-size: var(--font-size-medium);
  line-height: 1.5;
  color: var(--color-text);
}

.firm-note__meta {
  margin: 2px 0 0;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

/* As .firm-warning__dismiss: button_to wraps the control in a form, so the
   button is unwrapped back to a bare icon. */
.firm-note__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.firm-note__dismiss:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

/* --- Note composer (both cards) ------------------------------------------ */
.firm-note-composer__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.firm-note-composer__row .form__input {
  flex: 1;
  min-width: 0;
}

.firm-note-composer__row input[type="submit"] {
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .firm-service-plan__grid,
  .firm-field-grid {
    grid-template-columns: 1fr;
  }

  .firm-inclusions {
    column-count: 1;
  }

  .firm-note-composer__row {
    flex-direction: column;
    align-items: stretch;
  }
}