:root {
  --dna-green: #025122;
  --dna-tan: #bb9b5d;
  --dna-gray: #474747;

  --bg-dark: #0a0a0a;
  --bg-dark-elevated: #111111;
  --bg-dark-panel: #171717;
  --bg-dark-control: rgba(64, 64, 64, 0.3);
  --text-dark: #fafafa;
  --muted-dark: #a1a1aa;
  --border-dark: #2b2b2b;
  --primary-dark: #f5f5f5;
  --primary-dark-soft: #27272a;

  --bg-light: #f4f5f7;
  --bg-light-elevated: #ffffff;
  --bg-light-panel: #ffffff;
  --text-light: #1f2937;
  --muted-light: #6b7280;
  --border-light: #d1d5db;
  --primary-light: #4b5563;
  --primary-light-soft: rgba(75, 85, 99, 0.12);
  --light-warm-border: #d1d5db;
  --light-warm-header: var(--bg-light);
  --light-warm-header-text: #4b5563;
  --light-warm-avatar: #f3f4f6;
  --light-warm-avatar-text: #374151;
  --light-nav-strong: #374151;
  --light-nav-divider: #9ca3af;
  --danger: #dc2626;
}

.skin-dark {
  --primary-accent: var(--dna-tan);
  --secondary-accent: var(--dna-green);
}

.skin-light {
  --primary-accent: var(--primary-light);
  --secondary-accent: #6b7280;
}

* {
  box-sizing: border-box;
}

turbo-frame {
  display: block;
}

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.skin-dark {
  background: var(--bg-dark);
  color: var(--text-dark);
}

.skin-light {
  background: var(--bg-light);
  color: var(--text-light);
}

.controller-landing {
  background: linear-gradient(135deg, #025122, #0e222c);
  color: #f9faf7;
  min-height: 100vh;
}

.public-landing {
  min-height: calc(100vh - 72px);
}

.public-hero {
  align-items: center;
  display: flex;
  min-height: min(760px, calc(100vh - 72px));
  padding: 64px 24px 42px;
}

.public-hero-inner,
.public-status-inner,
.public-footer {
  margin: 0 auto;
  max-width: 1120px;
  width: 100%;
}

.public-hero-inner {
  display: grid;
  gap: 40px;
}

.public-brand-lockup {
  align-items: center;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.72);
  display: inline-flex;
  justify-content: center;
  min-height: 74px;
  padding: 18px 22px;
  width: min(100%, 440px);
}

.public-brand-image {
  display: block;
  height: auto;
  max-width: 100%;
}

.public-hero-copy {
  display: grid;
  gap: 18px;
  max-width: 760px;
}

.public-kicker {
  color: #d8c28f;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.public-hero h1 {
  color: #ffffff;
  font-size: clamp(48px, 9vw, 104px);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 0.95;
}

.public-intro {
  color: rgba(249, 250, 247, 0.9);
  font-size: 20px;
  line-height: 1.55;
  max-width: 720px;
}

.public-status {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding: 0 24px 48px;
}

.public-status-inner {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.public-status p {
  color: rgba(249, 250, 247, 0.78);
  font-size: 14px;
  line-height: 1.5;
}

.public-status a,
.public-footer a {
  color: #f2d894;
  font-weight: 750;
  text-decoration: none;
}

.public-status a:hover,
.public-footer a:hover {
  text-decoration: underline;
}

.public-footer {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(249, 250, 247, 0.76);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  min-height: 72px;
  padding: 0 24px;
}

@media (max-width: 680px) {
  .public-hero {
    min-height: auto;
    padding-top: 42px;
  }

  .public-brand-lockup {
    min-height: 58px;
    padding: 14px 16px;
  }

  .public-intro {
    font-size: 17px;
  }

  .public-status-inner,
  .public-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .public-footer {
    justify-content: center;
    padding-bottom: 18px;
    padding-top: 18px;
  }
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 72px 240px minmax(0, 1fr);
}

.app-utility-rail {
  border-right: 1px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0;
  gap: 18px;
}

.skin-dark .app-utility-rail {
  border-color: var(--border-dark);
  background: #0a0a0a;
}

.skin-light .app-utility-rail {
  border-color: var(--light-warm-border);
  background: #f3f4f6;
}

.utility-rail-mark,
.utility-rail-user,
.utility-rail-slot {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.utility-rail-mark {
  border: 1px solid;
  border-radius: 10px;
  color: inherit;
  font-size: 13px;
  font-weight: 750;
  height: 44px;
  overflow: hidden;
  text-decoration: none;
  width: 44px;
}

.utility-rail-mark:hover,
.utility-rail-mark:focus-visible {
  text-decoration: none;
}

.skin-dark .utility-rail-mark {
  background: #262626;
  border-color: #3f3f46;
  color: var(--text-dark);
}

.skin-light .utility-rail-mark {
  border-color: var(--border-light);
  background: #ffffff;
}

.utility-rail-slots {
  display: grid;
  gap: 10px;
}

.utility-rail-slot {
  width: 44px;
  height: 44px;
  border: 1px solid;
  background: transparent;
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
  font-size: 15px;
  overflow: hidden;
  padding: 0;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.utility-rail-record {
  font-size: 11px;
  font-weight: 750;
}

.utility-rail-image {
  border-radius: inherit;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.utility-rail-initials {
  display: block;
  line-height: 1;
}

.skin-dark .utility-rail-slot {
  border-color: transparent;
  color: var(--muted-dark);
}

.skin-dark .utility-rail-slot:hover {
  background: var(--primary-dark-soft);
  color: var(--text-dark);
}

.skin-dark .utility-rail-slot-active {
  background: var(--primary-dark-soft);
  border-color: var(--border-dark);
  color: var(--primary-dark);
}

.skin-light .utility-rail-slot {
  border-color: var(--border-light);
  color: var(--muted-light);
}

.skin-light .utility-rail-slot:hover,
.skin-light .utility-rail-slot:focus-visible {
  background: var(--bg-light);
  border-color: var(--light-warm-border);
  color: var(--primary-light);
  text-decoration: none;
}

.skin-light .utility-rail-slot-active {
  background: var(--bg-light);
  border-color: var(--light-warm-border);
  color: var(--primary-light);
}

.utility-rail-user {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  height: 28px;
  margin-top: auto;
  width: 28px;
}

.skin-dark .utility-rail-user {
  background: #262626;
  color: var(--muted-dark);
}

.app-sidebar {
  border-right: 1px solid;
  padding: 12px;
}

.skin-dark .app-sidebar {
  border-color: var(--border-dark);
  background: #0a0a0a;
}

.skin-light .app-sidebar {
  border-color: var(--border-light);
  background: #ffffff;
}

.app-brand {
  height: 42px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 12px;
}

.app-brand-text {
  color: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}

.app-nav {
  display: grid;
  gap: 1px;
}

.app-nav-heading {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 14px 12px 8px;
}

.skin-dark .app-nav-heading {
  color: var(--muted-dark);
}

.skin-light .app-nav-heading {
  color: var(--muted-light);
}

.app-nav-item {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 0;
  display: flex;
  gap: 10px;
  min-height: 36px;
  padding: 8px 12px;
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  font-size: 13px;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.skin-dark .app-nav-item {
  color: rgba(250, 250, 250, 0.8);
}

.skin-dark .app-nav-item:hover {
  color: var(--text-dark);
  background: rgba(39, 39, 42, 0.65);
}

.skin-light .app-nav-item {
  color: var(--muted-light);
}

.skin-light .app-nav-item:hover {
  color: var(--text-light);
  border-color: #cbd5e1;
  background: #e5e7eb;
}

.skin-dark .app-nav-item-active {
  color: var(--text-dark);
  background: #27272a;
}

.skin-light .app-nav-item-active {
  border-color: var(--light-warm-border);
  border-radius: 6px;
  color: var(--primary-light);
  background: var(--bg-light);
}

.app-nav-icon,
.content-heading-title::before {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.app-nav-icon {
  flex: 0 0 auto;
  height: 16px;
  opacity: 0.9;
  width: 16px;
}

.app-nav-icon::before,
.content-heading-title::before {
  background: currentColor;
  content: "";
  display: inline-block;
  height: 15px;
  -webkit-mask: var(--page-icon) center / contain no-repeat;
  mask: var(--page-icon) center / contain no-repeat;
  width: 15px;
}

.app-nav-icon-dashboard,
.controller-dashboard .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z' fill='black'/%3E%3C/svg%3E");
}

.app-nav-icon-users,
.controller-users .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8'/%3E%3C/svg%3E");
}

.app-nav-icon-rates,
.controller-standard-rates .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2v3.05c2.85.36 5 1.98 5 4.2h-4c0-.58-.8-1.25-2.3-1.25-1.36 0-2.2.48-2.2 1.2 0 .78 1.12 1.08 3.12 1.54C15.82 11.48 19 12.5 19 16.1c0 2.42-2.25 4.08-6 4.43V23h-2v-2.48c-3.55-.42-6-2.4-6-5.02h4c0 .88 1.04 1.6 2.78 1.6 1.9 0 2.72-.58 2.72-1.42 0-.86-1.08-1.18-3.28-1.7C8.16 13.26 5 12.27 5 9.27c0-2.34 2.27-3.9 6-4.23V2h2Z' fill='black'/%3E%3C/svg%3E");
}

.app-nav-icon-expenses,
.controller-expense-schedules .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h12v20l-3-2-3 2-3-2-3 2V2Zm3 5v2h6V7H9Zm0 4v2h6v-2H9Zm0 4v2h4v-2H9Z' fill='black'/%3E%3C/svg%3E");
}

.app-nav-icon-rates::before,
.app-nav-icon-expenses::before,
.controller-standard-rates .content-heading-title::before,
.controller-expense-schedules .content-heading-title::before {
  -webkit-mask: none;
  background: none;
  color: currentColor;
  font-size: 9px;
  font-weight: 850;
  height: auto;
  letter-spacing: -0.08em;
  line-height: 1;
  mask: none;
  width: auto;
}

.app-nav-icon-rates::before,
.controller-standard-rates .content-heading-title::before {
  content: "SR";
}

.app-nav-icon-expenses::before,
.controller-expense-schedules .content-heading-title::before {
  content: "ES";
}

.controller-standard-rates .content-heading-title::before,
.controller-expense-schedules .content-heading-title::before {
  font-size: 11px;
}

.app-nav-icon-subtasks,
.controller-sub-task-templates .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h3v3H4V5Zm5 .5h11v2H9v-2ZM4 11h3v3H4v-3Zm5 .5h11v2H9v-2ZM4 17h3v3H4v-3Zm5 .5h11v2H9v-2Z' fill='black'/%3E%3C/svg%3E");
}

.app-nav-icon-companies,
.controller-companies .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21V3h11v18h5V9h-4V7h6v14H4Zm3-14v2h2V7H7Zm4 0v2h2V7h-2Zm-4 4v2h2v-2H7Zm4 0v2h2v-2h-2Zm-4 4v2h2v-2H7Zm4 0v2h2v-2h-2Z' fill='black'/%3E%3C/svg%3E");
}

.app-nav-icon-contacts,
.controller-contacts .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm-8 9a8 8 0 0 1 16 0H4Z' fill='black'/%3E%3C/svg%3E");
}

.app-nav-icon-projects,
.controller-projects .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h7l2 2h9v10.5A2.5 2.5 0 0 1 18.5 21h-13A2.5 2.5 0 0 1 3 18.5V6Z' fill='black'/%3E%3C/svg%3E");
}

.app-nav-icon-invoices,
.controller-invoices .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h12v20l-3-2-3 2-3-2-3 2V2Zm3 5v2h6V7H9Zm0 4v2h6v-2H9Zm0 4v2h4v-2H9Z' fill='black'/%3E%3C/svg%3E");
}

.app-nav-icon-tickets,
.controller-tracker-boards .content-heading-title,
.controller-tracker-tasks .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v4h-2a2 2 0 1 0 0 4h2v4H4v-4h2a2 2 0 1 0 0-4H4V4Zm5 3v2h6V7H9Zm0 4v2h4v-2H9Z' fill='black'/%3E%3C/svg%3E");
}

.tracker-ticket-list {
  min-width: 0;
}

.tracker-ticket-list-header,
.tracker-ticket-summary {
  align-items: center;
  display: grid;
  gap: 6px 12px;
  grid-template-areas:
    "id status"
    "title title"
    "priority assignee";
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
}

.tracker-ticket-list-header {
  display: none;
}

.tracker-ticket-id { grid-area: id; }
.tracker-ticket-title { grid-area: title; }
.tracker-ticket-status { grid-area: status; justify-self: end; }
.tracker-ticket-priority { grid-area: priority; }
.tracker-ticket-assignee { grid-area: assignee; }

.tracker-ticket-list-header {
  border-bottom: 1px solid;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 4px 12px 10px;
}

.skin-dark .tracker-ticket-list-header {
  border-color: var(--border-dark);
  color: var(--muted-dark);
}

.skin-light .tracker-ticket-list-header {
  border-color: var(--border-light);
  color: var(--muted-light);
}

