:root {
  color-scheme: light;
  --uruk-blue: #3a7bf7;
  --uruk-green: #6dc365;
  --uruk-purple: #a05bd7;
  --uruk-warning: light-dark(#e5484d, #ff6369);
  --uruk-warning-text: light-dark(#c62a2f, #ff8589);
  --uruk-ink: light-dark(#000000, #ffffff);
  --uruk-paper: light-dark(#ffffff, #000000);
  --uruk-ink-2: light-dark(rgb(0 0 0 / 62%), rgb(255 255 255 / 64%));
  --uruk-line: light-dark(rgb(0 0 0 / 14%), rgb(255 255 255 / 18%));
  --uruk-hair: light-dark(rgb(0 0 0 / 8%), rgb(255 255 255 / 10%));
  --uruk-fill: light-dark(rgb(0 0 0 / 4%), rgb(255 255 255 / 6%));
  --uruk-radius-control: 12px;
  --uruk-radius-small: 8px;
  --uruk-radius-card: 16px;
  --uruk-radius-main: 20px;
  --uruk-control-height: 44px;
  --uruk-edge-inset: 12px;
  --uruk-font: "Uruk Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --uruk-font-label: "Uruk Silkscreen", ui-monospace, monospace;
}

:root.light {
  color-scheme: light;
}

:root.dark {
  color-scheme: dark;
}

@font-face {
  font-family: "Uruk Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-sans-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Uruk Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-sans-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Uruk Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-sans-latin-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Uruk Silkscreen";
  src: url("/fonts/silkscreen-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--uruk-paper);
  color: var(--uruk-ink);
  font-family: var(--uruk-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3 {
  font-size: inherit;
  font-weight: inherit;
}

:focus,
:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

:root.dark *,
:root.dark *::before,
:root.dark *::after {
  box-shadow: none !important;
  text-shadow: none !important;
}

:root[data-theme-changing] *,
:root[data-theme-changing] *::before,
:root[data-theme-changing] *::after {
  transition: none !important;
}

.icon {
  display: block;
  flex: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon:not(.icon--fixed) {
  width: var(--uruk-icon-size, 1.2rem);
  height: var(--uruk-icon-size, 1.2rem);
}

.glyph {
  display: block;
  flex: none;
  width: calc(var(--uruk-icon-size, 1.2rem) * 0.875);
  height: calc(var(--uruk-icon-size, 1.2rem) * 0.875);
  fill: currentColor;
}

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

.spinner {
  display: inline-flex;
  color: var(--uruk-ink-2);
  animation: spinner-appear 1ms linear 300ms both;
}

.spinning {
  display: inline-flex;
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes spinner-appear {
  from {
    opacity: 0;
  }
}
.text-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--uruk-ink);
  font-size: 12px;
  font-weight: 700;
}
.text-button:hover {
  text-decoration: underline;
}

.notice {
  display: block;
  margin: 12px 0;
  padding: 12px 16px;
  border: 1px solid var(--uruk-green);
  border-radius: var(--uruk-radius-control);
  background: var(--uruk-paper);
  color: var(--uruk-ink);
  font-size: 13px;
  font-weight: 700;
}

.notice--error {
  border-color: var(--uruk-warning);
  color: var(--uruk-warning-text);
}

.card {
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-card);
  background: var(--uruk-paper);
}

.avatar {
  display: flex;
  width: 32px;
  height: 32px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--uruk-fill);
  color: var(--uruk-ink-2);
  font-size: 10px;
  font-weight: 700;
}

.chip {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--uruk-line);
  border-radius: 999px;
  background: var(--uruk-paper);
  color: var(--uruk-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow-wrap: normal;
}
.chip::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.chip[data-tone=positive]::before {
  border-color: var(--uruk-green);
  background: var(--uruk-green);
}
.chip[data-tone=referred]::before {
  border-color: var(--uruk-blue);
  background: var(--uruk-blue);
}
.chip[data-tone=question]::before {
  border-color: var(--uruk-purple);
  background: var(--uruk-purple);
}
.chip[data-tone=closed]::before {
  background: currentColor;
}
.chip[data-tone=failed]::before {
  border-color: var(--uruk-warning);
  background: var(--uruk-warning);
}

.empty {
  display: flex;
  min-height: 240px;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 50px 24px;
  color: var(--uruk-ink-2);
  text-align: center;
}

.empty__title {
  color: var(--uruk-ink);
  font-size: 17px;
  font-weight: 700;
}

.gate {
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
}

.crash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.4);
}

.crash__panel {
  display: grid;
  width: min(420px, 100%);
  gap: 22px;
  padding: 26px;
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-main);
  background: var(--uruk-paper);
  color: var(--uruk-ink);
}

.crash__message {
  font-size: 15px;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-control);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}
.button:focus-visible {
  border-color: var(--uruk-ink);
}

.button--md {
  min-width: 6rem;
  min-height: var(--uruk-control-height);
  padding-inline: 1.25rem;
  font-size: 15px;
}

.button--neutral {
  background: var(--uruk-paper);
  color: var(--uruk-ink);
}
.button--neutral:hover:not(:disabled) {
  background: var(--uruk-fill);
}

.button--contrast {
  border-color: var(--uruk-ink);
  background: var(--uruk-ink);
  color: var(--uruk-paper);
}
.button--contrast:hover:not(:disabled) {
  opacity: 0.86;
}
.button--contrast:focus-visible {
  border-color: var(--uruk-ink);
}

.icon-button {
  display: inline-flex;
  width: var(--uruk-control-height);
  height: var(--uruk-control-height);
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-control);
  background: var(--uruk-paper);
  color: var(--uruk-ink);
  transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}
.icon-button:hover:not(:disabled) {
  background: var(--uruk-fill);
}
.icon-button:focus-visible {
  border-color: var(--uruk-ink);
}
.icon-button[data-selected=true], .icon-button[data-selected=true]:hover:not(:disabled) {
  border-color: var(--uruk-ink);
  background: var(--uruk-ink);
  color: var(--uruk-paper);
}

.icon-button--quiet {
  border-color: transparent;
  background: transparent;
}
.icon-button--quiet:hover:not(:disabled) {
  border-color: var(--uruk-line);
}

:where(input:not([type=checkbox], [type=radio], [type=file]), select) {
  min-height: var(--uruk-control-height);
  padding: 8px 14px;
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-control);
  background: var(--uruk-paper);
  color: var(--uruk-ink);
  font-weight: 500;
  transition: border-color 150ms ease-out;
}

:where(textarea) {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-control);
  background: var(--uruk-paper);
  color: var(--uruk-ink);
  font-weight: 500;
  line-height: 1.6;
  resize: vertical;
}

:where(input, select, textarea):focus {
  border-color: var(--uruk-ink);
}

:where(input)[aria-invalid=true] {
  border-color: var(--uruk-warning);
}

:where(input, textarea)::placeholder {
  color: var(--uruk-ink-2);
}

:where(input[type=checkbox], input[type=radio]) {
  width: 16px;
  height: 16px;
  flex: none;
  accent-color: var(--uruk-ink);
  cursor: pointer;
}

:where(select) {
  cursor: pointer;
}

.field {
  display: grid;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
}

.field__label {
  color: var(--uruk-ink);
}

.search-box {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  padding-left: 12px;
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-control);
  background: var(--uruk-paper);
  color: var(--uruk-ink);
  transition: border-color 150ms ease-out;
}
.search-box:focus-within {
  border-color: var(--uruk-ink);
}
.search-box input {
  width: 166px;
  min-width: 0;
  min-height: calc(var(--uruk-control-height) - 2px);
  padding: 8px 14px 8px 0;
  border: 0;
  background: transparent;
  font-size: 12px;
}
.search-box input::-webkit-search-cancel-button {
  display: none;
}

.dropdown {
  display: inline-flex;
  flex: none;
}

.dropdown__panel {
  position: fixed;
  inset: auto;
  min-width: 170px;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  margin: 0;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-card);
  background: var(--uruk-paper);
  color: var(--uruk-ink);
  visibility: hidden;
}

.dropdown__panel--placed {
  visibility: visible;
}

.dropdown__item {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}
.dropdown__item:hover, .dropdown__item:focus-visible {
  background: var(--uruk-fill);
}
.dropdown__item[data-destructive=true] {
  color: var(--uruk-warning-text);
}
.dropdown__item[data-destructive=true]:not(:first-child) {
  margin-top: 6px;
  border-top: 1px solid var(--uruk-line);
  border-radius: 0 0 10px 10px;
}

.workspace {
  position: fixed;
  inset: 0;
  display: flex;
  height: 100dvh;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  background: var(--uruk-paper);
  color: var(--uruk-ink);
  font-family: var(--uruk-font);
  font-size: 14px;
  font-weight: 500;
}

.topbar {
  display: flex;
  width: 100%;
  min-height: 64px;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto;
  padding: 10px 40px;
}

.brand {
  display: inline-flex;
  min-width: 0;
  flex: none;
  align-items: center;
  color: var(--uruk-ink);
}

.brand__pawn {
  display: block;
  width: auto;
  height: 38px;
  flex: none;
}

.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-card);
  background: var(--uruk-paper);
}

.tabs__tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--uruk-radius-control);
  color: var(--uruk-ink-2);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  transition: background-color 150ms, color 150ms;
}
.tabs__tab:hover {
  background: var(--uruk-fill);
}
.tabs__tab:focus-visible {
  background: var(--uruk-fill);
  color: var(--uruk-ink);
}
.tabs__tab[aria-current=page], .tabs__tab[aria-current=page]:hover {
  background: var(--uruk-ink);
  color: var(--uruk-paper);
}

.header-actions {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-right: var(--uruk-edge-inset);
}

.header-actions__settings {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: settings-in 180ms ease-out;
}

@keyframes settings-in {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
}
.main {
  display: flex;
  width: min(100%, 1480px);
  min-height: 0;
  flex: 1;
  flex-direction: column;
  margin: 0 auto;
  padding: clamp(12px, 2vh, 24px) 40px;
}
.main > * {
  min-height: 0;
  flex: 1;
}

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

