/*
 * CRM Guest 360 — the three record pages, in the Ivory theme.
 *
 * Phase 4 of the Ivory cascade, and the last surface group the theme had not
 * reached: the Guest profile (buildProfileMarkup), the Reservation detail and
 * its seven tabs (buildReservationDetailMarkup), and the Financial document
 * detail (buildFinancialDocumentDetailMarkup).
 *
 * These rules live outside crm-guest-360.css because that file sits at its
 * architecture-audit line ceiling, and because the three markup modules that
 * render these pages are pinned as well: the restyle is class-only, with no
 * markup change anywhere. crm-guest-360-case-settings.css set the precedent
 * for a small CRM-scoped sheet served through the module manifest, and
 * crm-guest-360-case-bulk.css and crm-guest-360-directory.css are the style
 * precedents this sheet follows.
 *
 * Every colour is consumed from the shared ground and semantic tokens in
 * crm-guest-360-ivory.css, declared on .crm-guest-360-view; nothing is
 * re-declared here, and the only raw values are the two warm shadow alphas and
 * the three coverage-note fallback hues the shell already hard-codes.
 *
 * Loaded after crm-guest-360-directory.css and before the case-settings,
 * case-bulk, analytics and home sheets, so those keep winning their scoped
 * ties — in particular .crm-case-detail keeps its own .crm-profile-panel and
 * .crm-reservation-back treatment, which is why every panel and back-button
 * rule below is guarded under a record root (.crm-profile,
 * .crm-reservation-detail, .crm-financial-document-detail) or under
 * .crm-breadcrumbs, a nav the case editor does not render.
 *
 * Deliberate hand-offs, restated so the next reader does not go looking:
 *
 *   - .crm-coverage-badge, .crm-status-badge, .crm-feedback-rating and the
 *     .crm-case-* chips already carry a themed identity from Phase 2 and
 *     Phase 3 and are not touched here. A badge that changed colour between a
 *     directory row and the record it opens would be a second vocabulary.
 *   - .crm-data-table and the .crm-pos-* variants were re-grounded in
 *     crm-guest-360-directory.css, deliberately and ahead of this phase; only
 *     the room-change row, which exists on no directory, is finished here.
 *   - The error and coverage tints keep their meaning colours. Only the
 *     surface they are mixed into moves from white to the ivory ground.
 */

/* ------------------------------------------------------------------- pane */

/* The ivory pane each record sits on, the same one the directories and the
   case surfaces float their cards over. The record is an <article> that has
   never had a box of its own, so the pane is the article itself. */
.crm-profile,
.crm-reservation-detail,
.crm-financial-document-detail {
  border: 1px solid var(--crm-ivory-hair-strong);
  border-radius: 14px;
  padding: 20px;
  background: var(--crm-ivory-ground);
}

/* ------------------------------------------------- breadcrumbs and the way back */

/* The way back is the first row inside the pane, so it is separated from the
   record card below it by the pane's own hairline rather than by white space
   alone. */
.crm-breadcrumbs {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--crm-ivory-hair);
}

/* The back button arrives as the Portal's cool grey slab. It takes the card,
   the hairline and the quiet ink the case editor's back button already
   speaks in; the size and the radius stay with the shell rule. */
.crm-breadcrumbs .crm-profile-back,
.crm-breadcrumbs .crm-reservation-back,
.crm-breadcrumbs .crm-financial-document-back {
  border: 1px solid var(--crm-ivory-hair);
  color: var(--crm-ivory-ink-soft);
  background: var(--crm-ivory-card);
}

.crm-breadcrumbs .crm-profile-back:hover,
.crm-breadcrumbs .crm-profile-back:focus-visible,
.crm-breadcrumbs .crm-reservation-back:hover,
.crm-breadcrumbs .crm-reservation-back:focus-visible,
.crm-breadcrumbs .crm-financial-document-back:hover,
.crm-breadcrumbs .crm-financial-document-back:focus-visible {
  color: var(--crm-ivory-ink);
  background: var(--accent-soft);
}

/* The trail after the button is an annotation, not a heading: it sits at the
   faintest weight the ground carries. */
.crm-breadcrumbs .crm-breadcrumb-separator,
.crm-breadcrumbs .crm-breadcrumb-current {
  color: var(--crm-ivory-ink-faint);
}