.tracker-ticket-row {
  border-bottom: 1px solid;
  border-left: 4px solid var(--ticket-state-color, #64748B);
}

.skin-dark .tracker-ticket-row {
  border-bottom-color: var(--border-dark);
}

.skin-light .tracker-ticket-row {
  border-bottom-color: var(--border-light);
}

.tracker-ticket-summary {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 16px 12px 16px 12px;
  text-align: left;
  width: 100%;
}

.tracker-ticket-summary:hover,
.tracker-ticket-summary:focus-visible,
.tracker-ticket-row.is-open .tracker-ticket-summary {
  outline: none;
}

.skin-dark .tracker-ticket-summary:hover,
.skin-dark .tracker-ticket-summary:focus-visible,
.skin-dark .tracker-ticket-row.is-open .tracker-ticket-summary {
  background: rgba(187, 155, 93, 0.08);
}

.skin-light .tracker-ticket-summary:hover,
.skin-light .tracker-ticket-summary:focus-visible,
.skin-light .tracker-ticket-row.is-open .tracker-ticket-summary {
  background: rgba(2, 81, 34, 0.06);
}

.tracker-ticket-badges {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.tracker-ticket-badge {
  border: 1px solid;
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  padding: 3px 8px;
  white-space: nowrap;
}

.tracker-ticket-badge-blocked {
  background: #fff7ed;
  border-color: #c2410c;
  color: #9a3412;
}

.skin-dark .tracker-ticket-badge-blocked {
  background: rgba(194, 65, 12, 0.18);
  border-color: #fdba74;
  color: #fed7aa;
}

.tracker-ticket-badge-cancelled {
  background: #fef2f2;
  border-color: #b91c1c;
  color: #991b1b;
}

.skin-dark .tracker-ticket-badge-cancelled {
  background: rgba(185, 28, 28, 0.2);
  border-color: #fca5a5;
  color: #fecaca;
}

.tracker-ticket-id,
.tracker-ticket-title,
.tracker-ticket-priority,
.tracker-ticket-assignee {
  min-width: 0;
  overflow-wrap: anywhere;
}

.tracker-ticket-title {
  font-weight: 600;
}

.tracker-ticket-priority,
.tracker-ticket-assignee,
.tracker-ticket-id {
  color: inherit;
}

.skin-dark .tracker-ticket-priority,
.skin-dark .tracker-ticket-assignee {
  color: var(--muted-dark);
}

.skin-light .tracker-ticket-priority,
.skin-light .tracker-ticket-assignee {
  color: var(--muted-light);
}

.tracker-ticket-status-pill {
  border: 1px solid;
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  line-height: 1.2;
  padding: 3px 10px;
  white-space: nowrap;
}

.skin-dark .tracker-ticket-status-pill {
  border-color: var(--border-dark);
  color: var(--text-dark);
}

.skin-light .tracker-ticket-status-pill {
  border-color: #c5cdd6;
  color: var(--text-light);
}

.tracker-ticket-title {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tracker-ticket-visibility-badge {
  border: 1px solid;
  border-radius: 4px;
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 3px 6px;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

.skin-dark .tracker-ticket-visibility-badge {
  background: rgba(187, 155, 93, 0.16);
  border-color: #d4b06a;
  color: #f3dfb0;
}

.skin-light .tracker-ticket-visibility-badge {
  background: #f7ecd2;
  border-color: #7a5c1e;
  color: #5c4310;
}

.content-heading-title .tracker-ticket-visibility-badge,
.dino-link .tracker-ticket-visibility-badge {
  margin-left: 6px;
}

.tracker-ticket-visibility-field .tracker-ticket-visibility-warning,
.tracker-ticket-visibility-field .setup-helper-copy {
  margin: 6px 0 12px;
}

.ticket-board-search {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
  max-width: 36rem;
}

.tracker-ticket-row.is-saving {
  opacity: 0.65;
}

.tracker-ticket-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 180ms ease;
}

.tracker-ticket-row.is-open .tracker-ticket-panel {
  grid-template-rows: 1fr;
}

.tracker-ticket-panel-inner {
  min-height: 0;
  overflow: hidden;
}

.tracker-ticket-row.is-open {
  border: 1px solid;
  border-radius: 8px;
  margin: 8px 0;
}

.skin-dark .tracker-ticket-row.is-open {
  background: var(--bg-dark-panel);
  border-color: var(--border-dark);
}

.skin-light .tracker-ticket-row.is-open {
  background: var(--bg-light-panel);
  border-color: var(--border-light);
}

.skin-dark .tracker-ticket-row.is-open .tracker-ticket-summary,
.skin-light .tracker-ticket-row.is-open .tracker-ticket-summary {
  background: transparent;
}

.tracker-ticket-detail {
  min-width: 0;
}

.tracker-ticket-sheet {
  border-top: 1px solid;
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.skin-dark .tracker-ticket-sheet {
  border-color: var(--border-dark);
}

.skin-light .tracker-ticket-sheet {
  border-color: var(--border-light);
}

.tracker-ticket-sheet-main,
.tracker-ticket-sheet-aside {
  display: grid;
  gap: 20px;
  align-content: start;
  min-width: 0;
}

.tracker-ticket-sheet-main,
.tracker-ticket-sheet-aside {
  padding: 16px 12px 18px;
}

.skin-dark .tracker-ticket-sheet-aside {
  background: rgba(187, 155, 93, 0.04);
  border-color: var(--border-dark);
}

.skin-light .tracker-ticket-sheet-aside {
  background: rgba(2, 81, 34, 0.03);
  border-color: var(--border-light);
}

.tracker-ticket-status-form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.tracker-ticket-status-form > label {
  font-size: 11px;
  font-weight: 650;
  width: 100%;
}

.tracker-ticket-status-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235f6f87' stroke-width='1.5'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  max-width: 100%;
  min-height: 32px;
  min-width: 0;
  padding: 4px 32px 4px 12px;
  width: 100%;
}

.skin-dark .tracker-ticket-status-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23a1a1aa' stroke-width='1.5'/%3E%3C/svg%3E");
  border-color: var(--border-dark);
}

.skin-light .tracker-ticket-status-select {
  border-color: #c5cdd6;
}

.tracker-ticket-status-form input[type="submit"].btn {
  max-width: 100%;
  min-height: 32px;
  width: 100%;
}

.tracker-ticket-detail-section h3 {
  font-size: 12px;
  font-weight: 650;
  margin: 0 0 8px;
}

.skin-dark .tracker-ticket-detail-section h3 {
  color: var(--muted-dark);
}

.skin-light .tracker-ticket-detail-section h3 {
  color: var(--muted-light);
}

.tracker-ticket-description {
  max-width: 62ch;
}

.tracker-ticket-description > *:first-child {
  margin-top: 0;
}

.tracker-ticket-description h1,
.tracker-ticket-description h2,
.tracker-ticket-description h3,
.tracker-ticket-description h4 {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
  margin: 1.1em 0 0.4em;
}

.tracker-ticket-description p,
.tracker-ticket-description li,
.tracker-ticket-detail-section p {
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.tracker-ticket-description p,
.tracker-ticket-detail-section p {
  margin: 0 0 10px;
}

.tracker-ticket-description ul,
.tracker-ticket-description ol {
  margin: 0 0 12px;
  padding-left: 1.25em;
}

.tracker-ticket-description li {
  margin: 0 0 4px;
}

.tracker-ticket-description code {
  background: rgba(127, 127, 127, 0.13);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.92em;
  padding: 0.1em 0.35em;
}

.tracker-ticket-meta {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  margin: 0;
}

.tracker-ticket-meta dt {
  font-size: 11px;
  font-weight: 650;
}

.tracker-ticket-meta dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

.tracker-ticket-label-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tracker-ticket-label-chip {
  border: 1px solid;
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  padding: 5px 8px;
}

.skin-dark .tracker-ticket-label-chip {
  background: var(--bg-dark-control);
  border-color: var(--border-dark);
  color: var(--muted-dark);
}

.skin-light .tracker-ticket-label-chip {
  background: rgba(2, 81, 34, 0.06);
  border-color: rgba(2, 81, 34, 0.18);
  color: var(--light-warm-header-text);
}

.tracker-ticket-sheet-actions {
  min-width: 0;
}

.tracker-ticket-sheet-actions .btn {
  width: 100%;
}

.tracker-ticket-comment-form {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  max-width: 62ch;
}

.tracker-ticket-comment-form textarea {
  min-height: 84px;
  resize: vertical;
  width: 100%;
}

.tracker-ticket-comment-form input[type="submit"].btn {
  justify-self: start;
  width: auto;
}

.tracker-ticket-detail .tracker-comments {
  gap: 0;
  margin-top: 4px;
}

.tracker-ticket-detail .tracker-comment {
  background: transparent;
  border: 0;
  border-bottom: 1px solid;
  border-radius: 0;
  padding: 12px 0;
}

.tracker-ticket-detail .tracker-comment:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.skin-dark .tracker-ticket-detail .tracker-comment {
  border-color: var(--border-dark);
}

.skin-light .tracker-ticket-detail .tracker-comment {
  border-color: var(--border-light);
}

@media (min-width: 821px) {
  .tracker-ticket-list-header,
  .tracker-ticket-summary {
    gap: 16px;
    grid-template-areas: none;
    grid-template-columns: 7.25rem minmax(12rem, 2fr) 7.75rem 4.75rem minmax(8rem, 1fr);
  }

  .tracker-ticket-list-header {
    display: grid;
  }

  .tracker-ticket-id,
  .tracker-ticket-title,
  .tracker-ticket-status,
  .tracker-ticket-priority,
  .tracker-ticket-assignee {
    grid-area: auto;
    justify-self: auto;
  }

  .tracker-ticket-sheet {
    grid-template-columns: minmax(0, 3fr) minmax(20rem, 2fr);
  }

  .tracker-ticket-sheet-main {
    padding: 18px 22px 20px 15px;
  }

  .tracker-ticket-sheet-aside {
    border-left: 1px solid;
    padding: 18px 16px 20px;
  }

  .tracker-ticket-status-select,
  .tracker-ticket-status-form input[type="submit"].btn {
    width: auto;
  }

  .tracker-ticket-status-select {
    min-width: 10rem;
  }
}

.tracker-ticket-list-empty,
.tracker-ticket-panel-loading,
.tracker-ticket-panel-error {
  margin: 0;
  padding: 18px 12px;
}

.skin-dark .tracker-ticket-list-empty,
.skin-dark .tracker-ticket-panel-loading,
.skin-dark .tracker-ticket-panel-error {
  color: var(--muted-dark);
}

.skin-light .tracker-ticket-list-empty,
.skin-light .tracker-ticket-panel-loading,
.skin-light .tracker-ticket-panel-error {
  color: var(--muted-light);
}

.tracker-comment {
  border-radius: 8px;
  padding: 16px;
}

.skin-dark .tracker-comment {
  background: rgba(15, 23, 42, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.skin-light .tracker-comment {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(15, 23, 42, 0.1);
}

.tracker-comments {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.app-nav-icon-timesheets,
.controller-timesheets .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 5v5l4 2-.9 1.8L11 13V7h2Z' fill='black'/%3E%3C/svg%3E");
}

.app-nav-icon-reports,
.controller-reports .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h16v2H4v-2Zm2-8h3v6H6v-6Zm5-6h3v12h-3V6Zm5 3h3v9h-3V9Z' fill='black'/%3E%3C/svg%3E");
}

.app-main {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.app-topbar {
  border-bottom: 1px solid;
  min-height: 48px;
  padding: 8px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.skin-dark .app-topbar {
  border-color: var(--border-dark);
  background: #0a0a0a;
}

.skin-light .app-topbar {
  border-color: var(--border-light);
  background: #ffffff;
}

.topbar-role {
  margin-left: 8px;
  font-size: 11px;
}

.skin-dark .topbar-role {
  color: var(--muted-dark);
}

.skin-light .topbar-role {
  color: var(--muted-light);
}

.topbar-actions {
  display: flex;
  gap: 8px;
}

.topbar-actions form {
  margin: 0;
}

.app-nav-toggle {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  display: none;
  flex: 0 0 auto;
  height: 44px;
  justify-content: center;
  padding: 0;
  width: 44px;
}

.app-nav-toggle-icon,
.app-nav-toggle-icon::before,
.app-nav-toggle-icon::after {
  background: currentColor;
  border-radius: 2px;
  display: block;
  height: 2px;
  position: relative;
  transition: transform 200ms ease, opacity 200ms ease;
  width: 18px;
}

.app-nav-toggle-icon::before,
.app-nav-toggle-icon::after {
  content: "";
  left: 0;
  position: absolute;
}

.app-nav-toggle-icon::before { top: -6px; }
.app-nav-toggle-icon::after  { top:  6px; }

.app-nav-overlay {
  background: rgba(0, 0, 0, 0.45);
  display: none;
  inset: 0;
  position: fixed;
  z-index: 49;
}

.app-nav-overlay.is-visible { display: block; }

.app-nav-close {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: none;
  font-size: 16px;
  margin-bottom: 8px;
  padding: 4px 8px;
  text-align: right;
  width: 100%;
}

.app-topbar-user-info {
  align-items: baseline;
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
  min-width: 0;
}

.app-content-wrapper {
  min-width: 0;
  padding: 24px;
}

.app-footer {
  border-top: 1px solid;
  padding: 10px 20px;
  font-size: 12px;
}

.skin-dark .app-footer {
  border-color: var(--border-dark);
  color: var(--muted-dark);
  background: #0a0a0a;
}

.skin-light .app-footer {
  border-color: var(--border-light);
  color: var(--muted-light);
}

.auth-page {
  background: var(--bg-light);
  color: #182235;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.dashboard-page-shell {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 1160px;
}

.dashboard-config-shell {
  display: grid;
  gap: 16px;
}

.content-heading {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 16px;
  font-weight: 600;
}

.skin-dark .content-heading {
  background: transparent;
}

.skin-light .content-heading {
  background: transparent;
}

body.skin-dark.controller-tracker-boards .app-content-wrapper > .content-heading.ticket-boards-heading {
  background: color-mix(in srgb, var(--bg-dark) 97%, var(--text-dark));
}

body.skin-light.controller-tracker-boards .app-content-wrapper > .content-heading.ticket-boards-heading {
  background: color-mix(in srgb, var(--bg-light) 88%, var(--text-light));
}

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

.content-heading-title {
  align-items: center;
  display: inline-flex;
  font-size: 20px;
  gap: 8px;
  line-height: 1.15;
}

.content-heading-title::before {
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
}

.card {
  width: 100%;
  max-width: 920px;
  border: 1px solid;
  padding: 24px;
}

.skin-dark .card {
  background: var(--bg-dark-elevated);
  border-color: var(--border-dark);
}

.skin-light .card {
  background: var(--bg-light-elevated);
  border-color: var(--border-light);
}

.auth-card {
  background: #fff;
  border-color: #d8ded8;
  border-radius: 10px;
  color: #182235;
  max-width: 420px;
  padding: 44px;
}

.skin-dark .auth-card {
  background: #fff;
  border-color: #d8ded8;
}

.auth-card h1 {
  margin-bottom: 20px;
}

.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"],
.skin-dark .auth-card input[type="email"],
.skin-dark .auth-card input[type="password"],
.skin-dark .auth-card input[type="text"] {
  background: #fff;
  border-color: #d8ded8;
  color: #182235;
}

.auth-card .btn,
.skin-dark .auth-card .btn {
  background: #fff;
  border-color: #d8ded8;
  color: #182235;
}

.auth-card .btn:hover,
.auth-card .btn:focus-visible,
.skin-dark .auth-card .btn:hover,
.skin-dark .auth-card .btn:focus-visible {
  background: #f3f4f6;
  border-color: #c7cfc7;
}

.auth-card .btn-primary,
.skin-dark .auth-card .btn-primary {
  background: var(--dna-green);
  border-color: var(--dna-green);
  color: #fff;
}

.auth-card .btn-primary:hover,
.auth-card .btn-primary:focus-visible,
.skin-dark .auth-card .btn-primary:hover,
.skin-dark .auth-card .btn-primary:focus-visible {
  background: #013d1a;
  border-color: #013d1a;
}

.auth-instructions {
  color: #667085;
  margin: 8px 0 18px;
}

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

.auth-secondary-actions {
  margin-top: 12px;
}

.auth-link {
  color: var(--dna-green);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.auth-link:hover,
.auth-link:focus-visible {
  text-decoration: underline;
}

.dev-login-panel {
  border-top: 1px solid;
  margin-top: 18px;
  padding-top: 18px;
}

.dev-login-panel form {
  margin: 0;
}

.dev-login-button {
  width: 100%;
}

.skin-dark .dev-login-panel {
  border-color: var(--border-dark);
}

.skin-light .dev-login-panel {
  border-color: var(--border-light);
}

.auth-card .dev-login-panel {
  border-color: #d8ded8;
}

.dashboard-surface {
  width: 100%;
  max-width: 1160px;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.dashboard-subtitle {
  margin-top: 6px;
}

.skin-dark .dashboard-subtitle {
  color: var(--muted-dark);
}

.skin-light .dashboard-subtitle {
  color: var(--muted-light);
}


.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

label {
  font-size: 13px;
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="date"],
select,
textarea {
  border: 1px solid;
  border-radius: 6px;
  font-size: 13px;
  min-height: 44px;
  padding: 8px 12px;
  background: transparent;
  color: inherit;
  width: 100%;
}

/* iOS Safari/WKWebView renders input[type="date"] with native inline sizing that
   ignores width: 100%. display: block forces it to behave like a block element
   and respect the container width — the same fix Bootstrap applies via .form-control. */
input[type="date"] {
  -webkit-appearance: none;
  apperance: none;
  display: block;
  max-width: 100%;
  min-width: 0;
}

.skin-dark input[type="email"],
.skin-dark input[type="password"],
.skin-dark input[type="text"],
.skin-dark input[type="search"],
.skin-dark input[type="number"],
.skin-dark input[type="url"],
.skin-dark input[type="tel"],
.skin-dark input[type="date"],
.skin-dark select,
.skin-dark textarea {
  border-color: var(--border-dark);
  background: var(--bg-dark-control);
}

.skin-light input[type="email"],
.skin-light input[type="password"],
.skin-light input[type="text"],
.skin-light input[type="search"],
.skin-light input[type="number"],
.skin-light input[type="url"],
.skin-light input[type="tel"],
.skin-light input[type="date"],
.skin-light select,
.skin-light textarea {
  border-color: var(--border-light);
  background: transparent;
}

.skin-dark input::placeholder,
.skin-dark textarea::placeholder {
  color: var(--muted-dark);
  opacity: 1;
}

.skin-light input::placeholder,
.skin-light textarea::placeholder {
  color: var(--muted-light);
  opacity: 1;
}

.btn {
  align-items: center;
  border: 1px solid;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  justify-content: center;
  line-height: 1.15;
  min-height: 44px;
  padding: 0 12px;
  text-decoration: none;
  white-space: nowrap;
}

input[type="submit"].btn,
button.btn {
  appearance: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.15;
  min-height: 44px;
  padding: 0 12px;
  width: auto;
}

.btn.dino-link {
  gap: 0;
}

.btn.dino-link::after {
  content: none;
  display: none;
}

.skin-dark .btn {
  border-color: var(--border-dark);
  background: var(--bg-dark-control);
}

.skin-dark .btn:hover,
.skin-dark .btn:focus-visible {
  background: rgba(82, 82, 91, 0.4);
  border-color: #3f3f46;
}

.skin-light .btn {
  border-color: var(--border-light);
}

.btn-primary {
  font-weight: 600;
}

.btn-disabled {
  cursor: not-allowed;
  opacity: 0.62;
  pointer-events: none;
}

.skin-dark .btn-primary {
  border-color: #52525b;
  color: var(--text-dark);
}

.skin-light .btn-primary {
  border-color: var(--primary-light);
  color: var(--primary-light);
}

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

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

.dashboard-actions-stacked {
  align-items: stretch;
  flex-direction: column;
  gap: 12px;
}

.dashboard-actions form {
  margin: 0;
}

.content-heading .btn,
.content-heading input[type="submit"].btn,
.content-heading button.btn {
  min-height: 0;
  padding: 10px;
}

.dashboard-inline-form {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

.dashboard-inline-form .field {
  margin-bottom: 0;
}

.dashboard-inline-form-compact {
  grid-template-columns: minmax(0, 1fr) auto;
}

.dashboard-inline-form input[type="date"] {
  width: 100%;
}

.dashboard-config-panel,
.dashboard-config-summary,
.dashboard-widget {
  display: grid;
  gap: 14px;
}

.dashboard-config-panel {
  max-width: 760px;
}

.dashboard-config-form {
  display: grid;
  gap: 12px;
}

.dashboard-config-form textarea {
  min-height: 130px;
  resize: vertical;
}

.dashboard-config-summary {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) auto;
}

.dashboard-config-details {
  display: grid;
  gap: 12px;
}

.dashboard-config-details summary {
  cursor: pointer;
  list-style: none;
}

.dashboard-config-details summary::-webkit-details-marker {
  display: none;
}

.dashboard-config-details[open] {
  grid-column: 1 / -1;
}

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

.dashboard-widget-heading span,
.dashboard-empty {
  font-size: 12px;
}

.dashboard-widget-heading span {
  font-weight: 600;
  letter-spacing: 0.035em;
  line-height: 1.2;
  text-transform: uppercase;
}

.skin-dark .dashboard-widget-heading span,
.skin-dark .dashboard-empty {
  color: var(--muted-dark);
}

.skin-light .dashboard-widget-heading span,
.skin-light .dashboard-empty {
  color: var(--muted-light);
}

.dashboard-widget-main {
  display: grid;
  gap: 4px;
}

.dashboard-widget-main strong {
  font-size: 22px;
  line-height: 1.12;
}

.dashboard-action-stack,
.dashboard-widget-list {
  display: grid;
  gap: 10px;
}

.dashboard-widget-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dashboard-widget-list li {
  align-items: baseline;
  display: grid;
  gap: 4px;
}

.widget {
  min-height: 98px;
}

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

.dashboard-page-shell > .stats-grid {
  margin-bottom: 0;
}

.specification-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.specification-summary-row {
  padding: 14px 0;
  border-bottom: 1px solid;
}

.skin-dark .specification-summary-row {
  border-bottom-color: var(--border-dark);
}

.skin-light .specification-summary-row {
  border-bottom-color: var(--border-light);
}

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

.specification-page-shell {
  max-width: 1180px;
}

.spec-document {
  border: 1px solid;
  border-radius: 10px;
  overflow: hidden;
}

.skin-dark .spec-document {
  background: #101010;
  border-color: var(--border-dark);
}

.skin-light .spec-document {
  background: var(--bg-light-panel);
  border-color: var(--border-light);
}

.spec-document-header {
  border-bottom: 1px solid;
  padding: clamp(20px, 3vw, 34px);
}

.skin-dark .spec-document-header {
  background: #141414;
  border-bottom-color: var(--border-dark);
}

.skin-light .spec-document-header {
  background: #f9fafb;
  border-bottom-color: var(--border-light);
}

.spec-document-heading-row,
.spec-progress-copy,
.spec-progress-counts,
.spec-item-copy-row,
.spec-item-meta,
.spec-ticket-chip,
.specification-link-form {
  align-items: center;
  display: flex;
}

.spec-document-heading-row {
  align-items: flex-start;
  gap: 24px;
  justify-content: space-between;
}

.spec-document-path,
.spec-item-id,
.spec-md-prefix,
.spec-status-marker,
.spec-status-legend code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.spec-document-path {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.skin-dark .spec-document-path,
.skin-dark .spec-document-description,
.skin-dark .spec-progress-copy span,
.skin-dark .spec-progress-counts,
.skin-dark .spec-status-legend,
.skin-dark .spec-item-details,
.skin-dark .spec-item-meta {
  color: var(--muted-dark);
}

.skin-light .spec-document-path,
.skin-light .spec-document-description,
.skin-light .spec-progress-copy span,
.skin-light .spec-progress-counts,
.skin-light .spec-status-legend,
.skin-light .spec-item-details,
.skin-light .spec-item-meta {
  color: var(--muted-light);
}

.spec-document-heading-row h2 {
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.spec-document-heading-row h2 span,
.spec-md-prefix {
  color: var(--primary-accent);
}

.spec-document-description {
  font-size: 15px;
  line-height: 1.6;
  margin-top: 12px;
  max-width: 760px;
}

.spec-document-state {
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 5px 9px;
  text-transform: uppercase;
}

.spec-progress {
  display: grid;
  gap: 9px;
  margin-top: 26px;
}

.spec-progress-copy,
.spec-progress-counts {
  gap: 8px 16px;
  justify-content: space-between;
}

.spec-progress-copy strong {
  font-size: 14px;
}

.spec-progress-copy span,
.spec-progress-counts {
  font-size: 12px;
}

.spec-progress-track {
  background: rgba(127, 127, 127, 0.2);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}

.spec-progress-track span {
  background: var(--primary-accent);
  border-radius: inherit;
  display: block;
  height: 100%;
  min-width: 0;
}

.spec-progress-counts {
  justify-content: flex-start;
}

.spec-progress-counts .has-blockers {
  color: #c24135;
}

.spec-status-legend {
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
  gap: 8px 18px;
  margin-top: 20px;
}

.spec-status-legend code {
  color: inherit;
  font-size: 11px;
  font-weight: 800;
}

.spec-search-form {
  border-top: 1px solid;
  margin-top: 22px;
  padding-top: 20px;
}

.skin-dark .spec-search-form {
  border-top-color: var(--border-dark);
}

.skin-light .spec-search-form {
  border-top-color: var(--border-light);
}

.spec-search-form > label {
  display: block;
  font-size: 12px;
  font-weight: 750;
  margin-bottom: 8px;
}

.spec-search-control {
  align-items: stretch;
  display: flex;
  gap: 8px;
}

.spec-search-control input[type="search"] {
  flex: 1 1 420px;
  min-width: 0;
}

.spec-search-hint,
.spec-search-summary {
  font-size: 11px;
  margin-top: 8px;
}

.skin-dark .spec-search-hint,
.skin-dark .spec-search-summary {
  color: var(--muted-dark);
}

.skin-light .spec-search-hint,
.skin-light .spec-search-summary {
  color: var(--muted-light);
}

.spec-document-body {
  padding: clamp(22px, 4vw, 42px);
}

.spec-document-section + .spec-document-section,
.spec-document-item + .spec-document-section {
  margin-top: 34px;
}

.spec-section-heading {
  align-items: baseline;
  border-bottom: 1px solid;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding-bottom: 9px;
}

.skin-dark .spec-section-heading {
  border-bottom-color: var(--border-dark);
}

.skin-light .spec-section-heading {
  border-bottom-color: var(--border-light);
}

.spec-section-heading h3 {
  font-size: 19px;
  letter-spacing: -0.015em;
}

.spec-md-prefix,
.spec-status-marker {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}

.spec-item-id {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.spec-document-children {
  border-left: 1px solid;
  margin-left: 8px;
  padding-left: 22px;
}

.skin-dark .spec-document-children {
  border-left-color: #262626;
}

.skin-light .spec-document-children {
  border-left-color: #e8edf5;
}

.spec-document-item {
  padding: 12px 0;
}

.spec-document-item + .spec-document-item {
  border-top: 1px solid;
}

.skin-dark .spec-document-item + .spec-document-item {
  border-top-color: rgba(255, 255, 255, 0.055);
}

.skin-light .spec-document-item + .spec-document-item {
  border-top-color: rgba(22, 32, 49, 0.07);
}

.spec-item-line {
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
}

.spec-list-prefix {
  min-width: 23px;
  text-align: center;
}

.spec-status-marker {
  min-width: 29px;
}

.spec-status-complete .spec-status-marker {
  color: #16805d;
}

.spec-status-in-progress .spec-status-marker,
.spec-status-ready .spec-status-marker {
  color: #a66f0c;
}

.spec-status-blocked .spec-status-marker,
.spec-status-blocked .spec-item-status {
  color: #c24135;
}

.spec-status-deferred .spec-status-marker,
.spec-status-cancelled .spec-status-marker {
  color: #7a8494;
}

.spec-status-cancelled .spec-item-descriptor {
  text-decoration: line-through;
}

.spec-item-copy-row {
  align-items: baseline;
  gap: 14px;
  justify-content: space-between;
}

.spec-item-descriptor {
  font-size: 14px;
  font-weight: 620;
  line-height: 1.5;
}

.spec-non-progress-item .spec-item-descriptor {
  font-weight: 450;
}

.spec-item-status {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.spec-item-details {
  font-size: 13px;
  line-height: 1.6;
  margin-top: 6px;
  max-width: 880px;
}

.spec-item-details p + p {
  margin-top: 8px;
}

.spec-item-meta {
  flex-wrap: wrap;
  font-size: 10px;
  gap: 5px 10px;
  margin-top: 7px;
}

.spec-ticket-chip,
.spec-reference-chip {
  background: rgba(2, 81, 34, 0.08);
  border: 1px solid rgba(2, 81, 34, 0.2);
  border-radius: 999px;
  gap: 5px;
  padding: 3px 7px;
}

.skin-dark .spec-ticket-chip,
.skin-dark .spec-reference-chip {
  background: rgba(187, 155, 93, 0.08);
  border-color: rgba(187, 155, 93, 0.24);
}

.spec-ticket-chip > span,
.spec-reference-chip > span {
  opacity: 0.76;
}

.spec-reference-chip {
  align-items: center;
  display: inline-flex;
}

.spec-ticket-chip .button_to {
  display: inline-flex;
  margin: 0;
}

.spec-ticket-unlink {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 15px;
  line-height: 0.8;
  margin: 0;
  padding: 0 1px;
}

.spec-ticket-empty {
  opacity: 0.7;
}

.spec-ticket-connector {
  margin-top: 8px;
}

.spec-ticket-connector summary {
  color: var(--primary-accent);
  cursor: pointer;
  display: inline-block;
  font-size: 11px;
  font-weight: 750;
  list-style: none;
}

.spec-ticket-connector summary::-webkit-details-marker {
  display: none;
}

.spec-ticket-connector summary::before {
  content: "+";
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  margin-right: 5px;
}

.spec-ticket-connector[open] summary::before {
  content: "−";
}

.specification-link-form {
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.specification-link-form select {
  min-width: min(280px, 100%);
}

.spec-document-empty {
  padding: 22px 0;
  text-align: center;
}

@media (max-width: 760px) {
  .specification-summary-row,
  .spec-document-heading-row,
  .spec-progress-copy,
  .spec-item-copy-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .spec-document-heading-row {
    display: flex;
  }

  .spec-section-heading {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .spec-section-heading .spec-item-id {
    display: none;
  }

  .spec-document-children {
    margin-left: 4px;
    padding-left: 12px;
  }

  .spec-item-status {
    margin-top: 3px;
  }

  .spec-search-control {
    flex-wrap: wrap;
  }

  .spec-search-control input[type="search"] {
    flex-basis: 100%;
  }

  .specification-link-form,
  .specification-link-form select,
  .specification-link-form .btn {
    width: 100%;
  }
}

.aime-audio-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0 0 1rem;
}

.aime-chat-panel.is-listening [data-aime-listen] {
  border-color: var(--primary-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-accent) 24%, transparent);
}

.aime-auto-speak {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.aime-audio-status {
  opacity: 0.72;
  font-size: 0.9rem;
}

.aime-listen-reply {
  appearance: none;
  border: 0;
  padding: 0;
  color: var(--primary-accent);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.aime-message-error {
  border-color: rgba(220, 78, 78, 0.65);
}

.aime-provider-settings {
  margin-top: 1rem;
}

.aime-provider-settings summary {
  cursor: pointer;
}

.aime-avatar {
  width: 48px;
  height: 48px;
  border: 2px solid color-mix(in srgb, var(--primary-accent) 55%, transparent);
  border-radius: 50%;
  object-fit: cover;
}

.stat-box {
  border: 1px solid;
  border-radius: 8px;
  padding: 12px;
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.skin-dark .stat-box {
  border-color: var(--border-dark);
  background: #111111;
}

.skin-light .stat-box {
  border-color: var(--border-light);
  background: var(--bg-light-panel);
}

.stat-label {
  font-size: 11px;
  margin-bottom: 4px;
}

.skin-dark .stat-label {
  color: var(--muted-dark);
}

.skin-light .stat-label {
  color: var(--muted-light);
}

.stat-value {
  font-size: 15px;
  font-weight: 600;
}

.panel-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

.panel-grid-single {
  grid-template-columns: 1fr;
}

.panel-grid-equal {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-link-panel {
  align-items: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.setup-page-shell {
  display: grid;
  gap: 16px;
}

.setup-profile-panel {
  align-items: center;
  display: flex;
  gap: 16px;
}

.setup-avatar-preview {
  align-items: center;
  border: 1px solid;
  border-radius: 10px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: 800;
  height: 72px;
  justify-content: center;
  overflow: hidden;
  width: 72px;
}

.skin-dark .setup-avatar-preview {
  background: #262626;
  border-color: var(--border-dark);
  color: var(--text-dark);
}

.skin-light .setup-avatar-preview {
  background: var(--light-warm-avatar);
  border-color: var(--light-warm-border);
  color: var(--light-warm-avatar-text);
}

.setup-profile-copy {
  display: grid;
  gap: 4px;
}

.setup-profile-copy span,
.setup-action-list span {
  font-size: 12px;
}

.skin-dark .setup-profile-copy span,
.skin-dark .setup-profile-copy p,
.skin-dark .setup-action-list span {
  color: var(--muted-dark);
}

.skin-light .setup-profile-copy span,
.skin-light .setup-profile-copy p,
.skin-light .setup-action-list span {
  color: var(--muted-light);
}

.setup-form,
.setup-action-list {
  display: grid;
  gap: 14px;
}

.setup-checkbox {
  align-items: center;
  display: flex;
  gap: 8px;
  font-size: 13px;
}

.setup-checkbox input {
  margin: 0;
}

.setup-actions-panel .button_to {
  margin: 0;
}

.setup-action-list > div:not(.dashboard-actions) {
  display: grid;
  gap: 4px;
}

.setup-email-panel {
  display: grid;
  gap: 16px;
}

.setup-helper-copy {
  margin: -4px 0 0;
  max-width: 760px;
}

.skin-dark .setup-helper-copy {
  color: var(--muted-dark);
}

.skin-light .setup-helper-copy {
  color: var(--muted-light);
}

.setup-provider-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.setup-provider-card {
  align-items: flex-start;
  border: 1px solid;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
  min-height: 190px;
  padding: 18px;
}

.skin-dark .setup-provider-card {
  border-color: var(--border-dark);
}

.skin-light .setup-provider-card {
  border-color: var(--light-warm-border);
}

.setup-provider-card h3 {
  margin: 6px 0 8px;
}

.setup-provider-card p {
  margin: 0;
}

.skin-dark .setup-provider-card p {
  color: var(--muted-dark);
}

.skin-light .setup-provider-card p {
  color: var(--muted-light);
}

.setup-oauth-panel {
  border: 1px solid;
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 18px;
}

.skin-dark .setup-oauth-panel {
  border-color: var(--border-dark);
}

.skin-light .setup-oauth-panel {
  border-color: var(--light-warm-border);
}

.oauth-redirect-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.oauth-redirect-list > div {
  border: 1px solid;
  border-radius: 8px;
  display: grid;
  gap: 6px;
  padding: 10px;
}

.oauth-redirect-list code {
  font-size: 12px;
  overflow-wrap: anywhere;
}

.skin-dark .oauth-redirect-list > div {
  border-color: var(--border-dark);
}

.skin-light .oauth-redirect-list > div {
  border-color: var(--light-warm-border);
}

.setup-advanced-mail {
  border: 1px solid;
  border-radius: 8px;
  padding: 16px;
}

.skin-dark .setup-advanced-mail {
  border-color: var(--border-dark);
}

.skin-light .setup-advanced-mail {
  border-color: var(--light-warm-border);
}

.setup-advanced-mail summary {
  cursor: pointer;
  font-weight: 700;
}

.setup-advanced-mail .setup-form {
  margin-top: 16px;
}

.setup-inline-checks {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.setup-inline-checks label {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.setup-connected-list {
  display: grid;
  gap: 12px;
}

.setup-connected-account {
  border: 1px solid;
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 14px;
}

.skin-dark .setup-connected-account {
  border-color: var(--border-dark);
}

.skin-light .setup-connected-account {
  border-color: var(--light-warm-border);
}

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

.setup-connected-actions .button_to {
  margin: 0;
}

.panel-copy {
  line-height: 1.5;
  margin: 0;
  max-width: 760px;
}

.skin-dark .panel-copy {
  color: var(--muted-dark);
}

.skin-light .panel-copy {
  color: var(--muted-light);
}

.panel {
  border: 1px solid;
  border-radius: 8px;
  padding: 16px;
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.skin-dark .panel {
  border-color: var(--border-dark);
  background: #111111;
}

.skin-light .panel {
  border-color: var(--border-light);
  background: var(--bg-light-panel);
}
.interactive-surface:hover {
  transform: translateY(-1px);
}

.skin-dark .interactive-surface:hover {
  border-color: #3f3f46;
  background: #1a1a1a;
}

.skin-light .interactive-surface:hover {
  border-color: #a7bfdc;
  background: #f0f5fc;
}

.panel-placeholder {

  margin-top: 10px;
  height: 220px;
  border-radius: 8px;
}

.skin-dark .panel-placeholder {
  background: linear-gradient(180deg, rgba(82, 82, 91, 0.24) 0%, rgba(24, 24, 27, 0.4) 100%);
}

.skin-light .panel-placeholder {
  background: linear-gradient(180deg, rgba(14, 122, 95, 0.12) 0%, rgba(221, 229, 242, 0.5) 100%);
}

.contacts-search {
  align-items: center;
  display: flex;
  gap: 8px;
  position: relative;
}

.contacts-search::before {
  content: "⌕";
  font-size: 15px;
  left: 12px;
  opacity: 0.65;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.search-input {
  min-width: 260px;
  border: 1px solid;
  border-radius: 6px;
  font-size: 13px;
  min-height: 44px;
  padding: 8px 12px 8px 40px;
  background: transparent;
  color: inherit;
}

.contacts-search .search-input {
  padding-left: 40px;
}

.reports-search-form,
.reports-build-form {
  align-items: stretch;
}

.reports-search-form .btn,
.reports-build-form .btn {
  align-self: stretch;
}

.reports-build-form .search-input,
.reports-build-form select.search-input {
  min-width: 200px;
}

.reports-build-form::before {
  content: none;
}

.reports-build-form .search-input,
.reports-build-form select.search-input {
  padding-left: 12px;
}

.report-show-shell {
  max-width: none;
}

.report-show-shell .panel {
  padding: 0;
  overflow: hidden;
}

.report-show-shell .project-side-heading {
  align-items: center;
  border-bottom: 1px solid;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 16px;
}

.report-show-shell .project-side-heading h2 {
  margin: 0;
}

.report-show-shell .project-side-heading span {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.report-show-shell .entity-tabs {
  margin: 0;
  padding: 12px 16px;
}

.report-table-wrap {
  overflow-x: auto;
  padding: 0 16px 16px;
}

.report-table-heading {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 10px;
}

.skin-dark .report-table-heading {
  color: var(--muted-dark);
}

.skin-light .report-table-heading {
  color: var(--muted-light);
}

.report-show-shell .table {
  border-collapse: collapse;
  min-width: 720px;
  width: 100%;
}

.report-show-shell .table th,
.report-show-shell .table td {
  border-bottom: 1px solid;
  font-size: 13px;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.report-show-shell .table thead th {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.report-show-shell .table tbody tr:last-child td {
  border-bottom: 0;
}

.skin-dark .report-show-shell .table th,
.skin-dark .report-show-shell .table td {
  border-color: var(--border-dark);
}

.skin-light .report-show-shell .table th,
.skin-light .report-show-shell .table td {
  border-color: var(--border-light);
}

.skin-dark .search-input {
  border-color: var(--border-dark);
  background: var(--bg-dark-control);
}

.skin-light .search-input {
  border-color: var(--border-light);
}

.advanced-search-popover {
  position: relative;
}

.advanced-search-summary {
  list-style: none;
}

.advanced-search-summary::-webkit-details-marker {
  display: none;
}

.advanced-search-panel {
  border: 1px solid;
  border-radius: 8px;
  display: grid;
  gap: 12px;
  margin-top: 8px;
  padding: 12px;
  position: absolute;
  right: 0;
  top: 100%;
  width: min(880px, calc(100vw - 360px));
  z-index: 20;
}

.advanced-search-panel.is-hidden {
  display: none;
}

.advanced-search-drawer {
  margin-bottom: 16px;
  margin-top: 0;
  position: static;
  width: 100%;
}

.skin-dark .advanced-search-panel {
  background: #111111;
  border-color: var(--border-dark);
}

.skin-light .advanced-search-panel {
  background: var(--bg-light-panel);
  border-color: var(--border-light);
}

.advanced-search-grid {
  display: grid;
  gap: 10px 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.advanced-search-check {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  width: max-content;
}

.advanced-search-check input {
  width: auto;
}

.advanced-search-actions {
  display: flex;
  gap: 8px;
}

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

.contact-card,
.company-card {
  display: grid;
  gap: 8px;
}

.company-card-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.company-card h2 {
  margin-bottom: 14px;
}

.company-card .flip-group-front > .contact-meta {
  margin-top: 20px;
}

.editable-heading {
  align-items: flex-start;
  display: inline-flex;
  gap: 6px;
}

.contact-company {
  font-weight: 600;
}

.contact-title,
.contact-meta,
.detail-list dt {
  font-size: 13px;
}

.skin-dark .contact-title,
.skin-dark .contact-meta,
.skin-dark .detail-list dt {
  color: var(--muted-dark);
}

.skin-light .contact-title,
.skin-light .contact-meta,
.skin-light .detail-list dt {
  color: var(--muted-light);
}

.contact-detail-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px;
}

.detail-list {
  margin: 12px 0 0;
  display: grid;
  gap: 10px;
}

.detail-list dd {
  margin: 2px 0 0;
  font-weight: 600;
}

.detail-two-column {
  display: grid;
  grid-template-columns: 0.95fr 1.45fr;
  gap: 12px;
}

.entity-breadcrumb {
  align-items: center;
  display: flex;
  font-size: 13px;
  gap: 10px;
  margin-bottom: 22px;
}

.entity-breadcrumb-link {
  color: inherit;
  text-decoration: none;
}

.skin-dark .entity-breadcrumb {
  color: var(--muted-dark);
}

.skin-light .entity-breadcrumb {
  color: var(--muted-light);
}

.entity-hero {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 22px;
}

.entity-hero-main {
  align-items: center;
  display: flex;
  gap: 16px;
  min-width: 0;
}

.entity-ai-icon {
  align-items: center;
  border-radius: 0;
  display: inline-flex;
  flex: 0 0 auto;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.entity-ai-icon::before {
  background: currentColor;
  content: "";
  display: inline-block;
  height: 24px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6v3h3a2 2 0 0 1 2 2v9a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V7a2 2 0 0 1 2-2h3V2Zm2 3h2V4h-2v1ZM8 9v3h3V9H8Zm5 0v3h3V9h-3Zm-5 6v2h8v-2H8ZM2 10h2v5H2v-5Zm18 0h2v5h-2v-5Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6v3h3a2 2 0 0 1 2 2v9a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V7a2 2 0 0 1 2-2h3V2Zm2 3h2V4h-2v1ZM8 9v3h3V9H8Zm5 0v3h3V9h-3Zm-5 6v2h8v-2H8ZM2 10h2v5H2v-5Zm18 0h2v5h-2v-5Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  width: 24px;
}

.skin-dark .entity-ai-icon {
  background: #262626;
  color: var(--text-dark);
}

.skin-light .entity-ai-icon {
  background: #e7eef9;
  color: var(--text-light);
}

.entity-title-stack {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.entity-title-stack h1 {
  font-size: 24px;
  line-height: 1.1;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-title-stack span {
  font-size: 13px;
  line-height: 1.2;
}

.entity-company-link {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.entity-title-stack .entity-company-link {
  color: var(--primary-accent);
}

.entity-title-stack .entity-location-text {
  color: var(--primary-accent);
}

.skin-dark .entity-title-stack span {
  color: var(--muted-dark);
}

.skin-light .entity-title-stack span {
  color: var(--muted-light);
}

.skin-dark .entity-title-stack .entity-location-text,
.skin-light .entity-title-stack .entity-location-text {
  color: var(--primary-accent);
}

.entity-hero-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.entity-show-shell {
  max-width: 1160px;
}

.entity-title-row {
  align-items: center;
  display: flex;
  gap: 16px;
  min-width: 0;
}

.entity-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 12px;
}

.entity-tabs {
  align-items: center;
  display: inline-flex;
  gap: 4px;
  margin-bottom: 22px;
  padding: 3px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.entity-tabs::-webkit-scrollbar {
  display: none;
}

.entity-tab {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  min-height: 44px;
  padding: 8px 12px;
  position: relative;
  text-decoration: none;
}

[data-entity-tab-panel].is-hidden {
  display: none;
}

.entity-tab:hover,
.entity-tab:focus-visible {
  text-decoration: none;
}

.entity-tab-active::after {
  border-radius: 999px;
  bottom: 0;
  content: "";
  height: 2px;
  left: 8px;
  position: absolute;
  right: 8px;
}

.skin-dark .entity-tab {
  color: var(--muted-dark);
}

.skin-dark .entity-tab-active {
  color: var(--primary-accent);
}

.skin-dark .entity-tab-active::after {
  background: var(--primary-accent);
}

.skin-dark .entity-tab:hover,
.skin-dark .entity-tab:focus-visible {
  background: rgba(39, 39, 42, 0.6);
  color: var(--text-dark);
}

.skin-light .entity-tab {
  color: var(--muted-light);
}

.skin-light .entity-tab-active {
  color: var(--primary-accent);
}

.skin-light .entity-tab-active::after {
  background: var(--primary-accent);
}

.skin-light .entity-tab:hover,
.skin-light .entity-tab:focus-visible {
  background: rgba(216, 227, 242, 0.65);
  color: var(--text-light);
}

.entity-stat-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 24px;
}

.entity-stat-card {
  border: 1px solid;
  display: grid;
  gap: 12px;
  min-height: 78px;
  padding: 16px;
}

.entity-stat-card span,
.entity-panel-heading span,
.entity-empty,
.entity-list li > span,
.entity-detail-list dt {
  font-size: 12px;
}

.entity-stat-card strong {
  font-size: 18px;
  line-height: 1.15;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skin-dark .entity-stat-card {
  background: transparent;
  border-color: var(--border-dark);
}

.skin-light .entity-stat-card {
  background: transparent;
  border-color: var(--border-light);
}

.skin-dark .entity-stat-card span,
.skin-dark .entity-panel-heading span,
.skin-dark .entity-empty,
.skin-dark .entity-list li > span,
.skin-dark .entity-detail-list dt {
  color: var(--muted-dark);
}

.skin-light .entity-stat-card span,
.skin-light .entity-panel-heading span,
.skin-light .entity-empty,
.skin-light .entity-list li > span,
.skin-light .entity-detail-list dt {
  color: var(--muted-light);
}

.entity-dashboard-grid {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.65fr);
}

.entity-projects-panel {
  margin-bottom: 16px;
  overflow-x: auto;
}

.entity-company-details-panel {
  margin-bottom: 16px;
}

.entity-panel {
  padding: 0;
}

.entity-panel-heading {
  align-items: center;
  border-bottom: 1px solid;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 16px;
}

.entity-panel-heading h2 {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
  margin: 0;
}

.entity-panel-title-with-permission {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.permission-light {
  border-radius: 999px;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.permission-light-editable,
.flip-editor-editable .permission-light {
  background: #16a34a;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
}

.permission-light-locked,
.flip-editor-locked .permission-light {
  background: #eab308;
  box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.18);
}

.permission-light-denied,
.flip-editor-denied .permission-light {
  background: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18);
}

.entity-flip-grid {
  padding: 16px;
}

.entity-panel-detail-list .entity-flip-grid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  padding: 0;
}

.modal-editor {
  width: 100%;
}

.modal-editor-trigger {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  cursor: pointer;
  display: grid;
  text-align: left;
  width: 100%;
}

.modal-editor-trigger:disabled {
  cursor: default;
}

.entity-modal-editor-grid {
  gap: 14px 32px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 16px;
}

.modal-editor-item {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.modal-editor-label {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.modal-editor-value {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-editor-subvalue {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edit-section-modal-field {
  gap: 4px;
  min-height: 58px;
  padding: 12px;
}

.edit-section-modal-sheet {
  align-content: center;
  min-height: 60px;
  padding: 14px 11px;
}

.edit-section-modal-sheet .modal-editor-label {
  display: none;
}

.edit-section-modal-sheet .modal-editor-value {
  font-size: 13px;
  font-weight: 600;
}

.contact-methods-cell .modal-editor {
  min-height: 0;
}

.contact-methods-cell .edit-section-modal-sheet {
  min-height: 0;
  padding: 0;
}

.contact-methods-cell .modal-editor:nth-child(2) .modal-editor-value {
  font-size: 12px;
  font-weight: 500;
}

.timesheet-entry-meta .edit-section-modal-sheet {
  min-height: 52px;
}

.skin-dark .modal-editor-subvalue,
.skin-dark .contact-methods-cell .modal-editor:nth-child(2) .modal-editor-value {
  color: var(--muted-dark);
}

.skin-light .modal-editor-subvalue,
.skin-light .contact-methods-cell .modal-editor:nth-child(2) .modal-editor-value {
  color: var(--muted-light);
}

.modal-editor-trigger:not(:disabled):hover,
.modal-editor-trigger:not(:disabled):focus-visible {
  outline: none;
}

.skin-dark .modal-editor-label {
  color: var(--muted-dark);
}

.skin-dark .modal-editor-value {
  color: var(--text-dark);
}

.skin-dark .modal-editor-trigger:not(:disabled):hover,
.skin-dark .modal-editor-trigger:not(:disabled):focus-visible {
  background: rgba(255, 255, 255, 0.03);
}

.skin-light .modal-editor-label {
  color: var(--muted-light);
}

.skin-light .modal-editor-value {
  color: var(--text-light);
}

.skin-light .modal-editor-trigger:not(:disabled):hover,
.skin-light .modal-editor-trigger:not(:disabled):focus-visible {
  background: rgba(14, 122, 95, 0.04);
}

.skin-dark .entity-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):hover),
.skin-dark .entity-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):focus-visible),
.skin-dark .project-side-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):hover),
.skin-dark .project-side-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):focus-visible) {
  background: rgba(255, 255, 255, 0.03);
}

.skin-light .entity-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):hover),
.skin-light .entity-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):focus-visible),
.skin-light .project-side-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):hover),
.skin-light .project-side-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):focus-visible) {
  background: rgba(14, 122, 95, 0.04);
}

.skin-dark .entity-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):hover) .modal-editor-trigger,
.skin-dark .entity-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):focus-visible) .modal-editor-trigger,
.skin-dark .project-side-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):hover) .modal-editor-trigger,
.skin-dark .project-side-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):focus-visible) .modal-editor-trigger,
.skin-light .entity-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):hover) .modal-editor-trigger,
.skin-light .entity-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):focus-visible) .modal-editor-trigger,
.skin-light .project-side-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):hover) .modal-editor-trigger,
.skin-light .project-side-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):focus-visible) .modal-editor-trigger {
  background: transparent;
}

