/* Client cabinet. Mobile-first, built on tokens.css and components.css. */

.cabinet-page main {
  min-height: calc(100dvh - var(--header-h));
}

.cab-section {
  padding-block: var(--s-6) calc(var(--s-10) + max(env(safe-area-inset-bottom), var(--banner-h, 0px)));
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}

.cab-wrap {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  overflow-wrap: anywhere;
}

.cab-doc-width {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.cab-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-title);
}

.cab-text {
  margin: 0;
  white-space: pre-line;
}

.cab-card {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

/* Login, signup, reset and notice cards: the lead stays with its title, the form and links get air. */
.cab-card:not(.stack) > * + * {
  margin-top: var(--s-5);
}

.cab-card:not(.stack) > h1 + p {
  margin-top: var(--s-2);
}

/* Forms */

.cab-form {
  display: grid;
  gap: var(--s-5);
}

.cab-form .input,
.cab-form .textarea,
.cab-form .select {
  width: 100%;
  min-height: 44px;
}

.cab-submit {
  width: 100%;
  min-height: 44px;
  white-space: normal; /* a long label wraps instead of widening the card past a 375px screen */
}

.cab-links {
  display: grid;
  gap: var(--s-2);
  margin: 0;
}

.cab-links a,
.cab-crumb a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
}

.cab-crumb {
  margin: 0;
}

/* Password field with the visibility toggle (R1) */

.cab-password {
  position: relative;
}

.cab-password .input {
  width: 100%;
  padding-inline-end: 48px;
}

.cab-eye {
  position: absolute;
  top: 50%;
  inset-inline-end: 0;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transform: translateY(-50%);
}

.cab-eye:hover {
  color: var(--ink);
}

.cab-eye-off,
.cab-eye[aria-pressed="true"] .cab-eye-on {
  display: none;
}

.cab-eye[aria-pressed="true"] .cab-eye-off {
  display: contents;
}

/* Navigation: a bottom bar on phones, a row on wider screens */

.cab-nav {
  position: fixed;
  inset: auto 0 var(--banner-h, 0px);
  z-index: var(--z-header);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-bottom: max(0px, env(safe-area-inset-bottom) - var(--banner-h, 0px));
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
  border-top: 1px solid var(--line);
  background: var(--chrome);
}

.cab-nav-form {
  display: contents;
}

.cab-nav-link {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: var(--cab-nav-h);
  padding: var(--s-2) var(--s-1);
  border: 0;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-2xs);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.cab-nav-link[aria-current="page"],
.cab-nav-link:hover {
  color: var(--accent-ink);
}

.cab-nav-link .icon {
  width: 1.375rem;
  height: 1.375rem;
}

.cab-nav-link[aria-current="page"] {
  font-weight: var(--fw-semibold);
}

/* One line per tab: a long menu name ends in an ellipsis instead of pushing the bar taller. */
.cab-nav-link span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cabinet-page:has(.cab-nav) .cab-section {
  padding-bottom: calc(var(--s-10) + var(--cab-nav-h) + env(safe-area-inset-bottom));
}

/* Focus and anchors stop above the bottom bar (and the cookie bar under it), never behind them, and the
   footer's last row scrolls clear of both. A long label wraps to a second line and makes the bar taller,
   so the room counts that line too. */
@media (max-width: 767px) {
  :root:has(.cab-nav:not([hidden])) {
    --cab-nav-room: calc(var(--banner-h, 0px) + var(--cab-nav-h) + var(--fs-2xs) * var(--lh-body) + env(safe-area-inset-bottom));
    scroll-padding-bottom: calc(var(--cab-nav-room) + var(--s-2));
  }
  body.cabinet-page:has(.cab-nav:not([hidden])) {
    padding-bottom: var(--cab-nav-room);
  }
}

/* A toast rises above the bottom bar instead of covering its links. */
.cabinet-page:has(.cab-nav) .toast-region {
  bottom: calc(var(--banner-h, 0px) + var(--cab-nav-h) + max(var(--s-4), env(safe-area-inset-bottom)));
}