/* ---------------------------------------------------------- record headers */

/* The champagne gradient is the identity of all three record pages and it is
   kept — only re-mixed against the ivory card instead of against white, the
   way the Guest Search hero was in Phase 2. */
.crm-profile-heading,
.crm-reservation-detail-heading,
.crm-financial-document-heading {
  border-color: var(--crm-ivory-hair);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--brand-gold) 10%, var(--crm-ivory-card)),
      var(--crm-ivory-card) 58%
    );
}

/* The record title is the largest type in the CRM and the one place the house
   serif has to carry a clamp() size. The tracking goes from the −0.035/−0.04em
   the interface sans wanted to a hair of positive letter-spacing: a display
   serif set tight loses the joins that make it read as a serif at all. The
   sizes are the shell's and are left alone. */
.crm-profile-heading h3,
.crm-reservation-detail-heading h3,
.crm-financial-document-heading h3 {
  color: var(--crm-ivory-ink);
  font-family: Marcellus, Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* The line under the title — hotel · dates on a reservation, source · guest on
   a document — is the header's caption. */
.crm-reservation-detail-heading p:last-child,
.crm-financial-document-heading p:last-child {
  color: var(--crm-ivory-ink-soft);
}

/* The tag pills beside the title take the record-mock treatment: tracked Tenor
   Sans in the quiet ink on a hairline, not a bold grey capsule.
   :not(.crm-status-badge) matters — the reservation header renders its source
   status through the shared badge, which carries a semantic pair of its own
   from Phase 2 and must not be repainted by a rule that outranks it. */
.crm-profile-tags > span:not(.crm-status-badge) {
  border-color: var(--crm-ivory-hair);
  color: var(--crm-ivory-ink-soft);
  background: var(--crm-ivory-card);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* The avatar keeps its gold ring on the accent-soft fill: it is the one mark
   on the page that stands for a person. Only the ring and the initials are
   re-mixed off the Portal's cool line and heading colours onto the ground the
   header now sits on. */
.crm-profile-heading .crm-profile-avatar {
  border-color: color-mix(in srgb, var(--brand-gold) 48%, var(--crm-ivory-hair));
  color: color-mix(in srgb, var(--brand-gold) 72%, var(--crm-ivory-ink));
}

/* ------------------------------------------------------------ record tabs */

/* The Phase 3 tab vocabulary, which took its 2px gold underline from this very
   strip: card ground, tracked Tenor Sans, quiet ink, the active word carrying
   the rule and the reading ink. */
.crm-profile .crm-record-tabs,
.crm-reservation-detail .crm-record-tabs {
  border-color: var(--crm-ivory-hair);
  background: var(--crm-ivory-card);
}

.crm-profile .crm-record-tabs button,
.crm-reservation-detail .crm-record-tabs button {
  color: var(--crm-ivory-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.crm-profile .crm-record-tabs button:hover,
.crm-profile .crm-record-tabs button:focus-visible,
.crm-reservation-detail .crm-record-tabs button:hover,
.crm-reservation-detail .crm-record-tabs button:focus-visible {
  color: var(--crm-ivory-ink);
  background: var(--crm-ivory-ground);
}

.crm-profile .crm-record-tabs button.active,
.crm-reservation-detail .crm-record-tabs button.active {
  border-bottom-color: var(--brand-gold);
  color: var(--crm-ivory-ink);
}

.crm-profile .crm-record-tabs button small,
.crm-reservation-detail .crm-record-tabs button small {
  color: var(--crm-ivory-ink-soft);
  background: var(--crm-ivory-ground);
}

/* --------------------------------------------------------- metrics strips */

/* The header, the tab strip and the metrics row are one continuous card: the
   shell joins them with `border-top: 0` and a shared radius, and that
   continuity is deliberate. Closing it on the card keeps the three pieces one
   object floating on the pane rather than three boxes stacked on it. */
.crm-profile-metrics,
.crm-financial-document-metrics {
  border-color: var(--crm-ivory-hair);
  background: var(--crm-ivory-card);
}

.crm-profile-metrics > div + div,
.crm-financial-document-metrics > div + div {
  border-left-color: var(--crm-ivory-hair);
}

.crm-profile-metrics span,
.crm-financial-document-metrics span {
  color: var(--crm-ivory-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.crm-profile-metrics strong,
.crm-financial-document-metrics strong {
  color: var(--crm-ivory-ink);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
}

/* ---------------------------------------------------------------- panels */

/* Every block below the metrics row is the same object: a card with a
   hairline header. The Portal shadow goes — on ivory a drop shadow reads as
   grime under the card rather than as lift, which is why the case editor
   dropped it too. */
.crm-profile .crm-profile-panel,
.crm-reservation-detail .crm-profile-panel,
.crm-financial-document-detail .crm-profile-panel,
.crm-reservation-detail .crm-financial-panel,
.crm-reservation-detail .crm-financial-lines,
.crm-financial-document-detail .crm-financial-lines,
.crm-profile .crm-reservation-history,
.crm-reservation-detail .crm-reservation-history {
  border-color: var(--crm-ivory-hair);
  background: var(--crm-ivory-card);
  box-shadow: none;
}

.crm-profile .crm-profile-panel > header,
.crm-reservation-detail .crm-profile-panel > header,
.crm-financial-document-detail .crm-profile-panel > header,
.crm-reservation-detail .crm-financial-panel > header,
.crm-reservation-detail .crm-financial-lines > header,
.crm-financial-document-detail .crm-financial-lines > header,
.crm-profile .crm-reservation-history-heading,
.crm-reservation-detail .crm-reservation-history-heading {
  border-bottom-color: var(--crm-ivory-hair);
}

.crm-profile .crm-profile-panel h4,
.crm-reservation-detail .crm-profile-panel h4,
.crm-financial-document-detail .crm-profile-panel h4,
.crm-reservation-detail .crm-financial-panel > header h4,
.crm-reservation-detail .crm-financial-lines > header h4,
.crm-financial-document-detail .crm-financial-lines > header h4,
.crm-profile .crm-reservation-history-heading h4,
.crm-reservation-detail .crm-reservation-history-heading h4 {
  color: var(--crm-ivory-ink);
  font-family: Marcellus, Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 400;
}

/* The count that sits at the right end of a panel header — "4 linked", "12
   source lines" — is the header's caption, not a second heading. */
.crm-profile .crm-profile-panel > header > span,
.crm-reservation-detail .crm-profile-panel > header > span,
.crm-reservation-detail .crm-financial-panel > header > span,
.crm-reservation-detail .crm-financial-lines > header > span,
.crm-financial-document-detail .crm-financial-lines > header > span,
.crm-profile .crm-reservation-history-heading p:last-child,
.crm-reservation-detail .crm-reservation-history-heading p:last-child {
  color: var(--crm-ivory-ink-soft);
}

/* The shared secondary button reaches the record pages only through the retry
   in a state panel, and arrives as the same borderless cool slab the other
   two sheets restate. Same treatment, same reasoning. */
.crm-profile .secondary-button,
.crm-reservation-detail .secondary-button,
.crm-financial-document-detail .secondary-button {
  border: 1px solid var(--crm-ivory-hair);
  background: var(--crm-ivory-ground);
  color: var(--crm-ivory-ink-soft);
}

.crm-profile .secondary-button:hover,
.crm-profile .secondary-button:focus-visible,
.crm-reservation-detail .secondary-button:hover,
.crm-reservation-detail .secondary-button:focus-visible,
.crm-financial-document-detail .secondary-button:hover,
.crm-financial-document-detail .secondary-button:focus-visible {
  background: var(--accent-soft);
  color: var(--crm-ivory-ink);
}

/* ----------------------------------------------------------- detail lists */

/* The dt/dd pairs that fill every panel: the term in the tracked caption
   voice, the value in the reading ink, the cell rules on the hairline. */
.crm-profile .crm-profile-details > div,
.crm-profile .crm-profile-details > div:nth-child(2n),
.crm-profile .crm-stay-details > div,
.crm-profile .crm-stay-details > div:not(.featured):nth-child(2n + 1),
.crm-reservation-detail .crm-reservation-detail-list > div,
.crm-reservation-detail .crm-reservation-detail-list > div:nth-child(2n) {
  border-color: var(--crm-ivory-hair);
}

.crm-profile .crm-profile-details dt,
.crm-profile .crm-stay-details dt,
.crm-reservation-detail .crm-reservation-detail-list dt {
  color: var(--crm-ivory-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.crm-profile .crm-profile-details dd,
.crm-profile .crm-stay-details dd,
.crm-reservation-detail .crm-reservation-detail-list dd {
  color: var(--crm-ivory-ink);
}

/* A value the source never sent drops to the caption ink on both halves, so a
   blank cell reads as absent rather than as quiet, and the disclosure that
   hides them takes the same rule and ink as the cells above it. */
.crm-reservation-detail .crm-missing-details {
  border-top-color: var(--crm-ivory-hair);
}

.crm-reservation-detail .crm-missing-details summary,
.crm-reservation-detail .crm-missing-details .crm-reservation-detail-list dd,
.crm-reservation-detail .crm-missing-details .crm-reservation-detail-list dt {
  color: var(--crm-ivory-ink-soft);
}

/* Where a value came from is an annotation on the ground; the CRM-owned
   variant keeps the gold it earns by being the one editable thing on a
   read-only page. */
.crm-profile .crm-value-origin,
.crm-reservation-detail .crm-value-origin {
  color: var(--crm-ivory-ink-soft);
  background: var(--crm-ivory-ground);
}

.crm-profile .crm-value-origin.crm,
.crm-reservation-detail .crm-value-origin.crm {
  color: color-mix(in srgb, var(--brand-gold) 74%, var(--crm-ivory-ink));
  background: var(--accent-soft);
}

/* ------------------------------------------------- the profile stay history */

/* The linked-stays list is a fake table over a list of buttons, exactly like
   the Guest Search results grid Phase 2 re-grounded. Same card, same header
   voice, same warm hover. */
.crm-profile .crm-reservation-table-head,
.crm-reservation-detail .crm-reservation-table-head {
  border-bottom-color: var(--crm-ivory-hair);
  background: var(--crm-ivory-ground);
  color: var(--crm-ivory-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.crm-profile .crm-reservation-list > [role="listitem"] + [role="listitem"],
.crm-reservation-detail .crm-reservation-list > [role="listitem"] + [role="listitem"] {
  border-top-color: var(--crm-ivory-hair-soft);
}

.crm-profile .crm-reservation-card,
.crm-reservation-detail .crm-reservation-card {
  color: var(--crm-ivory-ink);
  background: var(--crm-ivory-card);
}

.crm-profile .crm-reservation-card:hover,
.crm-profile .crm-reservation-card:focus-visible,
.crm-reservation-detail .crm-reservation-card:hover,
.crm-reservation-detail .crm-reservation-card:focus-visible {
  color: var(--crm-ivory-ink);
  background: color-mix(in srgb, var(--brand-gold) 7%, var(--crm-ivory-card));
}

.crm-profile .crm-reservation-card strong,
.crm-reservation-detail .crm-reservation-card strong {
  color: var(--crm-ivory-ink);
}

.crm-profile .crm-reservation-card span,
.crm-reservation-detail .crm-reservation-card span {
  color: var(--crm-ivory-ink-soft);
}

/* The per-cell label repeats the head row for the narrow layout, where the
   head row is hidden. It is the same word in the same place, so it is the
   same voice — tracked Tenor rather than a second, bolder capital. */
.crm-profile .crm-reservation-card small,
.crm-reservation-detail .crm-reservation-card small {
  color: var(--crm-ivory-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.1em;
}

/* The arrival date keeps the gold it has always led the row with; only the
   weight it is mixed to changes, from the raw brand gold to the gold-ink the
   rest of the pane's affordances speak in. */
.crm-profile .crm-reservation-date strong,
.crm-reservation-detail .crm-reservation-date strong {
  color: var(--ok);
}

.crm-profile .crm-reservation-history-heading > span,
.crm-reservation-detail .crm-reservation-history-heading > span {
  color: color-mix(in srgb, var(--brand-gold) 72%, var(--crm-ivory-ink));
  font-weight: 400;
}

.crm-profile .crm-reservation-footer,
.crm-reservation-detail .crm-reservation-footer {
  border-top-color: var(--crm-ivory-hair);
  background: var(--crm-ivory-ground);
}

/* ------------------------------------------------------ roster and stay days */

.crm-reservation-detail .crm-guest-roster > [role="listitem"] + [role="listitem"] .crm-guest-roster-row,
.crm-reservation-detail .crm-stay-day-row + .crm-stay-day-row {
  border-top-color: var(--crm-ivory-hair-soft);
}

.crm-reservation-detail button.crm-guest-roster-row:hover,
.crm-reservation-detail button.crm-guest-roster-row:focus-visible {
  background: color-mix(in srgb, var(--brand-gold) 8%, var(--crm-ivory-card));
}

.crm-reservation-detail .crm-guest-roster-row strong,
.crm-reservation-detail .crm-stay-day-row strong {
  color: var(--crm-ivory-ink);
}

.crm-reservation-detail .crm-guest-roster-row small,
.crm-reservation-detail .crm-stay-day-row small {
  color: var(--crm-ivory-ink-soft);
}

.crm-reservation-detail .crm-guest-roster-row .crm-profile-avatar {
  border-color: color-mix(in srgb, var(--brand-gold) 48%, var(--crm-ivory-hair));
  color: color-mix(in srgb, var(--brand-gold) 72%, var(--crm-ivory-ink));
}

/* The nightly header row is a table head without a table: same ground, same
   tracked Tenor caption as every thead on the ivory surfaces. */
.crm-reservation-detail .crm-stay-day-row.header {
  background: var(--crm-ivory-ground);
  color: var(--crm-ivory-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.1em;
}

/* ------------------------------------------------------ room-move annotations */

/* The room-change strip, the chip and the observed line keep their gold: a
   move is the one event the nightly table narrates, and Phase 2's ink is
   already the right one. Only the surfaces they sit on move to the card. */
.crm-reservation-detail .crm-room-change-strip {
  border-top-color: var(--crm-ivory-hair);
  color: var(--crm-ivory-ink-soft);
}

.crm-reservation-detail .crm-room-change-strip strong {
  color: var(--crm-ivory-ink);
}

.crm-reservation-detail .crm-room-timeline-ranges em {
  color: var(--crm-ivory-ink-soft);
}

/* The moved row's hover was the last cool grey left on the nightly table; the
   warm hover the rest of the table took in Phase 2 is restated over the
   accent tint so the row does not lose its mark while the pointer is on it. */
.crm-reservation-detail .crm-data-table tbody tr.crm-room-change-row td {
  border-top-color: color-mix(in srgb, var(--brand-gold) 55%, var(--crm-ivory-hair));
}

.crm-reservation-detail .crm-data-table tbody tr.crm-room-change-row:hover td {
  background: color-mix(in srgb, var(--brand-gold) 12%, var(--crm-ivory-card));
}

/* --------------------------------------------------- states and placeholders */

/* Loading, empty and error panels: the copy takes the ivory inks, the panel
   that carries its own box takes the card, and the shimmer is re-mixed onto
   the ivory family so a skeleton row reads as the card warming up rather than
   as a cold band laid over it. */
.crm-profile .crm-context-state,
.crm-reservation-detail .crm-context-state,
.crm-financial-document-detail .crm-context-state {
  border-color: var(--crm-ivory-hair);
  color: var(--crm-ivory-ink-soft);
  background: var(--crm-ivory-card);
}

.crm-profile .crm-context-state > span,
.crm-reservation-detail .crm-context-state > span,
.crm-financial-document-detail .crm-context-state > span {
  color: color-mix(in srgb, var(--brand-gold) 78%, var(--crm-ivory-ink));
}

.crm-profile .crm-context-state strong,
.crm-reservation-detail .crm-context-state strong,
.crm-financial-document-detail .crm-context-state strong,
.crm-profile .crm-reservation-state strong,
.crm-reservation-detail .crm-reservation-state strong,
.crm-profile .crm-profile-no-stay strong,
.crm-reservation-detail .crm-reservation-relationship strong,
.crm-reservation-detail .crm-financial-state strong,
.crm-financial-document-detail .crm-financial-state strong {
  color: var(--crm-ivory-ink);
}

.crm-profile .crm-reservation-state,
.crm-reservation-detail .crm-reservation-state,
.crm-profile .crm-profile-no-stay,
.crm-reservation-detail .crm-reservation-relationship,
.crm-reservation-detail .crm-reservation-relationship p,
.crm-reservation-detail .crm-financial-state,
.crm-financial-document-detail .crm-financial-state {
  color: var(--crm-ivory-ink-soft);
}

.crm-reservation-detail .crm-financial-state.large,
.crm-financial-document-detail .crm-financial-state.large {
  border-color: var(--crm-ivory-hair);
  background: var(--crm-ivory-card);
}

/* The error copy keeps the meaning colour; a failure that read as quiet ink
   would be a failure the operator could scroll past. */
.crm-profile .crm-reservation-state.error strong,
.crm-reservation-detail .crm-reservation-state.error strong,
.crm-reservation-detail .crm-financial-state.error strong,
.crm-financial-document-detail .crm-financial-state.error strong {
  color: var(--crm-sem-bad);
}

.crm-profile .crm-reservation-loading span,
.crm-reservation-detail .crm-reservation-loading span,
.crm-reservation-detail .crm-financial-loading span,
.crm-financial-document-detail .crm-financial-loading span {
  background:
    linear-gradient(
      90deg,
      var(--crm-ivory-ground),
      color-mix(in srgb, var(--brand-gold) 12%, var(--crm-ivory-card)),
      var(--crm-ivory-ground)
    );
  background-size: 220% 100%;
}

/* "Showing the first 200 rows" is a note about the table, so it takes the
   ground and the caption ink rather than the error tint it shares a rule
   with in the shell. */
.crm-reservation-detail .crm-financial-limit-note,
.crm-financial-document-detail .crm-financial-limit-note {
  border-top-color: var(--crm-ivory-hair);
  color: var(--crm-ivory-ink-soft);
  background: var(--crm-ivory-ground);
}

/* -------------------------------------------------------- POS spend panels */

/* The reservation total is the record's one display figure. Its champagne
   wash is re-mixed onto the card like the three record headers above. */
.crm-reservation-detail .crm-financial-total {
  border-bottom-color: var(--crm-ivory-hair);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--brand-gold) 8%, var(--crm-ivory-card)),
      var(--crm-ivory-card)
    );
}

.crm-reservation-detail .crm-financial-total > div > span {
  color: var(--crm-ivory-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.crm-reservation-detail .crm-financial-total strong {
  color: var(--crm-ivory-ink);
}

.crm-reservation-detail .crm-financial-category + .crm-financial-category,
.crm-reservation-detail .crm-financial-category > .crm-financial-departments {
  border-top-color: var(--crm-ivory-hair);
}

.crm-reservation-detail .crm-financial-departments > div + div {
  border-top-color: var(--crm-ivory-hair-soft);
}

.crm-reservation-detail .crm-financial-category span,
.crm-reservation-detail .crm-financial-category strong {
  color: var(--crm-ivory-ink);
}

.crm-reservation-detail .crm-financial-category small {
  color: var(--crm-ivory-ink-soft);
}

/* --------------------------------------------------- POS document list */

.crm-reservation-detail .crm-financial-document-list > [role="listitem"] + [role="listitem"] {
  border-top-color: var(--crm-ivory-hair-soft);
}

.crm-reservation-detail .crm-financial-document-card {
  color: var(--crm-ivory-ink);
  background: var(--crm-ivory-card);
}

.crm-reservation-detail .crm-financial-document-card:hover,
.crm-reservation-detail .crm-financial-document-card:focus-visible {
  color: var(--crm-ivory-ink);
  background: color-mix(in srgb, var(--brand-gold) 7%, var(--crm-ivory-card));
}

.crm-reservation-detail .crm-financial-document-date strong {
  color: var(--ok);
}

.crm-reservation-detail .crm-financial-document-card small,
.crm-reservation-detail .crm-financial-document-card span {
  color: var(--crm-ivory-ink-soft);
}

.crm-reservation-detail .crm-financial-document-source strong,
.crm-reservation-detail .crm-financial-document-lines strong,
.crm-reservation-detail .crm-financial-document-amount strong {
  color: var(--crm-ivory-ink);
}

.crm-reservation-detail .crm-financial-documents-footer {
  border-top-color: var(--crm-ivory-hair);
  background: var(--crm-ivory-ground);
}

/* ------------------------------------------------- financial line detail */

/* The item table on a document is a grid rather than a `table`, so its header
   row is a div. It arrives at the same voice every thead on these surfaces
   speaks in: ground, tracked Tenor Sans, quiet ink. */
.crm-financial-document-detail .crm-financial-line.header {
  background: var(--crm-ivory-ground);
  color: var(--crm-ivory-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.crm-financial-document-detail .crm-financial-line + .crm-financial-line {
  border-top-color: var(--crm-ivory-hair-soft);
}

.crm-financial-document-detail .crm-financial-line:not(.header) span,
.crm-financial-document-detail .crm-financial-line:not(.header) strong {
  color: var(--crm-ivory-ink);
}

.crm-financial-document-detail .crm-financial-line-coverage {
  color: var(--crm-ivory-ink-soft);
}

/* The coverage note keeps the three fallback hues the shell hard-codes —
   published green, partial amber, unavailable red — because they are the
   answer to "can these totals be trusted?". Only the surface each is mixed
   into moves from the cool grey to the ivory ground. */
.crm-financial-document-detail .crm-financial-line-coverage-note {
  border-bottom-color: var(--crm-ivory-hair);
  color: var(--crm-ivory-ink-soft);
  background: var(--crm-ivory-ground);
}

.crm-financial-document-detail .crm-financial-line-coverage-note strong {
  color: var(--crm-ivory-ink);
}

.crm-financial-document-detail
  .crm-financial-line-coverage-note.crm-financial-line-coverage-complete,
.crm-financial-document-detail
  .crm-financial-line-coverage-note.crm-financial-line-coverage-published {
  background: color-mix(in srgb, #2f7d4a 8%, var(--crm-ivory-ground));
}

.crm-financial-document-detail
  .crm-financial-line-coverage-note.crm-financial-line-coverage-partial {
  background: color-mix(in srgb, #9a6813 8%, var(--crm-ivory-ground));
}

.crm-financial-document-detail
  .crm-financial-line-coverage-note.crm-financial-line-coverage-unavailable {
  background: color-mix(in srgb, #ad3c35 8%, var(--crm-ivory-ground));
}

/* ------------------------------------------------------------ source notice */

/* The read-only notice closes all three records. It takes the case context
   card's champagne-on-card tint and gains the hairline the card needs to sit
   on the pane; the 3px gold rule down its left edge is the mark that says
   "source-owned" and is kept at full strength. */
.crm-profile .crm-source-notice,
.crm-reservation-detail .crm-source-notice,
.crm-financial-document-detail .crm-source-notice {
  border: 1px solid color-mix(in srgb, var(--brand-gold) 30%, var(--crm-ivory-hair));
  border-left: 3px solid var(--brand-gold);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--brand-gold) 8%, var(--crm-ivory-card));
}

.crm-profile .crm-source-notice > span,
.crm-reservation-detail .crm-source-notice > span,
.crm-financial-document-detail .crm-source-notice > span {
  color: var(--crm-ivory-card);
  font-weight: 700;
}

.crm-profile .crm-source-notice strong,
.crm-reservation-detail .crm-source-notice strong,
.crm-financial-document-detail .crm-source-notice strong {
  color: var(--crm-ivory-ink);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.crm-profile .crm-source-notice p,
.crm-reservation-detail .crm-source-notice p,
.crm-financial-document-detail .crm-source-notice p {
  color: var(--crm-ivory-ink-soft);
}

/* ------------------------------------------------------- the shared edges */

/* Phase 5 re-inked the empty states, the shimmer, the stay-access blocks and
   the open-case pill in place, inside the sheets that already own them. One
   control could not be done that way: the empty state's "Find a guest" button
   has no rule of its own in the shell — it inherits the Portal's borderless
   cool slab — so the restatement needs a new rule, and this is the only CRM
   sheet in the cascade that is loaded for every view. Same treatment, same
   reasoning, as the directory, case and record buttons above. */
.crm-guest-empty .secondary-button {
  border: 1px solid var(--crm-ivory-hair);
  background: var(--crm-ivory-ground);
  color: var(--crm-ivory-ink-soft);
}

.crm-guest-empty .secondary-button:hover,
.crm-guest-empty .secondary-button:focus-visible {
  background: var(--accent-soft);
  color: var(--crm-ivory-ink);
}

/* ------------------------------------------------------------ narrow width */

@media (max-width: 760px) {
  /* The pane owns the padding now, so it owns the climbdown. */
  .crm-profile,
  .crm-reservation-detail,
  .crm-financial-document-detail {
    padding: 14px;
  }
}