/* O atributo hidden precisa vencer qualquer display do CSS. Sem isto,
   esconder um elemento que tenha display: grid/flex nao esconde nada — foi
   o que deixou o campo "Qual servico?", os cartoes de confirmacao do painel
   e o campo de link de assinatura visiveis quando nao deviam estar. */
[hidden] { display: none !important; }
:root {
  --tram-wine: var(--brand, #622423);
  --tram-wine-dark: var(--brand-dark, #451714);
  --tram-paper: #fbfaf6;
  --tram-paper-deep: #f3eee8;
  --tram-ink: #2d2421;
  --tram-muted: #746965;
  --tram-rule: #d8cdc6;
  --tram-gold: #c8a66a;
  --tram-focus: #9c5b2b;
  --tram-danger: #8f2f2b;
}

body.tram-clients-scroll-lock { overflow: hidden; }

.tram-clients-trigger {
  display: inline-flex;
  min-height: 34px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid rgb(255 255 255 / .3);
  border-radius: 3px;
  color: #fffaf5;
  background: transparent;
  font: 700 10px/1 Arial, sans-serif;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.tram-clients-trigger[hidden] { display: none; }
.tram-clients-trigger:hover { border-color: rgb(255 255 255 / .65); background: rgb(255 255 255 / .11); transform: translateY(-1px); }
.tram-clients-trigger:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tram-clients-trigger svg { width: 16px; height: 16px; }

.tram-clients-overlay .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Modal central, nao gaveta lateral: a tarefa e temporaria e merece o centro da
   tela. Encostada na direita, ela competia com a procuracao aberta atras. */
.tram-clients-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgb(42 29 25 / .5);
  backdrop-filter: blur(6px) saturate(.92);
  -webkit-backdrop-filter: blur(6px) saturate(.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.tram-clients-overlay[hidden] { display: none; }
.tram-clients-overlay.is-open { opacity: 1; visibility: visible; }

.tram-clients-drawer {
  position: relative;
  display: grid;
  width: min(960px, 100%);
  /* Altura definida, nao so maxima: o corpo e uma linha 1fr do grid e, sem
     altura de referencia, ela colapsava para zero e o modal ficava so o
     cabecalho. */
  height: min(820px, 100%);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #e2d5d3;
  border-radius: 16px;
  color: var(--tram-ink);
  background-color: var(--tram-paper);
  background-image: linear-gradient(rgb(98 36 35 / .018) 1px, transparent 1px);
  background-size: 100% 29px;
  box-shadow: 0 28px 70px rgb(26 15 12 / .34);
  font-family: Arial, sans-serif;
  transform: translateY(12px) scale(.985);
  transition: transform 260ms cubic-bezier(.2, .78, .22, 1);
}

.tram-clients-overlay.is-open .tram-clients-drawer { transform: translateY(0) scale(1); }

.tram-clients-head {
  color: #fffaf5;
  background: var(--tram-wine);
  box-shadow: inset 0 -1px rgb(48 9 8 / .35);
}

.tram-clients-brandline {
  padding: 10px 24px 8px;
  border-bottom: 1px solid rgb(255 255 255 / .14);
  color: #e7d8cf;
  font: italic 11px/1.2 'Times New Roman', Times, serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tram-clients-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 20px 15px 24px;
}

.tram-clients-heading h2 {
  margin: 0;
  font: 700 27px/1 'Times New Roman', Times, serif;
  letter-spacing: .015em;
}

.tram-clients-heading p { margin: 5px 0 0; color: #decac2; font-size: 10.5px; letter-spacing: .04em; }
.tram-clients-head-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }

.tram-clients-icon-button {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  color: #f7ebe6;
  background: transparent;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 120ms ease;
}

.tram-clients-icon-button:hover { border-color: rgb(255 255 255 / .32); background: rgb(255 255 255 / .1); }
.tram-clients-icon-button:active { transform: translateY(1px); }
.tram-clients-icon-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tram-clients-icon-button svg { width: 18px; height: 18px; }
.tram-clients-refresh.is-busy svg { animation: tram-clients-spin 780ms linear infinite; }

.tram-clients-notices-button {
  position: relative;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid rgb(255 255 255 / .2);
  border-radius: 2px;
  color: #f7ebe6;
  background: transparent;
  font: 700 9.5px/1 Arial, sans-serif;
  cursor: pointer;
}

.tram-clients-notices-button[hidden] { display: none; }
.tram-clients-notices-button:hover { border-color: rgb(255 255 255 / .42); background: rgb(255 255 255 / .09); }
.tram-clients-notices-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tram-clients-notices-button svg { width: 15px; height: 15px; }
.tram-clients-notices-button b { display: inline-grid; min-width: 17px; height: 17px; place-items: center; padding: 0 4px; border-radius: 9px; color: var(--tram-wine-dark); background: #ead9c3; font-size: 8.5px; }
.tram-clients-notices-button b[hidden] { display: none; }

.tram-clients-office {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 24px 11px;
  border-top: 1px solid rgb(255 255 255 / .08);
  background: var(--tram-wine-dark);
}

.tram-clients-office > div { display: grid; min-width: 0; gap: 1px; }
.tram-clients-office strong { overflow: hidden; font: 700 12px/1.35 Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.tram-clients-office > div span { overflow: hidden; color: #cfb6ad; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.tram-clients-office > button {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid rgb(255 255 255 / .18);
  border-radius: 2px;
  color: #ead9d1;
  background: transparent;
  font: 700 8.8px/1 Arial, sans-serif;
  cursor: pointer;
}
.tram-clients-office > button:hover { border-color: rgb(255 255 255 / .42); background: rgb(255 255 255 / .08); }
.tram-clients-office > button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tram-clients-office > button:disabled { cursor: wait; opacity: .6; }
.tram-clients-office > button svg { width: 14px; height: 14px; }
.tram-clients-office > p { min-height: 0; grid-column: 1 / -1; margin: 0; color: #f1c9c0; font-size: 8.5px; line-height: 1.35; }
.tram-clients-office > p:empty { display: none; }

.tram-clients-workspace { position: relative; min-height: 0; overflow: hidden; }
.tram-clients-stage { position: absolute; inset: 0; overflow: auto; opacity: 0; pointer-events: none; transform: translateX(12px); transition: opacity 180ms ease, transform 220ms cubic-bezier(.2, .75, .25, 1); }
.tram-clients-stage.is-active { opacity: 1; pointer-events: auto; transform: translateX(0); }

.tram-clients-search-form {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 23px 24px 16px;
  border-bottom: 1px solid var(--tram-rule);
  background: rgb(251 250 246 / .96);
  backdrop-filter: blur(7px);
}

.tram-clients-search-form > label { display: block; margin-bottom: 8px; color: var(--tram-wine); font: 700 10px/1 Arial, sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.tram-clients-search-form > p { margin: 7px 0 0; color: var(--tram-muted); font: 10px/1.4 Arial, sans-serif; text-align: left; }
.tram-clients-search-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 7px; }
.tram-clients-search-meta p { margin: 0; color: var(--tram-muted); font: 10px/1.4 Arial, sans-serif; text-align: left; }
.tram-clients-search-meta button { display: inline-flex; min-height: 27px; flex: 0 0 auto; align-items: center; gap: 5px; padding: 3px 0; border: 0; border-bottom: 1px solid var(--tram-wine); color: var(--tram-wine); background: transparent; font-size: 9.5px; font-weight: 700; cursor: pointer; }
.tram-clients-search-meta button[hidden] { display: none; }
.tram-clients-search-meta button svg { width: 13px; height: 13px; }
.tram-clients-search-meta button:focus-visible { outline: 2px solid var(--tram-focus); outline-offset: 3px; }
.tram-clients-search-wrap { position: relative; display: flex; align-items: center; }
.tram-clients-search-wrap > [data-tram-icon] { position: absolute; left: 0; display: grid; color: var(--tram-wine); pointer-events: none; }
.tram-clients-search-wrap > [data-tram-icon] svg { width: 19px; height: 19px; }

.tram-clients-search {
  width: 100%;
  height: 44px;
  padding: 7px 36px 7px 29px;
  border: 0;
  border-bottom: 1px solid #927f76;
  border-radius: 0;
  color: var(--tram-ink);
  background: transparent;
  font: 17px/1.2 'Times New Roman', Times, serif;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.tram-clients-search::placeholder { color: #a29892; font-style: italic; }
.tram-clients-search:focus { border-color: var(--tram-wine); box-shadow: inset 0 -2px var(--tram-wine); outline: 0; }
.tram-clients-search-clear { position: absolute; right: 0; display: inline-grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--tram-muted); background: transparent; cursor: pointer; }
.tram-clients-search-clear:hover { color: var(--tram-wine); background: #eee6df; }
.tram-clients-search-clear:focus-visible { outline: 2px solid var(--tram-focus); outline-offset: 1px; }
.tram-clients-search-clear svg { width: 17px; height: 17px; }

.tram-clients-list { min-height: 250px; padding: 0 24px 22px; }
.tram-clients-results { display: grid; transition: opacity 160ms ease; }
.tram-clients-results[hidden] { display: none; }
.tram-clients-list.is-querying .tram-clients-results { opacity: .38; pointer-events: none; }

.tram-clients-row {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 76px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 16px;
  padding: 15px 2px 14px;
  border: 0;
  border-bottom: 1px solid var(--tram-rule);
  border-radius: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
  animation: tram-clients-row-in 220ms ease both;
  animation-delay: calc(var(--tram-row-order) * 18ms);
  transition: padding 170ms ease, background 170ms ease;
}

.tram-clients-row::before { position: absolute; top: 14px; bottom: 14px; left: -10px; width: 2px; background: var(--tram-wine); content: ''; opacity: 0; transform: scaleY(.4); transition: opacity 160ms ease, transform 180ms ease; }
.tram-clients-row:hover { padding-right: 7px; padding-left: 7px; background: rgb(98 36 35 / .035); }
.tram-clients-row:hover::before, .tram-clients-row:focus-visible::before { opacity: 1; transform: scaleY(1); }
.tram-clients-row:focus-visible { outline: 2px solid var(--tram-focus); outline-offset: 2px; }
.tram-clients-row-heading { display: flex; min-width: 0; align-items: baseline; gap: 11px; }
.tram-clients-row-heading strong { overflow: hidden; color: var(--tram-ink); font: 700 15px/1.25 'Times New Roman', Times, serif; text-overflow: ellipsis; white-space: nowrap; }
.tram-clients-row-heading > span { flex: 0 0 auto; color: var(--tram-muted); font-size: 9.5px; letter-spacing: .02em; }
.tram-clients-row-context { overflow: hidden; grid-column: 1; color: var(--tram-muted); font-size: 10.5px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.tram-clients-row-arrow { display: grid; grid-row: 1 / 3; grid-column: 2; color: #927f76; transition: color 160ms ease, transform 160ms ease; }
.tram-clients-row:hover .tram-clients-row-arrow { color: var(--tram-wine); transform: translateX(2px); }
.tram-clients-row-arrow svg { width: 17px; height: 17px; }

.tram-clients-state { display: grid; min-height: 260px; align-content: center; justify-items: center; gap: 9px; padding: 34px 22px; color: var(--tram-muted); text-align: center; animation: tram-clients-fade-in 160ms ease both; }
.tram-clients-state[hidden] { display: none; }
.tram-clients-state svg { width: 27px; height: 27px; color: var(--tram-wine); }
.tram-clients-state strong { color: var(--tram-ink); font: 700 15px/1.2 'Times New Roman', Times, serif; }
.tram-clients-state p { max-width: 290px; margin: 0; font-size: 10.5px; line-height: 1.45; text-align: center; }
.tram-clients-state.is-error svg, .tram-clients-state.is-error strong { color: var(--tram-danger); }
.tram-clients-state.is-loading svg { animation: tram-clients-spin 780ms linear infinite; }
.tram-clients-idle { color: #8b7d76; }
.tram-clients-idle svg { width: 31px; height: 31px; color: #94766a; stroke-width: 1.35; }
.tram-clients-text-button { min-height: 32px; padding: 4px 2px; border: 0; border-bottom: 1px solid var(--tram-wine); color: var(--tram-wine); background: transparent; font-size: 10.5px; font-weight: 700; cursor: pointer; }

.tram-clients-more { display: flex; justify-content: center; padding: 16px 0 5px; }
.tram-clients-more[hidden] { display: none; }
.tram-clients-more button { min-height: 34px; padding: 5px 3px; border: 0; border-bottom: 1px solid var(--tram-wine); color: var(--tram-wine); background: transparent; font-size: 10.5px; font-weight: 700; cursor: pointer; }

.tram-clients-record { padding: 0 24px 28px; }
.tram-clients-record-nav { position: sticky; top: 0; z-index: 3; display: flex; min-height: 51px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--tram-rule); background: rgb(251 250 246 / .96); backdrop-filter: blur(7px); }
.tram-clients-record-nav button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 0; border: 0; color: var(--tram-wine); background: transparent; font-size: 10.5px; font-weight: 700; cursor: pointer; }
.tram-clients-record-nav button:hover { color: var(--tram-wine-dark); }
.tram-clients-record-nav button:focus-visible { outline: 2px solid var(--tram-focus); outline-offset: 3px; }
.tram-clients-record-nav button svg { width: 16px; height: 16px; }
.tram-clients-record-nav > span { color: var(--tram-muted); font-size: 9px; text-align: right; }

.tram-clients-intake, .tram-clients-agenda { padding: 0 24px 28px; }
.tram-clients-intake-head, .tram-clients-agenda-head { padding: 27px 0 20px; border-bottom: 2px solid var(--tram-wine); }
.tram-clients-intake-head > span, .tram-clients-agenda-head > span { display: block; margin-bottom: 6px; color: var(--tram-wine); font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.tram-clients-intake-head h2, .tram-clients-agenda-head h2 { margin: 0; color: var(--tram-wine-dark); font: 700 25px/1.05 'Times New Roman', Times, serif; }
.tram-clients-intake-head p { max-width: 460px; margin: 7px 0 0; color: var(--tram-muted); font: 10.5px/1.5 Arial, sans-serif; text-align: left; }

.tram-clients-intake-form { display: grid; }
.tram-clients-intake-form[aria-busy="true"] { cursor: progress; }
.tram-clients-intake-form fieldset { min-width: 0; margin: 0; padding: 21px 0; border: 0; border-bottom: 1px solid var(--tram-rule); }
.tram-clients-intake-form legend { float: left; width: 132px; padding: 2px 18px 0 0; color: var(--tram-wine); font: 700 10px/1.35 Arial, sans-serif; letter-spacing: .075em; text-transform: uppercase; }
.tram-clients-intake-form fieldset::after { display: block; clear: both; content: ''; }
.tram-clients-intake-grid, .tram-clients-intake-prefill, .tram-clients-intake-files > :not(legend) { width: calc(100% - 132px); margin-left: 132px; }
.tram-clients-intake-prefill { margin-top: 0; margin-bottom: 11px; color: #806f66; font: italic 10.5px/1.4 'Times New Roman', Times, serif; text-align: left; }
.tram-clients-intake-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(100px, .72fr) 52px; gap: 13px 12px; }
.tram-clients-intake-grid label { display: grid; align-content: start; gap: 5px; color: #615651; font-size: 8.5px; font-weight: 700; letter-spacing: .025em; }
.tram-clients-intake-grid label.is-wide { grid-column: 1 / -1; }
.tram-clients-intake-grid input, .tram-clients-intake-grid select, .tram-clients-intake-grid textarea { width: 100%; padding: 8px 8px; border: 0; border-bottom: 1px solid #aa9990; border-radius: 0; color: var(--tram-ink); background: rgb(255 253 250 / .58); font: 11px/1.4 Arial, sans-serif; }
.tram-clients-intake-grid textarea { min-height: 82px; resize: vertical; border: 1px solid #b6a69d; }
.tram-clients-intake-grid input:focus, .tram-clients-intake-grid select:focus, .tram-clients-intake-grid textarea:focus { border-color: var(--tram-wine); box-shadow: inset 0 -2px var(--tram-wine); outline: 0; }
.tram-clients-intake-grid textarea:focus { box-shadow: 0 0 0 2px rgb(98 36 35 / .1); }
.tram-clients-intake-grid input:disabled, .tram-clients-intake-grid select:disabled, .tram-clients-intake-grid textarea:disabled { color: #756964; background: transparent; opacity: .82; }
.tram-clients-intake-files > label { display: inline-flex; width: auto; min-height: 33px; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--tram-wine); border-radius: 2px; color: var(--tram-wine); background: transparent; font-size: 9.5px; font-weight: 700; cursor: pointer; }
.tram-clients-intake-files > label:hover { color: #fff; background: var(--tram-wine); }
.tram-clients-intake-files > label:focus-within { outline: 2px solid var(--tram-focus); outline-offset: 2px; }
.tram-clients-intake-files > label svg { width: 14px; height: 14px; }
.tram-clients-intake-files > p { margin-top: 7px; margin-bottom: 0; color: var(--tram-muted); font-size: 8.8px; line-height: 1.4; text-align: left; }
.tram-clients-intake-files ul { display: grid; gap: 0; margin-top: 11px; margin-bottom: 0; padding: 0; list-style: none; }
.tram-clients-intake-files li { display: grid; grid-template-columns: 17px minmax(0, 1fr) 27px; align-items: center; gap: 8px; min-height: 42px; border-top: 1px dotted #d4c7bf; }
.tram-clients-intake-files li > svg { width: 14px; height: 14px; color: var(--tram-wine); }
.tram-clients-intake-files li > span { display: grid; min-width: 0; gap: 2px; }
.tram-clients-intake-files li strong { overflow: hidden; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.tram-clients-intake-files li small { color: var(--tram-muted); font-size: 8.2px; }
.tram-clients-intake-files li.is-uploaded small { color: #3f6b59; }
.tram-clients-intake-files li button { display: grid; width: 27px; height: 27px; place-items: center; padding: 0; border: 0; color: var(--tram-danger); background: transparent; cursor: pointer; }
.tram-clients-intake-files li button:disabled { color: #9b8f89; cursor: default; }
.tram-clients-intake-files li button svg { width: 13px; height: 13px; }
.tram-clients-intake-confirm { display: grid; grid-template-columns: 132px minmax(0, 1fr); padding: 19px 0 8px; }
.tram-clients-intake-confirm > span { color: var(--tram-muted); font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tram-clients-intake-confirm > strong { color: var(--tram-ink); font: 700 12px/1.35 'Times New Roman', Times, serif; }
.tram-clients-intake-confirm p { grid-column: 2; margin: 4px 0 0; color: var(--tram-muted); font-size: 9px; line-height: 1.4; text-align: left; }
.tram-clients-intake-status { min-height: 18px; margin: 0 0 3px 132px; color: var(--tram-danger); font: 9.5px/1.45 Arial, sans-serif; text-align: left; }
.tram-clients-intake-form > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 0 0; }

.tram-clients-week-nav { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 32px; align-items: center; gap: 8px; margin-top: 16px; }
.tram-clients-week-nav > strong { color: #5e504a; font: 700 11px/1.3 Arial, sans-serif; text-align: center; }
.tram-clients-week-nav button { display: grid; min-width: 32px; height: 31px; place-items: center; padding: 0 7px; border: 1px solid #b8a79d; border-radius: 2px; color: var(--tram-wine); background: transparent; font-size: 8.5px; font-weight: 700; cursor: pointer; }
.tram-clients-week-nav button[hidden] { visibility: hidden; }
.tram-clients-week-nav button:hover { color: #fff; background: var(--tram-wine); }
.tram-clients-week-nav button:focus-visible { outline: 2px solid var(--tram-focus); outline-offset: 2px; }
.tram-clients-week-nav svg { width: 14px; height: 14px; }
.tram-clients-agenda-body { min-height: 300px; transition: opacity 160ms ease; }
.tram-clients-agenda-body.is-querying { opacity: .46; pointer-events: none; }
.tram-clients-agenda-day { padding-top: 22px; }
.tram-clients-agenda-day h3 { margin: 0 0 7px; color: var(--tram-wine); font: 700 9px/1.3 Arial, sans-serif; letter-spacing: .075em; text-transform: uppercase; }
.tram-clients-agenda-list { border-top: 1px solid var(--tram-rule); }
.tram-clients-agenda-row { display: grid; width: 100%; grid-template-columns: 48px minmax(0, 1fr) 18px; align-items: center; gap: 10px; min-height: 64px; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--tram-rule); color: inherit; background: transparent; text-align: left; }
button.tram-clients-agenda-row { cursor: pointer; }
button.tram-clients-agenda-row:hover { padding-right: 0; padding-left: 5px; background: rgb(98 36 35 / .035); }
.tram-clients-agenda-row:focus-visible { outline: 2px solid var(--tram-focus); outline-offset: 2px; }
.tram-clients-agenda-row > time { color: var(--tram-wine); font: 700 12px/1 Arial, sans-serif; }
.tram-clients-agenda-copy { display: grid; min-width: 0; gap: 2px; }
.tram-clients-agenda-copy strong { overflow: hidden; color: var(--tram-ink); font: 700 14px/1.25 'Times New Roman', Times, serif; text-overflow: ellipsis; white-space: nowrap; }
.tram-clients-agenda-copy > span { color: #5e524d; font-size: 9.8px; line-height: 1.35; }
.tram-clients-agenda-copy small { color: var(--tram-muted); font-size: 8.5px; line-height: 1.35; }
.tram-clients-agenda-warning { margin: 18px 0 0; color: var(--tram-danger); font-size: 9px; line-height: 1.45; text-align: left; }
.tram-clients-agenda-empty { min-height: 330px; }

.tram-clients-notices { padding: 0 24px 28px; }
.tram-clients-notices-head { padding: 27px 0 20px; border-bottom: 2px solid var(--tram-wine); }
.tram-clients-notices-head > span { display: block; margin-bottom: 6px; color: var(--tram-wine); font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.tram-clients-notices-head h2 { margin: 0; color: var(--tram-wine-dark); font: 700 25px/1.05 'Times New Roman', Times, serif; }
.tram-clients-notices-head p { margin: 6px 0 0; color: var(--tram-muted); font: 10.5px/1.45 Arial, sans-serif; text-align: left; }
.tram-clients-notices-body > .tram-clients-quiet { padding: 42px 0; text-align: center; }

.tram-clients-record-head { padding: 28px 0 22px; border-bottom: 2px solid var(--tram-wine); }
.tram-clients-record-head > span { display: block; margin-bottom: 7px; color: var(--tram-wine); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tram-clients-record-head h2 { margin: 0; color: var(--tram-wine-dark); font: 700 25px/1.08 'Times New Roman', Times, serif; }
.tram-clients-record-head p { margin: 7px 0 0; color: var(--tram-muted); font: 10.5px/1.3 Arial, sans-serif; text-align: left; }
.tram-clients-record-head p.tram-clients-record-contact { margin-top: 3px; color: #847772; font-size: 9.2px; }

.tram-clients-record-section { display: grid; grid-template-columns: 142px minmax(0, 1fr); gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--tram-rule); }
.tram-clients-record-section h3 { margin: 0; color: var(--tram-wine); font: 700 11px/1.35 Arial, sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.tram-clients-quiet { margin: 0; color: #998e88; font: italic 12px/1.45 'Times New Roman', Times, serif; text-align: left; }
.tram-clients-activity { display: grid; gap: 7px; }
.tram-clients-activity > strong { color: var(--tram-ink); font: 700 15px/1.3 'Times New Roman', Times, serif; }
.tram-clients-activity-description { margin: -1px 0 2px; color: #615650; font: 12px/1.45 'Times New Roman', Times, serif; text-align: left; }
.tram-clients-activity > span { display: flex; align-items: flex-start; gap: 7px; color: #5f5550; font-size: 10.5px; line-height: 1.4; }
.tram-clients-activity > span svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; color: var(--tram-wine); }
.tram-clients-confirmation-note { margin-top: 3px; padding-top: 8px; border-top: 1px solid #e2d8d2; color: #806f66; font: italic 10.5px/1.4 'Times New Roman', Times, serif; }

.tram-clients-requirement { font: 12px/1.55 'Times New Roman', Times, serif; }
.tram-clients-requirement-title { display: block; margin-bottom: 6px; color: var(--tram-ink); font: 700 14px/1.3 'Times New Roman', Times, serif; }
.tram-clients-requirement p { margin: 0 0 10px; line-height: 1.55; text-align: left; }
.tram-clients-deadline { display: flex; align-items: baseline; gap: 8px; }
.tram-clients-deadline span { color: var(--tram-muted); font: 700 9px/1 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.tram-clients-deadline strong { color: var(--tram-danger); font: 700 13px/1.2 Arial, sans-serif; }
.tram-clients-requirement h4 { margin: 14px 0 7px; color: var(--tram-ink); font: 700 10px/1.2 Arial, sans-serif; }
.tram-clients-requirement ul { margin: 0; padding-left: 17px; }
.tram-clients-requirement li { margin-bottom: 4px; padding-left: 2px; }

.tram-clients-task-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tram-clients-task-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; }
.tram-clients-task-mark { display: grid; width: 15px; height: 15px; place-items: center; margin-top: 1px; border: 1px solid #9e8d84; color: var(--tram-wine); }
.tram-clients-task-mark svg { width: 12px; height: 12px; }
.tram-clients-task-copy { display: grid; gap: 2px; }
.tram-clients-task-copy strong { font-size: 10.5px; font-weight: 600; line-height: 1.4; }
.tram-clients-task-copy small { color: var(--tram-muted); font-size: 9px; }
.tram-clients-task-list .is-done .tram-clients-task-copy { color: var(--tram-muted); text-decoration: line-through; }

.tram-clients-status-line { display: grid; gap: 4px; }
.tram-clients-status-line > strong { color: var(--tram-ink); font: 700 15px/1.3 'Times New Roman', Times, serif; }
.tram-clients-status-line p { margin: 0; color: #5f5550; font: 11.5px/1.5 'Times New Roman', Times, serif; text-align: left; }
.tram-clients-status-line small { color: var(--tram-muted); font-size: 8.5px; }
.tram-clients-decision { display: grid; gap: 5px; }
.tram-clients-decision > strong { color: var(--tram-ink); font: 700 15px/1.3 'Times New Roman', Times, serif; }
.tram-clients-decision > small { color: var(--tram-muted); font-size: 8.8px; }
.tram-clients-decision > p { margin: 3px 0 6px; color: #554944; font: 12px/1.52 'Times New Roman', Times, serif; text-align: left; }
.tram-clients-letter { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 8px; margin-top: 6px; padding: 10px 0 0; border-top: 1px dotted #cdbfb7; color: inherit; text-decoration: none; }
.tram-clients-letter > svg { width: 15px; height: 15px; margin-top: 1px; color: var(--tram-wine); }
.tram-clients-letter > span { display: grid; gap: 2px; }
.tram-clients-letter strong { color: var(--tram-wine); font-size: 10px; }
.tram-clients-letter small { color: var(--tram-muted); font-size: 8.5px; }
a.tram-clients-letter:hover strong { text-decoration: underline; }
a.tram-clients-letter:focus-visible { outline: 2px solid var(--tram-focus); outline-offset: 3px; }
.tram-clients-process-list, .tram-clients-movement-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.tram-clients-process-list li { display: grid; gap: 2px; padding: 0 0 10px; }
.tram-clients-process-list li + li { padding-top: 10px; border-top: 1px dotted #d5c8c1; }
.tram-clients-process-list strong { color: var(--tram-ink); font: 700 12.5px/1.35 'Times New Roman', Times, serif; }
.tram-clients-process-list span { color: #5e524d; font-size: 9.5px; line-height: 1.4; }
.tram-clients-process-list small { color: var(--tram-muted); font-size: 8.5px; }
.tram-clients-movement-list li { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; padding: 0 0 12px; }
.tram-clients-movement-list li + li { padding-top: 12px; border-top: 1px dotted #d5c8c1; }
.tram-clients-movement-list time { color: var(--tram-muted); font-size: 8.5px; line-height: 1.4; }
.tram-clients-movement-list li > span { display: grid; gap: 3px; }
.tram-clients-movement-list strong { color: var(--tram-ink); font: 700 12px/1.35 'Times New Roman', Times, serif; }
.tram-clients-movement-list p { margin: 0; color: #5b504b; font: 11px/1.48 'Times New Roman', Times, serif; text-align: left; }

.tram-clients-record-section.is-future { border-bottom: 0; }
.tram-clients-return { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; color: var(--tram-muted); }
.tram-clients-return > svg { width: 21px; height: 21px; color: #9d8d84; }
.tram-clients-return strong { display: block; margin-bottom: 4px; color: #655a55; font-size: 10.5px; }
.tram-clients-return p { margin: 0; font: italic 11px/1.45 'Times New Roman', Times, serif; text-align: left; }
.tram-clients-file-list { display: grid; gap: 8px; margin: 14px 0 0; padding: 13px 0 0; border-top: 1px solid #e1d7d1; list-style: none; }
.tram-clients-file-list li { display: grid; grid-template-columns: 17px minmax(0, 1fr); align-items: start; gap: 8px; }
.tram-clients-file-list li > svg { width: 15px; height: 15px; margin-top: 1px; color: var(--tram-wine); }
.tram-clients-file-list li > span, .tram-clients-file-list li > a { display: grid; gap: 1px; min-width: 0; color: inherit; text-decoration: none; }
.tram-clients-file-list li strong { overflow: hidden; color: var(--tram-ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.tram-clients-file-list li small { color: var(--tram-muted); font-size: 8.5px; }
.tram-clients-file-list li > a:hover strong { color: var(--tram-wine); text-decoration: underline; }
.tram-clients-file-list li > a:focus-visible { outline: 2px solid var(--tram-focus); outline-offset: 3px; }
.tram-clients-client-documents { min-width: 0; }
.tram-clients-client-documents > .tram-clients-file-list { margin-top: 0; padding-top: 0; border-top: 0; }
.tram-clients-record-uploader { display: grid; gap: 7px; margin-top: 15px; padding-top: 14px; border-top: 1px dotted #cdbfb7; }
.tram-clients-record-uploader > label { display: inline-flex; width: max-content; max-width: 100%; min-height: 32px; align-items: center; color: var(--tram-wine); cursor: pointer; }
.tram-clients-record-uploader > label > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--tram-wine); border-radius: 2px; font-size: 9px; font-weight: 700; }
.tram-clients-record-uploader > label:hover > span { color: #fff; background: var(--tram-wine); }
.tram-clients-record-uploader > label:focus-within > span { outline: 2px solid var(--tram-focus); outline-offset: 2px; }
.tram-clients-record-uploader > label svg { width: 14px; height: 14px; }
.tram-clients-record-uploader > p:not(.tram-clients-inline-status) { margin: 0; color: var(--tram-muted); font-size: 8.5px; line-height: 1.4; text-align: left; }
.tram-clients-record-file-list { display: grid; gap: 0; margin: 3px 0 0; padding: 0; list-style: none; }
.tram-clients-record-file-list li { display: grid; grid-template-columns: 17px minmax(0, 1fr) 27px; align-items: center; gap: 8px; min-height: 41px; border-top: 1px dotted #d5c8c1; }
.tram-clients-record-file-list li > svg { width: 14px; height: 14px; color: var(--tram-wine); }
.tram-clients-record-file-list li > span { display: grid; min-width: 0; gap: 2px; }
.tram-clients-record-file-list strong { overflow: hidden; color: var(--tram-ink); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.tram-clients-record-file-list small { color: var(--tram-muted); font-size: 8.2px; }
.tram-clients-record-file-list li.is-uploaded small { color: #3f6b59; }
.tram-clients-record-file-list button { display: grid; width: 27px; height: 27px; place-items: center; padding: 0; border: 0; color: var(--tram-danger); background: transparent; cursor: pointer; }
.tram-clients-record-file-list button:disabled { color: #9b8f89; cursor: default; }
.tram-clients-record-file-list button svg { width: 13px; height: 13px; }
.tram-clients-record-upload-actions { display: flex; justify-content: flex-end; }

.tram-clients-correspondence { border-bottom: 0; }
.tram-clients-communications { min-width: 0; }
.tram-clients-compose-trigger {
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding: 5px 0;
  border: 0;
  border-bottom: 1px solid var(--tram-wine);
  color: var(--tram-wine);
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.tram-clients-compose-trigger svg { width: 14px; height: 14px; }
.tram-clients-compose-trigger:focus-visible { outline: 2px solid var(--tram-focus); outline-offset: 3px; }
.tram-clients-quiet.is-loading { color: #806f67; }
.tram-clients-quiet.is-error { color: var(--tram-danger); }

.tram-clients-work-list { border-top: 1px solid var(--tram-rule); }
.tram-clients-work-item { position: relative; border-bottom: 1px solid var(--tram-rule); }
.tram-clients-work-item::before { position: absolute; top: 13px; bottom: 13px; left: -9px; width: 2px; background: #a28f85; content: ''; }
.tram-clients-work-item.is-unread::before, .tram-clients-work-item.is-open::before { background: var(--tram-wine); }
.tram-clients-work-item.is-answered::before, .tram-clients-work-item.is-submitted::before { background: #3f6b59; }
.tram-clients-work-item.is-resolved::before, .tram-clients-work-item.is-withdrawn::before { background: #c8bcb5; }

.tram-clients-work-summary {
  display: grid;
  width: 100%;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 13px 1px;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.tram-clients-work-summary:focus-visible { outline: 2px solid var(--tram-focus); outline-offset: 2px; }
.tram-clients-work-state { width: 6px; height: 6px; border: 1px solid #9c8e86; border-radius: 50%; }
.is-unread .tram-clients-work-state, .is-open .tram-clients-work-state { border-color: var(--tram-wine); background: var(--tram-wine); }
.is-answered .tram-clients-work-state, .is-submitted .tram-clients-work-state { border-color: #3f6b59; background: #3f6b59; }
.tram-clients-work-heading { display: grid; min-width: 0; gap: 2px; }
.tram-clients-work-heading > span { color: var(--tram-wine); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tram-clients-work-heading strong { overflow: hidden; color: var(--tram-ink); font: 700 13px/1.3 'Times New Roman', Times, serif; text-overflow: ellipsis; white-space: nowrap; }
.tram-clients-work-heading small { overflow: hidden; color: var(--tram-muted); font-size: 8.8px; text-overflow: ellipsis; white-space: nowrap; }
.tram-clients-work-summary .tram-clients-row-arrow { transition: transform 160ms ease; }
.tram-clients-work-summary[aria-expanded="true"] .tram-clients-row-arrow { transform: rotate(90deg); }

.tram-clients-work-detail { padding: 2px 2px 18px 19px; animation: tram-clients-fade-in 160ms ease both; }
.tram-clients-work-detail[hidden] { display: none; }
.tram-clients-work-message { margin: 0 0 13px; color: #4e433e; font: 12px/1.55 'Times New Roman', Times, serif; text-align: left; white-space: pre-wrap; }
.tram-clients-work-detail h4 { margin: 13px 0 7px; color: var(--tram-ink); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.tram-clients-requested-documents { margin: 0 0 15px; padding-left: 17px; color: #554944; font: 11px/1.5 'Times New Roman', Times, serif; }
.tram-clients-requested-documents li { margin-bottom: 3px; }
.tram-clients-work-response { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid #ded2cb; }
.tram-clients-work-response > span { display: block; margin-bottom: 5px; color: #3f6b59; font-size: 8px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.tram-clients-work-response p { margin: 0; color: #4c423e; font: italic 11.5px/1.5 'Times New Roman', Times, serif; text-align: left; white-space: pre-wrap; }
.tram-clients-work-response small { display: block; margin-top: 4px; color: var(--tram-muted); font-size: 8px; }

.tram-clients-response-form { display: grid; gap: 10px; margin-top: 15px; padding-top: 14px; border-top: 1px solid #ded2cb; }
.tram-clients-response-form > label:not(.tram-clients-ack, .tram-clients-attachment-field) { display: grid; gap: 5px; color: #625752; font-size: 9px; font-weight: 700; }
.tram-clients-response-form textarea { width: 100%; resize: vertical; padding: 8px 9px; border: 1px solid #bbaa9f; border-radius: 2px; color: var(--tram-ink); background: #fffdfa; font: 11px/1.45 Arial, sans-serif; }
.tram-clients-response-form textarea:focus { border-color: var(--tram-wine); box-shadow: 0 0 0 2px rgb(98 36 35 / .1); outline: 0; }
.tram-clients-ack { display: flex; align-items: flex-start; gap: 7px; color: #554a45; font-size: 9.5px; line-height: 1.35; }
.tram-clients-ack input { width: 14px; height: 14px; flex: 0 0 auto; accent-color: var(--tram-wine); }
.tram-clients-attachment-field { display: grid; gap: 4px; padding: 9px 0; border-top: 1px dotted #cdbfb7; border-bottom: 1px dotted #cdbfb7; color: var(--tram-muted); font-size: 9px; }
.tram-clients-attachment-field > span { display: flex; align-items: center; gap: 6px; color: var(--tram-wine); font-weight: 700; }
.tram-clients-attachment-field svg { width: 14px; height: 14px; }
.tram-clients-attachment-field small, .tram-clients-attachment-field output { font-size: 8.5px; line-height: 1.35; }
.tram-clients-attachment-field output { color: var(--tram-danger); }
.tram-clients-inline-status { min-height: 13px; margin: 0; color: var(--tram-muted); font-size: 8.8px; line-height: 1.4; text-align: left; }
.tram-clients-response-actions, .tram-clients-work-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }

.tram-clients-action {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid var(--tram-wine);
  border-radius: 2px;
  color: #fff;
  background: var(--tram-wine);
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
}

.tram-clients-action svg { width: 14px; height: 14px; }
.tram-clients-action.is-secondary { color: var(--tram-wine); background: transparent; }
.tram-clients-action:hover { background: var(--tram-wine-dark); }
.tram-clients-action.is-secondary:hover { color: #fff; }
.tram-clients-action:focus-visible { outline: 2px solid var(--tram-focus); outline-offset: 2px; }
.tram-clients-action:disabled { cursor: wait; opacity: .55; }
.tram-clients-work-actions { margin-top: 15px; padding-top: 10px; border-top: 1px dotted #cdbfb7; }
.tram-clients-work-actions button { padding: 5px 0; border: 0; border-bottom: 1px solid #8c7e76; color: #625751; background: transparent; font-size: 8.8px; cursor: pointer; }
.tram-clients-work-actions button + button { margin-left: 10px; color: var(--tram-danger); }
.tram-clients-work-actions button.is-confirming { font-weight: 700; }
.tram-clients-files-label { margin: 20px 0 6px; color: var(--tram-muted); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }

.tram-clients-inbox-list { margin-top: 0; }

.tram-clients-compose-layer {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(45 31 27 / .56);
  opacity: 0;
  transition: opacity 180ms ease;
}

.tram-clients-compose-layer[hidden] { display: none; }
.tram-clients-compose-layer.is-open { opacity: 1; }
.tram-clients-compose {
  display: grid;
  width: min(500px, 100%);
  max-height: calc(100vh - 40px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #a98e82;
  border-radius: 2px;
  background: var(--tram-paper);
  box-shadow: 0 18px 48px rgb(36 21 17 / .36);
  transform: translateY(7px);
  transition: transform 190ms ease;
}

.tram-clients-compose-layer.is-open .tram-clients-compose { transform: translateY(0); }
.tram-clients-compose > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 17px 18px 15px; color: #fffaf5; background: var(--tram-wine); }
.tram-clients-compose > header > div > span { display: block; margin-bottom: 4px; color: #dcc7bf; font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tram-clients-compose > header h2 { margin: 0; font: 700 20px/1.1 'Times New Roman', Times, serif; }
.tram-clients-compose > header p { margin: 4px 0 0; color: #decac2; font-size: 9px; text-align: left; }
.tram-clients-compose > header button { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 50%; color: #fff; background: transparent; cursor: pointer; }
.tram-clients-compose > header button:hover { border-color: rgb(255 255 255 / .35); background: rgb(255 255 255 / .08); }
.tram-clients-compose > header button svg { width: 16px; height: 16px; }
.tram-clients-compose-body { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 14px; padding: 18px; overflow: auto; }
.tram-clients-compose-body > label { display: grid; gap: 5px; color: #615651; font-size: 8.5px; font-weight: 700; letter-spacing: .025em; }
.tram-clients-compose-body input, .tram-clients-compose-body select, .tram-clients-compose-body textarea { width: 100%; padding: 8px 9px; border: 1px solid #b6a69d; border-radius: 2px; color: var(--tram-ink); background: #fffdfa; font: 10.5px/1.35 Arial, sans-serif; }
.tram-clients-compose-body textarea { resize: vertical; }
.tram-clients-compose-body input:focus, .tram-clients-compose-body select:focus, .tram-clients-compose-body textarea:focus { border-color: var(--tram-wine); box-shadow: 0 0 0 2px rgb(98 36 35 / .1); outline: 0; }
.tram-clients-compose-title-field, .tram-clients-compose-message, .tram-clients-compose-documents, .tram-clients-compose-status { grid-column: 1 / -1; }
.tram-clients-compose-documents { min-width: 0; padding: 0; border: 0; }
.tram-clients-compose-documents legend { margin-bottom: 5px; color: #615651; font-size: 8.5px; font-weight: 700; }
.tram-clients-compose-documents > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.tram-clients-compose-documents > div button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid #9c887e; border-radius: 2px; color: var(--tram-wine); background: transparent; font-size: 9px; font-weight: 700; cursor: pointer; }
.tram-clients-compose-documents > div button svg { width: 13px; height: 13px; }
.tram-clients-compose-documents ul { display: grid; gap: 5px; margin: 8px 0 0; padding: 0; list-style: none; }
.tram-clients-compose-documents li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dotted #d5c8c1; color: #554a45; font-size: 9.5px; }
.tram-clients-compose-documents li button { display: grid; width: 24px; height: 24px; place-items: center; padding: 0; border: 0; color: var(--tram-danger); background: transparent; cursor: pointer; }
.tram-clients-compose-documents li button svg { width: 13px; height: 13px; }
.tram-clients-compose-status { min-height: 14px; margin: 0; color: var(--tram-danger); font-size: 9px; line-height: 1.4; text-align: left; }
.tram-clients-compose > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 14px; border-top: 1px solid var(--tram-rule); background: var(--tram-paper-deep); }

.tram-clients-receive {
  position: fixed;
  top: 22px;
  left: 50%;
  z-index: 1400;
  display: grid;
  width: min(430px, calc(100vw - 24px));
  grid-template-columns: 28px minmax(0, 1fr) auto 26px;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  border: 1px solid #a7897c;
  border-top: 3px solid var(--tram-wine);
  border-radius: 2px;
  color: var(--tram-ink);
  background: var(--tram-paper);
  box-shadow: 0 12px 34px rgb(35 20 16 / .25);
  opacity: 0;
  transform: translate(-50%, -9px);
  transition: opacity 180ms ease, transform 190ms ease;
}

.tram-clients-receive[hidden] { display: none; }
.tram-clients-receive.is-visible { opacity: 1; transform: translate(-50%, 0); }
.tram-clients-receive > svg { width: 20px; height: 20px; color: var(--tram-wine); }
.tram-clients-receive > div { display: grid; min-width: 0; gap: 1px; }
.tram-clients-receive small { color: var(--tram-wine); font-size: 7.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tram-clients-receive strong, .tram-clients-receive p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tram-clients-receive strong { font: 700 13px/1.25 'Times New Roman', Times, serif; }
.tram-clients-receive p { margin: 0; color: var(--tram-muted); font: 9px/1.3 Arial, sans-serif; text-align: left; }
.tram-clients-receive > button { padding: 6px 8px; border: 1px solid var(--tram-wine); border-radius: 2px; color: var(--tram-wine); background: transparent; font-size: 8.5px; font-weight: 700; cursor: pointer; }
.tram-clients-receive > button:last-child { display: grid; width: 26px; height: 26px; place-items: center; padding: 0; border: 0; color: var(--tram-muted); }
.tram-clients-receive > button:last-child svg { width: 14px; height: 14px; }

.tram-clients-foot { min-height: 34px; padding: 9px 24px 10px; border-top: 1px solid var(--tram-rule); color: #857974; background: var(--tram-paper-deep); font-size: 9px; letter-spacing: .015em; text-align: center; }

@keyframes tram-clients-spin { to { transform: rotate(360deg); } }
@keyframes tram-clients-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tram-clients-row-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 620px) {
  .tram-clients-overlay { padding: 0; align-items: stretch; }
  .tram-clients-drawer { width: 100%; max-height: none; height: 100%; border: 0; border-radius: 0; }
  .tram-clients-brandline { padding-inline: 18px; }
  .tram-clients-heading { padding: 15px 14px 13px 18px; }
  .tram-clients-heading h2 { font-size: 24px; }
  .tram-clients-head-actions .tram-clients-notices-button { width: 34px; justify-content: center; padding-inline: 5px; }
  .tram-clients-head-actions .tram-clients-notices-button > span:not([data-tram-icon]) { display: none; }
  .tram-clients-head-actions .tram-clients-notices-button b { position: absolute; top: -4px; right: -4px; margin: 0; }
  .tram-clients-office, .tram-clients-search-form { padding-inline: 18px; }
  .tram-clients-list { padding-inline: 18px; }
  .tram-clients-record, .tram-clients-notices, .tram-clients-intake, .tram-clients-agenda { padding-inline: 18px; }
  .tram-clients-search-meta { align-items: flex-start; }
  .tram-clients-search-meta p { max-width: 54%; }
  .tram-clients-row-heading { display: grid; gap: 3px; }
  .tram-clients-row-heading > span { font-size: 9px; }
  .tram-clients-record-section { grid-template-columns: 1fr; gap: 9px; }
  .tram-clients-record-section h3 { padding-bottom: 5px; border-bottom: 1px solid #e4d9d2; }
  .tram-clients-record-nav > span { max-width: 150px; }
  .tram-clients-intake-form legend { float: none; width: 100%; margin-bottom: 11px; padding: 0 0 5px; border-bottom: 1px solid #e4d9d2; }
  .tram-clients-intake-grid, .tram-clients-intake-prefill, .tram-clients-intake-files > :not(legend) { width: 100%; margin-left: 0; }
  .tram-clients-intake-grid { grid-template-columns: 1fr; }
  .tram-clients-intake-grid label, .tram-clients-intake-grid label:not(.is-state), .tram-clients-intake-grid label.is-state { grid-column: 1; }
  .tram-clients-intake-grid label.is-state { max-width: 72px; }
  .tram-clients-intake-confirm { grid-template-columns: 1fr; gap: 3px; }
  .tram-clients-intake-confirm p { grid-column: 1; }
  .tram-clients-intake-status { margin-left: 0; }
  .tram-clients-intake-form > footer { position: sticky; bottom: 0; padding: 11px 0; border-top: 1px solid var(--tram-rule); background: rgb(251 250 246 / .96); }
  .tram-clients-movement-list li { grid-template-columns: 68px minmax(0, 1fr); gap: 9px; }
  .tram-clients-agenda-row { grid-template-columns: 39px minmax(0, 1fr) 16px; gap: 8px; }
  .tram-clients-week-nav { grid-template-columns: 32px minmax(0, 1fr) auto 32px; gap: 5px; }
  .tram-clients-compose-layer { padding: 10px; }
  .tram-clients-compose { max-height: calc(100vh - 20px); }
  .tram-clients-compose-body { grid-template-columns: 1fr; padding: 15px; }
  .tram-clients-compose-body > label, .tram-clients-compose-title-field, .tram-clients-compose-message, .tram-clients-compose-documents, .tram-clients-compose-status { grid-column: 1; }
  .tram-clients-compose > footer { padding-inline: 15px; }
  .tram-clients-response-actions { justify-content: stretch; }
  .tram-clients-response-actions .tram-clients-action { flex: 1 1 140px; }
  .tram-clients-receive { top: 10px; grid-template-columns: 24px minmax(0, 1fr) auto 24px; gap: 7px; }
}

@media (max-width: 920px) {
  .tram-clients-trigger { width: 34px; justify-content: center; padding: 0; }
  .tram-clients-trigger span { display: none; }
}

@media print {
  .tram-clients-trigger, .tram-clients-overlay, .tram-clients-receive { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .tram-clients-overlay, .tram-clients-drawer, .tram-clients-stage, .tram-clients-results, .tram-clients-row, .tram-clients-agenda-body, .tram-clients-agenda-row, .tram-clients-work-detail, .tram-clients-compose-layer, .tram-clients-compose, .tram-clients-receive { animation: none !important; transition-duration: .01ms !important; }
}

/* Uma faixa de cabecalho so: marca, escritorio e titulo condensados. As tres
   faixas empilhadas comiam ~315px antes do primeiro conteudo em 390px. */
.tram-clients-sobre {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 22px 0;
  color: rgb(255 250 245 / .74); font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.tram-clients-sobre button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px;
  border: 1px solid rgb(255 250 245 / .3); border-radius: 999px;
  background: transparent; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer;
}
.tram-clients-sobre button:hover { background: rgb(255 250 245 / .12); }

.tram-clients-abas {
  display: flex; gap: 4px; padding: 0 22px;
  border-bottom: 1px solid #eadfdd; background: var(--tram-paper);
}
.tram-clients-aba {
  flex: 0 0 auto; min-height: 46px; padding: 12px 16px; border: 0;
  border-bottom: 3px solid transparent; background: transparent;
  color: #6f615e; font: 700 13.5px Arial; cursor: pointer;
}
.tram-clients-aba[aria-selected="true"] { border-bottom-color: var(--tram-wine); color: var(--tram-wine); }
.tram-clients-aba:focus-visible { outline: 2px solid #a8635f; outline-offset: -3px; }

.tram-clients-acompanhar { padding: 20px 22px 26px; overflow-y: auto; }
.tram-clients-acompanhar h3 {
  margin: 0 0 3px; color: #8b7c78; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}
.tram-clients-bloco + .tram-clients-bloco { margin-top: 22px; padding-top: 18px; border-top: 1px solid #eadfdd; }
.tram-clients-bloco p.vazio { margin: 8px 0 0; color: #8b7c78; font-size: 13px; }
.tram-clients-linha {
  display: grid; gap: 3px; padding: 11px 0; border-bottom: 1px solid #f4ece9;
}
.tram-clients-linha:last-child { border-bottom: 0; }
.tram-clients-linha b { color: #2d2524; font-size: 14px; overflow-wrap: anywhere; }
.tram-clients-linha span { color: #8b7c78; font-size: 12px; }
.tram-clients-linha.is-lido { opacity: .55; }
@media (min-width: 900px) {
  .tram-clients-acompanhar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; align-items: start; }
  .tram-clients-bloco + .tram-clients-bloco { margin-top: 0; padding-top: 0; border-top: 0; }
  .tram-clients-bloco { margin-bottom: 22px; }
}
@media (max-width: 620px) {
  .tram-clients-sobre { padding: 10px 18px 0; }
  .tram-clients-abas { padding: 0 18px; }
  .tram-clients-aba { flex: 1; text-align: center; padding: 12px 8px; }
  .tram-clients-acompanhar { padding: 18px; }
}