@media (min-width: 768px) {
  .cab-nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    padding: 0;
    border: 0;
    background: none;
  }

  .cab-nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 44px;
    padding-inline: var(--s-3);
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
  }

  .cab-nav-link[aria-current="page"] {
    background: var(--accent-soft);
  }

  .cab-nav-form .cab-nav-link {
    margin-inline-start: auto;
  }

  .cabinet-page:has(.cab-nav) .cab-section {
    padding-bottom: calc(var(--s-10) + env(safe-area-inset-bottom));
  }

  .cabinet-page:has(.cab-nav) .toast-region {
    bottom: calc(var(--banner-h, 0px) + max(var(--s-6), env(safe-area-inset-bottom)));
  }

  .cab-card:not(.card-gate) .cab-submit {
    width: auto;
  }
}

/* Wide screens: the menu becomes a rail on the start side and the page takes the rest of the row.
   The menu spans every row of the grid, so the page's blocks stack beside it in order. */
@media screen and (min-width: 1024px) {
  .cab-wrap:has(.cab-nav) {
    width: min(100% - 2 * var(--gutter), var(--container));
    grid-template-columns: 13rem minmax(0, 1fr);
    column-gap: var(--s-10);
    row-gap: 0;
  }

  .cab-wrap:has(.cab-nav) > .cab-noprint {
    display: contents;
  }

  .cab-wrap .cab-nav {
    position: sticky;
    top: calc(var(--header-h) + var(--s-6));
    grid-column: 1;
    grid-row: 1 / span 60;
    flex-direction: column;
    flex-wrap: nowrap;
    align-self: start;
    gap: var(--s-1);
  }

  .cab-wrap:has(.cab-nav) > :not(.cab-nav, .cab-noprint),
  .cab-wrap:has(.cab-nav) > .cab-noprint > :not(.cab-nav) {
    grid-column: 2;
  }

  .cab-wrap:has(.cab-nav) > :not(.cab-nav, .cab-noprint, :nth-child(2)),
  .cab-wrap:has(.cab-nav) > .cab-noprint > :not(.cab-nav, :nth-child(2)),
  .cab-wrap:has(.cab-nav) > .cab-noprint + * {
    margin-top: var(--s-6);
  }

  .cab-wrap .cab-nav-link {
    display: flex;
    border-radius: var(--r-md);
    font-size: var(--fs-md);
  }

  .cab-wrap .cab-nav-link:hover {
    background: var(--chrome);
  }

  .cab-wrap .cab-nav-link[aria-current="page"] {
    background: var(--accent-soft);
  }

  .cab-wrap .cab-nav-form .cab-nav-link {
    width: 100%;
    margin-top: var(--s-4);
    margin-inline-start: 0;
    color: var(--ink-3);
  }
}

/* Sign-in, sign-up and reset on short or narrow screens (320x568, 360x640, phones on their side): tighter
   air so the button is on the first screen above the cookie bar; inputs stay 16px and 44px tall, labels stay above them. */
@media (max-height: 600px), (max-width: 360px) {
  .cabinet-page:not(:has(.cab-nav)) .cab-section {
    padding-top: var(--s-3);
  }

  .cabinet-page:not(:has(.cab-nav)) .cab-card {
    padding: var(--s-4);
  }

  /* A phone on its side is wide but short: the head on one line instead of a narrow card's two. */
  .cabinet-page:not(:has(.cab-nav)) .card-gate {
    width: min(100%, 36rem);
  }

  .cabinet-page:not(:has(.cab-nav)) .cab-card:not(.stack) > :not(h1) + * {
    margin-top: var(--s-4);
  }

  .cabinet-page:not(:has(.cab-nav)) .cab-card > h1,
  .cabinet-page:not(:has(.cab-nav)) .gate-head h1 {
    font-size: var(--fs-2xl);
  }

  .cabinet-page:not(:has(.cab-nav)) .gate-head .empty-illo {
    display: none;
  }

  .cabinet-page:not(:has(.cab-nav)) .gate-head p {
    max-width: none;
  }

  .cabinet-page:not(:has(.cab-nav)) .cab-form {
    gap: var(--s-3);
  }

  .cabinet-page:not(:has(.cab-nav)) .cab-form .field {
    gap: var(--s-1);
  }
}