@media (min-width: 761px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    align-items: center;
  }
  .brand {
    justify-self: start;
  }
  .tabs {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabs__tab {
    flex: none;
    white-space: nowrap;
  }
  .header-actions {
    justify-self: end;
  }
  .workspace--signed-out .topbar {
    grid-template-columns: minmax(max-content, 1fr) minmax(max-content, 1fr);
  }
}
@media (min-width: 761px) and (max-width: 1480px) {
  .tabs__tab {
    gap: 6px;
    padding: 10px 12px;
  }
}
@media (min-width: 761px) and (max-width: 1320px) {
  .tabs__tab .icon {
    display: none;
  }
}
@media (min-width: 761px) and (max-width: 1240px) {
  .tabs__tab {
    padding: 10px 9px;
  }
}
@media (max-width: 1100px) {
  .topbar,
  .main {
    padding-inline: 24px;
  }
}
@media (min-width: 761px) and (max-width: 940px) {
  .topbar {
    gap: 12px;
  }
  .tabs__tab {
    padding: 8px 9px;
    font-size: 12px;
  }
}
@media (max-width: 760px) {
  .topbar {
    flex-wrap: wrap;
    gap: 16px;
    padding-inline: 16px;
  }
  .tabs {
    order: 3;
    width: 100%;
  }
  .tabs__tab {
    flex: 1;
    justify-content: center;
    padding: 10px 8px;
    font-size: 12px;
  }
  .main {
    padding-inline: 16px;
  }
}
@media (max-width: 640px) {
  .header-actions__settings {
    position: fixed;
    inset: 64px 8px auto;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
@media (max-width: 540px) {
  .tabs {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 2px;
  }
  .tabs__tab {
    min-width: 0;
    padding: 9px 4px;
    white-space: nowrap;
  }
  .tabs__tab .icon {
    display: none;
  }
}
@media (max-height: 650px) {
  .main {
    overflow-y: auto;
  }
}
.workspace--signed-out {
  overflow-y: auto;
}

.sign-in {
  width: min(100%, 420px);
  margin: 100px auto 0;
  padding: 32px;
}

.sign-in__title {
  font-size: clamp(32px, 3.2vw, 44px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.sign-in__form {
  display: grid;
  gap: 22px;
  margin-top: 35px;
}
.sign-in__form input {
  width: 100%;
  font-size: 14px;
}

.replies {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.replies__toolbar {
  display: flex;
  min-height: var(--uruk-control-height);
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.replies__owner select {
  max-width: 165px;
  font-size: 12px;
}

.replies__card {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  container: replies/inline-size;
}

.replies__scroll {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--uruk-line) transparent;
  scrollbar-width: thin;
}

.replies__state {
  display: flex;
  min-height: 240px;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 20px;
}

.replies__failed {
  color: var(--uruk-warning-text);
  font-size: 13px;
  font-weight: 700;
}

.replies__none {
  padding: 48px 20px;
  color: var(--uruk-ink-2);
  font-size: 13px;
  text-align: center;
}

.replies__group {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 14px 12px;
  border-bottom: 1px solid var(--uruk-hair);
  background: var(--uruk-paper);
  color: var(--uruk-ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.replies__group--waiting {
  color: var(--uruk-ink);
}

.replies__rows {
  margin: 0;
  padding: 0;
}

.replies__spacer {
  display: block;
}

.reply {
  position: relative;
  display: grid;
  height: 68px;
  grid-template-columns: minmax(0, 1fr) calc(3 * var(--uruk-control-height) + 8px + var(--uruk-edge-inset) - 1px);
  align-items: center;
  border-bottom: 1px solid var(--uruk-hair);
  transition: background-color 150ms;
}
.reply:hover, .reply:focus-within {
  background: var(--uruk-fill);
}

.reply__open {
  display: grid;
  min-width: 0;
  height: 100%;
  grid-template-columns: minmax(0, 26%) 128px minmax(0, 1fr) minmax(0, 16%) 52px;
  align-items: center;
  gap: 12px;
  padding: 12px 8px 12px 12px;
  font-size: 12px;
}
.reply__open::after {
  content: "";
  position: absolute;
  inset: 0;
}

.reply__who {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.reply__names {
  display: grid;
  min-width: 0;
  gap: 4px;
}
.reply__names strong,
.reply__names small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reply__names strong {
  font-size: 12px;
  font-weight: 700;
}
.reply__names small {
  color: var(--uruk-ink-2);
  font-size: 10px;
}

.reply .chip {
  justify-self: start;
  font-size: 11px;
}

.reply__label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.reply__agent {
  display: inline-flex;
  color: var(--uruk-ink-2);
}

.reply__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reply__meta {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reply__date {
  color: var(--uruk-ink-2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.reply__actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding-right: calc(var(--uruk-edge-inset) - 1px);
}

@container replies (max-width: 900px) {
  .reply__open {
    grid-template-columns: minmax(0, 32%) 128px minmax(0, 1fr) 52px;
  }
  .reply__meta {
    display: none;
  }
}
@container replies (max-width: 640px) {
  .reply {
    height: 88px;
  }
  .reply__open {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    row-gap: 8px;
    column-gap: 10px;
  }
  .reply__who {
    grid-column: 1/3;
    grid-row: 1;
  }
  .reply__date {
    grid-column: 3;
    grid-row: 1;
  }
  .reply__label {
    grid-column: 1;
    grid-row: 2;
  }
  .reply__text {
    grid-column: 2/-1;
    grid-row: 2;
  }
  .reply__actions {
    align-self: start;
    padding-top: 12px;
  }
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--uruk-ink);
  border-radius: var(--uruk-radius-control);
  background: var(--uruk-ink);
  color: var(--uruk-paper);
  font-size: 12px;
  font-weight: 700;
}

.mail {
  display: grid;
  flex: 1;
  grid-template-columns: 13.5rem minmax(0, 1fr);
  gap: 24px;
  min-height: 0;
}

.mail__main {
  display: flex;
  grid-column: 2;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

.mail-rail {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.mail-rail::-webkit-scrollbar {
  display: none;
}

.mail-rail__bar,
.mail-rail__scrim {
  display: none;
}

.mail-rail__account {
  display: block;
  margin-bottom: 8px;
}
.mail-rail__account select {
  width: 100%;
  min-height: var(--uruk-control-height);
  padding: 8px 14px;
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-control);
  background: var(--uruk-paper);
  color: var(--uruk-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color 150ms ease-out;
}
.mail-rail__account select:focus {
  border-color: var(--uruk-ink);
}

.mail-compose-button,
.mail-fab {
  display: inline-flex;
  min-width: 6rem;
  min-height: var(--uruk-control-height);
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 0;
  padding-inline: 1.25rem;
  border: 1px solid var(--uruk-ink);
  border-radius: var(--uruk-radius-control);
  background: var(--uruk-ink);
  color: var(--uruk-paper);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 150ms ease-out;
}
.mail-compose-button:hover,
.mail-fab:hover {
  opacity: 0.86;
}

.mail-fab {
  display: none;
}

.mail-folders {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mail-folders .mail-folder[hidden] {
  display: none;
}

.mail-folder {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--uruk-radius-control);
  color: var(--uruk-ink-2);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.mail-folder:hover {
  background: var(--uruk-fill);
}
.mail-folder[data-unread=true] {
  color: var(--uruk-ink);
}
.mail-folder[aria-current=page] {
  background: var(--uruk-ink);
  color: var(--uruk-paper);
}
.mail-folder .icon {
  flex: none;
}

.mail-folder__name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-folder__count {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.mail-list,
.mail-thread {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}
.mail-list[hidden],
.mail-thread[hidden] {
  display: none;
}

.mail-toolbar {
  display: flex;
  min-height: var(--uruk-control-height);
  flex: none;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.mail-toolbar__select {
  display: inline-flex;
  height: var(--uruk-control-height);
  align-items: center;
  padding-left: 14px;
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-control);
  background: var(--uruk-paper);
}
.mail-toolbar__select:focus-within {
  border-color: var(--uruk-ink);
}
.mail-toolbar__select input {
  margin: 0;
}
.mail-toolbar__select .icon-button {
  width: 40px;
  height: calc(var(--uruk-control-height) - 2px);
  border-color: transparent;
}

.mail-toolbar__end {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.mail-toolbar__range {
  margin-right: 4px;
  color: var(--uruk-ink-2);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mail-card {
  min-height: 0;
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-card);
  background: var(--uruk-paper);
  scrollbar-color: var(--uruk-line) transparent;
  scrollbar-width: thin;
}

.mail-list__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mail-row {
  --row-tint: transparent;
  position: relative;
  display: grid;
  min-height: 52px;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  padding: 4px 12px 4px 8px;
  border-bottom: 1px solid var(--uruk-hair);
  background: var(--row-tint);
  color: var(--uruk-ink);
  font-size: 12px;
  font-weight: 500;
  content-visibility: auto;
  contain-intrinsic-block-size: auto 52px;
  transition: background-color 150ms ease-out;
}
.mail-row[data-unread=true] .mail-row__names,
.mail-row[data-unread=true] .mail-row__subject,
.mail-row[data-unread=true] .mail-row__date {
  font-weight: 700;
}
.mail-row[data-unread=true] .mail-row__date {
  color: var(--uruk-ink);
}
.mail-row:hover, .mail-row:has(.mail-row__link:focus-visible) {
  --row-tint: var(--uruk-fill);
}
.mail-row[data-selected=true] {
  --row-tint: var(--uruk-hair);
}
.mail-row[data-cursor=true]::before {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--uruk-ink);
  content: "";
}

.mail-row__select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mail-row__avatar {
  display: none;
}

.mail-row__link {
  display: grid;
  min-width: 0;
  min-height: 44px;
  grid-template-columns: min(12rem, 30%) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.mail-row__who {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 4px;
}

.mail-row__names,
.mail-row__summary,
.mail-row__subject,
.mail-row__snippet {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-row__count {
  flex: none;
  color: var(--uruk-ink-2);
  font-size: 11px;
  font-weight: 700;
}

.mail-row__snippet,
.mail-row__separator {
  color: var(--uruk-ink-2);
}

.mail-row__clip {
  display: inline-flex;
  grid-column: 3;
  color: var(--uruk-ink-2);
}

.mail-row__date {
  grid-column: 4;
  min-width: 3.5rem;
  color: var(--uruk-ink-2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.mail-row__actions {
  position: absolute;
  top: 50%;
  right: 8px;
  display: none;
  gap: 4px;
  padding-left: 8px;
  background: linear-gradient(var(--row-tint), var(--row-tint)), var(--uruk-paper);
  translate: 0 -50%;
}
.mail-row__actions .icon-button {
  width: 40px;
  height: 40px;
}

.mail-row:hover .mail-row__actions {
  display: flex;
  animation: mail-reveal 180ms ease-out;
}
.mail-row:hover .mail-row__date,
.mail-row:hover .mail-row__clip {
  visibility: hidden;
}

@keyframes mail-reveal {
  from {
    opacity: 0;
    translate: -6px -50%;
  }
}
.mail-state {
  display: flex;
  min-height: 240px;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 20px;
  color: var(--uruk-ink-2);
  text-align: center;
}

.mail-state__text {
  margin: 0;
  padding: 48px 20px;
  color: var(--uruk-ink-2);
  font-size: 13px;
  text-align: center;
}
.mail-state .mail-state__text {
  padding: 0;
}

.mail-text-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--uruk-ink);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.mail-text-button:hover {
  text-decoration: underline;
}

.mail-back {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  color: var(--uruk-ink);
  text-decoration: none;
}

.mail-thread__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 28px 32px 12px 76px;
}

.mail-thread__subject {
  margin: 0 4px 0 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.mail-chip {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--uruk-line);
  border-radius: 999px;
  background: var(--uruk-paper);
  color: var(--uruk-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.mail-chip::before {
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  flex: none;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
}

.mail-thread__messages {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mail-thread__messages > li + li {
  margin-inline: 32px;
  border-top: 1px solid var(--uruk-hair);
}
.mail-thread__messages > li + li .mail-message {
  padding-inline: 0;
}

.mail-message {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 12px;
  padding: 16px 32px;
}

.mail-message__avatar,
.mail-row__avatar {
  place-items: center;
  border-radius: 50%;
  background: var(--uruk-fill);
  color: var(--uruk-ink-2);
  font-size: 10px;
  font-weight: 700;
}

.mail-message__avatar {
  display: grid;
  width: 32px;
  height: 32px;
}

.mail-message__head {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: start;
  column-gap: 12px;
}

.mail-message__toggle {
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: 2px 0;
  color: var(--uruk-ink);
  text-align: left;
  cursor: pointer;
}

.mail-message__line {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 6px;
}

.mail-message__from,
.mail-message__address,
.mail-message__snippet {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-message__from {
  flex: none;
  max-width: 100%;
  font-size: 13px;
  font-weight: 700;
}

.mail-message__address,
.mail-message__snippet,
.mail-message__date {
  color: var(--uruk-ink-2);
  font-size: 11px;
  font-weight: 500;
}

.mail-message__snippet {
  font-size: 12px;
}

.mail-message__date {
  padding-top: 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mail-message__address {
  display: none;
}

.mail-message--open .mail-message__address {
  display: inline;
}
.mail-message--open .mail-message__snippet {
  display: none;
}

.mail-message__actions {
  display: flex;
  gap: 4px;
  margin-top: -8px;
}
.mail-message__actions .icon-button {
  width: 40px;
  height: 40px;
}

.mail-message__meta {
  display: grid;
  grid-column: 2;
  gap: 8px;
  margin: 8px 0 0;
  font-size: 11px;
}
.mail-message__meta > div {
  display: flex;
  gap: 12px;
}
.mail-message__meta dt {
  width: 50px;
  flex: none;
  color: var(--uruk-ink-2);
}
.mail-message__meta dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.mail-message__content {
  display: grid;
  grid-column: 2;
  gap: 12px;
  padding-top: 16px;
}

.mail-message__note {
  margin: 0;
  color: var(--uruk-ink-2);
  font-size: 11px;
}

.mail-message__frame {
  display: block;
  width: 100%;
  border: 1px solid var(--uruk-hair);
  border-radius: var(--uruk-radius-control);
  background: transparent;
}

.mail-message__text {
  font-size: 13px;
  line-height: 1.8;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.mail-message__files,
.mail-compose__files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mail-compose__files:empty {
  display: none;
}

.mail-file,
.mail-compose__file {
  display: inline-flex;
  max-width: 100%;
  min-height: 36px;
  align-items: center;
  gap: 6px;
  padding-inline: 12px;
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-control);
  color: var(--uruk-ink);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.mail-file {
  transition: background-color 150ms ease-out;
}
.mail-file:hover {
  background: var(--uruk-fill);
}
.mail-file:focus-visible {
  border-color: var(--uruk-ink);
}

.mail-file__name,
.mail-compose__file-name {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-file__size,
.mail-compose__file-state {
  color: var(--uruk-ink-2);
  font-weight: 500;
  white-space: nowrap;
}

.mail-thread__replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 32px 28px 76px;
}

.mail-button {
  display: inline-flex;
  min-width: 6rem;
  min-height: var(--uruk-control-height);
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-inline: 1.25rem;
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-control);
  background: var(--uruk-paper);
  color: var(--uruk-ink);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}
.mail-button:hover {
  background: var(--uruk-fill);
}
.mail-button:focus-visible {
  border-color: var(--uruk-ink);
}

.mail-notice {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  display: flex;
  width: max-content;
  max-width: min(380px, 100vw - 32px);
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 14px;
  border: 1px solid var(--uruk-warning);
  border-radius: var(--uruk-radius-control);
  background: var(--uruk-paper);
  color: var(--uruk-warning-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.mail-notice > output {
  min-width: 0;
  overflow-wrap: anywhere;
}
.mail-notice .icon-button {
  width: 28px;
  height: 28px;
  border-radius: var(--uruk-radius-small);
  color: inherit;
}

.mail-dock {
  position: fixed;
  right: 24px;
  bottom: 0;
  z-index: 50;
  display: flex;
  max-width: calc(100vw - 48px);
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: 16px;
  pointer-events: none;
}

.mail-compose {
  display: flex;
  width: 540px;
  max-width: 100%;
  height: min(600px, 100dvh - 80px);
  flex: none;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--uruk-line);
  border-bottom: 0;
  border-radius: var(--uruk-radius-card) var(--uruk-radius-card) 0 0;
  background: var(--uruk-paper);
  color: var(--uruk-ink);
  pointer-events: auto;
}

.mail-compose--minimized {
  width: 280px;
  height: auto;
}

.mail-compose--full {
  position: fixed;
  top: 32px;
  left: 50%;
  z-index: 1;
  width: min(1180px, 100vw - 40px);
  height: calc(100dvh - 64px);
  border-bottom: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-main);
  translate: -50% 0;
}

.mail-compose__scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  pointer-events: auto;
}

.mail-compose__bar {
  display: flex;
  min-height: 48px;
  flex: none;
  align-items: center;
  gap: 4px;
  padding: 0 4px 0 16px;
  border-bottom: 1px solid var(--uruk-hair);
  cursor: default;
}
.mail-compose__bar .icon-button {
  width: 40px;
  height: 40px;
}

.mail-compose__title {
  min-width: 0;
  flex: 1;
  margin: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-compose__window {
  display: inline-flex;
  gap: 4px;
}

.mail-compose__form {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}
.mail-compose__form[hidden] {
  display: none;
}

.mail-compose__row {
  display: flex;
  min-height: var(--uruk-control-height);
  flex: none;
  align-items: center;
  gap: 8px;
  margin: 0 16px;
  border-bottom: 1px solid var(--uruk-hair);
  transition: border-color 150ms ease-out;
}
.mail-compose__row[hidden] {
  display: none;
}
.mail-compose__row:focus-within {
  border-bottom-color: var(--uruk-ink);
}
.mail-compose__row input {
  min-width: 0;
  min-height: 40px;
  flex: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--uruk-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  outline: none;
}
.mail-compose__row input::placeholder {
  color: var(--uruk-ink-2);
}

.mail-compose__from {
  min-width: 0;
  min-height: 40px;
  flex: 1;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--uruk-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  outline: none;
}
.mail-compose__from:disabled {
  opacity: 1;
  appearance: none;
}

.mail-compose__signature {
  display: flex;
  flex: none;
  gap: 8px;
  margin: 0 16px;
  padding: 8px 0;
  border-top: 1px solid var(--uruk-hair);
  font-size: 12px;
}

.mail-compose__label {
  color: var(--uruk-ink-2);
  font-size: 12px;
  font-weight: 700;
}

.mail-compose__cc {
  padding: 4px 6px;
  border-radius: var(--uruk-radius-small);
  color: var(--uruk-ink-2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.mail-compose__cc:hover {
  color: var(--uruk-ink);
}

.mail-compose__body {
  min-height: 0;
  flex: 1;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--uruk-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  resize: none;
  outline: none;
}

.mail-compose__files {
  padding: 0 16px 8px;
}

.mail-compose__file {
  padding-right: 4px;
}
.mail-compose__file[data-state=busy] {
  border-color: var(--uruk-ink-2);
}

.mail-compose__remove {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--uruk-radius-small);
  color: var(--uruk-ink-2);
  cursor: pointer;
}
.mail-compose__remove:hover {
  background: var(--uruk-fill);
  color: var(--uruk-ink);
}

.mail-compose__error {
  margin: 0 16px 8px;
  padding: 12px 16px;
  border: 1px solid var(--uruk-warning);
  border-radius: var(--uruk-radius-control);
  color: var(--uruk-warning-text);
  font-size: 13px;
  font-weight: 700;
}

.mail-compose__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
}

.mail-compose__send {
  display: grid;
  width: var(--uruk-control-height);
  height: var(--uruk-control-height);
  flex: none;
  place-items: center;
  border: 1px solid var(--uruk-ink);
  border-radius: var(--uruk-radius-control);
  background: var(--uruk-ink);
  color: var(--uruk-paper);
  cursor: pointer;
  transition: opacity 150ms ease-out;
}
.mail-compose__send:hover:not(:disabled) {
  opacity: 0.86;
}
.mail-compose__send:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.mail-compose__attach {
  display: grid;
  width: var(--uruk-control-height);
  height: var(--uruk-control-height);
  flex: none;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--uruk-radius-control);
  color: var(--uruk-ink);
  cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.mail-compose__attach:hover {
  border-color: var(--uruk-line);
  background: var(--uruk-fill);
}
.mail-compose__attach:has(input:focus-visible) {
  border-color: var(--uruk-ink);
}

.mail-compose__discard {
  margin-left: auto;
}

.mail-spin {
  display: inline-flex;
  animation: mail-spin 1.5s linear infinite;
}

@keyframes mail-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 760px) {
  .mail {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
  }
  .mail__main {
    grid-column: 1;
  }
  .mail-rail__bar {
    display: flex;
    min-height: var(--uruk-control-height);
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid var(--uruk-line);
    border-radius: var(--uruk-radius-control);
    background: var(--uruk-paper);
    color: var(--uruk-ink);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }
  .mail-rail__bar:focus-visible {
    border-color: var(--uruk-ink);
  }
  .mail-rail__place {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mail-rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: min(18rem, 85vw);
    padding: 16px;
    border-right: 1px solid var(--uruk-line);
    background: var(--uruk-paper);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 180ms ease-out, visibility 180ms;
  }
  .mail-rail--open {
    transform: none;
    visibility: visible;
  }
  .mail-rail--open + .mail-rail__scrim {
    position: fixed;
    inset: 0;
    z-index: 59;
    display: block;
    background: rgba(0, 0, 0, 0.4);
  }
  .mail-compose-button {
    display: none;
  }
  .mail-fab {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 40;
    display: inline-flex;
    margin: 0;
  }
  .mail--reading .mail-fab {
    display: none;
  }
  .mail-toolbar {
    margin-bottom: 12px;
  }
  .mail-toolbar__select,
  .mail-toolbar__range {
    display: none;
  }
  .mail-row {
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
    column-gap: 12px;
    padding: 12px;
  }
  .mail-row__select {
    position: relative;
  }
  .mail-row__select input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
  }
  .mail-row__select:has(input:focus-visible) .mail-row__avatar {
    border-color: var(--uruk-ink);
  }
  .mail-row__avatar {
    display: grid;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
  }
  .mail-row__avatar .icon {
    display: none;
  }
  [data-selected=true] .mail-row__avatar {
    background: var(--uruk-ink);
    color: var(--uruk-paper);
  }
  [data-selected=true] .mail-row__avatar .icon {
    display: block;
  }
  [data-selected=true] .mail-row__avatar .mail-row__initial {
    display: none;
  }
  .mail-row__link {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 4px;
  }
  .mail-row__summary {
    display: grid;
    grid-column: 1/-1;
    grid-row: 2;
  }
  .mail-row__date {
    grid-column: 2;
    grid-row: 1;
  }
  .mail-row__separator,
  .mail-row__clip {
    display: none;
  }
  .mail-row:hover .mail-row__actions {
    display: none;
  }
  .mail-row:hover .mail-row__date {
    visibility: visible;
  }
  .mail-thread__heading,
  .mail-thread__replies {
    padding: 20px 16px 12px;
  }
  .mail-message {
    padding-inline: 16px;
  }
  .mail-thread__messages > li + li {
    margin-inline: 16px;
  }
  .mail-message__head {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .mail-message__date {
    grid-column: 1;
    grid-row: 2;
  }
  .mail-message__actions {
    grid-column: 2;
    grid-row: 1/span 2;
  }
  .mail-message__meta,
  .mail-message__content {
    grid-column: 1/-1;
  }
  .mail-notice {
    right: 16px;
    bottom: 16px;
  }
  .mail-dock {
    inset: 0;
    display: block;
    max-width: none;
  }
  .mail-compose,
  .mail-compose--full,
  .mail-compose--minimized {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    translate: none;
  }
  .mail-compose__window {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mail-rail,
  .mail-row,
  .mail-row__actions,
  .mail-spin {
    animation: none;
    transition: none;
  }
}
.dialog {
  width: min(660px, 100vw - 32px);
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  overflow-y: auto;
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-main);
  background: var(--uruk-paper);
  color: var(--uruk-ink);
  font-size: 13px;
  font-weight: 500;
}

.dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
}

.dialog--record {
  width: min(1360px, 100vw - 32px);
  height: calc(100dvh - 32px);
  max-height: calc(100dvh - 32px);
}

.dialog--record[open] {
  display: flex;
  flex-direction: column;
}

.dialog--record .dialog__body {
  flex: 1;
}

.dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px 18px;
}

.dialog__header .icon-button {
  width: 40px;
  height: 40px;
}

.dialog__title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.dialog__body {
  padding: 0 26px 22px;
}

.dialog__footer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 24px;
  border-top: 1px solid var(--uruk-line);
  background: var(--uruk-paper);
}

@media (max-width: 760px) {
  .dialog--record {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
  .dialog__header {
    padding: 18px;
  }
  .dialog__title {
    font-size: 22px;
  }
  .dialog__body {
    padding: 0 18px 18px;
  }
  .dialog__footer {
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 18px;
  }
}
.panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  scroll-margin-top: 8px;
}

.panel__heading {
  display: flex;
  min-height: 24px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.panel__heading h2 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.panel__heading > span {
  color: var(--uruk-ink-2);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.panel__aside {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.kpis {
  display: grid;
  flex: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.kpi {
  display: flex;
  min-width: 0;
  min-height: clamp(80px, 13vh, 120px);
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-card);
  color: var(--uruk-ink);
  text-decoration: none;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.kpi[href]:hover {
  background: var(--uruk-fill);
}
.kpi:focus-visible {
  border-color: var(--uruk-ink);
  outline: none;
}
.kpi[aria-disabled=true] {
  border-color: var(--uruk-hair);
  color: var(--uruk-ink-2);
}

.kpi__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--uruk-ink-2);
  font-family: var(--uruk-font-label);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kpi__figure {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.kpi__value {
  font-size: 32px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.kpi__under {
  color: var(--uruk-ink-2);
  font-size: 12px;
  font-weight: 700;
}

.section-tabs {
  display: flex;
  width: fit-content;
  max-width: 100%;
  flex: none;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  border-radius: var(--uruk-radius-card);
  background: var(--uruk-fill);
}
.section-tabs a {
  position: relative;
  padding: 9px 21px;
  border: 1px solid transparent;
  border-radius: var(--uruk-radius-control);
  color: var(--uruk-ink-2);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out;
}
.section-tabs a:hover {
  color: var(--uruk-ink);
}
.section-tabs a[aria-current=page] {
  border-color: var(--uruk-line);
  background: var(--uruk-paper);
  color: var(--uruk-ink);
}

.section-tabs__alert {
  position: absolute;
  top: 7px;
  right: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--uruk-warning);
}

@media (max-width: 760px) {
  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .kpi {
    padding: 14px 16px;
  }
  .kpi__value {
    font-size: 26px;
  }
  .panel {
    padding: 16px;
  }
}
@media (max-width: 640px) {
  .section-tabs {
    gap: 2px;
  }
  .section-tabs a {
    padding: 10px 12px;
    font-size: 13px;
  }
  .section-tabs__alert {
    top: 5px;
    right: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kpi,
  .section-tabs a {
    transition: none;
  }
}
.table-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-card);
  background: var(--uruk-paper);
}

.table-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--uruk-line) transparent;
}

.table {
  display: block;
  width: 100%;
  min-width: 0;
  font-size: 12px;
}

.table__head,
.table__row {
  display: grid;
  grid-template-columns: var(--table-columns);
  align-items: center;
}

.table__head {
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 1px solid var(--uruk-hair);
  background: var(--uruk-paper);
}

.table__head > * {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 14px 8px;
  color: var(--uruk-ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.table__row {
  min-height: 68px;
  border-bottom: 1px solid var(--uruk-hair);
  content-visibility: auto;
  contain-intrinsic-block-size: auto 68px;
  cursor: pointer;
}

.table__row:hover,
.table__row:focus-visible {
  background: var(--uruk-fill);
}

.table__row[data-selected=true] {
  background: var(--uruk-hair);
}

.table__row > * {
  min-width: 0;
  padding: 12px 8px;
  overflow-wrap: anywhere;
}

.table__row > *:last-child {
  display: flex;
  justify-content: flex-end;
  padding-right: var(--uruk-edge-inset);
}

.table__empty {
  padding: 48px 20px;
  color: var(--uruk-ink-2);
  font-size: 13px;
  text-align: center;
}

.sort-heading {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: -4px -6px;
  padding: 4px 6px;
  border-radius: var(--uruk-radius-small);
  color: inherit;
  font: inherit;
}

.sort-heading .icon {
  opacity: 0.4;
}

.sort-heading[aria-sort=ascending],
.sort-heading[aria-sort=descending] {
  background: var(--uruk-fill);
  color: var(--uruk-ink);
}

.sort-heading[aria-sort=ascending] .icon,
.sort-heading[aria-sort=descending] .icon {
  opacity: 1;
}

.today-page {
  display: flex;
  flex-direction: column;
}

.today__state {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 240px;
}

.today {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: clamp(8px, 1.5vh, 16px);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--uruk-line) transparent;
}

.today-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
  color: var(--uruk-ink-2);
  font-size: 0.68rem;
  font-weight: 700;
  list-style: none;
}
.today-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.today-legend li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.today-legend [data-series=sent]::before {
  background: #2d6cf5;
}
.today-legend [data-series=replies]::before {
  background: #8d4edf;
}
.today-legend [data-series=positive]::before {
  background: #65b44e;
}

.today-alerts {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.today-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--uruk-warning);
  border-radius: var(--uruk-radius-control);
  color: var(--uruk-warning-text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 150ms ease-out;
}
.today-alert:hover, .today-alert:focus-visible {
  background: var(--uruk-fill);
  outline: none;
}
.today-alert strong {
  font-variant-numeric: tabular-nums;
}

.today-day__rows {
  display: grid;
  gap: 4px;
}

.today-day__row {
  display: grid;
  grid-template-columns: minmax(72px, 30%) minmax(0, 1fr) auto 14px;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  padding: 0 4px;
  border-radius: var(--uruk-radius-small);
  color: var(--uruk-ink);
  font-size: 12px;
  text-decoration: none;
}
.today-day__row[href]:hover {
  background: var(--uruk-fill);
}
.today-day__row:focus-visible {
  outline: 1px solid var(--uruk-ink);
}
.today-day__row strong {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.today-day__track {
  height: 10px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--uruk-fill);
}
.today-day__track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2d6cf5;
}
.today-day__track i[data-tone=purple] {
  background: #8d4edf;
}
.today-day__track i[data-tone=green] {
  background: #65b44e;
}

.today__meetings {
  display: grid;
  min-height: 0;
  overflow-y: auto;
  border-top: 1px solid var(--uruk-hair);
  list-style: none;
}

.today-meeting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 0 8px 4px;
  border-bottom: 1px solid var(--uruk-hair);
}

.today-meeting__lead {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--uruk-ink);
  text-decoration: none;
}
.today-meeting__lead:hover .today-meeting__company {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.today-meeting__lead:focus-visible {
  outline: 1px solid var(--uruk-ink);
}

.today-meeting__time {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.today-meeting__text {
  display: grid;
  min-width: 0;
}

.today-meeting__company,
.today-meeting__details {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-meeting__company {
  font-size: 12px;
  font-weight: 700;
}

.today-meeting__details {
  color: var(--uruk-ink-2);
  font-size: 10px;
  font-weight: 500;
}

.today-meeting__meet {
  text-decoration: none;
}

.today-stage__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.today-stage__dot[data-tone=green] {
  background: var(--uruk-green);
}

.today-stage__dot[data-tone=purple] {
  background: var(--uruk-purple);
}

.today-stage__dot[data-tone=blue] {
  background: var(--uruk-blue);
}

.today__row {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
}

.today__row:nth-last-child(2) {
  flex: 1 1 0;
  min-height: 300px;
}

.today-day {
  min-height: 0;
}

.today-trend {
  display: flex;
  flex-direction: column;
}

.today-trend__readout {
  font-variant-numeric: tabular-nums;
}

.today-trend__plot {
  display: grid;
  flex: 1;
  grid-template-rows: 3fr 2fr auto;
  gap: 14px;
  min-height: 180px;
}

.today-trend__band {
  position: relative;
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  align-items: stretch;
  gap: 3px;
  min-height: 0;
  padding-top: 16px;
  border-bottom: 1px dashed var(--uruk-line);
}

.today-trend__max {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--uruk-ink-2);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.today-trend__bar {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  border-radius: 4px 4px 0 0;
}
.today-trend__bar[data-pointed=true] {
  background: var(--uruk-fill);
}
.today-trend__bar i,
.today-trend__bar b {
  display: block;
  width: 100%;
  border-radius: 3px 3px 0 0;
}
.today-trend__bar b {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #65b44e;
}

.today-trend__band[data-series=sent] i {
  background: #2d6cf5;
}

.today-trend__band[data-series=replies] i {
  background: #8d4edf;
}

.today-trend__ticks {
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  gap: 3px;
  color: var(--uruk-ink-2);
  font-size: 10px;
}
.today-trend__ticks span {
  display: flex;
  justify-content: center;
  white-space: nowrap;
}

.today-tabs {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  gap: 4px;
  margin-top: 16px;
  padding: 4px;
  border-radius: var(--uruk-radius-card);
  background: var(--uruk-fill);
}

.today-tabs__tab {
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: var(--uruk-radius-control);
  color: var(--uruk-ink-2);
  font-size: 13px;
  font-weight: 700;
  transition: color 150ms ease-out, border-color 150ms ease-out, background-color 150ms ease-out;
}
.today-tabs__tab:hover {
  color: var(--uruk-ink);
}
.today-tabs__tab:focus-visible {
  border-color: var(--uruk-ink);
  outline: none;
}
.today-tabs__tab[aria-selected=true] {
  border-color: var(--uruk-line);
  background: var(--uruk-paper);
  color: var(--uruk-ink);
}

.today-rates {
  min-height: 0;
}

.today-rates__rows {
  display: grid;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
}

.today-rate {
  display: grid;
  grid-template-columns: minmax(64px, 32%) minmax(0, 1fr) 38px 38px 14px;
  align-items: center;
  gap: clamp(6px, 1vw, 12px);
  color: var(--uruk-ink);
  font-size: 12px;
  text-decoration: none;
}
.today-rate[href]:hover .today-rate__name {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.today-rate:not([href]) > .icon {
  visibility: hidden;
}
.today-rate:focus-visible {
  outline: 1px solid var(--uruk-ink);
  outline-offset: 4px;
  border-radius: var(--uruk-radius-small);
}
.today-rate strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.today-rate__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-rate__track {
  position: relative;
  height: 10px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--uruk-fill);
}
.today-rate__track i,
.today-rate__track b {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
}
.today-rate__track i {
  background: #8d4edf;
}
.today-rate__track b {
  background: #65b44e;
}

.today-rate__positive {
  color: var(--uruk-ink-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.today-stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.today-stage {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-control);
  color: var(--uruk-ink);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.today-stage[href]:hover {
  background: var(--uruk-fill);
}
.today-stage:focus-visible {
  border-color: var(--uruk-ink);
  outline: none;
}
.today-stage strong {
  grid-row: 2;
  grid-column: 2;
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.today-stage > .icon {
  grid-row: 2;
  grid-column: 3;
}

.today-day__row[aria-disabled=true] > .icon,
.today-stage[aria-disabled=true] > .icon {
  opacity: 0.4;
}

@media (max-width: 1100px) {
  .today__row,
  .today__row:nth-last-child(2) {
    flex: none;
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .today-stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .today-trend__plot {
    min-height: 200px;
  }
  .today-trend__band,
  .today-trend__ticks {
    gap: 1px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .today-alert,
  .today-stage,
  .today-tabs__tab {
    transition: none;
  }
}
.leads {
  flex: 1;
}

.leads__toolbar {
  display: flex;
  min-height: var(--uruk-control-height);
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.leads-compact {
  min-height: 36px;
  padding-inline: 1rem;
  font-size: 14px;
}

.leads-filter {
  position: relative;
  flex: none;
}
.leads-filter > .icon-button {
  position: relative;
}

.leads-filter__badge {
  position: absolute;
  top: -4px;
  right: -5px;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--uruk-ink);
  color: var(--uruk-paper);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.leads-filter__panel {
  position: fixed;
  z-index: 20;
  width: min(620px, 100vw - 16px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-card);
  background: var(--uruk-paper);
  color: var(--uruk-ink);
}
.leads-filter__panel[open] {
  display: flex;
  flex-direction: column;
}
.leads-filter__panel:not([open]) {
  display: none;
}

.leads-filter__header,
.leads-filter__footer {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
}

.leads-filter__header {
  border-bottom: 1px solid var(--uruk-line);
}

.leads-filter__footer {
  border-top: 1px solid var(--uruk-line);
}

.leads-filter__title {
  font-size: 16px;
  font-weight: 700;
}
.leads-filter__title:focus {
  outline: none;
}

.leads-filter__close {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: var(--uruk-radius-small);
  color: var(--uruk-ink);
}
.leads-filter__close:hover {
  background: var(--uruk-fill);
}

.leads-filter__body {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.leads-filter__body select {
  width: 100%;
  font-size: 13px;
}

@media (max-width: 540px) {
  .leads-filter__body {
    grid-template-columns: minmax(0, 1fr);
  }
}
.leads-bulk {
  --uruk-line: color-mix(in srgb, var(--uruk-paper) 32%, transparent);
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px 16px;
  border-radius: var(--uruk-radius-card);
  background: var(--uruk-ink);
  color: var(--uruk-paper);
  font-size: 13px;
}

.leads-bulk__side {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.leads-bulk__side select {
  min-height: 40px;
  border-color: var(--uruk-line);
  background: transparent;
  color: var(--uruk-paper);
  font-size: 12px;
  font-weight: 700;
}
.leads-bulk__side option {
  background: var(--uruk-paper);
  color: var(--uruk-ink);
}

.leads-bulk__link {
  color: inherit;
  font-size: 12px;
  font-weight: 700;
}
.leads-bulk__link:hover {
  text-decoration: underline;
}

.leads-bulk__clear {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: var(--uruk-radius-small);
  color: inherit;
}
.leads-bulk__clear:hover {
  background: color-mix(in srgb, var(--uruk-paper) 14%, transparent);
}

.leads-bulk__action {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-control);
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 150ms ease-out;
}
.leads-bulk__action:hover {
  background: color-mix(in srgb, var(--uruk-paper) 14%, transparent);
}

.leads__card {
  container: leads/inline-size;
}

.leads-table {
  --table-columns: 44px minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.9fr) 128px 104px 56px;
}

.leads__compact {
  display: none;
}

.leads__state {
  display: flex;
  min-height: 240px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 20px;
}

.leads__failed {
  color: var(--uruk-warning-text);
  font-size: 13px;
  font-weight: 700;
}

.leads-row__select {
  display: flex;
  align-items: center;
  justify-content: center;
}

.leads-row__primary {
  display: flex;
  align-items: center;
  gap: 10px;
}
.leads-row__primary strong {
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
}

.leads-row__two {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.leads-row__two strong {
  font-weight: 700;
}
.leads-row__two small {
  color: var(--uruk-ink-2);
  font-size: 10px;
}

.leads-row .chip {
  font-size: 11px;
}

.leads-row__date {
  color: var(--uruk-ink-2);
  font-variant-numeric: tabular-nums;
}

.leads-row__label {
  display: none;
}

.leads-row__menu .icon-button {
  width: 44px;
  height: 44px;
}

@container leads (max-width: 1099px) {
  .leads__compact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--uruk-hair);
    font-size: 12px;
    font-weight: 700;
  }
  .leads__compact label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .leads__compact select {
    min-height: 36px;
    font-size: 12px;
  }
  .leads-table .table__head {
    display: none;
  }
  .leads-table {
    padding: 12px;
  }
  .leads-row.table__row {
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    margin-bottom: 12px;
    padding: 16px 56px 16px 16px;
    border: 1px solid var(--uruk-line);
    border-radius: var(--uruk-radius-control);
    contain-intrinsic-block-size: auto 220px;
  }
  .leads-row.table__row > * {
    padding: 0;
  }
  .leads-row__label {
    display: block;
    color: var(--uruk-ink-2);
    font-size: 11px;
    font-weight: 700;
  }
  .leads-row__select {
    position: absolute;
    top: 16px;
    right: 16px;
  }
  .leads-row__primary {
    grid-column: 1/-1;
  }
  .leads-row__menu.leads-row__menu {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 0;
  }
}
@container leads (max-width: 699px) {
  .leads-row.table__row {
    grid-template-columns: minmax(0, 1fr);
  }
}
.lead-record {
  display: grid;
  min-height: 100%;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 24px;
}

.lead-record__summary {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-right: 24px;
  border-right: 1px solid var(--uruk-line);
}

.lead-record__who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.lead-record__who strong {
  font-size: 17px;
  font-weight: 700;
}

.lead-record__facts {
  display: grid;
  font-size: 12px;
  line-height: 1.6;
}
.lead-record__facts dt {
  color: var(--uruk-ink-2);
  font-size: 10px;
  font-weight: 500;
}
.lead-record__facts dd {
  min-width: 0;
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}

.lead-record__history {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.detail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  border-bottom: 1px solid var(--uruk-hair);
}

.detail-tabs__tab {
  padding: 10px 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--uruk-ink-2);
  font-size: 12px;
  font-weight: 700;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}
.detail-tabs__tab[aria-selected=true] {
  border-bottom-color: var(--uruk-ink);
  color: var(--uruk-ink);
}

.lead-record__nothing {
  padding: 48px 20px;
  color: var(--uruk-ink-2);
  font-size: 13px;
  text-align: center;
}

.timeline {
  display: flex;
  flex-direction: column;
}

.timeline__item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--uruk-hair);
}

.timeline__icon {
  display: flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--uruk-fill);
  color: var(--uruk-ink-2);
}

.timeline__main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.timeline__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.timeline__kind {
  color: var(--uruk-ink-2);
  font-size: 11px;
  font-weight: 700;
}

.timeline__title {
  min-width: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.timeline__head .chip {
  min-height: 20px;
  font-size: 10px;
}

.timeline__at {
  margin-left: auto;
  color: var(--uruk-ink-2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.timeline__detail {
  display: -webkit-box;
  overflow: hidden;
  color: var(--uruk-ink-2);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.lead-record__steps,
.lead-record__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lead-record__steps .icon-button {
  width: 40px;
  height: 40px;
}

.lead-record__assign select {
  min-height: 36px;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 760px) {
  .lead-record {
    grid-template-columns: minmax(0, 1fr);
  }
  .lead-record__summary {
    padding: 0 0 18px;
    border-right: 0;
    border-bottom: 1px solid var(--uruk-line);
  }
  .timeline__at {
    width: 100%;
    margin-left: 0;
  }
}
.campaigns {
  flex: 1;
}

.campaigns__toolbar {
  display: flex;
  min-height: var(--uruk-control-height);
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.campaigns__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.campaigns .quick-filter {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-control);
  background: var(--uruk-paper);
  color: var(--uruk-ink);
  font-size: 12px;
  font-weight: 700;
  transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}
.campaigns .quick-filter:hover {
  background: var(--uruk-fill);
}
.campaigns .quick-filter:focus-visible {
  border-color: var(--uruk-ink);
}
.campaigns .quick-filter[aria-pressed=true] {
  border-color: var(--uruk-ink);
  background: var(--uruk-ink);
  color: var(--uruk-paper);
}

.campaigns__card {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  container: campaigns/inline-size;
}

.campaigns__scroll {
  min-height: 0;
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--uruk-line) transparent;
  scrollbar-width: thin;
}

.campaigns__state {
  display: flex;
  min-height: 240px;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 20px;
}

.campaigns__failed {
  color: var(--uruk-warning-text);
  font-size: 13px;
  font-weight: 700;
}

.campaign-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px calc(var(--uruk-edge-inset) - 1px) 16px 24px;
  border-bottom: 1px solid var(--uruk-hair);
  transition: background-color 150ms ease-out;
}
.campaign-row:last-child {
  border-bottom: 0;
}
.campaign-row:hover {
  background: var(--uruk-fill);
}

.campaign-row__open {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 20px;
  padding: 8px 0;
  color: inherit;
  text-decoration: none;
}
.campaign-row__open:focus-visible .campaign-row__title strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.campaign-row__icon {
  display: flex;
  width: 44px;
  height: 44px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--uruk-radius-control);
  background: var(--uruk-fill);
  color: var(--uruk-ink);
}

.campaign-row__title {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 6px;
}
.campaign-row__title strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.campaign-row__title small {
  color: var(--uruk-ink-2);
  font-size: 11px;
}

.campaign-row__count {
  display: grid;
  min-width: 100px;
  gap: 5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.campaign-row__count strong {
  font-size: 14px;
  font-weight: 700;
}
.campaign-row__count small {
  color: var(--uruk-ink-2);
  font-size: 11px;
}

.campaign-row__bar {
  width: 120px;
  height: 5px;
  flex: none;
  overflow: hidden;
  border-radius: 999px;
  background: var(--uruk-fill);
}
.campaign-row__bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--uruk-green);
}

.campaign-row__actions,
.campaign-bar__actions {
  display: flex;
  min-width: var(--uruk-control-height);
  flex: none;
  justify-content: flex-end;
  gap: 8px;
}

.campaign-bar {
  flex-wrap: nowrap;
  gap: 12px;
}

.campaign-bar__title {
  flex: 1;
}

.campaign-bar__actions {
  margin-left: auto;
}

.campaign-detail {
  overflow: auto;
}

.campaigns .detail-tabs {
  display: flex;
  flex: none;
  align-items: center;
  gap: 20px;
  padding: 0 26px;
  overflow-x: auto;
  border-bottom: 1px solid var(--uruk-line);
  scrollbar-width: none;
}
.campaigns .detail-tabs button {
  flex: none;
  padding: 16px 0;
  border-bottom: 2px solid transparent;
  color: var(--uruk-ink-2);
  font-size: 12px;
  font-weight: 700;
  transition: color 150ms ease-out;
}
.campaigns .detail-tabs button:hover {
  color: var(--uruk-ink);
}
.campaigns .detail-tabs button[aria-current=page] {
  border-color: var(--uruk-ink);
  color: var(--uruk-ink);
}

.campaign-detail__body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.campaign-detail__footer {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 24px;
  border-top: 1px solid var(--uruk-line);
}

.campaigns .button--compact {
  min-width: 6rem;
  min-height: 36px;
  padding-inline: 1rem;
  font-size: 14px;
}
.campaigns .button--compact:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.review {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.review__recipients {
  min-height: 0;
  padding: 22px;
  border-right: 1px solid var(--uruk-line);
}

.review__list {
  max-height: 430px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.review__list button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  border-radius: var(--uruk-radius-small);
  text-align: left;
  transition: background-color 150ms ease-out;
}
.review__list button:hover {
  background: var(--uruk-fill);
}
.review__list button[aria-pressed=true] {
  background: var(--uruk-hair);
}
.review__list button > span:first-child {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 5px;
}
.review__list strong,
.review__list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review__list strong {
  font-size: 11px;
  font-weight: 700;
}
.review__list small {
  color: var(--uruk-ink-2);
  font-size: 10px;
}

.campaigns .chip--dense {
  min-height: 20px;
  padding: 2px 8px 2px 6px;
  font-size: 10px;
}

.review__preview {
  position: relative;
  min-width: 0;
  max-height: 550px;
  padding: 28px 32px;
  overflow-y: auto;
}
.review__preview dl {
  display: grid;
  gap: 8px;
  margin-bottom: 30px;
  font-size: 11px;
}
.review__preview dl > div {
  display: flex;
  gap: 12px;
}
.review__preview dt {
  width: 50px;
  flex: none;
  color: var(--uruk-ink-2);
}
.review__preview dd {
  overflow-wrap: anywhere;
}
.review__preview h3 {
  margin-bottom: 22px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.review__text {
  font-size: 13px;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.review__reason {
  margin: -14px 0 22px;
  padding: 10px 14px;
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-control);
  color: var(--uruk-ink-2);
  font-size: 12px;
  font-weight: 700;
}

.review__actions {
  display: flex;
  float: right;
  gap: 4px;
  margin: -8px -12px 0 12px;
}

.campaign-edit {
  display: grid;
  gap: 20px;
}
.campaign-edit input,
.campaign-edit textarea {
  width: 100%;
  min-width: 0;
  font-size: 13px;
}
.campaign-edit input[readonly] {
  background: var(--uruk-fill);
}

.campaign-edit__error,
.campaigns .field__error {
  color: var(--uruk-warning-text);
  font-size: 12px;
  font-weight: 700;
}

.conditions {
  display: grid;
  gap: 24px;
  padding: clamp(20px, 4vw, 36px);
}

.conditions__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 32px;
}

.conditions__field {
  gap: 8px;
  font-size: 13px;
}
.conditions__field input:not([type=checkbox]) {
  width: 100%;
  min-width: 0;
  font-size: 14px;
}
.conditions__field input:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.conditions__sources {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  grid-row: span 2;
}
.conditions__sources legend {
  margin-bottom: 8px;
  padding: 0;
}

.conditions__check {
  display: flex;
  min-height: 36px;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.conditions__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.conditions__saved {
  padding: 10px 14px;
  border: 1px solid var(--uruk-green);
  border-radius: var(--uruk-radius-control);
  font-size: 13px;
  font-weight: 700;
}

.ab-tests {
  display: grid;
  gap: 28px;
  padding: clamp(20px, 4vw, 36px);
}

.ab-tests__running,
.ab-tests__ended {
  display: grid;
  gap: 14px;
}

.ab-tests__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.ab-tests__text {
  min-width: 160px;
  overflow-wrap: anywhere;
}

.ab-tests__form {
  padding: 0;
}

@container campaigns (max-width: 760px) {
  .review {
    grid-template-columns: minmax(0, 1fr);
  }
  .review__recipients {
    padding: 14px;
    border-right: 0;
    border-bottom: 1px solid var(--uruk-line);
  }
  .review__list {
    max-height: 180px;
  }
  .review__preview {
    max-height: none;
    padding: 20px;
  }
  .conditions__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .conditions__sources {
    grid-row: auto;
  }
  .campaigns .detail-tabs {
    padding: 0 18px;
  }
}
@media (max-width: 760px) {
  .campaign-row {
    gap: 10px;
    padding-left: 14px;
  }
  .campaign-row__open {
    flex-wrap: wrap;
    gap: 10px 14px;
  }
  .campaign-row__title {
    flex-basis: calc(100% - 58px);
  }
  .campaign-row__count {
    min-width: 0;
    text-align: left;
  }
  .campaign-row__bar {
    width: 80px;
  }
  .campaigns__toolbar .search-box {
    flex: 1 1 100%;
  }
  .campaigns__toolbar .search-box input {
    width: 100%;
  }
  .campaign-bar {
    flex-wrap: wrap;
  }
  .campaign-bar__title {
    flex-basis: calc(100% - 120px);
  }
}
.analytics-page {
  display: flex;
  flex-direction: column;
}

.analytics__state {
  display: flex;
  min-height: 240px;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.analytics {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.analytics__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.analytics__controls .section-tabs {
  margin-bottom: 0;
}

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

.analytics-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--uruk-ink-2);
  font-size: 11px;
  font-weight: 700;
  list-style: none;
}
.analytics-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.analytics-legend li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.analytics-legend [data-series=booked]::before {
  background: var(--uruk-green);
}
.analytics-legend [data-series=positive]::before,
.analytics-legend [data-series=sent]::before {
  background: var(--uruk-blue);
}
.analytics-legend [data-series=plan]::before {
  width: 14px;
  height: 0;
  border-top: 2px solid var(--uruk-ink);
  border-radius: 0;
}
.analytics-legend [data-series=failed]::before {
  background: var(--uruk-warning);
}
.analytics-legend [data-series=goal]::before {
  width: 14px;
  height: 0;
  border-top: 2px dashed var(--uruk-ink);
  border-radius: 0;
}

.analytics-weeks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.analytics-weeks__readout {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.analytics-weeks__band {
  --label-room: 16px;
  position: relative;
  display: flex;
  height: 150px;
  gap: 2px;
  padding-top: var(--label-room);
  border-bottom: 1px solid var(--uruk-line);
}
.analytics-weeks__band[data-series=positive] {
  height: 90px;
}

.analytics-weeks__column {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  align-items: flex-end;
  justify-content: center;
  border-radius: 4px 4px 0 0;
}
.analytics-weeks__column[data-pointed=true] {
  background: var(--uruk-fill);
}
.analytics-weeks__column i {
  position: relative;
  display: block;
  width: 100%;
  max-width: 24px;
  min-height: 0;
  border-radius: 4px 4px 0 0;
  background: var(--uruk-green);
}
.analytics-weeks__column b {
  position: absolute;
  bottom: 100%;
  left: 50%;
  padding-bottom: 2px;
  color: var(--uruk-ink);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  transform: translateX(-50%);
}

.analytics-weeks__band[data-series=positive] i {
  background: var(--uruk-blue);
}

.analytics-weeks__goal {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
  border-top: 2px dashed var(--uruk-ink);
  pointer-events: none;
}

.analytics-weeks__ticks,
.technical-hours__ticks {
  display: flex;
  gap: 2px;
  color: var(--uruk-ink-2);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.analytics-weeks__ticks span,
.technical-hours__ticks span {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  justify-content: center;
  white-space: nowrap;
}

.analytics-stages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}

.analytics-stage {
  display: grid;
  grid-template-columns: minmax(96px, 1.1fr) minmax(0, 2fr) auto 58px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.analytics-stage > strong {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.analytics-stage > span:last-child {
  color: var(--uruk-ink-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.analytics-track {
  height: 10px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--uruk-fill);
}
.analytics-track i {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 8px;
  background: var(--uruk-blue);
}
.analytics-track [data-tone=green] {
  background: var(--uruk-green);
}
.analytics-track [data-tone=purple] {
  background: var(--uruk-purple);
}
.analytics-track [data-tone=grey] {
  background: var(--uruk-ink-2);
}
.analytics-track [data-tone=warning] {
  background: var(--uruk-warning);
}

.analytics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.analytics-table th,
.analytics-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--uruk-hair);
  text-align: left;
  vertical-align: middle;
}
.analytics-table thead th {
  padding-top: 0;
  color: var(--uruk-ink-2);
  font-size: 12px;
  font-weight: 700;
}
.analytics-table tbody th {
  font-weight: 700;
}
.analytics-table tbody tr:last-child > * {
  border-bottom: 0;
}
.analytics-table .chip {
  margin-left: 8px;
}
.analytics-table [data-tone=warning] {
  color: var(--uruk-warning-text);
}

.analytics-count {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.analytics-table .analytics-count {
  text-align: right;
}

.analytics-rate {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.analytics-table .analytics-rate {
  text-align: right;
}
.analytics-rate strong {
  font-weight: 700;
}
.analytics-rate span {
  margin-left: 6px;
  color: var(--uruk-ink-2);
  font-size: 12px;
}
.analytics-rate[data-small=true] strong {
  color: var(--uruk-ink-2);
  font-weight: 400;
}

.analytics-none {
  color: var(--uruk-ink-2);
  font-size: 13px;
}

.analytics-test {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.analytics-test + .analytics-test {
  padding-top: 16px;
  border-top: 1px solid var(--uruk-hair);
}
.analytics-test tr[data-winner=true] .analytics-arm {
  border-color: var(--uruk-green);
  background: var(--uruk-green);
  color: #000;
}

.analytics-test__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.analytics-test__heading h3 {
  margin-right: 4px;
  font-size: 14px;
  font-weight: 700;
}
.analytics-test__heading .text-button {
  margin-left: auto;
}

.analytics-arm {
  display: inline-grid;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  place-items: center;
  border: 1px solid var(--uruk-line);
  border-radius: 6px;
  font-size: 12px;
}

.analytics-arm__text {
  font-weight: 400;
}

.chip[data-tone=blue]::before {
  border-color: var(--uruk-blue);
  background: var(--uruk-blue);
}

.chip[data-tone=green]::before {
  border-color: var(--uruk-green);
  background: var(--uruk-green);
}

.chip[data-tone=grey]::before {
  border-color: var(--uruk-ink-2);
  background: var(--uruk-ink-2);
}

.technical__subheading {
  color: var(--uruk-ink-2);
  font-size: 12px;
  font-weight: 700;
}

.technical__value {
  font-size: 12px;
  white-space: nowrap;
}

.technical-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 14px;
}

.technical-hours {
  display: block;
  width: 100%;
  height: 140px;
  border-bottom: 1px solid var(--uruk-line);
}

.technical-hours__hit {
  fill: transparent;
}

.technical-hours g:hover .technical-hours__hit {
  fill: var(--uruk-fill);
}

.technical-hours__sent {
  fill: var(--uruk-blue);
}

.technical-hours__plan {
  fill: var(--uruk-ink);
}

.technical-hours__failed {
  fill: var(--uruk-warning);
}

.technical-track {
  display: block;
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--uruk-fill);
}
.technical-track rect {
  fill: var(--uruk-blue);
}
.technical-track rect[data-tone=warning] {
  fill: var(--uruk-warning);
}

.technical-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px 8px;
}

.technical-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.technical-stat span {
  color: var(--uruk-ink-2);
  font-size: 12px;
  font-weight: 700;
}
.technical-stat strong {
  font-size: 22px;
  font-weight: 800;
}

.technical-list {
  display: flex;
  flex-direction: column;
  list-style: none;
}
.technical-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--uruk-hair);
  font-size: 13px;
}
.technical-list li:last-child {
  border-bottom: 0;
}
.technical-list strong {
  font-variant-numeric: tabular-nums;
}
.technical-list[data-tone=warning] strong {
  color: var(--uruk-warning-text);
}

@media (max-width: 1100px) {
  .analytics__row {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .analytics-stage {
    grid-template-columns: minmax(80px, 1fr) minmax(0, 1fr) auto 52px;
    gap: 8px;
  }
  .analytics-table {
    display: block;
    overflow-x: auto;
    font-size: 12px;
  }
  .analytics-table th,
  .analytics-table td {
    padding: 8px 4px;
  }
  .analytics-rate span {
    display: none;
  }
}
.industries {
  flex: none;
  margin-bottom: 16px;
}

.industry-list {
  display: flex;
  max-height: 40dvh;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.industry-row {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(140px, 1fr) auto minmax(0, 2fr) auto;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--uruk-hair);
}
.industry-row:last-child {
  border-bottom: 0;
}
.industry-row .quick-filter:disabled {
  color: var(--uruk-ink-2);
  cursor: default;
}

.industry-row__title {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.industry-row__title strong {
  font-size: 15px;
  font-weight: 700;
}
.industry-row__title small {
  color: var(--uruk-ink-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.industry-row__weeks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.template__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.template__field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-control);
  background: var(--uruk-paper);
  color: var(--uruk-ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}
.template__field textarea:focus-visible {
  border-color: var(--uruk-ink);
  outline: none;
}

.template__facts {
  color: var(--uruk-ink-2);
  font-size: 12px;
}

.template__problems {
  padding: 12px 14px;
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-control);
  font-size: 13px;
}
.template__problems ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

@media (max-width: 760px) {
  .industry-row {
    grid-template-columns: 1fr auto;
  }
  .industry-row__weeks {
    grid-column: 1/-1;
  }
}
.template__problems--warn {
  border-style: dashed;
  color: var(--uruk-ink-2);
}

.industries__new {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.health-page {
  display: flex;
  flex-direction: column;
}

.health__state {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 240px;
}

.health {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  align-items: start;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--uruk-line) transparent;
}
.health[hidden] {
  display: none;
}

.health-card--wide {
  grid-column: span 2;
}

.health-card--full {
  grid-column: 1/-1;
}

.health-count {
  color: var(--uruk-ink-2);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.health-reason,
.health-muted {
  color: var(--uruk-ink-2);
  font-size: 12px;
}

.health-under {
  display: block;
  margin-top: 4px;
  color: var(--uruk-ink-2);
  font-size: 11px;
  font-weight: 500;
}

.health-error {
  color: var(--uruk-warning-text);
}

.health-none {
  padding: 12px 0 4px;
  color: var(--uruk-ink-2);
  font-size: 13px;
}

.health-subtitle {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
}

.health-figures {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.health-figure {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-control);
}

.health-figure__label {
  overflow: hidden;
  color: var(--uruk-ink-2);
  font-family: var(--uruk-font-label);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.health-figure__value {
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.health-figure__under {
  color: var(--uruk-ink-2);
  font-size: 11px;
}

.health-scroll {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--uruk-line) transparent;
}

.health-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.health-table th,
.health-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--uruk-hair);
  text-align: left;
  vertical-align: middle;
}
.health-table thead th {
  color: var(--uruk-ink-2);
  font-weight: 700;
  white-space: nowrap;
}
.health-table tbody th {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.health-table tbody tr:last-child > * {
  border-bottom: 0;
}
.health-table th:first-child,
.health-table td:first-child {
  padding-left: 0;
}
.health-table .chip {
  min-height: 20px;
  padding: 2px 8px 2px 6px;
  font-size: 11px;
}

.health-number {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.health-table .health-number {
  text-align: right;
}

.health-action {
  width: 44px;
  padding-right: 0;
  text-align: right;
}
.health-table .health-action {
  padding-right: 0;
}

.health-row-action {
  width: 40px;
  height: 40px;
}

.health-day {
  white-space: nowrap;
}

.health-code {
  max-width: 420px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.health-ip {
  margin-right: 8px;
  font-variant-numeric: tabular-nums;
}

.health-facts {
  display: flex;
  flex-direction: column;
  font-size: 12px;
}
.health-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--uruk-hair);
}
.health-facts > div:last-child {
  border-bottom: 0;
}
.health-facts dt {
  color: var(--uruk-ink-2);
  font-weight: 700;
}
.health-facts dd {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.health-facts dd[data-tone=failed] {
  color: var(--uruk-warning-text);
}

.health-facts__head {
  padding-bottom: 4px;
  color: var(--uruk-ink-2);
}
.health-facts__head dd {
  color: var(--uruk-ink-2);
  font-size: 10px;
}

.health-facts--row {
  flex-direction: row;
  gap: 24px;
}
.health-facts--row > div {
  flex-direction: column;
  gap: 2px;
  padding: 0;
  border: 0;
}
.health-facts--row dd {
  font-size: 15px;
  text-align: left;
}

.health-events {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  list-style: none;
}
.health-events li {
  display: grid;
  grid-template-columns: 88px 150px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--uruk-hair);
}
.health-events li:last-child {
  border-bottom: 0;
}
.health-events time {
  color: var(--uruk-ink-2);
  font-variant-numeric: tabular-nums;
}
.health-events span {
  min-width: 0;
  color: var(--uruk-ink-2);
  overflow-wrap: anywhere;
}

.panel:not(.health-card--wide, .health-card--full) .health-events li {
  grid-template-columns: 70px minmax(0, 1fr);
}
.panel:not(.health-card--wide, .health-card--full) .health-events li span {
  grid-column: 1/-1;
}

.health-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--uruk-ink-2);
  font-size: 0.68rem;
  font-weight: 700;
  list-style: none;
}
.health-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.health-legend li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.health-legend li[data-series=sent]::before {
  background: #2d6cf5;
}
.health-legend li[data-series=bounced]::before {
  background: #f07843;
}
.health-legend li[data-series=complained]::before {
  background: #d760c8;
}
.health-legend li[data-series=limited]::before {
  background: #f2b62e;
}

.health-trend__readout {
  min-width: 0;
  color: var(--uruk-ink-2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.health-trend {
  display: grid;
  grid-template-rows: 3fr 2fr auto;
  gap: 14px;
  min-height: 220px;
}

.health-trend__band {
  position: relative;
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  align-items: stretch;
  gap: 3px;
  min-height: 0;
  padding-top: 16px;
  border-bottom: 1px dashed var(--uruk-line);
}

.health-trend__max {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--uruk-ink-2);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.health-trend__bar {
  display: flex;
  min-width: 0;
  flex-direction: column-reverse;
  border-radius: 4px 4px 0 0;
}
.health-trend__bar[data-pointed=true] {
  background: var(--uruk-fill);
}
.health-trend__bar i,
.health-trend__bar b {
  display: block;
  width: 100%;
  flex: none;
}
.health-trend__bar i {
  border-radius: 3px 3px 0 0;
  background: #2d6cf5;
}
.health-trend__bar b[data-series=bounced] {
  background: #f07843;
}
.health-trend__bar b[data-series=complained] {
  background: #d760c8;
}
.health-trend__bar b[data-series=limited] {
  background: #f2b62e;
}

.health-trend__ticks {
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  gap: 3px;
  color: var(--uruk-ink-2);
  font-size: 10px;
}
.health-trend__ticks span {
  overflow: visible;
  white-space: nowrap;
}

.health-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  display: flex;
  max-width: min(380px, 100vw - 32px);
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 14px;
  border: 1px solid var(--uruk-warning);
  border-radius: var(--uruk-radius-control);
  background: var(--uruk-paper);
  color: var(--uruk-warning-text);
  font-size: 13px;
  font-weight: 700;
}
.health-toast > span {
  flex: 1;
}

.health-toast__button {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--uruk-radius-small);
  color: var(--uruk-ink);
}
.health-toast__button:hover {
  background: var(--uruk-fill);
}

@media (max-width: 1100px) {
  .health {
    grid-template-columns: minmax(0, 1fr);
  }
  .health-card--wide,
  .health-card--full {
    grid-column: auto;
  }
  .health-figures {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .health-figures {
    gap: 8px;
  }
  .health-figure {
    padding: 10px 12px;
  }
  .health-figure__value {
    font-size: 22px;
  }
  .health-events li,
  .panel:not(.health-card--wide, .health-card--full) .health-events li {
    grid-template-columns: 70px minmax(0, 1fr);
  }
  .health-events li span,
  .panel:not(.health-card--wide, .health-card--full) .health-events li span {
    grid-column: 1/-1;
  }
  .health-toast {
    right: 16px;
    bottom: 16px;
  }
}
.settings {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.settings__stack {
  display: grid;
  gap: 24px;
  padding-bottom: 24px;
}

.settings-state {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 48px 20px;
}

.settings-card {
  min-width: 0;
  padding: clamp(20px, 4vw, 36px);
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-card);
  background: var(--uruk-paper);
  container: settings-card/inline-size;
}

.settings-card__heading,
.settings-card__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.settings-card__title {
  justify-content: flex-start;
  gap: 4px;
  font-size: 18px;
  font-weight: 700;
}

.settings-card__heading .settings-card__title {
  margin-bottom: 0;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 32px;
}

.settings-grid__wide {
  grid-column: 1/-1;
}

.settings-field {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 8px;
}

.settings-field .field__label,
.settings-grid > .field {
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

.settings-field input,
.settings-grid > .field input,
.settings-grid > .field textarea,
.settings-add input {
  width: 100%;
  min-width: 0;
  font-size: 14px;
}

.settings-field input:disabled {
  background: var(--uruk-fill);
  cursor: default;
  opacity: 1;
}

.settings-field__label {
  display: flex;
  min-height: 24px;
  align-items: center;
  gap: 4px;
}

.settings-field__error,
.settings-card__error {
  color: var(--uruk-warning-text);
  font-size: 12px;
  font-weight: 700;
}

.settings-card__error {
  margin-top: 24px;
  font-size: 13px;
}

.settings-undo .icon-button {
  width: 28px;
  height: 28px;
  border-radius: var(--uruk-radius-small);
}

.settings-check-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.settings-check {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  color: var(--uruk-ink);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.settings-check input {
  width: 18px;
  height: 18px;
  margin: 0;
}
.settings-check input:disabled {
  cursor: default;
}

.settings-checks {
  display: grid;
  gap: 4px;
}

.settings-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

.settings-card__unsaved {
  margin-right: auto;
  color: var(--uruk-ink-2);
  font-size: 13px;
  font-weight: 700;
}

.settings-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.settings-chips:empty {
  display: none;
}

.settings-chip {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 12px;
  border: 1px solid var(--uruk-line);
  border-radius: var(--uruk-radius-control);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.settings-chip__remove {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: var(--uruk-radius-small);
  color: var(--uruk-ink-2);
}
.settings-chip__remove:hover {
  background: var(--uruk-fill);
  color: var(--uruk-ink);
}

.settings-add {
  display: flex;
  max-width: 320px;
  align-items: center;
  gap: 8px;
}

.settings-members {
  display: grid;
}

.settings-member {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--uruk-hair);
}
.settings-member:last-child {
  border-bottom: 0;
}

.settings-member__name {
  min-width: 0;
  flex: 1 1 180px;
  overflow-wrap: anywhere;
}
.settings-member__name strong,
.settings-member__name small {
  display: block;
}
.settings-member__name strong {
  font-size: 14px;
  font-weight: 700;
}
.settings-member__name small {
  margin-top: 5px;
  color: var(--uruk-ink-2);
  font-size: 13px;
}

.settings-member__muted {
  color: var(--uruk-ink-2);
  font-size: 13px;
}

.settings-member__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-change__values {
  display: flex;
  min-width: 0;
  flex: 1 1 260px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.settings-change__old {
  color: var(--uruk-ink-2);
}

.settings-change__new {
  font-weight: 700;
}

.settings-dialog__start,
.settings-dialog__end {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dialog__footer .settings-dialog__end .button {
  min-height: 36px;
  padding-inline: 1rem;
  font-size: 14px;
}

.settings-danger {
  color: var(--uruk-warning-text);
}

.dialog .settings-card__error {
  margin-top: 18px;
}

@container settings-card (max-width: 640px) {
  .settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .settings-member__name {
    flex-basis: 100%;
  }
}
@media (max-width: 640px) {
  .settings-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .settings-member {
    gap: 12px;
  }
  .settings-member__actions {
    margin-left: auto;
  }
  .settings-change__values {
    justify-content: flex-start;
  }
}