.entity-panel-detail-list .flip-editor {
  border-bottom: 1px solid;
  min-height: 58px;
}

.entity-panel-detail-list .flip-editor:last-child {
  border-bottom: 0;
}

.entity-panel-detail-list .flip-editor .flip-editor-face,
.entity-panel-detail-list .flip-editor-show .flip-editor-face {
  min-height: 58px;
}

.entity-panel-detail-list .flip-editor .flip-editor-front,
.entity-panel-detail-list .flip-editor-show .flip-editor-front {
  align-items: flex-start;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  gap: 4px;
  justify-content: stretch;
  padding: 12px 16px;
  text-align: left;
  width: 100%;
}

.entity-panel-detail-list .flip-editor .flip-editor-front:hover,
.entity-panel-detail-list .flip-editor .flip-editor-front:focus-visible,
.entity-panel-detail-list .flip-editor-show .flip-editor-front:hover,
.entity-panel-detail-list .flip-editor-show .flip-editor-front:focus-visible {
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: none;
}

.entity-panel-detail-list .flip-editor .flip-editor-label,
.entity-panel-detail-list .flip-editor-show .flip-editor-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  padding: 0;
  text-transform: none;
}

.entity-panel-detail-list .flip-editor .flip-editor-value,
.entity-panel-detail-list .flip-editor-show .flip-editor-value {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-panel-detail-list .flip-editor .permission-light,
.entity-panel-detail-list .flip-editor-show .permission-light {
  margin-top: 3px;
}

.entity-panel-detail-list .flip-editor .flip-editor-back,
.entity-panel-detail-list .flip-editor-show .flip-editor-back {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 76px;
  padding: 12px 16px;
}

.entity-panel-detail-list .flip-editor.is-editing,
.entity-panel-detail-list .flip-editor-show.is-editing {
  min-height: 76px;
}

.skin-dark .entity-panel-detail-list .flip-editor {
  border-color: var(--border-dark);
}

.skin-light .entity-panel-detail-list .flip-editor {
  border-color: var(--border-light);
}

.skin-dark .entity-panel-detail-list .flip-editor .flip-editor-label,
.skin-dark .entity-panel-detail-list .flip-editor-show .flip-editor-label {
  color: var(--muted-dark);
}

.skin-light .entity-panel-detail-list .flip-editor .flip-editor-label,
.skin-light .entity-panel-detail-list .flip-editor-show .flip-editor-label {
  color: var(--muted-light);
}

.entity-list {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.entity-list li {
  border-bottom: 1px solid;
  display: grid;
  gap: 4px;
  padding: 12px 16px;
}

.entity-list li.entity-list-with-avatar {
  align-items: center;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
}

.entity-list li:last-child {
  border-bottom: 0;
}

.entity-list-avatar {
  height: 40px;
  width: 40px;
}

.entity-list-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.entity-list-primary {
  color: inherit;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}

.entity-detail-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.entity-detail-list-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.entity-detail-list > div {
  border-bottom: 1px solid;
  display: grid;
  gap: 4px;
  padding: 12px 16px;
}

.entity-detail-list > div:last-child {
  border-bottom: 0;
}

.entity-detail-list-grid > div:nth-last-child(2):nth-child(odd) {
  border-bottom: 0;
}

.entity-detail-list dd {
  font-size: 13px;
  font-weight: 650;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-empty {
  margin: 0;
  padding: 16px;
}

.skin-dark .entity-panel-heading,
.skin-dark .entity-list li,
.skin-dark .entity-detail-list > div {
  border-color: var(--border-dark);
}

.skin-light .entity-panel-heading,
.skin-light .entity-list li,
.skin-light .entity-detail-list > div {
  border-color: var(--border-light);
}

.expense-record {
  display: grid;
  gap: 16px;
  margin-top: 12px;
}

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

.expense-record-heading h3 {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.25;
}

.expense-record-heading form {
  margin: 0;
}

.expense-record-kicker {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.skin-dark .expense-record-kicker {
  color: var(--muted-dark);
}

.skin-light .expense-record-kicker {
  color: var(--muted-light);
}

.flip-editor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.contact-flip-editor-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-flip-editor-grid {
  grid-template-columns: 1fr;
}

.add-record-panel {
  margin-bottom: 12px;
  overflow: hidden;
}

.add-record-summary {
  display: inline-flex;
  list-style: none;
  width: auto;
}

.add-record-summary::-webkit-details-marker {
  display: none;
}

.add-record-popover {
  position: relative;
}

.add-record-popover[open] {
  z-index: 10;
}

.add-record-popover-body {
  border: 1px solid;
  border-radius: 8px;
  display: grid;
  gap: 12px;
  margin-top: 8px;
  padding: 12px;
  position: absolute;
  right: 0;
  top: 100%;
  width: min(760px, calc(100vw - 360px));
}

.skin-dark .add-record-popover-body {
  background: #111111;
  border-color: var(--border-dark);
}

.skin-light .add-record-popover-body {
  background: var(--bg-light-panel);
  border-color: var(--border-light);
}

dialog {
  border: none;
  padding: 0;
}

.add-record-dialog {
  border: 1px solid;
  border-radius: 8px;
  margin: auto;
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
  width: min(760px, calc(100vw - 32px));
}

.add-record-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.skin-dark .add-record-dialog {
  background: #111111;
  border-color: var(--border-dark);
  color: var(--text-dark);
}

.skin-light .add-record-dialog {
  background: var(--bg-light-panel);
  border-color: var(--border-light);
  color: var(--text-light);
}

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

.skin-dark .modal-editor-dialog {
  border-color: #b8bec8;
  border-width: 10px;
  width: min(780px, calc(100vw - 32px));
}

.dialog-header {
  align-items: center;
  border-bottom: 1px solid;
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
}

.skin-dark .dialog-header {
  border-color: var(--border-dark);
  color: var(--text-dark);
}

.skin-light .dialog-header {
  border-color: var(--border-light);
  color: var(--text-light);
}

.dialog-title {
  font-weight: 600;
}

.dialog-close {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
}

.dialog-body {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.dialog-footer {
  align-items: center;
  display: flex;
  margin-top: 4px;
}

.dialog-footer-end {
  justify-content: flex-end;
}

.project-create-quick-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content;
}

.project-create-quick-row .compact-submit {
  max-width: none;
  white-space: nowrap;
}

.checkout-number-link {
  color: inherit;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.checkout-number-link:hover,
.checkout-number-link:focus-visible {
  text-decoration: none;
}

.skin-dark .checkout-number-link {
  color: var(--muted-dark);
}

.skin-light .checkout-number-link {
  color: var(--muted-light);
}

@media (max-width: 640px) {
  .modal-editor-dialog {
    border-radius: 0;
    height: 100dvh;
    max-height: none;
    max-width: none;
    width: 100vw;
  }
}

.add-record-body {
  display: grid;
  gap: 12px;
  padding-top: 16px;
}

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

.week-jump-popover {
  position: relative;
  display: inline-block;
}

.week-jump-popover[open] {
  z-index: 10;
}

.week-jump-body {
  border: 1px solid;
  border-radius: 8px;
  display: grid;
  gap: 12px;
  margin-top: 8px;
  padding: 12px;
  position: absolute;
  right: 0;
  top: 100%;
  width: 200px;
}

.skin-dark .week-jump-body {
  background: #111111;
  border-color: var(--border-dark);
}

.skin-light .week-jump-body {
  background: var(--bg-light-panel);
  border-color: var(--border-light);
}

.week-jump-form {
  display: grid;
  gap: 8px;
}

.week-jump-form .field {
  display: grid;
  gap: 4px;
}

.week-jump-form label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.jump-year-select,
.jump-week-select {
  font-size: 13px;
  padding: 6px;
  border-radius: 6px;
  border: 1px solid;
}

.skin-dark .jump-year-select,
.skin-dark .jump-week-select {
  background: #222222;
  border-color: var(--border-dark);
  color: #ffffff;
}

.skin-light .jump-year-select,
.skin-light .jump-week-select {
  background: #ffffff;
  border-color: var(--border-light);
  color: #000000;
}

.directory-checks {
  align-content: start;
  display: grid;
  gap: 8px;
}

.compact-submit {
  max-width: 220px;
}

.directory-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.directory-row {
  align-items: start;
  display: grid;
  grid-template-columns: minmax(190px, 0.65fr) minmax(0, 2fr) auto;
  gap: 14px;
  padding: 14px;
}

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

.directory-object h3 {
  font-size: 15px;
  line-height: 1.25;
  margin-top: 4px;
}

.directory-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.directory-actions {
  align-items: flex-start;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.directory-actions form {
  margin: 0;
}

.record-sheet {
  display: grid;
  gap: 0;
  margin-top: 12px;
  overflow-x: auto;
}

.record-sheet-header,
.record-sheet-row {
  display: grid;
  grid-template-columns: var(--sheet-columns);
  min-width: var(--sheet-min-width, 980px);
}

.record-sheet-header {
  border: 1px solid;
  border-bottom: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.record-sheet-header > div,
.record-sheet-cell {
  min-width: 0;
  overflow: hidden;
  padding: 10px 11px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-sheet-row {
  border: 1px solid;
  border-bottom: 0;
  align-items: stretch;
}

.record-sheet-row:last-child {
  border-bottom: 1px solid;
}

.record-sheet-cell {
  align-items: center;
  display: flex;
  font-size: 13px;
  font-weight: 600;
  min-height: 60px;
}

.record-sheet-primary {
  color: inherit;
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-project-cell {
  align-items: center;
}

.record-project-link {
  color: inherit;
  display: grid;
  gap: 3px;
  min-width: 0;
  text-decoration: none;
}

.record-project-link:hover,
.record-project-link:focus-visible {
  text-decoration: none;
}

.record-project-detail {
  align-items: center;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  min-width: 0;
  width: 100%;
}

.record-project-detail-link {
  min-width: 0;
}

.record-project-folder-link {
  align-items: center;
  border-radius: 8px;
  color: inherit;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  text-decoration: none;
  width: 36px;
}

.record-project-folder-link:hover,
.record-project-folder-link:focus-visible {
  background: color-mix(in srgb, currentColor 10%, transparent);
  text-decoration: none;
}

.record-project-icon {
  display: inline-block;
  height: 32px;
  width: 32px;
}

.record-project-icon::before {
  background: currentColor;
  content: "";
  display: block;
  height: 100%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.35' viewBox='0 0 24 24'%3E%3Cpath d='M3 7.5A2.5 2.5 0 0 1 5.5 5H10l2 2.5h6.5A2.5 2.5 0 0 1 21 10v7.5a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-10Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.35' viewBox='0 0 24 24'%3E%3Cpath d='M3 7.5A2.5 2.5 0 0 1 5.5 5H10l2 2.5h6.5A2.5 2.5 0 0 1 21 10v7.5a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-10Z'/%3E%3C/svg%3E") center / contain no-repeat;
  width: 100%;
}

.record-project-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.record-project-number-line {
  align-items: center;
  display: inline-flex;
  gap: 5px;
  min-width: 0;
}

.record-project-number {
  font-size: 14px;
  font-weight: 750;
  line-height: 1.15;
}

.record-project-title {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-project-parent {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  opacity: 0.72;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skin-dark .record-project-icon {
  color: var(--muted-dark);
}

.skin-dark .record-project-title {
  color: var(--muted-dark);
}

.skin-light .record-project-icon {
  color: var(--muted-light);
}

.skin-light .record-project-title {
  color: var(--muted-light);
}

.record-project-company {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.15;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-project-company-link {
  max-width: 100%;
}

.record-project-company-link span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-project-manager {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skin-dark .record-project-manager {
  color: var(--muted-dark);
}

.skin-light .record-project-manager {
  color: var(--muted-light);
}

.project-progress-stack {
  display: grid;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

.progress-meter {
  align-items: center;
  border: 1px solid;
  border-radius: 999px;
  display: flex;
  gap: 6px;
  height: 18px;
  overflow: hidden;
  padding: 0 6px;
  position: relative;
  width: 100%;
}

.progress-meter-fill {
  bottom: 0;
  border-radius: inherit;
  left: 0;
  min-width: 0;
  position: absolute;
  top: 0;
  z-index: 0;
}

.progress-meter-value,
.progress-meter-label {
  line-height: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.progress-meter-value {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
}

.progress-meter-label {
  flex: 1 1 auto;
  font-size: 10px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.progress-meter-warning .progress-meter-fill {
  background: var(--secondary-accent);
}

.progress-meter-info .progress-meter-fill {
  background: var(--secondary-accent);
}

.skin-dark .progress-meter {
  background: #141414;
  border-color: var(--border-dark);
  color: #eef4ff;
}

.skin-light .progress-meter {
  background: #f8fbff;
  border-color: var(--border-light);
  color: #0d1726;
}

.record-sheet-muted {
  font-weight: 500;
}

.record-sheet-actions {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  min-height: 60px;
  padding: 10px 8px;
}

.record-sheet-actions form {
  margin: 0;
}

.record-row-actions-stack {
  align-content: center;
  align-items: center;
  display: grid;
  gap: 4px;
  justify-content: center;
  padding: 6px 8px;
}

.record-row-actions-stack .record-row-delete-form {
  display: block;
  margin: 0;
}

.record-row-icon-button {
  align-items: center;
  background: transparent;
  border: 1px solid;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  height: 26px;
  justify-content: center;
  line-height: 1;
  min-width: 26px;
  padding: 0;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  width: 26px;
}

.skin-dark .record-row-icon-button {
  border-color: var(--border-dark);
  color: var(--muted-dark);
}

.skin-light .record-row-icon-button {
  border-color: var(--border-light);
  color: var(--muted-light);
}

.skin-dark .record-row-icon-button-edit:hover,
.skin-dark .record-row-icon-button-edit:focus-visible {
  background: rgba(82, 82, 91, 0.4);
  border-color: #52525b;
  color: var(--text-dark);
}

.skin-light .record-row-icon-button-edit:hover,
.skin-light .record-row-icon-button-edit:focus-visible {
  background: #edf3fc;
  border-color: var(--primary-light);
  color: var(--primary-light);
}

.record-row-icon-button-delete {
  color: var(--danger);
}

.skin-dark .record-row-icon-button-delete,
.skin-light .record-row-icon-button-delete {
  border-color: rgba(239, 68, 68, 0.45);
  color: var(--danger);
}

.record-row-icon-button-delete:hover,
.record-row-icon-button-delete:focus-visible {
  background: rgba(239, 68, 68, 0.12);
  border-color: var(--danger);
}

.record-row-icon-pencil {
  background: currentColor;
  display: block;
  height: 14px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  width: 14px;
}

.record-row-icon-x {
  font-size: 13px;
  font-weight: 800;
}

.record-sheet-avatar-cell {
  align-items: center;
  display: flex;
  min-height: 60px;
  padding: 10px 8px 10px 10px;
}

.record-avatar {
  align-items: center;
  border-radius: 6px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  height: 45px;
  justify-content: center;
  width: 45px;
}

.avatar-image {
  border-radius: inherit;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.record-avatar-number {
  font-size: 12px;
  padding: 0 8px;
  width: auto;
}

.state-tag {
  border: 1px solid transparent;
  border-radius: 3px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  padding: 5px 7px;
  text-transform: uppercase;
  white-space: nowrap;
}

.state-tag-pending {
  background: rgb(230, 230, 9);
  border-color: rgb(208, 208, 20);
  color: #757575;
}

.state-tag-in-review {
  background: #ff0a00;
  border-color: #e60b00;
  color: #ffffff;
}

.state-tag-active,
.state-tag-approved {
  background: #3c8039;
  border-color: #306a2e;
  color: #ffffff;
}

.state-tag-completed {
  background: #1797be;
  border-color: #1280a1;
  color: #ffffff;
}

.state-tag-locked {
  background: #707070;
  border-color: #5a5a5a;
  color: #ffffff;
}

.project-state-tabs {
  align-items: center;
  display: inline-flex;
  gap: 4px;
  margin-bottom: 12px;
  padding: 3px;
}

.user-department-tabs {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.project-state-tab {
  align-items: center;
  border: 1px solid transparent;
  color: inherit;
  display: inline-flex;
  font-size: 14px;
  font-weight: 650;
  gap: 5px;
  line-height: 1.2;
  min-height: 44px;
  padding: 8px 12px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 120ms ease, background-color 120ms ease;
}

.project-state-tab:hover,
.project-state-tab:focus-visible {
  text-decoration: none;
}

.project-state-tab-selected::after {
  border-radius: 999px;
  bottom: 0;
  content: "";
  height: 2px;
  left: 8px;
  position: absolute;
  right: 8px;
}

.project-state-tab-count {
  font-weight: 800;
}

.project-state-tab-state-pending {
  color: rgb(230, 230, 9);
}

.project-state-tab-state-in-review {
  color: #ff3b34;
}

.project-state-tab-state-active {
  color: #4caf50;
}

.project-state-tab-state-completed {
  color: #1eb2df;
}

.project-state-tab-state-pending::after {
  background: rgb(230, 230, 9);
}

.project-state-tab-state-in-review::after {
  background: #ff3b34;
}

.project-state-tab-state-active::after {
  background: #4caf50;
}

.project-state-tab-state-completed::after {
  background: #1eb2df;
}

.project-state-tab-selected {
  color: var(--primary-accent);
}

.project-state-tab-selected::after {
  background: var(--primary-accent);
}

.skin-dark .project-state-tab:hover,
.skin-dark .project-state-tab:focus-visible {
  background: rgba(39, 39, 42, 0.6);
}

.skin-light .project-state-tab:hover,
.skin-light .project-state-tab:focus-visible {
  background: rgba(216, 227, 242, 0.65);
}

.skin-dark .record-sheet-header {
  background: #141414;
  border-color: var(--border-dark);
  color: var(--muted-dark);
}

.skin-light .record-sheet-header {
  background: var(--light-warm-header);
  border-color: var(--light-warm-border);
  color: var(--light-warm-header-text);
}

.skin-dark .record-sheet-row {
  border-color: var(--border-dark);
}

.skin-light .record-sheet-row {
  border-color: var(--border-light);
}

.skin-dark .record-avatar {
  background: #262626;
  color: var(--primary-dark);
}

.skin-light .record-avatar {
  background: var(--light-warm-avatar);
  border: 1px solid var(--light-warm-border);
  color: var(--light-warm-avatar-text);
}

.skin-light .record-avatar:has(.avatar-image) {
  border-color: transparent;
}

.record-sheet-companies {
  --sheet-columns: 64px minmax(320px, 1.6fr) minmax(220px, 1fr) minmax(190px, 0.85fr);
  --sheet-min-width: 900px;
}

.record-sheet-users {
  --sheet-columns: 64px minmax(210px, 1.35fr) minmax(260px, 1.5fr) minmax(140px, 0.8fr) minmax(210px, 1fr) minmax(190px, auto);
  --sheet-min-width: 980px;
}

.record-sheet-projects {
  --sheet-columns: minmax(320px, 1.7fr) minmax(240px, 1.2fr) minmax(210px, 1fr);
  --sheet-min-width: 780px;
}

.record-sheet-projects-carptech {
  --sheet-columns: minmax(310px, 1.55fr) minmax(220px, 1fr) minmax(190px, 0.85fr) minmax(150px, 0.75fr) minmax(120px, 0.55fr) minmax(100px, auto);
  --sheet-min-width: 1090px;
}

.zero-departments-sheet {
  --sheet-columns: minmax(180px, 1fr) minmax(160px, 0.8fr) minmax(90px, 0.45fr) minmax(100px, 0.45fr) minmax(100px, 0.45fr) minmax(360px, 1.4fr);
  --sheet-min-width: 1020px;
}

.zero-inline-form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.zero-inline-form input[type="text"],
.zero-inline-form input[type="number"] {
  min-height: 34px;
  width: 120px;
}

.projects-list-panel,
.object-list-panel {
  background: transparent;
  border: 0;
  padding: 0;
}

.skin-dark .projects-list-panel,
.skin-light .projects-list-panel,
.skin-dark .object-list-panel,
.skin-light .object-list-panel {
  background: transparent;
  border-color: transparent;
}

.projects-list-panel .record-sheet-projects,
.object-list-panel .object-record-sheet {
  gap: 12px;
  margin-top: 10px;
}

.projects-list-panel .record-sheet-projects .record-sheet-header,
.object-list-panel .object-record-sheet .record-sheet-header {
  background: transparent;
  border: 0;
  margin-bottom: 2px;
}

.projects-list-panel .record-sheet-projects .record-sheet-row,
.object-list-panel .object-record-sheet .record-sheet-row {
  border: 1px solid;
  border-radius: 8px;
  overflow: hidden;
}

.projects-list-panel .record-sheet-projects .record-sheet-row:last-child,
.object-list-panel .object-record-sheet .record-sheet-row:last-child {
  border-bottom: 1px solid;
}

.skin-dark .projects-list-panel .record-sheet-projects .record-sheet-row,
.skin-dark .object-list-panel .object-record-sheet .record-sheet-row {
  background: var(--primary-dark-soft);
  border-color: #343438;
}

.skin-light .projects-list-panel .record-sheet-projects .record-sheet-row,
.skin-light .object-list-panel .object-record-sheet .record-sheet-row {
  background: var(--bg-light-elevated);
  border-color: var(--border-light);
}

.record-object-detail-link {
  align-items: center;
  display: grid;
  gap: 3px;
  grid-template-columns: 36px minmax(0, 1fr);
  min-width: 0;
  text-decoration: none;
}

.record-object-icon-cell {
  align-items: center;
  display: flex;
  justify-content: center;
}

.record-object-icon {
  color: currentColor;
  display: inline-block;
  height: 32px;
  width: 32px;
}

.record-object-icon::before {
  background: currentColor;
  content: "";
  display: block;
  height: 100%;
  -webkit-mask: var(--record-object-icon) center / contain no-repeat;
  mask: var(--record-object-icon) center / contain no-repeat;
  width: 100%;
}

.skin-dark .record-object-icon {
  color: var(--muted-dark);
}

.skin-light .record-object-icon {
  color: var(--muted-light);
}

.record-object-icon-invoice {
  --record-object-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.35' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h10a2 2 0 0 1 2 2v16l-3-2-2 2-2-2-2 2-2-2-3 2V5a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h4'/%3E%3C/svg%3E");
}

.record-object-icon-timesheet {
  --record-object-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.35' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
}

.record-object-icon-contact {
  --record-object-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.35' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 21a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E");
}

.record-object-icon-user {
  --record-object-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.35' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8'/%3E%3C/svg%3E");
}

.record-object-icon-company {
  --record-object-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.35' viewBox='0 0 24 24'%3E%3Cpath d='M5 21V4a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v17'/%3E%3Cpath d='M16 9h3a1 1 0 0 1 1 1v11M8 7h2M12 7h1M8 11h2M12 11h1M8 15h2M12 15h1M4 21h17'/%3E%3C/svg%3E");
}

.record-object-icon-message {
  --record-object-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.35' viewBox='0 0 24 24'%3E%3Crect width='18' height='14' x='3' y='5' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");
}

.record-object-icon-report {
  --record-object-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.35' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h16M7 17v-5M12 17V7M17 17v-8'/%3E%3Cpath d='M5 4h14v16H5z'/%3E%3C/svg%3E");
}

.record-sheet-standard-rates {
  --sheet-columns: minmax(92px, 0.65fr) minmax(260px, 1.6fr) minmax(130px, 0.8fr) minmax(110px, 0.65fr) minmax(140px, 0.85fr) minmax(100px, auto);
  --sheet-min-width: 920px;
}

.record-sheet-expense-schedules {
  --sheet-columns: minmax(92px, 0.65fr) minmax(260px, 1.5fr) minmax(120px, 0.7fr) minmax(110px, 0.65fr) minmax(140px, 0.85fr) minmax(220px, 1.2fr) 48px;
  --sheet-min-width: 1028px;
}

.record-sheet-subtasks {
  --sheet-columns: minmax(92px, 0.65fr) minmax(320px, 1.8fr) minmax(160px, 0.9fr) minmax(100px, auto);
  --sheet-min-width: 760px;
}

.record-sheet-timesheets {
  --sheet-columns: minmax(280px, 1.45fr) minmax(250px, 1.15fr) minmax(180px, 0.85fr) minmax(130px, 0.6fr);
  --sheet-min-width: 840px;
}

.record-sheet-project-rates {
  --sheet-columns: minmax(90px, 0.6fr) minmax(220px, 1.6fr) minmax(150px, 0.9fr) minmax(140px, 0.9fr) minmax(110px, 0.6fr);
  --sheet-min-width: 760px;
}

.project-rates-body.is-hidden {
  display: none;
}

.project-rates-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.rate-custom-tag {
  margin-left: 8px;
}

.record-sheet-project-contacts {
  --sheet-columns: minmax(150px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(190px, 1.2fr) minmax(120px, 0.8fr) minmax(90px, auto);
  --sheet-min-width: 920px;
}

.project-contacts-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.project-charge-block {
  border-top: 1px solid;
  margin-top: 12px;
  padding-top: 12px;
}

.project-charge-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.project-charge-list {
  display: grid;
  gap: 6px;
}

.project-charge-item {
  align-items: center;
  display: flex;
  font-size: 13px;
  gap: 8px;
}

.project-charge-item form {
  margin: 0;
}

.project-charge-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-charge-amount {
  font-weight: 650;
}

.skin-dark .project-charge-block {
  border-color: var(--border-dark);
}

.skin-light .project-charge-block {
  border-color: var(--border-light);
}

.task-subtask-add .entity-tabs {
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding: 0;
}

.contacts-sheet {
  display: grid;
  gap: 0;
  margin-top: 12px;
  overflow-x: auto;
}

.contacts-sheet-header,
.contacts-sheet-row {
  display: grid;
  grid-template-columns: 64px minmax(280px, 1.6fr) minmax(210px, 1fr) minmax(300px, 1.35fr);
  min-width: 840px;
}

.contacts-sheet-header {
  border: 1px solid;
  border-bottom: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.contacts-sheet-header > div {
  min-width: 0;
  overflow: hidden;
  padding: 10px 11px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skin-dark .contacts-sheet-header {
  background: #141414;
  border-color: var(--border-dark);
  color: var(--muted-dark);
}

.skin-light .contacts-sheet-header {
  background: var(--light-warm-header);
  border-color: var(--light-warm-border);
  color: var(--light-warm-header-text);
}

.contacts-sheet-row {
  border: 1px solid;
  border-bottom: 0;
  align-items: stretch;
}

.contacts-sheet-row:last-child {
  border-bottom: 1px solid;
}

.skin-dark .contacts-sheet-row {
  border-color: var(--border-dark);
}

.skin-light .contacts-sheet-row {
  border-color: var(--border-light);
}

.contacts-sheet .flip-editor-sheet,
.record-sheet .flip-editor-sheet {
  height: 100%;
  min-height: 60px;
}

.flip-editor-sheet .flip-editor-face {
  border: 0;
  border-radius: 0;
  min-height: 60px;
}

.skin-dark .flip-editor-sheet .flip-editor-face {
  border-color: var(--border-dark);
}

.skin-light .flip-editor-sheet .flip-editor-face {
  border-color: var(--border-light);
}

.flip-editor-sheet .flip-editor-front {
  align-items: center;
  background: transparent;
  box-shadow: none;
  display: flex;
  height: 100%;
  min-width: 0;
  min-height: 60px;
  padding: 14px 11px;
}

.flip-editor-sheet .flip-editor-front:hover,
.flip-editor-sheet .flip-editor-front:focus-visible {
  transform: none;
}

.skin-dark .flip-editor-sheet .flip-editor-front:hover,
.skin-dark .flip-editor-sheet .flip-editor-front:focus-visible {
  background: #1a1a1a;
  box-shadow: inset 0 -2px 0 var(--primary-dark);
}

.skin-light .flip-editor-sheet .flip-editor-front:hover,
.skin-light .flip-editor-sheet .flip-editor-front:focus-visible {
  background: #edf3fc;
  box-shadow: inset 0 -2px 0 var(--primary-light);
}

.flip-editor-sheet .flip-editor-front .flip-editor-label {
  display: none;
}

.flip-editor-sheet .flip-editor-value {
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  padding-right: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flip-editor-value-stack {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.flip-editor-subvalue {
  display: block;
  font-size: 12px;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flip-editor-sheet .flip-editor-back {
  border: 0;
  gap: 4px;
  min-height: 60px;
  padding: 10px 8px;
}

.flip-editor-sheet .flip-editor-back .flip-editor-label {
  font-size: 9px;
  padding-right: 30px;
}

.flip-editor-sheet .flip-editor-input {
  min-height: 28px;
  padding: 4px 6px;
}

.flip-editor-sheet .flip-editor-actions {
  right: 6px;
  top: 6px;
}

.flip-editor-sheet .flip-editor-icon {
  font-size: 11px;
  height: 20px;
  min-width: 20px;
}

.flip-editor-sheet .flip-editor-error {
  min-height: 0;
}

.contacts-sheet-actions {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  min-height: 60px;
  padding: 10px 8px;
}

.contact-name-cell {
  align-items: center;
  display: grid;
  min-height: 60px;
  min-width: 0;
  padding: 14px 11px;
}

.contact-name-cell-value {
  display: block;
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-contact-detail-link {
  display: grid;
  gap: 3px;
}

.record-contact-detail-link .record-project-number-line::after {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  content: "\2192";
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 800;
  height: 14px;
  justify-content: center;
  line-height: 1;
  margin-left: 1px;
  opacity: 0;
  transform: translateX(-2px);
  transition: opacity 140ms ease, transform 140ms ease;
  width: 14px;
}

.record-contact-detail-link:hover .record-project-number-line::after,
.record-contact-detail-link:focus-visible .record-project-number-line::after {
  opacity: 0.85;
  transform: translateX(0);
}

.company-contact-cell,
.company-details-cell,
.timesheet-hours-cell {
  align-content: center;
  align-items: start;
  display: grid;
  gap: 3px;
}

.contact-title-unknown {
  font-style: italic;
}

.contact-methods-cell {
  align-content: center;
  display: grid;
  gap: 3px;
  min-height: 60px;
  min-width: 0;
  padding: 14px 11px;
}

.contact-methods-cell .flip-editor-sheet {
  height: auto;
  min-height: 0;
}

.contact-methods-cell .flip-editor-front {
  height: auto;
  min-height: 0;
  padding: 0;
}

.contact-methods-cell .flip-editor-sheet:nth-child(2) .flip-editor-value {
  font-size: 12px;
  font-weight: 500;
}

.skin-dark .contact-methods-cell .flip-editor-sheet:nth-child(2) .flip-editor-value {
  color: var(--muted-dark);
}

.skin-light .contact-methods-cell .flip-editor-sheet:nth-child(2) .flip-editor-value {
  color: var(--muted-light);
}

.contact-methods-cell .flip-editor-back {
  min-height: 38px;
  padding: 4px 0;
}

.object-list-panel .object-record-sheet .flip-editor-sheet .flip-editor-face,
.object-list-panel .object-record-sheet .flip-editor-sheet .flip-editor-front,
.skin-dark .object-list-panel .object-record-sheet .flip-editor-sheet .flip-editor-front,
.skin-light .object-list-panel .object-record-sheet .flip-editor-sheet .flip-editor-front {
  background: transparent;
}

.skin-dark .object-list-panel .object-record-sheet .flip-editor-sheet .flip-editor-front:hover,
.skin-dark .object-list-panel .object-record-sheet .flip-editor-sheet .flip-editor-front:focus-visible,
.skin-light .object-list-panel .object-record-sheet .flip-editor-sheet .flip-editor-front:hover,
.skin-light .object-list-panel .object-record-sheet .flip-editor-sheet .flip-editor-front:focus-visible {
  background: transparent;
  box-shadow: none;
}

.contacts-sheet-avatar-cell {
  align-items: center;
  display: flex;
  min-height: 60px;
  padding: 10px 8px 10px 10px;
}

.contact-avatar {
  align-items: center;
  border-radius: 6px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  height: 45px;
  justify-content: center;
  width: 45px;
}

.skin-dark .contact-avatar {
  background: #262626;
  color: var(--primary-dark);
}

.skin-light .contact-avatar {
  background: var(--light-warm-avatar);
  border: 1px solid var(--light-warm-border);
  color: var(--light-warm-avatar-text);
}

.skin-light .contact-avatar:has(.avatar-image) {
  border-color: transparent;
}

.entity-contact-avatar {
  font-size: 16px;
  height: 48px;
  width: 48px;
}

.entity-company-logo {
  height: 48px;
  width: 48px;
}

.company-contacts-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.company-contacts-list li {
  display: grid;
  gap: 2px;
}

.company-contact-link {
  text-decoration: none;
  font-weight: 600;
}

.skin-dark .company-contact-link {
  color: var(--text-dark);
}

.skin-light .company-contact-link {
  color: var(--text-light);
}

.company-contact-meta {
  font-size: 12px;
}

.skin-dark .company-contact-meta {
  color: var(--muted-dark);
}

.skin-light .company-contact-meta {
  color: var(--muted-light);
}

.timesheet-state-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.timesheet-state-field {
  margin: 0;
  min-width: 220px;
}

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

.timesheet-days-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.timesheet-day-form {
  border: 1px solid;
  padding: 10px;
}

.skin-dark .timesheet-day-form {
  border-color: var(--border-dark);
}

.skin-light .timesheet-day-form {
  border-color: var(--border-light);
}

.alert {
  align-items: center;
  border: 1px solid;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 12px;
  line-height: 20px;
  margin-bottom: 16px;
  padding: 8px 12px;
}

.impersonation-alert {
  justify-content: space-between;
}

.impersonation-alert form {
  margin: 0;
}

.skin-dark .alert,
.skin-dark .alert-warning {
  background: rgba(69, 45, 9, 0.3);
  border-color: rgba(251, 191, 36, 0.4);
  color: #fde68a;
}

.skin-light .alert,
.skin-light .alert-warning {
  background: #fffbeb;
  border-color: rgba(217, 119, 6, 0.35);
  color: #78350f;
}

.skin-dark .alert-success {
  background: rgba(20, 83, 45, 0.28);
  border-color: rgba(74, 222, 128, 0.35);
  color: #bbf7d0;
}

.skin-light .alert-success {
  background: #f0fdf4;
  border-color: rgba(22, 163, 74, 0.32);
  color: #14532d;
}

.skin-dark .alert-notice {
  background: rgba(39, 39, 42, 0.55);
  border-color: rgba(161, 161, 170, 0.3);
  color: var(--text-dark);
}

.skin-light .alert-notice {
  background: #f8fafc;
  border-color: rgba(100, 116, 139, 0.28);
  color: #334155;
}

.skin-dark .alert-danger,
.skin-dark .alert-alert {
  background: rgba(69, 10, 10, 0.28);
  border-color: rgba(248, 113, 113, 0.38);
  color: #fecaca;
}

.skin-light .alert-danger,
.skin-light .alert-alert {
  background: #fef2f2;
  border-color: rgba(220, 38, 38, 0.32);
  color: #7f1d1d;
}

.report-stats-grid {
  margin-top: 12px;
  margin-bottom: 16px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.report-row-metrics {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.report-record-sheet .record-sheet-header,
.report-record-sheet .record-sheet-row {
  grid-template-columns: minmax(180px, 2fr) minmax(80px, 0.8fr) repeat(4, minmax(90px, 0.9fr));
}

.report-record-sheet-wide .record-sheet-header,
.report-record-sheet-wide .record-sheet-row {
  grid-template-columns: minmax(220px, 2.2fr) minmax(150px, 1.1fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(190px, 1.4fr) minmax(110px, 0.8fr);
}

.project-list,
.project-form-shell form {
  display: grid;
  gap: 12px;
}

.project-form-shell label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.035em;
  line-height: 1.2;
  text-transform: uppercase;
}

.skin-dark .project-form-shell label {
  color: #d8c08f;
}

.skin-light .project-form-shell label {
  color: var(--primary-light);
}

.project-row {
  display: grid;
  grid-template-columns: 1.1fr 1.9fr;
  gap: 18px;
  align-items: start;
}

.project-title-link {
  color: inherit;
  text-decoration: none;
}

.project-row-facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.project-row-facts dt {
  font-size: 11px;
  margin-bottom: 3px;
}

.project-row-facts dd {
  margin: 0;
  font-weight: 600;
}

.skin-dark .project-row-facts dt {
  color: var(--muted-dark);
}

.skin-light .project-row-facts dt {
  color: var(--muted-light);
}

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

.project-submit {
  max-width: 260px;
}

.project-stats-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-detail-lower {
  margin-top: 12px;
}

.project-detail-heading .content-heading-title {
  align-items: baseline;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.project-heading-separator {
  color: inherit;
  opacity: 0.55;
}

.project-show-layout {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.8fr) minmax(300px, 0.8fr);
}

.project-show-main,
.project-show-sidebar {
  display: grid;
  gap: 14px;
}

.project-detail-panel,
.project-side-panel {
  display: grid;
  gap: 0;
  padding: 0;
}

.project-panel-heading,
.project-side-heading,
.project-budget-heading {
  align-items: center;
  border-bottom: 1px solid;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 16px;
}

.project-panel-heading h2,
.project-side-heading h2 {
  font-size: 16px;
  line-height: 1.2;
  margin: 0;
}

.project-panel-heading h3,
.project-panel-block h3 {
  font-size: 13px;
  line-height: 1.2;
  margin: 0 0 10px;
}

.project-panel-block {
  border-bottom: 1px solid;
  display: grid;
  gap: 12px;
  padding: 14px 16px;
}

.project-panel-block .entity-modal-editor-grid {
  padding: 0;
}

.skin-dark .project-panel-block:has(> .modal-editor > .modal-editor-trigger:not(:disabled):hover),
.skin-dark .project-panel-block:has(> .modal-editor > .modal-editor-trigger:not(:disabled):focus-visible) {
  background: rgba(255, 255, 255, 0.03);
}

.skin-light .project-panel-block:has(> .modal-editor > .modal-editor-trigger:not(:disabled):hover),
.skin-light .project-panel-block:has(> .modal-editor > .modal-editor-trigger:not(:disabled):focus-visible) {
  background: rgba(14, 122, 95, 0.04);
}

.skin-dark .project-panel-block:has(> .modal-editor > .modal-editor-trigger:not(:disabled):hover) .modal-editor-trigger,
.skin-dark .project-panel-block:has(> .modal-editor > .modal-editor-trigger:not(:disabled):focus-visible) .modal-editor-trigger,
.skin-light .project-panel-block:has(> .modal-editor > .modal-editor-trigger:not(:disabled):hover) .modal-editor-trigger,
.skin-light .project-panel-block:has(> .modal-editor > .modal-editor-trigger:not(:disabled):focus-visible) .modal-editor-trigger {
  background: transparent;
}

.project-panel-block:last-child {
  border-bottom: 0;
}

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

.project-address-block {
  gap: 10px;
}

.project-block-label,
.project-readonly-label {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.project-readonly-line {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.project-readonly-value,
.project-client-summary,
.project-empty-table {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.project-client-summary {
  display: grid;
  gap: 4px;
}

.project-contact-sheet {
  display: grid;
  overflow-x: auto;
}

.project-contact-header,
.project-contact-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(160px, 1fr) minmax(180px, 1fr) minmax(190px, 1.1fr) minmax(120px, 0.8fr);
  min-width: 820px;
}

.project-contact-header {
  border: 1px solid;
  border-bottom: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.project-contact-header > div,
.project-contact-row > div {
  min-width: 0;
  overflow: hidden;
  padding: 9px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-contact-row {
  border: 1px solid;
  border-bottom: 0;
  font-size: 12px;
  font-weight: 600;
}

.project-contact-row:last-child {
  border-bottom: 1px solid;
}

.project-task-sheet {
  --sheet-columns: minmax(76px, 0.5fr) minmax(220px, 1.8fr) minmax(96px, 0.6fr) minmax(90px, 0.55fr) minmax(130px, 0.85fr) minmax(150px, 0.7fr);
  --sheet-min-width: 880px;
  margin: 0;
  padding: 14px 16px;
}

.task-subtask-row {
  border-top: 0;
}

.skin-dark .task-subtask-row {
  background: rgba(255, 255, 255, 0.02);
}

.skin-light .task-subtask-row {
  background: rgba(15, 23, 42, 0.02);
}

.task-subtask-cell {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
  padding: 10px 11px;
}

.task-subtask-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.task-subtask-heading {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.task-subtask-add summary {
  list-style: none;
}

.task-subtask-add summary::-webkit-details-marker {
  display: none;
}

.task-subtask-add-toggle {
  width: fit-content;
}

.task-subtask-form {
  border: 1px solid;
  border-radius: 8px;
  display: grid;
  gap: 8px;
  margin-top: 8px;
  max-width: 460px;
  padding: 12px;
}

.skin-dark .task-subtask-form {
  background: var(--bg-dark-control);
  border-color: var(--border-dark);
}

.skin-light .task-subtask-form {
  background: var(--bg-light-panel);
  border-color: var(--border-light);
}

.task-subtask-field-label {
  font-size: 12px;
  font-weight: 600;
}

.task-subtask-select {
  border: 1px solid;
  border-radius: 6px;
  color: inherit;
  font-size: 14px;
  min-height: 40px;
  padding: 8px 12px;
  width: 100%;
}

.task-subtask-submit {
  justify-self: start;
}

.task-subtask-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.task-subtask-chip {
  align-items: center;
  border: 1px solid;
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  gap: 4px;
  padding: 3px 4px 3px 10px;
}

.task-subtask-chip form {
  display: inline-flex;
  margin: 0;
}

.task-subtask-remove {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font-size: 15px;
  height: 18px;
  justify-content: center;
  line-height: 1;
  opacity: 0.7;
  padding: 0;
  width: 18px;
}

.task-subtask-remove:hover,
.task-subtask-remove:focus-visible {
  color: var(--danger);
  opacity: 1;
}

.task-subtask-empty {
  font-size: 12px;
  font-weight: 500;
}

.skin-dark .task-subtask-chip {
  background: var(--bg-dark-control);
  border-color: var(--border-dark);
}

.skin-light .task-subtask-chip {
  background: var(--bg-light-panel);
  border-color: var(--border-light);
}

.skin-dark .task-subtask-empty {
  color: var(--muted-dark);
}

.skin-light .task-subtask-empty {
  color: var(--muted-light);
}

.project-file-tabs {
  border-bottom: 1px solid;
  display: flex;
  gap: 0;
  padding: 0 16px;
}

.project-file-tab {
  border-right: 1px solid;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 12px;
  position: relative;
}

.project-file-tab:first-child {
  border-left: 1px solid;
}

.project-file-tab-active {
  color: var(--primary-accent);
}

.project-file-tab-active::after {
  background: var(--primary-accent);
  border-radius: 999px;
  bottom: -1px;
  content: "";
  height: 2px;
  left: 10px;
  position: absolute;
  right: 10px;
}

.project-side-panel {
  padding: 14px;
}

.project-side-panel .progress-meter {
  margin-bottom: 12px;
}

.project-state-actions,
.project-side-budget {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.project-state-actions {
  border-bottom: 1px solid;
  padding-bottom: 12px;
}

.project-side-budget {
  padding-top: 12px;
}

.project-side-heading {
  border-bottom: 0;
  padding: 0 0 12px;
}

.project-side-heading strong,
.project-side-budget strong,
.project-budget-heading span {
  font-size: 14px;
}

.project-empty-table {
  border-top: 1px solid;
  margin-top: 12px;
  padding-top: 12px;
}

.skin-dark .project-panel-heading,
.skin-dark .project-side-heading,
.skin-dark .project-budget-heading,
.skin-dark .project-panel-block,
.skin-dark .project-file-tabs,
.skin-dark .project-file-tab,
.skin-dark .project-state-actions,
.skin-dark .project-empty-table {
  border-color: var(--border-dark);
}

.skin-light .project-panel-heading,
.skin-light .project-side-heading,
.skin-light .project-budget-heading,
.skin-light .project-panel-block,
.skin-light .project-file-tabs,
.skin-light .project-file-tab,
.skin-light .project-state-actions,
.skin-light .project-empty-table {
  border-color: var(--border-light);
}

.skin-dark .project-block-label,
.skin-dark .project-readonly-label,
.skin-dark .project-readonly-value,
.skin-dark .project-client-summary,
.skin-dark .project-empty-table {
  color: var(--muted-dark);
}

.skin-light .project-block-label,
.skin-light .project-readonly-label,
.skin-light .project-readonly-value,
.skin-light .project-client-summary,
.skin-light .project-empty-table {
  color: var(--muted-light);
}

.project-invoice-actions {
  border-top: 1px solid;
  margin-top: 12px;
  padding-top: 12px;
}

.project-invoice-list {
  border-top: 1px solid;
  display: grid;
  margin-top: 12px;
}

.project-invoice-link {
  align-items: center;
  border-bottom: 1px solid;
  color: inherit;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 0;
  text-decoration: none;
}

.project-invoice-link span:first-child {
  display: grid;
  gap: 2px;
}

.project-invoice-link small {
  font-size: 11px;
  font-weight: 600;
}

.skin-dark .project-invoice-actions,
.skin-dark .project-invoice-list,
.skin-dark .project-invoice-link {
  border-color: var(--border-dark);
}

.skin-light .project-invoice-actions,
.skin-light .project-invoice-list,
.skin-light .project-invoice-link {
  border-color: var(--border-light);
}

.skin-dark .project-invoice-link small {
  color: var(--muted-dark);
}

.skin-light .project-invoice-link small {
  color: var(--muted-light);
}

.record-sheet-invoices {
  --sheet-columns: minmax(360px, 1.8fr) minmax(220px, 0.95fr) minmax(120px, 0.55fr);
  --sheet-min-width: 720px;
}

.record-sheet-invoices-carptech {
  --sheet-columns: minmax(340px, 1.6fr) minmax(190px, 0.8fr) minmax(120px, 0.5fr) minmax(100px, auto);
  --sheet-min-width: 820px;
}

.record-sheet-messages {
  --sheet-columns: minmax(280px, 1.4fr) minmax(170px, 0.75fr) minmax(180px, 0.8fr) minmax(140px, 0.6fr) minmax(120px, auto);
  --sheet-min-width: 900px;
}

.message-workspace {
  --message-workspace-gap: 16px;
  display: grid;
  gap: var(--message-workspace-gap);
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
}

.message-workspace-list {
  grid-template-columns: minmax(0, 1fr);
}

.message-thread-list {
  align-content: start;
  display: grid;
  gap: 10px;
  grid-auto-rows: max-content;
  position: relative;
  z-index: 2;
}

.message-reader {
  --message-reader-padding: 16px;
  align-content: start;
  border: 1px solid;
  border-radius: 10px;
  display: grid;
  gap: 14px;
  min-height: 520px;
  overflow: hidden;
  padding: 16px;
  position: relative;
  z-index: 1;
}

.message-reader-inbox {
  grid-template-rows: auto auto auto;
}

.message-thread-link {
  color: inherit;
  text-decoration: none;
}

.communication-record-main {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 36px minmax(0, 1fr);
  min-width: 0;
}

.communication-record {
  border: 1px solid;
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  padding: 12px 14px;
  position: relative;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 160ms ease;
}

.communication-record-training-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
  position: absolute;
  bottom: 8px;
  right: 10px;
  z-index: 3;
}

.communication-training-form {
  display: inline-flex;
  margin: 0;
}

.communication-training-button {
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 5px;
  cursor: pointer;
  font: inherit;
  font-size: 9px;
  font-weight: 750;
  line-height: 1;
  min-height: 23px;
  padding: 4px 7px;
}

.skin-dark .communication-training-button {
  background: var(--bg-dark-panel);
  color: var(--muted-dark);
}

.skin-light .communication-training-button {
  background: var(--bg-light-elevated);
}

.communication-training-button:hover,
.communication-training-button:focus-visible,
.communication-training-button.is-active {
  background: var(--primary-accent);
  border-color: var(--primary-accent);
  color: var(--bg-light-elevated);
}

.communication-training-button:focus-visible {
  outline: 2px solid var(--primary-accent);
  outline-offset: 2px;
}

.communication-training-button-delete:hover,
.communication-training-button-delete:focus-visible {
  background: #b42318;
  border-color: #b42318;
  color: #fff;
}

.communication-record-icon-cell {
  align-items: center;
  display: flex;
  justify-content: center;
}

.communication-record-icon-cell.has-contact {
  flex-direction: column;
  gap: 4px;
}

.communication-record-icon-cell .record-object-icon {
  height: 30px;
  width: 30px;
}

.communication-record-icon-cell.has-contact .record-object-icon {
  height: 18px;
  width: 18px;
}

.communication-record-avatar {
  border-radius: 6px;
  font-size: 10px;
  height: 28px;
  width: 28px;
}

.communication-record-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.communication-record-meta {
  align-items: center;
  display: flex;
  font-size: 10px;
  font-weight: 650;
  gap: 8px;
  justify-content: space-between;
  letter-spacing: 0.025em;
  line-height: 1.25;
  min-width: 0;
  text-transform: uppercase;
}

.communication-record-meta time,
.communication-record-meta > span:last-child:not(:first-child) {
  flex: 0 0 auto;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.communication-record-state {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.communication-record-subject {
  font-size: 14px;
  font-weight: 750;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.communication-record-summary {
  display: -webkit-box;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.skin-dark .communication-record {
  background: var(--primary-dark-soft);
  border-color: #343438;
}

.skin-light .communication-record {
  background: var(--bg-light-elevated);
  border-color: var(--border-light);
}

.skin-dark .communication-record-meta,
.skin-dark .communication-record-summary {
  color: var(--muted-dark);
}

.skin-light .communication-record-meta,
.skin-light .communication-record-summary {
  color: var(--muted-light);
}

.skin-dark .communication-record:hover,
.skin-dark .communication-record:focus-visible,
.skin-dark .communication-record.is-active {
  background: rgba(39, 39, 42, 0.46);
  border-color: #45454b;
  box-shadow: inset 3px 0 0 var(--primary-accent), 0 0 8px rgba(0, 0, 0, 0.12);
  z-index: 4;
}

.skin-light .communication-record:hover,
.skin-light .communication-record:focus-visible,
.skin-light .communication-record.is-active {
  background: #f7fbf8;
  border-color: #bfd0c4;
  box-shadow: inset 3px 0 0 var(--primary-accent), 0 0 8px rgba(30, 42, 34, 0.07);
  z-index: 4;
}

.skin-dark .message-workspace {
  --message-selected-border: color-mix(in srgb, var(--primary-accent) 32%, var(--border-dark));
  --message-selected-surface: color-mix(in srgb, var(--primary-accent) 11%, var(--bg-dark-panel));
}

.skin-light .message-workspace {
  --message-selected-border: color-mix(in srgb, var(--primary-accent) 25%, var(--border-light));
  --message-selected-surface: color-mix(in srgb, var(--primary-accent) 8%, var(--bg-light-elevated));
}

.skin-dark .communication-record.is-active,
.skin-light .communication-record.is-active {
  background: var(--message-selected-surface);
  border-color: var(--message-selected-border);
}

@media (min-width: 601px) {
  .skin-dark .communication-record.is-active,
  .skin-light .communication-record.is-active {
    border-radius: 8px 0 0 8px;
    border-right-color: transparent;
    z-index: 2;
  }

  .message-workspace-reading-top .message-reader {
    border-top-left-radius: 0;
  }
}

.communication-record.is-active::after {
  background: var(--message-selected-surface);
  border-bottom: 1px solid var(--message-selected-border);
  border-top: 1px solid var(--message-selected-border);
  bottom: -1px;
  content: "";
  left: 100%;
  position: absolute;
  top: -1px;
  width: calc(var(--message-workspace-gap) + 2px);
}

.communication-record:focus-visible {
  outline: 2px solid var(--primary-accent);
  outline-offset: 2px;
}

.skin-dark .message-reader {
  background: color-mix(in srgb, var(--primary-accent) 11%, var(--bg-dark-panel));
  border-color: color-mix(in srgb, var(--primary-accent) 32%, var(--border-dark));
}

.skin-light .message-reader {
  background: color-mix(in srgb, var(--primary-accent) 8%, var(--bg-light-elevated));
  border-color: color-mix(in srgb, var(--primary-accent) 25%, var(--border-light));
}

.message-reader-heading {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.message-reader-heading > div {
  display: grid;
  gap: 3px;
}

.message-reader-heading h3 {
  font-size: 18px;
  line-height: 1.2;
}

.message-reader-list-link {
  white-space: nowrap;
}

.message-reader .message-reader-tabs {
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid color-mix(in srgb, var(--primary-accent) 24%, transparent);
  display: flex;
  gap: 0;
  margin: 0 calc(-1 * var(--message-reader-padding));
  max-width: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: none;
  padding: 0;
  scrollbar-width: none;
}

.message-reader .message-reader-tabs::-webkit-scrollbar {
  display: none;
}

.message-reader .message-reader-tabs .entity-tab {
  align-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 7px;
  justify-content: flex-start;
  min-height: 40px;
  padding: 8px 12px;
}

.message-reader .message-reader-tabs .entity-tab:first-child {
  padding-left: var(--message-reader-padding);
}

.message-reader .message-reader-tabs .entity-tab-active::after {
  border-radius: 0;
  bottom: -1px;
  left: 0;
  right: 0;
}

.message-reader-tab-count {
  align-items: center;
  background: var(--primary-accent);
  border-radius: 999px;
  color: var(--bg-light-elevated);
  display: inline-flex;
  font-size: 10px;
  font-weight: 800;
  height: 18px;
  justify-content: center;
  min-width: 18px;
  padding: 0 5px;
}

.skin-dark .message-reader-tab-count {
  color: var(--bg-dark);
}

.message-reader-panel {
  align-content: start;
  display: grid;
  gap: 14px;
}

.message-reader-inbox > .message-reader-panel {
  overflow-y: visible;
}

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

.message-reader-section-heading > div:first-child {
  display: grid;
  gap: 2px;
}

.message-reader-section-heading h4 {
  font-size: 14px;
  line-height: 1.2;
  margin: 0;
}

.message-reader-section-heading time,
.message-reader-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.skin-dark .message-reader-section-heading time,
.skin-dark .message-reader-eyebrow {
  color: var(--muted-dark);
}

.skin-light .message-reader-section-heading time,
.skin-light .message-reader-eyebrow {
  color: var(--muted-light);
}

.message-focus-card,
.message-reply-suggestion,
.message-reader-empty {
  border: 1px solid;
  border-radius: 8px;
}

.message-focus-card {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.message-focus-sender {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: 34px minmax(0, 1fr);
}

.message-focus-avatar {
  align-items: center;
  border: 1px solid;
  border-radius: 6px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.message-focus-sender > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.message-focus-sender strong,
.message-focus-sender span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-focus-sender span,
.message-focus-body,
.message-reply-copy,
.message-chat-bubble,
.message-action-card {
  font-size: 13px;
  line-height: 1.45;
}

.message-focus-body p + p,
.message-reply-copy p + p,
.message-chat-bubble p + p {
  margin-top: 10px;
}

.message-email-frame {
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 6px;
  display: block;
  height: 420px;
  max-width: 100%;
  overflow: hidden;
  width: 100%;
}

.message-email-html-container {
  max-width: 100%;
  width: 100%;
}

.message-email-plain {
  overflow-wrap: anywhere;
}

.message-reply-suggestion {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.message-reply-copy {
  display: grid;
  gap: 8px;
}

.message-reply-copy > strong {
  font-size: 13px;
}

.message-reply-form {
  display: grid;
  gap: 12px;
}

.message-reply-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.message-reply-actions form {
  margin: 0;
}

.message-reply-actions > span {
  font-size: 11px;
}

.message-reader-empty {
  font-size: 13px;
  padding: 18px;
}

.skin-dark .message-focus-card,
.skin-dark .message-reader-empty {
  background: color-mix(in srgb, var(--primary-accent) 6%, var(--bg-dark-elevated));
  border-color: color-mix(in srgb, var(--primary-accent) 22%, var(--border-dark));
}

.skin-light .message-focus-card,
.skin-light .message-reader-empty {
  background: color-mix(in srgb, var(--primary-accent) 3%, var(--bg-light-elevated));
  border-color: color-mix(in srgb, var(--primary-accent) 18%, var(--border-light));
}

.skin-dark .message-reply-suggestion,
.skin-light .message-reply-suggestion {
  background: transparent;
  border-color: transparent;
}

.skin-dark .message-focus-avatar {
  background: color-mix(in srgb, var(--primary-accent) 12%, var(--bg-dark-panel));
  border-color: color-mix(in srgb, var(--primary-accent) 34%, var(--border-dark));
  color: var(--primary-accent);
}

.skin-light .message-focus-avatar {
  background: color-mix(in srgb, var(--primary-accent) 8%, var(--bg-light-elevated));
  border-color: color-mix(in srgb, var(--primary-accent) 30%, var(--border-light));
  color: var(--primary-accent);
}

.skin-dark .message-focus-sender span,
.skin-dark .message-reply-actions > span,
.skin-dark .message-reader-empty {
  color: var(--muted-dark);
}

.skin-light .message-focus-sender span,
.skin-light .message-reply-actions > span,
.skin-light .message-reader-empty {
  color: var(--muted-light);
}

.message-timeline {
  --message-timeline-rail-x: 12px;
  display: grid;
  gap: 0;
  position: relative;
}

.message-timeline::before {
  border-left: 1px solid;
  bottom: 13px;
  content: "";
  left: var(--message-timeline-rail-x);
  position: absolute;
  top: 13px;
}

.message-timeline-start,
.message-timeline-gap,
.message-timeline-event,
.message-timeline-current-state {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  position: relative;
}

.message-timeline-start,
.message-timeline-current-state {
  align-items: center;
}

.message-timeline-start {
  padding-bottom: 13px;
}

.message-timeline-start-marker,
.message-timeline-current-marker,
.message-timeline-event-marker,
.message-timeline-gap-marker {
  align-self: start;
  background: var(--primary-accent);
  border: 2px solid;
  border-radius: 50%;
  height: 11px;
  justify-self: center;
  margin-top: 3px;
  position: relative;
  width: 11px;
  z-index: 1;
}

.message-timeline-start > div,
.message-timeline-current-state > div {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 10px;
  gap: 4px 9px;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.message-timeline-start time,
.message-timeline-current-state span {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.message-timeline-gap {
  align-items: center;
  min-height: 46px;
}

.message-timeline-gap.is-near {
  min-height: 28px;
}

.message-timeline-gap.is-short {
  min-height: 48px;
}

.message-timeline-gap.is-medium {
  min-height: 76px;
}

.message-timeline-gap.is-long {
  min-height: 112px;
}

.message-timeline-gap.is-very-long {
  min-height: 150px;
}

.message-timeline-gap.is-week-plus {
  min-height: 210px;
}

.message-timeline-gap-marker {
  border-radius: 999px;
  height: 5px;
  margin-top: 0;
  width: 5px;
}

.message-timeline-gap-copy {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 10px;
  gap: 6px;
}

.message-timeline-gap-copy strong,
.message-timeline-gap-copy span {
  border-radius: 999px;
  font-weight: 650;
  padding: 3px 7px;
}

.message-timeline-event {
  align-items: start;
}

.message-timeline-event-marker {
  height: 13px;
  margin-top: 13px;
  width: 13px;
}

.message-timeline-event-outbound .message-timeline-event-marker {
  box-shadow: inset 0 0 0 3px var(--primary-accent);
}

.message-timeline-card {
  border: 1px solid;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.45;
  max-width: 92%;
  padding: 12px 14px;
}

.message-timeline-event-outbound .message-timeline-card {
  justify-self: end;
}

.message-timeline-meta {
  align-items: start;
  display: flex;
  font-size: 10px;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 7px;
}

.message-timeline-meta > div {
  display: grid;
  gap: 1px;
}

.message-timeline-meta span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.message-timeline-meta time {
  white-space: nowrap;
}

.message-timeline-current-state {
  padding-top: 14px;
}

.message-timeline-current-marker {
  animation: message-timeline-pulse 1800ms ease-in-out infinite;
}

.message-timeline-current-state > div {
  border: 1px solid;
  border-radius: 7px;
  padding: 7px 9px;
}

.message-timeline-current-state.is-waiting-on-us > div {
  border-color: color-mix(in srgb, var(--primary-accent) 42%, transparent);
}

.skin-dark .message-timeline::before,
.skin-dark .message-timeline-start-marker,
.skin-dark .message-timeline-current-marker,
.skin-dark .message-timeline-event-marker,
.skin-dark .message-timeline-gap-marker {
  border-color: color-mix(in srgb, var(--primary-accent) 38%, var(--border-dark));
}

.skin-light .message-timeline::before,
.skin-light .message-timeline-start-marker,
.skin-light .message-timeline-current-marker,
.skin-light .message-timeline-event-marker,
.skin-light .message-timeline-gap-marker {
  border-color: color-mix(in srgb, var(--primary-accent) 32%, var(--border-light));
}

.skin-dark .message-timeline-start,
.skin-dark .message-timeline-current-state,
.skin-dark .message-timeline-meta,
.skin-dark .message-timeline-gap-copy {
  color: var(--muted-dark);
}

.skin-light .message-timeline-start,
.skin-light .message-timeline-current-state,
.skin-light .message-timeline-meta,
.skin-light .message-timeline-gap-copy {
  color: var(--muted-light);
}

.skin-dark .message-timeline-card,
.skin-dark .message-timeline-current-state > div,
.skin-dark .message-timeline-gap-copy strong,
.skin-dark .message-timeline-gap-copy span {
  background: var(--bg-dark-elevated);
  border-color: var(--border-dark);
}

.skin-light .message-timeline-card,
.skin-light .message-timeline-current-state > div,
.skin-light .message-timeline-gap-copy strong,
.skin-light .message-timeline-gap-copy span {
  background: var(--bg-light-elevated);
  border-color: var(--border-light);
}

.skin-dark .message-timeline-event-outbound .message-timeline-card,
.skin-dark .message-timeline-gap.is-unanswered .message-timeline-gap-copy span {
  background: color-mix(in srgb, var(--primary-accent) 14%, var(--bg-dark-elevated));
  border-color: color-mix(in srgb, var(--primary-accent) 30%, var(--border-dark));
}

.skin-light .message-timeline-event-outbound .message-timeline-card,
.skin-light .message-timeline-gap.is-unanswered .message-timeline-gap-copy span {
  background: color-mix(in srgb, var(--primary-accent) 7%, var(--bg-light-elevated));
  border-color: color-mix(in srgb, var(--primary-accent) 24%, var(--border-light));
}

@keyframes message-timeline-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-accent) 30%, transparent);
  }

  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-accent) 0%, transparent);
  }
}

.message-chat-stream {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.message-chat-bubble {
  border: 1px solid;
  border-radius: 12px 12px 12px 4px;
  max-width: 88%;
  padding: 12px 14px;
}

.message-chat-bubble-outbound {
  align-self: flex-end;
  border-radius: 12px 12px 4px 12px;
}

.message-chat-meta {
  align-items: center;
  display: flex;
  font-size: 10px;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 6px;
}

.message-chat-meta time {
  white-space: nowrap;
}

.skin-dark .message-chat-bubble-inbound {
  background: var(--bg-dark-elevated);
  border-color: var(--border-dark);
}

.skin-dark .message-chat-bubble-outbound {
  background: color-mix(in srgb, var(--primary-accent) 18%, var(--bg-dark-panel));
  border-color: color-mix(in srgb, var(--primary-accent) 34%, var(--border-dark));
}

.skin-light .message-chat-bubble-inbound {
  background: var(--bg-light-elevated);
  border-color: var(--border-light);
}

.skin-light .message-chat-bubble-outbound {
  background: color-mix(in srgb, var(--primary-accent) 9%, var(--bg-light-elevated));
  border-color: color-mix(in srgb, var(--primary-accent) 26%, var(--border-light));
}

.skin-dark .message-chat-meta,
.skin-dark .message-classification-note {
  color: var(--muted-dark);
}

.skin-light .message-chat-meta,
.skin-light .message-classification-note {
  color: var(--muted-light);
}

.message-classification-note {
  border-top: 1px solid currentColor;
  font-size: 10px;
  margin-top: 10px;
  opacity: 0.8;
  padding-top: 8px;
}

.message-actions-heading .btn,
.message-action-controls form {
  margin: 0;
}

.message-action-list {
  display: grid;
  gap: 10px;
}

.message-action-card {
  align-items: center;
  border: 1px solid;
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  padding: 12px;
}

.message-action-icon {
  background: currentColor;
  display: block;
  height: 30px;
  -webkit-mask: var(--message-action-icon) center / contain no-repeat;
  mask: var(--message-action-icon) center / contain no-repeat;
  width: 30px;
}

.message-action-icon-calendar_event {
  --message-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.35' viewBox='0 0 24 24'%3E%3Crect width='18' height='17' x='3' y='4' rx='2'/%3E%3Cpath d='M8 2v4M16 2v4M3 9h18M8 13h.01M12 13h.01M16 13h.01M8 17h.01M12 17h.01'/%3E%3C/svg%3E");
}

.message-action-icon-ticket {
  --message-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.35' viewBox='0 0 24 24'%3E%3Cpath d='M3 8a2 2 0 0 0 2-2h14a2 2 0 0 0 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 0-2 2H5a2 2 0 0 0-2-2v-3a2 2 0 0 0 0-4V8Z'/%3E%3Cpath d='M13 5v2M13 11v2M13 17v2'/%3E%3C/svg%3E");
}

.message-action-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.message-action-copy > strong {
  font-size: 13px;
  line-height: 1.25;
}

.message-action-copy > p {
  font-size: 12px;
}

.message-action-meta,
.message-action-context {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 10px;
  gap: 6px 10px;
}

.message-action-meta {
  justify-content: space-between;
  text-transform: uppercase;
}

.message-action-controls {
  justify-self: end;
}

.skin-dark .message-action-card {
  background: color-mix(in srgb, var(--primary-accent) 5%, var(--bg-dark-elevated));
  border-color: color-mix(in srgb, var(--primary-accent) 20%, var(--border-dark));
}

.skin-light .message-action-card {
  background: color-mix(in srgb, var(--primary-accent) 3%, var(--bg-light-elevated));
  border-color: color-mix(in srgb, var(--primary-accent) 18%, var(--border-light));
}

.message-action-card.is-accepted {
  opacity: 0.72;
}

.skin-dark .message-action-icon,
.skin-dark .message-action-meta,
.skin-dark .message-action-context {
  color: var(--muted-dark);
}

.skin-light .message-action-icon,
.skin-light .message-action-meta,
.skin-light .message-action-context {
  color: var(--muted-light);
}

.message-body-panel {
  border: 1px solid;
  border-radius: 8px;
  padding: 14px;
}

.skin-dark .message-body-panel {
  border-color: var(--border-dark);
}

.skin-light .message-body-panel {
  border-color: var(--border-light);
}

.email-setup-shell {
  display: grid;
  gap: 16px;
}

.communications-shell {
  display: grid;
  gap: 16px;
}

.communications-tabs {
  -webkit-overflow-scrolling: touch;
  display: flex;
  max-width: 100%;
  margin-bottom: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: none;
  scrollbar-width: none;
  width: 100%;
}

.communications-tabs::-webkit-scrollbar {
  display: none;
}

.communications-account-tab,
.communications-informational-tab,
.communications-junk-tab {
  flex: 0 0 auto;
  white-space: nowrap;
}

.communications-informational-tab {
  margin-left: auto;
}

.communications-tab-panel {
  display: grid;
  gap: 16px;
}

.communications-email-summary {
  align-items: start;
  display: flex;
  gap: 24px;
  justify-content: space-between;
}

.communications-email-summary > div {
  max-width: 780px;
}

.communications-no-accounts {
  display: grid;
  gap: 8px;
}

.communications-inbox-heading {
  align-items: center;
  margin-bottom: 16px;
}

.communications-refresh-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.communications-status,
.communications-empty-state {
  border: 1px solid;
  border-radius: 8px;
  display: grid;
  gap: 6px;
  padding: 14px 16px;
}

.communications-empty-state span {
  color: var(--muted-dark);
}

.skin-light .communications-empty-state span {
  color: var(--muted-light);
}

.skin-dark .communications-empty-state {
  background: rgba(39, 39, 42, 0.34);
  border-color: var(--border-dark);
}

.skin-light .communications-empty-state {
  background: rgba(216, 227, 242, 0.32);
  border-color: var(--border-light);
}

.communications-status-error {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.4);
}

.communications-compose-from {
  display: grid;
  gap: 6px;
}

.communications-compose-from span {
  font-size: 13px;
  font-weight: 600;
}

.communications-compose-from strong {
  align-items: center;
  border: 1px solid;
  border-radius: 8px;
  display: flex;
  min-height: 44px;
  overflow-wrap: anywhere;
  padding: 8px 10px;
}

.skin-dark .communications-compose-from strong {
  background: var(--bg-dark-control);
  border-color: var(--border-dark);
}

.skin-light .communications-compose-from strong {
  border-color: var(--border-light);
}

.email-setup-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
}

.email-simple-connect-form {
  display: grid;
  gap: 12px;
  max-width: 520px;
}

.email-connected-panel {
  padding: 0;
}

.email-connected-list {
  display: grid;
}

.email-connected-row {
  align-items: center;
  border-top: 1px solid;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.5fr) auto;
  padding: 14px 16px;
}

.email-connected-row > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.email-connected-row span:not(.status-pill) {
  color: var(--muted-dark);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.skin-light .email-connected-row span:not(.status-pill) {
  color: var(--muted-light);
}

.skin-dark .email-connected-row {
  border-color: var(--border-dark);
}

.skin-light .email-connected-row {
  border-color: var(--border-light);
}

.email-requirements {
  display: grid;
  gap: 14px;
}

.email-requirement-list {
  display: grid;
  gap: 10px;
}

.email-requirement-list > div {
  border: 1px solid;
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 12px;
}

.email-requirement-list span {
  font-size: 13px;
  line-height: 1.45;
}

.skin-dark .email-requirement-list > div {
  border-color: var(--border-dark);
}

.skin-light .email-requirement-list > div {
  border-color: var(--border-light);
}

.skin-dark .email-requirement-list span {
  color: var(--muted-dark);
}

.skin-light .email-requirement-list span {
  color: var(--muted-light);
}

.invoice-amount-period-cell {
  align-content: center;
  align-items: start;
  display: grid;
  gap: 3px;
}

.invoice-show-page {
  display: grid;
  gap: 14px;
}

.invoice-document,
.invoice-actions-panel,
.invoice-form-panel {
  padding: 0;
}

.invoice-document-toolbar,
.invoice-overview-grid,
.invoice-notes-grid,
.invoice-actions-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.invoice-document-toolbar {
  align-items: center;
  border-bottom: 1px solid;
  display: flex;
  flex-wrap: wrap;
}

.invoice-overview-grid,
.invoice-notes-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(345px, 1.1fr);
}

.invoice-overview-grid {
  row-gap: 32px;
}

.invoice-party-column,
.invoice-meta-column {
  display: grid;
  grid-row: 1 / span 2;
  grid-template-rows: subgrid;
}

.invoice-party-column {
  grid-column: 1;
}

.invoice-meta-column {
  border-left: 1px solid;
  grid-column: 2;
  padding-left: 18px;
}

.invoice-logo {
  display: block;
  max-width: 260px;
  width: 100%;
}

.invoice-logo-company {
  max-width: 430px;
}

.invoice-from,
.invoice-client-address,
.invoice-project-meta,
.invoice-summary-box {
  min-width: 0;
}

.invoice-from address,
.invoice-client-address,
.invoice-summary-box dl,
.invoice-project-meta dl {
  font-style: normal;
  line-height: 1.45;
}

.invoice-client-address {
  display: flex;
  flex-direction: column;
}

.invoice-address-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.invoice-summary-box h2 {
  font-size: 18px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.invoice-summary-box dl,
.invoice-project-meta dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.invoice-summary-box dl > div,
.invoice-project-meta dl > div {
  display: grid;
  gap: 10px;
  grid-template-columns: 110px minmax(0, 1fr);
}

.invoice-summary-box dt,
.invoice-project-meta dt {
  font-weight: 600;
}

.invoice-summary-box dd,
.invoice-project-meta dd {
  font-weight: 700;
  margin: 0;
  text-align: right;
}

.invoice-line-header,
.invoice-task-row,
.invoice-charge-row,
.invoice-day-row {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(260px, 1.8fr) minmax(100px, 0.6fr) minmax(90px, 0.55fr) minmax(120px, 0.7fr) minmax(120px, 0.7fr) minmax(74px, 0.4fr);
  min-width: 900px;
}

.invoice-line-header {
  border-bottom: 1px solid;
  border-top: 1px solid;
  font-size: 11px;
  font-weight: 800;
  padding: 10px 16px;
  text-transform: uppercase;
}

.invoice-charge-list {
  overflow-x: auto;
}

.invoice-task-group {
  min-width: 900px;
}

.invoice-task-row,
.invoice-charge-row,
.invoice-day-row {
  align-items: center;
  border-bottom: 1px solid;
  padding: 7px 16px;
}

.invoice-task-row {
  font-weight: 700;
}

.invoice-task-row span,
.invoice-day-row span {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  margin-left: 8px;
}

.invoice-charge-row {
  font-weight: 600;
  padding-left: 28px;
}

.invoice-day-row {
  font-size: 12px;
  padding-left: 44px;
}

.invoice-hold-button {
  min-height: 26px;
  padding: 0 10px;
}

.invoice-total-table {
  border-bottom: 1px solid;
  display: grid;
  gap: 4px;
  justify-content: end;
  padding: 16px;
}

.invoice-total-table > div {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(160px, 1fr) minmax(120px, auto);
  text-align: right;
  text-transform: uppercase;
}

.invoice-notes-grid {
  border-bottom: 1px solid;
}

.invoice-notes-grid h2 {
  font-size: 13px;
  margin-bottom: 8px;
}

.invoice-footer {
  font-size: 12px;
  line-height: 1.5;
  padding: 16px;
  text-align: center;
}

.invoice-actions-panel {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

.invoice-actions-panel form {
  margin: 0;
}

.skin-dark .invoice-document-toolbar,
.skin-dark .invoice-meta-column,
.skin-dark .invoice-line-header,
.skin-dark .invoice-task-row,
.skin-dark .invoice-charge-row,
.skin-dark .invoice-day-row,
.skin-dark .invoice-total-table,
.skin-dark .invoice-notes-grid {
  border-color: var(--border-dark);
}

.skin-light .invoice-document-toolbar,
.skin-light .invoice-meta-column,
.skin-light .invoice-line-header,
.skin-light .invoice-task-row,
.skin-light .invoice-charge-row,
.skin-light .invoice-day-row,
.skin-light .invoice-total-table,
.skin-light .invoice-notes-grid {
  border-color: var(--border-light);
}

.skin-dark .invoice-line-header,
.skin-dark .invoice-task-row {
  background: #141414;
}

.skin-light .invoice-line-header,
.skin-light .invoice-task-row {
  background: #f5f8fc;
}

.skin-dark .invoice-charge-row,
.skin-dark .invoice-day-row {
  color: var(--muted-dark);
}

.skin-light .invoice-charge-row,
.skin-light .invoice-day-row {
  color: var(--muted-light);
}

.invoice-print-body {
  background: #eef1f5;
  color: #111827;
  font-family: "Source Sans Pro", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.35;
}

.invoice-print-toolbar {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin: 18px auto 12px;
  max-width: 960px;
  width: calc(100% - 32px);
}

.invoice-print-page {
  background: #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
  margin: 0 auto 36px;
  max-width: 960px;
  min-height: 11in;
  padding: 44px 52px 36px;
  position: relative;
  width: calc(100% - 32px);
}

.invoice-print-header,
.invoice-print-client-grid {
  display: grid;
  gap: 34px;
  grid-template-columns: minmax(0, 1fr) 300px;
}

.invoice-print-header {
  align-items: start;
  margin-bottom: 30px;
}

.invoice-print-logo {
  display: block;
  margin-bottom: 12px;
  max-width: 310px;
  width: 48%;
}

.invoice-print-from address,
.invoice-print-client-address {
  font-style: normal;
}

.invoice-print-summary,
.invoice-print-project-meta {
  border-left: 1px solid #d6dbe4;
  padding-left: 22px;
}

.invoice-print-summary h1 {
  font-size: 22px;
  letter-spacing: 0.04em;
  margin: 0 0 14px;
  text-transform: uppercase;
}

.invoice-print-summary dl,
.invoice-print-project-meta dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.invoice-print-summary dl > div,
.invoice-print-project-meta dl > div {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.invoice-print-summary dt,
.invoice-print-project-meta dt {
  color: #4b5563;
  font-weight: 600;
}

.invoice-print-summary dd,
.invoice-print-project-meta dd {
  margin: 0;
  text-align: right;
}

.invoice-print-client-grid {
  margin-bottom: 30px;
}

.invoice-print-lines {
  border-top: 1px solid #d6dbe4;
  margin-top: 8px;
}

.invoice-print-row {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) 92px 82px 100px 100px;
  padding: 7px 8px;
}

.invoice-print-line-header,
.invoice-print-task-row {
  border-bottom: 1px solid #d6dbe4;
  font-weight: 700;
}

.invoice-print-line-header {
  color: #111827;
}

.invoice-print-task-group {
  break-inside: avoid;
}

.invoice-print-task-row {
  background: #f6f8fb;
  margin-top: 10px;
}

.invoice-print-task-row span,
.invoice-print-day-row span {
  color: #6b7280;
  display: block;
  font-size: 12px;
}

.invoice-print-charge-row {
  border-bottom: 1px solid #edf0f4;
}

.invoice-print-day-row {
  border-bottom: 1px solid #f1f3f6;
  color: #374151;
  padding-left: 28px;
}

.invoice-print-row > div:nth-child(2),
.invoice-print-row > div:nth-child(3),
.invoice-print-row > div:nth-child(4),
.invoice-print-row > div:nth-child(5) {
  text-align: right;
}

.invoice-print-empty {
  color: #6b7280;
  padding: 18px 8px;
}

.invoice-print-total-table {
  display: grid;
  gap: 6px;
  justify-content: end;
  margin: 22px 0 56px auto;
  width: 310px;
}

.invoice-print-total-table > div {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 110px;
  text-align: right;
}

.invoice-print-total-table > div:last-child {
  font-size: 15px;
  text-transform: uppercase;
}

.invoice-print-notes {
  margin-bottom: 42px;
  max-width: 620px;
}

.invoice-print-notes h2 {
  font-size: 14px;
  margin: 0 0 6px;
}

.invoice-print-notes p {
  margin: 0 0 4px;
}

.invoice-print-footer {
  border-top: 1px solid #d6dbe4;
  font-size: 11px;
  margin-top: 28px;
  padding-top: 18px;
  text-align: center;
}

.invoice-print-footer p {
  margin: 0 0 3px;
}

.notification-dropdown {
  position: relative;
  display: inline-block;
}

.notification-button {
  position: relative;
  background: none;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-primary);
}

.notification-button:hover {
  opacity: 0.8;
}

.notification-badge {
  display: inline-block;
  background-color: #dc3545;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -5px;
  right: -5px;
}

.notification-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  z-index: 1000;
  margin-top: 4px;
}

.skin-dark .notification-menu {
  background: #2a2a2a;
  border-color: #444;
}

.notification-list {
  max-height: 300px;
  overflow-y: auto;
}

.notification-empty {
  padding: 16px;
  text-align: center;
  color: #999;
  font-size: 13px;
  margin: 0;
}

.notification-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s;
}

.skin-dark .notification-item {
  border-bottom-color: #444;
}

.notification-item:hover {
  background-color: #f5f5f5;
}

.skin-dark .notification-item:hover {
  background-color: #333;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-icon {
  font-size: 18px;
  min-width: 20px;
  text-align: center;
}

.notification-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.notification-content strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.notification-content small {
  font-size: 12px;
  color: #666;
}

.skin-dark .notification-content small {
  color: #999;
}

.notification-footer {
  padding: 8px 8px;
  border-top: 1px solid #eee;
  background-color: #fafafa;
}

.skin-dark .notification-footer {
  border-top-color: #444;
  background-color: #1f1f1f;
}

.notification-clear-btn {
  width: 100%;
  padding: 6px;
  font-size: 12px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  color: #333;
  border-radius: 4px;
  cursor: pointer;
}

.skin-dark .notification-clear-btn {
  background-color: #333;
  border-color: #555;
  color: #ddd;
}

.notification-clear-btn:hover {
  background-color: #e0e0e0;
}

.skin-dark .notification-clear-btn:hover {
  background-color: #444;
}

.announcement-container {
  margin: 0 0 12px 0;
  padding: 0;
}

.announcement-banner {
  padding: 14px 16px;
  border-radius: 6px;
  margin: 0;
  font-size: 14px;
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.08) 0%, rgba(255, 182, 26, 0.05) 100%);
  border: 1px solid rgba(255, 193, 7, 0.3);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.1);
  animation: slideDown 0.3s ease-out;
}

.announcement-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.announcement-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
}

.announcement-icon-emoji {
  font-size: 18px;
  display: block;
}

.announcement-content {
  flex: 1;
  line-height: 1.5;
  word-break: break-word;
  padding-top: 2px;
}

.announcement-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1;
  transition: color 0.2s ease, background-color 0.2s ease;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.announcement-close:hover {
  background-color: rgba(0, 0, 0, 0.08);
  color: var(--text-primary);
}

.announcement-close-icon {
  display: block;
  font-weight: 300;
  font-size: 16px;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@media (max-width: 600px) {
  .announcement-banner {
    padding: 12px 12px;
    font-size: 13px;
  }
  
  .announcement-wrapper {
    gap: 10px;
  }
  
  .announcement-icon-emoji {
    font-size: 16px;
  }

  .record-sheet-header,
  .record-sheet-row {
    min-width: auto !important;
  }

  .record-sheet-header > div,
  .record-sheet-cell {
    padding: 8px;
    font-size: 12px;
  }

  .record-sheet-cell {
    min-height: 40px;
  }

  .record-sheet,
  .contacts-sheet {
    --sheet-min-width: 100%;
  }

  .message-workspace {
    grid-template-columns: 1fr;
  }

  .message-workspace-reading {
    --message-workspace-gap: 0px;
    align-items: start;
    grid-template-columns: 60px minmax(0, 1fr);
  }

  .message-thread-list {
    gap: 6px;
  }

  .communication-record {
    gap: 0;
    grid-template-columns: 1fr;
    min-height: 58px;
    padding: 6px;
  }

  .skin-dark .communication-record.is-active,
  .skin-light .communication-record.is-active {
    border-radius: 8px 0 0 8px;
    border-right-color: transparent;
    z-index: 2;
  }

  .communication-record-copy {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .communication-record-icon-cell {
    min-height: 44px;
  }

  .communication-record-icon-cell.has-contact {
    gap: 3px;
  }

  .message-reader {
    --message-reader-padding: 12px;
    border-radius: 0 10px 10px 0;
    min-height: 0;
    padding: 12px;
  }

  .message-reader-inbox {
    grid-template-rows: none;
    height: auto;
  }

  .message-reader-inbox > .message-reader-panel {
    overflow-y: visible;
    padding-right: 0;
  }

  .message-reader .message-reader-tabs .entity-tab {
    flex: 0 0 auto;
  }

  .message-reader-section-heading,
  .message-actions-heading {
    align-items: flex-start;
  }

  .message-chat-bubble {
    max-width: 94%;
  }

  .message-action-card {
    align-items: start;
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .message-action-controls {
    grid-column: 2;
    justify-self: start;
  }

  .email-setup-grid {
    grid-template-columns: 1fr;
  }

  .communications-email-summary,
  .communications-inbox-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .communications-refresh-actions {
    justify-content: flex-start;
  }

  .email-connected-row {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .timesheet-cell-form input[type="number"] {
    font-size: 12px;
    padding: 4px;
  }

  .timesheet-cell-submit {
    min-height: 32px;
    min-width: 32px;
    padding: 2px;
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  .app-content-wrapper {
    padding: 16px 12px;
  }

  .dashboard-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .btn {
    padding: 0 8px;
    font-size: 12px;
  }

  input[type="text"],
  input[type="search"],
  input[type="number"],
  input[type="url"],
  input[type="tel"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px;
  }

  .app-topbar {
    padding: 8px 12px;
  }

  .app-topbar-user-info {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
  }

  .topbar-actions {
    gap: 4px;
  }
}

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }

  .content-heading-row {
    flex-direction: column;
    gap: 12px;
  }

  .panel {
    padding: 12px;
    border-radius: 8px;
  }

  .card {
    max-width: 100%;
  }
}

@media (prefers-color-scheme: dark) {
  .announcement-banner {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.05) 0%, rgba(255, 182, 26, 0.03) 100%);
    border-color: rgba(255, 193, 7, 0.25);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  
  .announcement-close {
    color: var(--text-secondary);
  }
  
  .announcement-close:hover {
    background-color: rgba(255, 255, 255, 0.08);
  }
}

@media print {
  @page {
    margin: 0.45in;
    size: letter;
  }

  .invoice-print-body {
    background: #fff;
    color: #000;
    font-size: 11px;
  }

  .invoice-print-toolbar {
    display: none;
  }

  .invoice-print-page {
    box-shadow: none;
    margin: 0;
    max-width: none;
    min-height: auto;
    padding: 0;
    width: 100%;
  }

  .invoice-print-task-group,
  .invoice-print-summary,
  .invoice-print-project-meta,
  .invoice-print-notes,
  .invoice-print-footer {
    break-inside: avoid;
  }
}

.skin-dark .project-contact-header {
  background: #141414;
  border-color: var(--border-dark);
  color: var(--muted-dark);
}

.skin-light .project-contact-header {
  background: var(--light-warm-header);
  border-color: var(--light-warm-border);
  color: var(--light-warm-header-text);
}

.skin-dark .project-contact-row {
  border-color: var(--border-dark);
}

.skin-light .project-contact-row {
  border-color: var(--border-light);
}

.timesheet-detail-heading .content-heading-title {
  font-size: 20px;
}

.timesheet-detail-heading .content-heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.timesheet-detail-heading .dashboard-actions {
  flex-wrap: nowrap;
}

.timesheet-show-page,
.timesheet-grid-panel,
.timesheet-entry-grid {
  min-width: 0;
}

.timesheet-workflow-panel {
  padding: 14px 16px;
}

.timesheet-workflow-actions,
.timesheet-state-cluster,
.timesheet-panel-heading {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.timesheet-state-cluster {
  justify-content: flex-start;
}

.approval-info {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid;
}

.skin-dark .approval-info {
  border-left-color: var(--border-dark);
  color: #aaaaaa;
}

.skin-light .approval-info {
  border-left-color: var(--border-light);
  color: #666666;
}

.approval-label {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.approval-value {
  font-weight: 500;
}

.approval-date {
  font-size: 12px;
  font-style: italic;
}

.timesheet-icon-button {
  font-size: 17px;
  min-width: 30px;
  padding-left: 8px;
  padding-right: 8px;
}

.timesheet-popover-body {
  width: min(920px, calc(100vw - 360px));
}

.timesheet-grid-panel {
  padding: 0;
}

.timesheet-panel-heading {
  border-bottom: 1px solid;
  padding: 14px 16px;
}

.timesheet-panel-heading h2 {
  font-size: 16px;
  line-height: 1.2;
  margin: 0;
}

.timesheet-entry-grid {
  display: grid;
  overflow-x: auto;
  padding: 14px 16px;
}

.timesheet-entry-header,
.timesheet-entry-row {
  display: grid;
  min-width: var(--timesheet-min-width);
}

.timesheet-work-grid .timesheet-entry-header,
.timesheet-work-grid .timesheet-entry-row {
  grid-template-columns: 24px minmax(150px, 1.3fr) minmax(145px, 1.1fr) minmax(145px, 1.1fr) repeat(7, 56px) 60px 70px;
}

.timesheet-expense-grid .timesheet-entry-header,
.timesheet-expense-grid .timesheet-entry-row {
  grid-template-columns: 24px minmax(150px, 1.3fr) minmax(145px, 1.1fr) minmax(145px, 1.1fr) repeat(7, 56px) 60px 70px;
}

.timesheet-entry-grid {
  --timesheet-min-width: 1040px;
}

.timesheet-entry-header {
  border: 1px solid;
  border-bottom: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.timesheet-entry-header > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px 8px;
  text-align: left;
}

.timesheet-entry-header span {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.75;
}

.timesheet-entry-row {
  align-items: stretch;
  border: 1px solid;
  border-bottom: 0;
}

.timesheet-entry-row:last-child {
  border-bottom: 1px solid;
}

.timesheet-row-handle {
  align-self: stretch;
}

.timesheet-entry-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 8px;
}

.timesheet-entry-meta .flip-editor-sheet {
  height: 100%;
  min-height: 52px;
}

.timesheet-entry-meta .flip-editor-sheet .flip-editor-front,
.timesheet-entry-meta .flip-editor-sheet .flip-editor-back {
  min-height: 52px;
}

.timesheet-entry-meta-stack {
  align-content: start;
  gap: 6px;
  padding: 6px;
}

.timesheet-entry-meta strong,
.timesheet-entry-total {
  font-size: 13px;
  line-height: 1.15;
}

.timesheet-entry-meta span {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timesheet-cell-form {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  padding: 8px 4px;
  position: relative;
}

.timesheet-cell-form input[type="number"] {
  font-size: 13px;
  min-height: 28px;
  padding: 4px 5px;
  text-align: right;
}

.timesheet-cell-submit {
  border: 1px solid;
  bottom: 3px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  min-height: 18px;
  padding: 0 5px;
  position: absolute;
  right: 3px;
}

.timesheet-entry-total {
  align-items: center;
  display: flex;
  font-weight: 750;
  justify-content: flex-end;
  padding: 10px 8px;
}

.timesheet-entry-actions {
  align-items: center;
  display: flex;
  padding: 8px;
}

.timesheet-total-row {
  font-weight: 750;
}

.approved-by {
  font-size: 12px;
  text-align: right;
}

.skin-dark .timesheet-panel-heading,
.skin-dark .timesheet-entry-header,
.skin-dark .timesheet-entry-row,
.skin-dark .timesheet-cell-submit {
  border-color: var(--border-dark);
}

.skin-light .timesheet-panel-heading,
.skin-light .timesheet-entry-header,
.skin-light .timesheet-entry-row,
.skin-light .timesheet-cell-submit {
  border-color: var(--border-light);
}

.skin-dark .timesheet-entry-header {
  background: #141414;
  color: var(--muted-dark);
}

.skin-light .timesheet-entry-header {
  background: var(--light-warm-header);
  color: var(--light-warm-header-text);
}

.skin-dark .timesheet-entry-meta span,
.skin-dark .approved-by {
  color: var(--muted-dark);
}

.skin-light .timesheet-entry-meta span,
.skin-light .approved-by {
  color: var(--muted-light);
}

.skin-dark .timesheet-cell-submit {
  background: #141414;
  color: var(--primary-dark);
}

.skin-light .timesheet-cell-submit {
  background: #f8fbff;
  color: var(--primary-light);
}

@media (max-width: 1080px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-utility-rail {
    display: none;
  }

  .app-sidebar {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    transform: translateX(-100%);
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
    width: 260px;
    z-index: 1000;
  }

  .app-sidebar.is-open {
    transform: translateX(0);
  }

  .app-nav-toggle {
    display: inline-flex;
  }

  .app-nav-close {
    display: block;
  }

  .topbar-actions {
    flex-wrap: wrap;
  }

  .contact-grid,
  .company-grid,
  .flip-editor-grid,
  .project-show-layout,
  .project-form-grid,
  .project-row,
  .project-row-facts,
  .directory-form-grid,
  .directory-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .directory-actions {
    justify-content: flex-start;
  }

  .timesheet-workflow-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .entity-dashboard-grid,
  .entity-stat-grid,
  .dashboard-widget-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .dashboard-header,
  .content-heading-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .stats-grid,
  .panel-grid,
  .panel-grid-equal,
  .dashboard-widget-grid,
  .project-create-quick-row,
  .contact-grid,
  .company-grid,
    .company-card-details,
    .entity-modal-editor-grid,
    .flip-editor-grid,
    .contact-detail-grid,
    .detail-two-column,
    .project-show-layout,
    .project-flip-grid,
    .project-row,
    .project-row-facts,
    .project-form-grid,
    .project-stats-grid,
    .directory-form-grid,
    .directory-details,
    .invoice-overview-grid,
    .invoice-notes-grid {
    grid-template-columns: 1fr;
  }

  .invoice-party-column,
  .invoice-meta-column {
    display: contents;
  }

  .invoice-from {
    grid-row: 1;
  }

  .invoice-summary-box {
    grid-row: 2;
  }

  .invoice-client-address {
    grid-row: 3;
  }

  .invoice-project-meta {
    grid-row: 4;
  }

  .dashboard-inline-form {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    gap: 8px;
    margin-bottom: 12px;
  }

  .widget {
    min-height: 82px;
  }

  .stat-box {
    padding: 10px;
  }

  .stat-label {
    font-size: 10px;
    margin-bottom: 2px;
  }

  .stat-value {
    font-size: 14px;
  }

  .dashboard-page-shell .dashboard-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-page-shell .dashboard-actions .btn,
  .dashboard-page-shell .dashboard-actions input[type="submit"].btn,
  .dashboard-page-shell .dashboard-actions button.btn {
    width: 100%;
  }

  .contacts-search {
    width: 100%;
  }

  .entity-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .entity-dashboard-grid,
  .entity-stat-grid {
    grid-template-columns: 1fr;
  }

  .entity-tabs {
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: none;
    scrollbar-width: none;
  }

  .entity-tabs::-webkit-scrollbar {
    display: none;
  }

  .entity-tabs .entity-tab,
  .entity-tabs .dino-tab {
    flex-shrink: 0;
  }

  .entity-detail-list-grid {
    grid-template-columns: 1fr;
  }

  .entity-detail-list-grid > div:nth-last-child(2):nth-child(odd) {
    border-bottom: 1px solid;
  }

  .add-record-popover,
  .add-record-popover-body {
    width: 100%;
  }

  .add-record-popover-body {
    position: static;
  }

  .search-input {
    min-width: 0;
    width: 100%;
  }

  .app-content-wrapper {
    padding: 16px;
  }

  .dashboard-page-shell {
    max-width: 100%;
  }

  .panel {
    padding: 12px;
  }

  /* Show page: collapse two-column panel grid to single column */
  .entity-grid {
    grid-template-columns: 1fr;
  }

  /* Department tabs: horizontal scroll strip instead of wrapping */
  .user-department-tabs {
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: none;
    scrollbar-width: none;
  }

  .user-department-tabs .entity-tab {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Generic record-sheet card layout — applies to all record-sheet tables */
  .record-sheet {
    gap: 8px;
    overflow-x: visible;
  }

  .record-sheet .record-sheet-header {
    display: none;
  }

  .record-sheet .record-sheet-row {
    border: 1px solid;
    border-radius: 6px;
    display: grid;
    gap: 6px 12px;
    min-height: 0;
    min-width: 0;
    padding: 12px;
  }

  .record-sheet .record-sheet-actions {
    justify-content: flex-start;
    min-height: 0;
    padding: 0;
    padding-top: 6px;
  }

  .record-sheet .flip-editor-sheet {
    height: auto;
    min-height: 0;
  }

  .record-sheet .flip-editor-sheet .flip-editor-front {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    padding: 0;
  }

  .record-sheet .flip-editor-sheet .flip-editor-front .flip-editor-label {
    display: flex;
  }

  .record-sheet .flip-editor-sheet .flip-editor-front .flip-editor-label > span:first-child {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    opacity: 0.5;
    text-transform: uppercase;
  }

  .record-sheet .flip-editor-sheet .flip-editor-value {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .record-sheet .flip-editor-sheet .flip-editor-back {
    min-height: 0;
    padding: 0;
  }

  .record-sheet [data-label] {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .record-sheet [data-label]::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    opacity: 0.5;
    text-transform: uppercase;
  }

  /* Users: card grid layout */
  .record-sheet-users .record-sheet-row {
    grid-template-areas:
      "avatar name"
      "avatar email"
      "avatar role"
      "avatar manager"
      "actions actions";
    grid-template-columns: 52px 1fr;
  }

  .record-sheet-users .record-sheet-avatar-cell {
    align-self: center;
    grid-area: avatar;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-users .record-sheet-row > :nth-child(2) {
    align-self: end;
    grid-area: name;
    min-height: 0;
    overflow: visible;
    padding: 0;
    white-space: normal;
  }

  .record-sheet-users .record-sheet-row > :nth-child(3) {
    font-size: 13px;
    font-weight: 400;
    grid-area: email;
    min-height: 0;
    overflow: visible;
    padding: 0;
    text-overflow: clip;
    white-space: normal;
    word-break: break-all;
  }

  .record-sheet-users .record-sheet-row > :nth-child(4) {
    align-self: start;
    font-size: 13px;
    grid-area: role;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-users .record-sheet-manager-cell {
    font-size: 13px;
    grid-area: manager;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-users .record-sheet-manager-cell.is-empty {
    display: none;
  }

  .record-sheet-users .record-sheet-actions {
    grid-area: actions;
  }

  /* Standard Rates: card grid layout */
  .record-sheet-standard-rates .record-sheet-row {
    grid-template-areas:
      "code description"
      "rate tier"
      "dept dept"
      "actions actions";
    grid-template-columns: 1fr 1fr;
  }

  .record-sheet-standard-rates .record-sheet-row > :nth-child(1) { grid-area: code; }
  .record-sheet-standard-rates .record-sheet-row > :nth-child(2) { grid-area: description; }
  .record-sheet-standard-rates .record-sheet-row > :nth-child(3) { grid-area: rate; }
  .record-sheet-standard-rates .record-sheet-row > :nth-child(4) { grid-area: tier; }
  .record-sheet-standard-rates .record-sheet-row > :nth-child(5) { grid-area: dept; }

  .record-sheet-standard-rates .record-sheet-actions {
    grid-area: actions;
  }

  /* Expense Schedules: card grid layout */
  .record-sheet-expense-schedules .record-sheet-row {
    grid-template-areas:
      "code       description"
      "rate       unit"
      "dept       std-rate"
      "actions    actions";
    grid-template-columns: 1fr 1fr;
  }

  .record-sheet-expense-schedules .record-sheet-row > :nth-child(1) { grid-area: code; }
  .record-sheet-expense-schedules .record-sheet-row > :nth-child(2) { grid-area: description; }
  .record-sheet-expense-schedules .record-sheet-row > :nth-child(3) { grid-area: rate; }
  .record-sheet-expense-schedules .record-sheet-row > :nth-child(4) { grid-area: unit; }
  .record-sheet-expense-schedules .record-sheet-row > :nth-child(5) { grid-area: dept; }
  .record-sheet-expense-schedules .record-sheet-row > :nth-child(6) { grid-area: std-rate; }

  .record-sheet-expense-schedules .record-sheet-actions {
    grid-area: actions;
  }

  /* Companies: card grid layout */
  .record-sheet-companies .record-sheet-row {
    grid-template-areas:
      "avatar name"
      "avatar contact"
      "details details";
    grid-template-columns: 52px 1fr;
  }

  .record-sheet-companies .record-sheet-avatar-cell {
    align-self: center;
    grid-area: avatar;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-companies .record-sheet-row > :nth-child(2) {
    align-self: end;
    grid-area: name;
    min-height: 0;
    overflow: visible;
    padding: 0;
    white-space: normal;
  }

  .record-sheet-companies .record-sheet-row > :nth-child(3) {
    font-size: 13px;
    grid-area: contact;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-companies .record-sheet-row > :nth-child(4) {
    font-size: 13px;
    grid-area: details;
    min-height: 0;
    padding: 0;
  }

  /* Projects: card grid layout */
  .record-sheet-projects .record-sheet-row {
    grid-template-areas:
      "project project"
      "company company"
      "progress progress"
      "actions actions";
    grid-template-columns: 1fr 1fr;
  }

  .record-sheet-projects .record-sheet-row > :nth-child(1) {
    grid-area: project;
    min-height: 0;
    overflow: visible;
    padding: 0;
    white-space: normal;
  }

  .record-sheet-projects .record-sheet-row > :nth-child(2) {
    font-size: 13px;
    grid-area: company;
    min-height: 0;
    overflow: visible;
    padding: 0;
    white-space: normal;
  }

  .record-sheet-projects .record-sheet-row > :nth-child(3) {
    grid-area: progress;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-projects .record-sheet-actions {
    grid-area: actions;
  }

  /* Timesheets: card grid layout */
  .record-sheet-timesheets .record-sheet-row {
    grid-template-areas:
      "user    user"
      "week    hours"
      "status  status";
    grid-template-columns: 1fr 1fr;
  }

  .record-sheet-timesheets .record-sheet-row > :nth-child(1) {
    grid-area: user;
    min-height: 0;
    overflow: visible;
    padding: 0;
    white-space: normal;
  }

  .record-sheet-timesheets .record-sheet-row > :nth-child(2) {
    font-size: 13px;
    grid-area: week;
    min-height: 0;
    overflow: visible;
    padding: 0;
    white-space: normal;
  }

  .record-sheet-timesheets .record-sheet-row > :nth-child(3) {
    font-size: 13px;
    grid-area: hours;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-timesheets .record-sheet-row > :nth-child(4) {
    font-size: 13px;
    grid-area: status;
    min-height: 0;
    padding: 0;
  }

  /* Invoices: card grid layout */
  .record-sheet-invoices .record-sheet-row {
    grid-template-areas:
      "invoice invoice"
      "amount  amount"
      "state   state";
    grid-template-columns: 1fr 1fr;
  }

  .record-sheet-invoices .record-sheet-row > :nth-child(1) {
    grid-area: invoice;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-invoices .record-sheet-row > :nth-child(2) {
    font-size: 13px;
    grid-area: amount;
    min-height: 0;
    overflow: visible;
    padding: 0;
    white-space: normal;
  }

  .record-sheet-invoices .record-sheet-row > :nth-child(3) {
    font-size: 13px;
    grid-area: state;
    min-height: 0;
    padding: 0;
  }

  /* Sub Task Templates: card grid layout */
  .record-sheet-subtasks .record-sheet-row {
    grid-template-areas:
      "avatar title"
      "avatar dept"
      "actions actions";
    grid-template-columns: 52px 1fr;
  }

  .record-sheet-subtasks .record-sheet-avatar-cell {
    align-self: center;
    grid-area: avatar;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-subtasks .record-sheet-row > :nth-child(2) { grid-area: title; }
  .record-sheet-subtasks .record-sheet-row > :nth-child(3) { grid-area: dept; }

  .record-sheet-subtasks .record-sheet-actions {
    grid-area: actions;
  }

  /* Project Contacts: card grid layout */
  .record-sheet-project-contacts .record-sheet-row {
    grid-template-areas:
      "role    role"
      "contact company"
      "email   email"
      "phone   phone"
      "actions actions";
    grid-template-columns: 1fr 1fr;
  }

  .record-sheet-project-contacts .record-sheet-row > :nth-child(1) { grid-area: role; }

  .record-sheet-project-contacts .record-sheet-row > :nth-child(2) {
    font-size: 13px;
    grid-area: contact;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-project-contacts .record-sheet-row > :nth-child(3) {
    font-size: 13px;
    grid-area: company;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-project-contacts .record-sheet-row > :nth-child(4) {
    font-size: 13px;
    grid-area: email;
    min-height: 0;
    overflow: visible;
    padding: 0;
    word-break: break-all;
  }

  .record-sheet-project-contacts .record-sheet-row > :nth-child(5) {
    font-size: 13px;
    grid-area: phone;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-project-contacts .record-sheet-actions {
    grid-area: actions;
  }

  /* Project task sheet (embedded in project show): card grid layout */
  .project-task-sheet .record-sheet-row {
    grid-template-areas:
      "dept desc"
      "fee  billing"
      "po   po"
      "actions actions";
    grid-template-columns: 1fr 1fr;
  }

  .project-task-sheet .record-sheet-row > :nth-child(1) { grid-area: dept; }

  .project-task-sheet .record-sheet-row > :nth-child(2) {
    grid-area: desc;
    overflow: visible;
    white-space: normal;
  }

  .project-task-sheet .record-sheet-row > :nth-child(3) { grid-area: fee; }
  .project-task-sheet .record-sheet-row > :nth-child(4) { grid-area: billing; }

  .project-task-sheet .record-sheet-row > :nth-child(5) {
    grid-area: po;
    overflow: visible;
    white-space: normal;
  }

  .project-task-sheet .record-sheet-actions {
    grid-area: actions;
  }

  .project-task-sheet .task-subtask-row {
    display: block;
  }

  /* Standalone tasks index (has extra lock-status column): card grid layout */
  .record-sheet-tasks .record-sheet-row {
    grid-template-areas:
      "dept    dept"
      "desc    desc"
      "billing fee"
      "po      lock"
      "actions actions";
    grid-template-columns: 1fr 1fr;
  }

  .record-sheet-tasks .record-sheet-row > :nth-child(1) { grid-area: dept; }

  .record-sheet-tasks .record-sheet-row > :nth-child(2) {
    grid-area: desc;
    overflow: visible;
    white-space: normal;
  }

  .record-sheet-tasks .record-sheet-row > :nth-child(3) { grid-area: billing; }
  .record-sheet-tasks .record-sheet-row > :nth-child(4) { grid-area: fee; }

  .record-sheet-tasks .record-sheet-row > :nth-child(5) {
    grid-area: po;
    overflow: visible;
    white-space: normal;
  }

  .record-sheet-tasks .record-sheet-row > :nth-child(6) { grid-area: lock; }

  .record-sheet-tasks .record-sheet-actions {
    grid-area: actions;
  }

  /* Contacts sheet (uses contacts-specific class names): card grid layout */
  .contacts-sheet .record-sheet-row {
    grid-template-areas:
      "avatar name"
      "avatar company"
      "methods methods";
    grid-template-columns: 52px 1fr;
  }

  .contacts-sheet .contacts-sheet-avatar-cell {
    align-self: center;
    grid-area: avatar;
    min-height: 0;
    padding: 0;
  }

  .contacts-sheet .contact-name-cell {
    align-self: end;
    grid-area: name;
    min-height: 0;
    overflow: visible;
    padding: 0;
    white-space: normal;
  }

  .contacts-sheet .record-sheet-row > :nth-child(3) { grid-area: company; }
  .contacts-sheet .record-sheet-row > :nth-child(4) {
    grid-area: methods;
    min-height: 0;
    padding: 0;
  }
}

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

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

.configuration-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.configuration-panel-heading h2 { margin: 2px 0 0; }

.configuration-add-form,
.configuration-option-form {
  display: grid;
  grid-template-columns: minmax(130px, 1.2fr) minmax(130px, 1fr) 82px auto;
  align-items: end;
  gap: 10px;
}

.configuration-add-form {
  padding-bottom: 16px;
  border-bottom: 1px solid;
}

.skin-dark .configuration-add-form,
.skin-dark .configuration-option-row,
.skin-dark .project-tag-summary { border-color: var(--border-dark); }

.skin-light .configuration-add-form,
.skin-light .configuration-option-row,
.skin-light .project-tag-summary { border-color: var(--border-light); }

.configuration-option-list { display: grid; }

.configuration-option-row {
  padding: 14px 0;
  border-bottom: 1px solid;
}

.configuration-option-row:last-child { border-bottom: 0; }
.configuration-option-row.is-inactive { opacity: 0.62; }

.configuration-option-form {
  grid-template-columns: minmax(130px, 1.2fr) minmax(130px, 1fr) 82px auto auto;
}

.configuration-option-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.configuration-active-check { min-height: 42px; margin: 0; }

.configuration-tag-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  border: 0;
}

.configuration-tag-picker legend { width: 100%; margin-bottom: 4px; font-weight: 700; }

.configuration-tag-picker label,
.project-tag-form label { display: inline-flex; align-items: center; gap: 6px; }

.project-tag-summary {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid;
}

.configuration-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.project-tag-form { display: grid; gap: 8px; margin-top: 4px; }

@media (max-width: 980px) {
  .configuration-page-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .configuration-add-form,
  .configuration-option-form { grid-template-columns: 1fr; }
  .configuration-position-field { max-width: 120px; }
}

/* Ticket board directory: boards are containers; tickets live inside them. */
.ticket-boards-title-stack {
  display: grid;
  gap: 6px;
}

.ticket-boards-title-stack > span:last-child {
  font-size: 12px;
  font-weight: 600;
}

.skin-dark .ticket-boards-title-stack > span:last-child,
.skin-dark .ticket-board-description,
.skin-dark .ticket-board-card-footer > span,
.skin-dark .ticket-board-project-link {
  color: var(--muted-dark);
}

.skin-light .ticket-boards-title-stack > span:last-child,
.skin-light .ticket-board-description,
.skin-light .ticket-board-card-footer > span,
.skin-light .ticket-board-project-link {
  color: var(--muted-light);
}

.ticket-boards-page {
  display: grid;
  gap: 18px;
}

.ticket-board-tabs-shell {
  border-bottom: 2px solid;
  margin: calc(var(--app-body-gutter) * -1) calc(var(--app-body-gutter) * -1) 0;
  min-width: 0;
  padding: var(--app-body-gutter) var(--app-body-gutter) 0;
}

.skin-dark .ticket-board-tabs-shell {
  background: color-mix(in srgb, var(--bg-dark) 94%, var(--text-dark));
  border-bottom-color: var(--border-dark);
}

.skin-light .ticket-board-tabs-shell {
  background: color-mix(in srgb, var(--bg-light) 91%, var(--text-light));
  border-bottom-color: var(--border-light);
}

@media (max-width: 1080px) {
  .ticket-board-tabs-shell {
    margin: -16px -16px 0;
    padding: 16px 16px 0;
  }
}

.ticket-board-tabs {
  -webkit-overflow-scrolling: touch;
  border-bottom: 0;
  display: flex;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: none;
  padding-bottom: 4px;
  scrollbar-width: none;
  width: 100%;
}

.ticket-board-tabs::-webkit-scrollbar {
  display: none;
}

.ticket-boards-page .ticket-board-tabs {
  margin-bottom: 0;
  padding-bottom: 0;
}

.ticket-board-tab {
  flex: 0 0 auto;
  white-space: nowrap;
}

.ticket-board-tab.entity-tab-active::after {
  bottom: -2px;
  height: 4px;
  z-index: 1;
}

.ticket-board-stats {
  border-bottom: 1px solid;
  border-top: 1px solid;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ticket-board-stats > div {
  border-right: 1px solid;
  display: grid;
  gap: 3px;
  padding: 12px 14px;
}

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

.ticket-board-stats span,
.ticket-board-kind,
.ticket-board-metrics span {
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.ticket-board-stats strong {
  font-size: 19px;
  line-height: 1.1;
}

.skin-dark .ticket-board-stats,
.skin-dark .ticket-board-stats > div {
  border-color: var(--border-dark);
}

.skin-light .ticket-board-stats,
.skin-light .ticket-board-stats > div {
  border-color: var(--border-light);
}

.skin-dark .ticket-board-stats span,
.skin-dark .ticket-board-kind,
.skin-dark .ticket-board-metrics span {
  color: var(--muted-dark);
}

.skin-light .ticket-board-stats span,
.skin-light .ticket-board-kind,
.skin-light .ticket-board-metrics span {
  color: var(--muted-light);
}

.ticket-board-directory {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ticket-board-card {
  align-content: start;
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
}

.ticket-board-card-heading {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 52px minmax(0, 1fr);
}

.ticket-board-prefix {
  align-items: center;
  border: 1px solid;
  border-radius: 6px;
  display: flex;
  font-size: 11px;
  font-weight: 800;
  height: 48px;
  justify-content: center;
  overflow: hidden;
  padding: 5px;
  text-align: center;
  width: 52px;
}

.skin-dark .ticket-board-prefix {
  background: var(--primary-dark-soft);
  border-color: var(--border-dark);
}

.skin-light .ticket-board-prefix {
  background: var(--light-warm-avatar);
  border-color: var(--light-warm-border);
  color: var(--light-warm-avatar-text);
}

.ticket-board-title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ticket-board-title h2 {
  font-size: 16px;
  line-height: 1.2;
  margin: 0;
}

.ticket-board-project-link {
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-board-description {
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
  min-height: 35px;
}

.ticket-board-metrics {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ticket-board-metrics > div {
  border: 1px solid;
  border-radius: 6px;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
}

.ticket-board-metrics strong {
  font-size: 16px;
}

.skin-dark .ticket-board-metrics > div {
  border-color: var(--border-dark);
}

.skin-light .ticket-board-metrics > div {
  border-color: var(--border-light);
}

.ticket-board-workflow {
  align-content: start;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 25px;
}

.ticket-board-workflow > span {
  border: 1px solid;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 650;
  padding: 4px 6px;
}

.ticket-board-workflow strong {
  margin-left: 3px;
}

.skin-dark .ticket-board-workflow > span {
  background: var(--bg-dark-control);
  border-color: var(--border-dark);
}

.skin-light .ticket-board-workflow > span {
  background: var(--bg-light);
  border-color: var(--border-light);
}

.ticket-board-card-footer {
  align-items: center;
  border-top: 1px solid;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding-top: 12px;
}

.ticket-board-card-footer > span {
  font-size: 11px;
  font-weight: 600;
}

.skin-dark .ticket-board-card-footer {
  border-color: var(--border-dark);
}

.skin-light .ticket-board-card-footer {
  border-color: var(--border-light);
}

.ticket-board-empty {
  align-items: center;
  display: grid;
  gap: 8px;
  justify-items: center;
  min-height: 180px;
}

.ticket-board-filters {
  margin: 0 0 14px;
}

[data-ticket-list-region] {
  box-sizing: border-box;
  display: grid;
  gap: 18px;
  margin-inline: 7.5%;
  min-width: 0;
}

.ticket-full-board .tracker-ticket-list {
  padding-top: 20px;
}

[data-ticket-board-content-region] {
  display: grid;
  gap: 18px;
  min-width: 0;
}

[data-ticket-dialog-region] {
  display: contents;
}

.ticket-board-filters.is-collapsed.has-external-toggle {
  display: none;
}

.ticket-boards-page .ticket-board-filters,
.ticket-boards-page .ticket-state-tabs {
  margin-bottom: 0;
}

.ticket-board-filter-toolbar {
  display: flex;
  justify-content: flex-end;
}

.ticket-search-toggle {
  align-items: center;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  padding: 0;
  width: 40px;
}

.ticket-search-toggle svg {
  fill: none;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 18px;
}

.ticket-board-filter-panel {
  margin-top: 0;
}

.ticket-board-filter-toolbar + .ticket-board-filter-panel {
  margin-top: 10px;
}

.ticket-board-filter-panel[hidden] {
  display: none;
}

.ticket-board-filter-form {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.ticket-board-filter-form .field {
  flex: 1 1 16rem;
  margin: 0;
}

.ticket-include-cancelled {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  font-size: 13px;
}

.ticket-state-tabs {
  --ticket-state-tab-fade-size: 44px;
  -webkit-overflow-scrolling: touch;
  border-bottom: 0;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0 0 16px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: none;
  scrollbar-width: none;
  width: 100%;
}

.ticket-state-tabs::-webkit-scrollbar {
  display: none;
}

.ticket-state-tabs-shell {
  border-bottom: 2px solid;
  margin: -18px calc(var(--app-body-gutter) * -1) 0;
  min-width: 0;
  padding: 18px var(--app-body-gutter) 0;
}

.ticket-full-board .ticket-board-tabs-shell,
.ticket-full-board .ticket-state-tabs-shell,
.ticket-full-board .tracker-ticket-list {
  animation: ticket-board-content-enter 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: left top;
}

.ticket-full-board .ticket-state-tabs-shell {
  animation-delay: 45ms;
}

.ticket-full-board .tracker-ticket-list {
  animation-delay: 90ms;
}

@keyframes ticket-board-content-enter {
  from {
    opacity: 0;
    transform: translate3d(-12px, -7px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticket-full-board .ticket-board-tabs-shell,
  .ticket-full-board .ticket-state-tabs-shell,
  .ticket-full-board .tracker-ticket-list {
    animation: none;
  }
}

.skin-dark .ticket-state-tabs-shell {
  background: color-mix(in srgb, var(--bg-dark) 91%, var(--text-dark));
  border-bottom-color: var(--border-dark);
}

.skin-light .ticket-state-tabs-shell {
  background: color-mix(in srgb, var(--bg-light) 94%, var(--text-light));
  border-bottom-color: var(--border-light);
}

.ticket-boards-page .ticket-state-tabs {
  padding-bottom: 0;
}

.ticket-state-tab.entity-tab-active::after {
  bottom: -2px;
  height: 2px;
  z-index: 1;
}

@media (max-width: 1080px) {
  .ticket-state-tabs-shell {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 820px) {
  [data-ticket-list-region] {
    margin-inline: 16px;
  }
}

.ticket-state-tabs.is-overflowing-right {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--ticket-state-tab-fade-size)), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--ticket-state-tab-fade-size)), transparent 100%);
}

.ticket-state-tabs.is-overflowing-left {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ticket-state-tab-fade-size), #000 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--ticket-state-tab-fade-size), #000 100%);
}

.ticket-state-tabs.is-overflowing-left.is-overflowing-right {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ticket-state-tab-fade-size), #000 calc(100% - var(--ticket-state-tab-fade-size)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--ticket-state-tab-fade-size), #000 calc(100% - var(--ticket-state-tab-fade-size)), transparent 100%);
}

.ticket-state-tab {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  color: inherit;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  min-height: 40px;
  white-space: nowrap;
}

.ticket-state-tab.is-selected,
.ticket-state-tab.entity-tab-active {
  background: transparent;
  color: inherit;
}

.ticket-state-tab.is-selected::after,
.ticket-state-tab.entity-tab-active::after {
  background: var(--ticket-state-color);
}

.ticket-state-tab-swatch {
  background: var(--ticket-state-color);
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  height: 10px;
  width: 10px;
}

.ticket-state-tab.is-selected .ticket-state-tab-swatch {
  background: var(--ticket-state-color);
  border-color: rgba(0, 0, 0, 0.18);
}

.ticket-state-tab-count {
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  min-width: 1.5rem;
  padding: 1px 7px;
  text-align: center;
}

.ticket-state-color-fields {
  border: 0;
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
}

.ticket-state-color-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(7rem, 1fr) 3.25rem minmax(6rem, auto);
}

.ticket-state-color-preview {
  background: var(--ticket-state-color);
  border-radius: 999px;
  color: var(--ticket-state-text-color, #fff);
  font-size: 12px;
  padding: 4px 10px;
  text-align: center;
}

.ticket-condition-banner {
  border-left: 4px solid;
  margin: 0 0 16px;
  padding: 12px 14px;
}

.ticket-condition-banner.is-blocked {
  border-color: #c2410c;
}

.ticket-condition-banner.is-cancelled {
  border-color: #b91c1c;
}

.ticket-condition-form,
.ticket-dependency-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.ticket-dependency-list {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.ticket-dependency-gate {
  display: inline-block;
  font-size: 12px;
  margin-left: 6px;
}

.ticket-dependency-gate.is-satisfied {
  color: #15803d;
}

.ticket-dependency-gate.is-unsatisfied {
  color: #c2410c;
}

/* Beta folder navigation: keep the mobile drawer, replace the desktop sidebar. */
.app-nav-column {
  display: contents;
}

.app-folder-nav-shell {
  display: none;
}

body.navigation-display-icons-only .app-folder-nav-label,
body.navigation-display-icons-only .app-nav-label {
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (min-width: 1081px) {
  body.controller-users.folder-navigation-layout {
    --users-page-inset: 40px;
  }

  body.controller-users.folder-navigation-layout .app-content-wrapper {
    padding: 0 var(--users-page-inset) var(--users-page-inset);
  }

  body.controller-users.folder-navigation-layout .app-content-wrapper > .content-heading {
    margin: 0 calc(var(--users-page-inset) * -1) var(--users-page-inset);
    padding-inline: var(--users-page-inset);
  }

  body.controller-users.folder-navigation-layout .content-heading-title {
    font-size: 24px;
    gap: 9px;
  }

  body.controller-users.folder-navigation-layout .content-heading-title::before {
    height: 20px;
    width: 20px;
  }

  body.controller-users.folder-navigation-layout .users-list-panel .record-sheet-row {
    margin-left: 11px;
  }

  body.folder-navigation-layout .app-shell {
    grid-template-columns: 0 220px minmax(0, 1fr);
    transition: grid-template-columns 240ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  body.folder-navigation-layout .app-shell.is-utility-rail-visible {
    grid-template-columns: 72px 220px minmax(0, 1fr);
  }

  body.folder-navigation-layout .app-shell::before {
    border-bottom: 0;
  }

  body.folder-navigation-layout .app-header-brand {
    border-right: 0;
  }

  body.folder-navigation-layout .app-header-account,
  body.folder-navigation-layout .app-utility-rail {
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateX(-100%);
    transition: opacity 180ms ease, transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  body.folder-navigation-layout .app-shell.is-utility-rail-visible .app-header-account,
  body.folder-navigation-layout .app-shell.is-utility-rail-visible .app-utility-rail {
    border-right-color: #00C6F5;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  body.folder-navigation-layout .app-sidebar {
    display: none;
  }

  body.folder-navigation-layout .app-main {
    box-sizing: border-box;
    grid-column: 2 / 4;
    grid-row: 2;
    height: calc(100dvh - var(--app-chrome-header-height));
  }

  body.folder-navigation-layout .app-folder-nav-shell {
    align-items: stretch;
    background: #fff;
    display: flex;
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
    z-index: 4;
  }

  body.folder-navigation-layout .app-folder-nav {
    --folder-nav-left-fade-size: clamp(180px, 18vw, 260px);
    --folder-nav-right-fade-size: clamp(216px, 21.6vw, 312px);
    align-items: stretch;
    border-bottom: 1px solid #00C6F5;
    display: flex;
    flex: 1 1 auto;
    gap: 0;
    min-width: 0;
    overflow-x: auto;
    padding: 0 max(0px, calc(50vw - 72px));
    scrollbar-width: none;
  }

  body.folder-navigation-layout .app-folder-nav::-webkit-scrollbar {
    display: none;
  }

  body.folder-navigation-layout .app-folder-nav.is-overflowing-right {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--folder-nav-right-fade-size)), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--folder-nav-right-fade-size)), transparent 100%);
  }

  body.folder-navigation-layout .app-folder-nav.is-overflowing-left {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--folder-nav-left-fade-size), #000 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--folder-nav-left-fade-size), #000 100%);
  }

  body.folder-navigation-layout .app-folder-nav.is-overflowing-left.is-overflowing-right {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--folder-nav-left-fade-size), #000 calc(100% - var(--folder-nav-right-fade-size)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--folder-nav-left-fade-size), #000 calc(100% - var(--folder-nav-right-fade-size)), transparent 100%);
  }

  body.folder-navigation-layout .app-folder-nav-item {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #53637a;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 14.3px;
    font-weight: 600;
    gap: 7px;
    height: 72px;
    justify-content: center;
    padding: 0 18px;
    position: relative;
    text-decoration: none;
    transition: color 140ms ease;
    white-space: nowrap;
  }

  body.folder-navigation-layout .app-folder-nav-item:hover,
  body.folder-navigation-layout .app-folder-nav-item:focus-visible {
    background: transparent;
    color: #009FC8;
    outline: none;
    text-decoration: none;
  }

  body.folder-navigation-layout .app-folder-nav-item-active {
    background: var(--bg-light);
    color: #00C6F5;
  }

  body.folder-navigation-layout .app-folder-nav-item-active .app-nav-icon {
    color: #00C6F5;
  }

  body.folder-navigation-layout .app-folder-nav-group {
    color: #25364d;
    font-size: 12.1px;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-left: 0;
    text-transform: uppercase;
  }

  body.folder-navigation-layout .app-folder-nav-item .app-nav-icon {
    height: 16px;
    width: 16px;
  }

  body.folder-navigation-layout .app-utility-rail-toggle {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
  }

  body.folder-navigation-layout.skin-dark .app-folder-nav-shell {
    background: var(--bg-dark-elevated);
  }

  body.folder-navigation-layout.skin-dark .app-folder-nav {
    border-bottom-color: #00C6F5;
  }

  body.folder-navigation-layout.skin-dark .app-folder-nav-item {
    color: var(--muted-dark);
  }

  body.folder-navigation-layout.skin-dark .app-folder-nav-item:hover,
  body.folder-navigation-layout.skin-dark .app-folder-nav-item:focus-visible {
    background: transparent;
    color: #009FC8;
  }

  body.folder-navigation-layout.skin-dark .app-folder-nav-item-active {
    background: var(--bg-dark);
    color: #00C6F5;
  }

  body.folder-navigation-layout.skin-dark .app-folder-nav-item-active .app-nav-icon {
    color: #00C6F5;
  }

  body.folder-navigation-layout.skin-dark .app-folder-nav-group {
    color: var(--text-dark);
  }

  body.folder-navigation-layout.skin-light .app-content-wrapper > .content-heading {
    background: var(--bg-light);
  }

  body.folder-navigation-layout.navigation-layout-horizontal.skin-light .app-header-brand {
    background: #fff;
    box-shadow: none;
    z-index: 5;
  }

  body.folder-navigation-layout.skin-light .app-shell.is-utility-rail-visible .app-header-account,
  body.folder-navigation-layout.skin-light .app-shell.is-utility-rail-visible .app-utility-rail {
    border-right-color: var(--light-nav-divider);
  }

  body.folder-navigation-layout.skin-light .app-folder-nav {
    border-bottom-color: var(--light-nav-divider);
  }

  body.folder-navigation-layout.skin-light .app-folder-nav-item {
    color: #a5acb6;
  }

  body.folder-navigation-layout.skin-light .app-folder-nav-item:hover,
  body.folder-navigation-layout.skin-light .app-folder-nav-item:focus-visible {
    background: transparent;
    color: var(--light-nav-strong);
  }

  body.folder-navigation-layout.skin-light .app-folder-nav-item-active,
  body.folder-navigation-layout.skin-light .app-folder-nav-item-active .app-nav-icon {
    background: transparent;
    color: var(--light-nav-strong);
  }

  body.folder-navigation-layout.navigation-layout-vertical .app-shell::before {
    display: none;
  }

  body.folder-navigation-layout.navigation-layout-vertical .app-header-account {
    grid-column: 1;
    grid-row: 1;
    z-index: 5;
  }

  body.folder-navigation-layout.navigation-layout-vertical .app-utility-rail {
    grid-column: 1;
    grid-row: 2;
    z-index: 5;
  }

  body.folder-navigation-layout.navigation-layout-vertical .app-nav-column {
    border-right: 1px solid #00C6F5;
    display: flex;
    flex-direction: column;
    grid-column: 2;
    grid-row: 1 / 3;
    isolation: isolate;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    position: relative;
    z-index: 4;
  }

  body.folder-navigation-layout.navigation-layout-vertical .app-header-brand {
    border-right: 0;
    box-shadow: none;
    flex: 0 0 var(--app-chrome-header-height);
    height: var(--app-chrome-header-height);
  }

  body.folder-navigation-layout.navigation-layout-vertical .app-folder-nav-shell {
    background: transparent;
    display: flex;
    flex: 1 1 auto;
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
    overflow: hidden;
  }

  body.folder-navigation-layout.navigation-layout-vertical .app-folder-nav {
    --folder-nav-left-fade-size: 0px;
    --folder-nav-right-fade-size: 0px;
    --folder-nav-top-fade-size: 28px;
    --folder-nav-bottom-fade-size: 36px;
    border-bottom: 0;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px 0 16px;
    scrollbar-width: none;
  }

  body.folder-navigation-layout.navigation-layout-vertical .app-folder-nav::-webkit-scrollbar {
    display: none;
  }

  body.folder-navigation-layout.navigation-layout-vertical .app-folder-nav.is-overflowing-left,
  body.folder-navigation-layout.navigation-layout-vertical .app-folder-nav.is-overflowing-right,
  body.folder-navigation-layout.navigation-layout-vertical .app-folder-nav.is-overflowing-left.is-overflowing-right {
    -webkit-mask-image: none;
    mask-image: none;
  }

  body.folder-navigation-layout.navigation-layout-vertical .app-folder-nav.is-overflowing-top {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--folder-nav-top-fade-size), #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--folder-nav-top-fade-size), #000 100%);
  }

  body.folder-navigation-layout.navigation-layout-vertical .app-folder-nav.is-overflowing-bottom {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--folder-nav-bottom-fade-size)), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--folder-nav-bottom-fade-size)), transparent 100%);
  }

  body.folder-navigation-layout.navigation-layout-vertical .app-folder-nav.is-overflowing-top.is-overflowing-bottom {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--folder-nav-top-fade-size), #000 calc(100% - var(--folder-nav-bottom-fade-size)), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--folder-nav-top-fade-size), #000 calc(100% - var(--folder-nav-bottom-fade-size)), transparent 100%);
  }

  body.folder-navigation-layout.navigation-layout-vertical .app-folder-nav-item {
    height: auto;
    justify-content: flex-start;
    min-height: 40px;
    padding: 8px 18px;
    white-space: normal;
    width: 100%;
  }

  body.folder-navigation-layout.navigation-layout-vertical .app-main {
    grid-column: 3;
    grid-row: 1 / 3;
    height: 100dvh;
  }

  body.folder-navigation-layout.navigation-layout-vertical.skin-dark .app-nav-column {
    background: var(--bg-dark-elevated);
    border-right-color: #00C6F5;
  }

  body.folder-navigation-layout.navigation-layout-vertical.skin-dark .app-header-brand,
  body.folder-navigation-layout.navigation-layout-vertical.skin-dark .app-folder-nav-shell {
    background: transparent;
  }

  body.folder-navigation-layout.navigation-layout-vertical.skin-light .app-nav-column {
    background: #ffffff;
    border-right-color: var(--light-nav-divider);
  }

  body.folder-navigation-layout.navigation-layout-vertical.skin-light .app-header-brand,
  body.folder-navigation-layout.navigation-layout-vertical.skin-light .app-folder-nav-shell {
    background: transparent;
    box-shadow: none;
  }

  body.folder-navigation-layout.navigation-display-icons-only .app-folder-nav-group {
    display: none;
  }

  body.folder-navigation-layout.navigation-display-icons-only .app-folder-nav-item:not(.app-folder-nav-group) {
    gap: 0;
    min-width: 72px;
    padding-inline: 20px;
  }

  body.folder-navigation-layout.navigation-display-icons-only .app-folder-nav-item .app-nav-icon {
    height: 34px;
    width: 34px;
  }

  body.folder-navigation-layout.navigation-display-icons-only .app-folder-nav-item .app-nav-icon::before {
    height: 30px;
    width: 30px;
  }

  body.folder-navigation-layout.navigation-display-icons-only .app-folder-nav-item .app-nav-icon-rates::before,
  body.folder-navigation-layout.navigation-display-icons-only .app-folder-nav-item .app-nav-icon-expenses::before {
    font-size: 14px;
    width: auto;
  }

  body.folder-navigation-layout.navigation-layout-vertical.navigation-display-icons-only .app-shell {
    grid-template-columns: 0 88px minmax(0, 1fr);
  }

  body.folder-navigation-layout.navigation-layout-vertical.navigation-display-icons-only .app-shell.is-utility-rail-visible {
    grid-template-columns: 72px 88px minmax(0, 1fr);
  }

  body.folder-navigation-layout.navigation-layout-vertical.navigation-display-icons-only .app-header-brand {
    justify-content: center;
    padding-inline: 10px;
  }

  body.folder-navigation-layout.navigation-layout-vertical.navigation-display-icons-only .app-header-brand .carptech-brand-image {
    width: 64px;
  }

  body.folder-navigation-layout.navigation-layout-vertical.navigation-display-icons-only .app-folder-nav-item:not(.app-folder-nav-group) {
    height: 56px;
    justify-content: center;
    min-height: 56px;
    padding: 0;
    width: 100%;
  }

  body.folder-navigation-layout.navigation-layout-vertical.navigation-display-icons-only .app-folder-nav-item-active .app-nav-icon {
    background: radial-gradient(circle, rgba(184, 240, 255, 0.48) 0%, rgba(78, 214, 248, 0.2) 52%, transparent 74%);
    border-radius: 12px;
    filter: drop-shadow(0 0 7px rgba(156, 235, 255, 0.94)) drop-shadow(0 0 14px rgba(70, 210, 245, 0.52));
  }
}

.app-navigation-tooltip {
  background: #111820;
  border: 1px solid rgba(113, 225, 255, 0.58);
  border-radius: 7px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34), 0 0 14px rgba(0, 198, 245, 0.2);
  color: #f7fbff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  opacity: 0;
  padding: 7px 10px;
  pointer-events: none;
  position: fixed;
  transform: translateX(-4px);
  transition: opacity 120ms ease, transform 120ms ease;
  white-space: nowrap;
  z-index: 1000;
}

.app-navigation-tooltip.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.skin-light .app-navigation-tooltip {
  background: #f8fbfd;
  border-color: rgba(0, 159, 200, 0.5);
  box-shadow: 0 8px 24px rgba(22, 32, 49, 0.18), 0 0 14px rgba(0, 159, 200, 0.18);
  color: #162031;
}

@media (max-width: 1080px) {
  body.navigation-display-icons-only .app-sidebar {
    overflow-y: auto;
  }

  body.navigation-display-icons-only .app-sidebar .app-nav {
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 12px;
  }

  body.navigation-display-icons-only .app-sidebar .app-nav-heading {
    display: none;
  }

  body.navigation-display-icons-only .app-sidebar .app-nav-item {
    border-radius: 8px;
    gap: 0;
    justify-content: center;
    min-height: 64px;
    padding: 8px;
  }

  body.navigation-display-icons-only .app-sidebar .app-nav-icon {
    height: 34px;
    width: 34px;
  }

  body.navigation-display-icons-only .app-sidebar .app-nav-icon::before {
    height: 30px;
    width: 30px;
  }

  body.navigation-display-icons-only .app-sidebar .app-nav-icon-rates::before,
  body.navigation-display-icons-only .app-sidebar .app-nav-icon-expenses::before {
    font-size: 14px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.folder-navigation-layout .app-shell,
  body.folder-navigation-layout .app-header-account,
  body.folder-navigation-layout .app-utility-rail,
  .app-navigation-tooltip {
    transition: none;
  }
}

.ticket-board-empty h2 {
  font-size: 16px;
  margin: 0;
}

@media (max-width: 900px) {
  .ticket-board-directory {
    grid-template-columns: 1fr;
  }

  .ticket-board-tabs,
  .ticket-state-tabs {
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: none;
    scrollbar-width: none;
  }

  .ticket-state-tabs {
    padding-bottom: 6px;
  }

  .ticket-board-filter-form {
    align-items: stretch;
    flex-direction: column;
  }

  .ticket-state-color-row {
    grid-template-columns: minmax(0, 1fr) 3.25rem;
  }
}

@media (max-width: 600px) {
  .ticket-board-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .ticket-board-stats > div:nth-child(-n + 2) {
    border-bottom: 1px solid;
  }

  .ticket-board-card {
    padding: 12px;
  }

  .ticket-board-metrics {
    gap: 6px;
  }

  .ticket-board-metrics > div {
    padding: 8px;
  }
}

/* Hide on-page headings when running inside the Hotwire Native iOS shell,
   since the native nav bar already shows the page's <title>. */
body.hotwire-native .hide-native {
  display: none !important;
}

/* CarpTechOS additions layered on top of the latest DNA-O visual system. */
.app-nav-icon-aime,
.controller-aime .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a3 3 0 0 1 3 3v1h2.5A2.5 2.5 0 0 1 20 8.5v7A2.5 2.5 0 0 1 17.5 18H16v2.5a1.5 1.5 0 0 1-2.4 1.2L9 18H6.5A2.5 2.5 0 0 1 4 15.5v-7A2.5 2.5 0 0 1 6.5 6H9V5a3 3 0 0 1 3-3Zm-4 8.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm8 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z' fill='black'/%3E%3C/svg%3E");
}

.app-nav-icon-communications,
.controller-email-accounts .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-7l-5 4v-4H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm0 3.2V15h16V6.2l-8 5.2-8-5.2ZM5.7 5 12 9.1 18.3 5H5.7Z' fill='black'/%3E%3C/svg%3E");
}

.app-nav-icon-files,
.controller-shared-files .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6Zm2 2v10h14V8H5Zm6 2h2v3h3v2h-3v3h-2v-3H8v-2h3v-3Z' fill='black'/%3E%3C/svg%3E");
}

.app-nav-icon-platform {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 3 7v10l9 5 9-5V7l-9-5Zm0 2.3 5.8 3.2L12 10.7 6.2 7.5 12 4.3ZM5 9.2l6 3.3v6.9l-6-3.3V9.2Zm14 0v6.9l-6 3.3v-6.9l6-3.3Z' fill='black'/%3E%3C/svg%3E");
}

.shared-files-shell {
  gap: 16px;
}

.shared-files-intro,
.shared-files-library-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.shared-files-intro h2,
.shared-files-library h2,
.shared-files-upload-panel h2 {
  margin: 0;
}

.shared-files-stats {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.shared-files-stats span {
  border: 1px solid;
  border-radius: 999px;
  font-size: 12px;
  padding: 7px 10px;
}

.skin-dark .shared-files-stats span {
  border-color: var(--border-dark);
  color: var(--muted-dark);
}

.skin-light .shared-files-stats span {
  border-color: var(--light-warm-border);
  color: var(--muted-light);
}

.shared-files-layout {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(240px, 0.34fr) minmax(0, 1fr);
}

.shared-file-upload-form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.shared-file-upload-form .field {
  display: grid;
  gap: 6px;
}

.shared-file-upload-form input[type="file"] {
  max-width: 100%;
}

.shared-file-upload-form .field-help,
.shared-files-privacy-note {
  font-size: 12px;
  line-height: 1.45;
}

.shared-files-privacy-note {
  border-top: 1px solid;
  margin: 18px 0 0;
  padding-top: 14px;
}

.skin-dark .shared-file-upload-form .field-help,
.skin-dark .shared-files-privacy-note,
.skin-dark .shared-file-meta,
.skin-dark .shared-file-description,
.skin-dark .shared-files-empty span {
  color: var(--muted-dark);
}

.skin-light .shared-file-upload-form .field-help,
.skin-light .shared-files-privacy-note,
.skin-light .shared-file-meta,
.skin-light .shared-file-description,
.skin-light .shared-files-empty span {
  color: var(--muted-light);
}

.skin-dark .shared-files-privacy-note,
.skin-dark .shared-file-card {
  border-color: var(--border-dark);
}

.skin-light .shared-files-privacy-note,
.skin-light .shared-file-card {
  border-color: var(--light-warm-border);
}

.shared-file-list {
  display: grid;
  margin-top: 4px;
}

.shared-file-card {
  align-items: center;
  border-top: 1px solid;
  display: grid;
  gap: 12px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  padding: 14px 0;
}

.shared-file-card:first-child {
  border-top: 0;
}

.shared-file-icon {
  align-items: center;
  border: 1px solid;
  border-radius: 8px;
  display: flex;
  font-size: 9px;
  font-weight: 800;
  height: 44px;
  justify-content: center;
  letter-spacing: 0.04em;
  width: 44px;
}

.skin-dark .shared-file-icon {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-dark);
  color: var(--text-dark);
}

.skin-light .shared-file-icon {
  background: var(--bg-light);
  border-color: var(--light-warm-border);
  color: var(--primary-light);
}

.shared-file-copy {
  min-width: 0;
}

.shared-file-copy h3,
.shared-file-description {
  margin: 0;
}

.shared-file-copy h3 {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.shared-file-download-link {
  color: inherit;
  text-decoration: none;
}

.shared-file-download-link:hover {
  text-decoration: underline;
}

.shared-file-meta {
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
  gap: 5px 12px;
  margin: 4px 0 0;
}

.shared-file-description {
  font-size: 12px;
  line-height: 1.45;
  margin-top: 7px;
  overflow-wrap: anywhere;
}

.shared-file-actions {
  align-items: center;
  display: flex;
  gap: 6px;
}

.shared-file-actions form {
  margin: 0;
}

.shared-files-empty {
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 48px 16px;
  text-align: center;
}

@media (max-width: 900px) {
  .shared-files-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .shared-files-intro,
  .shared-files-library-heading {
    align-items: flex-start;
    gap: 12px;
  }

  .shared-files-intro {
    display: grid;
  }

  .shared-files-stats {
    flex-wrap: wrap;
  }

  .shared-file-card {
    align-items: start;
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .shared-file-icon {
    height: 38px;
    width: 38px;
  }

  .shared-file-actions {
    grid-column: 2;
  }
}

.app-utility-rail-user.skin-toggle {
  border: 1px solid transparent;
  cursor: pointer;
  padding: 0;
}

.skin-dark .app-utility-rail-user.skin-toggle {
  border-color: var(--border-dark);
}

.skin-light .utility-rail-user {
  background: var(--light-warm-avatar);
  color: var(--light-warm-avatar-text);
}

.record-sheet-row.is-archived {
  opacity: 0.68;
}

.record-sheet-primary {
  color: inherit;
}

.role-pill {
  border: 1px solid;
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 8px;
  width: max-content;
}

.skin-dark .role-pill {
  background: var(--bg-dark-control);
  border-color: var(--border-dark);
  color: var(--muted-dark);
}

.skin-light .role-pill {
  background: var(--bg-light);
  border-color: var(--light-warm-border);
  color: var(--light-warm-header-text);
}

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

.controller-aime .app-content-wrapper {
  padding-bottom: 48px;
}

.aime-workspace {
  margin: 0 auto;
  max-width: 980px;
  width: 100%;
}

.aime-conversation {
  border: 1px solid;
  border-radius: 22px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  height: min(760px, calc(100vh - 112px));
  height: min(760px, calc(100dvh - 112px));
  min-height: 0;
  overflow: hidden;
}

.skin-dark .aime-conversation {
  background: color-mix(in srgb, var(--bg-dark-elevated) 94%, var(--dna-green));
  border-color: color-mix(in srgb, var(--border-dark) 82%, var(--dna-tan));
}

.skin-light .aime-conversation {
  background: rgba(255, 255, 255, 0.92);
  border-color: color-mix(in srgb, var(--border-light) 80%, var(--dna-green));
}

.aime-conversation-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px 0;
}

.aime-conversation-switcher label {
  align-items: center;
  display: flex;
  gap: 8px;
}

.aime-conversation-switcher span {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.7;
}

.aime-offline-note {
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  font-size: 12px;
  margin: 8px 14px 0;
  padding: 8px 10px;
}

.aime-heading-label {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.62;
}

.aime-heading-presence {
  align-items: center;
  border: 1px solid;
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 600;
  gap: 7px;
  padding: 5px 9px;
  white-space: nowrap;
}

.skin-dark .aime-heading-presence { border-color: var(--border-dark); color: var(--muted-dark); }
.skin-light .aime-heading-presence { border-color: var(--border-light); color: var(--muted-light); }

.aime-heading-presence-dot {
  background: #4ade80;
  border-radius: 50%;
  height: 7px;
  width: 7px;
}

.aime-heading-presence-dot.is-paused { background: #f59e0b; }

.aime-chat-feed {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 24px;
  min-height: 0;
  overscroll-behavior: contain;
  overflow-y: auto;
  padding: 34px max(30px, 8%);
  scrollbar-gutter: stable;
}

.aime-chat-feed.is-empty {
  align-items: center;
  justify-content: center;
}

.aime-chat-welcome { max-width: 520px; padding: 48px 24px; text-align: center; }
.aime-chat-welcome-mark { color: var(--primary-accent); display: block; font-size: 32px; margin-bottom: 18px; }
.aime-chat-welcome h2 { font-size: clamp(25px, 4vw, 38px); font-weight: 650; letter-spacing: -0.04em; }
.aime-chat-welcome p { font-size: 15px; line-height: 1.6; margin-top: 10px; }
.skin-dark .aime-chat-welcome p { color: var(--muted-dark); }
.skin-light .aime-chat-welcome p { color: var(--muted-light); }

.aime-message {
  align-self: flex-start;
  max-width: min(78%, 680px);
}

.aime-message-user {
  align-self: flex-end;
  background: color-mix(in srgb, var(--primary-accent) 12%, transparent);
  border-radius: 18px 18px 5px 18px;
  padding: 13px 16px;
}

.aime-message-assistant { padding: 2px 0; }

.aime-message-meta {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.02em;
  margin-bottom: 7px;
}

.aime-message-meta span { font-weight: 500; opacity: 0.58; }
.aime-message-body { font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.aime-message-body p + p { margin-top: 0.8em; }
.aime-message-error { border-left: 3px solid rgba(220, 78, 78, 0.75); padding-left: 14px; }
.aime-listen-reply { font-size: 12px; margin-top: 8px; opacity: 0.82; }

.aime-response { display: grid; gap: 12px; }
.aime-response-lead { align-items: flex-start; display: grid; gap: 10px; grid-template-columns: auto minmax(0, 1fr); }
.aime-response-emoji { font-size: 18px; line-height: 1.45; }
.aime-response-label,
.aime-response-item-label { display: block; font-size: 11px; font-weight: 780; letter-spacing: 0.06em; margin-bottom: 2px; text-transform: uppercase; }
.skin-dark .aime-response-label,
.skin-dark .aime-response-item-label { color: color-mix(in srgb, var(--primary-accent) 75%, white); }
.skin-light .aime-response-label,
.skin-light .aime-response-item-label { color: color-mix(in srgb, var(--primary-accent) 78%, black); }
.aime-response-lead-text { font-size: 16px; font-weight: 580; line-height: 1.55; margin: 0; }
.aime-response-record { display: grid; gap: 8px; }
.aime-response-folder { border: 1px solid; border-radius: 11px; overflow: clip; }
.skin-dark .aime-response-folder { background: color-mix(in srgb, var(--bg-dark-panel) 74%, transparent); border-color: var(--border-dark); }
.skin-light .aime-response-folder { background: color-mix(in srgb, #fff 82%, var(--bg-light)); border-color: var(--border-light); }
.aime-response-folder > summary,
.aime-response-more > summary { align-items: center; cursor: pointer; display: flex; gap: 7px; font-size: 13px; font-weight: 720; list-style-position: inside; padding: 9px 11px; }
.aime-response-folder > summary:focus-visible,
.aime-response-more > summary:focus-visible { outline: 2px solid var(--primary-accent); outline-offset: -2px; }
.aime-response-folder > summary small { flex: 1 1 auto; font-size: 11px; font-weight: 500; opacity: 0.68; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aime-response-folder-content { border-top: 1px solid; display: grid; gap: 10px; padding: 11px; }
.skin-dark .aime-response-folder-content { border-color: var(--border-dark); }
.skin-light .aime-response-folder-content { border-color: var(--border-light); }
.aime-response-text { margin: 0; white-space: pre-wrap; }
.aime-response-list ul { margin: 5px 0 0; padding-left: 22px; }
.aime-response-list li + li { margin-top: 4px; }
.aime-response-more { margin-top: 7px; }
.aime-response-more > summary { border-radius: 8px; padding: 6px 8px; }
.aime-response-count { border: 1px solid currentColor; border-radius: 999px; font-size: 10px; line-height: 1; margin-left: auto; opacity: 0.72; padding: 3px 6px; }
.aime-response-group { margin-top: 2px; }
.aime-response-slot { align-items: center; border: 1px dashed; border-radius: 9px; display: grid; gap: 9px; grid-template-columns: auto minmax(0, 1fr); opacity: 0.76; padding: 10px; }
.aime-response-slot strong,
.aime-response-slot small { display: block; }
.aime-response-slot small { font-size: 11px; margin-top: 2px; }
.aime-response-empty { font-size: 12px; margin: 0; opacity: 0.68; }

.aime-composer {
  border: 1px solid;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  margin: 0 max(18px, 5%) 12px;
  padding: 6px 7px;
}

.skin-dark .aime-composer { background: var(--bg-dark-panel); border-color: color-mix(in srgb, var(--border-dark) 70%, var(--dna-tan)); }
.skin-light .aime-composer { background: #fff; border-color: color-mix(in srgb, var(--border-light) 70%, var(--dna-green)); }

.aime-composer textarea {
  background: transparent;
  border: 0;
  color: inherit;
  display: block;
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  min-height: 62px;
  padding: 9px 10px 6px;
  resize: vertical;
  width: 100%;
}

.aime-composer textarea:focus { box-shadow: none; outline: 0; }
.aime-composer textarea::placeholder { color: currentColor; opacity: 0.45; }

.aime-composer-bar,
.aime-composer-tools,
.aime-composer-actions,
.aime-composer-footnote {
  align-items: center;
  display: flex;
}

.aime-composer-bar { gap: 8px; justify-content: space-between; }
.aime-composer-tools { gap: 6px; min-width: 0; }
.aime-composer-actions { flex: 0 0 auto; gap: 6px; }

.aime-model-picker,
.aime-project-context {
  align-items: center;
  border: 1px solid;
  border-radius: 999px;
  display: flex;
  font-size: 11px;
  gap: 4px;
  height: 30px;
  max-width: 180px;
  padding: 1px 4px 1px 8px;
}

.skin-dark .aime-model-picker,
.skin-dark .aime-project-context { border-color: var(--border-dark); color: var(--muted-dark); }
.skin-light .aime-model-picker,
.skin-light .aime-project-context { border-color: var(--border-light); color: var(--muted-light); }
.aime-model-picker { border-color: color-mix(in srgb, var(--primary-accent) 45%, transparent); max-width: 145px; }

.aime-model-picker select,
.aime-project-context select {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 700;
  min-width: 0;
  padding: 3px 17px 3px 2px;
  text-overflow: ellipsis;
}

.aime-icon-button,
.aime-record-button,
.aime-voice-button,
.aime-text-button {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.aime-icon-button { border-radius: 50%; font-size: 16px; height: 32px; padding: 0; width: 32px; }
.aime-record-button {
  align-items: center;
  border: 1px solid;
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  gap: 6px;
  min-height: 34px;
  padding: 5px 10px;
  white-space: nowrap;
}
.aime-record-button > span:first-child { color: #d14343; font-size: 9px; }
.aime-record-button[aria-pressed="true"] { background: color-mix(in srgb, #d14343 10%, transparent); border-color: #d14343; }
.aime-record-button[aria-pressed="true"] > span:first-child { animation: aime-record-pulse 1.2s ease-in-out infinite; }
.aime-record-button:disabled { cursor: not-allowed; opacity: 0.45; }
.skin-dark .aime-record-button { border-color: var(--border-dark); }
.skin-light .aime-record-button { border-color: var(--border-light); }
.aime-voice-button {
  align-items: center;
  border: 1px solid;
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  gap: 6px;
  min-height: 32px;
  padding: 4px 10px;
}
.skin-dark .aime-voice-button { border-color: var(--border-dark); }
.skin-light .aime-voice-button { border-color: var(--border-light); }
.aime-voice-button:disabled { cursor: not-allowed; opacity: 0.45; }
.aime-voice-dot { background: currentColor; border-radius: 50%; height: 7px; opacity: 0.65; width: 7px; }
.aime-conversation.is-listening .aime-voice-button { background: color-mix(in srgb, var(--primary-accent) 15%, transparent); color: var(--primary-accent); }
.aime-conversation.is-listening .aime-voice-dot { animation: aime-voice-pulse 1.4s ease-in-out infinite; opacity: 1; }
.aime-conversation.is-speaking .aime-voice-dot { animation-duration: 0.55s; }
.aime-conversation.is-muted .aime-voice-dot { animation: none; background: #f59e0b; }
.aime-text-button { font-size: 11px; opacity: 0.7; padding: 5px; }
.aime-icon-button:hover, .aime-icon-button:focus-visible { background: color-mix(in srgb, var(--primary-accent) 12%, transparent); }
.aime-voice-button:hover:not(:disabled), .aime-voice-button:focus-visible { background: color-mix(in srgb, var(--primary-accent) 12%, transparent); }

@keyframes aime-voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 35%, transparent); transform: scale(0.9); }
  50% { box-shadow: 0 0 0 5px transparent; transform: scale(1.15); }
}

@keyframes aime-record-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

.aime-send-button { border-radius: 10px; min-height: 34px; min-width: 58px; padding: 6px 12px; }
.aime-composer-footnote { font-size: 10px; gap: 9px; min-height: 18px; padding: 4px 9px 0; }
.aime-composer-footnote .aime-audio-status { margin-left: auto; }
.aime-composer-footnote .aime-text-button { font-size: 10px; padding: 3px; }
.aime-composer-footnote [data-aime-voice-mute]:disabled { display: none; }
.aime-routing-status { opacity: 0.66; }
.aime-routing-shortcuts { opacity: 0.48; white-space: nowrap; }
.aime-live-transcript {
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.45;
  margin: 0 max(32px, 8%) 10px;
  min-height: 34px;
  padding: 8px 12px;
}
.skin-dark .aime-live-transcript { background: var(--bg-dark-control); color: var(--muted-dark); }
.skin-light .aime-live-transcript { background: var(--bg-light); color: var(--muted-light); }
.aime-voice-consent {
  border: 1px solid;
  border-radius: 18px;
  color: inherit;
  max-width: min(520px, calc(100vw - 32px));
  padding: 26px;
  width: 100%;
}
.skin-dark .aime-voice-consent { background: var(--bg-dark-panel); border-color: var(--border-dark); }
.skin-light .aime-voice-consent { background: #fff; border-color: var(--border-light); }
.aime-voice-consent::backdrop { background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(4px); }
.aime-voice-consent-mark { color: var(--primary-accent); font-size: 24px; margin-bottom: 10px; }
.aime-voice-consent h2 { font-size: 21px; letter-spacing: -0.025em; margin-bottom: 12px; }
.aime-voice-consent p { font-size: 13px; line-height: 1.55; margin-bottom: 10px; opacity: 0.78; }
.aime-voice-consent-check { align-items: flex-start; display: flex; font-size: 12px; font-weight: 650; gap: 9px; line-height: 1.45; margin: 18px 0; }
.aime-voice-consent-check input { flex: 0 0 auto; margin-top: 2px; }
.aime-voice-consent-actions { display: flex; gap: 9px; justify-content: flex-end; }
.aime-privacy-note { font-size: 10px; line-height: 1.4; opacity: 0.55; padding: 0 24px 16px; text-align: center; }
.aime-voice-handoff {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin: 0 16px 12px;
  padding: 10px 12px;
  border: 1px solid;
  border-radius: 12px;
}
.skin-dark .aime-voice-handoff { background: color-mix(in srgb, var(--bg-dark-panel) 88%, var(--dna-tan)); border-color: var(--border-dark); }
.skin-light .aime-voice-handoff { background: #f3f4f6; border-color: var(--border-light); }
.aime-voice-handoff p { font-size: 12px; line-height: 1.45; margin: 0; }
.aime-voice-handoff[hidden] { display: none; }

.aime-operations {
  border: 1px solid;
  border-radius: 16px;
  margin-top: 16px;
  overflow: hidden;
}

.skin-dark .aime-operations { background: var(--bg-dark-elevated); border-color: var(--border-dark); }
.skin-light .aime-operations { background: rgba(255, 255, 255, 0.75); border-color: var(--border-light); }

.aime-operations > summary,
.aime-operation-section > summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  list-style: none;
}

.aime-operations > summary::-webkit-details-marker,
.aime-operation-section > summary::-webkit-details-marker { display: none; }

.aime-operations > summary { align-items: center; gap: 16px; padding: 17px 20px; }
.aime-operations > summary strong { display: block; font-size: 13px; }
.aime-operations > summary small { display: block; font-size: 11px; font-weight: 400; margin-top: 3px; opacity: 0.65; }
.aime-operations-summary-meta { align-items: center; display: flex; gap: 12px; }
.aime-operations-summary-meta b { background: color-mix(in srgb, var(--primary-accent) 14%, transparent); border-radius: 999px; color: var(--primary-accent); font-size: 10px; padding: 5px 8px; }
.aime-operations[open] .aime-operations-summary-meta > span { transform: rotate(180deg); }

.aime-operations-body { border-top: 1px solid; padding: 18px; }
.skin-dark .aime-operations-body { border-color: var(--border-dark); }
.skin-light .aime-operations-body { border-color: var(--border-light); }

.aime-status-strip { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
.aime-status-strip > div { border: 1px solid; border-radius: 10px; min-width: 0; padding: 11px; }
.skin-dark .aime-status-strip > div { background: var(--bg-dark-control); border-color: var(--border-dark); }
.skin-light .aime-status-strip > div { background: var(--bg-light); border-color: var(--border-light); }
.aime-status-strip span { display: block; font-size: 10px; margin-bottom: 4px; opacity: 0.6; }
.aime-status-strip strong { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.aime-operation-section { border-top: 1px solid; }
.skin-dark .aime-operation-section { border-color: var(--border-dark); }
.skin-light .aime-operation-section { border-color: var(--border-light); }
.aime-operation-section > summary { align-items: baseline; gap: 16px; padding: 15px 5px; }
.aime-operation-section > summary span { font-size: 13px; font-weight: 700; }
.aime-operation-section > summary small { font-size: 11px; opacity: 0.62; text-align: right; }
.aime-operation-section > summary::after { content: "+"; font-size: 17px; font-weight: 400; opacity: 0.5; }
.aime-operation-section[open] > summary::after { content: "−"; }
.aime-operation-section > summary small { margin-left: auto; }
.aime-operation-content { padding: 3px 5px 22px; }
.aime-operation-content > p { line-height: 1.55; margin-bottom: 14px; }
.aime-operation-grid { display: grid; gap: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aime-operation-content h3 { font-size: 13px; margin-bottom: 10px; }
.aime-operation-content section > p { line-height: 1.5; margin-bottom: 10px; opacity: 0.7; }
.aime-operation-content .detail-list { margin-bottom: 12px; }
.aime-operation-content .detail-list dd { overflow-wrap: anywhere; }
.aime-inline-control { align-items: end; display: flex; gap: 10px; }
.aime-inline-control .field { flex: 1 1 auto; margin: 0; }
.aime-review-list { display: grid; gap: 10px; }
.aime-review-item { border: 1px solid; border-radius: 10px; padding: 14px; }
.skin-dark .aime-review-item { border-color: var(--border-dark); }
.skin-light .aime-review-item { border-color: var(--border-light); }
.aime-review-item p { line-height: 1.5; margin-top: 7px; }
.aime-budget-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aime-settings-form { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aime-settings-form .field { margin: 0; }
.aime-settings-form > .aime-auto-speak,
.aime-settings-form > .btn,
.aime-settings-divider { grid-column: 1 / -1; }
.aime-settings-divider { border-bottom: 1px solid; margin: 8px 0; position: relative; }
.skin-dark .aime-settings-divider { border-color: var(--border-dark); }
.skin-light .aime-settings-divider { border-color: var(--border-light); }
.aime-settings-divider span { display: inline-block; font-size: 12px; font-weight: 700; padding: 0 8px 5px 0; }
.aime-parity-findings { display: grid; gap: 8px; margin: 0; padding-left: 18px; }
.aime-parity-findings li { line-height: 1.45; }
.aime-parity-findings [data-parity-classification="implementation_gap"],
.aime-parity-findings [data-parity-classification="runtime_failure"],
.aime-parity-findings [data-parity-classification="connector_failure"] { color: var(--danger, #b42318); }

@media (max-width: 720px) {
  .controller-aime .app-content-wrapper { padding-bottom: 32px; }
  .aime-conversation { border-radius: 16px; height: calc(100vh - 90px); height: calc(100dvh - 90px); min-height: 0; }
  .aime-heading-label { display: none; }
  .aime-heading-presence { font-size: 10px; padding: 4px 7px; }
  .aime-chat-feed { gap: 20px; padding: 28px 18px; }
  .aime-composer-tools { gap: 4px; }
  .aime-voice-button { padding-inline: 8px; }
  .aime-voice-consent { padding: 21px; }
  .aime-live-transcript { margin-inline: 18px; }
  .aime-message { max-width: 90%; }
  .aime-message-assistant { max-width: 100%; width: 100%; }
  .aime-response-folder > summary { align-items: flex-start; flex-wrap: wrap; }
  .aime-response-folder > summary small { flex-basis: 100%; padding-left: 25px; white-space: normal; }
  .aime-composer { margin: 0 10px 10px; }
  .aime-composer-bar { align-items: flex-end; }
  .aime-composer-tools { flex-wrap: wrap; }
  .aime-model-picker { max-width: 155px; }
  .aime-project-context { max-width: 170px; }
  .aime-composer-actions { margin-left: auto; }
  .aime-text-button { min-height: 32px; padding-inline: 7px; }
  .aime-composer-footnote { flex-wrap: wrap; }
  .aime-privacy-note { padding-left: 16px; padding-right: 16px; }
  .aime-operations-body { padding: 12px; }
  .aime-status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aime-operation-grid,
  .aime-settings-form { grid-template-columns: 1fr; }
  .aime-inline-control { align-items: stretch; flex-direction: column; }
  .aime-budget-list { grid-template-columns: 1fr; }
}

/* DNA OS-aligned timesheet directory and row editor. */
.record-timesheet-user-avatar {
  font-size: 20px;
  height: 32px;
  width: 32px;
}

.timesheet-show-page,
.timesheet-sheet-section,
.timesheet-entry-grid {
  min-width: 0;
}

.timesheet-show-page {
  display: grid;
  gap: 16px;
}

.timesheet-hero {
  margin-bottom: 2px;
}

.timesheet-hero-icon {
  flex: 0 0 auto;
  height: 44px;
  width: 44px;
}

.timesheet-hero-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.timesheet-action-panel {
  padding: 16px 18px;
}

.timesheet-workflow-actions,
.timesheet-state-cluster,
.timesheet-sheet-heading {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.timesheet-state-cluster {
  justify-content: flex-start;
  min-width: 0;
}

.timesheet-sheet-section {
  display: grid;
  gap: 10px;
}

.timesheet-sheet-heading h2 {
  font-size: 16px;
  line-height: 1.2;
  margin: 0;
}

.timesheet-entry-grid {
  --timesheet-min-width: 1104px;
  display: grid;
  gap: 12px;
  overflow-x: auto;
}

.timesheet-entry-header,
.timesheet-entry-row {
  display: grid;
  min-width: var(--timesheet-min-width);
}

.timesheet-work-grid .timesheet-entry-header,
.timesheet-work-grid .timesheet-entry-row,
.timesheet-expense-grid .timesheet-entry-header,
.timesheet-expense-grid .timesheet-entry-row {
  grid-template-columns: 48px minmax(240px, 1.45fr) minmax(180px, 1fr) repeat(7, 56px) 60px 70px;
}

.timesheet-entry-header {
  border: 0;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 2px;
  text-transform: uppercase;
}

.timesheet-entry-header > div,
.timesheet-entry-date-header {
  align-items: center;
  display: flex;
  justify-content: center;
  min-width: 0;
  padding: 6px;
}

.timesheet-entry-date-header {
  flex-direction: column;
  gap: 2px;
}

.timesheet-entry-row {
  align-items: stretch;
  border: 1px solid;
  border-radius: 8px;
  overflow: hidden;
}

.timesheet-entry-row-editable {
  cursor: pointer;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.timesheet-entry-row-editable:focus {
  outline: none;
}

.timesheet-entry-avatar {
  align-items: center;
  display: flex;
  justify-content: center;
  min-width: 0;
  padding: 10px 6px;
  position: relative;
}

.timesheet-row-charge-icon {
  align-items: center;
  border: 1px solid;
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 750;
  height: 32px;
  justify-content: center;
  line-height: 1;
  width: 32px;
}

.timesheet-entry-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.timesheet-entry-meta-stack {
  align-content: center;
  gap: 4px;
  padding: 10px 12px;
}

.timesheet-row-project strong {
  font-size: 13px;
  line-height: 1.2;
}

.timesheet-row-details span:first-child {
  color: inherit;
  font-weight: 650;
}

.timesheet-day-value,
.timesheet-entry-total {
  align-items: center;
  display: flex;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  justify-content: flex-end;
  min-width: 0;
  padding: 10px 8px;
}

.timesheet-entry-total {
  font-weight: 750;
}

.timesheet-entry-actions {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 6px;
}

.timesheet-dialog-days {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.skin-dark .timesheet-entry-header {
  background: transparent;
  color: var(--muted-dark);
}

.skin-dark .timesheet-entry-row {
  background: var(--primary-dark-soft);
  border-color: #343438;
}

.skin-dark .timesheet-entry-row-editable:hover,
.skin-dark .timesheet-entry-row-editable:focus-visible {
  background: rgba(39, 39, 42, 0.46);
  box-shadow: inset 3px 0 0 var(--primary-accent);
}

.skin-light .timesheet-entry-header {
  background: transparent;
  color: var(--light-warm-header-text);
}

.skin-light .timesheet-entry-row {
  background: var(--bg-light-elevated);
  border-color: var(--border-light);
}

.skin-light .timesheet-entry-row-editable:hover,
.skin-light .timesheet-entry-row-editable:focus-visible {
  background: #f7fbf8;
  box-shadow: inset 3px 0 0 var(--primary-accent);
}

.skin-dark .timesheet-entry-meta span,
.skin-dark .timesheet-day-value {
  color: var(--muted-dark);
}

.skin-light .timesheet-entry-meta span,
.skin-light .timesheet-day-value {
  color: var(--muted-light);
}

.skin-dark .timesheet-row-charge-icon {
  background: #141414;
  border-color: var(--border-dark);
  color: var(--muted-dark);
}

.skin-light .timesheet-row-charge-icon {
  background: var(--light-warm-avatar);
  border-color: var(--light-warm-border);
  color: var(--muted-light);
}

@media (max-width: 820px) {
  .timesheet-hero {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .timesheet-hero-actions,
  .timesheet-workflow-actions {
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
  }

  .timesheet-dialog-days {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timesheet-entry-grid {
    gap: 8px;
    overflow-x: visible;
  }

  .timesheet-entry-grid .timesheet-entry-header {
    display: none;
  }

  .timesheet-entry-grid .timesheet-entry-row {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-radius: 8px;
    gap: 6px 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    padding: 12px;
  }

  .timesheet-entry-grid .timesheet-entry-avatar,
  .timesheet-entry-grid .timesheet-entry-meta,
.timesheet-entry-grid .timesheet-entry-actions {
    grid-column: 1 / -1;
  }

  .timesheet-entry-grid .timesheet-entry-avatar {
    justify-content: flex-start;
    min-height: 32px;
    padding: 0;
  }

  .timesheet-entry-grid .timesheet-entry-meta {
    padding: 0;
  }

  .timesheet-entry-grid .timesheet-day-value,
  .timesheet-entry-grid .timesheet-entry-total {
    border-top: 1px solid;
    justify-content: space-between;
    padding: 8px 0;
  }

  .timesheet-entry-grid .timesheet-day-value::before,
  .timesheet-entry-grid .timesheet-entry-total::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .timesheet-entry-grid .timesheet-entry-actions {
    justify-content: flex-start;
    padding: 0;
  }
}

/* CarpTech project show extensions for the DNA OS project layout. */
.project-specification-sheet,
.project-board-sheet,
.project-member-sheet {
  margin: 0;
  padding: 14px 16px;
}

.project-specification-sheet {
  --sheet-columns: minmax(280px, 1.45fr) minmax(220px, 1fr) minmax(100px, 0.45fr);
  --sheet-min-width: 660px;
}

.project-board-sheet {
  --sheet-columns: minmax(280px, 1.4fr) minmax(80px, 0.35fr) minmax(260px, 1.1fr);
  --sheet-min-width: 660px;
}

.project-ticket-work-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 14px 16px 0;
}

.project-ticket-work-column {
  border: 1px solid;
  border-radius: 8px;
  display: grid;
  min-width: 0;
  overflow: hidden;
}

.project-ticket-work-heading {
  align-items: start;
  border-bottom: 1px solid;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 11px 12px;
}

.project-ticket-work-heading h3,
.project-ticket-work-card h4 {
  margin: 0;
}

.project-ticket-work-heading h3 {
  font-size: 13px;
}

.project-ticket-work-heading p,
.project-ticket-work-card p,
.project-ticket-work-empty,
.project-ticket-work-more {
  font-size: 11px;
  line-height: 1.4;
  margin: 3px 0 0;
}

.project-ticket-work-list {
  align-content: start;
  display: grid;
  grid-auto-rows: max-content;
}

.project-ticket-work-card {
  border-bottom: 1px solid;
  display: grid;
  gap: 6px;
  padding: 11px 12px;
}

.project-ticket-work-card:last-child {
  border-bottom: 0;
}

.project-ticket-work-card h4 {
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.project-ticket-work-card h4 a {
  color: inherit;
}

.project-ticket-work-identity {
  align-items: center;
  display: flex;
  font-size: 10px;
  font-weight: 700;
  gap: 8px;
  justify-content: space-between;
  text-transform: uppercase;
}

.project-ticket-status,
.project-ticket-blocker {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.project-ticket-blocker {
  color: var(--danger);
}

.project-ticket-work-empty,
.project-ticket-work-more {
  padding: 11px 12px;
}

.project-ticket-work-column[data-work-state="in_process"] {
  border-top: 3px solid #3b82f6;
}

.project-ticket-work-column[data-work-state="thinking"] {
  border-top: 3px solid #d49a3a;
}

.project-ticket-work-column[data-work-state="held_up"] {
  border-top: 3px solid var(--danger);
}

.skin-dark .project-ticket-work-column,
.skin-dark .project-ticket-work-heading,
.skin-dark .project-ticket-work-card {
  border-color: var(--border-dark);
}

.skin-light .project-ticket-work-column,
.skin-light .project-ticket-work-heading,
.skin-light .project-ticket-work-card {
  border-color: var(--border-light);
}

.skin-dark .project-ticket-work-heading p,
.skin-dark .project-ticket-work-card p,
.skin-dark .project-ticket-work-empty,
.skin-dark .project-ticket-work-more,
.skin-dark .project-ticket-status {
  color: var(--muted-dark);
}

.skin-light .project-ticket-work-heading p,
.skin-light .project-ticket-work-card p,
.skin-light .project-ticket-work-empty,
.skin-light .project-ticket-work-more,
.skin-light .project-ticket-status {
  color: var(--muted-light);
}

.skin-dark .project-ticket-work-column[data-work-state="in_process"],
.skin-light .project-ticket-work-column[data-work-state="in_process"] {
  border-top-color: #3b82f6;
}

.skin-dark .project-ticket-work-column[data-work-state="thinking"],
.skin-light .project-ticket-work-column[data-work-state="thinking"] {
  border-top-color: #d49a3a;
}

.skin-dark .project-ticket-work-column[data-work-state="held_up"],
.skin-light .project-ticket-work-column[data-work-state="held_up"] {
  border-top-color: var(--danger);
}

.project-member-sheet {
  --sheet-columns: minmax(280px, 1.5fr) minmax(120px, 0.55fr) minmax(100px, 0.45fr);
  --sheet-min-width: 560px;
}

.project-secret-sheet {
  --sheet-columns: minmax(180px, 0.7fr) minmax(220px, 1.2fr) minmax(190px, 0.8fr);
  --sheet-min-width: 660px;
  margin: 0;
  padding: 14px 16px;
}

.project-secret-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.project-secret-value:not(.is-revealed) {
  color: var(--muted-dark);
}

.skin-light .project-secret-value:not(.is-revealed) {
  color: var(--muted-light);
}

.project-secret-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-secret-access-list {
  display: grid;
  gap: 8px;
}

.project-secret-access-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.45fr);
}

.project-secret-access-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.project-specification-sheet .record-sheet-cell,
.project-member-sheet .record-sheet-cell {
  align-content: center;
  display: grid;
  gap: 3px;
}

.project-section-empty {
  margin: 0 16px 14px;
}

.project-financial-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.project-financial-grid > div {
  border: 1px solid;
  border-radius: 6px;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
}

.project-financial-grid span,
.project-sync-item small {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.project-financial-grid strong {
  font-size: 13px;
  overflow-wrap: anywhere;
}

.project-invoice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-sync-list {
  border-top: 1px solid;
  display: grid;
}

.project-sync-item {
  align-items: center;
  border-bottom: 1px solid;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 10px 0;
}

.project-sync-item > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.skin-dark .project-financial-grid > div,
.skin-dark .project-sync-list,
.skin-dark .project-sync-item {
  border-color: var(--border-dark);
}

.skin-light .project-financial-grid > div,
.skin-light .project-sync-list,
.skin-light .project-sync-item {
  border-color: var(--border-light);
}

.skin-dark .project-financial-grid span,
.skin-dark .project-sync-item small {
  color: var(--muted-dark);
}

.skin-light .project-financial-grid span,
.skin-light .project-sync-item small {
  color: var(--muted-light);
}

@media (max-width: 820px) {
  .project-specification-sheet,
  .project-board-sheet,
  .project-member-sheet {
    padding: 12px;
  }

  .project-secret-sheet {
    padding: 12px;
  }

  .project-specification-sheet .record-sheet-header,
  .project-board-sheet .record-sheet-header,
  .project-member-sheet .record-sheet-header {
    display: none;
  }

  .project-secret-sheet .record-sheet-header {
    display: none;
  }

  .project-specification-sheet .record-sheet-row,
  .project-board-sheet .record-sheet-row,
  .project-member-sheet .record-sheet-row {
    gap: 8px;
    grid-template-columns: 1fr;
    min-width: 0;
    padding: 12px;
  }

  .project-secret-sheet .record-sheet-row {
    gap: 8px;
    grid-template-columns: 1fr;
    min-width: 0;
    padding: 12px;
  }

  .project-specification-sheet .record-sheet-cell,
  .project-board-sheet .record-sheet-cell,
  .project-member-sheet .record-sheet-cell {
    min-height: 0;
    padding: 0;
    white-space: normal;
  }

  .project-secret-sheet .record-sheet-cell {
    min-height: 0;
    padding: 0;
    white-space: normal;
  }

  .project-secret-access-row {
    grid-template-columns: 1fr;
  }

  .project-ticket-work-grid {
    grid-template-columns: 1fr;
    padding: 12px 12px 0;
  }
}
.project-knowledge-stats {
  margin-bottom: 18px;
}

.project-knowledge-intro {
  margin: 0 0 18px;
  opacity: 0.72;
}

.project-knowledge-sheet .record-sheet-header,
.project-knowledge-sheet .record-sheet-row {
  grid-template-columns: minmax(0, 1fr) 180px 100px;
}

.project-knowledge-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.project-knowledge-summary > div:first-child {
  display: grid;
  gap: 4px;
}

.project-knowledge-summary > div:first-child strong {
  font-size: 2rem;
}

.project-knowledge-summary > div:first-child span {
  opacity: 0.72;
}

.project-knowledge-required-docs,
.project-document-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.project-document-status-ready {
  border-color: rgba(67, 211, 158, 0.5);
  color: #43d39e;
}

.project-document-status-draft {
  border-color: rgba(245, 183, 72, 0.45);
  color: #f5b748;
}

.project-document-shell,
.project-document-editor {
  max-width: 1040px;
  margin: 0 auto 18px;
}

.project-document-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.25);
}

.project-document-header h2 {
  margin: 3px 0 0;
}

.project-document-meta {
  justify-content: flex-end;
  opacity: 0.72;
  font-size: 0.85rem;
}

.project-markdown-body {
  max-width: 820px;
  margin: 0 auto;
  padding: 34px 18px 16px;
  line-height: 1.7;
}

.project-markdown-body h1,
.project-markdown-body h2,
.project-markdown-body h3 {
  line-height: 1.25;
  margin: 1.5em 0 0.55em;
}

.project-markdown-body h1:first-child {
  margin-top: 0;
}

.project-markdown-body h1 {
  font-size: 2rem;
  padding-bottom: 0.35em;
  border-bottom: 1px solid rgba(127, 127, 127, 0.25);
}

.project-markdown-body h2 {
  font-size: 1.35rem;
}

.project-markdown-body pre,
.project-markdown-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.project-markdown-body code {
  padding: 0.12em 0.35em;
  border-radius: 4px;
  background: rgba(127, 127, 127, 0.13);
}

.project-markdown-body pre {
  overflow-x: auto;
  padding: 16px;
  border: 1px solid rgba(127, 127, 127, 0.25);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.project-markdown-body pre code {
  padding: 0;
  background: transparent;
}

.project-markdown-body blockquote {
  margin-left: 0;
  padding-left: 16px;
  border-left: 3px solid var(--primary-accent);
  opacity: 0.82;
}

.project-markdown-body a {
  color: var(--primary-accent);
}

.project-markdown-editor {
  width: 100%;
  min-height: 520px;
  resize: vertical;
  font: 0.92rem/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  tab-size: 2;
}

@media (max-width: 760px) {
  .project-knowledge-sheet .record-sheet-header,
  .project-knowledge-sheet .record-sheet-row {
    grid-template-columns: 1fr;
  }

  .project-knowledge-summary,
  .project-document-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .project-document-meta {
    justify-content: flex-start;
  }
}

/* CTOS0-32: Center Justified page composition is coupled to the horizontal
   navigation preference. Left Navigation keeps start-aligned composition. */
body.navigation-layout-horizontal.content-justification-center {
  --page-canvas-max-width: 1160px;
  --page-canvas-wide-max-width: 1480px;
}

@media (min-width: 1081px) {
  body.navigation-layout-horizontal.content-justification-center .app-content-wrapper[data-content-justification="center"] {
    padding-top: calc(var(--app-chrome-header-height) + var(--app-body-gutter));
  }

  body.navigation-layout-horizontal.content-justification-center.controller-tracker-boards .app-content-wrapper[data-content-justification="center"] {
    padding-top: calc(var(--app-chrome-header-height) + var(--app-body-gutter) - 50px);
  }

  body.navigation-layout-horizontal.content-justification-center .app-content-wrapper[data-content-justification="center"] > .content-heading {
    height: auto;
    margin: 0 0 var(--app-body-gutter);
    min-height: 0;
    padding: 0;
    position: static;
    top: auto;
    z-index: auto;
  }

  body.navigation-layout-horizontal.content-justification-center .app-content-wrapper[data-content-justification="center"] > .content-heading:not(:has(.content-heading-row)) {
    justify-content: center;
  }

  body.navigation-layout-horizontal.content-justification-center .app-content-wrapper[data-content-justification="center"] > .content-heading .content-heading-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    width: 100%;
  }

  body.navigation-layout-horizontal.content-justification-center .app-content-wrapper[data-content-justification="center"] > .content-heading .content-heading-row > .content-heading-title,
  body.navigation-layout-horizontal.content-justification-center .app-content-wrapper[data-content-justification="center"] > .content-heading .content-heading-row > .content-heading-title-group,
  body.navigation-layout-horizontal.content-justification-center .app-content-wrapper[data-content-justification="center"] > .content-heading .content-heading-row > .ticket-boards-title-stack,
  body.navigation-layout-horizontal.content-justification-center .app-content-wrapper[data-content-justification="center"] > .content-heading .content-heading-row > div:has(> .content-heading-title) {
    grid-column: 2;
    justify-self: center;
    position: relative;
  }

  body.navigation-layout-horizontal.content-justification-center .app-content-wrapper[data-content-justification="center"] > .content-heading .content-heading-row > .content-heading-title-group,
  body.navigation-layout-horizontal.content-justification-center .app-content-wrapper[data-content-justification="center"] > .content-heading .content-heading-row > .ticket-boards-title-stack,
  body.navigation-layout-horizontal.content-justification-center .app-content-wrapper[data-content-justification="center"] > .content-heading .content-heading-row > div:has(> .content-heading-title) {
    align-items: center;
    display: grid;
    gap: 6px;
    justify-items: center;
    text-align: center;
  }

  body.navigation-layout-horizontal.content-justification-center .app-content-wrapper[data-content-justification="center"] > .content-heading .content-heading-row > div:has(> .content-heading-title) > .setup-helper-copy {
    margin-top: 0;
  }

  body.navigation-layout-horizontal.content-justification-center .app-content-wrapper[data-content-justification="center"] > .content-heading .content-heading-add-link {
    left: 100%;
    margin-left: 8px;
    position: absolute;
    top: 50%;
    transform: translateY(calc(-50% - 4px));
    white-space: nowrap;
  }

  body.navigation-layout-horizontal.content-justification-center .app-content-wrapper[data-content-justification="center"] > .content-heading .dashboard-actions {
    grid-column: 3;
    justify-self: end;
  }

  body.navigation-layout-horizontal.content-justification-center .app-content-wrapper[data-content-justification="center"] > .content-heading .content-heading-row:has(> :nth-child(2)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    justify-items: center;
    row-gap: 16px;
  }

  body.navigation-layout-horizontal.content-justification-center .app-content-wrapper[data-content-justification="center"] > .content-heading .content-heading-row:has(> :nth-child(2)) > .content-heading-title,
  body.navigation-layout-horizontal.content-justification-center .app-content-wrapper[data-content-justification="center"] > .content-heading .content-heading-row:has(> :nth-child(2)) > .content-heading-title-group,
  body.navigation-layout-horizontal.content-justification-center .app-content-wrapper[data-content-justification="center"] > .content-heading .content-heading-row:has(> :nth-child(2)) > .ticket-boards-title-stack,
  body.navigation-layout-horizontal.content-justification-center .app-content-wrapper[data-content-justification="center"] > .content-heading .content-heading-row:has(> :nth-child(2)) > div:has(> .content-heading-title) {
    grid-column: 1;
    grid-row: 1;
  }

  body.navigation-layout-horizontal.content-justification-center .app-content-wrapper[data-content-justification="center"] > .content-heading .content-heading-row:has(> :nth-child(2)) > :not(.content-heading-title, .content-heading-title-group, .ticket-boards-title-stack, div:has(> .content-heading-title)) {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
  }

  body.navigation-layout-horizontal.content-justification-center .app-content-wrapper[data-content-justification="center"] > .page-canvas {
    margin-inline: auto;
    max-width: var(--page-canvas-max-width);
    width: 100%;
  }

  body.navigation-layout-horizontal.content-justification-center .app-content-wrapper[data-content-justification="center"] > .page-canvas.calendar-page-shell,
  body.navigation-layout-horizontal.content-justification-center .app-content-wrapper[data-content-justification="center"] > .page-canvas.ticket-boards-page,
  body.navigation-layout-horizontal.content-justification-center .app-content-wrapper[data-content-justification="center"] > .page-canvas.timesheet-show-page,
  body.navigation-layout-horizontal.content-justification-center .app-content-wrapper[data-content-justification="center"] > .page-canvas.communications-shell {
    max-width: var(--page-canvas-wide-max-width);
  }

  body.navigation-layout-horizontal.content-justification-center.controller-tracker-boards .app-content-wrapper[data-content-justification="center"] {
    padding-top: calc(var(--app-chrome-header-height) + var(--app-body-gutter) - 30px);
  }

  body.navigation-layout-horizontal.content-justification-center.controller-tracker-boards .app-content-wrapper[data-content-justification="center"] > .ticket-boards-heading {
    margin-bottom: 0;
  }

  body.navigation-layout-horizontal.content-justification-center.controller-tracker-boards .ticket-boards-heading .content-heading-row {
    margin-bottom: 15px;
  }

  body.navigation-layout-horizontal.content-justification-center.controller-tracker-boards .ticket-board-tabs-shell {
    margin-top: 0;
  }

  body.navigation-layout-horizontal.content-justification-center.controller-tracker-boards .app-content-wrapper[data-content-justification="center"] > .page-canvas.ticket-boards-page {
    width: 80vw;
  }

  body.navigation-layout-horizontal.content-justification-center.controller-tracker-boards .ticket-board-tabs-shell,
  body.navigation-layout-horizontal.content-justification-center.controller-tracker-boards .ticket-state-tabs-shell {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 10vw;
    padding-right: 10vw;
  }
}

body.navigation-layout-horizontal.content-justification-center [data-record-alignment="start"],
body.navigation-layout-horizontal.content-justification-center [data-record-alignment="start"] .record-sheet-row,
body.navigation-layout-horizontal.content-justification-center [data-record-alignment="start"] .record-sheet-cell,
body.navigation-layout-horizontal.content-justification-center [data-record-alignment="start"] .record-project-text,
body.navigation-layout-horizontal.content-justification-center [data-record-alignment="start"] .invoice-amount-period-cell,
body.navigation-layout-horizontal.content-justification-center .page-canvas .panel,
body.navigation-layout-horizontal.content-justification-center .page-canvas .record-sheet,
body.navigation-layout-horizontal.content-justification-center .add-record-dialog,
body.navigation-layout-horizontal.content-justification-center .add-record-dialog .dialog-body,
body.navigation-layout-horizontal.content-justification-center .invoice-document {
  text-align: start;
}

/* CTOS0-33: invert Center Justified composition for Left Navigation.
   Titles, canvases, lists, and panels stay upper-left in the content column. */
body.navigation-layout-vertical,
body.navigation-layout-vertical.content-justification-start {
  --page-canvas-max-width: none;
  --page-canvas-wide-max-width: none;
}

@media (min-width: 1081px) {
  body.navigation-layout-vertical.content-justification-start .app-main[data-content-origin="viewport-top"] > .app-content-wrapper[data-content-justification="start"] > .content-heading:not(:has(.content-heading-row)),
  body.navigation-layout-vertical.content-justification-start .app-content-wrapper[data-content-justification="start"] > .content-heading:not(:has(.content-heading-row)) {
    justify-content: start;
  }

  body.navigation-layout-vertical.content-justification-start .app-content-wrapper[data-content-justification="start"] > .content-heading .content-heading-row {
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  body.navigation-layout-vertical.content-justification-start .app-content-wrapper[data-content-justification="start"] > .content-heading .content-heading-row > .content-heading-title,
  body.navigation-layout-vertical.content-justification-start .app-content-wrapper[data-content-justification="start"] > .content-heading .content-heading-row > .content-heading-title-group,
  body.navigation-layout-vertical.content-justification-start .app-content-wrapper[data-content-justification="start"] > .content-heading .content-heading-row > .ticket-boards-title-stack,
  body.navigation-layout-vertical.content-justification-start .app-content-wrapper[data-content-justification="start"] > .content-heading .content-heading-row > div:has(> .content-heading-title) {
    justify-self: start;
    margin-inline: 0;
    position: relative;
    text-align: start;
  }

  body.navigation-layout-vertical.content-justification-start .app-content-wrapper[data-content-justification="start"] > .content-heading .content-heading-add-link {
    left: auto;
    margin-left: 10px;
    position: relative;
    transform: none;
  }

  body.navigation-layout-vertical.content-justification-start .app-content-wrapper[data-content-justification="start"] > .content-heading .dashboard-actions {
    justify-self: end;
  }

  body.navigation-layout-vertical.content-justification-start .app-main[data-content-origin="viewport-top"] > .app-content-wrapper[data-content-justification="start"] > .page-canvas,
  body.navigation-layout-vertical.content-justification-start .app-content-wrapper[data-content-justification="start"] > .page-canvas,
  body.navigation-layout-vertical.content-justification-start .app-content-wrapper[data-content-justification="start"] > .dashboard-page-shell,
  body.navigation-layout-vertical.content-justification-start .app-content-wrapper[data-content-justification="start"] > .setup-page-shell {
    margin-inline: 0;
    max-width: none;
    width: 100%;
  }
}

body.navigation-layout-vertical.content-justification-start [data-record-alignment="start"],
body.navigation-layout-vertical.content-justification-start [data-record-alignment="start"] .record-sheet-row,
body.navigation-layout-vertical.content-justification-start [data-record-alignment="start"] .record-sheet-cell,
body.navigation-layout-vertical.content-justification-start [data-record-alignment="start"] .record-project-text,
body.navigation-layout-vertical.content-justification-start [data-record-alignment="start"] .invoice-amount-period-cell,
body.navigation-layout-vertical.content-justification-start .page-canvas .panel,
body.navigation-layout-vertical.content-justification-start .page-canvas .record-sheet,
body.navigation-layout-vertical.content-justification-start .add-record-dialog,
body.navigation-layout-vertical.content-justification-start .add-record-dialog .dialog-body,
body.navigation-layout-vertical.content-justification-start .invoice-document {
  text-align: start;
}

body.navigation-layout-vertical .app-content-wrapper[data-content-justification="start"] > .page-canvas {
  margin-inline: 0;
  max-width: none;
}

@media (max-width: 1080px) {
  .page-canvas {
    margin-inline: 0;
    max-width: 100%;
  }
}