/* On their side the fields go two to a row; notices and the button keep the full width. */
@media (max-height: 500px) and (min-width: 600px) {
  .cabinet-page:not(:has(.cab-nav)) .cab-form:has(> .field ~ .field) {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s-4);
  }

  .cabinet-page:not(:has(.cab-nav)) .cab-form > :not(.field) {
    grid-column: 1 / -1;
  }
}

/* Home: a large greeting with the main action, then one tile per area — its icon and name, the
   count, and the latest records as rows with a status at the end. */

.cab-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-4);
}

.cab-hello {
  flex: 1 1 18rem;
  font-size: var(--fs-3xl);
  font-weight: 800;
}

.cab-tiles {
  align-items: start;
}

.cab-tiles > .card {
  gap: var(--s-4);
  padding: var(--s-5);
  border-radius: var(--r-xl);
  box-shadow: var(--lift);
}

.cab-tiles .card-icon {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.cab-tiles .card-head h2 {
  margin: 0;
}

.cab-tiles .card-head p {
  margin-bottom: 0;
}

.cab-tiles .muted {
  margin: 0;
}

.cab-tiles .tile-items {
  margin: 0;
}

.cab-tiles .tile-items a {
  min-height: 3.5rem;
}

.cab-tiles .tile-item-text .cab-progress {
  margin-top: var(--s-2);
}

/* One quiet line under the count ("updated ..."): never wraps, so every tile keeps its height. */
.cab-tile-note {
  margin: calc(var(--s-2) - var(--s-4)) 0 0;
  overflow: hidden;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The status and the unread count close the row at a fixed size; only the title shrinks. */
.cab-tiles .tile-items .cab-badge,
.cab-tiles .tile-items .nav-count,
.cab-doc-row > .nav-count {
  flex: none;
}

.cab-tiles .tile-items .nav-count,
.cab-doc-row > .nav-count {
  min-width: 1.25rem;
  min-height: 1.25rem;
  justify-content: center;
  padding-inline: var(--s-1);
}

.cab-tiles .tile-items .nav-count > [aria-hidden],
.cab-doc-row > .nav-count > [aria-hidden] {
  direction: ltr;
}

.cab-pager {
  justify-content: space-between;
  align-items: center;
  margin-block-start: var(--s-4);
}

@media (min-width: 600px) {
  .cab-tiles > .card {
    padding: var(--s-6);
  }

  .cab-tiles > .card:first-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1100px) {
  .cab-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* An order or a project: its mark, name and date with the status at the end, the facts as label
   and value rows, the next step on a soft line, then the thread with the reply box under it. */

.cab-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.cab-head-text {
  flex: 1;
  min-width: 0;
}

.cab-head .cab-item-meta {
  margin: var(--s-1) 0 0;
}

.cab-next {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--info-soft);
  color: var(--ink);
}

.cab-next .icon {
  margin-top: 0.2em;
  color: var(--info);
}

.cab-kv {
  display: grid;
  margin: 0;
  padding-block: var(--s-1);
}

.cab-kv > div {
  display: grid;
  gap: var(--s-1);
  padding-block: var(--s-3);
}

.cab-kv > div + div {
  border-top: 1px solid var(--line);
}

.cab-kv dt {
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

.cab-kv dd {
  margin: 0;
}

@media (min-width: 640px) {
  .cab-kv > div {
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: var(--s-4);
  }
}

.cab-meter-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: 0;
}

.cab-msg .cab-msg-meta {
  order: 2;
  margin: 0;
}

.cab-compose {
  gap: var(--s-4);
}

/* Lists of projects, orders and documents */

.cab-block {
  display: grid;
  gap: var(--s-3);
}

.cab-block h2,
.cab-block-head h2 {
  margin: 0;
  font-size: var(--fs-lg);
}

.cab-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.cab-list {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cab-item {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.cab-item:not(:has(.cab-item-link)),
.cab-item-link {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4);
}

.cab-item-link {
  min-height: 44px;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}

.cab-item-link:hover {
  background: var(--chrome);
}

.cab-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin: 0;
}

.cab-item-meta {
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

.cab-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  background: var(--chrome-2);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.cab-badge-active,
.cab-badge-new,
.cab-badge-progress,
.cab-badge-sent,
.cab-badge-pending {
  background: var(--info-soft);
  color: var(--info);
}

.cab-badge-done,
.cab-badge-confirmed,
.cab-badge-accepted,
.cab-badge-signed,
.cab-badge-paid,
.cab-badge-approved {
  background: var(--success-soft);
  color: var(--success);
}

.cab-badge-paused,
.cab-badge-unpaid,
.cab-badge-partial {
  background: var(--warning-soft);
  color: var(--warning);
}

.cab-badge-declined,
.cab-badge-expired,
.cab-badge-overdue,
.cab-badge-cancelled,
.cab-badge-rejected {
  background: var(--danger-soft);
  color: var(--danger);
}

/* Progress */

.cab-progress {
  display: block;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--chrome-2);
  overflow: hidden;
  appearance: none;
}

.cab-progress::-webkit-progress-bar {
  background: var(--chrome-2);
}

.cab-progress::-webkit-progress-value {
  background: var(--accent);
}

.cab-progress::-moz-progress-bar {
  background: var(--accent);
}

.cab-progress-lg {
  height: 10px;
}

.cab-percent {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
}

/* Files */

.cab-touch {
  min-height: 44px;
  max-width: 100%;
}

/* Thread */

.cab-thread {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cab-msg {
  display: grid;
  gap: var(--s-1);
  max-width: min(36rem, 92%);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  background: var(--chrome);
}

.cab-msg-client {
  justify-self: end;
  background: var(--accent-soft);
}

.cab-msg-meta {
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

.cab-body {
  margin: 0;
  white-space: pre-line;
}

/* Review */

.cab-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--line-strong);
}

.cab-stars .is-on {
  color: var(--warning);
}

.cab-rating {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.cab-rate {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--field-line);
  border-radius: var(--r-md);
  cursor: pointer;
}

.cab-rate:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.cab-rate:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cab-rate input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cab-static {
  margin: 0;
  color: var(--ink-2);
}

/* Documents: one list of rows, the way a mailbox lists letters. A row waiting for the client's answer or payment carries a dot. */

.cab-docs {
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  list-style: none;
  overflow: hidden;
}

.cab-docs > li + li {
  border-block-start: 1px solid var(--line);
}

.cab-doc-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-auto-columns: auto;
  grid-auto-flow: column;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  padding: var(--s-4);
  padding-inline-start: var(--s-5);
  color: inherit;
  text-decoration: none;
}

.cab-doc-row:hover {
  background: var(--chrome);
}

.cab-doc-row:focus-visible {
  outline-offset: -3px;
}

.cab-doc-row.is-due::before {
  position: absolute;
  inset-block-start: calc(50% - 3px);
  inset-inline-start: var(--s-2);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  content: "";
}

.cab-doc-ico {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-md);
  background: var(--chrome);
  color: var(--ink-2);
}

