@import "https://fonts.googleapis.com/css2?family=Google+Sans:wght@500&family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap";

/* src/frontend/styles/indexes/management.css */
:root {
  --buncss-light: initial;
  --buncss-dark: ;
  color-scheme: light;
  --page: #f7f7f8;
  --sidebar: #f0f0f2;
  --surface: #fff;
  --surface-muted: #eaecef;
  --text: #242a33;
  --muted: #626975;
  --border: #dcdfe5;
  --border-hover: #9ca5b3;
  --accent-soft: #fae9ec;
  --accent-text: #b51222;
  --danger: #a52b38;
  --danger-bg: #fbe7e9;
  --warning: #866019;
  --warning-bg: #f9efd9;
  --ok: #2d7a69;
  --ok-bg: #e2f2ee;
  --brand-ink: none;
}

:root[data-theme="dark"] {
  --buncss-light: ;
  --buncss-dark: initial;
  color-scheme: dark;
  --page: #101318;
  --sidebar: #14191f;
  --surface: #1b212a;
  --surface-muted: #282f3b;
  --text: #e8ebf1;
  --muted: #a6b0bf;
  --border: #333d4b;
  --border-hover: #66768c;
  --accent-soft: #38232c;
  --accent-text: #ff7b85;
  --danger: #ff9ba5;
  --danger-bg: #3c242c;
  --warning: #eac47c;
  --warning-bg: #3a3020;
  --ok: #7cc9b5;
  --ok-bg: #1f3530;
  --brand-ink: url("#nagy-dark-ink");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --buncss-light: ;
    --buncss-dark: initial;
    color-scheme: dark;
    --page: #101318;
    --sidebar: #14191f;
    --surface: #1b212a;
    --surface-muted: #282f3b;
    --text: #e8ebf1;
    --muted: #a6b0bf;
    --border: #333d4b;
    --border-hover: #66768c;
    --accent-soft: #38232c;
    --accent-text: #ff7b85;
    --danger: #ff9ba5;
    --danger-bg: #3c242c;
    --warning: #eac47c;
    --warning-bg: #3a3020;
    --ok: #7cc9b5;
    --ok-bg: #1f3530;
    --brand-ink: url("#nagy-dark-ink");
  }
}

:root {
  color: var(--text);
  background: var(--page);
  font-synthesis: none;
  font-family: DM Sans, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

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

button, a, select {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

button:disabled {
  opacity: .5;
  cursor: wait;
}

button:focus-visible {
  outline: 2px solid #e31826;
  outline-offset: 3px;
}

a:focus-visible {
  outline: 2px solid #e31826;
  outline-offset: 3px;
}

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

.app {
  display: flex;
  min-height: 100vh;
}

aside {
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  position: fixed;
  flex-direction: column;
  width: 244px;
  padding: 32px 20px;
  inset: 0 auto 0 0;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items:  flex-start;
  gap: 12px;
}

.brand img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
}

.brand small {
  letter-spacing: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.auth-screen > .brand {
  align-items:  center;
  width: min(280px, 100%);
}

.workspace-label {
  letter-spacing: 1.7px;
  color: var(--muted);
  margin: 40px 11px 12px;
  font-size: 10px;
}

nav {
  display: grid;
  gap: 5px;
}

nav a, .company {
  display: flex;
  text-align: left;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 7px;
  align-items:  center;
  gap: 12px;
  padding: 11px 12px;
  font-size: 13px;
}

nav a.active {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 600;
}

nav a span {
  font-size: 19px;
}

nav b {
  background: var(--surface-muted);
  border-radius: 4px;
  margin-left: auto;
  padding: 2px 6px;
  font-size: 11px;
}

.companies-label {
  margin-top: 33px;
}

.company {
  gap: 11px;
  padding: 10px 12px;
  font-size: 12px;
}

.company.selected {
  background: var(--surface-muted);
  font-weight: 700;
}

.company-dot {
  border-radius: 3px;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
}

.company-dot.all {
  background: #667566;
}

.sidebar-bottom {
  border-top: 1px solid var(--border);
  display: flex;
  align-items:  center;
  gap: 9px;
  margin-top: auto;
  padding-top: 20px;
  font-size: 12px;
}

.sidebar-bottom small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
  font-size: 10px;
}

.avatar {
  background: var(--surface-muted);
  border-radius: 50%;
  padding: 9px 12px;
  font-weight: 600;
}

main {
  display: flex;
  flex-direction: column;
  width: calc(100% - 244px);
  min-height: 100vh;
  margin-left: 244px;
  padding: 0 40px;
}

header {
  display: flex;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  justify-content: space-between;
  align-items:  center;
  height: 77px;
  font-size: 12px;
}

.breadcrumb span {
  color: var(--muted);
  padding: 0 14px;
}

.private {
  border: 1px solid var(--border);
  display: flex;
  border-radius: 20px;
  align-items:  center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 10px;
}

.private i {
  background: #e31826;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

.page-title {
  padding: 37px 0 28px;
}

.eyebrow {
  letter-spacing: 1.8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

.title-row {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 20px;
}

h1 {
  letter-spacing: -1.3px;
  margin: 10px 0;
  font-family: Manrope, sans-serif;
  font-size: 31px;
  font-weight: 650;
}

p {
  color: var(--muted);
  margin: 7px 0;
  font-size: 13px;
  line-height: 1.7;
}

h2 {
  font-size: 17px;
  font-weight: 600;
}

button.primary, a.primary {
  color: #fff;
  background: #c91422;
  border: 1px solid #c91422;
  border-radius: 7px;
  padding: 11px 17px;
  font-size: 12px;
  font-weight: 550;
}

.secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 10px 15px;
  font-size: 12px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  background: var(--surface-muted);
  border-radius: 10px;
  margin-bottom: 31px;
  padding: 23px 0;
}

.stats > div {
  border-right: 1px solid var(--border);
  display: grid;
  gap: 6px;
  padding: 0 25px;
}

.stats > div:last-child {
  border: 0;
}

.stats small {
  letter-spacing: 1.3px;
  color: var(--muted);
  font-size: 9px;
}

.stats strong {
  font-family: Manrope;
  font-size: 28px;
  font-weight: 600;
}

.stats span {
  color: var(--muted);
  font-size: 11px;
}

.amber {
  color: var(--warning);
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  margin-bottom: 22px;
  font-size: 13px;
}

.count {
  background: var(--surface-muted);
  border-radius: 5px;
  margin-left: 9px;
  padding: 3px 7px;
  font-size: 10px;
}

.toolbar input {
  background: none;
  width: 210px;
  padding: 9px 13px;
  font-size: 11px;
}

.board {
  display: grid;
  grid-template-columns: repeat(6, minmax(190px, 1fr));
  overflow: auto;
  gap: 14px;
  min-height: 370px;
}

.column h2 {
  display: flex;
  align-items:  center;
  gap: 7px;
  margin: 0 0 17px;
  font-size: 11px;
  font-weight: 600;
}

.column h2 > span {
  color: var(--muted);
  margin-left: auto;
  font-size: 10px;
}

.status-dot {
  background: #b5bbb0;
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.in_progress {
  background: #b49ae0;
}

.blocked {
  background: #d5aa63;
}

.done {
  background: #8baa82;
}

.todo {
  background: #96aec0;
}

.task {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 14px;
  box-shadow: 0 2px 3px #33442204;
}

.card-top {
  display: flex;
  color: var(--muted);
  justify-content: space-between;
  align-items:  center;
  gap: 5px;
  font-size: 9px;
}

.priority {
  background: var(--surface-muted);
  border-radius: 4px;
  padding: 3px 5px;
  font-size: 9px;
}

.priority.P0, .priority.P1 {
  background: var(--warning-bg);
  color: var(--warning);
}

.task h3 {
  font-size: 12px;
  font-weight: 550;
  line-height: 1.6;
}

.task p {
  white-space: pre-wrap;
  overflow: auto;
  max-height: 90px;
  font-size: 11px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tags span {
  background: var(--surface-muted);
  color: var(--muted);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 8px;
}

.task-meta {
  display: flex;
  color: var(--muted);
  border-top: 1px solid var(--surface-muted);
  justify-content: space-between;
  gap: 5px;
  margin-top: 14px;
  padding-top: 12px;
  font-size: 9px;
}

.task select {
  color: var(--muted);
  width: 100%;
  margin-top: 10px;
  padding: 5px;
  font-size: 10px;
}

.empty-column {
  text-align: center;
  border: 1px dashed var(--border);
  color: var(--muted);
  border-radius: 8px;
  padding: 28px 12px;
  font-size: 11px;
}

.welcome {
  max-width: 900px;
  padding: 65px 0 30px;
}

.welcome h1 {
  letter-spacing: -2px;
  margin: 20px 0;
  font-size: 52px;
  line-height: 1.18;
}

.welcome > p {
  font-size: 15px;
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 440px;
  margin-top: 40px;
  padding: 28px;
}

.login-card h2 {
  margin-top: 0;
}

.login-card p {
  margin-bottom: 20px;
}

.login {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

.login-card small {
  display: block;
  color: var(--muted);
  margin-top: 18px;
  font-size: 10px;
}

.welcome-bottom {
  display: flex;
  color: var(--muted);
  gap: 30px;
  margin-top: 50px;
  font-size: 11px;
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 27px;
}

.panel h2 {
  margin-top: 0;
}

form {
  display: grid;
  gap: 17px;
  margin-top: 23px;
}

label {
  display: grid;
  color: var(--muted);
  gap: 7px;
  font-size: 11px;
}

input, textarea, select {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 5px;
  width: 100%;
  padding: 10px;
}

input:focus, textarea:focus, select:focus {
  outline: 2px solid #e31826;
  outline-offset: 1px;
}

fieldset {
  border: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 5px;
  gap: 8px;
}

legend {
  padding: 0 5px;
  font-size: 11px;
}

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

.check input {
  width: auto;
}

.form-row {
  display: flex;
  gap: 15px;
}

.form-row label {
  flex: 1;
}

.message {
  background: var(--surface-muted);
  overflow-wrap: anywhere;
  border-radius: 5px;
  margin-bottom: 20px;
  padding: 13px;
  font-size: 12px;
}

.error {
  color: var(--danger);
}

.message.error {
  background: var(--danger-bg);
}

.modal-backdrop {
  position: fixed;
  display: flex;
  z-index: 10;
  background: #18181b70;
  justify-content: center;
  align-items:  center;
  padding: 20px;
  inset: 0;
}

.modal {
  background: var(--surface);
  overflow: auto;
  position: relative;
  border-radius: 13px;
  width: 550px;
  max-height: 90vh;
  padding: 30px;
}

.close {
  position: absolute;
  color: var(--muted);
  background: none;
  border: 0;
  font-size: 24px;
  top: 12px;
  right: 15px;
}

.bot-glyph {
  color: var(--muted);
  font-size: 40px;
}

.bot-row {
  display: flex;
  border-bottom: 1px solid var(--border);
  align-items:  center;
  gap: 12px;
  padding: 18px 0;
  font-size: 13px;
}

.bot-row > span {
  color: var(--muted);
  font-size: 25px;
}

.bot-row small {
  display: block;
  color: var(--muted);
  margin-top: 5px;
  font-size: 10px;
}

@media (min-width: 1500px) {
  main {
    padding-left: 55px;
    padding-right: 55px;
  }
}

@media (max-width: 1000px) {
  aside {
    width: 205px;
    padding: 25px 15px;
  }

  main {
    width: calc(100% - 205px);
    margin-left: 205px;
    padding: 0 25px;
  }

  .stats > div {
    padding: 0 15px;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .welcome h1 {
    font-size: 40px;
  }
}

@media (max-width: 650px) {
  aside {
    position: static;
    width: 100%;
    padding: 15px;
  }

  .app {
    display: block;
  }

  .brand {
    font-size: 14px;
  }

  .brand-icon {
    padding: 6px 10px;
    font-size: 18px;
  }

  .workspace-label, .company, .sidebar-bottom {
    display: none;
  }

  nav {
    display: flex;
    gap: 4px;
    margin-top: 14px;
  }

  nav a {
    padding: 8px;
    font-size: 11px;
  }

  nav a span {
    font-size: 14px;
  }

  main {
    width: 100%;
    margin: 0;
    padding: 0 18px;
  }

  header {
    height: 55px;
  }

  .page-title {
    padding-top: 25px;
  }

  h1 {
    font-size: 25px;
  }

  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .stats > div:nth-child(2) {
    border: 0;
  }

  .title-row {
    align-items:  flex-start;
  }

  .primary {
    white-space: nowrap;
  }

  .welcome {
    padding-top: 35px;
  }

  .welcome h1 {
    font-size: 37px;
  }

  .welcome-bottom {
    gap: 12px;
    font-size: 9px;
  }

  .toolbar input {
    width: 160px;
  }

  .settings-grid {
    gap: 15px;
  }

  .modal {
    padding: 22px;
  }

  fieldset {
    grid-template-columns: 1fr;
  }
}

.access-workspace {
  display: grid;
  gap: 24px;
  padding: 0 40px 32px;
}

.access-workspace .settings-grid {
  padding: 0;
}

.scope-picker {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  align-items:  center;
  gap: 28px;
}

.access-row {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  align-items:  center;
  gap: 14px;
  padding: 18px 0;
}

.access-row:last-child {
  border-bottom: 0;
}

.access-row > div {
  overflow-wrap: anywhere;
  flex: 1;
  min-width: 160px;
}

.access-row small {
  display: block;
  color: var(--muted);
  margin-top: 5px;
}

.access-row select {
  width: auto;
  min-width: 140px;
}

.text-button {
  color: var(--text);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 9px;
}

.text-button.danger {
  color: var(--danger);
}

.invitation-link {
  margin-top: 24px;
}

.invitation-banner {
  margin: 24px 40px;
}

.invitation-banner .primary {
  margin-right: 12px;
}

@media (max-width: 900px) {
  .access-workspace {
    padding: 0 20px 24px;
  }

  .scope-picker {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .invitation-banner {
    margin: 20px;
  }
}

.auth-screen {
  justify-content: center;
  align-items:  center;
  gap: 32px;
  width: 100%;
  min-height: 100dvh;
  margin: 0;
  padding: 56px 20px 28px;
}

.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 460px;
  padding: 36px;
  box-shadow: 0 12px 40px #24242408;
}

.auth-card h1 {
  letter-spacing: -.8px;
  margin: 18px 0 14px;
  font: 700 28px / 1.25 Manrope, sans-serif;
}

.auth-card p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.auth-providers {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.auth-card .login {
  width: 100%;
  margin: 0;
}

.auth-card form .primary {
  width: 100%;
  margin-top: 16px;
}

.auth-card input {
  margin-top: 8px;
}

.auth-card label {
  font-size: 13px;
}

.auth-secondary {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent-text);
  border-radius: 8px;
  width: 100%;
  margin: 14px 0 24px;
  padding: 12px;
  font-weight: 600;
}

.auth-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.auth-privacy {
  color: var(--muted);
  font-size: 12px;
}

.account-status {
  display: flex;
  text-align: right;
  align-items:  center;
  gap: 12px;
  font-size: 11px;
}

.account-status strong {
  display: block;
  overflow-wrap: anywhere;
}

.account-status button {
  flex-shrink: 0;
}

@media (max-width: 650px) {
  .auth-screen {
    padding: 32px 16px;
  }

  .auth-card {
    padding: 28px 24px;
  }

  .app header {
    flex-wrap: wrap;
    gap: 12px;
    height: auto;
    min-height: 77px;
    padding: 16px 0;
  }
}

.google-signin, .provider-signin {
  display: flex;
  position: relative;
  background: var(--surface);
  color: #1f1f1f;
  border: 1px solid #747775;
  border-radius: 6px;
  justify-content: center;
  align-items:  center;
  gap: 10px;
  min-height: 44px;
  padding: 12px;
  transition: background .15s, box-shadow .15s;
  font: 500 14px / 20px Google Sans, Arial, sans-serif;
}

.google-signin img, .provider-signin img {
  object-fit: contain;
  flex: 0 0 20px;
}

.google-signin:hover, .provider-signin:hover {
  background: #f8faff;
  box-shadow: 0 1px 3px #00000015;
}

.google-signin:active, .provider-signin:active {
  background: #edf2fa;
}

.auth-screen {
  border-top: 4px solid #ed1524;
}

.auth-card .eyebrow {
  color: var(--accent-text);
}

.auth-secondary:hover {
  background: var(--accent-soft);
  border-color: #d9a3a9;
}

.primary:hover:not(:disabled) {
  background: #ad101c;
}

.board {
  grid-template-columns: repeat(6, 260px);
  align-items: stretch;
  padding: 4px 2px 16px;
}

.column {
  background: var(--surface-muted);
  border: 1px solid #0000;
  border-radius: 10px;
  min-height: 340px;
  padding: 10px;
  transition: background .12s, border-color .12s;
}

.column.drop-target {
  background: var(--accent-soft);
  border-color: #c91422;
}

.task-card {
  display: flex;
  cursor: pointer;
  user-select: none;
  text-align: left;
  overflow: hidden;
  flex-direction: column;
  width: 100%;
  height: 230px;
}

.task-card.draggable {
  cursor: grab;
  touch-action: none;
}

.task-card:hover {
  border-color: var(--border-hover);
  box-shadow: 0 3px 12px #18181b10;
}

.task-card:focus-visible {
  outline: 2px solid #c91422;
  outline-offset: 2px;
}

.task-card h3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex-shrink: 0;
  height: 36px;
  margin: 12px 0 6px;
  line-height: 1.5;
}

.task-card .task-preview {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  color: var(--muted);
  -webkit-box-orient: vertical;
  flex-shrink: 0;
  height: 32px;
  margin: 0 0 10px;
  line-height: 16px;
}

.task-card .tags {
  overflow: hidden;
  max-height: 42px;
}

.task-card .tags span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.task-card .task-meta {
  margin-top: auto;
}

.task-card .task-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-card.drag-origin {
  opacity: .3;
}

.drag-overlay {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  cursor: grabbing;
  margin: 0;
  transform: rotate(2deg);
  box-shadow: 0 16px 40px #0003;
}

.board-help {
  color: var(--muted);
  margin: -6px 0 18px;
  font-size: 12px;
}

.sr-only {
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
}

.task-dialog {
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 16px;
  width: min(600px, 100vw - 32px);
  max-height: calc(100dvh - 40px);
  padding: 28px;
  box-shadow: 0 24px 80px #0003;
}

.task-dialog::backdrop {
  background: #18181b80;
}

.task-dialog-heading {
  display: flex;
  justify-content: space-between;
  align-items:  flex-start;
  gap: 16px;
}

.task-dialog h2 {
  overflow-wrap: anywhere;
  margin: 12px 0;
  font: 700 22px / 1.4 Manrope, sans-serif;
}

.task-dialog-heading button {
  flex-shrink: 0;
}

.task-detail-meta {
  display: flex;
  color: var(--muted);
  flex-wrap: wrap;
  align-items:  center;
  gap: 14px;
  margin: 8px 0 14px;
  font-size: 12px;
}

.task-dialog .tags {
  margin-bottom: 24px;
}

.task-dialog .tags span {
  font-size: 11px;
}

.task-dialog fieldset {
  display: block;
  border: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.task-dialog label {
  margin-bottom: 16px;
  font-size: 13px;
}

.task-dialog input, .task-dialog textarea, .task-dialog select {
  margin-top: 6px;
}

.task-dialog textarea {
  resize: vertical;
}

.task-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.task-full-description {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.7;
}

.portfolio-dashboard {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
}

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

.portfolio-kpi {
  text-align: left;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  padding: 22px 24px;
  transition: border-color .15s, transform .15s;
}

.portfolio-kpi:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.portfolio-kpi > span {
  display: flex;
  color: var(--muted);
  justify-content: space-between;
  font-size: 13px;
}

.portfolio-kpi > span > span {
  color: var(--muted);
}

.portfolio-kpi strong {
  display: block;
  letter-spacing: -2px;
  margin: 10px 0;
  font-family: Manrope, sans-serif;
  font-size: 42px;
  font-weight: 650;
  line-height: 1.2;
}

.portfolio-kpi small {
  color: var(--muted);
  font-size: 11px;
}

.portfolio-kpi.attention strong {
  color: var(--accent-text);
}

.portfolio-universe {
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  color: var(--text);
  border-radius: 22px;
}

.universe-heading {
  display: flex;
  justify-content: space-between;
  align-items:  start;
  gap: 20px;
  padding: 28px 30px 0;
}

.universe-heading .eyebrow {
  color: var(--accent-text);
  letter-spacing: 2px;
  font-size: 10px;
}

.universe-heading h2 {
  letter-spacing: -.8px;
  margin: 8px 0;
  font-family: Manrope, sans-serif;
  font-size: 25px;
  font-weight: 550;
}

.universe-heading p {
  color: var(--muted);
  margin: 0;
  font-size: 12px;
}

.universe-caption {
  display: flex;
  border-top: 1px solid var(--border);
  letter-spacing: .15px;
  color: var(--muted);
  justify-content: space-between;
  gap: 16px;
  padding: 16px 30px;
  font-size: 10px;
}

.universe-caption i {
  display: inline-block;
  background: #e31826;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  margin-right: 8px;
}

.portfolio-detail-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 24px;
}

.portfolio-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px;
}

.portfolio-panel .eyebrow {
  letter-spacing: 1.8px;
  color: var(--muted);
  font-size: 9px;
}

.portfolio-panel h2 {
  letter-spacing: -.6px;
  margin: 9px 0 18px;
  font-size: 20px;
  font-weight: 600;
}

.portfolio-panel-heading {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 10px;
}

.portfolio-total {
  color: var(--muted);
  background: var(--surface-muted);
  white-space: nowrap;
  border-radius: 20px;
  padding: 7px 12px;
  font-size: 11px;
}

.status-visual {
  display: flex;
  align-items:  center;
  gap: 30px;
}

.status-donut {
  position: relative;
  flex-shrink: 0;
  width: 180px;
}

.status-donut svg {
  display: block;
  width: 100%;
}

.status-donut > div {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:  center;
  inset: 0;
}

.status-donut strong {
  letter-spacing: -1px;
  font: 650 31px Manrope, sans-serif;
}

.status-donut small {
  color: var(--muted);
  margin-top: 5px;
  font-size: 11px;
}

.status-key {
  display: grid;
  flex: 1;
  gap: 7px;
}

.status-key button {
  display: flex;
  text-align: left;
  color: var(--muted);
  background: none;
  border: 0;
  align-items:  center;
  gap: 10px;
  padding: 7px 0;
  font-size: 12px;
}

.status-key button:hover {
  color: #e31826;
}

.status-key i {
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.status-key b {
  color: var(--text);
  margin-left: auto;
}

.status-key button > span:last-child {
  color: var(--muted);
}

.focus-panel {
  background: linear-gradient(130deg, var(--surface), var(--accent-soft));
}

.focus-number {
  display: block;
  letter-spacing: -1.5px;
  font: 650 42px Manrope, sans-serif;
}

.focus-number > span {
  letter-spacing: 0;
  color: var(--muted);
  margin-left: 12px;
  font: 400 13px DM Sans, sans-serif;
}

.focus-panel p {
  color: var(--muted);
  max-width: 340px;
  margin: 12px 0 20px;
  font-size: 12px;
  line-height: 1.8;
}

.focus-panel .primary {
  font-size: 12px;
}

.portfolio-footnote {
  color: var(--muted);
  margin: 0;
  font-size: 10px;
  line-height: 1.7;
}

@media (max-width: 1200px) {
  .portfolio-detail-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-kpi {
    padding: 18px;
  }

  .portfolio-kpi strong {
    font-size: 34px;
  }
}

@media (max-width: 800px) {
  .portfolio-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .universe-heading {
    flex-direction: column;
    padding: 22px 20px 0;
  }

  .universe-caption {
    flex-direction: column;
    gap: 7px;
    padding: 14px 20px;
  }

  .portfolio-panel {
    padding: 20px;
  }

  .status-visual {
    gap: 15px;
  }

  .status-donut {
    width: 140px;
  }

  .portfolio-detail-grid {
    gap: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-kpi {
    transition: none;
  }

  .portfolio-kpi:hover {
    transform: none;
  }
}

.sync-status {
  color: var(--warning);
  white-space: nowrap;
  font-size: 10px !important;
}

.sync-status.is-live {
  color: #328678;
}

button {
  color: inherit;
}

.task-dialog {
  background: var(--surface);
}

.brand img {
  filter: var(--brand-ink);
  background: none;
}

.brand-filter {
  position: absolute;
  pointer-events: none;
}

.theme-control {
  display: flex;
  color: var(--muted);
  flex-shrink: 0;
  align-items:  center;
  gap: 8px;
}

.theme-control select {
  color: var(--text);
  width: auto;
  min-height: 36px;
  padding: 6px 24px 6px 10px;
  font-size: 12px;
}

.account-status {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.app header {
  gap: 16px;
  height: auto;
  min-height: 77px;
  padding: 12px 0;
}

.google-signin, .provider-signin {
  color: var(--text);
}

.google-signin:hover, .google-signin:active, .provider-signin:hover, .provider-signin:active {
  background: var(--surface-muted);
}

@media (max-width: 650px) {
  .account-status {
    text-align: left;
    justify-content: flex-start;
    gap: 10px;
  }

  .theme-control {
    order: -1;
  }

  .theme-control span {
    font-size: 10px;
  }
}

.workload-total {
  color: var(--muted);
  white-space: nowrap;
  background: var(--surface-muted);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
}

.workload-total strong {
  color: var(--text);
  margin-right: 5px;
  font: 650 22px Manrope, sans-serif;
}

.workload-legend {
  display: flex;
  color: var(--muted);
  flex-wrap: wrap;
  align-items:  center;
  gap: 18px;
  padding: 24px 30px 16px;
  font-size: 11px;
}

.workload-legend span {
  display: flex;
  align-items:  center;
  gap: 7px;
}

.workload-legend i {
  border-radius: 2px;
  width: 8px;
  height: 8px;
}

.workload-open {
  background: #e33550;
}

.workload-blocked {
  background: #c78325;
}

.workload-hint {
  margin-left: auto;
}

.workload-chart {
  padding: 0 18px 20px;
}

.workload-row {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(80px, 1fr) 75px 16px;
  text-align: left;
  color: var(--text);
  background: none;
  border: 1px solid #0000;
  border-radius: 10px;
  align-items:  center;
  gap: 20px;
  width: 100%;
  min-height: 62px;
  padding: 12px;
  transition: background .15s, border-color .15s;
}

.workload-row:hover {
  background: var(--accent-soft);
  border-color: var(--border);
}

.workload-row:focus-visible {
  background: var(--accent-soft);
  border-color: var(--border);
}

.workload-company {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.workload-company strong {
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 550;
}

.workload-company small, .workload-value small {
  color: var(--muted);
  font-size: 10px;
}

.workload-bar {
  overflow: visible;
  width: 100%;
  height: 36px;
}

.workload-fill {
  transition: width .25s, x .25s;
}

.workload-value {
  display: grid;
  text-align: right;
  font-variant-numeric: tabular-nums;
  gap: 4px;
}

.workload-value b {
  font: 650 20px Manrope, sans-serif;
}

.workload-arrow {
  color: var(--muted);
}

.workload-row:hover .workload-arrow {
  color: var(--accent-text);
}

.workload-empty {
  padding: 20px 12px;
}

.status-donut > div {
  pointer-events: none;
}

.status-segment {
  cursor: pointer;
  transition: opacity .15s, stroke-width .15s;
}

.status-segment:hover {
  stroke-width: 23;
  outline: none;
}

.status-segment:focus-visible {
  stroke-width: 23;
  outline: none;
}

.status-key button:hover {
  color: var(--accent-text);
}

.status-key button:focus-visible {
  color: var(--accent-text);
}

@media (max-width: 800px) {
  .workload-legend {
    gap: 12px;
    padding: 20px;
  }

  .workload-hint {
    width: 100%;
    margin-left: 0;
  }

  .workload-chart {
    padding: 0 8px 16px;
  }

  .workload-row {
    grid-template-columns: minmax(90px, 115px) minmax(45px, 1fr) 58px;
    gap: 12px;
  }

  .workload-arrow {
    display: none;
  }

  .workload-company strong {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workload-fill, .workload-row, .status-segment {
    transition: none;
  }
}

.update-banner {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 100010;
  display: flex;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-hover);
  border-radius: 16px;
  align-items:  center;
  gap: 12px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 12px 14px;
  font-size: 13px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 14px 36px #0003;
}

.update-banner > svg {
  color: var(--accent-text);
  flex-shrink: 0;
}

.update-banner small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
  font-size: 11px;
}

.update-banner button {
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .update-banner {
    gap: 9px;
    font-size: 12px;
  }

  .update-banner > svg {
    display: none;
  }

  .update-banner .primary {
    padding: 10px 12px;
  }
}

.portfolio-section {
  min-width: 0;
}

.portfolio-intro, .company-workspace-heading, .company-actions, .portfolio-card-heading, .portfolio-card-footer {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 16px;
}

.portfolio-intro {
  margin: 12px 0 28px;
}

.portfolio-intro > div {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.portfolio-intro strong {
  letter-spacing: -2px;
  font: 700 42px Manrope, sans-serif;
}

.portfolio-intro span, .portfolio-card-footer, .company-workspace-heading p, .company-summary small, .portfolio-card-stats small, .company-facts dt, .company-activity small, .company-member-list small {
  color: var(--muted);
}

.portfolio-filters {
  display: grid;
  grid-template-columns: 2fr repeat(2, 1fr);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  gap: 16px;
  padding: 22px;
}

.portfolio-filters label {
  display: flex;
  color: var(--muted);
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}

.portfolio-filters input, .portfolio-filters select {
  width: 100%;
  min-width: 0;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 20px;
}

.portfolio-card {
  display: flex;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 18px;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  padding: 24px;
  transition: border-color .15s, transform .15s;
}

.portfolio-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
}

.venture-logo {
  display: inline-flex;
  background: var(--accent-soft);
  color: var(--accent-text);
  overflow: hidden;
  border-radius: 14px;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 52px;
  height: 52px;
  font: 750 18px Manrope, sans-serif;
}

.venture-logo img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.venture-logo img.logo-dark {
  display: none;
}

:root[data-theme="dark"] .venture-logo img.logo-dark {
  display: block;
}

:root[data-theme="dark"] .venture-logo img.logo-light {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .venture-logo img.logo-dark {
    display: block;
  }

  :root:not([data-theme="light"]) .venture-logo img.logo-light {
    display: none;
  }
}

.portfolio-card h3 {
  overflow-wrap: anywhere;
  margin: 20px 0 10px;
  font: 750 21px Manrope, sans-serif;
}

.company-card-description {
  color: var(--muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 44px;
  margin: 0 0 18px;
  line-height: 22px;
}

.company-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  margin-bottom: 22px;
}

.company-badges span {
  background: var(--surface-muted);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 11px;
}

.portfolio-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
  margin-top: auto;
  padding-top: 18px;
}

.portfolio-card-stats strong, .portfolio-card-stats small {
  display: block;
}

.portfolio-card-stats strong {
  font-size: 24px;
  font-weight: 600;
}

.portfolio-card-stats small {
  margin-top: 5px;
  font-size: 11px;
}

.portfolio-card-footer {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  font-size: 10px;
}

.overdue-number {
  color: var(--danger);
}

.view-switch {
  display: flex;
  gap: 4px;
}

.view-switch button[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.portfolio-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 14px;
}

.portfolio-table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
  font-size: 13px;
}

.portfolio-table th, .portfolio-table td {
  border-bottom: 1px solid var(--border);
  padding: 18px 16px;
}

.portfolio-table thead {
  color: var(--muted);
  font-size: 11px;
}

.portfolio-table th button {
  text-align: left;
  color: var(--text);
  background: none;
  border: 0;
  padding: 0;
  font-weight: 650;
}

.company-workspace-heading {
  justify-content: flex-start;
  margin: 22px 0;
}

.company-workspace-heading h2 {
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 30px;
}

.company-workspace-heading p {
  margin: 6px 0 0;
}

.company-actions {
  margin-left: auto;
}

.company-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  border-radius: 14px;
  margin: 24px 0;
}

.company-summary > * {
  border: 0;
  border-right: 1px solid var(--border);
  text-align: left;
  background: none;
  border-radius: 0;
  padding: 22px;
}

.company-summary small, .company-summary strong {
  display: block;
}

.company-summary small {
  letter-spacing: .7px;
  margin-bottom: 12px;
  font-size: 10px;
}

.company-summary strong {
  font-size: 18px;
}

.company-summary button:hover {
  background: var(--surface-muted);
}

.company-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  gap: 24px;
  margin-bottom: 24px;
}

.company-tabs button {
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid #0000;
  border-radius: 0;
  padding: 14px 4px;
}

.company-tabs button[aria-selected="true"] {
  color: var(--accent-text);
  border-bottom-color: var(--accent-text);
}

.company-overview {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
}

.company-overview .panel {
  margin: 0;
}

.company-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 28px 0;
}

.company-facts dt {
  margin-bottom: 7px;
  font-size: 12px;
}

.company-facts dd {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  margin: 0;
}

.preserve-lines {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.company-member-list > div {
  display: flex;
  border-bottom: 1px solid var(--border);
  align-items:  center;
  gap: 16px;
  padding: 18px 0;
}

.company-member-list small {
  display: block;
  margin-top: 4px;
}

.company-member-list > div > span:last-child {
  margin-left: auto;
}

.company-activity {
  list-style: none;
  padding: 0;
}

.company-activity > li {
  border-left: 2px solid var(--border);
  padding: 20px 0 20px 24px;
}

.company-activity small {
  display: block;
  margin-top: 6px;
}

.company-activity dl {
  font-size: 12px;
}

.company-activity dl > div {
  padding: 8px 0;
}

.company-activity dd {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  margin: 5px 0 0;
}

.company-activity dd > span:first-child {
  color: var(--muted);
}

.company-dialog {
  width: min(760px, 100vw - 32px);
}

.company-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.company-form-grid label {
  min-width: 0;
  margin: 0;
}

.company-form-grid .wide {
  grid-column: 1 / -1;
}

.portfolio-section button:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .company-summary {
    grid-template-columns: repeat(3, 1fr);
  }

  .company-workspace-heading {
    flex-wrap: wrap;
  }

  .company-actions {
    margin-left: 0;
  }

  .company-overview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .portfolio-filters, .company-form-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-intro, .portfolio-intro > div {
    flex-direction: column;
    align-items:  flex-start;
  }

  .company-summary {
    grid-template-columns: 1fr 1fr;
  }

  .company-summary > * {
    padding: 16px;
  }

  .company-facts {
    grid-template-columns: 1fr;
  }

  .company-member-list > div {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-card {
    transition: none;
  }

  .portfolio-card:hover {
    transform: none;
  }
}

.company-actions button, .view-switch button, .company-dialog button:not(.primary):not(.text-button), .company-member-list + button {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 8px;
  padding: 10px 14px;
}

.view-switch button[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-color: #0000;
}

.company-actions button:hover, .view-switch button:hover {
  border-color: var(--border-hover);
}

.portfolio-section > .toolbar {
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 650px) {
  .app aside nav {
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: 6px;
  }

  .app aside nav a {
    flex: none;
  }
}

.directory-panel {
  min-width: 0;
}

.directory-heading {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 18px;
  margin: 20px 0 24px;
}

.directory-heading > div:first-child {
  flex: 1;
}

.directory-heading > .company-actions, .directory-heading > button {
  margin-left: auto;
}

.directory-heading h2 {
  overflow-wrap: anywhere;
  margin: 0 0 8px;
  font: 750 26px Manrope, sans-serif;
}

.directory-heading p {
  color: var(--muted);
  max-width: 700px;
  margin: 0;
  line-height: 1.6;
}

.directory-filters {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 14px;
  gap: 16px;
  padding: 20px;
}

.directory-filters label {
  display: flex;
  color: var(--muted);
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  font-size: 12px;
}

.directory-filters select, .directory-filters input {
  width: 100%;
  min-width: 0;
}

.department-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 20px;
}

.department-card {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  text-align: left;
  display: flex;
  border-radius: 16px;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  min-width: 0;
  padding: 24px;
}

.department-card:hover, .personnel-card:hover {
  border-color: var(--border-hover);
}

.department-card h3 {
  overflow-wrap: anywhere;
  margin: 8px 0 0;
  font: 700 20px Manrope, sans-serif;
}

.department-card p {
  color: var(--muted);
  margin: 0;
  font-size: 13px;
}

.department-card .portfolio-card-stats {
  margin-top: 0;
}

.department-lead {
  min-height: 36px;
}

.department-progress {
  display: block;
  width: 100%;
  height: 8px;
  margin-top: auto;
}

.directory-badge {
  display: inline-block;
  border-radius: 6px;
  width: -moz-fit-content;
  width: fit-content;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 600;
}

.directory-badge.neutral {
  background: var(--surface-muted);
  color: var(--muted);
}

.directory-badge.attention {
  background: var(--warning-bg);
  color: var(--warning);
}

.directory-badge.positive {
  background: color-mix(in srgb, var(--surface) 90%, #38a887);
  color: var(--buncss-light, #237359) var(--buncss-dark, #7fd7b6);
}

.personnel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: 18px;
}

.personnel-card {
  display: flex;
  text-align: left;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  align-items:  flex-start;
  gap: 18px;
  min-width: 0;
  padding: 24px;
}

.personnel-card > div {
  min-width: 0;
}

.personnel-card h3 {
  overflow-wrap: anywhere;
  margin: 0 0 8px;
  font-size: 18px;
}

.personnel-card p, .personnel-card small {
  color: var(--muted);
  overflow-wrap: anywhere;
  margin: 0 0 12px;
  font-size: 12px;
}

.personnel-card .company-badges {
  margin: 16px 0 0;
}

.person-avatar {
  display: inline-flex;
  overflow: hidden;
  background: var(--accent-soft);
  color: var(--accent-text);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 48px;
  height: 48px;
  font-size: 16px;
  font-weight: 700;
}

.person-avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.directory-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 24px 0;
}

.directory-detail-stats > div {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}

.directory-detail-stats small {
  display: block;
  color: var(--muted);
  letter-spacing: .6px;
  margin-bottom: 12px;
  font-size: 10px;
}

.directory-detail-stats strong:not(.directory-badge) {
  font-size: 26px;
}

.directory-roster {
  display: grid;
  gap: 10px;
}

.directory-roster button {
  display: flex;
  text-align: left;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  align-items:  center;
  gap: 14px;
  padding: 12px;
}

.directory-roster strong, .directory-roster small {
  display: block;
}

.directory-roster small {
  color: var(--muted);
  margin-top: 5px;
}

.person-relationship {
  border-top: 1px solid var(--border);
  padding: 16px 0;
}

.person-relationship p {
  color: var(--muted);
  font-size: 13px;
}

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

.department-links button {
  background: var(--accent-soft);
  color: var(--accent-text);
  border: 0;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
}

.category-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}

.category-list > div {
  display: flex;
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items:  center;
  gap: 12px;
  padding: 10px 0;
  font-size: 13px;
}

.directory-fields {
  border: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.directory-fields fieldset {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}

.directory-fields .check {
  display: flex;
  align-items:  center;
  gap: 10px;
}

.directory-fields input[type="checkbox"] {
  width: auto;
}

.directory-company-summary {
  grid-template-columns: repeat(3, 1fr);
}

.directory-panel .toolbar {
  flex-wrap: wrap;
  gap: 12px;
}

.directory-panel .toolbar p {
  color: var(--muted);
  font-size: 13px;
}

.directory-panel button:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

@media (max-width: 1000px) {
  .directory-filters {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .directory-filters, .category-list {
    grid-template-columns: 1fr;
  }

  .directory-detail-stats {
    grid-template-columns: 1fr 1fr;
  }

  .directory-company-summary {
    grid-template-columns: 1fr;
  }

  .directory-heading > .company-actions, .directory-heading > button {
    margin-left: 0;
  }

  .directory-heading .company-actions {
    flex-wrap: wrap;
  }
}

@media (min-width: 651px) {
  .app aside {
    overflow-y: auto;
  }

  .app aside > * {
    flex-shrink: 0;
  }
}

.category-list > div > span {
  overflow-wrap: anywhere;
  min-width: 0;
}

.category-list > div > button {
  flex-shrink: 0;
}

.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}

.partner-card {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  min-width: 0;
  padding: 1.25rem;
}

.partner-card h3 {
  margin: .75rem 0 .25rem;
}

.partner-card a {
  overflow-wrap: anywhere;
}

.partner-workload {
  display: flex;
  align-items:  center;
  gap: 1rem;
  margin: 1rem 0;
}

.partner-workload svg {
  color: var(--accent-text);
  width: 72px;
  height: 72px;
}

.partner-workload p {
  margin: .25rem 0;
}

.partner-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:  center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.partner-heading h2, .partner-heading h3 {
  margin: 0;
}

.partner-badge {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-radius: 999px;
  padding: .3rem .65rem;
  font-size: .75rem;
}

.partner-card {
  display: flex;
  flex-direction: column;
}

.partner-card > .secondary {
  margin-top: auto;
}

.task-dialog .task-assignees {
  border: 1px solid var(--border);
  overflow: auto;
  border-radius: 10px;
  max-height: 240px;
  margin: 1rem 0;
  padding: 1rem;
}

.task-assignees .check {
  display: flex;
  flex-direction: row;
  align-items:  center;
  gap: .6rem;
}

.task-assignees input {
  width: auto;
}

.task-collaboration {
  border-top: 1px solid var(--border);
  margin-top: 1.5rem;
  padding-top: 1rem;
}

.task-provenance {
  display: grid;
  gap: .75rem;
  font-size: .8rem;
}

.task-provenance dt {
  color: var(--muted);
}

.task-provenance dd {
  margin: .25rem 0;
}

.task-comments {
  overflow: auto;
  max-height: 420px;
}

.task-comments article {
  border: 1px solid var(--border);
  background: var(--surface-muted);
  border-radius: 12px;
  margin: .75rem 0;
  padding: 1rem;
}

.task-comments header {
  color: var(--text);
  display: flex;
  border: 0;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem;
  height: auto;
  font-size: .8rem;
}

.task-comments article p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.task-comments time, .task-activity time {
  color: var(--muted);
  font-size: .75rem;
}

.supporting-link {
  display: block;
  overflow-wrap: anywhere;
  padding: .3rem 0;
}

.task-collaboration form {
  margin: 1rem 0;
}

.task-collaboration .tags button {
  margin: .25rem;
  padding: .3rem .6rem;
}

.task-activity {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.task-activity summary {
  cursor: pointer;
  font-weight: 600;
}

.task-activity ol {
  padding-left: 1.3rem;
}

.task-activity li {
  overflow-wrap: anywhere;
  padding: .65rem 0;
}

.task-activity time {
  display: block;
}

.task-activity li p {
  margin: .4rem 0;
  font-size: .8rem;
}

.task-saved-views {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}

.task-saved-views button {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: .55rem .8rem;
}

.task-saved-views button.active {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-color: var(--accent-text);
}

.notification-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:  center;
  gap: 1rem;
}

.notification-list {
  display: grid;
  gap: .75rem;
  margin: 1.5rem 0;
}

.notification-list article {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  justify-content: space-between;
  align-items:  center;
  gap: 1rem;
  padding: 1.25rem;
}

.notification-list article.unread {
  border-left: 3px solid var(--accent-text);
}

.notification-list article > div {
  display: grid;
  gap: .5rem;
  min-width: 0;
}

.notification-kind {
  color: var(--muted);
  font-size: .85rem;
}

.notification-task {
  text-align: left;
  overflow-wrap: anywhere;
  font-weight: 600;
}

.notification-list time {
  color: var(--muted);
  font-size: .75rem;
}

.notification-list article > .secondary {
  flex-shrink: 0;
}

.task-dialog .notification-preferences {
  display: grid;
  gap: 1rem;
}

.task-dialog .notification-preferences fieldset {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
}

.task-dialog .notification-preferences legend {
  padding: 0 .3rem;
  font-weight: 600;
}

.task-dialog .notification-preferences label {
  display: inline-flex;
  flex-direction: row;
  align-items:  center;
  gap: .5rem;
  margin: .5rem 1.5rem .25rem 0;
}

.task-dialog .notification-preferences input {
  width: auto;
}

.task-view-switch {
  margin: 0 0 12px;
}

.task-calendar {
  margin-top: 4px;
}

.calendar-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 8px 16px;
  margin: 0 0 12px;
}

.calendar-toolbar .filter-bar {
  flex: auto;
  justify-content: flex-end;
  margin: 0;
}

.calendar-navigation {
  display: flex;
  align-items:  center;
  gap: 4px;
}

.calendar-navigation h2, .calendar-undated-title {
  letter-spacing: -.01em;
  white-space: nowrap;
  margin: 0 4px 0 10px;
  font-size: 20px;
  font-weight: 650;
}

.calendar-step, .calendar-today-button {
  display: inline-grid;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  border-radius: 17px;
  place-items:  center;
  height: 34px;
}

.calendar-step {
  width: 34px;
  padding: 0;
}

.calendar-today-button {
  padding: 0 14px;
  font-size: 13px;
}

.calendar-step:hover, .calendar-today-button:hover {
  border-color: var(--border-hover);
}

.calendar-flag {
  color: var(--warning);
  margin-left: 10px;
  font-weight: 600;
}

.calendar-flag.is-overdue {
  color: var(--danger);
}

.segmented-count {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--border);
  border-radius: 14px;
  gap: 1px;
}

.calendar-weekday {
  background: var(--surface);
  color: var(--muted);
  text-align: center;
  padding: 8px 0;
  font-size: 12px;
}

.calendar-weekday .short {
  display: none;
}

.calendar-day {
  background: var(--surface);
  cursor: pointer;
  min-width: 0;
  min-height: 108px;
  padding: 6px;
}

.calendar-week .calendar-day {
  min-height: 320px;
}

.calendar-day.calendar-outside {
  background: var(--surface-muted);
  color: var(--muted);
}

.calendar-day {
  cursor: default;
}

.calendar-day.has-tasks {
  cursor: pointer;
}

.calendar-day.has-tasks:hover {
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface));
}

.calendar-day-dialog-list {
  display: grid;
  overflow-y: auto;
  gap: 8px;
  max-height: calc(100dvh - 180px);
}

.calendar-day h3 {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  margin: 0 0 4px;
  font-size: 12.5px;
  font-weight: 600;
}

.calendar-day h3 time {
  display: inline-grid;
  border-radius: 12px;
  place-items:  center;
  min-width: 24px;
  height: 24px;
}

.calendar-today h3 time {
  background: var(--accent-text);
  color: #fff;
}

.calendar-dots {
  display: none;
  gap: 3px;
}

.calendar-dots i {
  background: var(--warning);
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.calendar-dots i.overdue {
  background: var(--danger);
}

.calendar-dots i.completed {
  background: #3f8f7f;
}

.calendar-day-tasks {
  display: grid;
  gap: 3px;
}

.calendar-drop {
  outline: 2px dashed var(--accent-text);
  outline-offset: -3px;
}

.calendar-task {
  position: relative;
  display: flex;
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
  background: var(--surface);
  border-radius: 8px;
  align-items: stretch;
  min-width: 0;
}

.calendar-task.overdue {
  border-left-color: var(--danger);
}

.calendar-task.upcoming {
  border-left-color: var(--warning);
}

.calendar-task.completed {
  opacity: .75;
  border-left-color: #3f8f7f;
}

.calendar-task-open {
  display: grid;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  flex: 1;
  gap: 2px;
  min-width: 0;
  padding: 7px 9px;
}

.calendar-task-open > span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.calendar-task-open small {
  color: var(--muted);
  font-size: 11.5px;
}

.calendar-task.is-compact {
  background: var(--surface-muted);
  border-width: 0 0 0 3px;
  border-radius: 4px;
}

.calendar-task.is-compact .calendar-task-open {
  padding: 3px 6px;
}

.calendar-task.is-compact .calendar-task-open > span {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 500;
}

.calendar-drag {
  color: var(--muted);
  cursor: grab;
  background: none;
  border: 0;
  padding: 0 8px;
}

.calendar-drag:active {
  cursor: grabbing;
}

.calendar-more {
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  justify-self: start;
  padding: 1px 6px;
  font-size: 11.5px;
  font-weight: 600;
}

.calendar-more:hover {
  color: var(--accent-text);
}

.calendar-agenda section {
  margin-top: 16px;
}

.calendar-agenda h3 {
  display: flex;
  align-items:  center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 15px;
}

.calendar-agenda section > div, .calendar-undated-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}

@media (max-width: 1100px) {
  .calendar-day {
    min-height: 92px;
    padding: 4px;
  }
}

@media (max-width: 640px) {
  .calendar-weekday .long {
    display: none;
  }

  .calendar-weekday .short {
    display: inline;
  }

  .calendar-month .calendar-day {
    min-height: 52px;
    padding: 4px 2px;
  }

  .calendar-month .calendar-day h3 {
    flex-direction: column;
    gap: 3px;
  }

  .calendar-month .calendar-dots {
    display: flex;
  }

  .calendar-month .calendar-day-tasks {
    display: none;
  }

  .calendar-week {
    grid-template-columns: 1fr;
  }

  .calendar-week .calendar-weekday {
    display: none;
  }

  .calendar-week .calendar-day {
    min-height: 0;
  }

  .calendar-toolbar .filter-bar {
    justify-content: flex-start;
  }
}

.dashboard-report-link {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 14px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:  center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem;
}

.dashboard-report-link p {
  color: var(--muted);
  margin: .4rem 0 0;
}

.report-kpis {
  position: relative;
  display: flex;
  border: 1px solid var(--border);
  background: var(--border);
  overflow: hidden;
  border-radius: 16px;
  flex-wrap: wrap;
  gap: 1px;
  margin: 0 0 20px;
}

.report-kpis button {
  display: grid;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  border: 0;
  border-radius: 0;
  flex: 130px;
  gap: 2px;
  padding: 18px 22px;
}

.report-kpis button:hover {
  background: var(--surface-muted);
}

.report-kpis strong {
  letter-spacing: -.02em;
  font-size: 30px;
  font-weight: 650;
  line-height: 1.1;
}

.report-kpis button span {
  color: var(--muted);
  font-size: 13px;
}

.report-kpis .is-danger strong {
  color: var(--danger);
}

.report-kpis .is-warning strong {
  color: var(--warning);
}

.report-kpis .is-done strong {
  color: #3f8f7f;
}

.report-kpis-note {
  color: var(--muted);
  margin: -12px 0 20px;
  font-size: 12px;
}

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

.report-card {
  display: flex;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  flex-direction: column;
  min-width: 0;
  padding: 18px 20px;
}

.report-card.span-2 {
  grid-column: span 2;
}

.report-card.span-all {
  grid-column: 1 / -1;
}

.report-card-head {
  display: flex;
  align-items:  center;
  gap: 6px;
  margin: 0 0 12px;
}

.report-card-head h3 {
  letter-spacing: -.01em;
  margin: 0;
  font-size: 15px;
  font-weight: 650;
}

.report-card-body {
  flex: 1;
  min-width: 0;
}

.report-card-none {
  color: var(--muted);
  text-align: center;
  margin: 24px 0;
  font-size: 13px;
}

.report-card-foot {
  color: var(--muted);
  margin: 8px 0 0;
  font-size: 12px;
}

.report-card-note {
  color: var(--muted);
  margin: 10px 0 0;
  font-size: 12.5px;
}

.abs-chart button {
  color: var(--text);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
}

.abs-chart button:hover, .abs-chart button[aria-pressed="true"] {
  background: var(--accent-soft);
}

.abs-chart button:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

.abs-chart svg [role="button"]:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

.abs-chart svg [role="button"] {
  cursor: pointer;
  transition: stroke-width .15s;
}

.abs-chart svg [role="button"]:hover {
  stroke-width: 28;
}

.abs-bars {
  display: grid;
  gap: 2px;
}

.abs-chart-row {
  display: grid;
  grid-template-columns: minmax(110px, 1.1fr) minmax(50px, 1.4fr) 28px;
  text-align: left;
  align-items:  center;
  gap: 12px;
  padding: 6px 8px;
}

.abs-chart-row > span {
  overflow-wrap: break-word;
  font-size: .8rem;
  line-height: 1.3;
}

.abs-chart-row > svg {
  width: 100%;
  height: 14px;
}

.abs-chart-row > b {
  text-align: right;
  font-size: .85rem;
}

.abs-donut {
  display: grid;
  grid-template-columns: minmax(96px, 130px) minmax(0, 1fr);
  align-items:  center;
  gap: 16px;
}

.abs-donut > svg {
  color: var(--text);
  overflow: visible;
  width: 100%;
}

.abs-chart-legend {
  display: grid;
  gap: .3rem;
}

.abs-chart-legend button {
  display: flex;
  text-align: left;
  align-items:  center;
  gap: .5rem;
  padding: .5rem;
  font-size: .8rem;
}

.abs-chart-legend i {
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
}

.abs-chart-legend span {
  overflow-wrap: break-word;
  flex: 0 auto;
}

.abs-chart-legend b {
  margin-left: 4px;
  font-weight: 650;
}

.abs-trend {
  display: flex;
  gap: 2px;
}

.abs-trend button {
  display: grid;
  grid-template-rows: 18px 120px 22px;
  text-align: center;
  flex: 1;
  align-items:  end;
  min-width: 0;
  padding: .2rem;
}

.abs-trend svg {
  width: 100%;
  height: 120px;
}

.abs-trend span {
  white-space: nowrap;
  font-size: .6rem;
}

.abs-trend b {
  font-size: .7rem;
}

.report-table-scroll {
  overflow: auto;
  max-height: 640px;
}

.report-table-scroll table {
  border-collapse: collapse;
  width: 100%;
  font-size: .82rem;
}

.report-table-scroll th {
  text-align: left;
  color: var(--muted);
  position: sticky;
  background: var(--surface);
  font-weight: 500;
  top: 0;
}

.report-table-scroll td, .report-table-scroll th {
  border-bottom: 1px solid var(--border);
  padding: 11px 16px;
}

.report-table-scroll tbody tr:hover {
  background: var(--surface-muted);
}

.report-table-scroll td:first-child {
  min-width: 180px;
  max-width: 360px;
}

.report-table-scroll .text-button {
  text-align: left;
  overflow-wrap: anywhere;
}

.report-status {
  white-space: nowrap;
  background: var(--surface-muted);
  border-radius: 20px;
  padding: .25rem .5rem;
  font-size: .7rem;
}

.report-status.done {
  color: #449b8a;
}

.report-status.blocked {
  color: var(--warning);
}

@media (max-width: 1280px) {
  .report-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .report-card.span-2 {
    grid-column: auto;
  }
}

@media (max-width: 700px) {
  .report-card {
    padding: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .abs-chart svg [role="button"] {
    transition: none;
  }
}

nav a, a.company {
  text-decoration: none;
}

.files-links {
  border-top: 1px solid var(--border);
  min-width: 0;
  margin-top: 24px;
  padding-top: 20px;
}

.files-heading {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 16px;
}

.files-heading h3 {
  margin: 0;
}

.files-heading p {
  margin: 8px 0 18px;
}

.files-actions {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}

.files-actions form {
  display: flex;
  flex-wrap: wrap;
  align-items:  end;
  gap: 12px;
}

.files-actions form label {
  flex: 1;
  min-width: 150px;
}

.files-actions input {
  width: 100%;
}

.files-actions input[type="file"] {
  max-width: 100%;
  padding: 10px 0;
}

.files-list {
  list-style: none;
  margin: 16px 0;
  padding: 0;
}

.files-list > li {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  align-items:  center;
  gap: 14px;
  padding: 16px 0;
}

.file-symbol {
  color: var(--muted);
  font-size: 26px;
}

.file-info {
  overflow-wrap: anywhere;
  flex: 1;
  min-width: 140px;
}

.file-info strong, .file-info small {
  display: block;
}

.file-info small {
  color: var(--muted);
  margin-top: 6px;
}

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

.file-buttons a {
  text-decoration: none;
  display: inline-flex;
  border: 1px solid var(--border);
  color: inherit;
  border-radius: 8px;
  align-items:  center;
  padding: 9px 12px;
}

.file-confirm {
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-basis: 100%;
  padding: 14px;
}

.file-confirm button {
  margin-right: 8px;
}

.empty-files {
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 12px;
  margin-top: 16px;
  padding: 30px 16px;
}

@media (max-width: 600px) {
  .file-buttons {
    width: 100%;
  }

  .files-actions form {
    display: grid;
  }
}

.files-actions input[type="file"]::-webkit-file-upload-button {
  border: 1px solid var(--border);
  background: var(--surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 8px;
  margin-right: 12px;
  padding: 9px 14px;
}

.files-actions input[type="file"]::file-selector-button {
  border: 1px solid var(--border);
  background: var(--surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 8px;
  margin-right: 12px;
  padding: 9px 14px;
}

.files-list button {
  border: 1px solid var(--border);
  color: inherit;
  font: inherit;
  cursor: pointer;
  background: none;
  border-radius: 8px;
  padding: 9px 12px;
}

.files-list button:hover {
  background: var(--surface);
}

.files-list button:disabled {
  opacity: .55;
  cursor: wait;
}

.connections-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.connection-card {
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  border-radius: 14px;
  flex-direction: column;
  gap: .75rem;
  padding: 1.5rem;
}

.connection-heading, .connection-actions {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: .75rem;
}

.connection-heading {
  justify-content: space-between;
}

.connection-card h3, .connection-card p {
  margin: 0;
}

.connection-card strong {
  overflow-wrap: anywhere;
}

.connection-actions {
  margin-top: auto;
  padding-top: .75rem;
}

.connection-note {
  border-left: 3px solid var(--accent-text);
  background: var(--surface);
  border-radius: 6px;
  padding: 1rem;
}

@media (max-width: 720px) {
  .connections-grid {
    grid-template-columns: 1fr;
  }
}

.calendar-publication {
  display: grid;
  border-bottom: 1px solid var(--border);
  gap: .6rem;
  padding: 1rem 0;
}

.calendar-publication > button {
  justify-self: start;
}

.calendar-publication strong {
  overflow-wrap: anywhere;
}

.connection-heading h3, .connection-heading h4 {
  overflow-wrap: anywhere;
  min-width: 0;
}

.browser-session-card {
  display: flex;
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items:  center;
  gap: 1rem;
  padding: 1rem 0;
}

.browser-dialog {
  width: min(95vw, 1320px);
  max-width: 1320px;
}

.browser-preview {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  overflow: hidden;
  border-radius: 8px;
  min-height: 180px;
}

.browser-preview img {
  display: block;
  cursor: crosshair;
  width: 100%;
  height: auto;
}

.browser-preview p {
  padding: 2rem;
}

.browser-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0;
}

.browser-preview {
  position: relative;
}

.browser-focus-overlay {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  inset: 0;
}

.browser-focus-status {
  border-left: 3px solid #f5b942;
  padding: .65rem;
}

.assist {
  min-width: 0;
}

.assist-tabs {
  margin-bottom: 28px;
}

.assist-tabs button {
  display: inline-flex;
  white-space: nowrap;
  align-items:  center;
  gap: 7px;
}

.tab-count {
  background: var(--surface-muted);
  color: var(--text);
  text-align: center;
  border-radius: 9px;
  min-width: 18px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 650;
}

.tab-count.is-urgent {
  color: #fff;
  background: #c91422;
}

.assist-stack {
  display: grid;
  gap: 16px;
}

.assist-stack > .message {
  margin: 0;
}

.assist-intro {
  max-width: 60ch;
  margin: 0 0 4px;
}

.assist-empty {
  border: 1px dashed var(--border);
  text-align: center;
  border-radius: 10px;
  padding: 40px 28px;
}

.assist-empty h2 {
  margin: 0 0 6px;
  font-size: 15px;
}

.assist-empty p {
  max-width: 46ch;
  margin: 0 auto;
}

.assist-bar {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 16px;
}

.assist-bar p {
  margin: 0;
}

.assist code, .assist-panel code {
  background: var(--surface-muted);
  color: var(--text);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
}

button.link {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: none;
  padding: 10px 6px;
  font-size: 12px;
}

button.link:hover {
  color: var(--text);
}

.secondary.danger {
  color: var(--danger);
}

.secondary.danger:hover {
  border-color: var(--danger);
}

.site-name {
  display: inline-block;
  color: var(--text);
  overflow-wrap: anywhere;
  font-family: Manrope, sans-serif;
}

.site-name-large {
  display: block;
  letter-spacing: -.8px;
  margin: 2px 0 10px;
  font-size: 30px;
  line-height: 1.15;
}

.site-name-small {
  letter-spacing: -.1px;
  font-size: 14px;
}

.site-prefix {
  color: var(--muted);
  font-weight: 500;
}

.site-core {
  font-weight: 750;
}

.ask {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid #c91422;
  border-radius: 10px;
  padding: 24px 26px 20px;
}

.ask p {
  max-width: 64ch;
  margin: 0 0 8px;
}

.ask .ask-lede {
  color: var(--text);
  margin: 0;
  font-size: 13.5px;
}

.ask-lede strong {
  font-weight: 600;
}

.ask .ask-task {
  font-size: 12px;
}

.ask-review {
  border-top: 1px solid var(--border);
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
}

.ask-review p {
  margin: 0;
}

.ask-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
}

.ask-facts dt {
  color: var(--muted);
  font-size: 11px;
}

.ask-facts dd {
  color: var(--text);
  overflow-wrap: anywhere;
  margin: 3px 0 0;
  font-size: 13px;
}

.ask .ask-consequence {
  color: var(--text);
  background: var(--surface-muted);
  border-radius: 7px;
  max-width: none;
  padding: 12px 14px;
}

.ask-choice {
  border: none;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.ask-choice legend {
  color: var(--muted);
  margin-bottom: 8px;
  padding: 0;
  font-size: 11px;
}

.ask-choice label {
  display: flex;
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--text);
  border-radius: 8px;
  align-items:  flex-start;
  gap: 10px;
  padding: 12px 14px;
}

.ask-choice label.is-on {
  border-color: var(--accent-text);
  background: var(--accent-soft);
}

.ask-choice label.is-off {
  cursor: not-allowed;
  opacity: .6;
}

.ask-choice input {
  accent-color: #c91422;
  width: auto;
  margin: 2px 0 0;
}

.ask-choice b {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.ask-choice small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.5;
}

.ask-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:  center;
  gap: 12px;
  margin-top: 16px;
}

.ask-time {
  color: var(--warning);
  font-size: 11.5px;
}

.ask-actions, .req-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items:  center;
  gap: 8px;
}

.ask .message.error {
  margin: 14px 0 0;
}

.status {
  display: inline-flex;
  color: var(--text);
  align-items:  center;
  gap: 7px;
  font-size: 12px;
}

.status:before {
  content: "";
  background: var(--muted);
  border-radius: 50%;
  flex: none;
  width: 7px;
  height: 7px;
}

.status-waiting:before {
  background: var(--warning);
}

.status-ready:before {
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: #c91422;
}

.status-done:before {
  background: var(--ok);
}

.status-stopped {
  color: var(--muted);
}

.req {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 22px;
}

.req-ready {
  border-color: var(--accent-text);
}

.req-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.req .req-meta {
  margin: 6px 0 0;
  font-size: 12px;
}

.req .req-next {
  color: var(--text);
  max-width: 64ch;
  margin: 10px 0 0;
  font-size: 13px;
}

.req .req-actions {
  margin-top: 12px;
}

.req-history {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.req-history h3 {
  display: flex;
  align-items:  center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
}

.req-history h3 .count {
  margin: 0;
  font-size: 11.5px;
  font-weight: 500;
}

.req-history ul {
  list-style: none;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  border-radius: 14px;
  margin: 0;
  padding: 0;
}

.req-history li {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto 120px;
  align-items:  center;
  gap: 12px;
  padding: 11px 16px;
  font-size: 12.5px;
}

.req-history li + li {
  border-top: 1px solid var(--border);
}

.req-history-who {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.req-history time {
  color: var(--muted);
  text-align: right;
  font-size: 11.5px;
}

.req-new, .pairing {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  gap: 16px;
  margin: 0;
  padding: 24px 26px;
}

.req-new h2, .pairing h2 {
  margin: 0;
}

.pairing {
  border-left: 3px solid #c91422;
}

.pairing p {
  max-width: 62ch;
  margin: 0;
}

.seg {
  display: inline-flex;
  background: var(--surface-muted);
  border-radius: 8px;
  justify-self: start;
  padding: 3px;
}

.seg label {
  display: block;
  color: var(--muted);
  cursor: pointer;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 12px;
}

.seg label.is-on {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px #0000001f;
}

.seg label:has(input:focus-visible) {
  outline: 2px solid #e31826;
  outline-offset: 1px;
}

.seg input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.grants {
  list-style: none;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  margin: 0;
  padding: 0;
}

.grants li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  border-bottom: 1px solid var(--border);
  align-items:  center;
  gap: 16px;
  padding: 16px 20px;
}

.grants li:last-child {
  border-bottom: none;
}

.grant-main {
  display: grid;
  gap: 3px;
  min-width: 0;
  font-size: 13px;
}

.grant-main strong {
  overflow-wrap: anywhere;
  font-weight: 600;
}

.grant-main > span {
  color: var(--muted);
  font-size: 12px;
}

.grant-main .grant-kind {
  font-size: 11.5px;
}

.grant-main .grant-browser {
  color: var(--warning);
}

.grant-limit {
  color: var(--muted);
  text-align: right;
  font-size: 11.5px;
}

.setup-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-bottom: 1px solid var(--border);
  gap: 24px;
  padding: 24px 0;
}

.setup-block:last-child {
  border-bottom: none;
}

.setup-block:first-child, .pairing + .setup-block {
  padding-top: 4px;
}

.setup-block h2 {
  margin: 0 0 4px;
  font-size: 15px;
}

.setup-block p {
  margin: 0;
}

.setup-wide {
  grid-template-columns: 1fr;
  gap: 14px;
}

.terminals {
  list-style: none;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  margin: 0;
  padding: 0;
}

.terminal {
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
}

.terminal:last-child {
  border-bottom: none;
}

.terminal-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:  center;
  gap: 16px;
}

.terminal-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.terminal-main strong {
  overflow-wrap: anywhere;
  font-size: 13.5px;
  font-weight: 600;
}

.terminal-main span {
  color: var(--muted);
  font-size: 12px;
}

.terminal-main .terminal-scope {
  color: var(--text);
}

.terminal-main strong.is-unnamed {
  color: var(--muted);
}

.terminal-main .terminal-hint {
  color: var(--warning);
}

.terminal-confirm {
  background: var(--danger-bg);
  border-radius: 8px;
  margin-top: 14px;
  padding: 14px;
}

.terminal-confirm p {
  color: var(--text);
  margin: 0 0 8px;
}

.terminal-form {
  border-top: 1px solid var(--border);
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
}

.terminal-form p {
  color: var(--text);
  margin: 0;
}

.terminal-companies {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  color: var(--text);
  gap: 8px 16px;
  font-size: 12.5px;
}

.install {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.install-command {
  display: flex;
  background: var(--surface-muted);
  border-radius: 8px;
  align-items:  flex-start;
  gap: 8px;
  padding: 10px 10px 10px 14px;
}

.install-command pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

.install-command pre code {
  background: none;
  padding: 0;
}

.install-command button {
  flex: none;
  padding: 6px 12px;
}

.setup-side {
  display: grid;
  align-content:  start;
  justify-items: start;
  gap: 10px;
}

.setup-side .setup-state {
  color: var(--text);
  font-size: 13px;
}

.setup-steps {
  display: grid;
  color: var(--text);
  gap: 10px;
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.6;
}

.setup-steps a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 650px) {
  .ask, .req-new, .pairing {
    padding: 20px 18px 18px;
  }

  .site-name-large {
    font-size: 24px;
  }

  .ask-facts, .setup-block {
    grid-template-columns: 1fr;
  }

  .assist-bar {
    flex-direction: column;
    align-items:  flex-start;
  }

  .ask-foot {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .ask-actions, .req-actions {
    justify-content: stretch;
  }

  .ask-actions button, .req-actions button {
    flex: 1;
  }

  .grants li {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .grant-limit {
    text-align: left;
  }

  .req-history li {
    grid-template-columns: 1fr auto;
  }

  .req-history-who {
    grid-column: 1;
  }
}

.model-field {
  display: grid;
  color: var(--muted);
  gap: 7px;
  font-size: 11px;
}

.model-picker {
  position: relative;
}

.model-trigger {
  display: flex;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  border-radius: 5px;
  align-items:  center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  font-size: 13px;
}

.model-trigger:hover:not(:disabled) {
  border-color: var(--border-hover);
}

.model-trigger-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.model-trigger svg {
  flex: none;
}

.model-trigger .model-chevron {
  color: var(--muted);
  margin-left: auto;
}

.model-trigger-icon, .model-recommended-icon {
  display: inline-flex;
  color: #c91422;
}

.provider-icon {
  flex: none;
}

.model-menu {
  position: absolute;
  z-index: 30;
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  border-radius: 10px;
  gap: 6px;
  width: min(460px, 100vw - 32px);
  padding: 8px;
  top: calc(100% + 6px);
  right: 0;
  box-shadow: 0 12px 32px #0000002e;
}

.model-search {
  font-size: 13px;
}

.model-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  max-height: min(460px, 60vh);
}

.model-group {
  display: flex;
  color: var(--muted);
  justify-content: space-between;
  gap: 8px;
  padding: 10px 8px 4px;
  font-size: 11px;
  font-weight: 600;
}

.model-group span {
  color: var(--warning);
  font-weight: 450;
}

.model-option {
  display: flex;
  cursor: pointer;
  border-radius: 6px;
  align-items:  center;
  gap: 10px;
  padding: 8px;
}

.model-option.is-active {
  background: var(--surface-muted);
}

.model-option.is-selected {
  box-shadow: inset 2px 0 #c91422;
}

.model-option[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .5;
}

.model-option-main {
  display: grid;
  gap: 1px;
  min-width: 0;
  margin-right: auto;
}

.model-option-main b {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.model-option-main small {
  color: var(--muted);
  font-size: 11.5px;
}

.model-context {
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 9px;
  flex: none;
  padding: 1px 7px;
  font-size: 10.5px;
}

.model-recommended {
  margin-bottom: 4px;
}

.model-recommended-icon {
  background: var(--accent-soft);
  border-radius: 7px;
  flex: none;
  justify-content: center;
  align-items:  center;
  width: 28px;
  height: 28px;
}

.model-section {
  color: var(--muted);
  padding: 8px 8px 6px;
  font-size: 11px;
  font-weight: 600;
}

.model-featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 6px;
  padding: 0 2px 6px;
}

.model-option.model-card {
  display: grid;
  border: 1px solid var(--border);
  border-radius: 8px;
  align-items:  start;
  gap: 4px;
  padding: 10px;
}

.model-option.model-card.is-selected {
  box-shadow: none;
  border-color: #c91422;
}

.model-card-head {
  display: flex;
  color: var(--text);
  align-items:  center;
  gap: 7px;
}

.model-card-head b {
  font-size: 13px;
  font-weight: 600;
}

.model-card small {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}

.model-tabs {
  position: sticky;
  z-index: 1;
  display: flex;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  gap: 4px;
  margin: 4px 0;
  padding: 4px 0 0;
  top: 0;
}

.model-tabs button {
  display: inline-flex;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid #0000;
  border-radius: 0;
  align-items:  center;
  gap: 7px;
  padding: 8px 10px;
  font-size: 12.5px;
}

.model-tabs button[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: #c91422;
}

.model-note {
  color: var(--warning);
  margin: 6px 8px;
  font-size: 12px;
}

.model-empty {
  margin: 0;
  padding: 12px 8px;
}

.model-footer {
  display: flex;
  border-top: 1px solid var(--border);
  color: var(--muted);
  justify-content: space-between;
  align-items:  center;
  gap: 10px;
  padding: 8px 8px 4px;
  font-size: 12px;
}

.model-footer .text-button {
  font-size: 12px;
}

.model-capabilities {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
}

.model-capability {
  display: inline-grid;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  flex: none;
  place-items:  center;
  width: 22px;
  height: 22px;
}

.model-capability svg {
  width: 12px;
  height: 12px;
}

.model-capability[data-capability="Image generation"] {
  color: var(--accent-text);
  border-color: color-mix(in srgb, var(--accent-text) 35%, var(--border));
}

.model-option > .model-capabilities {
  flex: none;
  justify-content: flex-end;
  max-width: 150px;
}

.model-card .model-capabilities {
  margin-top: 4px;
}

.model-guide {
  display: grid;
  gap: 14px;
  padding: 6px 8px 10px;
}

.model-guide h4 {
  color: var(--text);
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 650;
}

.model-guide dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.model-guide dt {
  display: flex;
  color: var(--text);
  align-items:  center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
}

.model-guide dd {
  color: var(--muted);
  margin: 2px 0 0 30px;
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 650px) {
  .model-menu {
    left: 0;
    right: auto;
  }
}

.due-state {
  font-weight: 600;
}

.due-overdue {
  color: var(--danger);
}

.due-soon {
  color: var(--warning);
}

.task-dialog-actions .task-archive {
  color: var(--muted);
  margin-right: auto;
}

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

.glance-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
}

.glance-group h2 {
  color: var(--muted);
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
}

.glance-group p {
  margin: 0;
}

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

.glance-chips button {
  display: inline-flex;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  align-items: baseline;
  gap: 6px;
  padding: 7px 12px;
  font-size: 12.5px;
}

.glance-chips button:hover {
  border-color: var(--border-hover);
}

.glance-chips button strong {
  font-size: 15px;
}

.glance-chips button.attention {
  border-color: var(--warning);
  background: var(--warning-bg);
}

details.portfolio-footnote summary {
  cursor: pointer;
}

details.portfolio-footnote ul {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding-left: 18px;
}

@media (max-width: 650px) {
  .portfolio-glance {
    grid-template-columns: 1fr;
  }
}

main {
  position: relative;
}

.page-title .title-row {
  padding-right: 104px;
}

.topbar {
  position: absolute;
  z-index: 30;
  display: flex;
  align-items:  center;
  gap: 10px;
  top: 37px;
  right: 40px;
}

@media (max-width: 1000px) {
  .topbar {
    right: 25px;
  }
}

@media (max-width: 650px) {
  .topbar {
    top: 25px;
    right: 18px;
  }

  .page-title {
    padding-top: 84px;
  }
}

.account-menu {
  position: relative;
}

.account-avatar {
  position: relative;
  border: 1px solid var(--border);
  background: var(--surface-muted);
  color: var(--text);
  letter-spacing: .3px;
  display: inline-flex;
  border-radius: 50%;
  justify-content: center;
  align-items:  center;
  width: 38px;
  height: 38px;
  font: 650 13px Manrope, sans-serif;
}

.account-avatar:hover, .account-avatar[aria-expanded="true"] {
  border-color: var(--border-hover);
}

.account-sync {
  position: absolute;
  background: var(--warning);
  border: 2px solid var(--page);
  border-radius: 50%;
  width: 10px;
  height: 10px;
  bottom: 0;
  right: 0;
}

.account-sync.is-live {
  background: #328678;
}

.account-dropdown {
  position: absolute;
  z-index: 40;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 292px;
  padding: 8px;
  top: calc(100% + 10px);
  right: 0;
  box-shadow: 0 18px 44px #00000029;
}

.account-who {
  display: flex;
  align-items:  center;
  gap: 12px;
  padding: 10px 10px 14px;
}

.account-who-avatar {
  display: grid;
  background: var(--accent-soft);
  color: var(--accent-text);
  border-radius: 50%;
  flex: none;
  place-items:  center;
  width: 44px;
  height: 44px;
  font-size: 15px;
  font-weight: 650;
}

.account-who-text {
  display: grid;
  color: var(--muted);
  gap: 2px;
  min-width: 0;
  font-size: 12.5px;
}

.account-who-text strong {
  color: var(--text);
  font-size: 14.5px;
  font-weight: 650;
}

.account-who-text > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-who-tags {
  display: flex;
  align-items:  center;
  gap: 8px;
  margin-top: 6px;
}

.account-role {
  background: var(--surface-muted);
  color: var(--text);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 550;
}

.account-live {
  display: inline-flex;
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  color: var(--warning);
  border-radius: 999px;
  align-items:  center;
  gap: 5px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 550;
}

.account-live > span {
  background: currentColor;
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.account-live.is-live {
  color: #328678;
  background: #3286781f;
}

.account-theme {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--surface-muted);
  border-radius: 10px;
  gap: 4px;
  margin: 2px 2px 8px;
  padding: 4px;
}

.account-theme label {
  display: grid;
  color: var(--muted);
  cursor: pointer;
  border-radius: 7px;
  justify-items: center;
  gap: 4px;
  padding: 8px 4px 7px;
  font-size: 11.5px;
  font-weight: 550;
}

.account-theme label svg {
  width: 17px;
  height: 17px;
}

.account-theme label:hover {
  color: var(--text);
}

.account-theme label.is-on {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px #0000001a;
}

.account-theme label:has(input:focus-visible) {
  outline: 2px solid var(--accent-text);
  outline-offset: 1px;
}

.account-theme input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
}

.account-balance {
  display: grid;
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  border-radius: 10px;
  gap: 7px;
  margin: 0 2px 8px;
  padding: 10px 12px 11px;
}

.account-balance:hover {
  border-color: var(--border-hover);
  background: var(--surface-muted);
}

.account-balance-row {
  display: flex;
  color: var(--muted);
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
}

.account-balance-row strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.account-balance-row strong.is-out {
  color: var(--danger);
}

.account-balance .usage-bar {
  background: var(--border);
  width: 100%;
  max-width: none;
  margin: 0;
}

.account-balance small {
  color: var(--muted);
  font-size: 11.5px;
}

.account-signout {
  display: flex;
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  color: var(--danger);
  border-radius: 9px;
  justify-content: center;
  align-items:  center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
}

.account-signout svg {
  width: 16px;
  height: 16px;
}

.account-signout:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
}

aside .brand {
  text-align: center;
  align-items:  center;
}

.company-mark {
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 18px;
  height: 18px;
}

.company-mark img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.company-mark img.logo-dark {
  display: none;
}

:root[data-theme="dark"] .company-mark img.logo-dark {
  display: block;
}

:root[data-theme="dark"] .company-mark img.logo-light {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .company-mark img.logo-dark {
    display: block;
  }

  :root:not([data-theme="light"]) .company-mark img.logo-light {
    display: none;
  }
}

aside .brand small {
  padding-left: 3px;
}

@media (min-width: 651px) {
  aside {
    overflow-y: auto;
    padding: 26px 18px 16px;
  }

  aside .brand img {
    max-width: 190px;
  }

  aside nav {
    gap: 2px;
  }

  aside nav a {
    padding: 7px 12px;
    line-height: 20px;
  }

  aside nav a span {
    text-align: center;
    width: 20px;
    font-size: 17px;
    line-height: 20px;
  }

  aside .workspace-label {
    margin: 22px 11px 8px;
  }

  aside .company {
    gap: 12px;
    padding: 7px 12px;
    line-height: 18px;
  }

  aside .company-mark {
    width: 20px;
    height: 18px;
  }

  aside .company-dot {
    margin: 0 6px;
  }

  .company-list {
    overflow-y: auto;
    display: grid;
    scrollbar-width: thin;
    flex: 1;
    align-content:  start;
    gap: 2px;
    min-height: 136px;
  }
}

.nav-icon {
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
}

.nav-icon svg {
  stroke-width: 1.9;
  width: 18px;
  height: 18px;
}

.inline-icon {
  vertical-align: -.14em;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}

.venture-logo .inline-icon {
  width: 22px;
  height: 22px;
}

.button-link {
  display: inline-flex;
  white-space: nowrap;
  text-decoration: none;
  justify-content: center;
  align-items:  center;
}

.person-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.person-access {
  margin-top: 25px;
}

.person-access h3 {
  margin: 0;
}

.person-access > .toolbar {
  margin-bottom: 4px;
}

.person-access .muted {
  margin: 14px 0 0;
}

.give-access {
  border: 1px solid var(--border);
  background: var(--page);
  grid-template-columns: 1fr 1fr;
  border-radius: 10px;
  margin-top: 18px;
  padding: 20px;
}

.give-access > p, .give-access-actions {
  grid-column: 1 / -1;
}

.give-access label:has(textarea) {
  grid-column: 1 / -1;
}

.give-access > p {
  margin: 0;
}

.give-access-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.loose-accounts-head {
  margin-top: 34px;
}

.loose-accounts-head h3 {
  margin: 0 0 4px;
}

.loose-accounts-head p {
  margin: 0;
}

@media (max-width: 640px) {
  .give-access {
    grid-template-columns: 1fr;
  }
}

.profile {
  display: grid;
  gap: 22px;
}

.profile-head {
  display: flex;
  font-size: inherit;
  color: var(--text);
  border-bottom: 0;
  justify-content: flex-start;
  align-items:  center;
  gap: 18px;
  height: auto;
}

.profile-head h2 {
  margin: 0 0 4px;
  font-size: 22px;
}

.profile-head p {
  color: var(--muted);
  overflow-wrap: anywhere;
  margin: 0;
}

.profile-avatar {
  display: inline-flex;
  background: var(--accent-soft);
  color: var(--accent-text);
  letter-spacing: .02em;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 56px;
  height: 56px;
  font-size: 19px;
  font-weight: 650;
}

.profile-section h2 {
  margin: 0 0 6px;
  font-size: 17px;
}

.profile-section > .toolbar {
  align-items:  flex-start;
  margin-bottom: 6px;
}

.profile-section > .toolbar p, .profile-section > p.muted {
  margin: 0 0 6px;
}

.profile-row {
  display: flex;
  border-bottom: 1px solid var(--border);
  align-items:  center;
  gap: 14px;
  padding: 15px 0;
}

.profile-row:last-of-type {
  border-bottom: 0;
}

.profile-row > div {
  overflow-wrap: anywhere;
  flex: 1;
  min-width: 0;
}

.profile-row small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}

.profile-row.is-off b, .profile-row.is-off .provider-mark {
  opacity: .55;
}

.provider-mark {
  border: 1px solid var(--border);
  background: var(--surface);
  display: inline-flex;
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 34px;
  height: 34px;
}

.profile-sessions, .profile-subhead {
  margin-top: 22px;
}

.profile-sessions h3, .profile-subhead {
  color: var(--muted);
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: 600;
}

.profile-sessions > .secondary {
  margin-top: 10px;
}

.profile-footnote {
  margin-top: 16px;
  font-size: 12px;
}

.profile-row .text-button, .person-access .text-button {
  font-size: 13px;
  font-weight: 550;
}

.person-access .access-row select {
  min-width: 112px;
  padding: 8px 10px;
  font-size: 13px;
}

@media (max-width: 640px) {
  .profile-row {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .profile-row > div {
    flex: calc(100% - 48px);
  }

  .profile-row > .directory-badge, .profile-row > .text-button:first-of-type, .profile-row > .button-link {
    margin-left: 48px;
  }

  .profile-row > div:first-child + .text-button, .profile-row > div:first-child + .directory-badge {
    margin-left: 0;
  }

  .profile-section > .toolbar {
    flex-wrap: wrap;
    gap: 12px;
  }
}

.provider-signin {
  cursor: pointer;
  width: 100%;
}

.provider-signin .provider-mark {
  color: var(--text);
  background: none;
  border: 0;
  width: 20px;
  height: 20px;
}

.provider-signin:disabled {
  opacity: .6;
  cursor: wait;
}

.profile-section > .toolbar > button, .profile-section > .toolbar > .button-link {
  white-space: nowrap;
  flex-shrink: 0;
}

.passkey-rename {
  display: flex;
  flex: 1;
  align-items:  center;
  gap: 8px;
  margin: 0;
}

.passkey-rename input {
  flex: 1;
  min-width: 0;
}

.people-table-wrap {
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  border-radius: 10px;
}

.people-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}

.people-table th {
  text-align: left;
  color: var(--muted);
  background: var(--page);
  border-bottom: 1px solid var(--border);
  padding: 11px 18px;
  font-size: 12px;
  font-weight: 600;
}

.people-table td {
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  padding: 12px 18px;
}

.people-table tbody tr:last-child td {
  border-bottom: 0;
}

.people-table tr.is-openable {
  cursor: pointer;
}

.people-table tr.is-openable:hover {
  background: color-mix(in srgb, var(--surface-muted) 45%, var(--surface));
}

.people-name {
  display: flex;
  align-items:  center;
  gap: 12px;
  min-width: 0;
}

.people-name .person-avatar {
  width: 34px;
  height: 34px;
  font-size: 12px;
}

.people-name > div {
  min-width: 0;
}

.people-name small {
  display: block;
  color: var(--muted);
  overflow-wrap: anywhere;
  margin-top: 2px;
}

.people-open {
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-weight: 600;
}

.people-open:hover {
  text-decoration: underline;
}

.people-table .company-badges {
  margin: 0;
}

@media (max-width: 720px) {
  .people-table thead {
    display: none;
  }

  .people-table tr {
    display: grid;
    border-bottom: 1px solid var(--border);
    gap: 8px;
    padding: 14px 16px;
  }

  .people-table tbody tr:last-child {
    border-bottom: 0;
  }

  .people-table td {
    display: flex;
    border: 0;
    align-items:  center;
    gap: 10px;
    padding: 0;
  }

  .people-table td[data-label]:before {
    content: attr(data-label);
    color: var(--muted);
    min-width: 76px;
    font-size: 11px;
  }
}

.sign-in-list {
  display: grid;
  list-style: none;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  font-size: 13px;
}

.sign-in-list li {
  display: flex;
  overflow-wrap: anywhere;
  align-items:  center;
  gap: 8px;
}

.sign-in-list .provider-mark {
  border-radius: 6px;
  width: 24px;
  height: 24px;
}

.sign-in-list .provider-mark img, .sign-in-list .provider-mark svg {
  width: 13px;
  height: 13px;
}

.invite-builder {
  display: grid;
  border: 1px solid var(--border);
  background: var(--page);
  border-radius: 10px;
  gap: 14px;
  margin-top: 18px;
  padding: 20px;
}

.invite-builder h4 {
  margin: 0;
  font-size: 15px;
}

.invite-builder > p {
  margin: 0;
}

.invite-places {
  display: grid;
  border: 0;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.invite-places legend {
  color: var(--muted);
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
}

.invite-place {
  display: flex;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  justify-content: space-between;
  align-items:  center;
  gap: 12px;
  min-height: 40px;
  padding: 4px 10px;
}

.invite-place.is-on {
  border-color: var(--accent-text);
}

.invite-place label {
  display: flex;
  cursor: pointer;
  align-items:  center;
  gap: 10px;
  font-size: 13px;
}

.invite-place select {
  width: auto;
  min-width: 104px;
  padding: 6px 8px;
  font-size: 13px;
}

.invite-preview {
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  border-radius: 10px;
}

.invite-preview dl {
  display: grid;
  border-bottom: 1px solid var(--border);
  gap: 4px;
  margin: 0;
  padding: 12px 16px;
  font-size: 13px;
}

.invite-preview dl div {
  display: flex;
  gap: 10px;
}

.invite-preview dt {
  color: var(--muted);
  min-width: 56px;
}

.invite-preview dd {
  overflow-wrap: anywhere;
  margin: 0;
}

.invite-preview-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  padding: 16px;
  font-size: 13px;
  line-height: 1.6;
}

.invite-code {
  display: grid;
  gap: 2px;
}

.invite-code span, .invite-code small {
  color: var(--muted);
  font-size: 12px;
}

.invite-code strong {
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  font-size: 22px;
}

.invite-places-list {
  display: grid;
  list-style: none;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
}

.invite-places-list li {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
}

.invite-places-list span {
  color: var(--muted);
  font-size: 13px;
}

.invite-places {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.invite-places legend {
  grid-column: 1 / -1;
}

.invite-place label {
  text-align: left;
  flex: 1;
  justify-content: flex-start;
  min-width: 0;
}

.invite-place input[type="checkbox"] {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
}

.bell {
  position: relative;
}

.bell-button {
  position: relative;
  display: inline-flex;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 50%;
  justify-content: center;
  align-items:  center;
  width: 38px;
  height: 38px;
  font-size: 18px;
}

.bell-button:hover, .bell-button[aria-expanded="true"] {
  border-color: var(--border-hover);
}

.bell-badge {
  position: absolute;
  color: #fff;
  text-align: center;
  box-shadow: 0 0 0 2px var(--page);
  background: #c91422;
  border-radius: 9px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 18px;
  top: -4px;
  right: -5px;
}

.bell-panel {
  position: absolute;
  z-index: 40;
  display: grid;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  border-radius: 12px;
  width: min(400px, 100vw - 24px);
  top: calc(100% + 8px);
  right: -48px;
  box-shadow: 0 16px 40px #00000030;
}

.bell-head {
  display: flex;
  align-items:  center;
  gap: 6px;
  padding: 12px 12px 8px 16px;
}

.bell-head h2 {
  flex: 1;
  margin: 0;
  font-size: 15px;
}

.bell-head .text-button {
  color: var(--accent-text);
  font-size: 12.5px;
  font-weight: 550;
}

.bell-settings {
  display: inline-flex;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 6px;
  justify-content: center;
  align-items:  center;
  width: 30px;
  height: 30px;
  font-size: 16px;
}

.bell-settings:hover {
  background: var(--surface-muted);
  color: var(--text);
}

.bell-filter {
  justify-self: start;
  margin: 0 16px 8px;
}

.bell-panel .notice-list {
  overflow-y: auto;
  border-top: 1px solid var(--border);
  max-height: min(430px, 100vh - 220px);
}

.bell-empty {
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--muted);
  margin: 0;
  padding: 28px 16px;
  font-size: 13px;
}

.bell-all {
  border: 0;
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent-text);
  padding: 12px;
  font-size: 13px;
  font-weight: 600;
}

.bell-all:hover {
  background: var(--surface-muted);
}

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

.notice {
  display: flex;
  border-bottom: 1px solid var(--border);
  align-items:  flex-start;
}

.notice:last-child {
  border-bottom: 0;
}

.notice.is-unread {
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface));
}

.notice-open {
  display: flex;
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  flex: 1;
  gap: 12px;
  min-width: 0;
  padding: 12px 4px 12px 16px;
}

.notice:hover {
  background: var(--surface-muted);
}

.notice-icon {
  display: inline-flex;
  background: var(--surface-muted);
  color: var(--muted);
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 30px;
  height: 30px;
  font-size: 15px;
}

.notice-icon.kind-mention, .notice-icon.kind-assignment {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.notice-icon.kind-overdue {
  background: var(--danger-bg);
  color: var(--danger);
}

.notice-icon.kind-completion {
  background: var(--ok-bg);
  color: var(--ok);
}

.notice-icon.kind-assistant-approval, .notice-icon.kind-assistant-inspection, .notice-icon.kind-upcoming {
  background: var(--warning-bg);
  color: var(--warning);
}

.notice-text {
  display: grid;
  overflow-wrap: anywhere;
  gap: 3px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.4;
}

.notice-excerpt {
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.notice-count {
  color: var(--accent-text);
  font-weight: 600;
}

.notice-text time {
  color: var(--muted);
  font-size: 12px;
}

.notice-read {
  display: flex;
  background: none;
  border: 0;
  flex-shrink: 0;
  justify-content: center;
  align-self: stretch;
  align-items:  flex-start;
  width: 36px;
  padding-top: 18px;
}

.notice-read .dot, .notice-read .ring {
  border-radius: 50%;
  width: 9px;
  height: 9px;
}

.notice-read .dot {
  background: #c91422;
}

.notice-read .ring {
  border: 1.5px solid var(--border-hover);
  opacity: 0;
}

.notice:hover .notice-read .ring {
  opacity: 1;
}

.notice-read:focus-visible .ring {
  opacity: 1;
}

.notification-heading {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 12px;
  margin-bottom: 18px;
}

.notification-heading select {
  width: auto;
  min-width: 200px;
  padding: 8px 12px;
  font-size: 13px;
}

.notification-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.notice-day {
  margin-bottom: 22px;
}

.notice-day h3 {
  color: var(--muted);
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
}

.notice-day .notice-list {
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  border-radius: 10px;
}

.task-comments article.is-focused {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

nav a, .company {
  transition: background-color .12s, color .12s;
}

nav a:not(.active):hover, .company:not(.selected):hover {
  background: color-mix(in srgb, var(--surface-muted) 75%, transparent);
  color: var(--text);
}

nav a:not(.active):hover .nav-icon {
  color: var(--accent-text);
}

nav a.active:hover {
  background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface-muted));
}

@media (prefers-reduced-motion: reduce) {
  nav a, .company {
    transition: none;
  }
}

@media (max-width: 650px) {
  .page-title .eyebrow {
    display: flex;
    align-items:  center;
    min-height: 38px;
    padding-right: 96px;
  }

  .page-title .title-row {
    flex-wrap: wrap;
    align-items:  flex-start;
    padding-right: 0;
  }
}

.account-list {
  display: grid;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.account-list li {
  border-bottom: 1px solid var(--border);
}

.account-list li:last-child {
  border-bottom: 0;
}

.account-row {
  display: flex;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  align-items:  center;
  gap: 14px;
  width: 100%;
  padding: 14px 4px;
}

.account-row:hover .account-manage {
  color: var(--text);
}

.account-row-text {
  display: grid;
  overflow-wrap: anywhere;
  flex: 1;
  gap: 6px;
  min-width: 0;
}

.account-uses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.account-manage {
  color: var(--muted);
  font-size: 13px;
  font-weight: 550;
}

.account-detail {
  display: grid;
  border: 1px solid var(--border);
  background: var(--page);
  border-radius: 10px;
  margin: 0 0 14px 48px;
}

.account-capability {
  display: flex;
  border-bottom: 1px solid var(--border);
  align-items:  center;
  gap: 12px;
  padding: 12px 14px;
}

.account-capability:last-child {
  border-bottom: 0;
}

.account-capability > div {
  flex: 1;
  min-width: 0;
}

.account-capability small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
}

.account-add {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.account-add .button-link {
  gap: 8px;
}

.account-add .provider-mark {
  background: none;
  border: 0;
  width: 22px;
  height: 22px;
}

@media (max-width: 640px) {
  .account-detail {
    margin-left: 0;
  }
}

.account-capability .text-button, .account-capability .muted {
  font-size: 13px;
  font-weight: 550;
}

.account-dialog {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 14px;
  width: min(520px, 100vw - 32px);
  max-height: calc(100dvh - 40px);
  padding: 22px;
  box-shadow: 0 24px 80px #0003;
}

.account-dialog::backdrop {
  background: #18181b80;
}

.account-dialog-head {
  display: flex;
  align-items:  center;
  gap: 12px;
  margin-bottom: 16px;
}

.account-dialog-head > div {
  flex: 1;
  min-width: 0;
}

.account-dialog-head h2 {
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 16px;
}

.account-dialog-head small {
  color: var(--muted);
}

.account-dialog .account-detail {
  margin: 0;
}

.account-dialog .message {
  margin-top: 12px;
}

.account-consent {
  margin: 14px 0 0;
  font-size: 12px;
}

.account-confirm {
  display: flex;
  align-items:  center;
  gap: 4px;
  font-size: 13px;
}

.profile-section > .toolbar {
  flex-wrap: wrap;
  align-items:  flex-start;
  gap: 12px 20px;
}

.profile-section > .toolbar > div:first-child {
  flex: 280px;
}

.profile-section > .toolbar .account-add {
  flex: 0 auto;
  justify-content: flex-end;
  margin-top: 0;
}

@media (max-width: 640px) {
  .profile-section > .toolbar .account-add {
    width: 100%;
  }
}

.fieldset-hint {
  margin: 0 0 8px;
  font-size: 12px;
}

.code-tab {
  display: grid;
  gap: 18px;
}

.code-repos h3, .code-library h3, .code-empty h3 {
  margin: 0 0 4px;
}

.code-repos p, .code-empty p {
  margin: 0;
}

.code-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 12px;
}

.code-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px;
}

.code-chip b {
  color: var(--text);
}

.code-chip:hover {
  border-color: var(--border-hover);
}

.code-chip.is-on {
  border-color: var(--accent-text);
  background: var(--accent-soft);
  color: var(--accent-text);
}

.code-search {
  width: min(360px, 100%);
  margin-bottom: 12px;
}

.code-table td {
  font-size: 12.5px;
}

.code-description {
  display: block;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 420px;
  margin-top: 3px;
}

.license-badge {
  display: inline-block;
  background: var(--surface-muted);
  color: var(--muted);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
}

.license-badge.tier-bsl {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.license-badge.tier-apache {
  background: var(--warning-bg);
  color: var(--warning);
}

.license-badge.tier-mit {
  background: var(--ok-bg);
  color: var(--ok);
}

.code-next {
  margin: 14px 0 0;
  font-size: 12px;
}

.code-dialog {
  width: min(680px, 100vw - 32px);
}

.code-dialog h3 {
  color: var(--muted);
  margin: 18px 0 8px;
  font-size: 13px;
}

.code-links {
  display: flex;
  gap: 16px;
  font-size: 13px;
}

.code-releases, .code-usage {
  display: grid;
  list-style: none;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-size: 13px;
}

.code-releases ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.code-kind {
  display: inline-block;
  text-transform: capitalize;
  color: var(--muted);
  min-width: 64px;
  font-size: 11px;
}

.code-usage li {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 10px;
}

.code-usage .muted {
  font-size: 12px;
}

.code-prs {
  display: grid;
  list-style: none;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-size: 13px;
}

.code-prs li {
  display: grid;
  gap: 2px;
}

.code-prs .muted {
  font-size: 12px;
}

.code-actions {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 8px;
  margin: 14px 0 4px;
}

.code-action-note {
  flex-basis: 100%;
  margin: 4px 0 0;
  font-size: 13px;
}

.admin-page {
  display: grid;
  gap: 18px;
}

.admin-page .panel h2 {
  margin: 0 0 8px;
  font-size: 15px;
}

.admin-page .panel > p.muted {
  margin: 0 0 14px;
  font-size: 13px;
}

.admin-summary {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 16px 28px;
}

.admin-month {
  display: flex;
  align-items:  center;
  gap: 6px;
}

.admin-month h2 {
  text-align: center;
  min-width: 150px;
}

.admin-page .admin-month h2 {
  margin: 0;
}

.admin-figures {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  gap: 12px 28px;
  margin: 0;
}

.admin-figures dt {
  color: var(--muted);
  font-size: 12px;
}

.admin-figures dd {
  margin: 2px 0 0;
  font-size: 20px;
  font-weight: 600;
}

.admin-figures dd small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.admin-breakdowns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.usage-bar {
  display: block;
  background: var(--surface-muted);
  overflow: hidden;
  border-radius: 3px;
  width: 100%;
  max-width: 140px;
  height: 6px;
  margin-top: 5px;
}

.usage-bar.wide {
  max-width: none;
  height: 8px;
  margin: 4px 0 10px;
}

.usage-bar > span {
  display: block;
  border-radius: inherit;
  background: var(--ok);
  height: 100%;
}

.usage-bar.high > span {
  background: var(--warning);
}

.usage-bar.full > span {
  background: var(--danger);
}

.usage-out {
  color: var(--danger);
  font-weight: 600;
}

.admin-usage-table td:last-child {
  text-align: right;
}

.usage-breakdown, .admin-list, .admin-status-list {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.usage-breakdown li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  font-size: 13px;
}

.usage-breakdown .usage-bar {
  grid-column: 1 / -1;
  max-width: none;
}

.usage-days {
  list-style: none;
  display: flex;
  align-items:  flex-end;
  gap: 4px;
  height: 120px;
  margin: 0;
  padding: 0;
}

.usage-days li {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: flex-end;
  align-items:  center;
  min-width: 0;
  height: 100%;
}

.usage-days li > span {
  background: var(--accent-text);
  opacity: .75;
  border-radius: 3px 3px 0 0;
  width: 100%;
  min-height: 2px;
}

.usage-days small {
  color: var(--muted);
  margin-top: 4px;
  font-size: 10px;
}

.admin-list li {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 6px 10px;
  font-size: 13px;
}

.admin-list li .text-button {
  margin-left: auto;
}

.admin-status-list li {
  display: flex;
  align-items:  flex-start;
  gap: 10px;
  font-size: 13px;
}

.admin-status-list li > div {
  display: grid;
}

.admin-status-list .directory-badge {
  text-align: center;
  min-width: 82px;
}

.admin-form {
  display: grid;
  gap: 12px;
}

.admin-inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items:  flex-end;
  gap: 10px;
  margin-top: 16px;
}

.admin-inline-form label {
  display: grid;
  flex: 1;
  gap: 4px;
  min-width: 220px;
  font-size: 13px;
}

.admin-target {
  overflow-wrap: anywhere;
  max-width: 280px;
}

@media (max-width: 650px) {
  .admin-summary {
    align-items: stretch;
  }

  .admin-month {
    justify-content: space-between;
  }
}

.juniper-button {
  display: inline-flex;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  border-radius: 19px;
  align-items:  center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  font-weight: 600;
}

.juniper-button:hover, .juniper-button[aria-expanded="true"] {
  border-color: var(--border-hover);
}

.juniper-button svg {
  color: var(--accent-text);
}

.juniper-button.busy svg {
  animation: 1.4s ease-in-out infinite juniper-pulse;
}

@keyframes juniper-pulse {
  50% {
    opacity: .35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .juniper-button.busy svg {
    animation: none;
  }
}

.juniper-log {
  overflow-y: auto;
  display: grid;
  flex: 1;
  align-content:  start;
  gap: 18px;
  padding: 20px max(28px, 50% - 410px);
}

.juniper-empty {
  display: grid;
  text-align: center;
  justify-items: center;
  gap: 10px;
  max-width: 460px;
  margin: 10vh auto 0;
}

.juniper-empty-mark {
  color: var(--accent-text);
  width: 34px;
  height: 34px;
}

.juniper-empty h3 {
  letter-spacing: -.2px;
  margin: 0;
  font-size: 22px;
}

.juniper-empty p {
  color: var(--muted);
  margin: 0 0 8px;
  line-height: 1.5;
}

.juniper-suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.juniper-suggestions button {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 13px;
}

.juniper-suggestions button:hover {
  border-color: var(--accent-text);
}

.juniper-turn {
  display: grid;
  gap: 8px;
}

.juniper-you, .juniper-reply {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: 12px;
  margin: 0;
  padding: 10px 13px;
  font-size: 14px;
  line-height: 1.5;
}

.juniper-you {
  background: var(--accent-soft);
  justify-self: end;
  max-width: 85%;
}

.juniper-reply {
  background: var(--surface-muted);
  justify-self: start;
  max-width: 95%;
}

.juniper-reply.pending {
  color: var(--muted);
}

.juniper-reply.failed {
  background: var(--danger-bg);
  color: var(--danger);
}

.juniper-actions {
  list-style: none;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.juniper-actions .text-button {
  text-align: left;
  color: var(--ok);
  font-size: 13px;
}

.juniper-error {
  margin: 0 20px 8px;
}

.juniper-compose {
  padding: 8px max(28px, 50% - 410px) 22px;
}

.juniper-box {
  display: grid;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 22px;
  gap: 6px;
  padding: 12px 12px 10px 16px;
  transition: border-color .12s, box-shadow .12s;
  box-shadow: 0 6px 24px #0000000f;
}

.juniper-box:focus-within {
  border-color: var(--border-hover);
  box-shadow: 0 8px 28px #00000017;
}

.juniper-box textarea {
  box-shadow: none;
  outline: none;
  resize: none;
  background: none;
  border: 0;
  border-radius: 0;
  width: 100%;
  min-height: 26px;
  max-height: 200px;
  padding: 4px 0;
  font-size: 14.5px;
  line-height: 1.5;
}

.juniper-box textarea:focus {
  outline: none;
  box-shadow: none;
}

.juniper-box-bar {
  display: flex;
  align-items:  center;
  gap: 6px;
}

.juniper-box-bar .juniper-send {
  margin-left: auto;
}

.juniper-box.is-dragging {
  border-color: var(--accent-text);
  background: color-mix(in srgb, var(--accent-text) 5%, var(--surface));
  border-style: dashed;
}

.juniper-attach {
  display: inline-grid;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 50%;
  place-items:  center;
  width: 32px;
  height: 32px;
  padding: 0;
}

.juniper-attach:hover:not(:disabled) {
  background: var(--surface-muted);
  color: var(--text);
}

.juniper-attach:disabled {
  opacity: .4;
  cursor: default;
}

.juniper-attach svg {
  width: 17px;
  height: 17px;
}

.juniper-attachments {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 2px;
  padding: 0;
}

.juniper-attachments li {
  position: relative;
  display: flex;
  border: 1px solid var(--border);
  background: var(--surface-muted);
  border-radius: 12px;
  align-items:  center;
  gap: 8px;
  max-width: 220px;
  padding: 6px 30px 6px 6px;
}

.juniper-attachments li.is-uploading {
  opacity: .75;
}

.juniper-attachments li.has-error {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}

.juniper-attachments li.has-error small {
  color: var(--danger);
}

.juniper-attachments img, .juniper-attachment-icon {
  object-fit: cover;
  border-radius: 8px;
  flex: none;
  width: 36px;
  height: 36px;
}

.juniper-attachment-icon {
  display: grid;
  background: var(--surface);
  color: var(--accent-text);
  place-items:  center;
}

.juniper-attachment-text {
  display: grid;
  min-width: 0;
  font-size: 12.5px;
}

.juniper-attachment-text span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text);
}

.juniper-attachment-text small {
  color: var(--muted);
  font-size: 11px;
}

.juniper-attachments li > svg.juniper-spin {
  position: absolute;
  color: var(--muted);
  width: 14px;
  height: 14px;
  right: 30px;
}

.juniper-spin {
  animation: .9s linear infinite juniper-spin;
}

@keyframes juniper-spin {
  to {
    transform: rotate(360deg);
  }
}

.juniper-attachments li button {
  position: absolute;
  display: grid;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 50%;
  place-items:  center;
  width: 20px;
  height: 20px;
  padding: 0;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
}

.juniper-attachments li button:hover {
  background: var(--surface);
  color: var(--text);
}

.juniper-files {
  display: flex;
  flex-wrap: wrap;
  align-items:  flex-start;
  gap: 8px;
}

.juniper-files.is-sent {
  justify-content: flex-end;
}

.juniper-file-image {
  display: grid;
  justify-items: start;
  gap: 6px;
  margin: 0;
}

.juniper-file-image > a {
  display: block;
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--surface-muted);
  border-radius: 12px;
}

.juniper-file-image figcaption a {
  display: inline-flex;
  color: var(--muted);
  text-decoration: none;
  align-items:  center;
  gap: 6px;
  font-size: 12.5px;
}

.juniper-file-image figcaption a:hover {
  color: var(--text);
}

.juniper-files.is-sent .juniper-file-image img {
  display: block;
  object-fit: cover;
  width: 120px;
  height: 120px;
}

.juniper-files.is-made .juniper-file-image img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
}

.juniper-file {
  display: inline-flex;
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  border-radius: 12px;
  align-items:  center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
}

.juniper-file:hover {
  border-color: var(--border-hover);
}

.juniper-file svg {
  color: var(--accent-text);
}

.juniper-file small {
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .juniper-spin {
    animation: none;
  }
}

.juniper-box .model-picker {
  position: relative;
}

.juniper-box .model-trigger {
  background: var(--surface-muted);
  border-color: #0000;
  border-radius: 999px;
  width: auto;
  padding: 6px 10px;
  font-weight: 550;
}

.juniper-box .model-trigger:hover:not(:disabled) {
  border-color: var(--border);
}

.juniper-box .model-menu {
  width: min(560px, 100vw - 32px);
  inset: auto auto calc(100% + 10px) -6px;
}

.juniper-send {
  display: grid;
  background: var(--accent-text);
  color: #fff;
  border: 0;
  border-radius: 50%;
  flex: none;
  place-items:  center;
  width: 36px;
  height: 36px;
  padding: 0;
}

.juniper-send svg {
  width: 18px;
  height: 18px;
}

.juniper-send:disabled {
  background: var(--surface-muted);
  color: var(--muted);
}

.juniper-send.is-stop {
  background: var(--text);
  color: var(--surface);
}

.juniper-send.is-stop svg {
  fill: currentColor;
  width: 13px;
  height: 13px;
}

@media (max-width: 650px) {
  .juniper-button {
    padding: 0 11px;
  }
}

.mt-page {
  display: grid;
  gap: 18px;
}

.mt-send.mt-send {
  display: grid;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  gap: 10px;
  margin: 0;
  padding: 14px;
}

.mt-send-row {
  display: flex;
  align-items:  center;
  gap: 10px;
}

.mt-send-icon {
  display: grid;
  background: color-mix(in srgb, var(--brand-red) 10%, transparent);
  color: var(--brand-red);
  border-radius: 12px;
  flex: none;
  place-items:  center;
  width: 40px;
  height: 40px;
}

.mt-send-icon svg {
  width: 19px;
  height: 19px;
}

.mt-send .mt-send-row input {
  border-radius: 21px;
  flex: 1;
  min-width: 0;
  height: 42px;
  margin: 0;
  font-size: 14px;
}

.mt-send .mt-send-row .primary {
  border-radius: 21px;
  flex: none;
  height: 42px;
  padding: 0 20px;
}

.mt-send-hint {
  color: var(--muted);
  margin: 0 0 0 50px;
  font-size: 12.5px;
  line-height: 1.5;
}

.mt-send-more {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 220px) auto;
  align-items:  center;
  gap: 10px;
  margin-left: 50px;
}

.mt-send-more input, .mt-send-more select {
  border-radius: 19px;
  width: 100%;
  height: 38px;
  margin: 0;
  font-size: 13px;
}

.mt-consent.mt-consent {
  display: flex;
  color: var(--text);
  cursor: pointer;
  align-items:  flex-start;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.mt-consent input {
  accent-color: var(--brand-red);
  flex: none;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
}

.mt-send .message {
  margin: 0 0 0 50px;
}

.mt-mark {
  display: inline-grid;
  color: #fff;
  border-radius: 9px;
  flex: none;
  place-items:  center;
  width: 32px;
  height: 32px;
  font-style: normal;
}

.mt-mark svg {
  width: 17px;
  height: 17px;
}

.mt-mark b {
  font-size: 14px;
  font-weight: 800;
}

.mt-mark.is-meet {
  background: #0f9d58;
}

.mt-mark.is-zoom {
  background: #2d8cff;
}

.mt-mark.is-teams {
  background: #5b5fc7;
}

.task-pill.is-static .mt-mark {
  border-radius: 50%;
  width: 22px;
  height: 22px;
  margin-left: -5px;
}

.task-pill.is-static .mt-mark svg {
  width: 12px;
  height: 12px;
}

.mt-status {
  display: inline-flex;
  background: var(--surface-muted);
  color: var(--muted);
  white-space: nowrap;
  border-radius: 13px;
  flex: none;
  align-items:  center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 650;
}

.mt-status > i {
  animation: 1.6s ease-in-out infinite mt-pulse;
  background: currentColor;
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.mt-status.is-live {
  color: #1f7a51;
  background: #1f8a5b24;
}

.mt-status.is-joining {
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: var(--warning);
}

.mt-status.is-failed {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}

.mt-facts .mt-status {
  border-radius: 17px;
  height: 34px;
  padding: 0 13px;
  font-size: 13px;
}

@keyframes mt-pulse {
  50% {
    opacity: .35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mt-status > i {
    animation: none;
  }
}

.mt-live {
  display: grid;
  gap: 8px;
}

.mt-live-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  border: 1px solid color-mix(in srgb, #1f8a5b 40%, var(--border));
  background: color-mix(in srgb, #1f8a5b 5%, var(--surface));
  color: var(--text);
  text-align: left;
  cursor: pointer;
  border-radius: 14px;
  align-items:  center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
}

.mt-live-card:hover {
  border-color: #1f8a5b;
}

.mt-live-main {
  display: grid;
  min-width: 0;
}

.mt-live-main b, .mt-row-main b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 650;
}

.mt-live-main small, .mt-row-main small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
}

.mt-live-open {
  color: #1f7a51;
  font-size: 13px;
  font-weight: 650;
}

.mt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items:  start;
  gap: 18px;
}

.mt-history {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.mt-days {
  display: grid;
  gap: 16px;
}

.mt-day h3 {
  color: var(--muted);
  margin: 0 0 8px 4px;
  font-size: 12.5px;
  font-weight: 650;
}

.mt-list {
  display: grid;
  list-style: none;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  border-radius: 14px;
  margin: 0;
  padding: 0;
}

.mt-list > li + li {
  border-top: 1px solid var(--border);
}

.mt-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  align-items:  center;
  gap: 12px;
  width: 100%;
  padding: 11px 16px;
}

.mt-row:hover {
  background: var(--surface-muted);
}

.mt-row-main {
  display: grid;
  min-width: 0;
}

.mt-row-facts {
  display: flex;
  color: var(--muted);
  align-items:  center;
  gap: 12px;
  font-size: 12.5px;
}

.mt-row-facts span {
  display: inline-flex;
  align-items:  center;
  gap: 4px;
}

.mt-row-facts svg {
  width: 13px;
  height: 13px;
}

.mt-empty {
  margin: 4px;
}

.mt-empty-card {
  display: grid;
  border: 1px dashed var(--border);
  text-align: center;
  border-radius: 16px;
  justify-items: center;
  gap: 6px;
  padding: 40px 24px;
}

.mt-empty-card svg {
  color: var(--muted);
  width: 26px;
  height: 26px;
}

.mt-empty-card h3 {
  margin: 4px 0 0;
  font-size: 16px;
}

.mt-empty-card p {
  color: var(--muted);
  max-width: 440px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
}

.mt-coming {
  display: grid;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  gap: 12px;
  padding: 16px;
}

.mt-coming h2 {
  display: flex;
  align-items:  center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
}

.mt-coming h2 svg {
  color: var(--muted);
  width: 16px;
  height: 16px;
}

.mt-coming > .muted, .mt-coming-empty p {
  color: var(--muted);
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.mt-coming-empty {
  display: grid;
  justify-items: start;
  gap: 12px;
}

.mt-link-button {
  display: inline-flex;
  text-decoration: none;
  border-radius: 17px;
  align-items:  center;
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
}

.mt-autojoin.mt-autojoin {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 10px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.mt-autojoin select {
  border-radius: 17px;
  width: auto;
  max-width: 220px;
  height: 34px;
  margin: 0;
  font-size: 12.5px;
}

.mt-coming-consent {
  background: var(--surface-muted);
  border-radius: 10px;
  padding: 10px 12px;
}

.mt-coming-list {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mt-coming-list li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items:  center;
  gap: 10px;
  padding: 10px 0;
}

.mt-coming-list li + li {
  border-top: 1px solid var(--border);
}

.mt-coming-list time {
  display: grid;
  color: var(--muted);
  font-size: 12px;
}

.mt-coming-list time b {
  color: var(--text);
  font-size: 12.5px;
}

.mt-coming-main {
  display: grid;
  min-width: 0;
}

.mt-coming-main b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
}

.mt-coming-main small {
  color: var(--muted);
  font-size: 12px;
}

.mt-switch.mt-switch {
  position: relative;
  display: inline-block;
  cursor: pointer;
  flex: none;
  width: 36px;
  height: 20px;
  margin: 0;
}

.mt-switch input {
  position: absolute;
  opacity: 0;
  cursor: inherit;
  width: 100%;
  height: 100%;
  margin: 0;
  inset: 0;
}

.mt-switch i {
  position: absolute;
  background: var(--border-hover);
  pointer-events: none;
  border-radius: 10px;
  transition: background .15s;
  inset: 0;
}

.mt-switch i:after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  transition: transform .15s;
  top: 2px;
  left: 2px;
  box-shadow: 0 1px 2px #0003;
}

.mt-switch input:checked + i {
  background: var(--brand-red);
}

.mt-switch input:checked + i:after {
  transform: translateX(16px);
}

.mt-switch input:focus-visible + i {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

.mt-switch input:disabled {
  cursor: default;
}

.mt-switch input:disabled + i {
  opacity: .5;
}

.mt-action.mt-action {
  display: inline-flex;
  white-space: nowrap;
  border-radius: 17px;
  align-items:  center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  font-size: 13px;
}

.mt-action svg {
  width: 14px;
  height: 14px;
}

.mt-action.is-danger {
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  color: var(--danger);
}

.mt-dialog-body {
  display: grid;
  align-content:  start;
  gap: 22px;
  padding: 24px 32px 36px;
}

.mt-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.3;
}

.mt-banner {
  display: flex;
  background: var(--surface-muted);
  border-radius: 12px;
  align-items:  center;
  gap: 8px;
  margin: 0;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
}

.mt-banner.is-error {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
}

.mt-banner svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.mt-banner code {
  background: var(--surface);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 12.5px;
}

.mt-section {
  display: grid;
  border-top: 1px solid var(--border);
  gap: 10px;
  padding-top: 20px;
}

.mt-title + .mt-section, .mt-title + .mt-banner {
  border-top: 0;
  padding-top: 0;
}

.mt-section h3 {
  display: flex;
  align-items:  center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
}

.mt-section h3 svg {
  color: var(--muted);
  width: 16px;
  height: 16px;
}

.mt-section h3 .count {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
}

.mt-section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:  center;
  gap: 10px;
}

.mt-summary p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

.mt-summary h4 {
  color: var(--muted);
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 650;
}

.mt-summary ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.6;
}

.mt-task-target.mt-task-target {
  display: flex;
  color: var(--muted);
  align-items:  center;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
}

.mt-task-target select {
  border-radius: 17px;
  width: auto;
  height: 34px;
  margin: 0;
  padding: 0 30px 0 12px;
  font-size: 12.5px;
  line-height: 32px;
}

.mt-dialog-body:focus {
  outline: none;
}

.mt-actions {
  display: grid;
  list-style: none;
  border: 1px solid var(--border);
  overflow: hidden;
  border-radius: 14px;
  margin: 0;
  padding: 0;
}

.mt-actions li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items:  center;
  gap: 12px;
  padding: 10px 12px 10px 14px;
  font-size: 13.5px;
}

.mt-actions li + li {
  border-top: 1px solid var(--border);
}

.mt-actions li > i {
  display: grid;
  border: 1.5px solid var(--border-hover);
  border-radius: 50%;
  place-items:  center;
  width: 18px;
  height: 18px;
}

.mt-actions li.is-task > i {
  color: #fff;
  background: #1f8a5b;
  border-color: #1f8a5b;
}

.mt-actions li > i svg {
  width: 11px;
  height: 11px;
}

.mt-actions li > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mt-actions small {
  color: var(--muted);
  font-size: 12px;
}

.mt-actions .secondary {
  border-radius: 15px;
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
}

.mt-people {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.mt-people li {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 18px;
  align-items:  center;
  gap: 8px;
  height: 36px;
  padding: 0 12px 0 5px;
  font-size: 13px;
}

.mt-people li.has-left {
  color: var(--muted);
}

.mt-people li > i {
  display: grid;
  background: var(--surface-muted);
  border-radius: 50%;
  place-items:  center;
  width: 26px;
  height: 26px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
}

.mt-people small {
  color: var(--muted);
}

.mt-hint {
  color: var(--muted);
  margin: 0;
  font-size: 12px;
}

.mt-transcript {
  display: grid;
  list-style: none;
  gap: 2px;
  margin: 0;
  padding: 0;
}

.mt-transcript li {
  padding: 2px 0 2px 36px;
}

.mt-transcript li:not(.is-continued) {
  margin-top: 10px;
}

.mt-transcript li:first-child {
  margin-top: 0;
}

.mt-transcript p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.mt-transcript .mt-speaker {
  display: flex;
  align-items:  center;
  gap: 8px;
  margin: 0 0 2px -36px;
}

.mt-speaker i {
  display: grid;
  background: var(--surface-muted);
  border-radius: 50%;
  place-items:  center;
  width: 28px;
  height: 28px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
}

.mt-speaker b {
  font-size: 13px;
}

.mt-speaker time {
  color: var(--muted);
  font-size: 11.5px;
}

.mt-transcript li.is-juniper .mt-speaker i {
  background: var(--brand-red);
  color: #fff;
}

.mt-transcript li.is-juniper > p:not(.mt-speaker) {
  color: var(--accent-text);
}

@media (max-width: 1180px) {
  .mt-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .mt-send-row {
    flex-wrap: wrap;
  }

  .mt-send-icon {
    display: none;
  }

  .mt-send .mt-send-row .primary {
    width: 100%;
  }

  .mt-send-hint, .mt-send-more, .mt-send .message {
    margin-left: 0;
  }

  .mt-send-more {
    grid-template-columns: minmax(0, 1fr);
  }

  .mt-row, .mt-live-card {
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }

  .mt-row-facts, .mt-live-open {
    display: none;
  }

  .mt-dialog-body {
    padding: 20px 18px 28px;
  }

  .mt-actions li {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .mt-actions li > button {
    grid-column: 2;
    justify-self: start;
  }
}

.provider-tiles {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
}

.provider-tiles li {
  display: grid;
  border: 1px solid var(--border);
  border-radius: 10px;
  align-content:  start;
  gap: 4px;
  padding: 12px 14px;
}

.provider-tiles li > span {
  font-size: 16px;
  font-weight: 600;
}

.provider-tiles li.unconfigured > span, .provider-tiles li.error > span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}

.provider-tiles small {
  font-size: 12px;
}

.people-spending {
  display: flex;
  white-space: nowrap;
  align-items:  center;
  gap: 12px;
}

.people-spending .usage-bar {
  width: 110px;
}

.account-capabilities {
  border: 1px solid var(--border);
  background: var(--page);
  border-radius: 10px;
  margin-top: 14px;
}

.account-actions {
  display: flex;
  align-items:  center;
  gap: 12px;
}

@media (max-width: 640px) {
  .account-capabilities .account-capability {
    flex-wrap: wrap;
  }
}

.account-capability small.account-google-note {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  color: var(--text);
  border-radius: 6px;
  margin-top: 6px;
  padding: 6px 8px;
  line-height: 1.4;
}

.app > main {
  padding-bottom: 72px;
}

.info-tip {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.info-tip-button {
  display: inline-grid;
  color: var(--muted);
  cursor: help;
  background: none;
  border: 0;
  border-radius: 50%;
  place-items:  center;
  width: 22px;
  height: 22px;
  padding: 0;
}

.info-tip-button:hover, .info-tip.is-open .info-tip-button {
  color: var(--text);
  background: var(--surface-muted);
}

.info-tip-button svg {
  width: 15px;
  height: 15px;
}

.info-tip-text {
  position: absolute;
  z-index: 30;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  border-radius: 10px;
  width: max-content;
  max-width: 280px;
  padding: 10px 12px;
  transition: opacity .12s, transform .12s, visibility .12s;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  bottom: calc(100% + 8px);
  right: -8px;
  transform: translateY(4px);
  box-shadow: 0 12px 32px #0000001f;
}

.info-tip.is-open .info-tip-text {
  opacity: 1;
  visibility: visible;
  transform: none;
}

h2 .info-tip .info-tip-text {
  left: -8px;
  right: auto;
}

@media (prefers-reduced-motion: reduce) {
  .info-tip-text {
    transition: none;
  }
}

.portfolio-kpi-wrap {
  position: relative;
  display: grid;
}

.portfolio-kpi-wrap > .portfolio-kpi {
  height: 100%;
}

.portfolio-kpi-info {
  position: absolute;
  bottom: 14px;
  right: 14px;
}

.juniper-layer {
  position: fixed;
  z-index: 60;
  inset: 0;
}

.juniper-backdrop {
  position: absolute;
  backdrop-filter: blur(2px);
  animation: .26s both juniper-fade;
  background: #0b0d10a8;
  inset: 0;
}

.juniper-drawer {
  position: absolute;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  background: var(--surface);
  color: var(--text);
  outline: none;
  animation: .32s cubic-bezier(.32,.72,0,1) both juniper-in;
  inset: 0;
  box-shadow: 24px 0 80px #0000004d;
}

.juniper-layer.is-restored .juniper-drawer, .juniper-layer.is-restored .juniper-backdrop {
  animation: none;
}

.juniper-layer.is-closing {
  pointer-events: none;
}

.juniper-layer.is-closing .juniper-drawer {
  animation: .2s cubic-bezier(.4,0,1,1) both juniper-out;
}

.juniper-layer.is-closing .juniper-backdrop {
  animation: .2s both juniper-fade-out;
}

@keyframes juniper-in {
  from {
    transform: translateX(-100%);
  }
}

@keyframes juniper-out {
  to {
    transform: translateX(-100%);
  }
}

@keyframes juniper-fade {
  from {
    opacity: 0;
  }
}

@keyframes juniper-fade-out {
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .juniper-layer .juniper-drawer, .juniper-layer .juniper-backdrop, .juniper-layer.is-closing .juniper-drawer, .juniper-layer.is-closing .juniper-backdrop {
    animation: none;
  }
}

.juniper-rail {
  display: flex;
  border-right: 1px solid var(--border);
  background: var(--page);
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 18px 12px 14px;
}

.juniper-brand {
  display: flex;
  align-items:  center;
  gap: 8px;
  padding: 2px 8px 6px;
  font-size: 17px;
  font-weight: 650;
}

.juniper-brand svg {
  color: var(--accent-text);
}

.juniper-new {
  display: flex;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  align-items:  center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 13.5px;
  font-weight: 600;
}

.juniper-new:hover {
  border-color: var(--accent-text);
}

.juniper-chats {
  overflow-y: auto;
  list-style: none;
  display: grid;
  flex: 1;
  align-content:  start;
  gap: 2px;
  min-height: 0;
  margin: 4px 0 0;
  padding: 0;
}

.juniper-chats li {
  position: relative;
  border-radius: 9px;
}

.juniper-chats li:hover, .juniper-chats li.is-on {
  background: var(--surface-muted);
}

.juniper-chat {
  display: grid;
  color: var(--text);
  text-align: left;
  background: none;
  border: 0;
  gap: 2px;
  width: 100%;
  padding: 8px 34px 8px 10px;
}

.juniper-chat-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 550;
}

.juniper-chat small {
  color: var(--muted);
  font-size: 11.5px;
}

.juniper-chat-delete {
  position: absolute;
  display: grid;
  color: var(--muted);
  opacity: 0;
  background: none;
  border: 0;
  border-radius: 7px;
  place-items:  center;
  width: 26px;
  height: 26px;
  padding: 0;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
}

.juniper-chats li:hover .juniper-chat-delete {
  opacity: 1;
}

.juniper-chat-delete:focus-visible {
  opacity: 1;
}

.juniper-chat-delete:hover {
  color: var(--danger);
}

.juniper-rail-empty {
  color: var(--muted);
  flex: 1;
  margin: 6px 8px;
  font-size: 12.5px;
}

.juniper-tools-link {
  display: flex;
  border: 0;
  border-top: 1px solid var(--border);
  color: var(--text);
  text-align: left;
  background: none;
  border-radius: 0;
  align-items:  center;
  gap: 8px;
  padding: 10px;
  font-size: 13px;
  font-weight: 550;
}

.juniper-tools-link.is-on, .juniper-tools-link:hover {
  color: var(--accent-text);
}

.juniper-count {
  background: var(--surface-muted);
  color: var(--muted);
  border-radius: 999px;
  margin-left: auto;
  padding: 1px 7px;
  font-size: 11px;
}

.juniper-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.juniper-top {
  display: flex;
  border-bottom: 1px solid var(--border);
  align-items:  center;
  gap: 12px;
  padding: 16px 20px 14px 28px;
}

.juniper-top h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 650;
}

.juniper-close {
  display: grid;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 9px;
  place-items:  center;
  width: 34px;
  height: 34px;
  padding: 0;
}

.juniper-close:hover {
  background: var(--surface-muted);
  color: var(--text);
}

.juniper-close svg {
  width: 19px;
  height: 19px;
}

.juniper-chats-toggle {
  display: none;
}

.juniper-tools {
  overflow-y: auto;
  display: grid;
  flex: 1;
  align-content:  start;
  gap: 16px;
  padding: 22px max(28px, 50% - 410px) 28px;
}

.juniper-tools-intro {
  color: var(--muted);
  max-width: 620px;
  margin: 0;
  line-height: 1.5;
}

.mcp-list {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.mcp-list li {
  display: grid;
  border: 1px solid var(--border);
  border-radius: 12px;
  gap: 8px;
  padding: 14px 16px;
}

.mcp-list li.is-off {
  opacity: .65;
}

.mcp-head {
  display: flex;
  align-items:  center;
  gap: 12px;
}

.mcp-head > div {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.mcp-head small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

.mcp-tools, .mcp-error {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
}

.mcp-tools {
  color: var(--muted);
}

.mcp-error {
  color: var(--danger);
}

.mcp-actions {
  display: flex;
  gap: 16px;
}

.mcp-actions .text-button {
  display: inline-flex;
  align-items:  center;
  gap: 6px;
  font-size: 12.5px;
}

.mcp-switch {
  position: relative;
  cursor: pointer;
  flex: none;
  width: 38px;
  height: 22px;
}

.mcp-switch input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  inset: 0;
}

.mcp-switch > span[aria-hidden] {
  position: absolute;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background .12s;
  inset: 0;
}

.mcp-switch > span[aria-hidden]:after {
  content: "";
  position: absolute;
  background: var(--surface);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  transition: transform .12s;
  top: 2px;
  left: 2px;
  box-shadow: 0 1px 2px #0003;
}

.mcp-switch input:checked + span[aria-hidden] {
  background: var(--ok);
  border-color: var(--ok);
}

.mcp-switch input:checked + span[aria-hidden]:after {
  transform: translateX(16px);
}

.mcp-switch input:focus-visible + span[aria-hidden] {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

.mcp-add {
  display: inline-flex;
  justify-self: start;
  align-items:  center;
  gap: 6px;
}

.mcp-form {
  display: grid;
  border: 1px solid var(--border);
  background: var(--page);
  border-radius: 12px;
  gap: 12px;
  max-width: 560px;
  padding: 18px;
}

.mcp-form h3 {
  margin: 0;
  font-size: 15px;
}

.mcp-form label {
  display: grid;
  gap: 5px;
  font-size: 13px;
  font-weight: 550;
}

.mcp-form label small {
  color: var(--muted);
  font-weight: 400;
}

.mcp-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 760px) {
  .juniper-drawer {
    grid-template-columns: minmax(0, 1fr);
    width: 100vw;
  }

  .juniper-rail {
    position: absolute;
    z-index: 2;
    width: min(290px, 86vw);
    transition: transform .16s;
    inset: 0 auto 0 0;
    transform: translateX(-102%);
    box-shadow: 18px 0 50px #0003;
  }

  .juniper-drawer.show-chats .juniper-rail {
    transform: none;
  }

  .juniper-chats-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 9px;
    align-items:  center;
    gap: 6px;
    padding: 7px 10px;
    font-size: 13px;
  }

  .juniper-top {
    flex-wrap: wrap;
    padding: 12px 14px;
  }

  .juniper-log, .juniper-tools {
    padding: 16px;
  }

  .juniper-compose {
    padding: 8px 12px 14px;
  }
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 8px;
  margin: 0 0 18px;
}

.filter-search {
  position: relative;
  display: flex;
  flex: 220px;
  align-items:  center;
  min-width: 180px;
  margin-right: 4px;
}

.filter-search svg {
  position: absolute;
  color: var(--muted);
  pointer-events: none;
  width: 15px;
  height: 15px;
  left: 13px;
}

.filter-search input {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 18px;
  width: 100%;
  height: 36px;
  padding: 0 14px 0 36px;
  font-size: 13.5px;
}

.filter-search input:focus {
  outline: none;
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-text) 12%, transparent);
}

.filter-chips {
  display: contents;
}

.filter-chip {
  position: relative;
  display: inline-flex;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 18px;
  align-items:  center;
  height: 36px;
}

.filter-chip:hover, .filter-chip.is-open {
  border-color: var(--border-hover);
}

.filter-chip.is-set {
  border-color: color-mix(in srgb, var(--accent-text) 40%, var(--border));
  background: var(--accent-soft);
}

.filter-chip-trigger {
  display: inline-flex;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: 0;
  border-radius: 18px;
  align-items:  center;
  gap: 6px;
  height: 100%;
  padding: 0 12px 0 14px;
  font-size: 13px;
}

.filter-chip-label {
  color: var(--muted);
}

.filter-chip-label:after {
  content: ":";
}

.filter-chip-value {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  font-weight: 600;
}

.filter-chip.is-set .filter-chip-label {
  color: var(--accent-text);
}

.filter-chip-trigger svg {
  color: var(--muted);
  width: 14px;
  height: 14px;
}

.filter-chip.is-set .filter-chip-trigger {
  padding-right: 4px;
}

.filter-chip-reset {
  display: grid;
  color: var(--accent-text);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 50%;
  place-items:  center;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  padding: 0;
}

.filter-chip-reset:hover {
  background: color-mix(in srgb, var(--accent-text) 12%, transparent);
}

.filter-chip-reset svg {
  width: 13px;
  height: 13px;
}

.filter-pop {
  position: absolute;
  z-index: 40;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  width: 260px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  top: calc(100% + 6px);
  left: 0;
  box-shadow: 0 14px 40px #0000001f;
}

.filter-pop.is-wide {
  width: 320px;
}

.filter-options {
  display: grid;
  gap: 6px;
}

.filter-options-search {
  border: 1px solid var(--border);
  background: var(--page);
  color: var(--text);
  border-radius: 8px;
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
}

.filter-options-list {
  display: grid;
  overflow-y: auto;
  max-height: 300px;
}

.filter-options-list button {
  display: flex;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  justify-content: space-between;
  align-items:  center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 13px;
}

.filter-options-list button.is-active {
  background: var(--surface-muted);
  outline: none;
}

.filter-options-list button:focus-visible {
  background: var(--surface-muted);
  outline: none;
}

.filter-options-list button[aria-selected="true"] {
  font-weight: 600;
}

.filter-options-list svg {
  color: var(--accent-text);
  flex: none;
  width: 15px;
  height: 15px;
}

.filter-options-empty {
  color: var(--muted);
  margin: 6px 10px;
  font-size: 12.5px;
}

.filter-toggle {
  display: inline-flex;
  border: 1px dashed var(--border);
  color: var(--muted);
  cursor: pointer;
  background: none;
  border-radius: 18px;
  align-items:  center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

.filter-toggle:hover {
  border-color: var(--border-hover);
  color: var(--text);
}

.filter-toggle.is-set {
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent-text) 40%, var(--border));
  background: var(--accent-soft);
  color: var(--text);
}

.filter-toggle svg {
  color: var(--accent-text);
  width: 14px;
  height: 14px;
}

.filter-clear {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  background: none;
  border: 0;
  height: 36px;
  padding: 0 6px;
  font-size: 13px;
}

.filter-clear:hover {
  color: var(--text);
}

.filter-aside {
  display: flex;
  align-items:  center;
  gap: 12px;
  margin-left: auto;
}

.filter-summary {
  color: var(--muted);
  white-space: nowrap;
  font-size: 13px;
}

.filter-form {
  display: grid;
  gap: 10px;
  padding: 6px;
}

.filter-form label {
  display: grid;
  color: var(--muted);
  gap: 4px;
  font-size: 12px;
}

.filter-form input, .filter-form select {
  border: 1px solid var(--border);
  background: var(--page);
  color: var(--text);
  border-radius: 8px;
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
}

.filter-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.filter-segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface-muted);
  border-radius: 9px;
  gap: 2px;
  padding: 2px;
}

.filter-segment button {
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  height: 30px;
  font-size: 12.5px;
}

.filter-segment button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 3px #0000001a;
}

.filter-form-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

@media (max-width: 650px) {
  .filter-search {
    flex-basis: 100%;
  }

  .filter-aside {
    margin-left: 0;
  }
}

.segmented {
  display: inline-flex;
  background: var(--surface-muted);
  border-radius: 11px;
  flex-wrap: wrap;
  gap: 2px;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  padding: 3px;
}

.segmented > button, .segmented > button:not(.primary):not(.text-button) {
  display: inline-flex;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  align-items:  center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
}

.segmented > button:hover {
  color: var(--text);
}

.segmented > button[aria-pressed="true"], .segmented > button[aria-selected="true"] {
  background: var(--surface);
  color: var(--accent-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-text) 45%, transparent), 0 1px 3px #0000001a;
  font-weight: 650;
}

.segmented > button[aria-pressed="true"] span, .segmented > button[aria-selected="true"] span {
  color: var(--accent-text);
}

.segmented svg {
  width: 15px;
  height: 15px;
}

.filter-pop .filter-options-search:focus, .filter-form input:focus, .filter-form select:focus {
  outline: none;
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-text) 12%, transparent);
}

.report-kpis button span {
  display: inline-flex;
  align-items:  center;
  gap: 4px;
}

.report-kpis button span svg {
  opacity: 0;
  width: 13px;
  height: 13px;
  transition: opacity .12s;
}

.report-kpis button:hover span svg {
  opacity: 1;
}

.report-kpis button:focus-visible span svg {
  opacity: 1;
}

.report-export {
  position: relative;
}

.report-export > button {
  display: inline-flex;
  align-items:  center;
  gap: 7px;
}

.report-export > button svg {
  width: 15px;
  height: 15px;
}

.report-export-menu {
  width: 240px;
  left: auto;
  right: 0;
}

.admin-tabs {
  margin: 0 0 18px;
}

.filter-chip-bare {
  font-weight: 600;
}

.filter-chip-trigger > svg:first-child {
  color: var(--text);
  width: 15px;
  height: 15px;
}

.filter-count {
  display: inline-grid;
  background: var(--accent-text);
  color: #fff;
  border-radius: 9px;
  place-items:  center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
}

.filter-more {
  overflow-y: auto;
  max-height: min(70vh, 520px);
}

.filter-more select {
  width: 100%;
}

.filter-more .check {
  display: flex;
  color: var(--text);
  align-items:  center;
  gap: 8px;
  font-size: 13px;
}

.filter-more-group {
  display: grid;
  color: var(--muted);
  gap: 6px;
  font-size: 12px;
}

.filter-more .filter-dates, .filter-pop > .filter-dates {
  padding: 0;
}

.filter-pop > .filter-dates {
  padding: 6px;
}

.portfolio-row {
  cursor: pointer;
}

.portfolio-row:hover {
  background: var(--surface-muted);
}

.portfolio-table .portfolio-logo-cell {
  width: 44px;
  padding-right: 0;
}

.portfolio-logo-cell .venture-logo {
  border-radius: 9px;
  width: 36px;
  height: 36px;
  font-size: 13px;
}

.portfolio-table th button:hover {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.board {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  grid-template-columns: none;
  scroll-snap-type: x proximity;
  gap: 12px;
  min-height: 360px;
  padding: 2px 2px 10px;
}

.board > .column {
  display: flex;
  overflow-y: auto;
  scrollbar-width: thin;
  scroll-snap-align: start;
  flex-direction: column;
  flex: 0 0 290px;
  gap: 8px;
  min-width: 0;
  min-height: 0;
}

.board > .column h2 {
  position: sticky;
  z-index: 1;
  background: inherit;
  border-radius: 10px 10px 0 0;
  margin: -10px -10px 2px;
  padding: 12px 12px 8px;
  top: -10px;
}

.board .task-card {
  flex-shrink: 0;
  gap: 0;
  height: auto;
  padding: 12px 13px;
}

.board .task-card .card-top {
  display: flex;
  align-items:  center;
  gap: 6px;
  min-width: 0;
}

.board .task-card .card-top .tags {
  display: flex;
  overflow: hidden;
  gap: 4px;
  min-width: 0;
  max-height: none;
  margin: 0;
}

.board .task-card h3 {
  height: auto;
  margin: 9px 0 4px;
  font-size: 13.5px;
  line-height: 1.4;
}

.board .task-card .task-preview {
  height: auto;
  margin: 0 0 4px;
  font-size: 12px;
}

.board .task-card .task-meta {
  margin-top: 10px;
  padding-top: 8px;
}

@media (max-width: 650px) {
  .board {
    height: auto;
    max-height: none;
  }
}

@media (max-width: 640px) {
  .task-view-switch {
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }

  .task-view-switch > button {
    flex: none;
  }
}

.calendar-month {
  grid-template-rows: auto;
  grid-auto-rows: minmax(0, 1fr);
}

.calendar-month .calendar-day {
  overflow: hidden;
  min-height: 0;
}

.filter-bar > .task-view-switch {
  margin: 0;
}

.task-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 14px;
}

.task-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}

.task-table th, .task-table td {
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
  padding: 11px 14px;
}

.task-table thead th {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
}

.task-table tbody tr {
  cursor: pointer;
}

.task-table tbody tr:hover {
  background: var(--surface-muted);
}

.task-table tbody tr:last-child > * {
  border-bottom: 0;
}

.task-table tbody th {
  white-space: normal;
  min-width: 240px;
}

.task-table tbody th button {
  display: block;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-weight: 600;
}

.task-table tbody th button:hover {
  color: var(--accent-text);
}

.task-table tbody th small {
  display: block;
  color: var(--muted);
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
}

.task-table-status {
  display: inline-flex;
  align-items:  center;
  gap: 6px;
}

@media (max-width: 640px) {
  .task-table th:nth-child(3), .task-table td:nth-child(3), .task-table th:nth-child(5), .task-table td:nth-child(5) {
    display: none;
  }
}

.calendar-counts {
  display: flex;
  align-items:  center;
  margin-left: auto;
  font-size: 13px;
}

.calendar-counts .calendar-flag:first-child {
  margin-left: 0;
}

.new-task-button {
  display: inline-flex;
  white-space: nowrap;
  align-items:  center;
  gap: 6px;
}

@media (max-width: 1180px) {
  .new-task-button {
    border-radius: 50%;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
  }

  .new-task-button span {
    display: none;
  }

  .filter-bar > .task-view-switch > button {
    padding: 0 11px;
  }

  .filter-bar > .task-view-switch ~ .filter-search {
    min-width: 130px;
  }

  .tasks-filter-bar .filter-chip-label, .tasks-filter-bar .filter-chip-bare {
    display: none;
  }

  .tasks-filter-bar .filter-chip-trigger {
    padding: 0 10px 0 12px;
  }

  .tasks-filter-bar .filter-search {
    flex: 110px;
    min-width: 110px;
  }
}

.segmented {
  border-radius: 20px;
  padding: 3px;
}

.segmented > button, .segmented > button:not(.primary):not(.text-button) {
  border-radius: 16px;
  transition: background .12s, color .12s;
}

.segmented > button:not([aria-pressed="true"]):not([aria-selected="true"]):hover {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--text);
}

.segmented > button[aria-pressed="true"], .segmented > button[aria-selected="true"] {
  background: var(--accent-text);
  color: #fff;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--accent-text) 35%, transparent);
  font-weight: 650;
}

.segmented > button[aria-pressed="true"] span, .segmented > button[aria-selected="true"] span, .segmented > button[aria-pressed="true"] svg {
  color: #fff;
}

@media (max-width: 1180px) {
  .filter-bar .new-task-button.primary {
    border-radius: 50%;
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
  }
}

.segmented.segmented > button[aria-pressed="true"], .segmented.segmented > button[aria-selected="true"] {
  background: var(--accent-text);
  color: #fff;
}

.calendar-counts {
  flex-wrap: wrap;
  gap: 6px;
}

.calendar-pill {
  display: inline-flex;
  white-space: nowrap;
  border: 1px solid #0000;
  border-radius: 15px;
  align-items:  center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 600;
}

.calendar-pill:before {
  content: "";
  background: currentColor;
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.calendar-pill.is-overdue {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}

.calendar-pill.is-today {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.calendar-pill.is-week {
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: var(--warning);
}

.calendar-pill.is-undated {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  cursor: pointer;
}

.calendar-pill.is-undated:before {
  background: var(--muted);
}

.calendar-pill.is-undated:hover:not(:disabled) {
  border-color: var(--border-hover);
}

.calendar-pill.is-zero {
  background: var(--surface-muted);
  color: var(--muted);
  font-weight: 500;
}

.calendar-pill.is-undated:disabled {
  cursor: default;
}

:root {
  --brand-red: #c91422;
}

.segmented.segmented > button[aria-pressed="true"], .segmented.segmented > button[aria-selected="true"] {
  background: var(--brand-red);
  color: #fff;
  box-shadow: 0 1px 4px #c9142240;
}

.company-tabs {
  display: flex;
  background: var(--surface-muted);
  overflow-x: auto;
  scrollbar-width: none;
  border: 0;
  border-radius: 20px;
  flex-wrap: nowrap;
  gap: 2px;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 22px;
  padding: 3px;
}

.company-tabs button {
  display: inline-flex;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 16px;
  flex: none;
  align-items:  center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  transition: background .12s, color .12s;
  font-size: 13px;
  font-weight: 500;
}

.company-tabs button:not([aria-selected="true"]):hover {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--text);
}

.company-tabs button[aria-selected="true"] {
  background: var(--brand-red);
  color: #fff;
  border-bottom-color: #0000;
  font-weight: 650;
  box-shadow: 0 1px 4px #c9142240;
}

.company-tabs button[aria-selected="true"] .tab-count {
  color: #fff;
  background: #ffffff30;
}

.calendar-pill.is-overdue {
  color: var(--brand-red);
  background: #c914221a;
}

:root[data-theme="dark"] .calendar-pill.is-overdue {
  color: #ff5a64;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .calendar-pill.is-overdue {
    color: #ff5a64;
  }
}

.account-dialog::backdrop {
  backdrop-filter: blur(4px);
  background: #0b0d10bf;
}

.task-dialog::backdrop {
  backdrop-filter: blur(4px);
  background: #0b0d10bf;
}

.account-dialog.calendar-day-dialog {
  display: flex;
  flex-direction: column;
  width: min(820px, 100vw - 32px);
  max-height: calc(100dvh - 64px);
  padding: 24px 26px;
}

.calendar-day-dialog[open] {
  display: flex;
}

.calendar-day-dialog .calendar-day-dialog-list {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  flex: auto;
  align-content:  start;
  min-height: 0;
  max-height: none;
  padding: 2px;
}

.account-dialog::backdrop {
  backdrop-filter: blur(6px);
  background: #08090cdb;
}

.task-dialog::backdrop {
  backdrop-filter: blur(6px);
  background: #08090cdb;
}

.task-dialog {
  overflow: hidden;
  border-radius: 18px;
  width: min(1080px, 100vw - 48px);
  max-width: none;
  max-height: calc(100dvh - 48px);
  padding: 0;
}

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

.task-dialog[open]:not(:has( > .task-dialog-frame)) {
  display: block;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px;
}

.task-dialog.company-dialog {
  width: min(760px, 100vw - 32px);
}

@media (max-width: 650px) {
  .task-dialog[open]:not(:has( > .task-dialog-frame)) {
    padding: 20px 18px;
  }
}

.task-dialog-frame {
  display: flex;
  flex-direction: column;
  flex: auto;
  min-height: 0;
  max-height: calc(100dvh - 48px);
}

.task-dialog-top {
  display: flex;
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items:  center;
  gap: 12px;
  padding: 12px 16px 12px 24px;
}

.task-dialog-crumbs {
  display: flex;
  color: var(--muted);
  flex-wrap: wrap;
  align-items:  center;
  gap: 8px;
  min-width: 0;
  font-size: 12.5px;
}

.task-dialog-company {
  background: var(--surface-muted);
  color: var(--text);
  border-radius: 11px;
  padding: 3px 10px;
  font-weight: 550;
}

.task-dialog-close {
  display: grid;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 50%;
  flex: none;
  place-items:  center;
  width: 36px;
  height: 36px;
  padding: 0;
}

.task-dialog-close:hover {
  background: var(--surface-muted);
  color: var(--text);
}

.task-dialog-body {
  overflow-y: auto;
  flex: auto;
  min-height: 0;
  padding: 26px 28px 32px;
}

.task-dialog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  align-items:  start;
  gap: 36px;
}

.task-dialog-main {
  display: grid;
  gap: 22px;
  min-width: 0;
}

.task-dialog .task-title-input {
  display: block;
  color: var(--text);
  letter-spacing: -.015em;
  resize: none;
  overflow: hidden;
  overflow-wrap: anywhere;
  background: none;
  border: 1px solid #0000;
  border-radius: 10px;
  width: 100%;
  margin: 0 0 0 -10px;
  padding: 4px 10px;
  font: 700 26px / 1.3 Manrope, sans-serif;
}

.task-dialog .task-description-input {
  display: block;
  color: var(--text);
  white-space: pre-wrap;
  overflow: hidden;
  overflow-wrap: anywhere;
  resize: none;
  background: none;
  border: 1px solid #0000;
  border-radius: 10px;
  width: 100%;
  min-height: 96px;
  margin: 0 0 0 -12px;
  padding: 10px 12px;
  font-size: 14.5px;
  line-height: 1.7;
}

.task-dialog .task-description-input.is-readonly {
  min-height: 0;
}

.task-dialog .task-title-input:not(h2):hover:not(:disabled), .task-dialog .task-description-input:not(p):hover:not(:disabled) {
  background: var(--surface-muted);
}

.task-dialog .task-title-input:not(h2):focus, .task-dialog .task-description-input:not(p):focus {
  outline: none;
  border-color: var(--border-hover);
  background: var(--surface);
  box-shadow: none;
}

.task-dialog-side {
  position: sticky;
  display: grid;
  border: 1px solid var(--border);
  background: var(--surface-muted);
  border-radius: 14px;
  gap: 16px;
  padding: 16px;
  top: 0;
}

.task-dialog-side > fieldset {
  display: grid;
  gap: 10px;
}

.task-dialog .task-prop {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items:  center;
  gap: 10px;
  margin: 0;
  font-size: 13px;
}

.task-prop > span {
  color: var(--muted);
}

.task-dialog .task-prop select, .task-dialog .task-prop input {
  background: var(--surface);
  color: var(--text);
  border: 1px solid #0000;
  border-radius: 8px;
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0 10px;
  font-size: 13px;
}

.task-dialog .task-prop select:hover:not(:disabled), .task-dialog .task-prop input:hover:not(:disabled) {
  border-color: var(--border);
}

.task-dialog .task-prop-people {
  align-items:  start;
}

.task-prop-people > span {
  padding-top: 6px;
}

.task-people {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.task-people small {
  color: var(--muted);
  font-size: 12px;
}

.task-person {
  display: inline-flex;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  border-radius: 15px;
  align-items:  center;
  gap: 6px;
  height: 30px;
  padding: 0 11px 0 4px;
  font-size: 12.5px;
}

.task-person i {
  display: grid;
  background: var(--surface-muted);
  color: var(--text);
  border-radius: 50%;
  place-items:  center;
  width: 22px;
  height: 22px;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.task-person.is-on {
  border-color: color-mix(in srgb, var(--brand-red) 55%, var(--border));
  background: color-mix(in srgb, var(--brand-red) 9%, var(--surface));
  color: var(--text);
  font-weight: 600;
}

.task-person.is-on i {
  background: var(--brand-red);
  color: #fff;
}

.task-person.is-stale {
  text-decoration: line-through;
  padding-left: 11px;
}

.task-dialog-foot {
  display: flex;
  border-top: 1px solid var(--border);
  background: var(--surface);
  justify-content: flex-end;
  align-items:  center;
  gap: 10px;
  padding: 12px 20px;
}

.task-dialog-foot .task-archive {
  margin-right: auto;
}

@media (max-width: 860px) {
  .task-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .task-dialog-frame {
    max-height: calc(100dvh - 16px);
  }

  .task-dialog-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .task-dialog-side {
    position: static;
    order: -1;
  }

  .task-dialog-body {
    padding: 20px 18px 24px;
  }
}

.task-dialog .task-dialog-side > fieldset {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.task-dialog .files-links, .task-dialog .task-collaboration, .task-dialog .calendar-publication {
  border: 0;
  border-top: 1px solid var(--border);
  box-shadow: none;
  background: none;
  border-radius: 0;
  margin: 0;
  padding: 18px 0 0;
}

.task-dialog .files-links h2, .task-dialog .files-links h3, .task-dialog .task-collaboration h2, .task-dialog .task-collaboration h3, .task-dialog .calendar-publication h2, .task-dialog .calendar-publication h3 {
  letter-spacing: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 650;
}

.task-dialog .files-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.task-dialog .files-heading .muted, .task-dialog .files-actions > .muted, .task-dialog .task-collaboration form > .muted {
  display: none;
}

.task-dialog .files-actions {
  border: 1px dashed var(--border);
  background: none;
  border-radius: 12px;
  padding: 12px;
}

.task-dialog .empty-files {
  color: var(--muted);
  text-align: left;
  background: none;
  border: 0;
  padding: 8px 0 0;
  font-size: 13px;
}

.task-dialog .task-provenance {
  color: var(--muted);
  margin: 0 0 12px;
  font-size: 12.5px;
}

.task-dialog .task-collaboration label {
  margin-bottom: 10px;
  font-size: 12.5px;
}

.task-dialog .task-collaboration textarea {
  min-height: 72px;
}

.task-dialog .task-activity {
  margin-top: 14px;
  font-size: 13px;
}

.task-dialog aside.task-dialog-side {
  overflow: visible;
  width: auto;
  height: auto;
  min-height: 0;
  max-height: none;
}

.task-dialog .task-dialog-grid {
  grid-template-columns: minmax(0, 1fr);
  max-width: 860px;
  margin: 0 auto;
}

.task-dialog-top {
  align-items:  flex-start;
  padding: 12px 14px 12px 20px;
}

.task-dialog-controls {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 6px;
  min-width: 0;
}

.task-pill {
  position: relative;
}

.task-pill > button, .task-pill.is-static {
  display: inline-flex;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
  border-radius: 17px;
  align-items:  center;
  gap: 7px;
  height: 34px;
  padding: 0 10px 0 11px;
  font-size: 13px;
  font-weight: 550;
}

.task-pill.is-static {
  cursor: default;
  color: var(--muted);
}

.task-pill > button:hover:not(:disabled), .task-pill.is-open > button {
  border-color: var(--border-hover);
  background: var(--surface-muted);
}

.task-pill > button:disabled {
  cursor: default;
  opacity: 1;
}

.task-pill > button > svg:first-child, .task-pill.is-static > svg {
  color: var(--muted);
  width: 15px;
  height: 15px;
}

.task-pill .caret {
  color: var(--muted);
  width: 13px;
  height: 13px;
}

.task-pill.is-empty > button {
  color: var(--muted);
  border-style: dashed;
  font-weight: 500;
}

.task-pill .status-dot {
  width: 9px;
  height: 9px;
}

.task-pill.is-priority-high > button > svg:first-child {
  color: var(--warning);
}

.task-pill.is-priority-urgent > button > svg:first-child {
  color: var(--brand-red);
}

.task-pill.is-due-overdue > button {
  border-color: color-mix(in srgb, var(--brand-red) 45%, var(--border));
  color: var(--brand-red);
  background: #c914220f;
}

.task-pill.is-due-overdue > button > svg:first-child {
  color: var(--brand-red);
}

.task-pill.is-due-soon > button > svg:first-child, .task-pill.is-due-upcoming > button > svg:first-child {
  color: var(--warning);
}

.task-pill-pop {
  width: 240px;
}

.task-pill-pop.is-wide {
  width: 300px;
}

.task-pill-pop .filter-options-list button > span {
  display: inline-flex;
  align-items:  center;
  gap: 8px;
  min-width: 0;
}

.task-pill-pop .filter-options-list button[aria-pressed="true"] {
  font-weight: 650;
}

.task-faces {
  display: inline-flex;
}

.task-faces i, .task-face {
  display: inline-grid;
  background: var(--brand-red);
  color: #fff;
  box-shadow: 0 0 0 2px var(--surface);
  border-radius: 50%;
  place-items:  center;
  width: 22px;
  height: 22px;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
}

.task-faces i + i {
  margin-left: -6px;
}

.task-pill > button:has(.task-faces) {
  padding-left: 5px;
}

.task-assign > p {
  color: var(--muted);
  margin: 4px 8px 6px;
  font-size: 12px;
}

.task-assign .filter-options-list button > span {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  text-align: left;
  align-items:  center;
  column-gap: 9px;
}

.task-assign .filter-options-list button > span small {
  grid-column: 2;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11.5px;
  font-weight: 400;
}

.task-assign .task-face {
  grid-row: span 2;
  background: var(--surface-muted);
  color: var(--text);
  box-shadow: none;
}

.task-assign button[aria-pressed="true"] .task-face {
  background: var(--brand-red);
  color: #fff;
}

.task-dialog-top .task-dialog-close {
  margin-top: -1px;
}

.task-dialog .task-description-input {
  min-height: 52px;
}

.task-dialog-top {
  display: grid;
  gap: 10px;
  padding: 12px 14px 12px 20px;
}

.task-dialog-bar {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 10px;
}

.task-copy-id {
  display: inline-flex;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  border-radius: 16px;
  align-items:  center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 550;
}

.task-copy-id:hover {
  border-color: var(--border-hover);
  color: var(--text);
}

.task-copy-id svg {
  width: 14px;
  height: 14px;
}

.task-dialog-actions {
  display: flex;
  align-items:  center;
  gap: 8px;
}

.task-dialog-actions > .secondary, .task-dialog-actions > .primary {
  display: inline-flex;
  border-radius: 17px;
  align-items:  center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
}

.task-dialog-actions .task-archive {
  background: var(--surface-muted);
  border-color: #0000;
}

.task-dialog-actions .task-archive:hover:not(:disabled) {
  background: color-mix(in srgb, var(--surface-muted) 70%, var(--border));
}

.task-dialog-actions .task-archive svg {
  width: 14px;
  height: 14px;
}

.task-dialog-actions > .primary:disabled {
  background: var(--surface-muted);
  color: var(--muted);
  opacity: 1;
  cursor: default;
  border-color: #0000;
}

.task-pill-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.task-pill-label:after {
  content: ":";
}

.task-dialog-controls {
  padding-top: 2px;
}

.task-description-view {
  color: var(--text);
  overflow-wrap: anywhere;
  border: 1px solid #0000;
  border-radius: 10px;
  margin-left: -12px;
  padding: 8px 12px;
  font-size: 14.5px;
  line-height: 1.7;
}

.task-description-view.is-editable {
  cursor: text;
}

.task-description-view.is-editable:hover {
  background: var(--surface-muted);
}

.task-description-view.is-editable:focus-visible {
  outline: none;
  border-color: var(--border-hover);
}

.task-description-view.is-empty {
  color: var(--muted);
}

.task-description-view > :first-child {
  margin-top: 0;
}

.task-description-view > :last-child {
  margin-bottom: 0;
}

.task-description-view p {
  margin: 0 0 12px;
}

.task-description-view ol, .task-description-view ul {
  margin: 0 0 12px;
  padding-left: 22px;
}

.task-description-view li {
  margin: 3px 0;
  padding-left: 4px;
}

.task-description-view li::marker {
  color: var(--muted);
  font-weight: 600;
}

.task-description-view a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 640px) {
  .task-dialog-bar {
    flex-wrap: wrap;
  }
}

.task-dialog-bar .task-dialog-actions {
  justify-content: flex-end;
  margin: 0;
}

.task-description-view p, .task-description-view li {
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.7;
}

.task-description-view.is-empty p {
  color: var(--muted);
}

.files-links {
  position: relative;
  border-radius: 12px;
}

.files-links.is-dragging {
  outline: 2px dashed var(--brand-red);
  outline-offset: 6px;
}

.files-heading {
  margin-bottom: 10px;
}

.files-heading h3 {
  display: flex;
  align-items:  center;
  gap: 8px;
  font-size: 15px;
}

.files-tools {
  display: flex;
  gap: 6px;
}

.files-tool {
  display: inline-flex;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  border-radius: 16px;
  align-items:  center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 550;
}

.files-tool:hover:not(:disabled), .files-tool[aria-pressed="true"] {
  border-color: var(--border-hover);
  background: var(--surface-muted);
}

.files-tool svg {
  width: 14px;
  height: 14px;
}

.files-link-form {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto;
  align-items:  center;
  gap: 8px;
  margin: 0 0 10px;
}

.files-link-form input {
  height: 36px;
  margin: 0;
}

.files-link-form .primary {
  height: 36px;
  padding: 0 16px;
}

.files-empty {
  border: 1px dashed var(--border);
  color: var(--muted);
  border-radius: 12px;
  margin: 0;
  padding: 14px;
  font-size: 13px;
}

.files-list {
  border: 1px solid var(--border);
  overflow: hidden;
  border-radius: 12px;
  margin: 0;
}

.files-list > li {
  flex-wrap: nowrap;
  gap: 12px;
  padding: 10px 14px;
}

.files-list > li:last-child {
  border-bottom: 0;
}

.files-list > li:hover {
  background: var(--surface-muted);
}

.files-list .file-symbol {
  display: grid;
  background: var(--surface-muted);
  border-radius: 9px;
  flex: none;
  place-items:  center;
  width: 34px;
  height: 34px;
  font-size: 16px;
}

.files-list > li:hover .file-symbol {
  background: var(--surface);
}

.files-list .file-info {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.files-list .file-info a, .files-list .file-info b {
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
}

.files-list .file-info a:hover {
  color: var(--accent-text);
  text-decoration: underline;
}

.files-list .file-info small {
  margin: 0;
  font-size: 12px;
}

.files-list .file-info em {
  color: var(--warning);
  font-style: normal;
}

.files-list .file-buttons, .files-list .file-confirm {
  display: flex;
  border: 0;
  flex: none;
  align-items:  center;
  gap: 10px;
  padding: 0;
  font-size: 12.5px;
}

.files-list .file-buttons {
  opacity: 0;
  transition: opacity .12s;
}

.files-list > li:hover .file-buttons, .files-list .file-buttons:focus-within {
  opacity: 1;
}

.files-list .file-buttons button, .files-list .file-confirm button {
  background: none;
  border: 0;
  padding: 0;
  font-size: 12.5px;
}

.text-button.is-danger {
  color: var(--danger);
  font-weight: 600;
}

@media (hover: none) {
  .files-list .file-buttons {
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .files-link-form {
    grid-template-columns: 1fr;
  }
}

.task-timeline h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 15px;
}

.task-timeline h3 .count {
  font-size: 12px;
  font-weight: 500;
}

.timeline {
  position: relative;
  display: grid;
  list-style: none;
  gap: 14px;
  margin: 0 0 18px;
  padding: 0;
}

.timeline:before {
  content: "";
  position: absolute;
  background: var(--border);
  width: 1px;
  top: 6px;
  bottom: 6px;
  left: 13px;
}

.timeline > li {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items:  start;
  gap: 12px;
}

.timeline-dot {
  border: 2px solid var(--surface);
  background: var(--muted);
  box-shadow: 0 0 0 1px var(--border);
  border-radius: 50%;
  justify-self: center;
  width: 9px;
  height: 9px;
  margin-top: 6px;
}

.timeline-event.is-done .timeline-dot {
  background: #3f8f7f;
}

.timeline-event p {
  color: var(--muted);
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.timeline-event b {
  color: var(--text);
  font-weight: 600;
}

.timeline time {
  color: var(--muted);
  font-size: 12px;
}

.timeline-face {
  display: grid;
  background: var(--brand-red);
  color: #fff;
  box-shadow: 0 0 0 3px var(--surface);
  border-radius: 50%;
  place-items:  center;
  width: 28px;
  height: 28px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
}

.timeline-bubble {
  display: grid;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  gap: 6px;
  padding: 10px 14px;
}

.timeline-comment.is-focused .timeline-bubble {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px #c914221f;
}

.timeline-bubble p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

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

.timeline-head b {
  font-size: 13px;
}

.timeline-mentions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.timeline-mentions span {
  color: var(--accent-text);
  font-size: 12.5px;
  font-weight: 600;
}

.timeline-bubble .supporting-link {
  justify-self: start;
}

.composer {
  display: grid;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  gap: 8px;
  padding: 10px 12px;
  transition: border-color .12s;
}

.composer:focus-within {
  border-color: var(--border-hover);
}

.task-dialog .composer textarea {
  box-shadow: none;
  resize: none;
  background: none;
  border: 0;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 4px 2px;
  font-size: 14px;
  line-height: 1.55;
}

.task-dialog .composer textarea:focus {
  outline: none;
  box-shadow: none;
}

.composer-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.composer-chip {
  color: var(--accent-text);
  cursor: pointer;
  background: #c914221a;
  border: 0;
  border-radius: 13px;
  height: 26px;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 600;
}

.composer-link {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 6px;
  width: 100%;
}

.task-dialog .composer-link input {
  height: 32px;
  margin: 0;
  font-size: 13px;
}

.composer-bar {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 8px;
}

.composer-tools {
  display: flex;
  gap: 4px;
}

.composer-menu {
  position: relative;
}

.composer-menu .filter-pop {
  top: auto;
  bottom: calc(100% + 6px);
}

.composer-tools button {
  display: inline-flex;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 15px;
  align-items:  center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 550;
}

.composer-tools button:hover:not(:disabled), .composer-tools button[aria-pressed="true"], .composer-tools button[aria-expanded="true"] {
  background: var(--surface-muted);
  color: var(--text);
}

.composer-bar > .primary {
  border-radius: 16px;
  height: 32px;
  padding: 0 16px;
  font-size: 13px;
}

.composer-bar > .primary:disabled {
  background: var(--surface-muted);
  color: var(--muted);
  opacity: 1;
  border-color: #0000;
}

.task-pill.is-synced > button > svg:first-child {
  color: #3f8f7f;
}

.calendar-sync {
  display: grid;
  gap: 10px;
  padding: 6px;
  font-size: 13px;
}

.calendar-sync p {
  margin: 0;
  line-height: 1.5;
}

.calendar-sync ul {
  display: grid;
  list-style: none;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.calendar-sync li {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 10px;
  justify-content: space-between;
  align-items:  center;
  gap: 10px;
  padding: 8px 10px;
}

.calendar-sync li span {
  display: grid;
  min-width: 0;
}

.calendar-sync li small {
  color: var(--muted);
  font-size: 12px;
}

.calendar-sync li button {
  border-radius: 15px;
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
}

.task-dialog .task-timeline {
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

.task-dialog-controls {
  gap: 5px;
}

.task-pill > button, .task-pill.is-static {
  gap: 5px;
  height: 32px;
  padding: 0 8px 0 10px;
  font-size: 12.5px;
}

.task-pill-label {
  font-size: 11.5px;
}

.files-link-form .text-button {
  font-size: 13px;
}

.files-list .file-info small a.file-task {
  display: inline;
  color: var(--text);
  white-space: normal;
  font-size: 12px;
  font-weight: 600;
}

.task-dialog-actions .task-edit svg {
  width: 14px;
  height: 14px;
}

.task-pill > button:disabled {
  cursor: default;
}

.task-pill > button:disabled:hover {
  border-color: var(--border);
  background: var(--surface);
}

.task-dialog-controls > .task-pill:nth-last-child(-n+3) > .filter-pop {
  left: auto;
  right: 0;
}

.task-text {
  position: relative;
  display: grid;
  border: 1px solid #0000;
  border-radius: 14px;
  gap: 18px;
  margin: -10px -14px;
  padding: 10px 14px;
  transition: border-color .12s, background .12s;
}

.task-text.is-editable:not(.is-editing):hover {
  border-color: var(--border);
  background: color-mix(in srgb, var(--surface-muted) 55%, transparent);
}

.task-text.is-editing {
  border-color: var(--border-hover);
}

.task-text-hint {
  position: absolute;
  display: inline-flex;
  background: var(--surface);
  color: var(--muted);
  opacity: 0;
  pointer-events: none;
  border-radius: 12px;
  align-items:  center;
  gap: 5px;
  padding: 3px 9px;
  transition: opacity .12s;
  font-size: 11.5px;
  font-weight: 550;
  top: 10px;
  right: 12px;
}

.task-text-hint svg {
  width: 12px;
  height: 12px;
}

.task-text.is-editable:not(.is-editing):hover .task-text-hint {
  opacity: 1;
}

.task-dialog .task-text .task-title-input, .task-dialog .task-text .task-description-input, .task-dialog .task-text .task-description-view {
  background: none;
  border: 0;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
}

.task-dialog .task-text .task-title-input:not(:disabled) {
  cursor: text;
}

.task-dialog .task-text .task-title-input:focus, .task-dialog .task-text .task-description-input:focus {
  box-shadow: none;
  background: none;
}

.task-dialog .task-text .task-description-view.is-editable:hover {
  background: none;
}

.task-text-bar {
  display: flex;
  border-top: 1px solid var(--border);
  justify-content: flex-end;
  align-items:  center;
  gap: 8px;
  padding-top: 10px;
}

.task-text-bar small {
  color: var(--muted);
  margin-right: auto;
  font-size: 12px;
}

.task-text-bar button {
  border-radius: 16px;
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
}

.task-dialog .task-text .task-title-input:hover, .task-dialog .task-text .task-description-input:hover {
  background: none;
}

.task-text, .task-text.is-editable:not(.is-editing):hover {
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
}

.task-text.is-editing {
  gap: 14px;
}

.task-title-row {
  display: flex;
  align-items:  flex-start;
  gap: 14px;
}

.task-title-row h2 {
  flex: 1;
  min-width: 0;
}

.task-edit-text {
  display: inline-flex;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  border-radius: 16px;
  flex: none;
  align-items:  center;
  gap: 6px;
  height: 32px;
  margin-top: 4px;
  padding: 0 13px;
  font-size: 12.5px;
  font-weight: 600;
}

.task-edit-text:hover:not(:disabled) {
  border-color: var(--border-hover);
  background: var(--surface-muted);
}

.task-edit-text svg {
  width: 13px;
  height: 13px;
}

.task-field {
  display: grid;
  gap: 6px;
  margin: 0;
}

.task-field > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.task-dialog .task-text .task-field .task-title-input, .task-dialog .task-text .task-field .task-description-input {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  margin: 0;
  padding: 10px 14px;
}

.task-dialog .task-text .task-field .task-title-input {
  font-size: 22px;
}

.task-dialog .task-text .task-field .task-description-input {
  min-height: 140px;
}

.task-dialog .task-text .task-field .task-title-input:focus, .task-dialog .task-text .task-field .task-description-input:focus {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-red) 12%, transparent);
}

.task-text-bar {
  border-top: 0;
  padding-top: 0;
}

.task-text-bar button {
  border-radius: 16px;
}

.task-dialog .task-text .task-field .task-title-input:hover, .task-dialog .task-text .task-field .task-description-input:hover {
  background: var(--surface);
  border-color: var(--border-hover);
}

.task-dialog-frame {
  container-type: inline-size;
}

.task-dialog-top {
  position: relative;
  display: flex;
  align-items:  flex-start;
  gap: 10px;
  padding: 12px 12px 12px 18px;
}

.task-dialog-top .task-dialog-controls {
  flex: auto;
  min-width: 0;
  padding-top: 0;
}

.task-dialog-top .task-dialog-actions {
  display: flex;
  flex: none;
  align-items:  center;
  gap: 2px;
}

.icon-menu {
  position: relative;
}

.icon-menu-button {
  display: grid;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 50%;
  place-items:  center;
  width: 34px;
  height: 34px;
  padding: 0;
}

.icon-menu-button:hover, .icon-menu-button[aria-expanded="true"] {
  background: var(--surface-muted);
  color: var(--text);
}

.icon-menu-button svg {
  width: 18px;
  height: 18px;
}

.icon-menu-pop {
  width: 200px;
  left: auto;
  right: 0;
}

.icon-menu-pop .filter-options-list button > span {
  display: inline-flex;
  align-items:  center;
  gap: 9px;
}

.icon-menu-pop svg {
  color: var(--muted);
  width: 15px;
  height: 15px;
}

.task-copied {
  position: absolute;
  z-index: 5;
  background: var(--text);
  color: var(--surface);
  border-radius: 14px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  top: 52px;
  right: 16px;
}

.task-pill.is-compact .task-pill-label {
  display: none;
}

@container (width <= 1000px) {
  .task-pill-label, .task-pill.is-compact > button > span {
    display: none;
  }
}

@container (width <= 640px) {
  .task-pill > button {
    padding: 0 7px 0 9px;
  }

  .task-pill .caret {
    display: none;
  }
}

.task-dialog-top .task-dialog-controls {
  flex: 1 1 0;
}

.task-dialog-top > .task-dialog-actions {
  margin: 0;
}

.partners {
  display: grid;
  gap: 4px;
}

.partners-lenses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.partners-lens {
  display: inline-flex;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  border-radius: 19px;
  align-items:  center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  font-size: 13px;
}

.partners-lens b {
  color: var(--text);
  font-size: 15px;
}

.partners-lens svg {
  width: 16px;
  height: 16px;
}

.partners-lens.is-due svg {
  color: var(--brand-red);
}

.partners-lens.is-cold svg {
  color: var(--warning);
}

.partners-lens:hover {
  border-color: var(--border-hover);
}

.partners-lens.is-on {
  border-color: var(--brand-red);
  color: var(--text);
  background: #c914220f;
}

.partners-list {
  display: grid;
  list-style: none;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  border-radius: 16px;
  margin: 0;
  padding: 0;
}

.partners-list > li + li {
  border-top: 1px solid var(--border);
}

.partner-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 2.2fr) 150px minmax(0, 1.2fr) 90px 100px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  align-items:  center;
  gap: 14px;
  width: 100%;
  padding: 12px 18px;
}

.partner-row:hover {
  background: var(--surface-muted);
}

.partner-row.is-head {
  background: var(--surface-muted);
  color: var(--muted);
  cursor: default;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
}

.partner-row.is-head > :first-child {
  height: 0;
}

.partner-face {
  display: grid;
  border-radius: 50%;
  place-items:  center;
  width: 40px;
  height: 40px;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.partner-face.is-large {
  width: 64px;
  height: 64px;
  font-size: 20px;
}

.tone-red {
  color: #b51222;
  background: #c914221a;
}

.tone-violet {
  color: #6247d8;
  background: #7c5cff1f;
}

.tone-green {
  color: #23755a;
  background: #2f8f6b1f;
}

.tone-blue {
  color: #2659b3;
  background: #2f6fdb1f;
}

.tone-teal {
  color: #157c80;
  background: #1a9aa01f;
}

.tone-amber {
  color: #9a6418;
  background: #c783251f;
}

.tone-sky {
  color: #2a7eab;
  background: #3b9fd81f;
}

.tone-slate {
  background: var(--surface-muted);
  color: var(--muted);
}

.partner-who {
  display: grid;
  min-width: 0;
}

.partner-who b, .partner-who small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partner-who b {
  font-size: 14px;
}

.partner-who small {
  color: var(--muted);
  font-size: 12.5px;
}

.partner-kind {
  white-space: nowrap;
  border-radius: 11px;
  justify-self: start;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
}

.partner-companies {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
}

.partner-last {
  color: var(--muted);
  font-size: 12.5px;
}

.partner-last.is-cold {
  color: var(--warning);
  font-weight: 600;
}

.partner-follow {
  display: inline-flex;
  color: var(--muted);
  align-items:  center;
  gap: 5px;
  font-size: 12.5px;
}

.partner-follow svg {
  width: 13px;
  height: 13px;
}

.partner-follow.is-overdue, .partner-follow.is-today {
  color: var(--brand-red);
  font-weight: 650;
}

.partners-empty {
  display: grid;
  border: 1px dashed var(--border);
  text-align: center;
  border-radius: 16px;
  justify-items: center;
  gap: 8px;
  padding: 48px 24px;
}

.partners-empty h3 {
  margin: 0;
  font-size: 17px;
}

.partners-empty p {
  color: var(--muted);
  max-width: 460px;
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.6;
}

.partners-empty .primary {
  display: inline-flex;
  border-radius: 18px;
  align-items:  center;
  gap: 6px;
}

@media (max-width: 900px) {
  .partner-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  .partner-companies, .partner-last, .partner-kind, .partner-row.is-head {
    display: none;
  }
}

.account-dialog.partner-add {
  width: min(600px, 100vw - 32px);
}

.partner-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.partner-form label {
  display: grid;
  color: var(--muted);
  gap: 5px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
}

.partner-form .span-2 {
  grid-column: 1 / -1;
}

.partner-company-picks {
  display: flex;
  border: 0;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.partner-company-picks legend {
  color: var(--muted);
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
}

.partner-company-picks button {
  display: inline-flex;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  border-radius: 15px;
  align-items:  center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
}

.partner-company-picks button.is-on {
  border-color: var(--brand-red);
  background: #c914220f;
  font-weight: 600;
}

.partner-company-picks svg {
  color: var(--brand-red);
  width: 13px;
  height: 13px;
}

.partner-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.partner-form-actions button {
  border-radius: 17px;
}

.partner-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items:  start;
  gap: 16px;
}

.partner-head h2 {
  letter-spacing: -.015em;
  margin: 4px 0 2px;
  font-size: 24px;
}

.partner-head p {
  color: var(--muted);
  margin: 0;
  font-size: 14px;
}

.partner-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.partner-contact a {
  display: inline-flex;
  border: 1px solid var(--border);
  color: var(--text);
  overflow: hidden;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 15px;
  align-items:  center;
  gap: 6px;
  max-width: 100%;
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
}

.partner-contact a:hover {
  border-color: var(--border-hover);
  background: var(--surface-muted);
}

.partner-contact svg {
  color: var(--muted);
  width: 14px;
  height: 14px;
}

.partner-editor .partner-form input {
  height: 38px;
}

.partner-quick-dates {
  display: flex;
  gap: 12px;
}

.partner-quick-dates .text-button {
  font-size: 12.5px;
}

.partner-composer-kinds {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 4px;
}

.partner-composer-kinds button {
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 14px;
  height: 28px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 600;
}

.partner-composer-kinds button[aria-pressed="true"] {
  background: var(--brand-red);
  color: #fff;
}

.partner-composer .partner-composer-kinds input[type="date"] {
  border: 1px solid var(--border);
  border-radius: 14px;
  flex: none;
  width: auto;
  height: 28px;
  margin: 0 0 0 auto;
  padding: 0 8px;
  font-size: 12px;
}

.partner-composer .composer-bar small {
  font-size: 12px;
}

.timeline-face.kind-note {
  background: var(--surface-muted);
  color: var(--text);
}

.timeline-face.kind-call {
  background: #2f8f6b;
}

.timeline-face.kind-meeting {
  background: #2f6fdb;
}

.timeline-face.kind-email {
  background: #7c5cff;
}

.timeline-remove {
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  background: none;
  border: 0;
  margin-left: auto;
  padding: 0;
}

.timeline-bubble:hover .timeline-remove {
  opacity: 1;
}

.timeline-remove svg {
  width: 13px;
  height: 13px;
}

.partner-log .composer {
  margin-bottom: 16px;
}

.partner-emails {
  display: grid;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 0 0 12px;
  padding: 0;
}

.partner-emails li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items:  center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 13px;
}

.partner-emails li + li {
  border-top: 1px solid var(--border);
}

.partner-emails svg {
  color: var(--muted);
  width: 15px;
  height: 15px;
}

.partner-emails span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partner-emails time {
  color: var(--muted);
  font-size: 12px;
}

.partner-signals {
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

.partner-signals h3 {
  margin: 0 0 12px;
  font-size: 15px;
}

.segmented.segmented-small {
  border-radius: 9px;
  padding: 2px;
}

.segmented.segmented-small > button, .segmented.segmented-small > button:not(.primary):not(.text-button) {
  border-radius: 7px;
  height: 24px;
  padding: 0 9px;
  font-size: 11.5px;
}

.task-share {
  display: grid;
  gap: 8px;
}

.task-share-pill .task-pill-label, .task-share-pill > button > .caret, .task-share-pill > button > span:empty {
  display: none;
}

.task-share-pill > button {
  gap: 5px;
}

.task-share-pill:not(.is-empty) > button > span {
  display: inline-grid;
  background: var(--brand-red);
  color: #fff;
  border-radius: 9px;
  place-items:  center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
}

.task-share-pill .task-pill-pop.is-wide {
  width: min(390px, 100vw - 32px);
  left: auto;
  right: 0;
}

.partner-portal .text-button {
  font-size: 13px;
}

@media (max-width: 600px) {
  .task-share-pill .task-pill-pop.is-wide {
    position: fixed;
    width: auto;
    top: 64px;
    left: 16px;
    right: 16px;
  }
}

.task-share > p {
  color: var(--muted);
  margin: 4px 8px 2px;
  font-size: 12px;
  line-height: 1.5;
}

.task-share-list {
  display: grid;
  list-style: none;
  gap: 2px;
  margin: 0;
  padding: 0;
}

.task-share-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto auto;
  border-radius: 10px;
  align-items:  center;
  gap: 9px;
  padding: 6px 8px;
}

.task-share-list li:hover {
  background: var(--surface-muted);
}

.task-share-list li > span {
  display: grid;
  min-width: 0;
}

.task-share-list b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
}

.task-share-list small {
  color: var(--muted);
  font-size: 11.5px;
}

.task-share .filter-options-list button > span, .partner-share-add .filter-options-list button > span {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  text-align: left;
  align-items:  center;
  column-gap: 9px;
}

.partner-share-add .filter-options-list button > span {
  grid-template-columns: minmax(0, 1fr);
}

.task-share .filter-options-list button > span small, .partner-share-add .filter-options-list button > span small {
  grid-column: 2;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 400;
}

.partner-share-add .filter-options-list button > span small {
  grid-column: 1;
}

.task-share .filter-options-list .task-face {
  grid-row: span 2;
  background: var(--surface-muted);
  color: var(--text);
  box-shadow: none;
}

.task-share > .muted {
  margin: 0 8px 4px;
  font-size: 12px;
}

.task-share-search {
  display: flex;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 17px;
  align-items:  center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
}

.task-share-search svg {
  color: var(--muted);
  flex: none;
  width: 14px;
  height: 14px;
}

.task-share-search input, .task-share-search input:focus {
  outline: 0;
  box-shadow: none;
  background: none;
  border: 0;
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  font-size: 13px;
}

.task-share-search:focus-within {
  border-color: var(--border-hover);
}

.share-remove.share-remove {
  display: inline-grid;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 50%;
  place-items:  center;
  width: 26px;
  height: 26px;
  padding: 0;
}

.share-remove.share-remove:hover {
  background: var(--surface-muted);
  color: var(--text);
}

.share-remove svg {
  width: 14px;
  height: 14px;
}

.partner-portal {
  display: grid;
  border-top: 1px solid var(--border);
  gap: 12px;
  padding: 18px 0 20px;
}

.partner-portal h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: 15px;
}

.partner-portal h3 .count {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
}

.portal-state.is-active {
  color: #1f7a57;
  background: #2f8f6b24;
}

.portal-state.is-invited {
  color: #2659b5;
  background: #2f6fdb1f;
}

.partner-portal-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  align-items:  center;
  gap: 12px;
  padding: 12px 14px;
}

.partner-portal-card > i {
  display: grid;
  background: var(--surface-muted);
  color: var(--muted);
  border-radius: 50%;
  place-items:  center;
  width: 36px;
  height: 36px;
}

.partner-portal-card.is-active > i {
  color: #1f7a57;
  background: #2f8f6b24;
}

.partner-portal-card.is-invited > i {
  color: #2659b5;
  background: #2f6fdb1f;
}

.partner-portal-card > i svg {
  width: 17px;
  height: 17px;
}

.partner-portal-card > p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.partner-portal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items:  center;
  gap: 8px;
}

.partner-portal-actions button {
  border-radius: 18px;
}

.partner-portal-invite {
  display: grid;
  border: 1px solid var(--border);
  border-radius: 14px;
  gap: 10px;
  padding: 14px;
}

.partner-portal-invite p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.partner-portal-hint {
  margin: -4px 0 0;
  font-size: 12px;
}

.partner-portal .invite-builder {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}

.partner-shares {
  display: grid;
  gap: 8px;
}

.partner-shares h4 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0 0;
  font-size: 13px;
}

.partner-shares h4 .count {
  margin: 0;
}

.partner-shares > p {
  margin: 0;
  font-size: 13px;
}

.partner-shares ul {
  display: grid;
  list-style: none;
  border: 1px solid var(--border);
  overflow: hidden;
  border-radius: 14px;
  margin: 0;
  padding: 0;
}

.partner-shares li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items:  center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
}

.partner-shares li + li {
  border-top: 1px solid var(--border);
}

.partner-shares li > a {
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
}

.partner-shares li > a:hover {
  text-decoration: underline;
}

.partner-shares li > small {
  color: var(--muted);
  font-size: 12px;
}

.partner-share-add {
  display: grid;
  gap: 6px;
  max-width: 420px;
}

.partner-share-add .filter-options-list {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
}

.partner-share-add .filter-options-list > p {
  margin: 6px 8px;
  font-size: 12px;
}

@media (max-width: 600px) {
  .partner-portal-card {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .partner-portal-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .partner-shares li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .partner-shares li > small {
    display: none;
  }
}

.partner-signal-head {
  color: var(--muted);
  margin: 14px 0 8px;
  font-size: 12.5px;
  font-weight: 600;
}

.partner-signals > .muted {
  margin: 0 0 8px;
  font-size: 13px;
}

.partner-emails a {
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partner-emails a:hover {
  text-decoration: underline;
}

.partner-emails li.is-upcoming svg {
  color: var(--brand-red);
}

.partner-emails em {
  background: color-mix(in srgb, var(--brand-red) 10%, transparent);
  color: var(--brand-red);
  border-radius: 9px;
  margin-left: 8px;
  padding: 2px 7px;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

.assist-how {
  display: grid;
  color: var(--muted);
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
}

.assist-panel .primary, .assist-panel .secondary {
  border-radius: 18px;
}

.juniper-signin {
  display: grid;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 14px;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 14px;
}

.juniper-signin-head {
  display: flex;
  align-items:  center;
  gap: 7px;
  margin: 0;
  font-size: 13px;
  font-weight: 650;
}

.juniper-signin-head svg {
  color: var(--brand-red);
  width: 15px;
  height: 15px;
}

.juniper-signin dl {
  display: grid;
  gap: 4px;
  margin: 0;
}

.juniper-signin dl > div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 8px;
  font-size: 13px;
}

.juniper-signin dt {
  color: var(--muted);
}

.juniper-signin dd {
  overflow-wrap: anywhere;
  margin: 0;
}

.juniper-signin-note {
  color: var(--muted);
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.juniper-signin .primary {
  border-radius: 17px;
  justify-self: start;
  height: 34px;
  padding: 0 16px;
  font-size: 13px;
}

.juniper-signin-done {
  display: flex;
  color: #1f7a51;
  flex-wrap: wrap;
  align-items:  center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
}

.juniper-signin-done svg {
  width: 14px;
  height: 14px;
}

.assist-sections {
  display: grid;
  gap: 28px;
}

.assist-section {
  display: grid;
  gap: 12px;
}

.assist-section > h2 {
  display: flex;
  align-items:  center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
}

.assist-section > .assist-intro {
  color: var(--muted);
  margin: -6px 0 0;
  font-size: 13px;
}

.assist-section.is-waiting {
  border: 1px solid color-mix(in srgb, var(--brand-red) 30%, var(--border));
  background: color-mix(in srgb, var(--brand-red) 4%, var(--surface));
  border-radius: 16px;
  padding: 16px;
}

.assist-nudge {
  display: flex;
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  border-radius: 12px;
  flex-wrap: wrap;
  align-items:  center;
  gap: 4px 8px;
  margin: 0;
  padding: 10px 14px;
  font-size: 13px;
}

.assist-nudge .text-button {
  padding: 0;
  font-size: 13px;
  font-weight: 650;
}

.assist-empty .assist-how {
  text-align: left;
  max-width: 420px;
  margin: 10px auto 0;
}

.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items:  start;
  gap: 20px;
}

.profile-main, .profile-side {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.profile .panel.profile-section {
  border-radius: 16px;
  margin: 0;
}

.profile .secondary, .profile a.secondary.button-link, .profile .primary {
  border-radius: 18px;
}

.account-add {
  position: relative;
  flex: none;
}

.account-add > .secondary {
  display: inline-flex;
  white-space: nowrap;
  align-items:  center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
}

.account-add > .secondary svg {
  width: 15px;
  height: 15px;
}

.account-add-menu {
  position: absolute;
  z-index: 30;
  display: grid;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  min-width: 200px;
  padding: 6px;
  top: calc(100% + 6px);
  right: 0;
  box-shadow: 0 16px 40px #00000024;
}

.account-add-menu a {
  display: flex;
  color: var(--text);
  text-decoration: none;
  border-radius: 8px;
  align-items:  center;
  gap: 10px;
  padding: 9px 10px;
  font-size: 13.5px;
}

.account-add-menu a:hover {
  background: var(--surface-muted);
}

@media (max-width: 1180px) {
  .profile-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .account-add-menu {
    left: 0;
    right: auto;
  }
}

@media (max-width: 640px) {
  .profile-section > .toolbar .account-add {
    justify-content: flex-start;
  }
}

.avatar-img {
  display: block;
  object-fit: cover;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.account-avatar:has(.avatar-img) {
  overflow: hidden;
  padding: 0;
}

.account-who-avatar:has(.avatar-img) {
  overflow: hidden;
  padding: 0;
}

.avatar-picker {
  position: relative;
  flex: none;
}

button.profile-avatar {
  position: relative;
  cursor: pointer;
  border: 0;
  padding: 0;
}

button.profile-avatar:has(.avatar-img) {
  background: none;
}

.profile-avatar-edit {
  position: absolute;
  display: grid;
  border: 2px solid var(--page);
  background: var(--surface);
  color: var(--text);
  border-radius: 50%;
  place-items:  center;
  width: 22px;
  height: 22px;
  bottom: -2px;
  right: -2px;
  box-shadow: 0 1px 3px #0003;
}

.profile-avatar-edit svg {
  width: 11px;
  height: 11px;
}

button.profile-avatar:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

.avatar-menu {
  position: absolute;
  z-index: 30;
  display: grid;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 14px;
  gap: 10px;
  width: min(340px, 100vw - 32px);
  padding: 14px;
  top: calc(100% + 10px);
  left: 0;
  box-shadow: 0 18px 44px #00000029;
}

.avatar-menu-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 650;
}

.avatar-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
}

.avatar-option {
  display: grid;
  color: var(--text);
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 12px;
  justify-items: center;
  gap: 5px;
  padding: 8px 4px;
}

.avatar-option:hover:not(:disabled) {
  background: var(--surface-muted);
}

.avatar-option.is-on {
  border-color: var(--brand-red);
  background: color-mix(in srgb, var(--brand-red) 6%, transparent);
}

.avatar-option small {
  color: var(--muted);
  font-size: 11px;
}

.avatar-option-face {
  position: relative;
  display: grid;
  background: var(--accent-soft);
  color: var(--accent-text);
  border-radius: 50%;
  place-items:  center;
  width: 44px;
  height: 44px;
  font-size: 14px;
  font-weight: 650;
}

.avatar-option-face img {
  object-fit: cover;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.avatar-option-face.is-upload {
  border: 1px dashed var(--border-hover);
  color: var(--muted);
  background: none;
}

.avatar-option-face.is-upload svg {
  width: 17px;
  height: 17px;
}

.avatar-option-face > i {
  position: absolute;
  bottom: -4px;
  right: -4px;
}

.avatar-option-face > i .provider-mark {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

.avatar-option-face > i .provider-mark svg, .avatar-option-face > i .provider-mark img {
  width: 11px !important;
  height: 11px !important;
  font-size: 11px !important;
}

.avatar-menu-note {
  color: var(--muted);
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.has-photo {
  overflow: hidden;
  padding: 0;
  font-style: normal;
}

.has-photo > img {
  display: block;
  object-fit: cover;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.task-faces i.has-photo, .task-face.has-photo, .timeline-face.has-photo {
  background: var(--surface-muted);
}

.person-avatar {
  font-style: normal;
}

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

.task-people .task-faces i {
  width: 18px;
  height: 18px;
  font-size: 8px;
}

.task-people-names {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-person {
  display: inline-flex;
  align-items:  center;
  gap: 10px;
}

.admin-person .task-face {
  flex: none;
  width: 28px;
  height: 28px;
  font-size: 10.5px;
}

.admin-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:  center;
  gap: 12px;
}

.admin-bar .admin-tabs {
  margin: 0;
}

.admin-bar .admin-month b {
  text-align: center;
  min-width: 140px;
  font-size: 14px;
}

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

.admin-stat {
  display: grid;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 14px;
  align-content:  start;
  gap: 4px;
  padding: 14px 16px;
}

.admin-stat small {
  color: var(--muted);
  font-size: 12px;
}

.admin-stat b {
  font-size: 22px;
  font-weight: 700;
}

.admin-stat b span {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
}

.admin-stat .text-button {
  justify-self: start;
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
}

.admin-stat.is-warn b {
  color: var(--warning);
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items:  start;
  gap: 18px;
}

.admin-side {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.admin-page .panel {
  border-radius: 16px;
  margin: 0;
}

.admin-people-list {
  display: grid;
  list-style: none;
  border: 1px solid var(--border);
  overflow: hidden;
  border-radius: 14px;
  margin: 0;
  padding: 0;
}

.admin-people-list li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) minmax(0, 200px) 110px auto;
  align-items:  center;
  gap: 14px;
  padding: 11px 14px;
}

.admin-people-list li + li {
  border-top: 1px solid var(--border);
}

.admin-people-list .task-face {
  width: 32px;
  height: 32px;
  font-size: 11px;
}

.admin-people-who {
  display: grid;
  min-width: 0;
}

.admin-people-who b {
  font-size: 13.5px;
}

.admin-people-who small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.admin-people-spend {
  display: grid;
  gap: 5px;
  font-size: 13px;
}

.admin-people-spend small {
  color: var(--muted);
}

.admin-people-spend .usage-bar {
  max-width: none;
  margin: 0;
}

.admin-people-left {
  text-align: right;
  font-size: 13px;
}

.admin-gift.admin-gift {
  border-radius: 15px;
  height: 30px;
  padding: 0 14px;
  font-size: 12.5px;
}

.admin-where-head {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 10px;
  margin-bottom: 12px;
}

.admin-page .admin-where-head h2 {
  margin: 0;
}

.admin-days .usage-days {
  gap: 2px;
  height: 110px;
}

.admin-activity {
  display: grid;
  gap: 14px;
}

.admin-activity-table {
  overflow-x: auto;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 14px;
  transition: opacity .15s;
}

.admin-activity-table.is-loading {
  opacity: .55;
}

.admin-activity-table .people-table {
  border: 0;
  margin: 0;
}

.admin-activity-table td, .admin-activity-table th {
  font-size: 13px;
}

.admin-activity-table .num {
  text-align: right;
}

.admin-activity-table .nowrap {
  white-space: nowrap;
}

.admin-activity-table .admin-person .task-face {
  width: 24px;
  height: 24px;
  font-size: 9px;
}

.admin-pager {
  display: flex;
  color: var(--muted);
  justify-content: flex-end;
  align-items:  center;
  gap: 10px;
  font-size: 13px;
}

.admin-pager > span:first-child {
  margin-right: auto;
}

.admin-pager .secondary {
  display: inline-grid;
  border-radius: 50%;
  place-items:  center;
  width: 34px;
  height: 34px;
  padding: 0;
}

.admin-pager-page {
  color: var(--text);
  font-weight: 600;
}

@media (max-width: 1180px) {
  .admin-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 800px) {
  .admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-people-list li {
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }

  .admin-people-spend {
    grid-column: 2 / -1;
  }

  .admin-people-left {
    grid-column: 2;
    text-align: left;
  }
}

.usage-days li.is-zero > span {
  background: var(--border);
  opacity: 1;
  height: 2px !important;
}

.admin-bar .admin-month-pill .task-pill-pop {
  width: 240px;
  left: auto;
  right: 0;
}

.admin-bar .admin-month-pill > button {
  border-radius: 19px;
  height: 38px;
  padding: 0 14px 0 12px;
  font-size: 13.5px;
}

.admin-stat {
  position: relative;
}

.admin-stat-edit {
  position: absolute;
  display: grid;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  border-radius: 50%;
  place-items:  center;
  width: 30px;
  height: 30px;
  padding: 0;
  top: 12px;
  right: 12px;
}

.admin-stat-edit:hover {
  border-color: var(--border-hover);
  background: var(--surface-muted);
  color: var(--text);
}

.admin-stat-edit svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 600px) {
  .admin-bar .admin-month-pill .task-pill-pop {
    left: 0;
    right: auto;
  }
}

.admin-bar {
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.admin-bar .admin-month-pill .task-pill-pop {
  left: 0;
  right: auto;
}

.admin-bar .admin-tabs {
  flex: none;
}

.admin-page .admin-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.admin-section-title.admin-section-title {
  margin: 6px 0 0;
  font-size: 16px;
}

.admin-stat-link {
  color: var(--accent-text);
  text-decoration: none;
  justify-self: start;
  font-size: 12.5px;
  font-weight: 600;
}

.admin-stat-link:hover {
  text-decoration: underline;
}

@media (max-width: 1100px) {
  .admin-bar .admin-month-pill .task-pill-label {
    display: none;
  }
}

@media (max-width: 900px) {
  .admin-page .admin-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .admin-bar {
    flex-wrap: wrap;
  }
}

.issues-states {
  justify-self: start;
}

.issues-states .segmented-count {
  margin-left: 2px;
}

.issues-list {
  display: grid;
  list-style: none;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  border-radius: 14px;
  margin: 0;
  padding: 0;
  transition: opacity .15s;
}

.issues-list.is-loading {
  opacity: .55;
}

.issues-list > li + li {
  border-top: 1px solid var(--border);
}

.issues-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto 80px auto;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  align-items:  center;
  gap: 12px;
  width: 100%;
  padding: 11px 16px;
}

.issues-row:hover {
  background: var(--surface-muted);
}

.issues-row.is-regression {
  box-shadow: inset 3px 0 0 var(--danger);
}

.issues-level {
  display: grid;
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  border-radius: 9px;
  place-items:  center;
  width: 32px;
  height: 32px;
}

.issues-level.is-warning {
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: var(--warning);
}

.issues-level.is-info, .issues-level.is-debug {
  background: var(--surface-muted);
  color: var(--muted);
}

.issues-level svg {
  width: 15px;
  height: 15px;
}

.issues-main {
  display: grid;
  min-width: 0;
}

.issues-main b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 650;
}

.issues-main small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.issues-count, .issues-when {
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
  font-size: 12.5px;
}

.issues-state {
  display: inline-flex;
  background: var(--surface-muted);
  color: var(--muted);
  white-space: nowrap;
  border-radius: 12px;
  align-items:  center;
  height: 24px;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 650;
}

.issues-state.is-unresolved {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}

.issues-state.is-resolved {
  color: #1f7a51;
  background: #1f8a5b21;
}

.task-dialog-controls .issues-state {
  border-radius: 17px;
  height: 34px;
  padding: 0 13px;
  font-size: 13px;
}

.issue-title {
  overflow-wrap: anywhere;
}

.issue-culprit {
  overflow-wrap: anywhere;
  margin: -14px 0 0;
  font-size: 13px;
}

.issue-meta {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  align-items:  end;
  gap: 20px;
}

.issue-spark {
  display: flex;
  align-items:  flex-end;
  gap: 3px;
  height: 44px;
}

.issue-spark span {
  background: var(--danger);
  opacity: .7;
  border-radius: 2px 2px 0 0;
  flex: 1;
}

.issue-controls {
  display: grid;
  gap: 8px;
}

.issue-note.issue-note {
  border-radius: 18px;
  height: 36px;
  margin: 0;
  font-size: 13px;
}

.issue-event-nav {
  display: flex;
  color: var(--muted);
  align-items:  center;
  gap: 8px;
  font-size: 12.5px;
}

.issue-event-nav .secondary {
  display: inline-grid;
  border-radius: 50%;
  place-items:  center;
  width: 30px;
  height: 30px;
  padding: 0;
}

.issue-message {
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 14px;
}

.issue-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px 16px;
  margin: 0;
  font-size: 12.5px;
}

.issue-facts div {
  display: grid;
  min-width: 0;
}

.issue-facts dt {
  color: var(--muted);
}

.issue-facts dd {
  overflow-wrap: anywhere;
  margin: 0;
}

.issue-subhead {
  color: var(--muted);
  margin: 8px 0 0;
  font-size: 12.5px;
}

.issue-crumbs {
  display: grid;
  list-style: none;
  gap: 4px;
  margin: 0;
  padding: 0;
  font-size: 12.5px;
}

.issue-crumbs li {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  overflow-wrap: anywhere;
  gap: 10px;
}

.issue-crumb-level {
  color: var(--muted);
}

.issue-stack {
  overflow: auto;
  background: var(--surface-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: 10px;
  max-height: 320px;
  margin: 0;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 700px) {
  .issues-row {
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }

  .issues-count, .issues-when {
    display: none;
  }

  .issue-meta {
    grid-template-columns: minmax(0, 1fr);
  }
}

.perf-bar {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 10px;
}

.perf-vitals span {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.perf-vitals em {
  border-radius: 11px;
  padding: 3px 9px;
  font-size: 12.5px;
  font-style: normal;
  font-weight: 650;
}

.perf-vitals em.is-ok, .perf-good {
  color: #1f7a51;
  background: #1f8a5b21;
}

.perf-vitals em.is-over, .perf-bad {
  background: color-mix(in srgb, var(--danger) 11%, transparent);
  color: var(--danger);
}

.perf-good, .perf-bad {
  border-radius: 9px;
  padding: 2px 7px;
  font-weight: 650;
}

.perf-list {
  display: grid;
  list-style: none;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  border-radius: 14px;
  margin: 0;
  padding: 0;
}

.perf-list.is-handled {
  opacity: .75;
}

.perf-list > li + li {
  border-top: 1px solid var(--border);
}

.perf-problem {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  align-items:  center;
  gap: 12px;
  padding: 11px 14px;
}

.perf-problem.is-high {
  box-shadow: inset 3px 0 0 var(--danger);
}

.perf-problem.is-medium {
  box-shadow: inset 3px 0 0 var(--warning);
}

.perf-kind {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.perf-problem-main {
  display: grid;
  min-width: 0;
}

.perf-problem-main b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
}

.perf-problem-main small {
  color: var(--muted);
  font-size: 12px;
}

.perf-actions {
  display: flex;
  gap: 6px;
}

.perf-subject {
  overflow-wrap: anywhere;
  max-width: 460px;
}

.perf-method {
  color: var(--muted);
  margin-right: 4px;
  font-size: 11px;
  font-weight: 700;
}

.perf-query {
  display: block;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 520px;
  max-height: 3.2em;
  font-size: 12px;
}

@media (max-width: 700px) {
  .perf-problem {
    grid-template-columns: minmax(0, 1fr);
  }
}

.account-dialog.support-dialog {
  width: min(620px, 100vw - 32px);
}

.account-dialog.support-dialog.is-wide {
  overflow-y: auto;
  width: min(760px, 100vw - 32px);
  max-height: calc(100dvh - 48px);
}

.support-form {
  display: grid;
  gap: 12px;
  margin: 0;
}

.support-form input, .support-form textarea {
  margin: 0;
  font-size: 14px;
}

.support-kinds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.support-kinds button {
  display: flex;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  border-radius: 12px;
  justify-content: center;
  align-items:  center;
  gap: 7px;
  height: 40px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
}

.support-kinds button[aria-pressed="true"] {
  border-color: var(--brand-red);
  background: color-mix(in srgb, var(--brand-red) 7%, transparent);
  color: var(--brand-red);
}

.support-kinds svg {
  width: 16px;
  height: 16px;
}

.support-files {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 8px;
}

.support-files .text-button {
  display: inline-flex;
  align-items:  center;
  gap: 6px;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
}

.support-files small {
  font-size: 12px;
}

.support-file {
  display: inline-flex;
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  border-radius: 14px;
  align-items:  center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 6px 4px 10px;
  font-size: 12.5px;
}

.support-file svg {
  width: 13px;
  height: 13px;
}

.support-file button {
  display: grid;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 50%;
  place-items:  center;
  width: 20px;
  height: 20px;
  padding: 0;
}

.support-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.support-actions .primary, .support-reply .primary {
  display: inline-flex;
  border-radius: 18px;
  align-items:  center;
  gap: 7px;
}

.support-back.support-back {
  padding: 0;
  font-size: 15px;
  font-weight: 650;
}

.support-list {
  display: grid;
  list-style: none;
  border: 1px solid var(--border);
  overflow: hidden;
  border-radius: 14px;
  margin: 0;
  padding: 0;
}

.support-list > li + li {
  border-top: 1px solid var(--border);
}

.support-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  align-items:  center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
}

.support-row.is-admin {
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  padding: 11px 16px;
}

.support-row.is-admin .task-face {
  width: 32px;
  height: 32px;
  font-size: 11px;
}

.support-row:hover {
  background: var(--surface-muted);
}

.support-row.is-unread b {
  font-weight: 750;
}

.support-row-main {
  display: grid;
  min-width: 0;
}

.support-row-main b {
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-items:  center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
}

.support-row-main small {
  color: var(--muted);
  font-size: 12px;
}

.support-dot {
  background: var(--brand-red);
  border-radius: 50%;
  flex: none;
  width: 8px;
  height: 8px;
}

.support-status {
  display: inline-flex;
  background: var(--surface-muted);
  color: var(--muted);
  white-space: nowrap;
  border-radius: 12px;
  align-items:  center;
  height: 24px;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 650;
}

.support-status.is-open {
  background: color-mix(in srgb, var(--brand-red) 10%, transparent);
  color: var(--brand-red);
}

.support-status.is-in-progress {
  color: #2659b5;
  background: #2f6fdb1f;
}

.support-status.is-waiting {
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: var(--warning);
}

.support-status.is-resolved {
  color: #1f7a51;
  background: #1f8a5b21;
}

.support-thread {
  display: grid;
  gap: 16px;
}

.support-thread-head {
  display: grid;
  gap: 6px;
}

.support-thread-head h3 {
  margin: 0;
  font-size: 18px;
}

.support-thread-head > span {
  display: flex;
  color: var(--muted);
  flex-wrap: wrap;
  align-items:  center;
  gap: 8px;
  font-size: 12.5px;
}

.support-messages {
  display: grid;
  list-style: none;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.support-messages > li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items:  start;
  gap: 10px;
}

.support-bubble {
  display: grid;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  gap: 6px;
  padding: 10px 14px;
}

.support-messages > li.is-staff .support-bubble {
  border-color: color-mix(in srgb, var(--brand-red) 25%, var(--border));
  background: color-mix(in srgb, var(--brand-red) 3%, var(--surface));
}

.support-bubble p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
}

.support-by {
  color: var(--muted);
  font-size: 12px !important;
}

.support-by b {
  color: var(--text);
}

.support-staff {
  background: var(--brand-red);
  color: #fff;
  border-radius: 8px;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 700;
}

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

.support-shots img {
  display: block;
  border: 1px solid var(--border);
  object-fit: cover;
  border-radius: 8px;
  max-width: 220px;
  max-height: 150px;
}

.support-context {
  background: var(--surface-muted);
  border-radius: 12px;
  padding: 12px 14px;
}

.support-reply {
  display: grid;
  justify-items: end;
  gap: 8px;
  margin: 0;
}

.support-reply textarea {
  width: 100%;
  margin: 0;
  font-size: 13.5px;
}

.support-notes {
  width: 100%;
  margin: 0;
  font-size: 13px;
}

.account-links {
  display: grid;
  gap: 2px;
  margin: 0 2px 8px;
}

.account-links button {
  display: flex;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 9px;
  align-items:  center;
  gap: 9px;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 550;
}

.account-links button:hover {
  background: var(--surface-muted);
}

.account-links svg {
  color: var(--muted);
  width: 16px;
  height: 16px;
}

.account-links .tab-count {
  margin-left: auto;
}

.account-reply-dot {
  position: absolute;
  border: 2px solid var(--page);
  background: var(--brand-red);
  border-radius: 50%;
  width: 10px;
  height: 10px;
  top: -1px;
  right: -1px;
}

@media (max-width: 560px) {
  .support-kinds {
    grid-template-columns: minmax(0, 1fr);
  }

  .support-row.is-admin {
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }

  .support-row.is-admin .issues-when {
    display: none;
  }
}

.support-actions .text-button {
  font-size: 13.5px;
}

.admin-month-pill .month-short {
  display: none;
}

@media (max-width: 1100px) {
  .admin-month-pill .month-full {
    display: none;
  }

  .admin-month-pill .month-short {
    display: inline;
  }

  .admin-bar .admin-tabs > button {
    padding-left: 11px;
    padding-right: 11px;
  }
}

.company-head {
  display: grid;
  gap: 12px;
  margin: 4px 0 18px;
}

.company-back {
  display: inline-flex;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  justify-self: start;
  align-items:  center;
  gap: 6px;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
}

.company-back:hover {
  color: var(--text);
}

.company-head-row {
  display: flex;
  align-items:  center;
  gap: 16px;
}

.company-head-row .company-logo, .company-head-row > :first-child {
  flex: none;
}

.company-head-main {
  display: grid;
  flex: 1;
  gap: 6px;
  min-width: 0;
}

.company-head-main h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
}

.company-head-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.company-head-meta span {
  background: var(--surface-muted);
  color: var(--muted);
  border-radius: 11px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
}

.company-head-actions {
  display: flex;
  flex: none;
  align-items:  center;
  gap: 6px;
}

.company-head-actions .task-edit-text {
  margin: 0;
}

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

.company-links a {
  display: inline-flex;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  border-radius: 17px;
  align-items:  center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
}

.company-links a:hover {
  border-color: var(--border-hover);
  background: var(--surface-muted);
}

.company-links svg {
  width: 15px;
  height: 15px;
}

.company-links .company-link-out {
  color: var(--muted);
  width: 12px;
  height: 12px;
}

.company-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.company-facts button {
  background: var(--surface-muted);
  color: var(--text);
  cursor: pointer;
  border: 0;
  border-radius: 14px;
  height: 28px;
  padding: 0 11px;
  font-size: 12.5px;
  font-weight: 600;
}

.company-facts button:hover {
  background: var(--border);
}

.company-facts button.is-bad {
  background: color-mix(in srgb, var(--danger) 11%, transparent);
  color: var(--danger);
}

.company-facts button.is-warn {
  background: color-mix(in srgb, var(--warning) 13%, transparent);
  color: var(--warning);
}

@media (max-width: 600px) {
  .company-head-row {
    flex-wrap: wrap;
  }

  .company-head-main h2 {
    font-size: 23px;
  }
}

.company-head {
  margin: 0 0 14px;
}

.company-head-main h2 {
  color: var(--text);
}

.company-head {
  padding-top: 44px;
}

.company-head-row {
  margin-top: 8px;
}

.company-head-main {
  flex: 0 auto;
}

.portfolio-kpi-wrap {
  grid-template-columns: minmax(0, 1fr) auto;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  align-items:  end;
  transition: border-color .15s, transform .15s;
}

.portfolio-kpi-wrap:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.portfolio-kpi-wrap > .portfolio-kpi {
  background: none;
  border: 0;
  border-radius: 16px 0 0 16px;
  padding-right: 8px;
}

.portfolio-kpi-wrap > .portfolio-kpi:hover {
  transform: none;
}

.portfolio-kpi-info.portfolio-kpi-info {
  position: static;
  margin: 0 14px 14px 0;
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-kpi-wrap, .portfolio-kpi-wrap:hover {
    transition: none;
    transform: none;
  }
}

.info-tip-text {
  max-width: min(280px, 100vw - 24px);
}

.portfolio-kpi-wrap:hover {
  transform: none;
  box-shadow: 0 6px 18px #0000000f;
}

.info-tip:not(.is-open) .info-tip-text {
  display: none;
}

.info-tip.is-open .info-tip-text {
  animation: .12s info-tip-in;
}

@keyframes info-tip-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .info-tip.is-open .info-tip-text {
    animation: none;
  }
}

main:focus {
  outline: none;
}

.admin-placeholder {
  background: linear-gradient(90deg, transparent, var(--surface-muted), transparent) var(--surface);
  animation: 1.4s ease-in-out infinite admin-placeholder;
  background-size: 200% 100%;
  min-height: 180px;
}

.admin-activity-table.admin-placeholder {
  min-height: 420px;
}

@keyframes admin-placeholder {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-placeholder {
    animation: none;
  }
}

.support-window .mt-dialog-body, .issue-dialog .mt-dialog-body {
  min-height: min(560px, 100dvh - 140px);
}

.spending-page {
  min-width: 0;
}

.spending-page .admin-bar {
  flex-wrap: wrap;
  gap: 12px;
}

.spending-page .admin-bar h2 {
  margin: 0;
}

.spending-page .admin-form {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.spending-page .admin-form label {
  display: grid;
  gap: 6px;
}

.spending-page .admin-table-wrap {
  overflow-x: auto;
  max-width: 100%;
}

.spending-page .admin-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}

.spending-page .admin-table th, .spending-page .admin-table td {
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  padding: 12px;
}

.spending-page .admin-table th {
  white-space: nowrap;
  color: var(--muted);
}

.spending-page .admin-table td:nth-child(2) {
  overflow-wrap: anywhere;
  min-width: 220px;
  max-width: 400px;
}

.spending-page .admin-table td:nth-child(4) {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.spending-page .admin-table select {
  max-width: 180px;
}

.spending-page .admin-table .text-button {
  display: block;
  margin-top: 6px;
  font-size: 12px;
}

.spending-page {
  grid-template-columns: minmax(0, 1fr);
}

.spending-page > * {
  min-width: 0;
}

.spending-page .admin-stats {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

.spending-page .admin-table td:first-child {
  white-space: nowrap;
  min-width: 105px;
}

.spending-page .admin-table td:nth-child(5) {
  min-width: 110px;
}

.spending-page .admin-table td:nth-child(6) {
  min-width: 165px;
}

.spending-filters {
  display: flex;
  flex-wrap: wrap;
  align-items:  end;
  gap: 12px;
}

.spending-filters label {
  display: grid;
  color: var(--muted);
  gap: 5px;
  min-width: 140px;
  max-width: 100%;
  font-size: 12px;
}

.spending-filters select {
  max-width: 100%;
}

@media (max-width: 1150px) {
  .spending-page .admin-table, .spending-page .admin-table tbody {
    display: block;
  }

  .spending-page .admin-table thead {
    position: absolute;
    overflow: hidden;
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
  }

  .spending-page .admin-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid var(--border);
    padding: 12px 0;
  }

  .spending-page .admin-table td {
    display: block;
    overflow-wrap: anywhere;
    border: 0;
    padding: 8px;
    white-space: normal !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .spending-page .admin-table td[data-label="Provider / description"] {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .spending-page .admin-table td:before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    margin-bottom: 4px;
    font-size: 11px;
  }

  .spending-page .admin-table select {
    max-width: 100%;
  }
}

.spending-page {
  gap: 24px;
}

.spend-header, .spend-section-heading, .spend-actions, .spend-invoice-toolbar {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 16px;
}

.spend-header h2 {
  letter-spacing: -1px;
  margin: 4px 0 6px;
  font-size: 30px;
}

.spend-header p, .spend-section-heading p {
  color: var(--muted);
  margin: 5px 0;
  font-size: 13px;
}

.spend-eyebrow {
  letter-spacing: 1.5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.spend-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.spending-page button, .spending-page a {
  gap: 7px;
}

.spend-actions button, .spend-client-banner button, .spend-invoice-workspace button.primary, .spend-invoice-workspace button.secondary {
  display: inline-flex;
  justify-content: center;
  align-items:  center;
}

.spend-month {
  display: grid;
  color: var(--muted);
  gap: 4px;
  font-size: 11px;
}

.spend-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  align-items:  center;
  gap: 24px;
}

.spend-tabs button {
  display: flex;
  color: var(--muted);
  white-space: nowrap;
  background: none;
  border: 0;
  border-bottom: 2px solid #0000;
  border-radius: 0;
  align-items:  center;
  padding: 14px 0;
  font-size: 13px;
}

.spend-tabs button[aria-current] {
  color: var(--text);
  border-color: var(--accent-text);
  font-weight: 700;
}

.spend-tabs button > span {
  background: var(--surface-muted);
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 10px;
}

.spend-live {
  color: var(--muted);
  display: flex;
  white-space: nowrap;
  align-items:  center;
  gap: 6px;
  margin-left: auto;
  font-size: 11px;
}

.spend-live i {
  background: var(--muted);
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.spend-live i.connected {
  background: #2b9871;
}

.spend-overview {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 2fr;
  border-bottom: 1px solid var(--border);
  gap: 28px;
  padding: 10px 0 20px;
}

.spend-main-total > span {
  display: flex;
  color: var(--muted);
  align-items:  center;
  gap: 8px;
  font-size: 13px;
}

.spend-main-total > strong {
  display: block;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
  margin: 12px 0 4px;
  font-size: 44px;
  font-weight: 600;
}

.spend-main-total p, .spend-main-total button {
  color: var(--muted);
  margin: 8px 0;
  font-size: 12px;
}

.spend-main-total button {
  color: var(--accent-text);
  display: flex;
  align-items:  center;
}

.spend-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items:  center;
  gap: 24px;
}

.spend-metrics > div {
  border-left: 1px solid var(--border);
  display: grid;
  gap: 10px;
  padding-left: 20px;
}

.spend-metrics span {
  font-size: 12px;
  font-weight: 600;
}

.spend-metrics strong {
  letter-spacing: -.7px;
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 600;
}

.spend-metrics small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}

.spend-measure-note {
  grid-column: 1 / -1;
  color: var(--muted);
  margin: 0;
  font-size: 11px;
}

.spend-client-banner {
  display: flex;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-text);
  background: var(--surface);
  border-radius: 10px;
  align-items:  center;
  gap: 16px;
  padding: 20px 24px;
}

.spend-client-banner p {
  color: var(--muted);
  margin: 5px 0 0;
  font-size: 12px;
}

.spend-client-banner button {
  flex-shrink: 0;
  margin-left: auto;
}

.spend-provider-mark {
  display: flex;
  border: 1px solid var(--border);
  background: var(--surface-muted);
  letter-spacing: .5px;
  color: var(--text);
  border-radius: 10px;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 36px;
  height: 36px;
  font-size: 11px;
  font-weight: 750;
}

.spend-section-heading {
  margin-bottom: 18px;
}

.spend-section-heading h3 {
  letter-spacing: -.3px;
  margin: 0;
  font-size: 17px;
}

.spend-section-heading .text-button {
  display: flex;
  white-space: nowrap;
  align-items:  center;
  font-size: 12px;
}

.spend-service-columns, .spend-service-row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 140px 140px 18px;
  align-items:  center;
  gap: 20px;
  width: 100%;
  padding: 14px 12px;
}

.spend-service-columns {
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  background: var(--surface-muted);
  border-radius: 6px;
  padding-block-start: 10px;
  padding-block-end: 10px;
  font-size: 10px;
}

.spend-service-row {
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-align: left;
  font-variant-numeric: tabular-nums;
  background: none;
  border-radius: 0;
  font-size: 14px;
}

.spend-service-row:hover {
  background: var(--surface);
}

.spend-service-row > span:not(:first-child), .spend-service-columns > span:not(:first-child) {
  text-align: right;
}

.spend-service-name {
  display: flex;
  align-items:  center;
  gap: 12px;
  min-width: 0;
}

.spend-service-name > span:last-child {
  min-width: 0;
}

.spend-service-row strong {
  font-size: 13px;
  font-weight: 600;
}

.spend-service-row small {
  display: block;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 4px;
  font-size: 11px;
}

.spend-service-row > svg {
  color: var(--muted);
}

.spend-attention {
  display: flex;
  text-align: left;
  border: 1px dashed var(--border);
  color: var(--muted);
  background: none;
  border-radius: 8px;
  align-items:  center;
  gap: 14px;
  width: 100%;
  padding: 16px;
}

.spend-attention strong {
  color: var(--text);
  font-size: 12px;
}

.spend-attention small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
}

.spend-attention > svg:last-child {
  margin-left: auto;
}

.spending-page .spending-filters {
  border-bottom: 1px solid var(--border);
  gap: 16px;
  padding: 14px 0 20px;
}

.spending-page .spending-filters label:first-child {
  max-width: 350px;
}

.spend-ledger-row {
  display: grid;
  grid-template-columns: 50px minmax(160px, 1fr) 120px 100px 105px 16px;
  color: var(--text);
  text-align: left;
  background: none;
  border: 0;
  border-radius: 0;
  align-items:  center;
  gap: 14px;
  width: 100%;
  padding: 16px 8px;
}

.spend-ledger-item {
  border-bottom: 1px solid var(--border);
}

.spend-ledger-row:hover {
  background: var(--surface);
}

.spend-date, .spend-ledger-company {
  color: var(--muted);
  font-size: 11px;
}

.spend-ledger-description {
  min-width: 0;
}

.spend-ledger-description strong {
  font-size: 12px;
  font-weight: 600;
}

.spend-ledger-description small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  margin-top: 4px;
  font-size: 11px;
}

.spend-kind {
  color: var(--muted);
  background: var(--surface-muted);
  white-space: nowrap;
  border-radius: 4px;
  justify-self: start;
  padding: 4px 8px;
  font-size: 10px;
}

.kind-payment, .kind-refund {
  color: #21815e;
  background: color-mix(in srgb, #21815e 10%, var(--surface));
}

.spend-amount {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: 12px;
}

.spend-ledger-row > svg {
  color: var(--muted);
  width: 14px;
  transition: transform .15s;
}

.spend-ledger-row > svg.is-open {
  transform: rotate(90deg);
}

.spend-entry-detail {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  background: var(--surface);
  border-top: 1px solid var(--border);
  gap: 32px;
  padding: 24px;
  font-size: 12px;
}

.spend-entry-detail p {
  overflow-wrap: anywhere;
  line-height: 1.7;
}

.spend-entry-detail dl {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px;
}

.spend-entry-detail dt {
  color: var(--muted);
}

.spend-entry-detail dd {
  overflow-wrap: anywhere;
  margin: 0;
}

.spend-entry-detail label {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.spend-entry-detail .text-button {
  display: block;
  text-align: left;
  margin-top: 12px;
  font-size: 11px;
}

.spend-connection {
  border-bottom: 1px solid var(--border);
}

.spend-connection summary {
  display: flex;
  list-style: none;
  cursor: pointer;
  align-items:  center;
  gap: 16px;
  padding: 18px 4px;
}

.spend-connection summary::-webkit-details-marker {
  display: none;
}

.spend-connection-name {
  flex: 1;
  min-width: 0;
}

.spend-connection-name strong {
  font-size: 13px;
}

.spend-connection-name small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
  font-size: 11px;
}

.spend-status {
  display: inline-flex;
  white-space: nowrap;
  align-items:  center;
  gap: 6px;
  font-size: 11px;
}

.spend-status.good {
  color: #26855f;
}

.spend-status.review {
  color: var(--muted);
}

.spend-connection-card {
  text-align: right;
  color: var(--muted);
  width: 110px;
  font-size: 11px;
}

.spend-connection summary > svg {
  color: var(--muted);
  width: 14px;
}

.spend-connection[open] summary > svg {
  transform: rotate(90deg);
}

.spend-connection-detail {
  max-width: 850px;
  padding: 0 24px 20px 56px;
  font-size: 12px;
  line-height: 1.8;
}

.spend-connection-detail a {
  display: inline-flex;
  align-items:  center;
}

.spend-connections > .text-button {
  margin-top: 20px;
  font-size: 12px;
}

.spend-empty, .spend-invoice-start {
  text-align: center;
  color: var(--muted);
  padding: 48px 24px;
  font-size: 13px;
}

.spend-invoice-start {
  border: 1px dashed var(--border);
  border-radius: 12px;
}

.spend-invoice-start h3 {
  color: var(--text);
}

.spend-invoice-start small {
  display: block;
  margin-top: 14px;
}

.spend-invoice-start p {
  max-width: 450px;
  margin: 12px auto 20px;
  line-height: 1.8;
}

.spend-invoice-workspace label {
  display: grid;
  color: var(--muted);
  gap: 6px;
  font-size: 12px;
}

.spend-invoice-workspace input, .spend-invoice-workspace textarea {
  width: 100%;
  min-width: 0;
}

.spend-invoice-workspace input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
}

.spend-invoice-toolbar {
  flex-wrap: wrap;
  margin: 22px 0;
  font-size: 12px;
}

.spend-invoice-toolbar .spend-actions {
  margin-left: auto;
}

.spend-invoice-paper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px;
}

.spend-invoice-paper h2 {
  letter-spacing: -1px;
  margin: 0;
  font-size: 28px;
}

.spend-invoice-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 30px 0;
}

.spend-invoice-fields textarea {
  resize: vertical;
  min-height: 80px;
}

.spend-invoice-line {
  display: grid;
  grid-template-columns: 20px minmax(100px, 1fr) 100px 28px;
  border-top: 1px solid var(--border);
  align-items:  center;
  gap: 12px;
  padding: 16px 0;
}

.spend-invoice-line input {
  background: none;
  border-color: #0000;
  padding-left: 0;
  font-size: 13px;
}

.spend-invoice-line small {
  color: var(--muted);
  display: block;
  font-size: 10px;
  line-height: 1.7;
}

.spend-invoice-line strong {
  text-align: right;
  font-size: 13px;
}

.spend-invoice-line .icon-button {
  color: var(--muted);
}

.spend-add-line {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 100px auto;
  gap: 10px;
  margin: 18px 0;
}

.spend-invoice-total {
  display: flex;
  border-top: 2px solid var(--text);
  justify-content: flex-end;
  align-items:  center;
  gap: 20px;
  margin-top: 20px;
  padding: 22px 0;
}

.spend-invoice-total span {
  color: var(--muted);
  font-size: 12px;
}

.spend-invoice-total strong {
  letter-spacing: -.8px;
  font-size: 26px;
}

.spend-cost-picker {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 24px;
  padding: 20px;
}

.spend-cost-picker summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.spend-cost-picker > p {
  font-size: 12px;
  line-height: 1.7;
}

.spend-cost-picker summary > span {
  color: var(--muted);
  margin-left: 8px;
  font-size: 11px;
}

.spending-page label.spend-cost-option {
  display: flex;
  border-top: 1px solid var(--border);
  align-items:  center;
  gap: 14px;
  padding: 12px 0;
}

.spend-cost-option > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.spend-cost-option strong {
  color: var(--text);
  font-size: 12px;
}

.spend-cost-option small {
  display: block;
  overflow-wrap: anywhere;
  margin-top: 4px;
  font-size: 11px;
}

.spend-cost-option > strong {
  white-space: nowrap;
}

.spend-finalize {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 20px;
  padding: 24px 0;
}

.spend-finalize label {
  display: flex;
  flex: 1;
  align-items:  flex-start;
  min-width: 220px;
  line-height: 1.8;
}

.spend-finalize small {
  color: var(--muted);
  width: 100%;
  font-size: 11px;
}

.spend-saved-note {
  display: flex;
  color: var(--muted);
  align-items:  center;
  gap: 8px;
  font-size: 12px;
}

@media (max-width: 1100px) {
  .spend-overview {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .spend-main-total > strong {
    font-size: 40px;
  }

  .spend-metrics > div:first-child {
    border-left: 0;
    padding-left: 0;
  }

  .spend-ledger-row {
    grid-template-columns: 45px minmax(120px, 1fr) 105px 95px 14px;
    gap: 10px;
  }

  .spend-ledger-company {
    display: none;
  }

  .spend-tabs {
    gap: 18px;
  }

  .spend-service-columns, .spend-service-row {
    grid-template-columns: minmax(150px, 1fr) 110px 110px 14px;
    gap: 14px;
  }
}

@media (max-width: 650px) {
  .spend-header {
    flex-direction: column;
    align-items:  flex-start;
  }

  .spend-header .spend-actions {
    justify-content: space-between;
    width: 100%;
  }

  .spend-tabs {
    overflow-x: auto;
    gap: 16px;
  }

  .spend-tabs button {
    font-size: 12px;
  }

  .spend-live {
    display: none;
  }

  .spend-metrics {
    gap: 12px;
  }

  .spend-metrics > div {
    padding-left: 12px;
  }

  .spend-metrics strong {
    font-size: 20px;
  }

  .spend-client-banner {
    flex-wrap: wrap;
    padding: 16px;
  }

  .spend-client-banner > div {
    flex: 1;
    min-width: 160px;
  }

  .spend-client-banner button {
    width: 100%;
  }

  .spend-section-heading {
    align-items:  flex-start;
  }

  .spend-service-columns, .spend-service-row {
    grid-template-columns: minmax(125px, 1fr) 85px 85px 12px;
    gap: 8px;
    padding-inline-start: 0;
    padding-inline-end: 0;
  }

  .spend-service-name {
    gap: 8px;
  }

  .spend-service-name .spend-provider-mark {
    display: none;
  }

  .spend-service-row {
    font-size: 12px;
  }

  .spend-service-row small {
    font-size: 10px;
  }

  .spend-ledger-row {
    grid-template-columns: 35px minmax(120px, 1fr) 85px 12px;
    padding-block-start: 14px;
    padding-block-end: 14px;
  }

  .spend-ledger-row > .spend-kind {
    display: none;
  }

  .spend-entry-detail {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px;
  }

  .spend-connection summary {
    flex-wrap: wrap;
    gap: 10px;
  }

  .spend-connection-card {
    display: none;
  }

  .spend-connection-name {
    min-width: 120px;
  }

  .spend-connection-detail {
    padding: 0 12px 16px;
  }

  .spend-connection .spend-provider-mark {
    width: 28px;
    height: 28px;
    font-size: 9px;
  }

  .spend-status {
    font-size: 10px;
  }

  .spend-invoice-paper {
    padding: 18px;
  }

  .spend-invoice-fields {
    gap: 12px;
  }

  .spend-invoice-line {
    grid-template-columns: 16px minmax(80px, 1fr) 75px 24px;
    gap: 6px;
  }

  .spend-add-line {
    grid-template-columns: 1fr 85px;
  }

  .spend-add-line button {
    grid-column: 1 / -1;
  }

  .spend-cost-option > .spend-kind {
    display: none;
  }

  .spend-cost-picker {
    padding: 14px;
  }

  .spend-invoice-toolbar .spend-actions {
    justify-content: flex-start;
    width: 100%;
  }
}

.spend-source-changes {
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning);
  border-radius: 6px;
  margin: 16px 0;
  padding: 16px;
  font-size: 12px;
  line-height: 1.7;
}

@media (max-width: 650px) {
  .spend-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    gap: 0 16px;
  }

  .spend-tabs button {
    justify-content: flex-start;
  }

  .spend-tabs .spend-live {
    display: none;
  }
}

.spend-back {
  display: inline-flex;
  align-items:  center;
  gap: 7px;
  margin-bottom: 22px;
  font-size: 12px;
}

.spend-provider-breakdown .spend-section-heading h3 {
  margin-top: 7px;
  font-size: 23px;
}

.spend-provider-breakdown .spend-section-heading h3 .muted {
  font-size: 17px;
  font-weight: 400;
}

.spend-breakdown-explainer {
  color: var(--muted);
  max-width: 780px;
  margin: 0 0 25px;
  font-size: 13px;
  line-height: 1.8;
}

.spend-allocation-group {
  margin-bottom: 28px;
}

.spend-allocation-total {
  display: flex;
  align-items:  center;
  gap: 50px;
  padding: 20px 0 28px;
}

.spend-allocation-total > div {
  display: grid;
  gap: 6px;
}

.spend-allocation-total small {
  color: var(--muted);
  font-size: 12px;
}

.spend-allocation-total strong {
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  font-size: 32px;
}

.spend-allocation-total .spend-rebill-total {
  border-left: 1px solid var(--border);
  padding-left: 28px;
}

.spend-rebill-total strong {
  font-size: 23px;
}

.spend-rebill-total > span, .spend-client-label {
  color: var(--accent-text) !important;
  font-size: 10px !important;
}

.spend-allocation-columns {
  display: flex;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  justify-content: space-between;
  padding: 12px 35px 12px 0;
  font-size: 10px;
}

.spend-allocation-row {
  display: grid;
  grid-template-columns: 1fr 140px 16px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  background: none;
  border-radius: 0;
  align-items:  center;
  gap: 22px;
  width: 100%;
  padding: 22px 4px;
}

.spend-allocation-row:hover {
  background: var(--surface);
}

.spend-allocation-name {
  display: flex;
  align-items:  center;
  gap: 14px;
}

.spend-allocation-name strong {
  font-size: 14px;
}

.spend-allocation-name small {
  color: var(--muted);
  font-size: 10px;
}

.spend-allocation-bar {
  display: block;
  background: var(--surface-muted);
  overflow: hidden;
  border-radius: 3px;
  max-width: 600px;
  height: 5px;
  margin-top: 12px;
}

.spend-allocation-bar i {
  display: block;
  background: var(--accent-text);
  opacity: .65;
  border-radius: 3px;
  height: 100%;
}

.spend-allocation-row > strong {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}

.spend-allocation-row > svg {
  color: var(--muted);
}

.spend-breakdown-footer {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}

.spend-breakdown-footer a {
  display: inline-flex;
  align-items:  center;
  gap: 4px;
  margin-left: 6px;
}

.spend-ledger-company .spend-client-label {
  display: block;
  margin-top: 4px;
}

.company-invoices > .spend-section-heading {
  margin: 24px 0;
}

@media (max-width: 650px) {
  .spend-allocation-row {
    grid-template-columns: 1fr 95px 12px;
    gap: 12px;
  }

  .spend-allocation-name {
    display: grid;
    gap: 5px;
  }

  .spend-allocation-total {
    gap: 20px;
  }

  .spend-allocation-total strong {
    font-size: 27px;
  }

  .spend-rebill-total strong {
    font-size: 22px;
  }

  .spend-allocation-total .spend-rebill-total {
    padding-left: 20px;
  }

  .spend-provider-breakdown > .spend-section-heading {
    flex-wrap: wrap;
  }

  .spend-provider-breakdown .spend-section-heading h3 .muted {
    display: block;
    margin-top: 6px;
  }

  .spend-breakdown-footer a {
    margin: 8px 0;
  }
}

.spend-brand-logo {
  display: inline-flex;
  color: var(--text);
  flex: 0 0 38px;
  justify-content: center;
  align-items:  center;
  width: 38px;
  height: 38px;
}

.spend-brand-logo svg {
  width: 28px;
  height: 28px;
}

.spend-brand-logo img {
  object-fit: contain;
  background: #fff;
  border-radius: 5px;
  width: 28px;
  height: 28px;
  padding: 3px;
}

.spend-provider-title {
  display: flex;
  align-items:  center;
  gap: 12px;
}

.spend-billing-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
}

.spend-billing-parts > div {
  display: flex;
  border-left: 3px solid var(--border);
  flex-direction: column;
  gap: 5px;
  padding: 12px 16px;
}

.spend-billing-parts span, .spend-billing-parts small {
  color: var(--muted);
  font-size: 13px;
}

.spend-monthly-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-block: 1px solid var(--border);
  gap: 24px;
  margin: 20px 0;
  padding: 24px 0;
}

.spend-monthly-summary > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.spend-monthly-summary strong {
  font-size: 25px;
}

.spend-monthly-summary small, .spend-monthly-summary span {
  color: var(--muted);
}

.spend-cost-table-wrap {
  overflow-x: auto;
  margin: 18px 0 30px;
}

.spend-cost-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}

.spend-cost-table th, .spend-cost-table td {
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
  padding: 16px 12px;
}

.spend-cost-table th:first-child {
  text-align: left;
}

.spend-cost-table thead {
  color: var(--muted);
}

.spend-cost-table small {
  display: block;
  color: var(--muted);
  margin-top: 6px;
  font-weight: 400;
}

.spend-history {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  overflow-y: auto;
  gap: 10px;
  max-height: 360px;
  margin: 18px 0 28px;
}

.spend-history button {
  display: flex;
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  border-radius: 10px;
  flex-direction: column;
  align-items:  flex-start;
  gap: 8px;
  padding: 16px;
}

.spend-history button.selected {
  border-color: var(--accent-text);
  background: var(--surface-muted);
}

.spend-history span {
  font-size: 20px;
  font-weight: 600;
}

.spend-history small {
  color: var(--muted);
  text-align: left;
}

.spend-service-row > span > small {
  display: block;
  color: var(--muted);
  margin-top: 5px;
  font-size: 12px;
}

@media (max-width: 640px) {
  .spend-monthly-summary {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .spend-brand-logo {
    display: inline-flex;
    flex-basis: 30px;
    width: 30px;
  }
}

.spend-month-overview {
  display: grid;
  grid-template-columns: 2fr 1fr;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 14px;
  gap: 32px;
  margin-bottom: 24px;
  padding: 26px;
}

.spend-month-overview > div {
  display: flex;
  flex-direction: column;
  align-items:  flex-start;
  gap: 8px;
}

.spend-month-overview strong {
  font-variant-numeric: tabular-nums;
  font-size: 30px;
}

.spend-month-overview p, .spend-month-overview small {
  color: var(--muted);
  max-width: 55ch;
  margin: 0;
}

@media (max-width: 640px) {
  .spend-month-overview {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px;
  }
}

.spend-service-row > span:not(:first-child) small {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.4;
}

.spend-range-controls {
  display: flex;
  flex-wrap: wrap;
  align-items:  flex-end;
  gap: 10px;
}

.spend-range-controls input, .spend-range-controls select {
  min-height: 38px;
}

.spend-range-controls input[type="number"] {
  width: 100px;
}

.spend-month-overview {
  grid-template-columns: 1fr;
}

.spend-service-columns, .spend-service-row {
  grid-template-columns: minmax(160px, 1fr) minmax(120px, 180px) 18px;
}

@media (max-width: 650px) {
  .spend-range-controls {
    width: 100%;
  }

  .spend-header .spend-actions {
    flex-wrap: wrap;
    gap: 12px;
  }

  .spend-service-columns, .spend-service-row {
    grid-template-columns: minmax(135px, 1fr) 112px 12px;
  }
}

.spend-brand-logo img {
  filter: none;
  background: none;
  border-radius: 0;
  width: 32px;
  height: 32px;
  padding: 0;
}

.spend-brand-tile {
  background: #fff;
  border: 1px solid #e9e9eb;
  border-radius: 8px;
}

.spend-brand-logo .brand-dark, [data-theme="dark"] .spend-brand-logo .brand-light {
  display: none;
}

[data-theme="dark"] .spend-brand-logo .brand-dark {
  display: block;
}

.company-sidebar-heading {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 8px;
}

.company-sidebar-settings {
  display: inline-flex;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
  justify-content: center;
  align-items:  center;
  width: 28px;
  height: 28px;
  padding: 4px;
}

.company-sidebar-settings:hover {
  color: var(--text);
  background: var(--surface-muted);
}

.company-sidebar-settings:focus-visible {
  color: var(--text);
  background: var(--surface-muted);
}

.company-list .company {
  flex-wrap: nowrap;
  min-width: 0;
}

.company-sidebar-name {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.company-list .company-mark, .company-list .company-dot {
  flex-shrink: 0;
}

.company-list .company-dot {
  background: #a7a0f4;
}

.company-mark-fallback {
  background: var(--surface-muted);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}

.sidebar-arrange-row .company-mark-fallback {
  width: 24px;
  height: 24px;
  font-size: 9px;
}

.sidebar-favorite {
  display: flex;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
  flex: 0 0 28px;
  justify-content: center;
  align-items:  center;
  height: 28px;
  padding: 5px;
}

.sidebar-favorite:hover {
  background: var(--surface-muted);
  color: var(--text);
}

.sidebar-favorite[aria-pressed="true"] {
  color: var(--accent-text);
}

.sidebar-favorite[aria-pressed="true"] svg {
  fill: currentColor;
}

.sidebar-favorite-help {
  display: flex;
  color: var(--text);
  align-items:  center;
  gap: 8px;
  margin: 14px 0 6px;
  font-size: 12px;
  line-height: 1.5;
}

.sidebar-favorite-help svg {
  color: var(--accent-text);
  flex-shrink: 0;
}

.company-sidebar-empty, .company-sidebar-error {
  padding: 8px;
  font-size: 12px;
}

.company-sidebar-dialog {
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--surface);
  overflow-y: auto;
  border-radius: 18px;
  width: min(620px, 100vw - 32px);
  max-height: calc(100dvh - 40px);
  padding: 24px;
  box-shadow: 0 24px 90px #0005;
}

.company-sidebar-dialog::backdrop {
  backdrop-filter: blur(3px);
  background: #080d18aa;
}

.sidebar-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items:  flex-start;
  gap: 20px;
}

.sidebar-dialog-head h2 {
  margin: 8px 0;
  font-size: 24px;
}

.sidebar-dialog-head p {
  color: var(--muted);
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.sidebar-dialog-head .icon-button {
  display: flex;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  flex: 0 0 30px;
  justify-content: center;
  align-items:  center;
  height: 30px;
  padding: 5px;
}

.sidebar-dialog-head .icon-button:hover {
  color: var(--text);
  background: var(--surface-muted);
}

.sidebar-dialog-head .eyebrow {
  letter-spacing: 1.5px;
  color: var(--muted);
  font-size: 10px;
}

.sidebar-order-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 0;
  gap: 10px;
  margin: 24px 0;
  padding: 0;
}

.sidebar-order-modes legend {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
}

.sidebar-order-modes label {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 10px;
  gap: 6px 10px;
  padding: 14px;
}

.sidebar-order-modes input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.sidebar-order-modes label:focus-within {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

.sidebar-order-modes label.selected {
  background: var(--surface-muted);
  border-color: var(--accent-text);
}

.sidebar-order-modes svg {
  grid-row: 1 / 3;
  color: var(--muted);
  width: 19px;
  height: 19px;
}

.sidebar-order-modes label.selected svg {
  color: var(--accent-text);
}

.sidebar-order-modes strong {
  font-size: 13px;
}

.sidebar-order-modes small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.sidebar-list-heading {
  display: flex;
  justify-content: space-between;
  align-items:  center;
}

.sidebar-list-heading h3 {
  margin: 0 0 5px;
  font-size: 14px;
}

.sidebar-list-heading span, .sidebar-order-help {
  color: var(--muted);
  font-size: 12px;
}

.sidebar-order-help {
  min-height: 20px;
  margin: 10px 0;
  line-height: 1.6;
}

.sidebar-arrange-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  border-radius: 10px;
  max-height: 300px;
}

.sidebar-arrange-row {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  align-items:  center;
  gap: 12px;
  min-height: 50px;
  padding: 12px 14px;
}

.sidebar-arrange-row:last-child {
  border-bottom: 0;
}

.sidebar-arrange-row.is-hidden .sidebar-arrange-name {
  color: var(--muted);
}

.sidebar-arrange-row.is-dragging {
  opacity: .35;
}

.sidebar-arrange-row.is-drop-target {
  box-shadow: inset 0 0 0 2px var(--accent-text);
}

.sidebar-arrange-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  font-size: 14px;
}

.sidebar-drag-handle {
  display: flex;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
  user-select: none;
  background: none;
  border: 0;
  border-radius: 5px;
  padding: 5px;
}

.sidebar-drag-handle:active {
  cursor: grabbing;
}

.sidebar-visibility {
  display: flex;
  cursor: pointer;
  position: relative;
}

.sidebar-visibility input {
  position: absolute;
  opacity: 0;
  width: 24px;
  height: 24px;
}

.sidebar-visibility span {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  justify-content: center;
  align-items:  center;
  width: 22px;
  height: 22px;
}

.sidebar-visibility svg {
  opacity: 0;
}

.sidebar-visibility input:checked + span {
  background: var(--accent-text);
  color: var(--surface);
  border-color: var(--accent-text);
}

.sidebar-visibility input:checked + span svg {
  opacity: 1;
}

.sidebar-visibility input:focus-visible + span {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

.sidebar-dialog-footer {
  display: flex;
  border-top: 1px solid var(--border);
  justify-content: flex-end;
  align-items:  center;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
}

.sidebar-dialog-footer small {
  color: var(--muted);
  max-width: 240px;
  margin-right: auto;
  font-size: 11px;
  line-height: 1.5;
}

.sidebar-dialog-footer button {
  white-space: nowrap;
}

.sidebar-drag-overlay {
  position: fixed;
  display: flex;
  border: 1px solid var(--accent-text);
  background: var(--surface);
  color: var(--text);
  pointer-events: none;
  z-index: 10;
  border-radius: 10px;
  align-items:  center;
  gap: 12px;
  min-height: 50px;
  padding: 12px 14px;
  box-shadow: 0 10px 30px #0004;
}

@media (max-width: 650px) {
  .company-sidebar-dialog {
    max-height: calc(100dvh - 24px);
    padding: 18px;
  }

  .sidebar-dialog-footer {
    flex-wrap: wrap;
  }

  .sidebar-dialog-footer small {
    flex-basis: 100%;
    max-width: none;
  }

  .sidebar-order-modes label {
    gap: 6px;
    padding: 12px;
  }
}

@media (max-width: 450px) {
  .sidebar-order-modes {
    grid-template-columns: 1fr;
    gap: 7px;
    margin: 18px 0;
  }

  .sidebar-order-modes label {
    padding: 10px;
  }

  .sidebar-dialog-head h2 {
    font-size: 21px;
  }

  .sidebar-arrange-list {
    max-height: 220px;
  }
}

.spend-resource-breakdown {
  margin: 28px 0;
}

.spend-category-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.spend-category-totals > div {
  display: flex;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.spend-category-totals span {
  color: var(--muted);
  font-size: 12px;
}

.spend-category-totals strong {
  font-variant-numeric: tabular-nums;
  font-size: 21px;
}

.spend-company-resources {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  margin: 10px 0;
}

.spend-company-resources summary {
  display: flex;
  cursor: pointer;
  list-style: none;
  align-items:  center;
  gap: 18px;
  padding: 18px;
}

.spend-company-resources summary::-webkit-details-marker {
  display: none;
}

.spend-company-resources summary > span {
  flex: 1;
  min-width: 0;
}

.spend-company-resources summary strong {
  font-size: 14px;
}

.spend-company-resources summary small {
  display: block;
  color: var(--muted);
  margin-top: 5px;
  font-size: 11px;
}

.spend-company-resources summary > strong {
  white-space: nowrap;
}

.spend-company-resources summary > svg {
  color: var(--muted);
  flex-shrink: 0;
  transition: transform .15s;
}

.spend-company-resources[open] summary > svg {
  transform: rotate(180deg);
}

.spend-resource-items {
  border-top: 1px solid var(--border);
  padding: 0 18px;
}

.spend-resource-item {
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}

.spend-resource-item:last-child {
  border: 0;
}

.spend-resource-heading, .spend-resource-charge {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 13px;
}

.spend-resource-heading {
  margin-bottom: 10px;
}

.spend-resource-charge {
  color: var(--muted);
  border-left: 2px solid var(--border);
  padding: 7px 0 7px 12px;
  font-size: 12px;
}

.spend-resource-charge small {
  display: block;
  margin-top: 3px;
  font-size: 10px;
}

.spend-resource-note {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
}

.spend-resource-provider {
  display: block;
  color: var(--muted);
  margin-top: 5px;
  font-size: 11px;
  font-weight: 400;
}

.spend-measure-details {
  border-top: 1px solid var(--border);
  margin: 24px 0;
  padding-top: 18px;
}

.spend-measure-details > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.provider-focus {
  --provider-tone-0: var(--accent-text);
  --provider-tone-1: #6493b3;
  --provider-tone-2: #49a58f;
  --provider-tone-3: #ad8ab9;
}

.app .provider-focus-heading {
  display: flex;
  color: var(--text);
  border: 0;
  justify-content: space-between;
  align-items:  center;
  gap: 20px;
  min-height: 54px;
  margin: 0 0 20px;
  padding: 0;
}

.provider-focus .spend-back {
  margin-bottom: 18px;
}

.provider-focus-heading h3 {
  letter-spacing: -.6px;
  margin: 0;
  font-size: 24px;
}

.provider-focus-heading p {
  color: var(--muted);
  margin: 5px 0 0;
  font-size: 12px;
}

.provider-heading-meta, .provider-heading-meta > span {
  display: flex;
  color: var(--muted);
  align-items:  center;
  gap: 9px;
  font-size: 12px;
}

.provider-summary {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 1.6fr;
  border-block: 1px solid var(--border);
  gap: 36px;
  padding: 28px 0;
}

.provider-kicker {
  display: block;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--muted);
  font-size: 10px;
}

.provider-summary-amount > strong {
  display: block;
  letter-spacing: -1.8px;
  font-variant-numeric: tabular-nums;
  margin: 10px 0 12px;
  font-size: 42px;
  font-weight: 600;
}

.provider-basis {
  display: inline-flex;
  background: var(--surface-muted);
  color: var(--muted);
  border-radius: 5px;
  padding: 5px 9px;
  font-size: 11px;
}

.provider-basis.is-estimate {
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent-text) 8%, var(--surface));
}

.provider-summary-story {
  align-self:  center;
  max-width: 560px;
}

.provider-summary-story > p {
  letter-spacing: -.3px;
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.45;
}

.provider-summary-story > small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.provider-client-share {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 16px;
  margin-top: 18px;
  font-size: 12px;
}

.provider-client-share > span {
  color: var(--muted);
}

.provider-client-share strong {
  color: var(--text);
  margin-left: 8px;
}

.provider-client-share a {
  display: inline-flex;
  color: var(--accent-text);
  align-items:  center;
  gap: 4px;
}

.provider-view-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  gap: 28px;
  margin-top: 16px;
}

.provider-view-tabs button {
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: 0;
  border-bottom: 2px solid #0000;
  padding: 16px 0;
  font-size: 12px;
}

.provider-view-tabs button[aria-pressed="true"] {
  color: var(--text);
  border-bottom-color: var(--accent-text);
  font-weight: 600;
}

.provider-view-content {
  padding-top: 24px;
}

.provider-company-layout {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(0, 1.4fr);
  align-items:  start;
  gap: 28px;
}

.provider-list-heading {
  display: flex;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  justify-content: space-between;
  padding: 0 30px 10px 12px;
  font-size: 10px;
}

.provider-company-choice {
  display: flex;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-left: 2px solid #0000;
  border-radius: 0;
  align-items:  center;
  gap: 12px;
  width: 100%;
  padding: 14px 12px;
}

.provider-company-choice:hover {
  background: var(--surface-muted);
}

.provider-company-choice.selected {
  border-left-color: var(--accent-text);
  background: var(--surface);
}

.provider-company-label {
  flex: 1;
  min-width: 0;
}

.provider-company-choice strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
}

.provider-company-choice > strong {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.provider-company-label small {
  display: block;
  color: var(--accent-text);
  margin-top: 4px;
  font-size: 10px;
}

.provider-company-choice > svg {
  color: var(--muted);
  flex-shrink: 0;
  width: 13px;
}

.provider-company-bar {
  display: block;
  background: var(--border);
  overflow: hidden;
  border-radius: 3px;
  width: 100%;
  max-width: 180px;
  height: 3px;
  margin-top: 10px;
}

.provider-company-bar i {
  display: block;
  background: var(--muted);
  opacity: .45;
  height: 100%;
}

.provider-company-choice.selected .provider-company-bar i {
  background: var(--accent-text);
  opacity: 1;
}

.provider-company-detail {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  min-width: 0;
  padding: 24px;
}

.provider-detail-heading {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 16px;
}

.provider-detail-heading h4 {
  margin: 8px 0 0;
  font-size: 17px;
}

.provider-detail-heading > strong {
  white-space: nowrap;
  letter-spacing: -.6px;
  font-size: 22px;
  font-weight: 600;
}

.provider-detail-caption {
  color: var(--muted);
  margin: 12px 0 20px;
  font-size: 11px;
}

.provider-resource-row {
  border-top: 1px solid var(--border);
  padding: 14px 0;
}

.provider-resource-row > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 12px;
}

.provider-resource-row strong {
  overflow-wrap: anywhere;
  min-width: 0;
  font-weight: 500;
}

.provider-resource-row > div:first-child > span {
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.provider-resource-row > small {
  display: block;
  color: var(--muted);
  margin-top: 6px;
  font-size: 10px;
}

.provider-resource-parts {
  display: flex;
  color: var(--muted);
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
  font-size: 10px;
  line-height: 1.7;
}

.provider-resource-parts b {
  color: var(--text);
  margin-left: 3px;
  font-weight: 500;
}

.provider-resource-search {
  display: flex;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 7px;
  align-items:  center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 0 10px;
}

.provider-resource-search input {
  color: var(--text);
  background: none;
  border: 0;
  width: 100%;
  min-width: 0;
  padding: 10px 0;
  font-size: 12px;
}

.provider-record-link {
  display: flex;
  color: var(--accent-text);
  align-items:  center;
  gap: 6px;
  margin-top: 18px;
  font-size: 11px;
}

.provider-more {
  margin: 10px 0;
  font-size: 11px;
}

.provider-section-intro h4 {
  margin: 0 0 8px;
  font-size: 17px;
}

.provider-section-intro p {
  color: var(--muted);
  max-width: 65ch;
  margin: 0 0 24px;
  font-size: 12px;
  line-height: 1.7;
}

.provider-drivers {
  max-width: 780px;
}

.provider-driver {
  padding: 14px 0;
}

.provider-driver > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 18px;
  font-size: 13px;
}

.provider-driver > div:first-child > span {
  display: flex;
  align-items:  center;
  gap: 10px;
}

.provider-driver i {
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.provider-driver-track {
  background: var(--surface-muted);
  overflow: hidden;
  border-radius: 5px;
  height: 10px;
  margin-top: 12px;
}

.provider-driver-track > span {
  display: block;
  border-radius: 5px;
  height: 100%;
}

.provider-history-chart {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  max-width: 850px;
  margin: 32px 0;
}

.provider-history-chart button {
  color: var(--text);
  cursor: pointer;
  display: flex;
  background: none;
  border: 0;
  border-radius: 8px;
  flex-direction: column;
  align-items:  center;
  gap: 10px;
  min-width: 0;
  padding: 8px 5px;
}

.provider-history-chart button:hover, .provider-history-chart button.selected {
  background: var(--surface);
  outline: 1px solid var(--border);
}

.provider-history-chart strong {
  font-size: 13px;
  font-weight: 600;
}

.provider-history-bar {
  display: flex;
  align-items:  flex-end;
  width: 100%;
  max-width: 65px;
  height: 140px;
}

.provider-history-bar i {
  display: block;
  background: var(--muted);
  opacity: .5;
  border-radius: 5px 5px 0 0;
  width: 100%;
}

.provider-history-chart button.selected i {
  background: var(--accent-text);
  opacity: .9;
}

.provider-history-chart button > span:last-of-type {
  font-size: 11px;
}

.provider-history-chart small {
  color: var(--muted);
  font-size: 10px;
}

.provider-history-picker {
  display: flex;
  color: var(--muted);
  flex-wrap: wrap;
  align-items:  center;
  gap: 12px;
  font-size: 12px;
}

.provider-history-picker select {
  max-width: 100%;
}

.provider-account {
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}

.provider-account > div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-size: 13px;
}

.provider-account > div > span, .provider-account > small {
  color: var(--muted);
  font-size: 11px;
}

.provider-account > small {
  display: block;
  margin-top: 9px;
}

.provider-account p, .provider-footnote, .provider-method p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}

.provider-account-parts > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  margin: 18px 0;
  font-size: 12px;
}

.provider-account-parts small {
  color: var(--muted);
}

.provider-record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0;
}

.provider-record-actions button {
  display: flex;
  align-items:  center;
  gap: 8px;
}

.provider-method {
  margin: 20px 0;
  font-size: 12px;
}

.provider-method summary {
  cursor: pointer;
}

.provider-empty {
  color: var(--muted);
  padding: 20px 0;
  font-size: 12px;
}

@media (max-width: 900px) {
  .provider-company-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .provider-company-list {
    overflow-y: auto;
    max-height: 300px;
  }

  .provider-summary {
    grid-template-columns: 1fr 1.4fr;
    gap: 24px;
  }
}

@media (max-width: 600px) {
  .provider-summary {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 22px 0;
  }

  .provider-summary-amount > strong {
    font-size: 36px;
  }

  .provider-summary-story > p {
    font-size: 17px;
  }

  .provider-view-tabs {
    overflow-x: auto;
    gap: 20px;
  }

  .provider-view-tabs button {
    font-size: 11px;
  }

  .provider-company-detail {
    padding: 18px;
  }

  .provider-detail-heading > strong {
    font-size: 20px;
  }

  .provider-history-chart {
    gap: 4px;
  }

  .provider-history-chart strong {
    font-size: 10px;
  }

  .provider-history-chart button > span:last-of-type, .provider-history-chart small {
    font-size: 9px;
  }

  .provider-history-bar {
    height: 100px;
  }

  .provider-focus-heading {
    gap: 12px;
  }

  .provider-account > div {
    flex-wrap: wrap;
    gap: 8px;
  }
}

.spending-page > .spend-header {
  margin-bottom: 28px;
}

.spend-header .spend-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.spend-manage-accounts {
  display: inline-flex;
  align-items:  center;
  gap: 7px;
}

@media (max-width: 1100px) {
  .spending-page > .spend-header {
    flex-wrap: wrap;
    align-items:  flex-start;
    gap: 20px;
  }

  .spend-header .spend-actions {
    justify-content: flex-start;
  }
}

.page-title.admin-page-title {
  margin-bottom: 20px;
  padding-bottom: 0;
}

.admin-page-title h1 {
  margin-bottom: 0;
}

.spending-page > .spend-header {
  justify-content: flex-end;
  min-height: 0;
  padding: 0 0 20px;
}

.spending-page > .spend-header > h2 {
  margin-right: auto;
}

.spending-page .spend-header .spend-actions {
  align-items:  center;
  gap: 12px;
  width: 100%;
}

.spending-page .spend-range-controls {
  flex-wrap: nowrap;
  align-items:  center;
  margin-right: auto;
}

.spending-page .spend-range-controls select, .spending-page .spend-range-controls input {
  box-sizing: border-box;
  width: 155px;
  height: 40px;
  min-height: 40px;
}

.spending-page .spend-range-controls label:first-child select {
  width: 140px;
}

.spending-page .spend-header .spend-actions > button {
  display: inline-flex;
  white-space: nowrap;
  justify-content: center;
  align-items:  center;
  height: 40px;
}

.spend-all-periods {
  display: flex;
  color: var(--muted);
  align-items:  center;
  width: 155px;
  height: 40px;
  font-size: 12px;
}

.spend-results {
  position: relative;
}

.spend-results.is-updating > div {
  opacity: .5;
  pointer-events: none;
}

.spend-updating {
  position: absolute;
  color: var(--muted);
  font-size: 11px;
  top: -23px;
  right: 0;
}

@media (max-width: 650px) {
  .spending-page .spend-range-controls {
    flex-wrap: wrap;
    width: 100%;
  }

  .spending-page .spend-header .spend-actions > button {
    flex: 1;
  }
}

.spend-expense-dialog {
  overflow-y: auto;
  width: min(680px, 100vw - 32px);
  max-height: calc(100dvh - 40px);
}

.spend-expense-dialog .account-dialog-head {
  align-items:  flex-start;
}

.spend-expense-dialog .account-dialog-head p {
  color: var(--muted);
  max-width: 52ch;
  font-size: 12px;
  line-height: 1.7;
}

.spend-expense-dialog .admin-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.spend-expense-dialog .admin-form label {
  min-width: 0;
}

.spend-expense-dialog .admin-form label:nth-of-type(3) {
  grid-column: 1 / -1;
}

.spend-expense-dialog .admin-form > button {
  grid-column: 1 / -1;
  justify-self: end;
}

.spend-company-logo {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
}

.spend-company-detail-heading {
  display: flex;
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items:  center;
  gap: 20px;
  margin-bottom: 24px;
  padding: 12px 0 24px;
}

.spend-company-detail-heading h3 {
  margin: 0;
  font-size: 24px;
}

.spend-company-detail-heading p {
  color: var(--muted);
  margin: 6px 0 0;
  font-size: 12px;
}

.spend-company-detail-heading > strong {
  white-space: nowrap;
  letter-spacing: -1px;
  font-size: 30px;
}

@media (max-width: 600px) {
  .spend-expense-dialog .admin-form {
    grid-template-columns: 1fr;
  }

  .spend-company-detail-heading h3 {
    font-size: 20px;
  }

  .spend-company-detail-heading > strong {
    font-size: 23px;
  }
}

.spend-nagy-mark {
  overflow: hidden;
  justify-content: flex-start;
}

.spend-nagy-mark img {
  object-fit: fill;
  flex: none;
  width: 126px;
  max-width: none;
  height: 36px;
}

:root[data-theme="dark"] .spend-nagy-mark img {
  filter: url("#nagy-dark-ink");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .spend-nagy-mark img {
    filter: url("#nagy-dark-ink");
  }
}

.spend-coverage {
  display: inline-flex;
  background: var(--surface-muted);
  color: var(--muted);
  border: 0;
  border-radius: 6px;
  align-items:  center;
  gap: 8px;
  margin: -8px 0 24px;
  padding: 10px 12px;
  font-size: 12px;
}

.spend-coverage.needs-review {
  color: var(--accent-text);
}

.spending-coverage-dialog {
  overflow: auto;
  width: min(740px, 100vw - 32px);
  max-height: calc(100dvh - 40px);
}

.spending-coverage-dialog > p {
  font-size: 12px;
  line-height: 1.7;
}

.spend-coverage-account {
  display: flex;
  border-bottom: 1px solid var(--border);
  gap: 14px;
  padding: 16px 0;
  font-size: 12px;
}

.spend-coverage-account p {
  color: var(--muted);
  margin: 7px 0;
}

.spend-coverage-account small {
  display: block;
  color: var(--muted);
  line-height: 1.6;
}

.spending-coverage-dialog > .secondary {
  margin-top: 20px;
}

.spend-insight-section {
  margin: 32px 0;
}

.spend-comparison-scope {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.spend-change-row {
  display: flex;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  background: none;
  border-radius: 0;
  align-items:  center;
  gap: 14px;
  width: 100%;
  padding: 16px 6px;
}

.spend-change-row > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.spend-change-row strong, .spend-invoice-readiness strong {
  font-size: 12px;
  font-weight: 600;
}

.spend-change-row small, .spend-invoice-readiness small {
  display: block;
  color: var(--muted);
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.6;
}

.spend-change-amount {
  text-align: right;
  white-space: nowrap;
}

.spend-change-row > svg, .spend-invoice-readiness > svg {
  color: var(--muted);
  flex-shrink: 0;
}

.spend-invoice-readiness {
  display: grid;
  grid-template-columns: 180px 1fr 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  align-items:  center;
  gap: 20px;
  padding: 18px 6px;
}

.spend-account-actions {
  border-top: 1px solid var(--border);
  padding: 16px 0;
}

.spend-account-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 12px;
}

.spend-card-form {
  display: flex;
  flex-wrap: wrap;
  align-items:  flex-end;
  gap: 12px;
  margin-top: 18px;
}

.spend-card-form label {
  display: grid;
  gap: 6px;
}

.spend-card-form input {
  width: 130px;
}

.spend-assign-resource {
  color: var(--accent-text);
  margin-top: 10px;
  font-size: 10px;
}

.spend-assignment-dialog {
  width: min(560px, 100vw - 32px);
}

.spend-assignment-future {
  align-items:  flex-start;
  display: flex !important;
  gap: 10px !important;
}

.spend-assignment-future input {
  flex-shrink: 0;
  width: 18px;
}

.spend-assignment-dialog p {
  font-size: 12px;
  line-height: 1.7;
}

@media (max-width: 600px) {
  .spend-invoice-readiness {
    grid-template-columns: 1fr 16px;
    gap: 8px;
  }

  .spend-invoice-readiness > div:nth-child(2) {
    grid-row: 2;
  }

  .spend-invoice-readiness > svg {
    grid-column: 2;
    grid-row: 1;
  }

  .spend-change-row {
    gap: 9px;
  }

  .spend-change-row .spend-brand-logo {
    display: none;
  }
}

.spend-insight-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items:  start;
  gap: 32px;
}

.spend-insight-grid .spend-invoice-readiness {
  grid-template-columns: 110px 1fr 14px;
  gap: 12px;
}

@media (max-width: 1100px) {
  .spend-insight-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 600px) {
  .spend-insight-grid .spend-invoice-readiness {
    grid-template-columns: 1fr 16px;
  }
}

.spend-insight-section {
  min-width: 0;
}

.spend-change-row > span:nth-child(2) strong {
  overflow-wrap: anywhere;
}

.spend-change-row {
  white-space: normal;
}

.spend-local-trend {
  align-items:  center;
  gap: 5px;
  margin-top: 6px;
  font-weight: 400;
  line-height: 1.5;
  display: flex !important;
  color: var(--muted) !important;
  white-space: normal !important;
  font-size: 10px !important;
}

.spend-local-trend > svg {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.provider-summary-amount .spend-local-trend {
  margin-top: 12px;
}

.spend-invoice-months {
  margin: 20px 0;
}

.spend-invoice-months > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
}

.spend-invoice-months .spend-insight-section {
  margin-top: 18px;
}

.identity-emails {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
  margin-top: 6px;
}

.identity-emails > span {
  color: var(--muted);
  background: var(--surface-secondary, color-mix(in srgb, var(--muted) 8%, transparent));
  overflow-wrap: anywhere;
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
}

.system-page {
  display: grid;
  gap: 24px;
}

.system-page .panel {
  min-width: 0;
  margin: 0;
  padding: 26px;
}

.system-section-heading {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 16px;
  margin-bottom: 22px;
}

.system-section-heading h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.system-section-heading p {
  color: var(--muted);
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

.system-count {
  color: var(--muted);
  white-space: nowrap;
  font-size: 11px;
}

.system-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 16px;
}

.system-admin-person {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 10px;
  align-items:  flex-start;
  gap: 14px;
  min-width: 0;
  padding: 18px;
}

.system-admin-person > .person-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
}

.system-admin-info {
  flex: 1;
  min-width: 0;
}

.system-admin-name {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 8px;
}

.system-admin-name > strong {
  font-size: 14px;
}

.system-admin-person > .text-button {
  font-size: 11px;
}

.system-invite {
  display: flex;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:  center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
}

.system-invite > label {
  font-size: 12px;
}

.system-invite > div {
  display: flex;
  gap: 10px;
}

.system-invite input {
  width: 260px;
  max-width: 100%;
}

.system-invite input, .system-invite button {
  height: 40px;
}

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

.system-service {
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 0;
  padding: 16px;
}

.system-service-top {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 8px;
  margin-bottom: 16px;
}

.system-service-top > svg {
  color: var(--muted);
  width: 24px;
  height: 24px;
}

.system-service > strong {
  font-size: 13px;
}

.system-service > p {
  color: var(--muted);
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.6;
}

.system-status {
  display: inline-flex;
  white-space: nowrap;
  color: var(--muted);
  align-items:  center;
  gap: 6px;
  font-size: 10px;
}

.system-status > i {
  background: currentColor;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.system-status.is-good {
  color: var(--buncss-light, #267361) var(--buncss-dark, #7cc9b5);
}

.system-worker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 24px;
}

.system-worker {
  display: flex;
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items:  center;
  gap: 10px;
  padding: 16px 0;
}

.system-worker > strong {
  font-size: 12px;
  font-weight: 500;
}

.system-release {
  display: flex;
  color: var(--muted);
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  font-size: 11px;
}

.system-release a {
  display: inline-flex;
  align-items:  center;
  gap: 6px;
}

.system-refresh {
  display: inline-flex;
  align-items:  center;
  gap: 8px;
  height: 36px;
  font-size: 11px;
}

.system-table-wrap {
  min-height: 150px;
  transition: opacity .15s;
}

.system-table-wrap[aria-busy="true"] {
  opacity: .55;
}

.system-history .people-table {
  width: 100%;
}

.system-history .people-table td {
  padding: 15px 12px;
  font-size: 12px;
}

.system-history .people-table td > strong {
  font-weight: 500;
}

.system-target {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}

.system-time {
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px !important;
}

.system-pagination {
  display: flex;
  border-top: 1px solid var(--border);
  color: var(--muted);
  justify-content: space-between;
  align-items:  center;
  gap: 16px;
  margin-top: 8px;
  padding-top: 18px;
  font-size: 11px;
}

.system-pagination > label, .system-pagination > nav {
  display: flex;
  align-items:  center;
  gap: 10px;
}

.system-pagination select {
  width: 64px;
  height: 34px;
  padding: 4px 8px;
  font-size: 12px;
}

.system-pagination button {
  display: grid;
  place-items:  center;
  width: 34px;
  height: 34px;
  padding: 0;
}

.system-pagination button:disabled {
  opacity: .35;
  cursor: default;
}

@media (max-width: 1100px) {
  .system-service-grid, .system-worker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .system-page .panel {
    padding: 18px;
  }

  .system-section-heading {
    align-items:  flex-start;
  }

  .system-count {
    white-space: normal;
    text-align: right;
  }

  .system-service-grid {
    gap: 8px;
  }

  .system-service {
    padding: 12px;
  }

  .system-service-top {
    flex-wrap: wrap;
  }

  .system-worker-grid {
    grid-template-columns: 1fr;
  }

  .system-invite > div {
    flex-wrap: wrap;
    width: 100%;
  }

  .system-invite input, .system-invite button {
    width: 100%;
  }

  .system-pagination {
    flex-wrap: wrap;
    gap: 8px;
  }

  .system-history .people-table {
    min-width: 650px;
  }

  .system-admin-person {
    padding: 12px;
  }

  .system-admin-name {
    align-items:  flex-start;
  }
}

.system-history .system-table-wrap {
  overflow: auto;
  max-height: 560px;
}

.system-history .people-table thead {
  display: table-header-group;
}

.system-history .people-table tr {
  display: table-row;
  padding: 0;
}

.system-history .people-table td {
  display: table-cell;
  border-bottom: 1px solid var(--border);
}

.system-history .people-table th {
  position: sticky;
  z-index: 1;
  top: 0;
}

.system-table-hint {
  display: none;
}

@media (max-width: 720px) {
  .system-history .people-table {
    min-width: 650px;
  }

  .system-history .system-table-wrap {
    max-height: 420px;
  }

  .system-table-hint {
    display: block;
    color: var(--muted);
    margin: 0 0 10px;
    font-size: 11px;
  }
}

.usage-toolbar {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 12px;
  margin: 20px 0 26px;
}

.usage-toolbar > .secondary {
  height: 40px;
  font-size: 12px;
}

.usage-results {
  transition: opacity .15s;
}

.usage-results[aria-busy="true"] {
  opacity: .55;
}

.usage-dashboard {
  display: grid;
  gap: 28px;
}

.usage-summary {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 14px;
  gap: 36px;
  padding: 30px;
}

.usage-summary small {
  color: var(--muted);
  font-size: 11px;
}

.usage-summary h2 {
  margin: 15px 0;
  font-size: 18px;
}

.usage-summary strong {
  letter-spacing: -1px;
  font-size: 38px;
}

.usage-summary p {
  color: var(--muted);
  max-width: 430px;
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.7;
}

.usage-summary a {
  color: var(--accent-text);
}

.usage-daily {
  align-self:  end;
  min-width: 0;
}

.usage-daily > span {
  color: var(--muted);
  font-size: 11px;
}

.usage-daily > div {
  display: flex;
  gap: 4px;
  height: 110px;
  margin: 16px 0 20px;
}

.usage-daily > div > span {
  position: relative;
  display: flex;
  flex: 1;
  align-items:  flex-end;
  min-width: 0;
}

.usage-daily i {
  background: var(--accent-text);
  opacity: .7;
  border-radius: 3px 3px 0 0;
  width: 100%;
  max-width: 32px;
}

.usage-daily small {
  position: absolute;
  color: var(--muted);
  font-size: 10px;
  bottom: -21px;
}

.usage-section-head {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 16px;
  margin-bottom: 18px;
}

.usage-section-head h2, .usage-section-head h3 {
  margin: 0;
  font-size: 17px;
}

.usage-section-head > span, .usage-section-head > small, .usage-section-head > a {
  color: var(--muted);
  font-size: 11px;
}

.usage-section-head > a {
  display: flex;
  align-items:  center;
  gap: 8px;
}

.usage-workflows {
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--surface);
  border-radius: 12px;
}

.usage-workflow-row {
  display: flex;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  background: none;
  border-radius: 0;
  align-items:  center;
  gap: 18px;
  width: 100%;
  padding: 24px;
}

.usage-workflow-row:last-child {
  border-bottom: 0;
}

.usage-workflow-row:hover {
  background: var(--surface-muted);
}

.usage-workflow-icon {
  display: grid;
  background: var(--accent-soft);
  color: var(--accent-text);
  border-radius: 12px;
  flex-shrink: 0;
  place-items:  center;
  width: 46px;
  height: 46px;
  font-size: 21px;
}

.usage-workflow-copy {
  flex: 1;
  min-width: 0;
}

.usage-workflow-copy > strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
}

.usage-workflow-copy > small {
  color: var(--muted);
  display: block;
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.6;
}

.usage-workflow-cost {
  text-align: right;
  min-width: 90px;
}

.usage-workflow-cost > b {
  display: block;
  font-size: 19px;
}

.usage-workflow-cost > small {
  color: var(--muted);
  display: block;
  margin-top: 6px;
  font-size: 10px;
}

.usage-workflow-meter {
  display: block;
  background: var(--surface-muted);
  border-radius: 4px;
  width: 100%;
  max-width: 330px;
  height: 3px;
  margin-top: 14px;
}

.usage-workflow-meter > i {
  display: block;
  background: var(--accent-text);
  border-radius: 4px;
  height: 100%;
}

.usage-dashboard > .panel {
  margin: 0;
  padding: 24px;
}

.usage-person {
  display: flex;
  border-top: 1px solid var(--border);
  align-items:  center;
  gap: 12px;
  padding: 15px 0;
}

.usage-person > div {
  flex: 1;
}

.usage-person strong {
  font-size: 13px;
}

.usage-person small {
  display: block;
  color: var(--muted);
  margin-top: 5px;
  font-size: 11px;
}

.usage-person > b {
  font-size: 14px;
}

.usage-basis {
  color: var(--muted);
  max-width: 850px;
  margin: 0;
  font-size: 11px;
  line-height: 1.7;
}

.usage-gifts {
  color: var(--muted);
  margin-top: 22px;
  font-size: 12px;
}

.usage-gifts > summary {
  cursor: pointer;
}

.usage-back {
  display: flex;
  justify-self: start;
  align-items:  center;
  gap: 8px;
}

.usage-workflow-head {
  display: flex;
  align-items:  center;
  gap: 18px;
}

.usage-workflow-head > div {
  flex: 1;
}

.usage-workflow-head h2 {
  margin: 0;
  font-size: 22px;
}

.usage-workflow-head p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.usage-workflow-head small {
  color: var(--muted);
  font-size: 11px;
}

.usage-workflow-head > strong {
  font-size: 28px;
}

.usage-detail-filter label {
  display: flex;
  align-items:  center;
  gap: 12px;
  font-size: 12px;
}

.usage-detail-filter select {
  width: 240px;
  height: 40px;
}

.usage-components h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.usage-component {
  display: flex;
  border-top: 1px solid var(--border);
  align-items:  center;
  gap: 12px;
  padding: 16px 0;
}

.usage-component > div {
  flex: 1;
  min-width: 0;
}

.usage-component strong, .usage-component b {
  font-size: 13px;
}

.usage-component small {
  display: block;
  color: var(--muted);
  overflow-wrap: anywhere;
  margin-top: 5px;
  font-size: 11px;
}

.usage-activity-list {
  min-height: 90px;
}

.usage-activity-list[aria-busy="true"], .usage-charge-list[aria-busy="true"] {
  opacity: .5;
}

.usage-activity-row {
  display: flex;
  border: 0;
  border-top: 1px solid var(--border);
  text-align: left;
  color: var(--text);
  background: none;
  border-radius: 0;
  align-items:  center;
  gap: 16px;
  width: 100%;
  padding: 18px 0;
}

.usage-activity-row > div {
  flex: 1;
}

.usage-activity-row strong, .usage-activity-row > b {
  font-size: 13px;
}

.usage-activity-row small {
  display: block;
  color: var(--muted);
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.6;
}

.usage-charge-dialog {
  width: min(800px, 100vw - 32px);
  max-width: 800px;
}

.usage-charge-list {
  overflow: auto;
  max-height: 55vh;
  margin-top: 16px;
}

.usage-charge {
  display: flex;
  border-top: 1px solid var(--border);
  align-items:  flex-start;
  gap: 12px;
  padding: 18px 0;
}

.usage-charge > div {
  flex: 1;
  min-width: 0;
}

.usage-charge strong, .usage-charge > b {
  font-size: 12px;
}

.usage-charge small {
  display: block;
  color: var(--muted);
  overflow-wrap: anywhere;
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.6;
}

.usage-charge > b {
  text-align: right;
}

.usage-empty {
  text-align: center;
  padding: 40px;
}

.usage-empty h3 {
  font-size: 16px;
}

.usage-empty p {
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 720px) {
  .usage-summary {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 22px;
  }

  .usage-toolbar {
    flex-wrap: wrap;
  }

  .usage-section-head {
    flex-wrap: wrap;
    gap: 8px;
  }

  .usage-workflow-row {
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px;
  }

  .usage-workflow-copy {
    flex-basis: 65%;
  }

  .usage-workflow-cost {
    text-align: left;
    flex: 1;
    margin-left: 58px;
  }

  .usage-workflow-head {
    flex-wrap: wrap;
  }

  .usage-workflow-head > div {
    flex-basis: 65%;
  }

  .usage-workflow-head > strong {
    margin-left: 64px;
  }

  .usage-dashboard > .panel {
    padding: 18px;
  }

  .usage-activity-row {
    gap: 10px;
  }

  .usage-charge > .spend-brand-logo {
    display: none;
  }
}

.usage-toolbar .task-pill > button {
  height: 40px;
}

.usage-daily > div > span:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

.usage-operation-labels {
  display: flex;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  padding: 10px 0;
  font-size: 10px;
}

.usage-operation-row {
  display: flex;
  border-bottom: 1px solid var(--border);
  align-items:  flex-start;
  gap: 12px;
  padding: 18px 0;
}

.usage-operation-row > svg {
  color: var(--accent-text);
  flex-shrink: 0;
  margin-top: 2px;
}

.usage-operation-row > div {
  flex: 1;
  min-width: 0;
}

.usage-operation-row strong {
  font-size: 13px;
  font-weight: 600;
}

.usage-operation-row small {
  display: block;
  color: var(--muted);
  overflow-wrap: anywhere;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.6;
}

.usage-operation-row > b {
  white-space: nowrap;
  font-size: 14px;
}

.usage-operations > .usage-basis {
  margin-top: 14px;
}

.usage-tools-heading {
  border-top: 1px solid var(--border);
  margin-top: 30px;
  padding-top: 22px;
}

.usage-tool-labels, .usage-tool-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 65px 65px 90px;
  border-bottom: 1px solid var(--border);
  align-items:  center;
  gap: 12px;
  padding: 12px 0;
  font-size: 12px;
}

.usage-tool-labels {
  color: var(--muted);
  font-size: 10px;
}

.usage-tool-row strong {
  font-weight: 500;
}

.usage-tool-row > span, .usage-tool-labels > span:not(:first-child) {
  text-align: right;
}

.usage-tool-failed {
  color: var(--danger);
}

@media (max-width: 600px) {
  .usage-tool-labels, .usage-tool-row {
    grid-template-columns: minmax(0, 1fr) 35px 38px 58px;
    gap: 6px;
    font-size: 11px;
  }

  .usage-tool-labels {
    font-size: 10px;
  }
}

.usage-operation-row {
  padding: 14px 0;
}

.usage-operation-open.text-button {
  display: inline-flex;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  align-items:  center;
  gap: 8px;
  max-width: 100%;
  min-height: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
}

.usage-operation-open > svg {
  flex-shrink: 0;
}

.usage-action-person {
  display: flex;
  color: var(--muted);
  align-items:  center;
  gap: 7px;
  margin-top: 8px;
  font-size: 11px;
}

.usage-action-person > .task-face {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.usage-tool-person {
  display: block;
  color: var(--muted);
  margin-top: 5px;
  font-size: 10px;
}

.company-arrangement-filters {
  margin-bottom: 20px;
}

.company-arrangement-filters summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.company-arrangement-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 14px;
}

.company-arrangement-filter-grid label {
  min-width: 0;
}

.company-arrangement-filter-grid select {
  width: 100%;
  min-width: 0;
}

@media (max-width: 450px) {
  .company-arrangement-filter-grid {
    grid-template-columns: 1fr;
  }
}

.client-invoices-heading {
  margin: 8px 0 24px;
}

.client-invoices-heading h2 {
  margin: 0 0 6px;
  font-size: 22px;
}

.client-invoices-heading p, .client-invoice-caption {
  color: var(--muted);
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.client-invoices-layout {
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr);
  align-items:  start;
  gap: 28px;
}

.client-invoice-months {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.client-invoice-months > button {
  display: flex;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 12px;
  justify-content: space-between;
  align-items:  center;
  gap: 12px;
  padding: 17px 14px;
}

.client-invoice-months > button:hover {
  background: var(--surface-muted);
}

.client-invoice-months > button[aria-current="true"] {
  background: var(--surface);
  border-color: var(--accent);
}

.client-invoice-months strong {
  display: block;
  font-size: 13px;
}

.client-invoice-months small {
  display: block;
  color: var(--muted);
  margin-top: 6px;
  font-size: 11px;
}

.client-invoice-months b {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.client-invoice-months .client-invoice-history {
  color: var(--muted);
  justify-content: center;
  font-size: 12px;
}

.client-invoice-detail {
  min-width: 0;
}

.client-invoice-actions {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 12px;
  margin-bottom: 16px;
}

.client-invoice-actions button {
  display: inline-flex;
  align-items:  center;
  gap: 8px;
  min-height: 40px;
}

.client-invoice-status {
  display: inline-flex;
  color: var(--muted);
  align-items:  center;
  gap: 7px;
  font-size: 12px;
}

.client-invoice-status.is-issued {
  color: var(--accent-text);
}

.client-invoice-paper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px;
}

.client-invoice-paper-head {
  display: flex;
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 28px;
}

.client-invoice-paper-head h2 {
  letter-spacing: -1px;
  margin: 8px 0;
  font-size: 32px;
}

.client-invoice-paper-head p {
  color: var(--muted);
  margin: 0;
  font-size: 14px;
}

.client-invoice-amount {
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}

.client-invoice-amount strong {
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  font-size: 30px;
}

.client-invoice-amount small, .client-invoice-amount span {
  color: var(--muted);
  font-size: 11px;
}

.client-invoice-parties {
  display: flex;
  align-items:  center;
  gap: 24px;
  padding: 26px 0;
}

.client-invoice-parties > div {
  flex: 1;
}

.client-invoice-parties small {
  display: block;
  color: var(--muted);
  margin-bottom: 7px;
  font-size: 11px;
}

.client-invoice-parties strong {
  white-space: pre-wrap;
  font-size: 15px;
}

.client-invoice-parties > svg {
  color: var(--muted);
}

.client-invoice-meta {
  display: flex;
  color: var(--muted);
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 24px;
  font-size: 11px;
}

.client-invoice-column-head {
  display: flex;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  font-size: 11px;
}

.client-invoice-service {
  display: flex;
  border-bottom: 1px solid var(--border);
  align-items:  center;
  gap: 13px;
  padding: 18px 0;
}

.client-invoice-service > div {
  flex: 1;
  min-width: 0;
}

.client-invoice-service strong {
  font-size: 13px;
}

.client-invoice-service p {
  color: var(--muted);
  overflow-wrap: anywhere;
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.55;
}

.client-invoice-service b {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

.client-invoice-total {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 12px;
  padding-top: 24px;
  font-size: 13px;
}

.client-invoice-total strong {
  font-size: 24px;
}

.client-invoice-note {
  white-space: pre-wrap;
  color: var(--muted);
  margin-top: 32px;
  font-size: 12px;
  line-height: 1.6;
}

.client-invoice-caption {
  margin-top: 14px;
  font-size: 11px;
}

.client-invoice-empty {
  text-align: center;
  color: var(--muted);
  padding: 40px 16px;
}

.client-invoice-empty > svg {
  font-size: 28px;
}

.client-invoice-empty h3 {
  color: var(--text);
  font-size: 16px;
}

.client-invoice-empty p {
  font-size: 13px;
  line-height: 1.6;
}

.client-invoice-loading {
  color: var(--muted);
  min-height: 400px;
  padding: 40px;
}

@media (max-width: 1100px) {
  .client-invoices-layout {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 16px;
  }

  .client-invoice-paper {
    padding: 24px;
  }
}

@media (max-width: 750px) {
  .client-invoices-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .client-invoice-months {
    overflow-x: auto;
    flex-direction: row;
    padding-bottom: 8px;
  }

  .client-invoice-months > button {
    flex-shrink: 0;
    min-width: 180px;
  }

  .client-invoice-paper {
    padding: 20px;
  }

  .client-invoice-paper-head {
    gap: 12px;
  }

  .client-invoice-amount strong {
    font-size: 25px;
  }

  .client-invoice-paper-head h2 {
    font-size: 28px;
  }
}

.client-invoice-months b {
  background: none;
  border-radius: 0;
  padding: 0;
}

.client-invoice-paper-head h2, .client-invoice-amount strong {
  color: var(--text);
}

.client-invoice-basis {
  display: block;
  color: var(--muted);
  margin-top: 6px;
  font-size: 10px;
}

.client-invoices-layout {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 960px;
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.client-invoice-months {
  overflow-x: auto;
  flex-direction: row;
  gap: 10px;
  width: 100%;
  padding: 2px 0 8px;
}

.client-invoice-months > button {
  border-color: var(--border);
  background: var(--surface);
  flex: 0 0 180px;
  padding: 14px;
}

.client-invoice-months > button[aria-current="true"] {
  border-color: var(--accent-text);
  box-shadow: inset 0 -2px 0 var(--accent-text);
}

.client-invoice-detail {
  width: 100%;
}

.client-invoice-actions {
  margin-bottom: 26px;
}

.client-invoice-info {
  display: flex;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  flex-wrap: wrap;
  gap: 18px 32px;
  margin-top: 28px;
  padding: 18px;
}

.client-invoice-info > span {
  display: flex;
  flex: 220px;
  align-items:  flex-start;
  gap: 10px;
}

.client-invoice-info svg {
  color: var(--muted);
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 2px;
}

.client-invoice-info strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
}

.client-invoice-info small {
  display: block;
  color: var(--muted);
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.5;
}

.client-invoices-heading, .client-invoices-heading, .client-invoice-table-wrap, .client-invoice-page {
  max-width: 960px;
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.client-invoice-page > .spend-back {
  margin-bottom: 18px;
}

.client-invoice-table-wrap {
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--surface);
  border-radius: 14px;
}

.client-invoice-table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
}

.client-invoice-table th, .client-invoice-table td {
  border-bottom: 1px solid var(--border);
  padding: 20px 24px;
}

.client-invoice-table thead th {
  color: var(--muted);
  background: var(--surface-muted);
  padding-block-start: 13px;
  padding-block-end: 13px;
  font-size: 11px;
  font-weight: 500;
}

.client-invoice-table thead th:nth-child(3) {
  text-align: right;
}

.client-invoice-table tbody tr {
  cursor: pointer;
}

.client-invoice-table tbody tr:hover, .client-invoice-table tbody tr:focus-within {
  background: var(--surface-muted);
}

.client-invoice-table tbody tr:last-child > * {
  border-bottom: 0;
}

.client-invoice-table th:last-child, .client-invoice-table td:last-child {
  color: var(--muted);
  width: 20px;
  padding-left: 0;
}

.client-invoice-month-link {
  color: var(--text);
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
}

.client-invoice-table small {
  display: block;
  color: var(--muted);
  margin-top: 6px;
  font-size: 11px;
  font-weight: 400;
}

.client-invoice-table-status {
  color: var(--muted);
  font-size: 12px;
}

.client-invoice-table-total {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

@media (max-width: 650px) {
  .client-invoice-table th, .client-invoice-table td {
    padding: 16px 12px;
  }

  .client-invoice-month-link, .client-invoice-table-total {
    font-size: 12px;
  }

  .client-invoice-table-status {
    font-size: 11px;
  }

  .client-invoice-table small {
    font-size: 10px;
  }
}

.client-invoice-back {
  display: inline-flex;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  align-items:  center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 500;
}

.client-invoice-back:hover {
  color: var(--text);
}

.client-invoice-back:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 5px;
  border-radius: 4px;
}

.client-invoice-back svg {
  width: 15px;
  height: 15px;
}

.client-invoice-preview {
  max-width: 794px;
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.client-invoice-preview .client-invoice-actions {
  margin-bottom: 16px;
}

.client-invoice-document {
  border: 1px solid var(--border);
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 24px #00000008;
}

.client-invoice-page {
  max-width: 794px;
}

.client-invoice-preview .client-invoice-info {
  margin-top: 16px;
}

.repo-workspace {
  border: 1px solid var(--border);
  overflow: hidden;
  border-radius: 14px;
  min-width: 0;
}

.repo-heading {
  display: flex;
  justify-content: space-between;
  align-items:  center;
}

.repo-heading h3 {
  margin: 0;
}

.repo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 10px;
}

.repo-actions label {
  display: flex;
  color: var(--muted);
  align-items:  center;
  gap: 8px;
  font-size: 11px;
}

.repo-navigation {
  display: flex;
  overflow: auto;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}

.repo-content {
  overflow-x: auto;
}

.repo-workspace button {
  font: inherit;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.repo-workspace button:disabled {
  opacity: .45;
}

.repo-workspace button:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

.repo-workspace summary:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

.repo-workspace select, .repo-workspace input, .repo-workspace textarea {
  font: inherit;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  max-width: 100%;
  padding: 10px;
  font-size: 12px;
}

.repo-workspace select {
  padding-right: 28px;
}

.repo-workspace textarea {
  display: block;
  width: 100%;
  min-height: 110px;
  margin: 16px 0;
}

.repo-navigation button {
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 2px solid #0000;
  border-radius: 0;
}

.repo-row {
  display: flex;
  text-align: left;
  background: none;
  align-items:  center;
  width: 100%;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
}

.repo-row small {
  display: block;
  margin-top: 5px;
}

.repo-row strong {
  overflow-wrap: anywhere;
}

.repo-pagination {
  display: flex;
  color: var(--muted);
  justify-content: flex-end;
  align-items:  center;
  gap: 16px;
  padding: 20px 0 0;
  font-size: 11px;
}

.repo-workspace .repo-back {
  color: var(--muted);
  text-align: left;
  background: none;
  border: 0;
  margin-bottom: 18px;
  padding: 0;
}

.repo-content table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
}

.repo-content th, .repo-content td {
  border-bottom: 1px solid var(--border);
  padding: 14px;
}

.repo-content th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.repo-content td small {
  display: block;
  color: var(--muted);
  margin-top: 6px;
  font-size: 11px;
}

.repo-content pre {
  overflow: auto;
  background: var(--surface-muted);
  border-radius: 8px;
  max-height: 65vh;
  padding: 16px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  line-height: 1.8;
}

.repo-notes {
  overflow-wrap: anywhere;
  max-width: 900px;
  font-size: 13px;
  line-height: 1.8;
}

.repo-notes p {
  white-space: pre-wrap;
  margin: 14px 0;
}

.repo-notes ul {
  padding-left: 24px;
}

.repo-notes li {
  margin: 6px 0;
}

.repo-notes code {
  background: var(--surface-muted);
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 12px;
}

.repo-notes pre code {
  background: none;
  padding: 0;
}

.repo-notes h4 {
  margin: 24px 0 10px;
  font-size: 15px;
}

.app .repo-upstream > header {
  display: flex;
  color: var(--text);
  background: none;
  justify-content: space-between;
  align-items: baseline;
  min-height: 0;
  padding: 0;
}

.repo-upstream > header strong {
  font-size: 20px;
}

.repo-workspace > .error, .repo-workspace > [role="status"] {
  margin: 16px 24px;
  font-size: 12px;
}

.repo-workspace blockquote small {
  display: block;
  color: var(--muted);
  margin-top: 10px;
}

.repo-status {
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 700px) {
  .repo-heading {
    flex-direction: column;
    align-items:  flex-start;
  }

  .repo-upstream > header {
    flex-wrap: wrap;
  }

  .repo-heading select {
    max-width: 190px;
  }
}

.code-workspace {
  --cw-hover: var(--buncss-light, #f4f6fa) var(--buncss-dark, #20232c);
  --cw-selection: var(--buncss-light, #dbeafe) var(--buncss-dark, #253c63);
  --cw-syntax-keyword: var(--buncss-light, #9d3291) var(--buncss-dark, #dca0ea);
  --cw-syntax-string: var(--buncss-light, #167454) var(--buncss-dark, #91d4ad);
  --cw-syntax-number: var(--buncss-light, #a24e13) var(--buncss-dark, #e6ba85);
  --cw-syntax-function: var(--buncss-light, #285eb5) var(--buncss-dark, #99bfff);
  --cw-syntax-type: var(--buncss-light, #96641b) var(--buncss-dark, #e6cd89);
  --cw-syntax-property: var(--buncss-light, #264b88) var(--buncss-dark, #afc6ed);
  background: var(--surface);
  font-size: 13px;
}

.app .code-workspace .repo-heading {
  border-bottom: 1px solid var(--border);
  gap: 20px;
  padding: 22px 24px;
}

.code-workspace .repo-heading h3 {
  display: flex;
  align-items:  center;
  gap: 12px;
  font-size: 17px;
}

.repo-heading h3 > svg {
  width: 24px;
  height: 24px;
}

.repo-heading h3 small {
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}

.code-workspace .repo-navigation {
  gap: 4px;
  padding: 0 14px;
}

.code-workspace .repo-navigation button {
  display: flex;
  align-items:  center;
  gap: 7px;
  padding: 16px 10px;
  font-size: 12px;
}

.code-workspace .repo-navigation button[aria-current="page"] {
  color: var(--accent-text);
  border-color: var(--accent-text);
}

.code-workspace .repo-navigation svg {
  width: 15px;
  height: 15px;
}

.code-workspace .repo-content {
  min-height: 500px;
  padding: 26px;
}

.code-workspace button {
  transition: background .12s, color .12s;
}

.code-workspace button:hover:not(:disabled) {
  background: var(--cw-hover);
}

.code-workspace button:disabled {
  cursor: not-allowed;
}

.code-workspace button svg {
  flex-shrink: 0;
}

.code-workspace .cw-primary, .cw-dialog .cw-primary {
  background: var(--accent-text) !important;
  color: var(--surface) !important;
  border-color: #0000 !important;
}

.code-workspace .cw-icon-button, .cw-dialog .cw-icon-button {
  display: inline-flex;
  justify-content: center;
  align-items:  center;
  width: 34px;
  height: 34px;
  padding: 7px !important;
}

.cw-actions, .cw-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 8px;
}

.cw-actions button {
  display: inline-flex;
  align-items:  center;
  gap: 7px;
}

.cw-page-head {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 16px;
  margin-bottom: 24px;
}

.cw-page-head h3 {
  letter-spacing: -.4px;
  margin: 0;
  font-size: 20px;
}

.cw-page-head p {
  color: var(--muted);
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.6;
}

.cw-filterbar {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 16px;
  margin: 18px 0;
}

.cw-filterbar > span {
  color: var(--muted);
  font-size: 11px;
}

.code-workspace .cw-search {
  display: flex;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 8px;
  align-items:  center;
  gap: 8px;
  width: 310px;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
}

.code-workspace .cw-search input {
  outline: none;
  box-shadow: none;
  background: none;
  border: 0;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 12px;
}

.code-workspace .cw-search button {
  width: 18px;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}

.cw-status {
  display: inline-flex;
  white-space: nowrap;
  color: var(--muted);
  align-items:  center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
}

.cw-status svg {
  width: 16px;
  height: 16px;
}

.cw-status.good {
  color: var(--buncss-light, #228160) var(--buncss-dark, #78ccaa);
}

.cw-status.bad {
  color: var(--buncss-light, #c24455) var(--buncss-dark, #f18e9e);
}

.cw-status.purple {
  color: var(--buncss-light, #8851c3) var(--buncss-dark, #c39bee);
}

.cw-status.warn {
  color: var(--buncss-light, #a56a13) var(--buncss-dark, #ebc579);
}

.cw-status.active {
  color: var(--accent-text);
}

.cw-avatar {
  object-fit: cover;
  display: inline-grid;
  background: var(--cw-hover);
  color: var(--muted);
  border-radius: 50%;
  flex-shrink: 0;
  place-items:  center;
  width: 25px;
  height: 25px;
  font-size: 11px;
}

.code-workspace .repo-row {
  gap: 14px;
  padding: 18px 14px;
}

.code-workspace .repo-row > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.code-workspace .repo-row strong {
  font-size: 13px;
  line-height: 1.5;
}

.code-workspace .repo-row small {
  color: var(--muted);
  opacity: 1;
  font-size: 11px;
}

.code-workspace .repo-row > svg:last-child {
  color: var(--muted);
  width: 15px;
}

.code-workspace .repo-list {
  border: 1px solid var(--border);
  overflow: hidden;
  border-radius: 10px;
}

.code-workspace .repo-row:last-child {
  border-bottom: 0;
}

.cw-empty {
  text-align: center;
  color: var(--muted);
  padding: 55px 24px;
}

.cw-empty > span {
  display: inline-grid;
  border: 1px solid var(--border);
  border-radius: 14px;
  place-items:  center;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  font-size: 22px;
}

.cw-empty h3 {
  color: var(--text);
  margin: 12px 0 8px;
  font-size: 15px;
}

.cw-empty p {
  max-width: 420px;
  margin: auto;
  font-size: 12px;
  line-height: 1.7;
}

.cw-overview-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 32px;
}

.code-workspace .cw-overview-stats button {
  display: flex;
  text-align: left;
  align-items:  center;
  gap: 12px;
  white-space: normal !important;
  padding: 20px !important;
}

.cw-overview-stats strong {
  font-size: 25px;
}

.cw-overview-stats span {
  color: var(--muted);
  flex: 1;
  font-size: 11px;
  line-height: 1.6;
}

.cw-overview-stats svg {
  color: var(--accent-text);
  font-size: 18px;
}

.cw-section-title {
  margin: 28px 0 12px !important;
  font-size: 13px !important;
}

.cw-table-scroll {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.code-workspace .cw-table {
  width: 100%;
  font-size: 12px;
}

.code-workspace .cw-table th {
  background: var(--cw-hover);
  opacity: 1;
  color: var(--muted);
  text-transform: none;
  letter-spacing: .02em;
  font-size: 10px;
  font-weight: 500;
}

.code-workspace .cw-table td {
  padding: 18px 14px;
}

.cw-table tr:last-child td {
  border-bottom: 0;
}

.cw-table tbody tr:hover {
  background: var(--cw-hover);
}

.cw-table code {
  font-size: 11px;
}

.cw-package {
  display: flex;
  align-items:  center;
  gap: 12px;
}

.cw-package > svg {
  color: var(--muted);
  flex-shrink: 0;
  font-size: 17px;
}

.cw-package strong {
  font-weight: 500;
}

.cw-package a {
  display: inline-flex;
  align-items:  center;
  gap: 5px;
}

.cw-package a > svg {
  flex: none;
  width: 13px;
  height: 13px;
}

.cw-package small {
  max-width: 440px;
  line-height: 1.6;
}

.cw-help {
  color: var(--muted);
  margin-top: 18px;
  font-size: 11px;
  line-height: 1.8;
}

.cw-environments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.cw-environment {
  border: 1px solid var(--border);
  display: grid;
  text-align: center;
  border-radius: 10px;
  justify-items: center;
  gap: 12px;
  padding: 22px;
}

.cw-environment > svg {
  color: var(--accent-text);
  font-size: 20px;
}

.cw-environment h4 {
  font-size: 14px;
  margin: 0 !important;
}

.cw-environment small {
  color: var(--muted);
  font-size: 11px;
}

.cw-release {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  border-top: 1px solid var(--border);
  gap: 30px;
  padding: 28px 0;
}

.cw-release-meta {
  display: flex;
  color: var(--muted);
  flex-direction: column;
  align-items:  flex-start;
  gap: 12px;
  font-size: 11px;
}

.cw-release-meta > svg {
  color: var(--accent-text);
  font-size: 22px;
}

.cw-release-meta code {
  color: var(--text);
  font-size: 14px;
}

.cw-release h3 {
  margin: 0;
  font-size: 18px;
}

.cw-release a {
  display: inline-flex;
  align-items:  center;
  gap: 7px;
  font-size: 12px;
}

.cw-detail-tabs {
  margin: 20px 0;
}

.code-workspace .cw-segments {
  display: inline-flex;
  background: var(--cw-hover);
  border-radius: 8px;
  gap: 3px;
  padding: 3px;
}

.code-workspace .cw-segments button {
  background: none;
  border: 0;
  padding: 7px 12px;
  font-size: 11px;
}

.code-workspace .cw-segments button[aria-pressed="true"] {
  background: var(--surface);
  box-shadow: 0 1px 3px #0001;
}

.code-workspace .repo-comment {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 16px 0;
  padding: 20px;
}

.code-workspace .repo-upstream {
  max-width: 1040px;
  margin: 24px auto;
}

.code-workspace .repo-upstream .repo-notes {
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: none;
  padding: 24px;
}

.code-workspace .repo-upstream > header {
  gap: 20px;
  line-height: 1.6;
}

.code-workspace .repo-upstream blockquote {
  border-left: 3px solid var(--accent-text);
  background: var(--cw-hover);
  margin: 20px 0;
  padding: 18px;
}

.code-workspace details {
  border: 1px solid var(--border);
  overflow: hidden;
  border-radius: 10px;
  margin: 12px 0;
  padding: 0;
}

.code-workspace summary {
  background: var(--cw-hover);
  padding: 15px 18px;
  font-size: 12px;
  font-weight: 550;
}

.code-workspace details > form, .code-workspace details > p, .code-workspace details > div, .code-workspace details > button {
  margin: 16px;
}

.code-workspace details > form {
  display: grid;
  gap: 12px;
  padding: 0;
}

.code-workspace details > form label {
  display: grid;
  gap: 7px;
  font-size: 12px;
}

.code-workspace details > input, .code-workspace details > textarea {
  width: calc(100% - 32px);
  margin: 16px;
}

.code-workspace .repo-logs {
  color: #d6deeb;
  background: #131720;
  border-radius: 10px;
  padding: 20px;
}

.cw-skeleton {
  display: grid;
  gap: 18px;
  padding: 24px 0;
}

.cw-skeleton i {
  background: var(--cw-hover);
  animation: 1.3s ease-in-out infinite alternate cw-pulse;
  border-radius: 8px;
  height: 45px;
}

.cw-skeleton i:first-child {
  width: 45%;
  height: 24px;
}

.cw-skeleton i:last-child {
  width: 72%;
}

@keyframes cw-pulse {
  to {
    opacity: .4;
  }
}

@keyframes cw-spin {
  to {
    transform: rotate(360deg);
  }
}

.cw-spin {
  animation: 1.5s linear infinite cw-spin;
}

.code-workspace .view-files {
  overflow: hidden;
  padding: 0;
}

.cw-files {
  display: block;
}

.cw-files-toolbar {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  align-items:  center;
  gap: 12px;
  min-width: 0;
  padding: 12px 16px;
}

.cw-reference {
  position: relative;
}

.cw-reference > button {
  display: flex;
  align-items:  center;
  gap: 8px;
  max-width: 200px;
}

.cw-reference > button > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.code-workspace .cw-reference-popover {
  position: absolute;
  z-index: 5;
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  border-radius: 12px;
  gap: 12px;
  width: 290px;
  padding: 18px;
  top: 42px;
  left: 0;
  box-shadow: 0 10px 30px #0002;
}

.cw-reference-popover label {
  display: grid;
  gap: 8px;
  font-size: 11px;
}

.code-workspace .cw-reference-popover input {
  width: 100%;
  margin: 0;
}

.cw-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  align-items:  center;
  gap: 4px;
  min-width: 0;
}

.cw-breadcrumb > span {
  display: flex;
  align-items:  center;
  gap: 4px;
}

.cw-breadcrumb svg {
  color: var(--muted);
  width: 12px;
}

.code-workspace .cw-breadcrumb button {
  color: var(--muted);
  white-space: normal;
  overflow-wrap: anywhere;
  background: none;
  border: 0;
  padding: 4px;
  font-size: 11px;
}

.code-workspace .cw-breadcrumb button[aria-current] {
  color: var(--text);
  font-weight: 600;
}

.cw-file-icon {
  color: var(--muted);
  flex-shrink: 0;
  font-size: 16px;
}

.cw-file-icon.folder {
  color: var(--buncss-light, #728bac) var(--buncss-dark, #9cacce);
  fill: var(--buncss-light, #edf1f8) var(--buncss-dark, #2b3344);
}

.cw-file-icon.code {
  color: var(--buncss-light, #4779b3) var(--buncss-dark, #87aee0);
}

.cw-file-icon.json {
  color: var(--buncss-light, #a77e25) var(--buncss-dark, #d9b968);
}

.cw-file-main {
  overflow: hidden;
  min-width: 0;
}

.cw-directory-head {
  display: flex;
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  padding: 20px 24px;
  font-size: 12px;
}

.cw-directory-head span {
  color: var(--muted);
  font-size: 11px;
}

.code-workspace .cw-file-row {
  display: flex;
  border: 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  background: none;
  border-radius: 0;
  align-items:  center;
  gap: 12px;
  width: 100%;
  padding: 13px 24px;
}

.cw-file-row strong, .cw-file-row.parent > span {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
}

.cw-file-row > span:not(:first-child) {
  color: var(--muted);
  font-size: 11px;
}

.cw-file-row > svg:last-child {
  color: var(--muted);
  width: 12px;
}

.cw-source-toolbar {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:  center;
  gap: 12px;
  padding: 12px 18px;
}

.cw-source-toolbar > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 8px;
  min-width: 0;
}

.cw-source-toolbar strong {
  overflow-wrap: anywhere;
  font-size: 12px;
}

.cw-source-toolbar span {
  color: var(--muted);
  font-size: 10px;
}

.cw-source-editor {
  overflow: auto;
  min-height: 380px;
  max-height: 690px;
}

.cw-source-editor .cm-editor {
  min-height: 380px;
}

.cw-source-editor .cm-scroller {
  max-height: 690px;
}

.cw-source-footer {
  display: flex;
  border-top: 1px solid var(--border);
  color: var(--muted);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:  center;
  gap: 10px;
  padding: 12px 18px;
  font-size: 10px;
}

.cw-file-preview {
  overflow: auto;
  min-height: 380px;
  max-height: 690px;
  padding: 20px 32px;
}

.cw-unsaved {
  color: var(--buncss-light, #a56a13) var(--buncss-dark, #ebc579);
  font-size: 10px;
}

.cw-dialog {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: auto;
  border-radius: 16px;
  width: min(560px, 100vw - 32px);
  max-height: 85vh;
  padding: 24px;
  box-shadow: 0 24px 100px #0005;
}

.cw-dialog::backdrop {
  backdrop-filter: blur(4px);
  background: #11182770;
}

.cw-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 16px;
  margin-bottom: 24px;
}

.cw-dialog-head h3 {
  margin: 0;
  font-size: 18px;
}

.cw-dialog form {
  display: grid;
  gap: 18px;
}

.cw-dialog label {
  display: grid;
  gap: 9px;
  font-size: 12px;
}

.cw-dialog input, .cw-dialog textarea {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  border-radius: 8px;
  width: 100%;
  padding: 11px;
}

.cw-dialog button {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
}

.cw-dialog-actions {
  justify-content: flex-end;
  margin-top: 8px;
}

.cw-proposal-file {
  display: flex;
  background: var(--cw-hover);
  border-radius: 8px;
  flex-wrap: wrap;
  align-items:  center;
  gap: 10px;
  padding: 14px;
  font-size: 12px;
}

.cw-proposal-file > span {
  display: flex;
  color: var(--muted);
  align-items:  center;
  gap: 6px;
  margin-left: auto;
}

.cw-back {
  display: flex;
  align-items:  center;
  gap: 8px;
}

@media (max-width: 900px) {
  .cw-overview-stats {
    grid-template-columns: 1fr;
  }

  .cw-source-toolbar > div:first-child > span {
    display: none;
  }

  .cw-release {
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 20px;
  }
}

@media (max-width: 650px) {
  .app .code-workspace .repo-heading, .code-workspace .repo-content {
    padding: 16px;
  }

  .code-workspace .view-files {
    padding: 0;
  }

  .cw-files-toolbar {
    gap: 7px;
    padding: 10px;
  }

  .cw-breadcrumb {
    flex-basis: 100%;
  }

  .cw-page-head {
    flex-direction: column;
    align-items:  flex-start;
  }

  .cw-filterbar {
    flex-wrap: wrap;
    gap: 10px;
  }

  .code-workspace .cw-search {
    width: 100%;
  }

  .cw-release {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cw-release-meta {
    flex-flow: wrap;
    align-items:  center;
  }

  .cw-source-toolbar {
    padding: 10px;
  }

  .cw-file-preview {
    padding: 16px;
  }

  .code-workspace .repo-row {
    padding: 14px 10px;
  }

  .code-workspace .repo-row .cw-avatar {
    display: none;
  }

  .code-workspace .repo-upstream .repo-notes {
    padding: 16px;
  }

  .cw-environments {
    grid-template-columns: 1fr;
  }

  .code-workspace .cw-table {
    min-width: 540px;
  }

  .view-upstream {
    overflow: auto;
  }

  .cw-source-editor .cm-scroller {
    max-height: 540px;
  }

  .cw-file-row {
    padding: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cw-skeleton i, .cw-spin {
    animation: none;
  }
}

.cw-build-meta {
  display: flex;
  color: var(--muted);
  flex-wrap: wrap;
  align-items:  center;
  gap: 20px;
  margin: 20px 0 28px;
  font-size: 11px;
}

.cw-build-meta > span {
  display: flex;
  align-items:  center;
  gap: 7px;
}

.cw-build-console {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  border: 1px solid var(--border);
  overflow: hidden;
  border-radius: 12px;
  min-height: 340px;
}

.cw-build-console > .cw-job-list {
  border-right: 1px solid var(--border);
  background: var(--cw-hover);
  padding: 16px 10px;
}

.cw-build-console > .cw-job-list > strong {
  display: block;
  color: var(--muted);
  padding: 2px 10px 18px;
  font-size: 11px;
}

.code-workspace .cw-build-console > .cw-job-list > button {
  display: flex;
  white-space: normal;
  text-align: left;
  background: none;
  border: 0;
  align-items:  center;
  gap: 10px;
  width: 100%;
  padding: 12px 10px;
}

.cw-build-console > .cw-job-list > button > span:nth-child(2) {
  flex: 1;
  font-size: 12px;
}

.cw-build-console > .cw-job-list > button > small {
  color: var(--muted);
  font-size: 10px;
}

.code-workspace .cw-build-console > .cw-job-list > button[aria-current] {
  background: var(--surface);
}

.cw-job {
  min-width: 0;
  padding: 20px;
}

.cw-job-head {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 10px;
  margin-bottom: 20px;
}

.cw-job-head h4 {
  font-size: 14px;
  margin: 0 !important;
}

.cw-job-head button {
  display: flex;
  align-items:  center;
  gap: 7px;
}

.cw-job-step {
  display: flex;
  border-bottom: 1px solid var(--border);
  align-items:  center;
  gap: 10px;
  padding: 13px 0;
  font-size: 12px;
}

.cw-job-step > span:nth-child(2) {
  flex: 1;
}

.cw-job-step small {
  color: var(--muted);
  font-size: 10px;
}

.code-workspace .cw-diff summary {
  display: flex;
  list-style: disclosure-closed;
  align-items:  center;
  gap: 10px;
}

.cw-diff summary strong {
  overflow-wrap: anywhere;
  flex: 1;
  font-family: monospace;
  font-size: 11px;
}

.cw-added {
  color: var(--buncss-light, #228160) var(--buncss-dark, #78ccaa);
}

.cw-deleted {
  color: var(--buncss-light, #c24455) var(--buncss-dark, #f18e9e);
}

.code-workspace .cw-diff-scroll {
  overflow: auto;
  margin: 0;
}

.code-workspace .cw-diff table {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
  font-family: monospace;
  font-size: 11px;
}

.code-workspace .cw-diff td {
  white-space: pre;
  border: 0;
  padding: 0;
  line-height: 1.8;
}

.code-workspace .cw-diff td:nth-child(-n+2) {
  user-select: none;
  text-align: right;
  border-right: 1px solid var(--border);
  width: 42px;
  min-width: 42px;
}

.code-workspace .cw-diff td:nth-child(3) {
  padding: 0 14px;
}

.code-workspace .cw-diff td button {
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 0;
  width: 100%;
  padding: 1px 8px;
  font-family: monospace;
  font-size: 10px;
}

.code-workspace .cw-diff td button:hover:not(:disabled) {
  background: var(--cw-selection);
  color: var(--accent-text);
}

.cw-diff-addition {
  background: var(--buncss-light, #e9f6ee) var(--buncss-dark, #192f28);
}

.cw-diff-deletion {
  background: var(--buncss-light, #fceef0) var(--buncss-dark, #36242b);
}

.cw-diff-header {
  background: var(--cw-hover);
  color: var(--muted);
}

.code-workspace .cw-action-launch {
  margin: 0 0 16px;
}

.cw-dialog > input, .cw-dialog > textarea {
  margin-bottom: 16px;
}

.cw-dialog > textarea {
  min-height: 140px;
}

.cw-dialog select {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  max-width: 100%;
  padding: 10px;
}

.cw-dialog .repo-actions {
  margin-top: 20px;
}

.cw-dialog p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

@media (max-width: 700px) {
  .cw-build-console {
    grid-template-columns: 1fr;
  }

  .cw-build-console > .cw-job-list {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .cw-job {
    padding: 16px;
  }
}

.cw-file-main {
  overflow: auto;
  max-height: 820px;
}

.repo-heading .repo-actions label {
  white-space: nowrap;
}

.cw-directory-list {
  min-height: 320px;
}

.cw-upstream-heading {
  margin: 16px 0 28px;
}

.cw-upstream-heading h2 {
  letter-spacing: -.4px;
  max-width: 850px;
  margin: 14px 0;
  font-size: 24px;
  line-height: 1.35;
}

.cw-upstream-heading > span:last-child {
  color: var(--muted);
  font-size: 11px;
}

.cw-upstream-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items:  start;
  gap: 24px;
}

.cw-context {
  border: 1px solid var(--border);
  overflow: hidden;
  border-radius: 12px;
}

.cw-context-head {
  display: flex;
  background: var(--cw-hover);
  align-items:  center;
  gap: 10px;
  padding: 14px 20px;
  font-size: 12px;
}

.cw-context-head strong {
  flex: 1;
}

.code-workspace .cw-context-head button {
  padding: 6px 10px;
  font-size: 11px;
}

.cw-context > .repo-notes {
  padding: 8px 22px 24px;
}

.cw-evidence {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.cw-evidence > section {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}

.cw-evidence h3, .cw-verification h3 {
  display: flex;
  align-items:  center;
  gap: 7px;
  margin: 0 0 14px;
  font-size: 13px;
}

.cw-evidence h4 {
  color: var(--muted);
  margin-top: 22px;
  font-size: 11px;
}

.cw-evidence p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
}

.cw-evidence button {
  display: flex;
  justify-content: center;
  align-items:  center;
  gap: 7px;
  width: 100%;
  margin-top: 10px;
}

.cw-evidence-item {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-direction: column;
  gap: 8px;
  padding: 14px 0;
  font-size: 11px;
  line-height: 1.6;
}

.cw-evidence-item:last-child {
  border: 0;
  padding-bottom: 0;
}

.cw-evidence-item strong {
  overflow-wrap: anywhere;
  font-weight: 500;
}

.cw-evidence-item strong svg {
  display: inline;
  width: 11px;
  margin-left: 6px;
}

.cw-evidence-item small {
  color: var(--muted);
  font-size: 10px;
}

.cw-verification {
  background: var(--cw-hover);
  border-radius: 12px;
  margin-top: 20px;
  padding: 22px;
  font-size: 12px;
  line-height: 1.8;
}

.cw-verification dl {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.cw-verification dt {
  color: var(--muted);
  text-transform: capitalize;
  font-size: 10px;
}

.cw-verification dd {
  overflow-wrap: anywhere;
  margin: 0;
  font-family: monospace;
  font-size: 11px;
}

.cw-evidence .cw-action-launch {
  margin-bottom: 0;
}

@media (max-width: 1100px) {
  .cw-upstream-columns {
    grid-template-columns: 1fr;
  }

  .cw-evidence {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

@media (max-width: 650px) {
  .cw-upstream-heading h2 {
    font-size: 20px;
  }

  .cw-context-head {
    flex-wrap: wrap;
    padding: 14px;
  }

  .cw-context > .repo-notes {
    padding: 6px 16px 18px;
  }

  .cw-evidence {
    grid-template-columns: 1fr;
  }
}

.code-workspace .cw-view-all {
  display: flex;
  color: var(--accent-text);
  background: none;
  border: 0;
  align-items:  center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 0;
}

.code-workspace .cw-file-row {
  min-height: 0;
}

.code-workspace .repo-row {
  white-space: normal;
}

.cw-dialog textarea {
  min-height: 120px;
}

.cw-job {
  overflow: auto;
  max-height: 690px;
}

.cw-job-head {
  position: sticky;
  background: var(--surface);
  z-index: 1;
  padding: 12px 0;
  top: -20px;
}

.cw-modal-error {
  background: var(--buncss-light, #fff0f2) var(--buncss-dark, #36242b);
  border: 1px solid var(--buncss-light, #e6b4bb) var(--buncss-dark, #71414a);
  border-radius: 8px;
  padding: 12px;
  color: var(--buncss-light, #a72b40) var(--buncss-dark, #f3a4b1) !important;
}

.repo-notes p, .repo-notes li {
  color: var(--text);
}

@media (max-width: 650px) {
  .cw-job {
    max-height: 560px;
  }
}

.cw-comment-compose {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 24px 0;
  padding: 18px;
}

.code-workspace .cw-comment-compose textarea {
  background: var(--cw-hover);
  margin: 0 0 14px;
}

.cw-detail-tabs ~ section > p {
  display: flex;
  border-bottom: 1px solid var(--border);
  align-items:  center;
  gap: 16px;
  padding: 14px 0;
  font-size: 12px;
}

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

.repo-comment > small {
  display: block;
  color: var(--muted);
  margin-top: 6px;
  font-size: 11px;
}

.repo-comment > .repo-prose {
  margin-top: 14px;
}

.cw-branch-menu {
  position: absolute;
  z-index: 12;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 320px;
  max-width: calc(100vw - 70px);
  padding: 14px;
  top: calc(100% + 8px);
  left: 0;
  box-shadow: 0 12px 35px #0002;
}

.cw-branch-menu > strong {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
}

.code-workspace .cw-branch-menu .cw-search {
  width: 100%;
  margin-bottom: 10px;
}

.cw-branch-list {
  overflow: auto;
  max-height: 280px;
}

.code-workspace .cw-branch-list > button {
  display: flex;
  text-align: left;
  background: none;
  border: 0;
  align-items:  center;
  gap: 9px;
  width: 100%;
  padding: 10px 8px;
}

.cw-branch-list > button > span {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.cw-branch-list small {
  color: var(--muted);
  font-size: 10px;
}

.cw-branch-menu p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.cw-dependency-controls {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 14px;
  margin-bottom: 20px;
}

.cw-update-filter {
  display: flex;
  color: var(--muted);
  align-items:  center;
  gap: 7px;
  font-size: 11px;
}

.cw-update-filter input {
  accent-color: var(--accent-text);
  width: 14px;
  height: 14px;
  padding: 0;
}

.cw-bulk-upgrade {
  display: flex;
  align-items:  center;
  gap: 8px;
  margin-left: auto;
}

.cw-bulk-upgrade button {
  display: flex;
  align-items:  center;
  gap: 7px;
}

.code-workspace .cw-bulk-upgrade select {
  font-size: 11px;
}

.cw-dependencies-table td:first-child {
  width: 34%;
}

.cw-dependencies-table td:not(:first-child) {
  width: 22%;
}

.cw-dependencies-table code {
  white-space: nowrap;
}

.cw-dependencies-table small {
  font-size: 10px !important;
}

.code-workspace .cw-upgrade-version {
  display: inline-flex;
  color: var(--accent-text);
  background: none;
  border: 0;
  align-items:  center;
  gap: 6px;
  padding: 5px 0;
}

.code-workspace .cw-upgrade-version:disabled {
  color: var(--text);
  opacity: 1;
  cursor: default;
}

.cw-warning {
  color: var(--buncss-light, #a26813) var(--buncss-dark, #e9c37c) !important;
}

.cw-upgrade-layout {
  display: grid;
  grid-template-columns: 255px minmax(0, 1fr);
  gap: 24px;
  margin-top: 24px;
}

.cw-upgrade-selection {
  border: 1px solid var(--border);
  overflow: auto;
  border-radius: 12px;
  align-self:  start;
  max-height: 700px;
}

.cw-upgrade-selection > strong {
  display: block;
  color: var(--muted);
  padding: 16px;
  font-size: 11px;
}

.code-workspace .cw-upgrade-selection > button {
  display: flex;
  border: 0;
  border-top: 1px solid var(--border);
  text-align: left;
  white-space: normal;
  background: none;
  border-radius: 0;
  align-items:  center;
  gap: 10px;
  width: 100%;
  padding: 14px;
}

.cw-upgrade-selection button > span {
  flex: 1;
  min-width: 0;
}

.cw-upgrade-selection button strong {
  overflow-wrap: anywhere;
  display: block;
  font-size: 11px;
}

.cw-upgrade-selection small {
  color: var(--muted);
  display: block;
  overflow-wrap: anywhere;
  margin-top: 7px;
  font-size: 10px;
}

.code-workspace .cw-upgrade-selection > button[aria-current] {
  background: var(--cw-selection);
}

.cw-upgrade-review {
  min-width: 0;
}

.cw-upgrade-title {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 10px;
}

.cw-upgrade-title h3 {
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 19px;
}

.cw-upgrade-title > span {
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 9px;
  font-size: 10px;
}

.cw-version-transition {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 12px;
  margin: 20px 0;
}

.cw-version-transition code {
  font-size: 13px;
}

.cw-upgrade-kind {
  color: var(--muted);
  background: var(--cw-hover);
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 10px;
}

.cw-upgrade-kind.major, .cw-upgrade-kind.prerelease {
  color: var(--buncss-light, #a26813) var(--buncss-dark, #e9c37c);
}

.cw-upgrade-risk {
  display: flex;
  background: var(--cw-hover);
  border-radius: 10px;
  gap: 12px;
  padding: 16px;
  font-size: 12px;
  line-height: 1.7;
}

.cw-upgrade-risk > svg {
  color: var(--buncss-light, #a26813) var(--buncss-dark, #e9c37c);
  flex-shrink: 0;
  margin-top: 3px;
}

.cw-upgrade-risk p {
  color: var(--muted);
  margin: 5px 0 0;
  font-size: 11px;
}

.cw-compatibility {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 20px;
  margin: 26px 0;
}

.cw-compatibility h4, .cw-release-evidence h4 {
  margin: 0 0 12px;
  font-size: 13px;
}

.cw-compatibility section > p {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 10px;
  font-size: 11px;
}

.cw-peer {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  align-items:  center;
  gap: 8px;
  padding: 10px 0;
  font-size: 11px;
}

.cw-peer small {
  color: var(--muted);
  flex-basis: 100%;
  line-height: 1.7;
}

.cw-release-evidence > small {
  color: var(--muted);
  font-size: 10px;
}

.cw-published-change {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 14px 0;
  padding: 18px;
  font-size: 12px;
  line-height: 1.8;
}

.cw-published-change > div:first-child {
  display: flex;
  color: var(--muted);
  align-items:  center;
  gap: 10px;
  margin-bottom: 9px;
  font-size: 10px;
}

.cw-published-change.disruptive {
  border-left: 3px solid var(--buncss-light, #bb7530) var(--buncss-dark, #c99f60);
}

.cw-published-change p {
  color: var(--muted);
  font-size: 12px;
}

.cw-migration {
  background: var(--cw-hover);
  border-radius: 8px;
  margin-top: 14px;
  padding: 12px;
}

.cw-migration code {
  overflow-wrap: anywhere;
  font-size: 11px;
}

.cw-upgrade-footer {
  display: flex;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:  center;
  gap: 18px;
  margin-top: 28px;
  padding: 20px 0 0;
}

.cw-upgrade-footer strong {
  font-size: 12px;
}

.cw-upgrade-footer small {
  display: block;
  color: var(--muted);
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.7;
}

.cw-upgrade-footer button, .cw-upgrade-review > button {
  display: flex;
  align-items:  center;
  gap: 8px;
}

.cw-dependency-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:  center;
  gap: 20px;
  margin-top: 14px;
}

.cw-dependency-bottom p {
  flex: 1;
  min-width: 220px;
}

.cw-upgrade-warning {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  font-size: 12px;
  line-height: 1.7;
}

.cw-actions > .cw-reference .cw-branch-menu {
  left: auto;
  right: 0;
}

@media (max-width: 1000px) {
  .cw-upgrade-layout {
    grid-template-columns: 1fr;
  }

  .cw-upgrade-selection {
    max-height: 230px;
  }

  .cw-compatibility {
    grid-template-columns: 1fr;
  }

  .cw-bulk-upgrade {
    margin-left: 0;
  }
}

@media (max-width: 650px) {
  .cw-bulk-upgrade {
    flex-wrap: wrap;
    width: 100%;
  }

  .cw-bulk-upgrade select {
    flex: 1;
    min-width: 0;
  }

  .cw-dependencies-table {
    min-width: 720px !important;
  }

  .cw-version-transition code {
    font-size: 11px;
  }

  .cw-upgrade-title h3 {
    font-size: 16px;
  }
}

.cw-dependency-table-scroll {
  overflow: auto;
  max-height: 650px;
}

.cw-dependencies-table thead th {
  position: sticky;
  z-index: 1;
  top: 0;
}

.cw-upgrade-layout.single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 900px;
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.cw-upgrade-review {
  overflow: auto;
  max-height: 690px;
  padding-right: 6px;
}

.cw-published-change > strong {
  font-weight: 500;
}

.cw-back {
  margin-bottom: 18px;
}

.cw-branch-list > button[aria-pressed="true"] {
  background: var(--cw-selection);
}

@media (max-width: 650px) {
  .cw-upgrade-review {
    max-height: 620px;
  }

  .cw-dependency-table-scroll {
    max-height: 560px;
  }
}

.cw-activity-freshness {
  display: flex;
  color: var(--muted);
  text-align: center;
  flex-wrap: wrap;
  justify-content: center;
  align-items:  center;
  gap: 12px;
  margin: 16px 0;
  font-size: 11px;
}

.cw-clickable {
  cursor: pointer;
}

.cw-clickable:hover {
  background: var(--surface-muted);
  outline: 2px solid var(--border);
  outline-offset: -2px;
}

.cw-clickable:focus-visible {
  background: var(--surface-muted);
  outline: 2px solid var(--border);
  outline-offset: -2px;
}

.cw-deploy-summary {
  border: 1px solid var(--border);
  overflow: hidden;
  border-radius: 14px;
  margin: 24px 0;
}

.cw-deploy-outcome {
  display: flex;
  background: var(--surface-muted);
  align-items:  flex-start;
  gap: 16px;
  padding: 22px;
}

.cw-deploy-outcome > svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.cw-deploy-outcome p {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
}

.cw-deploy-outcome.is-failed {
  background: var(--buncss-light, #fff3f2) var(--buncss-dark, #302026);
}

.cw-deploy-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 22px;
}

.cw-deploy-facts dt {
  display: flex;
  color: var(--muted);
  align-items:  center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 11px;
}

.cw-deploy-facts dd {
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 13px;
}

.cw-deploy-section {
  margin-top: 32px;
}

.cw-deploy-section-head {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 12px;
  margin-bottom: 18px;
}

.cw-deploy-section-head h3 {
  margin: 0;
  font-size: 15px;
}

.cw-deploy-section-head a {
  font-size: 12px;
}

.cw-deploy-timeline {
  list-style: none;
  border-left: 2px solid var(--border);
  margin: 0;
  padding: 0 0 0 16px;
}

.cw-deploy-timeline li {
  position: relative;
  padding: 0 0 24px 12px;
}

.cw-deploy-timeline li:before {
  content: "";
  position: absolute;
  background: var(--muted);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  top: 6px;
  left: -21px;
}

.cw-deploy-timeline li > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.cw-deploy-timeline time, .cw-deploy-timeline small {
  color: var(--muted);
  font-size: 11px;
}

.cw-deploy-timeline p {
  margin: 8px 0;
  font-size: 13px;
  line-height: 1.6;
}

.cw-deploy-failures {
  background: var(--buncss-light, #fff8f7) var(--buncss-dark, #251c22);
  border: 1px solid var(--buncss-light, #edc7c3) var(--buncss-dark, #60353b);
  border-radius: 14px;
  padding: 20px;
}

.cw-deploy-failures h3 {
  display: flex;
  align-items:  center;
  gap: 8px;
  margin: 0 0 18px;
  font-size: 15px;
}

.cw-deploy-failures strong {
  margin-right: 12px;
  font-size: 13px;
}

.cw-deploy-failures p {
  font-size: 12px;
  line-height: 1.6;
}

.code-workspace .cw-related-run {
  display: flex;
  text-align: left;
  flex-wrap: wrap;
  align-items:  center;
  gap: 12px;
  width: 100%;
  margin: 8px 0;
  padding: 16px;
}

.cw-related-run > span:last-child {
  color: var(--muted);
  margin-left: auto;
  font-size: 11px;
}

@media (max-width: 650px) {
  .cw-deploy-facts {
    grid-template-columns: 1fr;
  }

  .cw-deploy-section-head {
    flex-direction: column;
    align-items:  flex-start;
  }
}

.cw-log-evidence {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 12px 0 20px;
  padding: 16px;
}

.cw-log-evidence h4 {
  margin: 0 0 14px;
}

.cw-log-evidence small {
  color: var(--muted);
  font-size: 10px;
}

.cw-log-evidence pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--page);
  border-radius: 6px;
  padding: 12px;
  font-size: 11px;
  line-height: 1.6;
}

.code-workspace .cw-deployments-table th:nth-child(3), .code-workspace .cw-deployments-table td:nth-child(3) {
  text-align: center;
  vertical-align: middle;
}

.code-workspace .cw-deployments-table td > .cw-status {
  display: flex;
  justify-content: center;
}

.cw-actions .cw-action-launch {
  margin: 0;
}

.cw-upstream-notifications {
  color: var(--muted);
}

.cw-upstream-notifications[aria-pressed="true"] {
  color: var(--text);
}

.cw-issue-detail {
  min-width: 0;
}

.cw-issue-heading {
  padding: 22px 0;
}

.cw-issue-meta {
  display: flex;
  color: var(--muted);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:  center;
  gap: 12px;
  font-size: 11px;
}

.cw-issue-heading h2 {
  letter-spacing: -.4px;
  overflow-wrap: anywhere;
  max-width: 850px;
  margin: 14px 0 0;
  font-size: 23px;
  line-height: 1.4;
}

.cw-issue-packages {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.cw-issue-packages a {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  align-items:  center;
  gap: 6px;
  padding: 5px 9px;
  font-size: 11px;
}

.cw-issue-packages svg {
  width: 12px;
  height: 12px;
}

.cw-issue-next {
  display: flex;
  background: var(--cw-hover);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-text);
  border-radius: 9px;
  align-items:  center;
  gap: 14px;
  margin-bottom: 22px;
  padding: 18px;
}

.cw-issue-next > svg {
  color: var(--accent-text);
  flex: none;
  width: 20px;
}

.cw-issue-next > div {
  flex: 1;
  min-width: 0;
}

.cw-issue-next strong {
  font-size: 13px;
}

.cw-issue-next p {
  color: var(--muted);
  max-width: 70ch;
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.65;
}

.cw-issue-next button {
  flex: none;
}

.cw-issue-nav {
  display: flex;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  gap: 6px;
}

.code-workspace .cw-issue-nav button {
  white-space: nowrap;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 2px solid #0000;
  border-radius: 0;
  padding: 12px 14px;
}

.code-workspace .cw-issue-nav button[aria-pressed="true"] {
  color: var(--accent-text);
  border-bottom-color: var(--accent-text);
}

.cw-issue-panel {
  min-height: 240px;
  padding: 24px 0;
}

.cw-issue-section {
  margin: 0 0 24px;
  font-size: 13px;
  line-height: 1.8;
}

.cw-issue-section h3, .cw-issue-section-heading h3 {
  display: flex;
  align-items:  center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
}

.cw-issue-section .repo-notes {
  max-width: 85ch;
}

.cw-issue-section .repo-notes p {
  font-size: 13px;
  line-height: 1.85;
}

.cw-issue-section .repo-notes pre {
  overflow: auto;
  max-height: 300px;
}

.cw-issue-workaround {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
}

.cw-issue-section-heading {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 12px;
  margin: 0 0 16px;
}

.cw-issue-section-heading > span {
  color: var(--muted);
  font-size: 12px;
}

.cw-issue-section-heading .cw-action-launch {
  margin: 0;
}

.cw-issue-footer {
  display: flex;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
  padding: 16px 0;
}

.cw-issue-related {
  display: flex;
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  gap: 15px;
  padding: 12px 0;
}

.cw-issue-evidence-list {
  display: grid;
  gap: 10px;
  margin-bottom: 28px;
}

.cw-issue-evidence-list > a {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 9px;
  align-items:  center;
  gap: 14px;
  padding: 16px;
}

.cw-issue-evidence-list > a > div {
  flex: 1;
  min-width: 0;
}

.cw-issue-evidence-list strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.6;
}

.cw-issue-evidence-list small {
  display: block;
  color: var(--muted);
  overflow-wrap: anywhere;
  margin-top: 5px;
  font-size: 11px;
}

.cw-issue-evidence-list > a > svg {
  flex: none;
  width: 14px;
}

.cw-issue-release, .cw-issue-source-section {
  border: 1px solid var(--border);
  overflow: hidden;
  border-radius: 9px;
  margin: 10px 0;
}

.cw-issue-release > summary, .cw-issue-source-section > summary {
  cursor: pointer;
  padding: 15px 18px;
  font-size: 13px;
  line-height: 1.6;
}

.cw-issue-release summary > * {
  margin-right: 12px;
}

.cw-issue-release summary small {
  color: var(--muted);
  font-size: 11px;
}

.cw-issue-release > div, .cw-issue-source-section > .repo-notes {
  overflow-wrap: anywhere;
  padding: 4px 20px 20px;
  font-size: 12px;
}

.cw-issue-source-section[open] > summary {
  border-bottom: 1px solid var(--border);
  background: var(--cw-hover);
  margin-bottom: 12px;
}

.cw-issue-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--cw-hover);
  border-radius: 8px;
  gap: 14px;
  padding: 16px;
}

.cw-issue-facts dt {
  color: var(--muted);
  text-transform: capitalize;
  font-size: 11px;
}

.cw-issue-facts dd {
  overflow-wrap: anywhere;
  margin: 5px 0 0;
  font-family: monospace;
  font-size: 12px;
}

.cw-issue-empty {
  text-align: center;
  color: var(--muted);
  padding: 35px 20px;
  font-size: 13px;
}

.cw-issue-empty > svg {
  width: 28px;
  height: 28px;
  margin: auto;
}

.cw-issue-empty p {
  max-width: 50ch;
  margin: 10px auto;
  line-height: 1.8;
}

@media (max-width: 700px) {
  .cw-issue-heading h2 {
    font-size: 20px;
  }

  .cw-issue-next {
    flex-wrap: wrap;
  }

  .cw-issue-next > div {
    flex-basis: calc(100% - 40px);
  }

  .cw-issue-next > button {
    margin-left: 34px;
  }

  .cw-issue-evidence-list > a {
    flex-wrap: wrap;
  }

  .cw-issue-evidence-list > a > div {
    flex-basis: 100%;
  }

  .cw-issue-facts {
    grid-template-columns: 1fr;
  }

  .cw-issue-section-heading {
    flex-wrap: wrap;
  }

  .cw-issue-workaround {
    padding: 15px;
  }
}

.cw-issue-detail .cw-issue-heading {
  display: block;
  background: none;
  border: 0;
}

.cw-issue-heading h2 code {
  overflow-wrap: anywhere;
  font-size: .9em;
}

.cw-issue-footer button {
  display: inline-flex;
  align-items:  center;
  gap: 7px;
}

.cw-issue-detail .cw-issue-heading {
  color: var(--text);
  height: auto;
}

.cw-issue-detail .repo-notes p {
  white-space: normal;
}

.company-links .company-site-link.is-production {
  border-color: var(--buncss-light, #b9d8cc) var(--buncss-dark, #34574a);
}

.company-links .company-site-link.is-production > svg:first-child {
  color: var(--buncss-light, #267455) var(--buncss-dark, #83c9ab);
}

.company-head .company-facts {
  margin: 16px 0 0;
}

.co-overview {
  min-width: 0;
}

.co-overview button {
  font: inherit;
  color: var(--text);
  cursor: pointer;
}

.co-overview button:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

.co-pulse {
  display: flex;
  align-items:  center;
  gap: 14px;
  margin: 0 0 28px;
}

.co-pulse-icon {
  display: grid;
  background: var(--surface-muted);
  color: var(--muted);
  border-radius: 12px;
  flex: none;
  place-items:  center;
  width: 42px;
  height: 42px;
}

.co-pulse-icon.needs-attention {
  color: var(--buncss-light, #9e5316) var(--buncss-dark, #edb275);
  background: var(--buncss-light, #fff5e8) var(--buncss-dark, #342a20);
}

.co-pulse h3 {
  letter-spacing: -.02em;
  margin: 0;
  font-size: 18px;
}

.co-pulse p {
  color: var(--muted);
  margin: 6px 0 0;
  font-size: 12px;
}

.co-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(270px, 1fr);
  align-items:  start;
  gap: 32px;
}

.co-primary, .co-secondary {
  min-width: 0;
}

.co-section {
  margin-bottom: 30px;
}

.co-heading {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 12px;
  min-height: 26px;
  margin-bottom: 12px;
}

.co-heading h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.co-overview .co-heading button, .co-overview .co-text-button {
  display: inline-flex;
  color: var(--muted);
  background: none;
  border: 0;
  align-items:  center;
  gap: 6px;
  padding: 4px 0;
  font-size: 11px;
}

.co-overview svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.co-overview .co-work-row, .co-overview .co-action-row, .co-overview .co-deployment {
  display: flex;
  border: 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  background: none;
  border-radius: 0;
  align-items:  center;
  gap: 12px;
  width: 100%;
  padding: 15px 0;
}

.co-work-row:hover, .co-action-row:hover, .co-deployment:hover {
  background: var(--surface-muted) !important;
}

.co-work-row > span:nth-child(2), .co-action-row > span, .co-deployment > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.co-work-row strong, .co-action-row strong, .co-deployment strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
}

.co-work-row small, .co-action-row small, .co-deployment small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.6;
}

.co-overview .co-work-state {
  color: var(--muted);
  text-align: right;
  flex: none;
  max-width: 70px;
  font-size: 10px;
}

.co-task-marker {
  background: var(--muted);
  border-radius: 50%;
  flex: none;
  width: 7px;
  height: 7px;
}

.co-task-marker.urgent {
  background: var(--buncss-light, #a65319) var(--buncss-dark, #efb477);
}

.co-work-row > svg:last-child, .co-action-row > svg:last-child, .co-deployment > svg:last-child {
  color: var(--muted);
  width: 13px;
}

.co-action-row > svg:first-child {
  color: var(--muted);
}

.co-empty {
  display: flex;
  border-top: 1px solid var(--border);
  align-items:  center;
  gap: 12px;
  padding: 22px 0;
}

.co-empty > svg {
  color: var(--muted);
}

.co-empty > div {
  flex: 1;
}

.co-empty strong {
  font-size: 12px;
  font-weight: 500;
}

.co-empty p, .co-muted {
  color: var(--muted);
  margin: 5px 0;
  font-size: 11px;
  line-height: 1.7;
}

.co-empty button {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 11px;
}

.co-repo + .co-repo {
  margin-top: 22px;
}

.co-repo-label {
  color: var(--muted);
  overflow-wrap: anywhere;
  margin-bottom: 3px;
  font-size: 10px;
}

.co-deployment > svg:first-child {
  color: var(--muted);
}

.co-deployment .cw-status {
  flex: none;
}

.co-spending {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}

.co-amount {
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  margin: 18px 0 0;
  font-size: 30px;
  font-weight: 600;
}

.co-currency + .co-currency {
  border-top: 1px solid var(--border);
  margin-top: 18px;
  padding-top: 18px;
}

.co-comparison {
  display: grid;
  grid-template-columns: 1fr auto;
  color: var(--muted);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  gap: 5px 12px;
  margin: 18px 0;
  padding: 12px 0;
  font-size: 10px;
}

.co-comparison strong {
  color: var(--text);
  font-weight: 500;
}

.co-comparison small {
  grid-column: 1 / -1;
  font-size: 10px;
  line-height: 1.6;
}

.co-comparison .co-increase {
  color: var(--buncss-light, #96551d) var(--buncss-dark, #e8b078);
  margin-top: 5px;
}

.co-providers {
  margin-top: 20px;
}

.co-provider {
  display: flex;
  align-items:  center;
  gap: 10px;
  margin-top: 16px;
}

.co-provider .spend-brand-logo {
  flex: none;
  width: 24px;
  height: 24px;
}

.co-provider > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.co-provider strong {
  display: block;
  font-size: 11px;
  font-weight: 500;
}

.co-provider small {
  color: var(--muted);
  display: block;
  margin-top: 3px;
  font-size: 9px;
  line-height: 1.6;
}

.co-provider b {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
}

.co-error {
  color: var(--accent-text);
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.7;
}

.co-overview button.co-error {
  text-align: left;
  background: none;
  border: 0;
  padding: 8px 0;
}

@media (max-width: 1100px) {
  .co-columns {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 650px) {
  .co-secondary {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .co-pulse h3 {
    font-size: 16px;
  }

  .co-work-row, .co-action-row {
    gap: 8px !important;
  }

  .co-empty {
    flex-wrap: wrap;
  }

  .co-empty > div {
    min-width: 65%;
  }

  .co-spending {
    padding: 18px;
  }
}

.files-links.company-resources {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.resources-empty {
  display: flex;
  text-align: center;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  flex-direction: column;
  align-items:  center;
  padding: 56px 24px;
}

.resources-empty-symbol {
  display: grid;
  border: 1px solid var(--border);
  background: var(--surface-muted);
  color: var(--muted);
  border-radius: 18px;
  place-items:  center;
  width: 62px;
  height: 62px;
  margin-bottom: 22px;
}

.resources-empty-symbol svg {
  width: 28px;
  height: 28px;
}

.resources-empty h3 {
  letter-spacing: -.025em;
  margin: 0;
  font-size: 19px;
  font-weight: 600;
}

.resources-empty > p {
  color: var(--muted);
  max-width: 390px;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.8;
}

.resources-empty-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 610px;
  margin: 28px 0 18px;
}

.resources-empty-actions button {
  display: flex;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  border-radius: 10px;
  align-items:  center;
  gap: 14px;
  padding: 20px 16px;
}

.resources-empty-actions button:hover:not(:disabled) {
  background: var(--surface-muted);
  border-color: var(--border-hover);
}

.resources-empty-actions button:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

.resources-empty-actions button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.resources-empty-actions button > svg {
  color: var(--muted);
  flex: none;
  width: 20px;
  height: 20px;
}

.resources-empty-actions button > svg:last-child {
  width: 14px;
  height: 14px;
  margin-left: auto;
}

.resources-empty-actions strong {
  display: block;
  font-size: 13px;
  font-weight: 550;
}

.resources-empty-actions small {
  display: block;
  color: var(--muted);
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.6;
}

.resources-empty-hint {
  color: var(--muted);
  margin-top: 12px;
  font-size: 11px;
  line-height: 1.7;
}

@media (max-width: 700px) {
  .resources-empty {
    padding: 32px 18px;
  }

  .resources-empty-actions {
    grid-template-columns: 1fr;
    max-width: 380px;
  }
}

.ca-feed {
  min-width: 0;
}

.ca-toolbar {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: 24px;
  margin-bottom: 22px;
}

.ca-toolbar h3 {
  letter-spacing: -.02em;
  margin: 0;
  font-size: 18px;
}

.ca-toolbar p {
  color: var(--muted);
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.7;
}

.ca-search {
  display: flex;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  align-items:  center;
  gap: 9px;
  max-width: 230px;
  padding: 0 10px;
}

.ca-search svg {
  color: var(--muted);
  flex: none;
  width: 15px;
  height: 15px;
}

.ca-search input {
  color: var(--text);
  font: inherit;
  background: none;
  border: 0;
  width: 100%;
  min-width: 0;
  height: 36px;
  margin: 0;
  padding: 0;
  font-size: 12px;
}

.ca-filters {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 20px;
}

.ca-filters button, .ca-empty button {
  font: inherit;
  cursor: pointer;
  color: var(--muted);
  background: none;
  border: 1px solid #0000;
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 12px;
}

.ca-filters button {
  display: flex;
  align-items:  center;
  gap: 9px;
}

.ca-filters button[aria-pressed="true"], .ca-empty button {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
}

.ca-filters button span {
  color: var(--muted);
  font-size: 10px;
}

.ca-feed button:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

.ca-feed summary:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

.ca-day {
  margin-top: 26px;
}

.ca-day h4 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 550;
}

.ca-day ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ca-day li {
  display: flex;
  position: relative;
  align-items:  start;
  gap: 14px;
  padding: 0 0 18px;
}

.ca-day li:not(:last-child):before {
  content: "";
  position: absolute;
  background: var(--border);
  width: 1px;
  top: 38px;
  bottom: 0;
  left: 17px;
}

.ca-avatar {
  display: grid;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--surface);
  border-radius: 50%;
  flex: none;
  place-items:  center;
  width: 35px;
  height: 35px;
  margin-top: 8px;
  font-size: 10px;
}

.ca-event {
  border: 1px solid #0000;
  border-radius: 10px;
  flex: 1;
  min-width: 0;
}

.ca-event:hover {
  background: var(--surface);
}

.ca-event[open] {
  background: var(--surface);
  border-color: var(--border);
}

.ca-event summary {
  display: flex;
  list-style: none;
  cursor: pointer;
  align-items:  center;
  gap: 18px;
  padding: 12px 14px;
}

.ca-event summary::-webkit-details-marker {
  display: none;
}

.ca-event-copy {
  flex: 1;
  min-width: 0;
}

.ca-event-title {
  display: block;
  color: var(--muted);
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.7;
}

.ca-event-title strong {
  color: var(--text);
  font-weight: 550;
}

.ca-event-meta {
  display: flex;
  color: var(--muted);
  align-items:  center;
  gap: 12px;
  margin-top: 7px;
  font-size: 10px;
}

.ca-event-meta > span:first-child {
  display: inline-flex;
  flex: none;
  align-items:  center;
  gap: 5px;
}

.ca-event-meta svg {
  width: 12px;
  height: 12px;
}

.ca-field-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ca-event time {
  color: var(--muted);
  flex: none;
  font-size: 10px;
}

.ca-chevron {
  color: var(--muted);
  flex: none;
  width: 14px;
  height: 14px;
}

.ca-event[open] .ca-chevron {
  transform: rotate(90deg);
}

.ca-event-body {
  border-top: 1px solid var(--border);
  margin: 0 14px;
  padding: 16px 0;
}

.ca-diff-heading {
  display: flex;
  color: var(--muted);
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 10px;
}

.ca-diff-heading > span:last-child {
  display: flex;
  align-items:  center;
  gap: 7px;
}

.ca-diff-heading svg {
  width: 12px;
  height: 12px;
}

.ca-event-body dl {
  margin: 0;
}

.ca-change + .ca-change {
  margin-top: 18px;
}

.ca-change dt {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 550;
}

.ca-change dd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr);
  align-items:  start;
  gap: 12px;
  margin: 0;
}

.ca-change dd > div {
  background: var(--surface-muted);
  border-radius: 7px;
  min-width: 0;
  padding: 10px 12px;
}

.ca-change dd > svg {
  color: var(--muted);
  width: 14px;
  height: 14px;
  margin-top: 12px;
}

.ca-change small {
  display: none;
}

.ca-change dd span {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.7;
}

.ca-before {
  color: var(--muted);
}

.ca-after {
  color: var(--text);
  border-left: 2px solid var(--buncss-light, #318064) var(--buncss-dark, #75baa1);
}

.ca-event-body > p, .ca-history-note {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.ca-history-note {
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

.ca-empty {
  text-align: center;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  padding: 56px 24px;
}

.ca-empty > svg {
  color: var(--muted);
  width: 30px;
  height: 30px;
}

.ca-empty h4 {
  margin: 18px 0 10px;
  font-size: 16px;
}

.ca-empty p {
  color: var(--muted);
  max-width: 380px;
  margin: 0 auto 18px;
  font-size: 12px;
  line-height: 1.8;
}

@media (max-width: 700px) {
  .ca-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .ca-search {
    max-width: none;
  }

  .ca-day li {
    gap: 8px;
  }

  .ca-event summary {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 8px;
  }

  .ca-event-copy {
    flex-basis: calc(100% - 30px);
  }

  .ca-event time {
    order: 3;
  }

  .ca-change dd {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .ca-change dd > svg {
    display: none;
  }

  .ca-change small {
    display: block;
    color: var(--muted);
    margin-bottom: 5px;
    font-size: 9px;
  }

  .ca-diff-heading > span:last-child {
    display: none;
  }
}