.cab-doc-row.is-due .cab-doc-ico {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.cab-doc-row > .icon {
  color: var(--ink-3);
}

.cab-doc-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cab-doc-l1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.cab-doc-l1 strong,
.cab-doc-l2 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cab-doc-sum {
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cab-doc-l2 {
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.cab-doc-l3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-block-start: var(--s-1);
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

/* On a home tile the same rows run inside the card: a hairline on top instead of their own frame. */
.cab-tiles .cab-docs {
  border: 0;
  border-block-start: 1px solid var(--line);
  border-radius: 0;
  background: none;
  overflow: visible;
}

.cab-tiles .cab-doc-row {
  padding-inline: 0;
}

.cab-tiles .cab-doc-row.is-due::before {
  inset-inline-start: calc(-1 * var(--s-3));
}

/* The «updated …» caption (.cab-tile-note) closes the status line; an unread count (ui::count_badge) sits before the chevron. */
.cab-doc-l3 > .cab-tile-note {
  min-width: 0;
  margin: 0;
  margin-inline-start: auto;
}

/* Files in the cabinet: each one a small tile with its icon, name, type and size. */
.cabinet-page .file-list > li > .file-link {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: inherit;
}

.cabinet-page .file-list > li > .file-link:hover {
  background: var(--chrome);
}

/* One document: the sheet, its title first, then what to decide on it. */

.cab-doc-lead {
  display: grid;
  gap: var(--s-4);
}

.cab-doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.cab-doc-actions > *,
.cab-doc-actions form .btn {
  flex: 1 1 12rem;
}

.cab-decide .card {
  padding: var(--s-5);
}

.cab-decide .card-icon {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

/* «Accept the quote?» asked on the page before the offer is accepted. */
.cab-decide-confirm .card {
  border-color: var(--accent);
}

.cab-decide-done .card {
  border-color: var(--success);
}

.cab-decide-done .card-icon {
  background: var(--success);
  color: var(--on-accent);
}

.cab-doc {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.cab-doc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block-end: var(--s-5);
  border-block-end: 1px solid var(--line);
}

.cab-doc-head h1 {
  margin: var(--s-1) 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
}

.cab-doc-head p {
  margin: 0;
}

.cab-doc-head > div > p:last-child:not(.cab-doc-kind) {
  margin-block-start: var(--s-1);
  color: var(--ink-2);
}

.cab-doc-kind {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  color: var(--ink-2);
  font-weight: var(--fw-medium);
}

.cab-doc-total {
  display: grid;
  gap: 2px;
}

.cab-doc-total > span {
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

.cab-doc-amount {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
}

/* Dates as label–value rows, a hairline between them. */
.cab-doc-facts {
  display: grid;
  margin: 0;
}

.cab-doc-facts > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-1) var(--s-4);
  padding-block: var(--s-3);
  border-block-end: 1px solid var(--line);
}

.cab-doc-facts > div:first-child {
  padding-block-start: 0;
}

.cab-doc-facts dt {
  color: var(--ink-3);
}

.cab-doc-facts dd {
  margin: 0;
  font-weight: var(--fw-medium);
}

.cab-doc-sec {
  display: grid;
  gap: var(--s-3);
}

.cab-pay {
  display: grid;
  gap: var(--s-3);
}

.cab-doc-sec h2,
.cab-pay h2 {
  margin: 0;
  font-size: var(--fs-lg);
}

/* The PDF tile and the print button share one line while they fit. */
.cab-doc-files {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.cab-doc-files > h2 {
  flex-basis: 100%;
}

.cab-doc-files .cab-doc-actions > * {
  flex: 0 1 auto;
}

.cab-doc-parties {
  display: grid;
  gap: var(--s-4);
  margin: 0;
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--chrome);
  font-size: var(--fs-sm);
}

.cab-doc-parties p {
  margin: 0;
}

.cab-doc-parties h2 {
  margin: 0 0 var(--s-1);
  color: var(--ink-3);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.cab-mono {
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}

.cab-table-wrap {
  overflow-x: auto;
}

.cab-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.cab-table th,
.cab-table td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
  text-align: start;
}

.cab-table td:last-child,
.cab-table th:last-child {
  text-align: end;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .cab-doc-parties {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cab-doc {
    padding: var(--s-8);
  }

  .cab-doc-total {
    justify-items: end;
    text-align: end;
  }

  .cab-decide .cab-doc-actions > * {
    flex: 0 1 auto;
  }
}

@media print {
  :root {
    color-scheme: light;
  }

  .site-header,
  .site-footer,
  .cab-nav,
  .cab-noprint,
  .cab-crumb {
    display: none !important;
  }

  .cab-section {
    padding: 0;
  }

  .cab-doc-width {
    width: 100%;
  }

  .cab-doc,
  .cab-doc-parties {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
  }

  .cab-table th,
  .cab-table td {
    border-color: var(--line-strong);
  }

  .cab-table tr {
    break-inside: avoid;
  }
}

/* Profile: the client's initials before the page title, each section headed by its icon. */
.cab-avatar {
  width: 3.5rem;
  height: 3.5rem;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: var(--fs-lg);
}

.cab-form > .card-head h2 {
  margin: 0;
}

.cab-form > .card-head .card-actions:empty {
  display: none;
}

.cab-form > .card-head .card-icon {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

/* Inside the cabinet a form's button keeps its own width on wider screens, at the start of the form. */
@media (min-width: 768px) {
  .cab-wrap:has(.cab-nav) .cab-form > .cab-submit {
    justify-self: start;
  }
}